/* ==========================================================================
   Método F.U.T.U.R.O. — a página

   Carregado só por metodo-v2.html, depois de vazto.css e home.css. O
   cabeçalho e o rodapé são os componentes globais e trazem as suas folhas.

   A regra que comanda o ritmo: A PÁGINA NÃO PODE SER SEIS BANDAS ESCURAS.
   A versão anterior era — hero, por que, jornada, soma, produtos, todas em
   fundo escuro — e uma página inteira no mesmo registo não tem hierarquia:
   sem contraste entre secções, o olho não sabe onde uma acaba.

     hero            escuro
     por que         claro
     os objetivos    escuro
     seis etapas     escuro, interactivo
     Tradição+Futuro claro, com a faixa teal a atravessá-lo
     o ciclo         escuro
     os produtos     claro
     o próximo passo faixa teal

   Os tokens, a tipografia, os botões e os fundos vêm de vazto.css. Nada aqui
   redefine cor de marca: o que está escrito são as peças que só existem
   nesta página.
   ========================================================================== */

:root{ --bleed:calc(50% - 50vw) }


/* ==========================================================================
   1 · HERO

   Compacto e centrado, como o da Home. A malha é gerada e a sua opacidade
   vem da distância à coluna de leitura — forte nas margens, zero por trás do
   texto. Sem essa zona morta, sobram linhas a atravessar a headline.
   ========================================================================== */
.met-hero{
  position:relative; overflow:hidden;
  /* O CONTRATO PARTILHADO das páginas institucionais — os tokens `--hero-*`
     de vazto.css. Este topo tinha 652px a 1440 contra os 486 do Sobre e os
     407 da página de Produtos, com a headline a 50, 60 e 40: três aberturas
     do mesmo site sem relação nenhuma entre si.

     Continua a ser o mais alto dos três, e é honesto que seja: diz mais do
     que os outros — kicker, três linhas de headline, três de apoio e um
     botão. O que passou a ser comum é o respiro, a altura mínima e a escala
     do título. */
  padding-block:var(--hero-pad-topo) var(--hero-pad-pe);
  min-block-size:var(--hero-min);
  display:grid; align-content:center;
  text-align:center;
}
/* A cena do fundo, em canvas. Ocupa a secção inteira e sangra de aresta a
   aresta; a legibilidade do texto não vem de um véu por cima dela mas da
   própria cena, que não desenha nada onde a coluna de leitura passa. */
.met-hero__fundo{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  inline-size:100%; block-size:100%; display:block;
}
/* Um véu muito ténue por cima da cena, só para o pé fechar no escuro em vez
   de terminar a meio de uma onda. */
.met-hero__veu{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,transparent 62%,rgba(2,12,20,.5) 100%);
}
.met-hero__in{ position:relative; z-index:2 }
/* O ciano institucional sobre o degradê do hero mede 3.18:1 — o hero é o
   ponto mais claro da paleta escura, e é aí que o kicker assenta. O tom claro
   do próprio ciano resolve, como já acontece nos fechos do resto do site. */
