/* ==========================================================================
   Sobre a Vazto — o desenho das secções de 2026

   Carregada depois de `sobre.css`. A referência é a HOME FINALIZADA, e não
   uma linguagem própria: a mesma tipografia, a mesma escala, os mesmos
   botões, os mesmos cartões brancos de borda finíssima, a mesma ideia de
   ligações finas a convergirem para um núcleo. Esta página tem de parecer
   exactamente o mesmo site.

   O que é novo aqui é o que a Home não tem: a órbita de oito frentes, as
   duas colunas do preservar e evoluir, a equação em três termos, a régua
   operacional e a linha do tempo.

   A matriz comparativa NÃO está aqui: é o componente da Home, guardado em
   `home-reserva.css`, e esta página carrega essa folha. Duplicá-lo seria
   criar a segunda cópia que o ficheiro de reserva existe para evitar.
   ========================================================================== */

/* ==========================================================================
   COMO UMA MODERNIZADORA ENXERGA UMA EMPRESA — a órbita

   Oito frentes à volta de um núcleo. É parente do sistema radial da Home, de
   propósito: mesma família, mesma ideia de convergência. O que muda é a
   escala do problema — quatro capacidades ali, oito frentes aqui —, e oito
   não cabem nas quatro diagonais.

   A geometria é a mesma da Home e continua exacta, sem trigonometria:

       translate(-50%,-50%) rotate(θ) translate(R) rotate(-θ)

   com θ de 45 em 45 graus. Cada raio é uma barra com `transform-origin` no
   centro e a MESMA rotação: por construção aponta ao mesmo sítio, em
   qualquer largura, sem JavaScript a ouvir `resize`.

   O tamanho do palco é DERIVADO, não escrito: com oito nós há sempre um em
   cima, um em baixo, um à esquerda e um à direita, por isso a meia-medida é
   o raio inteiro mais meio nó. Escrito à mão, deixava de acertar assim que
   uma das medidas mudasse.
   ========================================================================== */
/* DUAS COLUNAS NO DESKTOP: o texto à esquerda, o diagrama à direita, os dois
   à mesma altura. Empilhados, a secção era título, três parágrafos, destaque
   e só então o desenho — mil e sessenta pixéis de altura para uma ideia só, e
   o desenho chegava tarde de mais para explicar o que se tinha acabado de
   ler.

   45/55 a favor do diagrama: ele é a peça que tem de respirar, e o texto
   ganha com uma medida mais curta. `align-items:center` alinha os dois pelos
   centros — encostá-los pelo topo deixava o desenho a flutuar. */
.visao__grid{ display:grid; gap:clamp(28px,3.4vw,56px) }
@media (min-width:1000px){
  .visao__grid{ grid-template-columns:45fr 55fr; align-items:center }
  .visao__lado .head{ margin-block-end:0 }
}

/* O texto tem MEDIDA e RESPIRO. À largura toda do container eram perto de
   150 caracteres por linha e o olho perdia o início da linha seguinte; sem
   espaço entre parágrafos, os três liam-se como um bloco só. Na coluna a
   medida já vem do grid, e o `max-inline-size` fica como travão para o caso
   de a coluna crescer. */
.visao__texto{
  margin-block-start:clamp(18px,2vw,26px);
  max-inline-size:62ch;
}
.visao__texto .lede + .lede{ margin-block-start:14px }
.visao__destaque{
  margin-block-start:clamp(20px,2.4vw,30px);
  padding-inline-start:clamp(16px,1.8vw,22px);
  border-inline-start:3px solid var(--teal);
  font-family:var(--display); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(16px,1.75vw,20px); line-height:1.3; color:var(--teal);
}

.visao__palco{ margin-block-start:clamp(36px,4.4vw,60px) }

.orb{
  --nuc:clamp(112px, 13vw, 158px);
  --R:clamp(128px, 19vw, 226px);
  --no-w:clamp(88px, 10.5vw, 122px);
  --no-h:clamp(74px, 8.4vw, 96px);
  position:relative;
  inline-size:calc((var(--R) + var(--no-w) / 2) * 2);
  block-size:calc((var(--R) + var(--no-h) / 2) * 2);
  max-inline-size:100%;
  margin-inline:auto;
}

