/* ==========================================================================
   Home da Vazto — versão 12, o miolo

   Carregado só por home.html (e por sobre.html), depois de home.css. O hero,
   a barra e o rodapé ficam intactos.

   Esta ronda é de refinamento, não de redesenho: a estrutura da versão 6
   manteve-se e mexeu-se no que estava a falhar — o método passou a fundo
   claro e recuperou o box da etapa, os objetivos ganharam presença, o
   percurso deixou de ser um carrossel emprestado das páginas de produto, a
   conversão passou a banda inteira sem geometria, e a montra voltou a caber
   no container de leitura.
   ========================================================================== */

:root{
  --bleed:calc(50% - 50vw);
  --pane-line:rgba(7,210,210,.18);
}


/* ==========================================================================
   2 · O MÉTODO F.U.T.U.R.O. — em fundo claro

   A secção era escura. Passa a papel com um degradê para cinza muito claro,
   como a Home antiga: mais leve, mais editorial, e o turquesa volta a ser
   destaque em vez de ser a única cor no ecrã.

   A faixa da equação continua escura e sangra de aresta a aresta. É o mesmo
   contraste que a Home antiga fazia com a barra em teal — e o dissolve, que
   é desenhado em tons de marca sobre preto, não sobrevive a um fundo claro.
   ========================================================================== */
/* A secção inteira é UMA composição, não cinco blocos empilhados. Os respiros
   entre a régua, o box, a faixa, o texto e os CTAs foram todos apertados: o
   que separava as peças era espaço a mais, e espaço a mais lê-se como
   assuntos diferentes. */
/* O respiro de cima passou para o campo, que é quem leva a marca d'água: se
   ficasse na secção, a imagem começava depois dele e a composição tinha uma
   faixa de cinza liso por cima. */
.metodo{ padding-block:0 clamp(38px,4.6vw,58px) }

/* --- a marca d'água -------------------------------------------------------
   Uma arquitectura em wireframe por trás do título, da régua e do box. É
   fundo, não ilustração: entra a menos de metade de opacidade, com o desenho
   à direita, como foi desenhada, e apagado onde o texto passa.

   Três coisas a mantêm no lugar de fundo:
   · a máscara horizontal — nada à esquerda, onde vive o texto, e o desenho a
     ganhar corpo só a partir do meio;
   · a máscara vertical — as arestas de cima e de baixo dissolvem-se no
     degradê da secção, para a imagem não ter fim visível;
   · `cover`, centrado, que preenche o campo em qualquer largura. `cover`
     escala pelo lado que falta e recorta o outro: a imagem é cortada, nunca
     esticada.

   A arquitectura continua a ler-se à direita sem que nada a empurre para
   lá — é onde ela foi desenhada. O que a máscara horizontal faz é só não a
   deixar chegar à coluna de texto.
   ========================================================================== */