.met-hero .kicker{ color:#d6fdfd }
.met-hero .h1{
  margin-block-start:14px;
  font-size:var(--hero-h1); line-height:1.08;
  max-inline-size:20ch; margin-inline:auto;
}
.met-hero .lede{
  margin-block-start:18px; max-inline-size:56ch; margin-inline:auto;
}
.met-hero .actions{ margin-block-start:clamp(26px,3vw,34px) }

/* --- a assinatura F—U—T—U—R—O --------------------------------------------
   Numa linha só e pequena. Na versão anterior eram hexágonos cromados do
   tamanho da headline, de um sistema visual que não existe em mais lado
   nenhum do site — e disputavam o protagonismo com ela. Aqui é o que o nome
   diz: uma assinatura. */
.assin{
  display:flex; align-items:flex-start; justify-content:center;
  gap:clamp(4px,1vw,12px); flex-wrap:nowrap;
  margin-block-start:clamp(34px,4.4vw,52px);
}
.assin__l{
  display:grid; justify-items:center; gap:9px; min-inline-size:0;
  animation:assin-entra .6s var(--ease) backwards;
  animation-delay:calc(var(--i) * 90ms + 400ms);
}
@media (prefers-reduced-motion:reduce){ .assin__l{ animation:none } }
@keyframes assin-entra{ from{ opacity:0; transform:translateY(10px) } }
.assin__l b{
  display:grid; place-items:center;
  inline-size:clamp(38px,4.4vw,50px); aspect-ratio:1; border-radius:50%;
  font-family:var(--display); font-weight:700; line-height:1;
  font-size:clamp(16px,1.9vw,21px); color:var(--cyan-lit);
  background:radial-gradient(74% 68% at 32% 26%,rgba(7,210,210,.24),rgba(3,23,28,.9));
  border:1.4px solid rgba(7,210,210,.4);
  box-shadow:inset 0 1px 0 rgba(160,255,255,.24), 0 10px 22px -14px rgba(7,210,210,.7);
}
.assin__l i{
  font-style:normal; font-size:10px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(241,247,247,.6); white-space:nowrap;
}
/* O traço entre letras: é ele que faz das seis uma sequência e não seis
   medalhas em fila. */
.assin__p{
  align-self:flex-start; margin-block-start:clamp(19px,2.2vw,25px);
  inline-size:clamp(8px,2vw,26px); block-size:1.4px;
  background:linear-gradient(90deg,rgba(7,210,210,.15),rgba(7,210,210,.5),rgba(7,210,210,.15));
}
/* Abaixo desta largura os nomes já não cabem: fica a sequência das letras,
   que é o que a assinatura precisa de dizer. */
@media (max-width:640px){
  .assin__l i{ display:none }
  .assin__p{ margin-block-start:clamp(17px,5vw,22px) }
}


/* ==========================================================================
   2 · POR QUE CRIAMOS O MÉTODO
   ========================================================================== */
.porque{ padding-block:clamp(58px,7.4vw,96px) }
.porque__head{ margin-block-end:clamp(34px,4.4vw,52px) }
.porque__head .h2{ max-inline-size:22ch; margin-inline:auto }

/* --- as três tensões ------------------------------------------------------
   Lado a lado, com o mesmo peso, e cada uma é uma CONTRADIÇÃO: o que a empresa
   tem em peso cheio, o que lhe falta em peso leve. Três cartões com uma frase
   corrida diriam três factos.

   A escala é a de antes — o pedido foi acabamento, não tamanho. O que mudou é
   o desenho da peça:

   · o NUMERAL deixou de ser um adorno no canto e passou a fazer parte do
     fundo: enorme, cortado pela aresta de baixo, atrás de tudo. É ele que dá
     ao cartão uma composição em vez de uma lista de elementos empilhados;
   · o ÍCONE perdeu a caixa arredondada — a plaquinha com um glifo ao centro é
     o que faz um cartão parecer um componente de biblioteca. Fica o desenho,
     maior, assente numa moldura aberta de cantos;
   · o fundo ganhou um degradê diagonal e um véu de teal no canto de cima, com
     um filete de luz na aresta. Um branco chapado não tem direcção;
   · e uma linha técnica separa o título do texto de apoio, com um traço curto
     na cor da marca.
   ------------------------------------------------------------------------- */
.tensoes{
  display:grid; gap:clamp(14px,1.6vw,22px);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:860px){
  .tensoes{ grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch }
}
.tensao{
  position:relative; overflow:hidden; min-inline-size:0;
  display:flex; flex-direction:column;
  padding:clamp(26px,2.8vw,36px) clamp(22px,2.4vw,30px) clamp(28px,3vw,36px);
  border-radius:clamp(16px,1.8vw,22px);
  background:
    /* o véu da marca no canto de cima */
    radial-gradient(88% 74% at 6% 0%, rgba(2,115,115,.07), transparent 62%),
    linear-gradient(158deg,#ffffff 0%,#f6fafb 46%,#eef5f6 100%);
  border:1px solid rgba(11,29,31,.075);
  box-shadow:
    0 28px 54px -38px rgba(1,20,24,.5),
    0 2px 5px -3px rgba(1,20,24,.07),
    inset 0 1px 0 #fff;
  transition:transform .34s var(--ease), box-shadow .34s ease, border-color .34s ease;
}
/* O filete de luz na aresta de cima. */
.tensao::before{
  content:""; position:absolute; z-index:2;
  inset-block-start:0; inset-inline:0; block-size:2px;
  background:linear-gradient(90deg,transparent,rgba(2,115,115,.42) 24%,rgba(7,210,210,.55) 50%,rgba(2,115,115,.42) 76%,transparent);
}
.tensao:hover{
  transform:translateY(-3px);
  border-color:rgba(2,115,115,.18);
  box-shadow:0 36px 64px -38px rgba(1,20,24,.52), 0 2px 5px -3px rgba(1,20,24,.07), inset 0 1px 0 #fff;
}

/* O numeral: parte do fundo, não um adorno no canto. Enorme, cortado pela
   aresta de baixo, e atrás de tudo o resto. */
.tensao__n{
  position:absolute; z-index:0; pointer-events:none; user-select:none;
  inset-block-end:clamp(-30px,-2.6vw,-18px); inset-inline-end:clamp(-6px,-.4vw,-2px);
  font-family:var(--display); font-weight:700; line-height:.8;
  font-size:clamp(112px,11vw,168px); letter-spacing:-.06em;
  color:transparent;
  background:linear-gradient(160deg,rgba(2,115,115,.17),rgba(2,115,115,.035) 74%);
  -webkit-background-clip:text; background-clip:text;
}

/* O ícone sem plaquinha: fica o desenho, e uma moldura ABERTA — quatro cantos
   em vez de uma caixa fechada. É o detalhe técnico que uma caixa arredondada
   não tem. */
.tensao__ico{
  position:relative; z-index:1;
  display:grid; place-items:center;
  inline-size:64px; block-size:64px;
  margin-block-end:clamp(22px,2.4vw,28px);
  color:var(--teal);
}
.tensao__ico::before,
.tensao__ico::after{
  content:""; position:absolute; inline-size:11px; block-size:11px;
  border:1.4px solid rgba(2,115,115,.34);
}
.tensao__ico::before{
  inset-block-start:0; inset-inline-start:0;
  border-inline-end:0; border-block-end:0; border-start-start-radius:3px;
}
.tensao__ico::after{
  inset-block-end:0; inset-inline-end:0;
  border-inline-start:0; border-block-start:0; border-end-end-radius:3px;
}
/* Os ícones entregues são glifos preenchidos, e cada um traz o seu viewBox —
   vêm em grelhas diferentes, e forçá-los todos à mesma deformava uns e cortava
   outros. O que se iguala é a CAIXA; o desenho ajusta-se dentro dela. */
.tensao__ico svg{
  inline-size:44px; block-size:44px;
  fill:currentColor; stroke:none;
}

.tensao b{
  position:relative; z-index:1; display:block;
  font-family:var(--display); font-weight:700; letter-spacing:-.024em;
  font-size:clamp(19px,2.1vw,23px); line-height:1.18; color:var(--text);
  text-wrap:balance;
}
/* A linha técnica entre o título e o apoio: um filete longo e ténue com um
   traço curto na cor da marca à cabeça. */
.tensao__d{
  position:relative; z-index:1; display:block;
  margin-block-start:14px; padding-block-start:14px;
  font-size:clamp(14.5px,1.6vw,16px); line-height:1.5; color:var(--text-soft);
  border-block-start:1px solid rgba(11,29,31,.08);
}
.tensao__d::before{
  content:""; position:absolute; inset-block-start:-1px; inset-inline-start:0;
  inline-size:26px; block-size:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--teal),rgba(7,210,210,.5));
}

/* --- a tese ---------------------------------------------------------------
   A conclusão da secção, destacada: é a frase que o resto da página
   desenvolve, e não podia ficar como mais um parágrafo. */
/* Mais largo e mais baixo, e com um elemento gráfico integrado em vez de um
   rectângulo com texto ao meio: o filete de luz na aresta de cima e um sinal
   da marca à esquerda dão-lhe pertença. Era um banner. */