/* --- o anel ---------------------------------------------------------------
   Uma circunferência fina que passa pelos oito centros. É ela que diz que os
   oito são o MESMO sistema e não oito ícones espalhados — sem o anel, os
   raios liam-se como oito linhas soltas. */
.orb__anel{
  position:absolute; inset-inline-start:50%; inset-block-start:50%;
  z-index:0;
  inline-size:calc(var(--R) * 2); block-size:calc(var(--R) * 2);
  translate:-50% -50%;
  border-radius:50%;
  border:1px dashed rgba(2,115,115,.22);
}

/* --- os raios ------------------------------------------------------------
   Do centro para fora, e só visíveis NO VÃO entre o núcleo e o nó: o troço
   de dentro passa por baixo do disco e o de fora por baixo da ficha. As
   paragens são em px e derivam das medidas do próprio anel. */
.orb__raio{
  position:absolute; inset-inline-start:50%; inset-block-start:50%;
  z-index:0;
  inline-size:var(--R); block-size:1.5px;
  transform-origin:0 50%;
  transform:translateY(-50%) rotate(var(--a));
  background:linear-gradient(90deg,
    transparent calc(var(--nuc) / 2 - 4px),
    rgba(2,115,115,.34) calc(var(--nuc) / 2 + 8px),
    rgba(2,115,115,.34) 68%,
    transparent 92%);
}
/* A luz que converge, uma por raio, desfasadas. */
.orb__raio i{
  position:absolute; inset-block-start:50%; inset-inline-start:0;
  inline-size:6px; block-size:6px; border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 9px 2px rgba(7,210,210,.45);
  translate:calc(var(--R) * .84) -50%;
  animation:orb-dentro 4.2s cubic-bezier(.45,0,.5,1) infinite;
  animation-delay:calc(var(--i) * .36s);
}
@keyframes orb-dentro{
  0%   { translate:calc(var(--R) * .84) -50%; opacity:0 }
  14%  { opacity:1 }
  84%  { opacity:1 }
  100% { translate:calc(var(--nuc) / 2 + 2px) -50%; opacity:0 }
}

/* --- as oito frentes ------------------------------------------------------
   Sem chapa pesada: o que as prende à composição é o raio e o anel. */