.metodo__campo{
  position:relative; isolation:isolate;
  padding-block:clamp(52px,6.4vw,78px) clamp(26px,3vw,40px);
}
.metodo__campo::before{
  content:""; position:absolute; z-index:-1; inset:0;
  background:url("../img/home/bg-metodo.webp") no-repeat center center / cover;
  opacity:.5;
  /* Duas máscaras, cruzadas: `intersect` guarda só o que as duas deixam
     passar. Sem o cruzamento, a soma das duas — que é o comportamento por
     omissão — devolveria a imagem inteira. */
  -webkit-mask-image:
    linear-gradient(90deg,transparent 0%,rgba(0,0,0,.12) 30%,rgba(0,0,0,.62) 58%,#000 82%),
    linear-gradient(180deg,transparent 0%,#000 18%,#000 84%,transparent 100%);
  mask-image:
    linear-gradient(90deg,transparent 0%,rgba(0,0,0,.12) 30%,rgba(0,0,0,.62) 58%,#000 82%),
    linear-gradient(180deg,transparent 0%,#000 18%,#000 84%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
/* Num telemóvel a coluna de texto ocupa a largura toda e não sobra margem
   para a imagem viver ao lado dela: recua para um vestígio. */
@media (max-width:760px){
  .metodo__campo::before{
    opacity:.34;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 24%,#000 70%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0%,#000 24%,#000 70%,transparent 100%);
    -webkit-mask-composite:source-over;
    mask-composite:add;
  }
}
.metodo__head{ margin-block-end:clamp(26px,3.2vw,38px) }
.metodo__head .lede{ max-inline-size:44ch; margin-inline:auto }
/* O degradê do `g-tint` vai de #fefdfd ao centro a #e1e0e1 nas pontas, e o
   teal institucional sobre o tom mais escuro mede 4.47:1 — abaixo do mínimo
   para texto pequeno. O kicker e o botão de contorno desta secção assentam
   justamente aí, por isso passam ao tom fundo da marca. */
.metodo .kicker{ color:var(--teal-deep) }
.metodo .btn-ghost{ color:var(--teal-deep); border-color:color-mix(in srgb,var(--teal-deep) 40%,transparent) }
.metodo .btn-ghost:hover{ border-color:var(--teal-deep); background:rgba(2,81,89,.07) }

/* --- a régua -------------------------------------------------------------- */
.rail{ max-inline-size:820px; margin-inline:auto }
.rail__nodes{
  position:relative;
  display:flex; align-items:center; justify-content:space-between;
  padding-inline:2px;
}
/* O fio corre por trás dos discos, de centro a centro do primeiro e do
   último. Um fio que passa para fora das pontas sugere um percurso que
   começou noutro sítio. */
.rail__nodes::before{
  content:""; position:absolute; z-index:0;
  inset-block-start:50%; inset-inline:26px; block-size:1.5px; translate:0 -50%;
  background:linear-gradient(90deg,rgba(2,115,115,.16),rgba(2,115,115,.34) 50%,rgba(2,115,115,.16));
}
/* E o troço já percorrido enche-se até à letra acesa: a régua é navegação e
   é mapa. Sem esta distinção seriam seis botões iguais. */
.rail__nodes::after{
  content:""; position:absolute; z-index:1;
  inset-block-start:50%; inset-inline-start:26px; block-size:1.5px; translate:0 -50%;
  inline-size:calc((100% - 52px) * var(--p,0));
  background:linear-gradient(90deg,var(--teal),var(--cyan));
  box-shadow:0 0 12px rgba(7,210,210,.55);
  transition:inline-size .5s var(--ease);
}
.rail__no{ position:relative; z-index:2 }
.rail__no button{
  display:grid; place-items:center;
  inline-size:54px; block-size:54px; border-radius:50%;
  font-family:var(--display); font-weight:700; font-size:21px; line-height:1;
  color:var(--teal);
  background:linear-gradient(166deg,#ffffff,#eef7f7);
  border:1.5px solid rgba(2,115,115,.24);
  box-shadow:0 0 0 6px var(--paper), 0 14px 28px -20px rgba(1,46,53,.7);
  transition:transform .32s var(--ease), border-color .3s, color .3s, box-shadow .32s;
}
.rail__no button:hover{ border-color:var(--teal) }
.rail__no.is-feito button{ border-color:rgba(2,115,115,.5) }
.rail__no.is-on button{
  transform:scale(1.14); color:#02272c; border-color:transparent;
  background:radial-gradient(80% 74% at 30% 22%,var(--cyan-lit),var(--cyan) 58%,#049fa0);
  box-shadow:0 0 0 6px var(--paper), 0 0 0 9px rgba(7,210,210,.16),
             0 16px 34px -14px rgba(7,210,210,.85);
}

/* --- o box da etapa -------------------------------------------------------
   O box VIAJA até à letra acesa. Parado ao centro, era um painel de legendas
   e a régua era um menu; a andar, a letra parece puxar o seu conteúdo — que
   é o que a Home antiga fazia e o que dá sentido à sequência.

   `--x` é a posição do box e `--seta` a da bica, ambas medidas em JS a partir
   do DOM real. Nas pontas o box encosta e só a bica continua a apontar. */
.rail__cap{ position:relative; margin-block-start:20px; min-block-size:178px; --x:0px; --seta:50% }
.rail__card{
  position:absolute; inset-block-start:0; inset-inline-start:0;
  translate:var(--x) 0;
  inline-size:min(340px,100%);
  padding:clamp(20px,2.2vw,26px) clamp(20px,2.4vw,26px);
  border-radius:clamp(14px,1.6vw,20px);
  color:var(--on-dark);
  /* Pintado, não um cartão branco: era assim na Home antiga, e é o que lhe
     dá personalidade e o liga à letra, que também é pintada. */
  background:
    radial-gradient(88% 76% at 14% 6%, #0e8f92 0%, transparent 58%),
    linear-gradient(158deg,#067074 0%,#04565d 42%,#02333a 100%);
  box-shadow:
    inset 0 1px 0 rgba(160,255,255,.34),
    0 0 0 1px rgba(7,210,210,.28),
    0 26px 50px -26px rgba(1,32,38,.9);
  transition:translate .46s var(--ease), opacity .26s ease;
}
/* A bica, da cor do topo do box, apontada ao disco. */
.rail__cap::before{
  content:""; position:absolute; z-index:2;
  inset-block-start:-8px; inset-inline-start:var(--seta);
  inline-size:17px; block-size:17px; translate:-50% 0; rotate:45deg;
  background:#0b8589; border-start-start-radius:4px;
  transition:inset-inline-start .46s var(--ease);
}
.rail__cap.is-trocando .rail__card{ opacity:0 }
.rail__card .rail__l{
  display:grid; place-items:center;
  inline-size:32px; block-size:32px; border-radius:10px;
  font-family:var(--display); font-weight:700; font-size:16px; line-height:1;
  color:#02272c; background:linear-gradient(160deg,var(--cyan-lit),var(--cyan));
}
.rail__card b{
  display:block; margin-block-start:12px;
  font-family:var(--display); font-weight:700; letter-spacing:-.026em;
  font-size:clamp(19px,2.2vw,24px); line-height:1.1; color:#fff;
}
.rail__card em{
  display:block; margin-block-start:4px; font-style:normal;
  font-size:14px; font-weight:600; color:var(--cyan-lit);
}
.rail__card p{
  margin-block-start:11px; padding-block-start:11px;
  border-block-start:1px solid rgba(160,255,255,.2);
  font-size:14px; line-height:1.52; color:rgba(241,247,247,.86);
}
/* Num telemóvel não há distância para o box viajar: fica centrado e só a
   bica se move, que é a parte da associação que ainda se lê. */
@media (max-width:640px){
  .rail__card{ position:static; translate:none; inline-size:100%; margin-inline:auto }
  .rail__cap{ min-block-size:0 }
}

/* --- a equação -----------------------------------------------------------
   A faixa da Home antiga, reconstruída: teal chapado, os dois termos em
   itálico, e o resultado num anel VAZADO que atravessa a aresta em cima e em
   baixo.

   A faixa é o pseudo-elemento e tem ALTURA PRÓPRIA — mais baixa do que o
   círculo. Era esse o motivo de o círculo não vazar: a faixa media 296px e
   ele 232, por isso cabia inteiro lá dentro. Aqui a conta é ao contrário.
   ------------------------------------------------------------------------- */
.soma-art{
  position:relative;
  /* Encostada ao box da etapa: era aqui que ficava o maior vazio da página. */
  margin-block:clamp(18px,2.4vw,30px) 0;
  inline-size:100vw; margin-inline:var(--bleed);
  /* O contentor é mais alto do que a faixa: é a folga por onde o círculo sai. */
  padding-block:clamp(34px,4vw,46px);
}
.soma-art::before{
  content:""; position:absolute; z-index:0; inset-inline:0;
  inset-block-start:50%; translate:0 -50%;
  block-size:clamp(140px,13.5vw,162px);
  /* Chapado. Um degradê a atravessar a faixa fazia dela um fundo desenhado;
     na referência ela é uma cor, e a equação é o que se vê. */
  background:#0d5e60;
}
.soma-art .legacy__svg{ display:none }

.soma{
  position:relative; z-index:2;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:clamp(12px,1.8vw,26px);
  max-inline-size:var(--shell); margin-inline:auto;
  padding-inline:var(--gutter);
}
.soma__t{ text-align:center; min-inline-size:0 }
.soma__t b{
  display:block; font-family:var(--display); font-style:italic; line-height:1;
  font-size:clamp(30px,4.4vw,52px); letter-spacing:.005em; text-transform:uppercase;
  color:#fff;
}
/* Tradição em peso leve e Futuro em peso cheio — os dois em itálico. É a
   única coisa que distingue as duas palavras antes de se ler o que está por
   baixo delas. */
.soma__t--a b{ font-weight:400 }
.soma__t--b b{ font-weight:700 }
.soma__t span{
  display:block; margin-block-start:10px; font-size:clamp(13.5px,1.5vw,16px);
  color:rgba(241,247,247,.9);
}
.soma__t i{ font-style:normal; color:var(--cyan); padding-inline:3px }
.soma__op{
  font-family:var(--display); font-weight:400; line-height:1;
  font-size:clamp(28px,3.4vw,42px); color:var(--cyan);
  /* Sobem para a linha das palavras, não para o meio do bloco: com a linha de
     apoio por baixo, um operador centrado no bloco fica a meio do nada. */
  padding-block-end:clamp(20px,2.4vw,30px);
}

/* O resultado: um ANEL, sem preenchimento. Sobre a faixa mostra o teal; fora
   dela mostra o cinza da página. É esse duplo fundo que faz o transbordo
   ler-se — um círculo pintado, mesmo a vazar, parece só uma bola pousada. */
.soma__r{
  position:relative; z-index:2;
  display:grid; place-items:center; text-align:center;
  inline-size:clamp(190px,20vw,240px); aspect-ratio:1; padding:26px;
  border-radius:50%;
  border:4px solid var(--cyan-lit);
  background:transparent;
  /* Uma sombra suave, como na Home antiga — profundidade, não brilho. */
  box-shadow:0 18px 34px -20px rgba(1,32,38,.5);
  /* Encosta ao "=", que na referência quase lhe toca. */
  margin-inline-start:clamp(-16px,-1.4vw,-8px);
}
.soma__r b{
  font-family:var(--display); font-weight:700; font-style:italic; line-height:1.18;
  font-size:clamp(17px,2vw,23px); color:#fff;
}

/* Quebrar uma equação é pior do que empilhá-la: o operador acaba na linha de
   cima do termo que junta. No estreito passa a coluna — e cresce, porque o
   que sobrava era largura por aproveitar e não espaço a mais.

   Empilhada, a faixa deixa de poder ser uma tira fina: passa a cobrir o
   bloco todo, e o círculo continua a vazar por baixo dela. */
@media (max-width:820px){
  .soma-art{ padding-block:0 }
  .soma-art::before{
    /* O quanto a faixa acaba acima do pé do bloco. É esta medida que
       decide se o texto dentro do anel assenta em teal ou no cinza da
       página: a 768px, com 120px, ele saía 26px por baixo da faixa e ficava
       branco sobre cinza claro — 1.3:1. */
    inset-block:0 clamp(56px,13vw,80px); block-size:auto;
    inset-block-start:0; translate:none;
  }
  .soma{ flex-direction:column; gap:18px; padding:clamp(34px,8vw,46px) 12px 0 }
  .soma__op{ padding-block-end:0; font-size:34px }
  .soma__t{ inline-size:100% }
  .soma__t b{ font-size:clamp(34px,10vw,46px) }
  .soma__t span{ font-size:15px }
  .soma__r{
    inline-size:min(268px,78vw); margin-inline-start:0; border-width:4px;
  }
  .soma__r b{ font-size:clamp(19px,5.4vw,23px) }
}

/* --- a definição e o caminho ---------------------------------------------- */
/* Texto ao centro e CTAs por baixo — a mesma lógica do hero, e não texto à
   esquerda com botões à direita. */
.metodo__foot{
  display:grid; justify-items:center; text-align:center;
  margin-block-start:clamp(24px,3vw,36px);
}
.metodo__def{
  font-family:var(--display); font-weight:400; letter-spacing:-.02em;
  font-size:clamp(17px,2vw,22px); line-height:1.34; color:var(--text);
  max-inline-size:46ch; margin-inline:auto; text-wrap:balance;
}
.metodo__def b{ font-weight:700; color:var(--teal) }
.metodo__foot .actions{ justify-content:center; margin-block-start:clamp(24px,2.8vw,32px) }
/* No estreito o bloco do método deixa de ser uma adaptação do desktop: texto
   e botões ao centro, largura de leitura confortável, um botão por linha e
   ambos com alvo de toque cheio. */
@media (max-width:899px){
  .metodo__foot{ justify-items:center; text-align:center }
  .metodo__def{ max-inline-size:34ch; margin-inline:auto }
  .metodo__acoes{ flex-direction:column; align-items:stretch; inline-size:min(340px,100%); margin-inline:auto }
  .metodo__acoes .btn,
  .metodo__acoes .btn-ghost{ inline-size:100%; min-block-size:54px }
}


/* ==========================================================================
   3 · OBJETIVOS + SETORES QUE ATUAMOS
   ========================================================================== */
.eco{ padding-block:clamp(56px,7vw,88px) clamp(30px,4vw,52px) }

.eco__aims{ padding-block-end:clamp(32px,4.2vw,50px); border-block-end:1px solid var(--rule-dark) }
/* O título dos objetivos usa o `.head` do sistema — centrado, como as
   outras aberturas da Home. */
.eco__aims .head{ margin-block-end:clamp(26px,3.4vw,42px) }

/* --- os cinco objetivos --------------------------------------------------
   OBJETIVOS NÃO SÃO ETAPAS: nenhuma seta entre eles, nenhuma conexão, nenhum
   número, nenhuma sequência, nenhuma placa activa. Cinco placas do mesmo
   tamanho e do mesmo peso.

   E o cartão é limpo. A versão anterior enchia cada um com grelha de chão,
   arcos, trama de pontos, partículas e pódio — cada camada defensável
   sozinha, o conjunto poluído. O acabamento não vem de acrescentar planos;
   vem de um desenho bem feito com espaço à volta.
   ------------------------------------------------------------------------- */
.aims{ display:grid; gap:clamp(12px,1.2vw,18px); grid-template-columns:repeat(2,minmax(0,1fr)) }
@media (min-width:900px){ .aims{ grid-template-columns:repeat(5,minmax(0,1fr)) } }
.aim{
  position:relative; overflow:hidden; min-inline-size:0;
  display:flex; flex-direction:column;
  padding:clamp(24px,2.4vw,30px) clamp(20px,2vw,26px) clamp(26px,2.6vw,32px);
  border-radius:clamp(16px,1.8vw,22px);
  background:linear-gradient(168deg,rgba(241,247,247,.05),rgba(241,247,247,.014));
  border:1px solid var(--rule-dark);
  transition:border-color .34s ease, transform .34s var(--ease);
}
/* Um único véu da cor do objetivo no canto de cima. É o que dá temperatura ao
   cartão sem lhe pôr uma cor de fundo. */
.aim::before{
  content:""; position:absolute; inset-block-start:-40%; inset-inline-start:-30%;
  inline-size:100%; block-size:100%; pointer-events:none;
  background:radial-gradient(closest-side, color-mix(in srgb,var(--t) 16%,transparent), transparent 72%);
}
.aim:hover{ transform:translateY(-4px); border-color:color-mix(in srgb,var(--t) 38%,transparent) }

/* O desenho ao centro, com ar à volta — é o espaço que o faz parecer
   desenhado e não colado. */
.aim__arte{
  position:relative; display:block;
  margin-block:clamp(6px,1vw,12px) auto;
  padding-inline:clamp(4px,1vw,10px);
}
.aim__arte svg{ inline-size:100%; block-size:auto; display:block; overflow:visible }
/* O brilho de néon vive aqui e não em cada traço: um filtro só, herdado por
   tudo o que o desenho tem dentro. */
.obj-desenho{ filter:drop-shadow(0 0 5px color-mix(in srgb,var(--t) 55%,transparent)) }

/* O filete curto da cor do objetivo, entre o desenho e o nome. */
.aim__risco{
  display:block; inline-size:26px; block-size:3px; border-radius:3px;
  margin-block:clamp(22px,2.6vw,30px) 12px;
  background:var(--t);
}
.aim b{
  position:relative;
  font-family:var(--display); font-weight:700; letter-spacing:-.022em;
  font-size:clamp(16px,1.7vw,19px); line-height:1.16; color:#fff;
  text-wrap:balance;
}

/* --- o que se mexe -------------------------------------------------------
   Duas coisas, e só. Um risco de luz percorre o traço principal, e a poça no
   pé respira. Tudo o resto foi tirado: cinco cartões com seis animações cada
   não é sofisticação, é ruído a mexer.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  .obj-fio path{
    stroke-dasharray:44 460;
    animation:obj-corre 5s cubic-bezier(.5,0,.5,1) infinite;
    animation-delay:var(--d,0ms);
  }
  .obj-poca{ animation:obj-respira 6.5s ease-in-out infinite; animation-delay:var(--d,0ms) }
}
@keyframes obj-corre{
  0%   { stroke-dashoffset:504; opacity:0 }
  14%  { opacity:1 }
  74%  { opacity:1 }
  100% { stroke-dashoffset:0; opacity:0 }
}
@keyframes obj-respira{ 0%,100%{ opacity:.55 } 50%{ opacity:1 } }

/* No estreito duas colunas, e a última ocupa a linha inteira em vez de ficar
   sozinha e meia. */
@media (max-width:899px){
  .aim:last-child{ grid-column:1 / -1 }
  .aim:last-child .aim__arte{ max-inline-size:300px; margin-inline:auto }
}

/* --- o ambiente da secção -------------------------------------------------
   O fundo é da SECÇÃO INTEIRA, não de uma caixa atrás do prédio: do lado
   esquerdo do texto ao lado direito da ilustração, do topo ao fim. A textura
   estava só por trás do desenho, e por isso o texto parecia estar noutro
   sítio da página.

   Três camadas, todas em pseudo-elementos da secção para não gastarem
   marcação: o chão em perspectiva na metade de baixo, a rede de pontos
   espalhada, e um véu radial que abre a zona da leitura.
   ------------------------------------------------------------------------- */
.eco{ position:relative; isolation:isolate }
/* 1 · o chão em perspectiva. As linhas horizontais apertam à medida que
   sobem, que é o que dá a fuga; as verticais abrem em leque. */
.eco::before{
  content:""; position:absolute; z-index:-2; inset-inline:0;
  inset-block-end:0; block-size:62%;
  pointer-events:none;
  background-image:
    repeating-linear-gradient(to top, rgba(7,210,210,.22) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(to right, rgba(7,210,210,.16) 0 1px, transparent 1px 60px);
  -webkit-mask-image:linear-gradient(to top, #000 0%, rgba(0,0,0,.5) 42%, transparent 88%);
  mask-image:linear-gradient(to top, #000 0%, rgba(0,0,0,.5) 42%, transparent 88%);
}
/* 2 · a rede de pontos, por toda a secção. Mais densa nas laterais, apagada
   ao centro — é lá que está o texto e a ilustração. */
.eco::after{
  content:""; position:absolute; z-index:-2; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(110,245,245,.24) 1px, transparent 1px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(78% 62% at 50% 46%, transparent 34%, #000 100%);
  mask-image:radial-gradient(78% 62% at 50% 46%, transparent 34%, #000 100%);
  opacity:.7;
}
/* 3 · um véu por baixo da coluna de texto: a textura passa por trás dela mas
   não lhe rouba contraste. */
.eco__grid{ position:relative }
.eco__say{ position:relative; z-index:1 }
.eco__say::before{
  content:""; position:absolute; z-index:-1;
  inset:clamp(-24px,-2.4vw,-16px) clamp(-30px,-3vw,-20px);
  border-radius:clamp(18px,2vw,26px); pointer-events:none;
  background:radial-gradient(72% 68% at 30% 46%, rgba(3,16,20,.72), transparent 74%);
}

/* --- o texto e o desenho --------------------------------------------------- */
.eco__grid{
  display:grid; gap:clamp(24px,3vw,44px); align-items:center;
  margin-block-start:clamp(30px,4vw,48px);
}
@media (min-width:1000px){
  .eco__grid{ grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr) }
}
.eco__say .h2{ max-inline-size:12ch }
.eco__say .lede{ margin-block-start:16px; max-inline-size:46ch }
.eco__say .lede + .lede{ margin-block-start:12px }
.eco__say .actions{ justify-content:flex-start; margin-block-start:24px }

/* `margin-inline:auto` tem de sair junto com o tecto em ecrã largo. Uma
   margem automática no eixo em linha cancela o `stretch` de um item de
   grelha: a caixa passa a shrink-to-fit e um <svg> sem largura intrínseca
   resolve nos 300px que o CSS dá por omissão a um elemento substituído. */
.eco__art{ position:relative; margin-inline:auto }
.eco__art svg{ inline-size:100%; block-size:auto; display:block }
/* Sem fundo próprio: a secção inteira já tem o seu ambiente, e um segundo
   halo por trás do desenho desenhava um rectângulo dentro do rectângulo. */
@media (min-width:1000px){ .eco__art{ margin-inline:0 } }

/* No telemóvel o desenho sangra de aresta a aresta e recebe a altura que
   precisa. */
@media (max-width:999px){
  .eco__art{
    inline-size:100vw; margin-inline:var(--bleed);
    padding-inline:6px; margin-block-start:clamp(18px,3vw,28px);
  }
}


/* ==========================================================================
   4 · COMO ATUAMOS — quatro placas alinhadas sobre um fio

   As quatro placas na mesma linha: mesma largura, mesma altura, mesma base.
   Cada uma com um numeral grande e apagado ao fundo, o disco do glifo montado
   sobre a aresta de cima, e um fio curvo que as atravessa com um nó em cada
   passagem.

   O escalonamento saiu. A ideia era que o desnível impedisse quatro
   rectângulos de parecerem quatro cartões de SaaS, mas o que se lia era
   desarrumação — cartões tortos, não ritmo. O que separa esta secção de uma
   grelha de cartões é o fio e a luz que corre nele: alinhadas e ligadas, as
   quatro lêem-se como uma cadeia de execução, que é o que são.
   ========================================================================== */
.walk{ padding-block:clamp(56px,7vw,88px) clamp(70px,8vw,110px); overflow:hidden }
.walk__head{ margin-block-end:clamp(40px,5vw,64px) }

.fluxo{ position:relative }
.fluxo__fio{ position:absolute; inset:0; z-index:0; pointer-events:none }
.fluxo__fio svg{ display:block; overflow:visible }
.fluxo__linha{
  fill:none; stroke:rgba(2,115,115,.22); stroke-width:1.6; stroke-linecap:round;
}
/* O pulso é um traço curto que corre a linha inteira. O comprimento total é
   medido em JS: uma fracção fixa dava um risco de tamanho diferente em cada
   largura de ecrã. */
/* O `stroke-dashoffset` é escrito por home-editorial.js, quadro a quadro, e
   não por uma `animation`: é o mesmo relógio que acende as placas quando a
   luz lhes chega. Duas animações independentes iam ficando fora de passo. */
.fluxo__pulso{
  fill:none; stroke:var(--cyan); stroke-width:2.2; stroke-linecap:round;
  stroke-dasharray:90 calc(var(--len,2000) * 1px);
  filter:drop-shadow(0 0 6px rgba(7,210,210,.65));
}
@media (prefers-reduced-motion:reduce){ .fluxo__pulso{ display:none } }
.fluxo__no{
  fill:#ffffff; stroke:var(--cyan); stroke-width:2;
  filter:drop-shadow(0 0 5px rgba(7,210,210,.5));
}

.fluxo__lista{
  position:relative; z-index:1;
  display:grid; gap:clamp(18px,1.8vw,22px);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:900px){
  /* `stretch` e não `start`: é ele que dá às quatro placas a mesma altura,
     seja qual for o comprimento do texto de cada uma. Com `start`, quatro
     descrições de tamanhos diferentes davam quatro alturas diferentes e a
     linha de base voltava a partir-se. */
  .fluxo__lista{ grid-template-columns:repeat(4,minmax(0,1fr)); align-items:stretch }
  .etp{ display:flex }
  .etp__placa{ flex:1 }
}

/* --- a placa -------------------------------------------------------------- */
.etp{ position:relative; min-inline-size:0; padding-block-start:34px }
.etp__placa{
  position:relative; overflow:hidden;
  padding:clamp(46px,4vw,54px) clamp(20px,2vw,26px) clamp(24px,2.4vw,30px);
  border-radius:clamp(16px,1.8vw,22px);
  background:linear-gradient(168deg,#ffffff 0%,#f3f8f9 100%);
  border:1px solid rgba(11,29,31,.07);
  box-shadow:0 26px 50px -34px rgba(1,20,24,.5), inset 0 1px 0 #fff;
  transition:box-shadow .34s ease, transform .34s var(--ease);
}
/* O numeral vive no fundo da placa, grande e quase apagado. */
.etp__n{
  position:absolute; z-index:0;
  inset-block-start:clamp(-4px,.4vw,4px); inset-inline-end:clamp(6px,1vw,14px);
  font-family:var(--display); font-weight:700; line-height:1;
  font-size:clamp(74px,7vw,104px); letter-spacing:-.04em;
  color:rgba(2,115,115,.07); user-select:none;
  transition:color .34s ease;
}
/* O disco do glifo monta sobre a aresta de cima da placa, meio dentro e meio
   fora — é o que a referência faz, e é o que amarra o disco ao fio. */
.etp__ico{
  position:absolute; z-index:2; inset-block-start:0; inset-inline-start:clamp(20px,2vw,28px);
  display:grid; place-items:center;
  inline-size:68px; block-size:68px; border-radius:50%;
  color:var(--teal);
  background:radial-gradient(72% 66% at 32% 26%, #ffffff, #f0f7f8 70%);
  box-shadow:0 0 0 7px var(--paper), 0 14px 28px -18px rgba(1,46,53,.65),
             inset 0 0 0 1px rgba(2,115,115,.14);
  transition:color .34s ease, box-shadow .34s ease;
}
/* O desenho entregue, inlinado: assim herda a cor do texto e muda com o
   estado da etapa. Um SVG externo não aceitaria nenhuma das duas coisas — e
   sob file:// o Chrome nem sequer o carrega como máscara. */
.etp__arte{ inline-size:30px; block-size:30px }
.etp__verbo{
  position:relative; z-index:1; display:block;
  font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--teal);
}
.etp__t{
  position:relative; z-index:1; margin-block-start:10px;
  font-family:var(--display); font-weight:700; letter-spacing:-.024em;
  font-size:clamp(18px,1.9vw,21px); line-height:1.16; color:var(--text);
}
.etp__d{
  position:relative; z-index:1; margin-block-start:11px;
  font-size:13.5px; line-height:1.55; color:var(--text-soft);
}
/* A barra curta no pé, como na referência. */
.etp__barra{
  display:block; margin-block-start:20px;
  inline-size:38px; block-size:3px; border-radius:3px;
  background:rgba(2,115,115,.35);
  transition:inline-size .5s var(--ease), background-color .34s ease;
}
/* --- a luz a passar -------------------------------------------------------
   Quando o pulso chega a uma etapa, o disco dela acende por sete décimos de
   segundo e volta ao que era. Não é um estado: é a passagem.

   Deliberadamente contido ao disco e à barra. Levantar a placa ou aumentá-la
   faria dela a etapa escolhida, e as quatro têm de continuar equivalentes —
   o percurso está no fio, não numa delas. */
.etp.is-pulso .etp__ico{
  color:var(--cyan);
  box-shadow:0 0 0 7px var(--paper), 0 0 0 10px rgba(7,210,210,.2),
             0 16px 30px -16px rgba(7,210,210,.55), inset 0 0 0 1px rgba(7,210,210,.38);
}
.etp.is-pulso .etp__barra{ inline-size:66px; background:linear-gradient(90deg,var(--teal),var(--cyan)) }
.etp.is-pulso .etp__n{ color:rgba(2,115,115,.11) }

/* O rato numa placa: resposta a um gesto do visitante, e por isso pode
   levantá-la — ao contrário do pulso, que percorre as quatro sozinho. */
.etp.is-on .etp__placa{ transform:translateY(-4px); box-shadow:0 32px 58px -30px rgba(1,46,53,.55) }
.etp.is-on .etp__n{ color:rgba(2,115,115,.13) }
.etp.is-on .etp__ico{ color:var(--cyan); box-shadow:0 0 0 7px var(--paper), 0 0 0 9px rgba(7,210,210,.16), 0 16px 30px -16px rgba(7,210,210,.6), inset 0 0 0 1px rgba(7,210,210,.4) }
.etp.is-on .etp__barra{ inline-size:66px; background:linear-gradient(90deg,var(--teal),var(--cyan)) }

/* No estreito as placas empilham e o fio vira coluna: desce pelos discos, à
   esquerda, e a luz continua a percorrê-lo de 01 a 04. Antes desaparecia, e
   quatro placas soltas numa coluna deixavam de ser um percurso — que é
   justamente o que esta secção tem para dizer. */
@media (max-width:899px){
  .etp{ margin-block-start:0 }
  /* O fio só se vê nos intervalos entre as placas, porque é por trás delas
     que passa. Com os 18px de origem havia fio a menos para se ler como fio;
     com 30px, o troço entre duas etapas é um troço. */
  .fluxo__lista{ gap:30px }
}


/* ==========================================================================
   5 · A CONVERSÃO — a banda inteira, só degradê

   Era uma placa centrada dentro de uma secção de papel, com malha, arcos e
   pontos. Passa a ocupar a largura da janela e o fundo passa a ser só o
   degradê institucional: nada compete com a mensagem.
   ========================================================================== */
/* O fundo tinha um degradê e mais nada, e lia-se chapado. Ganha as camadas
   que a Home antiga tinha: facetas diagonais muito ténues, um clarão que sobe
   do pé ao centro e um escurecimento nos cantos. Sem rede e sem pontos — a
   profundidade vem da luz, não de geometria. */
/* Mais compacta: eram 110px em cima e em baixo, e a banda ficava com mais
   ar do que conteúdo. */
.closer{
  padding-block:clamp(44px,5.2vw,72px);
  color:var(--on-dark); text-align:center;
  background:
    /* o clarão que sobe do pé, como no fundo antigo */
    radial-gradient(46% 58% at 50% 104%, rgba(190,255,255,.2), transparent 66%),
    /* a luz alta, mais fria */
    radial-gradient(74% 110% at 50% -8%, rgba(7,210,210,.16), transparent 60%),
    /* as facetas: duas faixas diagonais de meio ponto de luz cada */
    linear-gradient(104deg, transparent 26%, rgba(255,255,255,.045) 26%, rgba(255,255,255,.045) 41%, transparent 41%),
    linear-gradient(104deg, transparent 62%, rgba(0,0,0,.1) 62%, rgba(0,0,0,.1) 79%, transparent 79%),
    linear-gradient(158deg,#046a6d 0%,#03565c 30%,#02383f 62%,#031a1f 100%);
}
/* Os cantos escurecem — é o que dá a sensação de caixa iluminada ao centro. */
.closer::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(86% 120% at 50% 46%, transparent 42%, rgba(1,14,18,.42) 100%);
}
.closer::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:var(--grain); opacity:.06; mix-blend-mode:overlay;
}

/* --- o símbolo ------------------------------------------------------------
   O mesmo ficheiro da Home antiga. Pequeno e por cima da chamada: assinatura,
   não ilustração. Flutua muito devagar — o suficiente para não parecer um
   ícone colado. */
.closer__dna{
  inline-size:clamp(76px,8vw,104px); block-size:auto;
  margin:0 auto clamp(14px,1.8vw,20px);
  filter:drop-shadow(0 10px 18px rgba(1,20,24,.5));
}
@media (prefers-reduced-motion:no-preference){
  .closer__dna{ animation:dna-flutua 7s ease-in-out infinite }
}
@keyframes dna-flutua{
  0%,100%{ transform:translateY(0) }
  50%    { transform:translateY(-7px) }
}
.closer__in{ position:relative; z-index:2; max-inline-size:720px; margin-inline:auto }
/* O ciano institucional sobre este degradê fica abaixo do mínimo para texto
   pequeno; o tom claro do próprio ciano resolve. */
.closer__in .kicker{ color:#d6fdfd }
.closer__in .h2{ margin-block-start:14px; font-size:clamp(30px,5vw,54px) }
.closer__in .h2 em{ color:var(--cyan-lit) }
.closer__in .lede{ margin-block-start:16px; max-inline-size:34ch; margin-inline:auto; color:rgba(241,247,247,.88) }
.closer__in .actions{ justify-content:center; margin-block-start:clamp(24px,2.8vw,30px) }
/* Um botão só, e por isso um pouco maior: a única chamada da banda tem de a
   parecer. Não muito — um botão que cresce demais deixa de ser um botão. */
.closer__cta{ min-block-size:58px; padding-inline:38px; font-size:16.5px }
/* A banda é escura mas não tem `.g-dark`: os botões precisam de saber em que
   chão estão. */
.closer .btn{
  background:linear-gradient(160deg,var(--cyan-lit),var(--cyan) 52%,#049fa0); color:#02272c;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 0 1px rgba(7,210,210,.35),0 12px 32px -12px rgba(7,210,210,.9);
}
.closer .btn::after{ background:radial-gradient(closest-side, rgba(7,210,210,.95), transparent 74%) }
.closer .btn-ghost{ color:#eafeff; border-color:rgba(7,210,210,.45) }
.closer .btn-ghost:hover{ border-color:var(--cyan); background:rgba(7,210,210,.1) }


/* ==========================================================================
   6 · NÚMEROS — quatro indicadores numa linha

   Os quatro parágrafos saíram: a secção passa a ser uma leitura rápida, e o
   argumento longo de cada número continua a existir na página Sobre, que o
   recebeu quando saiu da Home.

   Cada indicador é glifo, número, filete e título — nesta ordem, e o número é
   o protagonista. Entre eles, uma divisória fina.
   ========================================================================== */
.tally{ position:relative; overflow:hidden; padding-block:clamp(58px,7vw,92px) }
/* A arte das bolas é o ficheiro original, cortado pela aresta e esbatido: é
   elemento de identidade, não ilustração. */
.tally__marca{
  position:absolute; z-index:0; pointer-events:none;
  inset-block-start:50%; inset-inline-start:0; translate:-34% -50%;
  inline-size:clamp(280px,34vw,460px); opacity:.5;
}
.tally__marca img{ inline-size:100%; block-size:auto; display:block }
@media (max-width:899px){ .tally__marca{ translate:-52% -50%; opacity:.32 } }

.tally__head{ margin-block-end:clamp(30px,3.6vw,44px) }
/* O filete curto por baixo do kicker, como na referência. */
.tally__head .kicker::after{
  content:""; display:block; inline-size:56px; block-size:2px; margin:14px auto 0;
  background:rgba(2,115,115,.4);
}

.tally__figs{
  position:relative; z-index:2;
  display:grid; gap:clamp(26px,3vw,10px);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:900px){ .tally__figs{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
.tally__figs .fig{
  position:relative; min-inline-size:0; text-align:center;
  padding-inline:clamp(10px,1.4vw,20px);
}
/* A divisória entre indicadores. Não há uma antes do primeiro. */
@media (min-width:900px){
  .tally__figs .fig + .fig::before{
    content:""; position:absolute; inset-block:6px; inset-inline-start:0;
    inline-size:1px; background:var(--rule);
  }
}
/* Estas quatro regras andam escopadas por .tally__figs de propósito.
   home.css traz `.fig span{ color:rgba(255,255,255,.82) }` da versão 2, onde
   os números corriam sobre fundo escuro — e `.fig span` (0,1,1) ganha a um
   `.fig__t` solto (0,1,0). O resultado era branco sobre branco: o auditor
   mediu 1:1 nos quatro rótulos. */
.tally__figs .fig b{
  display:block;
  font-family:var(--display); font-weight:700; line-height:.92;
  font-size:clamp(44px,5.4vw,66px); letter-spacing:-.04em; color:var(--teal);
  font-variant-numeric:tabular-nums;
}
.tally__figs .fig__rule{
  display:block; inline-size:44px; block-size:2px; margin:16px auto 0;
  background:rgba(2,115,115,.35);
}
.tally__figs .fig__t{
  display:block; margin-block-start:14px; max-inline-size:16ch; margin-inline:auto;
  font-family:var(--display); font-weight:700; letter-spacing:-.018em;
  font-size:clamp(15px,1.6vw,17px); line-height:1.24; color:var(--text);
}


/* ==========================================================================
   7 · PRODUTOS

   A montra passou para `assets/css/montra.css`, que a Home e a página do
   Método carregam. Duas cópias das mesmas proporções em dois ficheiros é
   como elas divergem — e tinham divergido.
   ========================================================================== */

   8 · CLIENTES E PARCEIROS

   Montada por parceiros.js e vestida por parceiros.css — os mesmos das
   páginas de produto. Aqui fica só o respiro que a banda leva na Home.
   ========================================================================== */
[data-parceiros]{ padding-block:clamp(52px,6.6vw,84px) }
/* Cabeçalho ao centro e numa linha só. "Clientes e Parceiros." é uma
   expressão; partida ao meio lê-se como duas. O que a partia era o
   `max-inline-size` que `.head` traz do sistema de cabeçalhos. */
.parceiros__head{ text-align:center; margin-inline:auto; max-inline-size:none }
.parceiros__head .h2{ max-inline-size:none; white-space:nowrap }
@media (max-width:600px){
  .parceiros__head .h2{ white-space:normal; text-wrap:balance }
}


/* ==========================================================================
   SOBRE A VAZTO — a página que recebeu o que saiu da Home
   ========================================================================== */
.sobre__topo{ padding-block:clamp(56px,7vw,96px) clamp(52px,6.4vw,88px) }
/* O ciano institucional sobre o degradê do hero dá 4.01:1, e vazto.css só
   levanta o tom para os fechos chamados `.finale`. */
.sobre__topo .kicker{ color:#d6fdfd }
.sobre__say{ max-inline-size:44ch }
.sobre__line{
  margin-block-start:14px;
  font-family:var(--display); font-weight:700; letter-spacing:-.03em;
  font-size:clamp(26px,4.2vw,44px); line-height:1.1; color:#fff;
}
.sobre__line em{ font-style:normal; color:var(--cyan) }
.sobre__say .lede{ margin-block-start:20px }


/* ==========================================================================
   RESPONSIVE — onde a reorganização não é automática
   ========================================================================== */
@media (max-width:820px){
  /* A régua das seis letras não encolhe abaixo dos 46px por disco sem os
     tornar em alvos de toque pequenos demais. */
  .rail__no button{ inline-size:46px; block-size:46px; font-size:18px }
  .rail__nodes::before,.rail__nodes::after{ inset-inline-start:23px }
  .rail__nodes::before{ inset-inline-end:23px }
  .rail__nodes::after{ inline-size:calc((100% - 46px) * var(--p,0)) }
}
@media (max-width:520px){
  .rail__no button{ inline-size:40px; block-size:40px; font-size:16px; box-shadow:0 0 0 4px var(--paper) }
  .rail__nodes::before,.rail__nodes::after{ inset-inline-start:20px }
  .rail__nodes::before{ inset-inline-end:20px }
  .rail__nodes::after{ inline-size:calc((100% - 40px) * var(--p,0)) }
  .rail__card{ min-block-size:170px }
}