.porque__tese{
  position:relative; overflow:hidden;
  margin-block-start:clamp(40px,4.8vw,64px);
  padding:clamp(24px,2.6vw,34px) clamp(30px,4vw,60px);
  border-radius:clamp(18px,2.2vw,28px);
  background:
    radial-gradient(84% 180% at 4% 0%, rgba(7,210,210,.2), transparent 58%),
    linear-gradient(112deg,#06666b 0%,#04494f 44%,#02313a 100%);
  box-shadow:
    inset 0 1px 0 rgba(180,255,255,.32),
    0 34px 64px -36px rgba(1,32,38,.85);
  text-align:center;
}
/* O filete de luz na aresta de cima. */
.porque__tese::before{
  content:""; position:absolute; inset-block-start:0; inset-inline:0; block-size:2px;
  background:linear-gradient(90deg,transparent,rgba(120,240,240,.8) 30%,rgba(120,240,240,.8) 70%,transparent);
}
/* E o sinal da marca, grande e cortado pela aresta: é fundo, não ilustração —
   fica atrás do texto e a menos de um décimo de opacidade. */
.porque__tese::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  inset-block:-56% -56%; inset-inline-end:-7%;
  aspect-ratio:1;
  background:
    radial-gradient(closest-side, transparent 62%, rgba(7,210,210,.16) 63%, transparent 66%),
    radial-gradient(closest-side, transparent 40%, rgba(7,210,210,.12) 41%, transparent 44%);
}
.porque__tese p{
  position:relative; z-index:1;
  padding-inline-end:clamp(0px,4vw,72px);
  font-family:var(--display); font-weight:400; letter-spacing:-.022em;
  font-size:clamp(18px,2.1vw,25px); line-height:1.32; color:#fff;
  max-inline-size:64ch; margin-inline:auto; text-wrap:balance;
}
/* "a liderança" é a palavra que a frase existe para entregar: fica em peso
   cheio, na cor da marca, e sublinhada por um traço de luz. */
.porque__tese b{
  position:relative; font-weight:700; color:var(--cyan-lit);
  white-space:nowrap;
}
.porque__tese b::after{
  content:""; position:absolute; inset-block-end:-.14em; inset-inline:0;
  block-size:2px; border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
}


/* ==========================================================================
   3 · AS SEIS ETAPAS — em fundo claro

   As seis à vista numa régua, uma no box, E O BOX VIAJA até à letra acesa.
   Parado ao centro a trocar de texto, a régua é um menu e o box um painel de
   legendas; a andar, a letra parece puxar o seu conteúdo.

   A secção passou de escura a papel. A interacção é a mesma — o que muda é o
   ambiente, e a linguagem passa a ser a da régua da Home: discos brancos com
   anel de papel, fio em teal, e o box pintado a viajar por baixo.

   O ritmo da página fica: por que (claro) → objetivos (teal) → etapas (claro)
   → equação (escuro). Cada bloco começa noutro chão, e nenhum se confunde com
   o vizinho.
   ========================================================================== */
.etapas{
  padding-block:clamp(52px,6.2vw,80px) clamp(56px,6.6vw,86px);
  background:var(--grad-tint);
  color:var(--text);
}
.etapas__head{ margin-block-end:clamp(34px,4vw,50px) }
.etapas__head .h2{ color:var(--text) }
.etapas__head .h2 em{ color:var(--teal-deep) }

.regua{ max-inline-size:960px; margin-inline:auto }
.regua__nos{
  position:relative;
  display:flex; align-items:flex-start; 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. */
.regua__nos::before,
.regua__nos::after{
  content:""; position:absolute; inset-block-start:27px; block-size:2px; translate:0 -50%;
}
.regua__nos::before{
  inset-inline:27px; z-index:0;
  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. */
.regua__nos::after{
  inset-inline-start:27px; z-index:1;
  inline-size:calc((100% - 54px) * var(--p,0));
  background:linear-gradient(90deg,var(--teal),var(--cyan));
  box-shadow:0 0 12px rgba(7,210,210,.5);
  transition:inline-size .5s var(--ease);
}
.regua__no{ position:relative; z-index:2; display:grid; justify-items:center; gap:11px }
.regua__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;
}
.regua__no button:hover{ border-color:var(--teal) }
.regua__no.is-feito button{ border-color:rgba(2,115,115,.5) }
.regua__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);
}
.regua__no em{
  font-style:normal; font-size:11px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-soft);
  transition:color .3s ease; white-space:nowrap;
}
.regua__no.is-on em{ color:var(--teal-deep) }

/* --- o box da etapa -------------------------------------------------------
   `--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.

   O box continua PINTADO, mesmo em secção clara: era assim na Home antiga, e
   é o que o liga à letra — que também é pintada quando acende. Um cartão
   branco sobre papel branco não teria o que dizer. */