.orb__no{
  position:absolute; inset-inline-start:50%; inset-block-start:50%;
  z-index:3;
  inline-size:var(--no-w); min-block-size:var(--no-h);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:7px; padding:10px 8px;
  border-radius:14px;
  text-align:center;
  background:rgba(255,255,255,.9);
  box-shadow:0 0 0 1px rgba(2,115,115,.1), 0 16px 34px -28px rgba(1,20,24,.5);
  transform:translate(-50%,-50%) rotate(var(--a)) translate(var(--R)) rotate(calc(var(--a) * -1));
  transition:box-shadow .34s ease;
}
.orb__no:hover{ box-shadow:0 0 0 1px rgba(2,115,115,.28), 0 18px 38px -26px rgba(1,20,24,.55) }
.orb__ico{
  display:grid; place-items:center;
  inline-size:clamp(30px,3vw,36px); block-size:clamp(30px,3vw,36px);
  border-radius:50%;
  color:var(--teal);
  background:radial-gradient(72% 66% at 32% 26%, #ffffff, #eaf4f5 72%);
  box-shadow:inset 0 0 0 1px rgba(2,115,115,.16);
}
/* Um `<span>` é inline e um `<svg>` dentro dele cai para 300×150. */
.orb__ico .ico{ inline-size:clamp(16px,1.6vw,19px); block-size:clamp(16px,1.6vw,19px) }
.orb__no b{
  font-family:var(--display); font-weight:700; letter-spacing:-.018em;
  font-size:clamp(11.5px,1.15vw,13.5px); line-height:1.12; color:var(--text);
}

/* --- o núcleo -------------------------------------------------------------
   Opaco e no plano da frente: corta o último troço de cada raio. */
.orb__nucleo{
  position:absolute; inset-inline-start:50%; inset-block-start:50%;
  z-index:2;
  translate:-50% -50%;
  display:grid; place-items:center;
  inline-size:var(--nuc); block-size:var(--nuc);
  padding:10px;
  border-radius:50%;
  text-align:center;
  background:radial-gradient(78% 70% at 34% 24%, #0d383c 0%, #072024 58%, #03070d 100%);
  box-shadow:0 0 0 1px rgba(2,115,115,.2), 0 28px 56px -26px rgba(1,20,24,.6);
}
.orb__nucleo span{
  font-family:var(--display); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(12.5px,1.35vw,16px); line-height:1.1;
  color:var(--cyan-lit);
  text-transform:lowercase;
}

/* --- a órbita no telemóvel -------------------------------------------------
   CONTINUA UM DIAGRAMA, e não oito cartões em fila. A versão anterior punha
   o núcleo à cabeça e as oito frentes numa grelha por baixo: legível, mas
   outra composição — perdia-se o centro, perdiam-se as ligações e perdia-se
   qualquer parentesco com o que o desktop mostra.

   O anel não cabe: precisa de `2·(R + meio-nó)` de largura, e a 390px isso é
   mais do que a tela inteira. O que cabe é a mesma ideia ACHATADA — quatro
   frentes de cada lado do núcleo, cada uma ligada a ele.

   E o lado não é arbitrário: `--lado`, escrito por `sobre-2026.js`, põe à
   direita as quatro que no desktop estão do lado direito do círculo, e à
   esquerda as outras quatro. É a mesma leitura vista de mais perto.

   AS LIGAÇÕES SÃO O MESMO COLECTOR da secção do preservar e evoluir: cada
   ficha lança um troço até uma régua vertical, e da régua sai uma linha para
   o núcleo. A página passa a ter um só modo de desenhar "isto converge para
   ali", e não dois.
   ------------------------------------------------------------------------- */
@media (max-width:880px){
  .orb{
    --vao:clamp(14px, 4vw, 24px);
    --fio:rgba(2,115,115,.28);
    inline-size:100%; block-size:auto;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    grid-template-rows:repeat(4, auto);
    column-gap:var(--vao);
    row-gap:clamp(7px,1.8vw,10px);
    align-items:center;
  }
  .orb__anel{ display:none }

  /* Os raios da órbita não servem aqui — apontavam para posições que já não
     existem. As ligações passam a ser as do colector, abaixo. */
  .orb__raio{ display:none }

  /* `inset:auto` NÃO É ZELO. Na órbita a ficha é `position:absolute` com
     `inset-inline-start:50%` e `inset-block-start:50%`, e é o `transform`
     que a traz de volta ao ponto certo. Ao passar a item de grelha, anular o
     `transform` não chega: os 50% continuam a aplicar-se e, num item de
     grelha, o bloco de referência é a PRÓPRIA CÉLULA — a ficha saía meia
     largura para fora da coluna e a da direita acabava 56px fora da janela.
     Sem erro, sem aviso, e no telemóvel ninguém vê o que ficou de fora. */
  .orb__no{
    position:relative; inset:auto; transform:none;
    inline-size:auto; min-block-size:0;
    flex-direction:row; justify-content:flex-start; text-align:start;
    gap:9px; padding:9px 10px;
    border-radius:12px;
  }
  .orb__no--dir{ grid-column:3 }
  .orb__no--esq{ grid-column:1 }
  /* Uma por linha, pela ordem em que foram escritas dentro de cada lado. */
  .orb__no--dir:nth-of-type(1){ grid-row:1 }
  .orb__no--dir:nth-of-type(2){ grid-row:2 }
  .orb__no--dir:nth-of-type(3){ grid-row:3 }
  .orb__no--dir:nth-of-type(4){ grid-row:4 }
  .orb__no--esq:nth-of-type(5){ grid-row:1 }
  .orb__no--esq:nth-of-type(6){ grid-row:2 }
  .orb__no--esq:nth-of-type(7){ grid-row:3 }
  .orb__no--esq:nth-of-type(8){ grid-row:4 }

  .orb__ico{ inline-size:28px; block-size:28px; flex:none }
  .orb__ico .ico{ inline-size:15px; block-size:15px }
  .orb__no b{ font-size:11.5px; line-height:1.14 }

  /* O núcleo ao centro, a ocupar as quatro linhas. É o que o mantém como
     centro em vez de o mandar para o topo ou para o fim. */
  .orb__nucleo{
    position:relative; inset:auto; translate:none;
    grid-column:2; grid-row:1 / -1;
    inline-size:clamp(84px,24vw,116px); block-size:clamp(84px,24vw,116px);
    padding:8px;
  }
  .orb__nucleo img{ inline-size:80% }

  /* O colector: o troço de cada ficha até à régua do seu lado. */
  .orb__no::after{
    content:""; position:absolute; inset-block-start:50%;
    inline-size:calc(var(--vao) / 2); block-size:1px;
    background:var(--fio);
  }
  .orb__no--dir::after{ inset-inline-end:100% }
  .orb__no--esq::after{ inset-inline-start:100% }

  /* As duas réguas e as duas linhas até ao núcleo, desenhadas nos cantos do
     próprio núcleo: ele é o único elemento que sabe onde está o centro. */
  .orb__nucleo::before,
  .orb__nucleo::after{
    content:""; position:absolute; inset-block-start:50%;
    inline-size:calc(var(--vao) / 2); block-size:1px;
    background:var(--fio);
    translate:0 -50%;
  }
  .orb__nucleo::before{ inset-inline-end:100% }
  .orb__nucleo::after{ inset-inline-start:100% }
}

/* Abaixo dos 380px o núcleo mais duas colunas de fichas deixa de caber: as
   fichas ficariam com setenta pixéis e a palavra partia-se em três linhas.
   Aí sim o núcleo vai à cabeça e as oito passam a duas colunas — e as
   ligações saem, porque uma ligação que já não liga nada é ruído. */
@media (max-width:379px){
  .orb{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:none;
    gap:8px;
  }
  .orb__no,.orb__no--dir,.orb__no--esq{ grid-column:auto; grid-row:auto }
  .orb__no::after,.orb__nucleo::before,.orb__nucleo::after{ display:none }
  .orb__nucleo{
    grid-column:1 / -1; grid-row:auto; order:-1;
    margin-inline:auto; margin-block-end:12px;
    inline-size:108px; block-size:108px;
  }
}

/* ==========================================================================
   MODERNIZAR NÃO É ABANDONAR — o colector

   Composição refeita a 16/09 sobre a referência visual do cliente. O que se
   tirou dela foi a ORGANIZAÇÃO: dois painéis, um núcleo luminoso ao centro e
   ligações finas a convergirem nele. O que NÃO se tirou foram os textos que
   ela traz e que não são conteúdo desta página — o sobretítulo, a frase de
   entrada de cada painel, a legenda de cada item e as duas linhas de fecho.

   AS LIGAÇÕES SÃO UM COLECTOR E NÃO DOZE CURVAS. Cada item lança um troço
   horizontal até uma régua vertical na aresta interior do painel; da régua
   sai uma linha para o núcleo. Doze beziers a acertar em doze alturas
   exigiriam JavaScript a recalcular tudo a cada `resize`; o colector diz a
   mesma coisa — seis viram um, e esse um chega ao centro — e é exacto por
   construção.

   A ALTURA DO ITEM É UMA VARIÁVEL, e não um acaso: é dela que saem o ponto
   onde cada troço nasce e os extremos da régua. Escritos à mão, deixavam de
   acertar assim que o item mudasse de tamanho.
   ========================================================================== */
.pres__palco{
  --ih:clamp(48px, 5.2vw, 60px);        /* a altura de cada ficha */
  --vao:clamp(26px, 5vw, 76px);         /* o intervalo até ao centro */
  --fio:rgba(2,115,115,.28);
  margin-block-start:clamp(34px,4vw,56px);
  display:grid; gap:clamp(22px,3vw,34px);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:1000px){
  .pres__palco{
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    gap:0 var(--vao);
    align-items:center;
  }
}

/* --- os dois painéis ------------------------------------------------------ */
.px__col{ position:relative; min-inline-size:0 }
.px__rot{
  font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--teal);
  margin-block-end:clamp(14px,1.6vw,20px);
}
.px__col--b .px__rot{ color:var(--cyan-ink, #0693a0) }
.px__lista{ display:grid; gap:clamp(6px,.8vw,9px) }

.px__item{
  position:relative;
  display:flex; align-items:center; gap:clamp(10px,1.1vw,14px);
  min-block-size:var(--ih);
  padding:0 clamp(13px,1.4vw,17px);
  border-radius:13px;
  background:#fff;
  box-shadow:0 0 0 1px rgba(11,29,31,.07), 0 14px 30px -26px rgba(1,20,24,.45);
  transition:box-shadow .3s ease, transform .3s var(--ease);
}
.px__item:hover{ transform:translateY(-1px); box-shadow:0 0 0 1px rgba(2,115,115,.22), 0 16px 32px -24px rgba(1,20,24,.5) }
.px__ico{
  flex:none; display:grid; place-items:center;
  inline-size:clamp(30px,3vw,34px); block-size:clamp(30px,3vw,34px);
  border-radius:50%;
  color:var(--teal);
  background:radial-gradient(72% 66% at 32% 26%, #ffffff, #eaf4f5 72%);
  box-shadow:inset 0 0 0 1px rgba(2,115,115,.14);
}
.px__ico .ico{ inline-size:clamp(16px,1.6vw,18px); block-size:clamp(16px,1.6vw,18px) }
.px__item b{
  font-family:var(--display); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(14px,1.45vw,16px); line-height:1.14; color:var(--text);
}

/* --- o colector ----------------------------------------------------------
   Só no desktop: no telemóvel as colunas ficam uma por cima da outra e um
   troço horizontal deixa de ligar seja o que for. */
@media (min-width:1000px){
  /* o troço de cada ficha até à régua */
  .px__item::after{
    content:""; position:absolute; inset-block-start:50%;
    inline-size:calc(var(--vao) / 2); block-size:1px;
    background:var(--fio);
  }
  .px__col--a .px__item::after{ inset-inline-start:100% }
  .px__col--b .px__item::after{ inset-inline-end:100% }
  /* e o ponto onde ele encosta à ficha */
  .px__item::before{
    content:""; position:absolute; inset-block-start:50%;
    inline-size:5px; block-size:5px; border-radius:50%;
    translate:0 -50%;
    background:var(--teal); opacity:.55;
  }
  .px__col--a .px__item::before{ inset-inline-start:calc(100% - 2.5px) }
  .px__col--b .px__item::before{ inset-inline-end:calc(100% - 2.5px) }

  /* A RÉGUA. Os extremos são o centro da primeira ficha e o da última: meia
     altura de ficha de cada lado. É a única medida que este desenho precisa
     de saber, e por isso `--ih` existe. */
  .px__lista{ position:relative }
  .px__lista::after{
    content:""; position:absolute;
    inset-block:calc(var(--ih) / 2) calc(var(--ih) / 2);
    inline-size:1px;
    background:var(--fio);
  }
  .px__col--a .px__lista::after{ inset-inline-start:calc(100% + var(--vao) / 2) }
  .px__col--b .px__lista::after{ inset-inline-end:calc(100% + var(--vao) / 2) }
}

/* --- o núcleo -------------------------------------------------------------
   O ponto de transformação entre o que vem de trás e o que vem a seguir. É
   redondo, tem halo e é a única coisa desta secção com luz — é o que faz
   dele o protagonista em vez de mais uma caixa entre duas listas. */
.px__centro{ display:grid; place-items:center; position:relative }
.px__nucleo{
  position:relative;
  display:grid; place-items:center;
  inline-size:clamp(178px, 21vw, 246px); block-size:clamp(178px, 21vw, 246px);
  padding:clamp(18px,2vw,26px);
  border-radius:50%;
  text-align:center;
  background:radial-gradient(74% 68% at 36% 26%, #ffffff 0%, #f2fbfb 58%, #e6f6f7 100%);
  box-shadow:
    0 0 0 1px rgba(2,115,115,.16),
    0 0 0 clamp(9px,1.1vw,14px) rgba(7,210,210,.07),
    0 30px 60px -34px rgba(1,46,53,.45);
}
/* O anel exterior, a respirar. Não é um enfeite: é o que diz que o centro
   está vivo e que as duas correntes chegam a ele. */
.px__halo{
  position:absolute; inset:calc(clamp(9px,1.1vw,14px) * -1);
  border-radius:50%;
  border:1px solid rgba(7,210,210,.34);
  animation:px-respira 4.6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes px-respira{
  0%,100% { scale:1; opacity:.5 }
  50%     { scale:1.045; opacity:.9 }
}

.px__frase b{
  display:block;
  font-family:var(--display); font-weight:700; letter-spacing:-.026em;
  font-size:clamp(20px,2.3vw,29px); line-height:1.08; color:var(--teal);
}
.px__frase i{
  display:block; margin-block-start:10px; font-style:normal;
  font-size:clamp(10.5px,1.05vw,12px); font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; line-height:1.5;
  color:var(--text-soft);
}

/* --- as ligações do núcleo ------------------------------------------------
   Do disco para as duas réguas. Metade da goteira de cada lado, e o disco é
   opaco: é ele que lhes corta o troço de dentro. */
@media (min-width:1000px){
  .px__centro::before,
  .px__centro::after{
    content:""; position:absolute; inset-block-start:50%;
    inline-size:var(--vao); block-size:1px;
    background:var(--fio);
    translate:0 -50%;
  }
  .px__centro::before{ inset-inline-end:100% }
  .px__centro::after{ inset-inline-start:100% }
}

/* --- o telemóvel ----------------------------------------------------------
   Três blocos empilhados, com o núcleo no MEIO — que é onde ele está na
   ideia: o que preservamos entra nele, e dele sai o que evoluímos. Pô-lo no
   fim, como a ordem do markup faria, invertia a leitura. */
@media (max-width:999px){
  .px__centro{ order:2; margin-block:clamp(4px,1.6vw,10px) }
  .px__col--a{ order:1 }
  .px__col--b{ order:3 }
  .px__nucleo{
    inline-size:min(100%, 260px); block-size:auto;
    aspect-ratio:1;
  }
  /* As duas setas dizem a direcção que o colector dizia no desktop. */
  .px__centro::before,
  .px__centro::after{
    content:""; position:absolute; inset-inline-start:50%;
    inline-size:0; block-size:0;
    border-inline:7px solid transparent;
    border-block-start:9px solid var(--fio);
    translate:-50% 0;
  }
  .px__centro::before{ inset-block-start:calc(clamp(4px,1.6vw,10px) * -1 - 12px) }
  .px__centro::after{ inset-block-end:calc(clamp(4px,1.6vw,10px) * -1 - 12px) }
}

/* ==========================================================================
   COMO CONDUZIMOS A MODERNIZAÇÃO — e, dentro disso, o Método

   A secção inverteu-se: abre pela PRÁTICA e explica o conceito a seguir.
   Quem chega aqui já leu o que é uma modernizadora e o que se preserva e
   evolui; o que falta saber é o que acontece.

     título → cinco etapas → divisória → texto → equação → botão

   O FUNDO DEIXOU DE SER CINZENTO CHAPADO. `g-tint` é um cinzento de alto a
   baixo, e a secção ficava como uma placa entre duas brancas. Passa a um
   degradê do cinzento muito claro para o BRANCO: nasce com peso suficiente
   para se destacar da secção anterior e acaba em branco, entregando a
   seguinte sem costura nenhuma.

   Discreto de propósito — três paragens muito próximas, sem cor. Um degradê
   que se nota deixa de ser fundo e passa a ser elemento.
   ========================================================================== */
.met{
  padding-block:clamp(52px,6.4vw,80px) clamp(44px,5.6vw,72px);
  background:linear-gradient(180deg,
    #e9ecec 0%,
    #f2f5f5 34%,
    #fafbfb 68%,
    #ffffff 100%);
}
/* O título encosta-se às etapas: são a mesma coisa dita em palavras e em
   desenho, e o respiro padrão de `.head` afastava-os. */
.met .head{ margin-block-end:clamp(30px,3.6vw,44px) }

/* --- a divisória ----------------------------------------------------------
   Separa a prática do conceito sem os desligar. Uma régua fina, curta e ao
   centro — a largura toda do container cortava a secção em duas e desfazia o
   trabalho de as ter juntado. O ponto a meio é a assinatura das réguas do
   site. */
.met__risca{
  position:relative;
  margin-block:clamp(38px,4.6vw,58px);
  block-size:1px;
  max-inline-size:min(100%, 420px);
  margin-inline:auto;
  background:linear-gradient(90deg, transparent, var(--rule) 22%, var(--rule) 78%, transparent);
}
.met__risca::after{
  content:""; position:absolute; inset-inline-start:50%; inset-block-start:50%;
  inline-size:5px; block-size:5px; border-radius:50%;
  translate:-50% -50%;
  background:var(--teal); opacity:.45;
}

/* --- o texto do Método ----------------------------------------------------
   Medida controlada e ao centro: à largura do container eram 150 caracteres
   por linha. */
.met__diz{ max-inline-size:66ch; margin-inline:auto; text-align:center }

/* --- a exemplificação -----------------------------------------------------
   A faixa da equação sangra de aresta a aresta sobre o degradê, como fazia
   na Home.

   AS MARGENS SÃO PEQUENAS DE PROPÓSITO. O componente já traz 46px de
   `padding-block` por dentro, e esse espaço não é respiro: é a folga por
   onde o círculo do resultado sai da faixa. Somar-lhe uma margem generosa
   dava cem pixéis de vazio de cada lado — o maior buraco da página, e
   invisível na folha, porque metade dele vive noutro ficheiro. */
.met .soma-art{
  margin-block:clamp(10px,1.4vw,18px) clamp(6px,1vw,12px);
}
.met__acao{ margin-block-start:0 }

/* ==========================================================================
   AS CINCO ETAPAS — a régua operacional, centrada

   Cinco passos, e DE PROPÓSITO mais simples do que tudo o resto da página:
   sem cartão, sem numeral gigante, sem luz a correr. O que separa isto do
   Método é ter MENOS, não ter o mesmo em ponto pequeno.

   CENTRADA, E NÃO ENCOSTADA À ESQUERDA. Antes o número, o sinal e o texto
   alinhavam todos à esquerda da coluna, e como o texto da última etapa é
   curto a composição parecia puxada para um dos lados. Agora cada etapa é
   uma coluna centrada em si mesma e a régua passa pelos centros dos sinais —
   que é o que faz das cinco uma peça só em vez de cinco blocos lado a lado.

   A régua é DERIVADA: cada etapa desenha o troço até à seguinte, com uma
   coluna mais um intervalo de comprimento, e a última não desenha nada. O
   anel da cor do fundo à volta de cada sinal é o que abre o buraco na linha.
   ========================================================================== */
.cond__lista{
  margin-block-start:clamp(30px,3.6vw,44px);
  display:grid; gap:clamp(24px,3vw,34px);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:860px){
  .cond__lista{
    --g:clamp(16px,2vw,28px);
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:var(--g);
    max-inline-size:1000px; margin-inline:auto;
  }
}

.cond{
  position:relative; min-inline-size:0;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}

/* --- a régua, no desktop --------------------------------------------------
   Do centro desta etapa ao centro da seguinte. Com as colunas centradas, o
   início é 50% e o comprimento é uma coluna mais um intervalo. */
@media (min-width:860px){
  .cond::before{
    content:""; position:absolute; z-index:0;
    inset-block-start:calc(12px + 12px + clamp(18px,1.9vw,22px));
    inset-inline-start:50%;
    inline-size:calc(100% + var(--g, 20px)); block-size:1.5px;
    background:rgba(2,115,115,.22);
  }
  .cond:last-child::before{ display:none }
}

/* --- a régua, no telemóvel -----------------------------------------------
   Vertical, à esquerda, com o sinal em cima dela e o texto ao lado. */
@media (max-width:859px){
  .cond{
    display:grid; align-items:start; text-align:start;
    grid-template-columns:auto minmax(0,1fr);
    column-gap:clamp(14px,4vw,18px);
    row-gap:2px;
  }
  .cond::before{
    content:""; position:absolute; z-index:0;
    inset-block-start:clamp(34px,9vw,42px); inset-block-end:calc(clamp(24px,3vw,34px) * -1 - 6px);
    inset-inline-start:clamp(17px,4.6vw,21px);
    inline-size:1.5px;
    background:rgba(2,115,115,.22);
  }
  .cond:last-child::before{ display:none }
}

.cond__n{
  position:relative; z-index:1; display:block;
  font-family:var(--display); font-weight:700; letter-spacing:.02em;
  font-size:12px; line-height:1; color:var(--cyan);
}
.cond__ico{
  position:relative; z-index:1;
  display:grid; place-items:center;
  inline-size:clamp(36px,3.8vw,44px); block-size:clamp(36px,3.8vw,44px);
  margin-block:12px 16px;
  border-radius:50%;
  color:var(--teal);
  background:radial-gradient(72% 66% at 32% 26%, #ffffff, #eef6f7 72%);
  /* O anel abre o buraco na régua. A cor é a do fundo NESTE ponto da secção
     — o degradê já está quase branco à altura das etapas. */
  box-shadow:0 0 0 7px #f4f7f7, inset 0 0 0 1px rgba(2,115,115,.16);
}
.cond__ico .ico{ inline-size:clamp(19px,2vw,23px); block-size:clamp(19px,2vw,23px) }

@media (max-width:859px){
  /* Uma grelha de duas colunas: o sinal ocupa a primeira e as duas linhas;
     o número, o nome e o texto vão na segunda. */
  .cond__n{ grid-column:2; grid-row:1 }
  .cond__ico{
    grid-column:1; grid-row:1 / span 3;
    margin:0; align-self:start;
  }
  .cond b{ grid-column:2; grid-row:2 }
  .cond p{ grid-column:2; grid-row:3 }
}

.cond b{
  position:relative; z-index:1; display:block;
  font-family:var(--display); font-weight:700; letter-spacing:-.022em;
  font-size:clamp(16px,1.7vw,19px); line-height:1.14; color:var(--text);
}
.cond p{
  position:relative; z-index:1; margin-block-start:8px;
  font-size:clamp(13.5px,1.35vw,14.5px); line-height:1.52; color:var(--text-soft);
  max-inline-size:32ch;
}
@media (min-width:860px){
  .cond p{ margin-inline:auto }
}

/* ==========================================================================
   OS QUE JÁ CONFIARAM

   O componente da Home entra com o título suprimido — o dele diz "Clientes e
   Parceiros.", que é o da Home, e esta secção tem o seu. Duas secções com
   títulos diferentes para a mesma régua seria incoerência.
   ========================================================================== */
.conf__frase{
  margin-block-start:14px; margin-inline:auto; max-inline-size:56ch;
  text-align:center; color:var(--on-dark-soft);
}

/* ==========================================================================
   A ARTE DOS CÍRCULOS NA TRAJETÓRIA

   O elemento decorativo do canto esquerdo vinha a 460px e deslocado 34% da
   própria largura para fora da secção: aparecia cortado e disputava espaço
   com os números, que são o assunto.

   Encolhe e recolhe. ENCOSTADO A `#numeros-sec`, que é o `id` desta página —
   `.tally__marca` é a mesma classe na Home, e a Home está finalizada.
   ========================================================================== */
#numeros-sec .tally__marca{
  inline-size:clamp(190px, 21vw, 300px);
  translate:-10% -50%;
  opacity:.42;
}
@media (max-width:899px){
  #numeros-sec .tally__marca{
    inline-size:clamp(150px, 38vw, 220px);
    translate:-22% -50%;
    opacity:.26;
  }
}

/* ==========================================================================
   O FECHO

   O componente `.closer` da Home, sem variante. O que esta folha acrescenta
   é o segundo botão: a Home fecha com um só, esta página fecha com dois,
   porque o briefing pede os dois caminhos.
   ========================================================================== */
.closer .actions{ flex-wrap:wrap; justify-content:center; gap:12px }

/* ==========================================================================
   Movimento reduzido
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .orb__raio i{ display:none }
  .orb__no{ transition:none }
}