.regua__cap{ position:relative; margin-block-start:32px; min-block-size:264px; --x:0px; --seta:50% }
.regua__box{
  position:absolute; inset-block-start:0; inset-inline-start:0;
  translate:var(--x) 0;
  inline-size:min(420px,100%);
  padding:clamp(24px,2.6vw,30px) clamp(24px,2.8vw,32px);
  border-radius:clamp(18px,2vw,26px);
  text-align:start; color:var(--on-dark);
  background:
    radial-gradient(92% 80% at 12% 4%, #0d9296 0%, transparent 46%),
    linear-gradient(158deg,#07767a 0%,#055a61 44%,#02373e 100%);
  box-shadow:
    inset 0 1px 0 rgba(180,255,255,.44),
    inset 0 -1px 0 rgba(0,0,0,.3),
    0 0 0 1px rgba(2,115,115,.18),
    0 40px 72px -34px rgba(1,32,38,.6),
    0 2px 10px -4px rgba(1,32,38,.24);
  transition:translate .46s var(--ease), opacity .26s ease;
}
/* A bica, da cor do topo do box, apontada ao disco. */
.regua__cap::before{
  content:""; position:absolute; z-index:2;
  inset-block-start:-9px; inset-inline-start:var(--seta);
  inline-size:19px; block-size:19px; translate:-50% 0; rotate:45deg;
  background:#0b878b; border-start-start-radius:5px;
}
.regua__cap.is-trocando .regua__box{ opacity:0 }
.regua__conta{
  display:inline-block; padding:4px 11px; border-radius:99px;
  background:rgba(3,7,13,.34);
  font-family:var(--display); font-weight:700; font-size:11.5px;
  letter-spacing:.1em; color:#eafeff;
}
.regua__box b{
  display:block; margin-block-start:14px;
  font-family:var(--display); font-weight:700; letter-spacing:-.026em;
  font-size:clamp(23px,2.8vw,30px); line-height:1.08; color:#fff;
}
.regua__box em{
  display:block; margin-block-start:5px; font-style:normal;
  font-size:15px; font-weight:600; color:var(--cyan-lit);
}
.regua__box p{
  margin-block-start:14px; font-size:15px; line-height:1.56;
  color:rgba(241,247,247,.88);
}
/* A disciplina a que a etapa pertence — "Análise e diagnóstico." Classificação,
   não frase de efeito, e por isso leva tratamento de etiqueta. */
.regua__disc{
  display:inline-block; margin-block-start:18px;
  padding:5px 12px; border-radius:99px;
  border:1px solid rgba(160,255,255,.28);
  background:rgba(3,7,13,.22);
  font-size:12.5px; font-weight:600; letter-spacing:.02em; color:var(--cyan-lit);
}
/* Num telemóvel não há distância para o box viajar: fica ao centro e só a bica
   se move, que é a parte da associação que ainda se lê. E os nomes saem da
   régua, que a essa largura não os aguenta. */
@media (max-width:760px){
  .regua__no em{ display:none }
  .regua__no button{ inline-size:46px; block-size:46px; font-size:18px }
  .regua__nos::before,.regua__nos::after{ inset-block-start:23px }
  .regua__nos::before{ inset-inline:23px }
  .regua__nos::after{ inset-inline-start:23px; inline-size:calc((100% - 46px) * var(--p,0)) }
  .regua__box{ position:static; translate:none; inline-size:100% }
  .regua__cap{ min-block-size:0; margin-block-start:26px }
}

/* ==========================================================================
   4 · TRADIÇÃO + FUTURO = RESULTADO — o momento visual da página

   Três artes grandes, os sinais entre elas, e por baixo de cada uma o seu
   destaque e o seu texto.

   O que esta ronda mudou foi a ESCALA. A composição estava desenhada para o
   container de leitura e lia-se como três miniaturas ao centro de uma banda
   escura enorme. Agora tem container próprio, mais largo do que a coluna de
   texto, e as artes ocupam o que uma equação que é o momento da página tem
   de ocupar.

   Os sinais são células da grelha e não texto dentro de uma coluna: é isso
   que faz a fila ler-se como uma equação em vez de três cartões seguidos.
   ========================================================================== */
.equacao{
  position:relative; overflow:hidden;
  padding-block:clamp(56px,6.8vw,90px) clamp(60px,7.2vw,96px);
}
/* --- a separação das duas bandas escuras ---------------------------------
   As etapas e a equação são ambas escuras e seguidas, e sem tratamento leem-se
   como uma só banda de dois mil pixéis. Duas coisas as separam: um filete de
   luz na junta e um clarão que nasce do topo desta — a anterior fecha no
   escuro, esta abre na luz. */
.equacao::before{
  content:""; position:absolute; z-index:0; inset-block-start:0; inset-inline:0;
  block-size:1px;
  background:linear-gradient(90deg,transparent,rgba(7,210,210,.42) 22%,rgba(7,210,210,.42) 78%,transparent);
}
.equacao::after{
  content:""; position:absolute; z-index:0; inset-block-start:0; inset-inline:0;
  block-size:min(56%,420px); pointer-events:none;
  background:radial-gradient(72% 100% at 50% 0%, rgba(7,210,210,.13), transparent 70%);
}
.equacao > *{ position:relative; z-index:1 }

/* O título recua: quem manda na secção é a equação. */
.equacao__head .h2{
  font-size:clamp(21px,2.4vw,30px);
  color:var(--on-dark-soft); font-weight:500; letter-spacing:-.018em;
}
.equacao__head .h2 em{ color:var(--cyan-lit); font-weight:700 }
.equacao__head .kicker{ color:var(--cyan-lit) }

/* Container próprio, mais largo do que a coluna de leitura: dentro da shell
   de 1160px as três artes ficavam com 300px cada e a banda parecia vazia à
   volta delas. */
.eq{
  inline-size:min(1240px, 90vw); margin-inline:auto;
  display:grid; gap:clamp(20px,2.6vw,40px);
  grid-template-columns:minmax(0,1fr);
  align-items:start;
}
@media (min-width:960px){
  .eq{ grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) }
}
.eq__parte{ text-align:center; min-inline-size:0 }

/* --- as artes ------------------------------------------------------------
   Grandes. Cada uma tem a sua proporção — a lâmpada é alta, a estrutura é
   larga —, e forçá-las todas ao mesmo quadrado deformaria umas ou deixaria as
   outras pequenas. O que se iguala é a ALTURA da caixa, com a imagem contida
   dentro dela. */
.eq__arte{
  position:relative;
  display:grid; place-items:center;
  block-size:clamp(180px,17vw,262px);
  margin-block-start:clamp(14px,1.8vw,22px);
  margin-block-end:clamp(16px,1.8vw,22px);
}
/* A imagem CABE na caixa, não a preenche. Com `block-size:100%` numa
   caixa em grelha, ela saía 340px de altura numa caixa de 245 e passava
   por cima do texto do destaque. O par de máximos é o que garante que ela
   se ajusta ao lado que falta primeiro, seja qual for a proporção — e as
   três entregues são quadradas, ao contrário das anteriores. */
.eq__arte img{
  /* A imagem toma a caixa inteira e `object-fit` encaixa-a lá dentro sem
     a deformar. Os máximos sozinhos não bastavam: um item de grelha tem
     `min-block-size:auto`, e uma imagem com dimensão intrínseca recusa-se
     a encolher abaixo dela — saía 340px de altura numa caixa de 245 e
     passava por cima do texto do destaque. */
  inline-size:100%; block-size:100%; min-inline-size:0; min-block-size:0;
  object-fit:contain; display:block;
  /* --- A DEFINIÇÃO ------------------------------------------------------
     As três chegam como wireframes finos sobre fundo transparente, e são
     desenhadas de 1536px para 245: cada traço de um pixel é reamostrado
     para menos de um sexto e sai lavado. A de RESULTADO — a mais escura
     das três, com a cidade dentro de uma esfera de linhas — desaparecia
     por completo sobre o fundo desta banda; nas capturas o lugar dela era
     um clarão vazio.

     O ganho de presença tinha de vir de luz e contraste, não de tamanho:
     é o que o pedido diz, e é o que isto faz. O `drop-shadow` ciano segue
     o ALFA da imagem, ou seja, agarra-se ao próprio wireframe — é ele que
     separa o desenho do fundo, e não uma mancha atrás. */
  filter:
    brightness(1.3) contrast(1.12) saturate(1.05)
    drop-shadow(0 0 9px rgba(7,210,210,.5))
    drop-shadow(0 0 26px rgba(7,210,210,.24));
}

/* --- O HALO ---------------------------------------------------------------
   Um clarão por trás da arte, da cor da marca: é o que a assenta no fundo
   escuro em vez de a deixar a flutuar.

   O halo é PARAMETRIZADO por objeto. As três ilustrações não têm o mesmo
   feitio — uma é uma base larga, outra é uma lâmpada alta, a terceira é uma
   esfera — e um círculo igual para as três iluminava ar em duas delas. As
   variáveis dizem onde está a massa de cada uma. */
.eq__arte{ --halo-x:50%; --halo-y:50%; --halo-w:92%; --halo-h:90%; --halo-i:.3 }
/* TRADIÇÃO: a arquitectura é larga e assenta no chão. O halo abre e desce,
   para pegar a base do volume, que é onde ela se perdia. */
.eq__parte[data-i="0"] .eq__arte{ --halo-x:50%; --halo-y:60%; --halo-w:116%; --halo-h:86%; --halo-i:.3 }
/* FUTURO: a massa é o bolbo, em cima e ao centro. Halo fechado e mais
   intenso — é o objecto que ACENDE, e a luz tem de nascer dentro dele. */
.eq__parte[data-i="1"] .eq__arte{ --halo-x:50%; --halo-y:40%; --halo-w:74%; --halo-h:74%; --halo-i:.4 }
/* RESULTADO: a forma é circular e ocupa a caixa toda. O halo acompanha-a
   redondo, sem virar um disco chapado — daí a paragem intermédia baixa. */
.eq__parte[data-i="2"] .eq__arte{ --halo-x:50%; --halo-y:50%; --halo-w:98%; --halo-h:96%; --halo-i:.34 }

.eq__arte::before{
  content:""; position:absolute; z-index:-1;
  inset-inline-start:var(--halo-x); inset-block-start:var(--halo-y);
  inline-size:var(--halo-w); block-size:var(--halo-h);
  translate:-50% -50%;
  border-radius:50%;
  background:radial-gradient(closest-side,
    rgba(7,210,210,var(--halo-i)) 0%,
    rgba(7,210,210,calc(var(--halo-i) * .34)) 48%,
    transparent 78%);
}
/* Um segundo halo, mais fechado e mais quente de luz, dentro do primeiro. É
   o par que dá PROFUNDIDADE: um só gradiente lê-se como um disco pintado,
   dois com raios diferentes leem-se como luz a atravessar o objecto. */
.eq__arte::after{
  content:""; position:absolute; z-index:-1;
  inset-inline-start:var(--halo-x); inset-block-start:var(--halo-y);
  inline-size:calc(var(--halo-w) * .5); block-size:calc(var(--halo-h) * .5);
  translate:-50% -50%;
  border-radius:50%;
  background:radial-gradient(closest-side,
    rgba(150,250,250,calc(var(--halo-i) * .5)), transparent 72%);
}
/* A luz sobe e desce muito devagar por trás da arte. É a única animação da
   secção: as imagens são fixas, e uma imagem fixa com um brilho que respira
   por trás parece viva sem saltar. */
@media (prefers-reduced-motion:no-preference){
  .eq__arte::before{ animation:eq-respira 7s ease-in-out infinite }
  .eq__arte::after{ animation:eq-respira 7s ease-in-out infinite reverse }
  .eq__parte[data-i="1"] .eq__arte::before,
  .eq__parte[data-i="1"] .eq__arte::after{ animation-delay:-2.3s }
  .eq__parte[data-i="2"] .eq__arte::before,
  .eq__parte[data-i="2"] .eq__arte::after{ animation-delay:-4.6s }
}
@keyframes eq-respira{
  0%,100%{ opacity:.66; scale:.96 }
  50%    { opacity:1;   scale:1.05 }
}

.eq__t{
  font-family:var(--display); font-weight:700; letter-spacing:-.03em;
  font-size:clamp(26px,3.2vw,40px); line-height:1.02; color:#fff;
}
.eq__d{
  display:block; margin-block-start:12px; font-style:normal;
  font-family:var(--display); font-weight:700;
  font-size:clamp(15px,1.7vw,19px); line-height:1.28; color:var(--cyan-lit);
  text-wrap:balance;
}
.eq__p{
  margin-block-start:14px; margin-inline:auto; max-inline-size:36ch;
  font-size:clamp(15px,1.7vw,17px); line-height:1.58; color:var(--on-dark-soft);
}
/* O sinal alinha-se com o meio da ARTE, não com o meio da coluna: as colunas
   têm alturas diferentes por causa do texto, e ao centro da coluna o sinal
   descia para junto dos parágrafos. */
.eq__op{
  display:grid; place-items:center; justify-self:center;
  block-size:clamp(180px,17vw,262px);
  align-self:end;
  font-family:var(--display); font-weight:400;
  font-size:clamp(38px,4.4vw,60px); line-height:1;
  color:rgba(120,240,240,.55);
  text-shadow:0 0 30px rgba(7,210,210,.4);
}
@media (max-width:959px){
  .eq__op{ block-size:auto; padding-block:4px; font-size:clamp(30px,7vw,40px) }
  .eq__arte{ block-size:clamp(170px,40vw,230px) }
}

/* ==========================================================================
   5 · O CICLO DE MODERNIZAÇÃO
   ========================================================================== */
.ciclo{ padding-block:clamp(58px,7.4vw,96px) }
.ciclo__head{ margin-block-end:clamp(26px,3vw,36px) }
.ciclo__head .lede{ max-inline-size:52ch; margin-inline:auto }
.ciclo__palco{ max-inline-size:880px; margin-inline:auto }
.ciclo__palco svg{ inline-size:100%; block-size:auto; display:block; overflow:visible }

.cic-trilho{ fill:none; stroke:rgba(7,210,210,.2); stroke-width:1.6 }
/* A luz que percorre o anel. Um traçado curto num vão longo lê-se como um
   pulso; um tracejado curto lê-se como uma linha a tracejado. */
.cic-pulso{
  fill:none; stroke:url(#cic-luz); stroke-width:2.6; stroke-linecap:round;
  stroke-dasharray:120 1200;
}
@media (prefers-reduced-motion:no-preference){
  .cic-pulso{ animation:cic-corre 11s linear infinite }
}
@media (prefers-reduced-motion:reduce){ .cic-pulso{ display:none } }
@keyframes cic-corre{ to{ stroke-dashoffset:-1320 } }

.cic-setas path{ fill:none; stroke:rgba(7,210,210,.5); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.cic-halo{ fill:var(--cyan); opacity:0; transition:opacity .4s ease }
.cic-no{
  fill:#03171c; stroke:rgba(7,210,210,.5); stroke-width:1.6;
  transition:fill .4s ease, stroke .4s ease, stroke-width .4s ease;
}
.cic-n{
  font-family:var(--display); font-weight:700; font-size:14px;
  fill:var(--cyan-lit); transition:fill .4s ease;
}
.cic-nome{
  font-family:var(--display); font-weight:700; font-size:16px; letter-spacing:-.02em;
  fill:#fff;
}
.cic-txt{ font-family:var(--body); font-size:12.5px; fill:rgba(241,247,247,.62) }
.cic-est.is-on .cic-halo{ opacity:.18 }
.cic-est.is-on .cic-no{ fill:var(--cyan); stroke:var(--cyan-lit); stroke-width:2.2 }
.cic-est.is-on .cic-n{ fill:#02272c }
.cic-miolo text{
  font-family:var(--display); font-weight:700; font-size:19px; letter-spacing:-.02em;
  fill:rgba(241,247,247,.42);
}

.ciclo__frase{
  margin-block-start:clamp(30px,3.6vw,44px); text-align:center;
  font-family:var(--display); font-weight:400; letter-spacing:-.02em;
  font-size:clamp(20px,2.6vw,30px); line-height:1.25; color:var(--on-dark);
}
.ciclo__frase em{ font-style:normal; font-weight:700; color:var(--cyan) }

/* No estreito o anel não cabe: as seis estações passam a coluna, com o fio a
   ligá-las na vertical. Um anel de 760 unidades espremido em 390px deixa os
   rótulos ilegíveis e as setas indistinguíveis. */
.ciclo__lista{ display:none }
@media (max-width:820px){
  /* O combinador de FILHO, e não o descendente: a lista vive dentro do
     mesmo contentor que o anel, e `.ciclo__palco svg` também apanhava o
     ícone da volta — que ficava com display:none sem se saber porquê. */
  .ciclo__palco > svg{ display:none }
  .ciclo__lista{
    position:relative; display:grid; gap:0;
    max-inline-size:460px; margin:clamp(26px,5vw,34px) auto 0;
  }
  /* O fio que liga as seis, pelo centro dos numerais. */
  .ciclo__lista::before{
    content:; position:absolute; z-index:0;
    inset-block:22px 34px; inset-inline-start:19px; inline-size:2px;
    background:linear-gradient(180deg,rgba(7,210,210,.14),rgba(7,210,210,.4) 50%,rgba(7,210,210,.14));
  }
  .cic-item{
    position:relative; z-index:1;
    display:grid; grid-template-columns:40px minmax(0,1fr); gap:16px;
    align-items:start; padding-block:clamp(13px,3vw,17px);
  }
  .cic-item__n{
    display:grid; place-items:center;
    inline-size:40px; block-size:40px; border-radius:50%;
    font-family:var(--display); font-weight:700; font-size:15px;
    color:var(--cyan-lit); background:#03171c;
    border:1.6px solid rgba(7,210,210,.42);
  }
  .cic-item b{
    display:block; font-family:var(--display); font-weight:700;
    letter-spacing:-.022em; font-size:17px; line-height:1.2; color:#fff;
    padding-block-start:8px;
  }
  .cic-item p{ margin-block-start:5px; font-size:14px; line-height:1.5; color:rgba(241,247,247,.68) }
  /* A volta: é ela que faz da coluna um ciclo e não uma lista. */
  .cic-volta{
    position:relative; z-index:1;
    display:flex; align-items:center; gap:11px;
    margin-inline-start:2px; padding-block-start:6px; color:var(--cyan);
    font-family:var(--display); font-weight:700; font-size:13.5px;
    letter-spacing:.06em; text-transform:uppercase;
  }
  .cic-volta svg{ inline-size:34px; block-size:34px; flex:none }
}


/* ==========================================================================
   6 · O PRÓXIMO PASSO

   A mesma banda de conversão da Home: largura da janela, degradê com
   facetas, clarão a subir do pé e o símbolo da Vazto por cima da chamada.
   ========================================================================== */
.closer{
  position:relative;
  padding-block:clamp(52px,6vw,84px);
  color:var(--on-dark); text-align:center;
  background:
    radial-gradient(46% 58% at 50% 104%, rgba(190,255,255,.2), transparent 66%),
    radial-gradient(74% 110% at 50% -8%, rgba(7,210,210,.16), transparent 60%),
    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%);
}
.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;
}
.closer__in{ position:relative; z-index:2; max-inline-size:720px; margin-inline:auto }
.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) } }
/* 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(28px,4.6vw,48px) }
.closer__in .lede{ margin-block-start:14px; max-inline-size:40ch; margin-inline:auto; color:rgba(241,247,247,.88) }
.closer__in .actions{ justify-content:center; margin-block-start:clamp(24px,2.8vw,32px) }
/* 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) }


/* ==========================================================================
   2b · OS CINCO OBJETIVOS — instrumento, não infográfico

   O núcleo é o método; os cinco são o que ele produz. Cada objetivo está no
   fim de um fio que começa no centro, e é o fio que diz "isto vem daqui".

   O CHÃO DESTA SECÇÃO
   --------------------------------------------------------------------------
   Uma ronda deu-lhe um degradê verde-água — #dcefef a descer para #93cbce —
   para a separar da secção anterior por ambiente. Separava, mas o tom não é
   da casa: o teal da Vazto é #027373, escuro e saturado, e aquele verde
   lavado lia-se como outra marca. Saiu.

   Fica um off-white ligeiramente quente, SÓLIDO. Sólido é o ponto: um
   instrumento de precisão desenha-se sobre papel, não sobre um degradê. O
   contraste com as vizinhas passa a vir da textura e da margem de silêncio à
   volta do desenho, e não da cor do chão.

   O que continua desta secção: os anéis, os fios, os nós, os módulos —
   poucos e bem desenhados. A poeira, os pontilhados e os microtraços saíram
   e não voltam; e os arcos decorativos também não.
   ========================================================================== */
.fins{
  padding-block:clamp(56px,6.8vw,88px) clamp(60px,7.2vw,96px);
  /* Off-white quente, sólido, com um clarão largo por trás do núcleo. O
     clarão é a única variação de tom — e existe para o desenho ter onde
     assentar, não para dar cor à secção. */
  background:
    radial-gradient(78% 62% at 50% 66%, rgba(255,255,255,.9), transparent 72%),
    #f5f7f6;
  color:var(--text);
  /* --- A JUNTA ----------------------------------------------------------
     Com esta secção em off-white, a página passa a ter TRÊS chãos claros
     seguidos: por que criamos (L 225 na aresta), objetivos (L 246), as seis
     etapas (L 225). Vinte e um pontos de luminância separam-nos — vê-se,
     mas 2.400px de claro corrido precisam de mais do que um degrau subtil
     para não lerem como um bloco só.

     Os dois filetes resolvem-no sem tocar na cor: uma secção que ABRE e
     FECHA com uma linha desenhada lê-se como bloco próprio, mesmo ao lado
     de vizinhas do mesmo tom. É o recurso do desenho editorial para blocos
     claros adjacentes, e é mais honesto do que inventar um tom que a marca
     não tem — que foi o que o verde lavado fez. */
  border-block:1px solid rgba(2,81,89,.12);
}
/* A textura: uma grelha técnica muito ténue e, por cima dela, uma cota
   arquitectónica em marca d'água — as linhas de um corte, não um ornamento.
   Nada de arcos decorativos, partículas ou pontilhados. */
.fins::before{
  content:""; position:absolute; z-index:0; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(2,81,89,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(2,81,89,.055) 1px, transparent 1px),
    linear-gradient(to right, rgba(2,81,89,.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(2,81,89,.028) 1px, transparent 1px);
  background-size:112px 112px, 112px 112px, 28px 28px, 28px 28px;
  -webkit-mask-image:radial-gradient(86% 70% at 50% 62%, transparent 12%, #000 76%);
  mask-image:radial-gradient(86% 70% at 50% 62%, transparent 12%, #000 76%);
}
/* A marca d'água: um alçado esquemático encostado à margem direita, do lado
   oposto ao peso da composição. Fica ao nível do ruído de propósito — quem a
   procura vê-a, quem lê a secção não dá por ela. */
.fins::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  inset-block:0; inset-inline-end:0; inline-size:min(38%,460px);
  background:
    repeating-linear-gradient(90deg, rgba(2,81,89,.05) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(0deg, rgba(2,81,89,.038) 0 1px, transparent 1px 22px);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 46%, #000 82%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 46%, #000 82%, transparent);
}
.fins__head .h2{ color:var(--text) }
.fins__head .h2 em{ color:var(--teal-deep) }

.fins__palco{ inline-size:min(1180px, 94vw); margin-inline:auto }
.fins__palco svg{ inline-size:100%; block-size:auto; display:block; overflow:visible }

/* --- o campo --------------------------------------------------------------
   Três anéis contínuos e finíssimos, e mais nada. Os pontilhados, as marcas de
   escala e a poeira saíram: eram o que dava a este desenho ar de infográfico
   cheio de partículas em vez de instrumento de precisão. */
.fins-anel{ fill:none; stroke:rgba(2,81,89,.26); stroke-width:.9 }

/* --- os fios --------------------------------------------------------------
   Um traço principal, um veio que o acompanha em parte do caminho, e o nó a
   dois terços. Contínuos, sem tracejado: uma linha interrompida lê-se como
   provisória. */
.fins-fio{ fill:none; stroke:rgba(2,81,89,.42); stroke-width:1.1 }
.fins-fio--par{ stroke:rgba(2,81,89,.14); stroke-width:.7 }
.fins-no{ fill:#ffffff; stroke:rgba(2,81,89,.5); stroke-width:1.2 }
.fins-no--ext{ fill:none; stroke:rgba(2,81,89,.2); stroke-width:.8 }

/* A luz que percorre o fio, do núcleo para o objetivo. O traço é curto e o
   dash muito longo de propósito: o risco tem de SAIR do fio no fim, senão
   reaparece no princípio antes de ter chegado ao destino. */
.fins-luz{
  fill:none; stroke:var(--teal); stroke-width:2;
  stroke-linecap:round; stroke-dasharray:60 1600; stroke-dashoffset:60;
  filter:drop-shadow(0 0 6px rgba(7,210,210,.6));
}
@media (prefers-reduced-motion:no-preference){
  /* Uma de cada vez e devagar: cinco ramos, ciclo de sete segundos e meio, um
     e meio entre vizinhos. Nunca há duas luzes a correr ao mesmo tempo. */
  .fins-luz{ animation:fins-corre 7.5s linear infinite; animation-delay:var(--d,0ms) }
}
@media (prefers-reduced-motion:reduce){ .fins-luz{ display:none } }
@keyframes fins-corre{
  0%      { stroke-dashoffset:60; opacity:0 }
  2%      { opacity:1 }
  16%     { opacity:1 }
  20%,100%{ stroke-dashoffset:-620; opacity:0 }
}

/* --- os cinco módulos -----------------------------------------------------
   Um anel contínuo, o disco e o ícone entregue. As seis marcações à volta
   saíram com o resto da poeira. */
.fins-halo{ fill:rgba(2,115,115,.09); opacity:0; transition:opacity .5s ease }
.fins-anel-mod{ fill:none; stroke:rgba(2,81,89,.24); stroke-width:.9; transition:stroke .5s ease }
.fins-disco{
  fill:#ffffff; stroke:rgba(2,81,89,.3); stroke-width:1.2;
  filter:drop-shadow(0 8px 18px rgba(1,46,53,.14));
  transition:stroke .5s ease, fill .5s ease;
}
.fins-glifo{ color:var(--teal); transition:color .5s ease }
.fins-glifo svg{ fill:currentColor; stroke:none }
.fins-nome{
  font-family:var(--display); font-weight:700; font-size:22px;
  letter-spacing:-.02em; fill:var(--text);
}
/* Quando a luz chega: o módulo acende por um instante e volta. Não é um
   estado — é a passagem. */
.fins-ponta.is-on .fins-halo{ opacity:1 }
.fins-ponta.is-on .fins-anel-mod{ stroke:var(--teal) }
.fins-ponta.is-on .fins-disco{ stroke:var(--teal); fill:#f4fdfd }
.fins-ponta.is-on .fins-glifo{ color:var(--teal-deep) }

/* --- o núcleo -------------------------------------------------------------
   As camadas que o separam de um círculo pintado: a aura, o halo, o anel de
   marcações, dois contornos, a grelha de meridianos, o disco e duas órbitas
   com satélites. Estas ficam — são estrutura, não ruído. */
.fins-centro__aura{ fill:rgba(2,115,115,.06) }
.fins-centro__halo{ fill:rgba(2,115,115,.07) }
.fins-centro__marcas line{ stroke:rgba(2,81,89,.34); stroke-width:1.1; stroke-linecap:round }
.fins-centro__marcas line.is-forte{ stroke:rgba(2,81,89,.6); stroke-width:1.5 }
.fins-centro__anel{ fill:none; stroke:rgba(2,81,89,.3); stroke-width:1 }
.fins-centro__anel2{ fill:none; stroke:rgba(2,81,89,.16); stroke-width:.8 }
.fins-centro__disco{
  fill:url(#fins-nucleo); stroke:rgba(160,255,255,.4); stroke-width:1.5;
  filter:drop-shadow(0 20px 40px rgba(1,46,53,.34));
}
.fins-centro__grelha ellipse{ fill:none; stroke:rgba(190,255,255,.15); stroke-width:.9 }
/* As órbitas passam por cima do disco e saem por fora dele — é isso que faz o
   núcleo parecer um corpo com espaço à volta, e não um selo colado. */
.fins-orbita ellipse{ fill:none; stroke:rgba(2,81,89,.32); stroke-width:1 }
@media (prefers-reduced-motion:no-preference){
  .fins-centro__aura{
    transform-box:fill-box; transform-origin:center;
    animation:fins-pulso 7.5s ease-out infinite;
  }
  .fins-orbita{ transform-box:fill-box; transform-origin:center; animation:fins-gira 64s linear infinite }
}
@keyframes fins-pulso{
  0%   { opacity:.85; scale:.9 }
  22%  { opacity:.2; scale:1.14 }
  100% { opacity:.85; scale:.9 }
}
/* Uma volta por minuto: quem olha não vê andar, mas quem fica percebe. */
@keyframes fins-gira{ to{ rotate:360deg } }
.fins-centro__t{
  font-family:var(--display); font-weight:700; font-size:19px;
  letter-spacing:.2em; fill:rgba(234,254,255,.74);
}
.fins-centro__s{
  font-family:var(--display); font-weight:700; font-size:27px;
  letter-spacing:-.01em; fill:#fff;
}

/* --- o telemóvel ----------------------------------------------------------
   A MESMA peça, não outra. A coluna que aqui esteve foi recusada, e com razão:
   desktop e telemóvel a mostrarem coisas diferentes são duas peças, não uma
   adaptada.

   O que muda é a geometria dentro do mesmo desenho — o SVG passa a um formato
   alto, o arco fecha-se num círculo à volta do núcleo e os rótulos vão para
   debaixo de cada módulo. É a mesma composição vista noutro enquadramento. */
.fins-coluna{ display:none }

/* ==========================================================================
   O AMBIENTE DAS DUAS SECÇÕES CLARAS

   Uma folha branca não é um fundo: é a ausência de um. Estas duas secções
   ganham textura técnica — grelha, arcos, um véu — em opacidades onde ela se
   sente sem se ver. A regra é essa: a textura é o chão da composição, nunca
   um elemento dela.

   Feita em gradientes e não em imagem ou SVG: não pesa nada, acompanha
   qualquer largura e recolore com os tokens.
   ========================================================================== */
.porque, .fins{ position:relative; isolation:isolate; overflow:hidden }
.porque > *, .fins > *{ position:relative; z-index:1 }

/* A grelha técnica: duas famílias de linhas, uma densa e outra espaçada, como
   papel milimétrico. Apaga-se ao aproximar-se do centro, onde vive a leitura. */
.porque::before, .fins::before{
  content:""; position:absolute; z-index:0; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(2,115,115,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(2,115,115,.055) 1px, transparent 1px),
    linear-gradient(to right, rgba(2,115,115,.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(2,115,115,.03) 1px, transparent 1px);
  background-size:120px 120px, 120px 120px, 24px 24px, 24px 24px;
  -webkit-mask-image:radial-gradient(78% 62% at 50% 46%, transparent 22%, #000 82%);
  mask-image:radial-gradient(78% 62% at 50% 46%, transparent 22%, #000 82%);
}
/* Os arcos decorativos que aqui estavam saíram: liam-se como template e
   competiam com os cartões. O fundo destas secções é a grelha técnica, e mais
   nada — textura, nunca um elemento da composição. */