/* ==========================================================================
   Home 2026 — o que a Home direta precisa

   Carregada DEPOIS de `home.css` e `home-editorial.css`, e por isso pode
   ajustar peças que essas folhas declaram sem lhes tocar. O que está aqui é
   de dois tipos:

   · A MODERNIZADORA, desenho novo: um sistema radial com as quatro
     capacidades numa circunferência, os raios a convergirem para o núcleo e
     uma luz a percorrer cada raio para dentro;

   · AJUSTES a peças aprovadas que mudaram de sítio ou de chão. Recolorir não
     é redesenhar: a composição, as medidas e os movimentos são os mesmos. Os
     ajustes estão todos ENCOSTADOS à secção onde vivem (`.atuar`, `.obj`), e
     é isso que deixa `onde-atuamos.html` — que usa a mesma conduta num chão
     claro — exactamente como estava.

   O desenho das secções que saíram da Home nesta ronda — problemas,
   comparativo, escolha por situação e cases — está em `home-reserva.css`,
   que nenhuma página carrega.
   ========================================================================== */

/* ==========================================================================
   03 · MAS, AFINAL, O QUE É UMA MODERNIZADORA?

   AS QUATRO CAPACIDADES NUMA CIRCUNFERÊNCIA, e não em dois pares com um
   disco no meio. A versão anterior deixava a convergência implícita na
   disposição; aqui ela é o que se vê: cada capacidade tem o seu raio, e uma
   luz percorre cada raio PARA DENTRO.

   A GEOMETRIA É EXACTA E NÃO TEM TRIGONOMETRIA:

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

   centra o nó no meio do palco, roda o referencial, anda R ao longo do X
   rodado, e desfaz a rotação para o conteúdo ficar direito. O raio é uma
   barra com `transform-origin` no centro e a MESMA rotação — por construção
   aponta ao mesmo sítio, em qualquer largura de ecrã, sem uma linha de
   JavaScript a ouvir `resize`.

   OS ÂNGULOS SÃO AS DIAGONAIS e não os pontos cardeais. Com nós em cima, em
   baixo, à esquerda e à direita, os dois laterais ficam sem largura para o
   texto; nas diagonais cada um tem o seu quadrante.

   O TAMANHO DO PALCO É DERIVADO e não escrito: um nó a 45° fica a R·cos45 do
   centro em cada eixo, por isso o palco mede duas vezes isso mais meio nó.
   Escrito à mão, deixava de acertar assim que R ou o nó mudassem.
   ========================================================================== */
.mod__palco{ max-inline-size:min(100%, 1040px); margin-inline:auto }

.mod__anel{
  --orb:clamp(120px, 14.5vw, 178px);
  --R:clamp(128px, 23vw, 228px);
  --no-w:clamp(142px, 19vw, 204px);
  --no-h:clamp(66px, 8.6vw, 88px);
  /* 0.7071 é cos(45°): a projecção do raio em cada eixo. */
  --meia-x:calc(var(--R) * .7071 + var(--no-w) / 2);
  --meia-y:calc(var(--R) * .7071 + var(--no-h) / 2);

  position:relative;
  inline-size:calc(var(--meia-x) * 2);
  block-size:calc(var(--meia-y) * 2);
  max-inline-size:100%;
  margin-inline:auto;
}

/* --- os raios -------------------------------------------------------------
   Do centro para fora, mais fortes junto ao núcleo: é para lá que a leitura
   vai. Passam por baixo do núcleo, que é opaco e lhes corta o último troço. */
.raio{
  position:absolute; inset-inline-start:50%; inset-block-start:50%;
  z-index:0;
  inline-size:var(--R); block-size:2px;
  transform-origin:0 50%;
  transform:translateY(-50%) rotate(var(--a));
  border-radius:2px;
  /* O RAIO SÓ SE PINTA NO VÃO. Ele vai do centro ao CENTRO do nó, e por isso
     o troço de fora passa por baixo da ficha e o de dentro por baixo do
     disco: com um degradê simples de ponta a ponta, o que sobrava visível
     era um risco pálido de trinta pixéis. As paragens são em px e derivam
     das mesmas medidas do anel — a linha nasce à saída do disco e apaga-se
     antes de tocar na ficha, que é onde ela tem alguma coisa a dizer. */
  background:linear-gradient(90deg,
    transparent calc(var(--orb) / 2 - 4px),
    rgba(2,115,115,.42) calc(var(--orb) / 2 + 10px),
    rgba(2,115,115,.42) 64%,
    transparent 88%);
}

/* A luz que converge. Percorre o raio do nó até à borda do núcleo e apaga-se
   lá — não atravessa o disco, porque o que ela representa é o que chega. */
.raio i{
  position:absolute; inset-block-start:50%; inset-inline-start:0;
  inline-size:7px; block-size:7px; border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 10px 2px rgba(7,210,210,.5);
  translate:var(--R) -50%;
  animation:raio-dentro 3.4s cubic-bezier(.45,0,.5,1) infinite;
  animation-delay:calc(var(--i) * .58s);
}
/* A luz arranca ONDE A LINHA COMEÇA A VER-SE e não onde o raio começa: a
   partir do centro da ficha, os primeiros trinta por cento do percurso são
   por baixo dela, e uma luz que se acende debaixo de uma chapa só se nota
   quando já vai a meio. */
@keyframes raio-dentro{
  0%   { translate:calc(var(--R) * .86) -50%; opacity:0 }
  14%  { opacity:1 }
  84%  { opacity:1 }
  100% { translate:calc(var(--orb) / 2 + 2px) -50%; opacity:0 }
}

/* --- os halos -------------------------------------------------------------
   Dois anéis que ENCOLHEM para dentro do núcleo e desaparecem sob ele. Um
   anel a crescer leria como emissão; a encolher, lê como chegada. */
.mod__halo{
  position:absolute; inset-inline-start:50%; inset-block-start:50%;
  z-index:1;
  inline-size:var(--orb); block-size:var(--orb); border-radius:50%;
  border:1.5px solid rgba(7,210,210,.55);
  translate:-50% -50%;
  animation:halo-dentro 3.4s cubic-bezier(.45,0,.5,1) infinite;
  pointer-events:none;
}
.mod__halo--2{ animation-delay:1.7s }
@keyframes halo-dentro{
  0%   { scale:1.62; opacity:0 }
  18%  { opacity:.6 }
  100% { scale:1; opacity:0 }
}

/* --- os quatro nós --------------------------------------------------------
   Sem chapa e sem borda em repouso: o que os prende à composição é o raio,
   não uma caixa. Quatro caixas pesadas à volta de um disco é o organograma
   que esta secção existe para não ser. */
.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; align-items:center; gap:clamp(9px,1vw,13px);
  padding:clamp(10px,1.1vw,14px) clamp(11px,1.2vw,15px);
  border-radius:clamp(13px,1.5vw,17px);
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(3px);
  box-shadow:0 0 0 1px rgba(2,115,115,.1), 0 18px 38px -30px 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;
}
.no:hover{ box-shadow:0 0 0 1px rgba(2,115,115,.26), 0 20px 42px -28px rgba(1,20,24,.55) }

.no__ico{
  flex:none; display:grid; place-items:center;
  inline-size:clamp(34px,3.4vw,42px); block-size:clamp(34px,3.4vw,42px);
  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 e estica o
   nó inteiro. O contentor declara tamanho, e o desenho também. */
.no__ico .ico{ inline-size:clamp(18px,1.8vw,22px); block-size:clamp(18px,1.8vw,22px) }

.no__txt{ min-inline-size:0; display:block }
.no__txt b{
  display:block; font-family:var(--display); font-weight:700;
  font-size:clamp(13.5px,1.4vw,16px); line-height:1.14; letter-spacing:-.02em;
  color:var(--text);
}
.no__txt i{
  display:block; margin-block-start:3px; font-style:normal;
  font-size:clamp(12px,1.2vw,13.5px); color:var(--text-soft);
}

/* --- o núcleo -------------------------------------------------------------
   Opaco e no plano da frente: é ele que corta o último troço de cada raio e
   engole os halos. Sem opacidade nenhuma — um núcleo translúcido deixava ver
   os quatro raios a cruzarem-se no meio. */
.mod__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(--orb); block-size:var(--orb);
  border-radius:50%;
  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 30px 60px -28px rgba(1,20,24,.6);
}
.mod__nucleo img{ inline-size:calc(var(--orb) * .56); block-size:auto }

/* --- a frase --------------------------------------------------------------
   Uma só, e é o que resta de escrito nesta secção. Composta em display e ao
   centro: é a conclusão do desenho, não uma legenda dele. */
.mod__frase{
  margin-block-start:clamp(30px,3.6vw,48px);
  margin-inline:auto; max-inline-size:26ch; text-align:center;
  font-family:var(--display); font-weight:700;
  font-size:clamp(19px,2.3vw,28px); line-height:1.24; letter-spacing:-.024em;
  color:var(--teal);
}
.mod__acao{ margin-block-start:clamp(20px,2.2vw,28px) }

/* --- o telemóvel ----------------------------------------------------------
   O ANEL NÃO SE DESFAZ. A primeira tentativa empilhava os quatro em coluna
   com o núcleo à cabeça, e o resultado era outra composição: quatro cartões
   numa lista, sem ligações, sem convergência e sem centro — nada que
   lembrasse o que o desktop mostra. A leitura da secção É o desenho, e uma
   lista não a faz.

   O que muda é a FORMA DA CIRCUNFERÊNCIA, não a ideia. Os quatro nós passam
   das diagonais aos pontos cardeais (`--am`, escrito por `home-2026.js`):
   um em cima, um de cada lado, um em baixo, com o núcleo ao centro e os
   quatro raios a convergirem nele.

   Porquê a cruz e não a diagonal: numa diagonal, o palco precisa de
   `2·(R·cos45 + meio-nó)` de LARGURA e a mesma conta de altura, e a 390px
   isso deixa o raio tão curto que a linha visível entre o núcleo e o nó fica
   com vinte pixéis. Na cruz, o eixo vertical tem toda a folga que quiser e só
   o horizontal está apertado — e esse fica com os nós estreitos, que é
   exactamente onde os nomes curtos calham.

   As medidas estão escolhidas para NÃO HAVER SOBREPOSIÇÃO em nenhum eixo, e
   o validador mede-o: o nó lateral começa a 74px do centro e o núcleo acaba
   aos 42. */
@media (max-width:820px){
  .mod__anel{
    --orb:clamp(76px, 21vw, 92px);
    --R:clamp(104px, 29vw, 124px);
    --no-w:clamp(84px, 23vw, 100px);
    --no-h:auto;
    /* Na cruz, a meia-largura é o raio inteiro mais meio nó — sem o cos(45)
       que a diagonal descontava. A altura segue o mesmo, com o nó de cima e
       o de baixo a serem mais altos por terem duas ou três linhas. */
    --meia-x:calc(var(--R) + var(--no-w) / 2);
    --meia-y:calc(var(--R) + clamp(40px, 11vw, 48px));

    inline-size:calc(var(--meia-x) * 2);
    block-size:calc(var(--meia-y) * 2);
    max-inline-size:100%;
  }

  .raio{ transform:translateY(-50%) rotate(var(--am)) }
  .no{ transform:translate(-50%,-50%) rotate(var(--am)) translate(var(--R)) rotate(calc(var(--am) * -1)) }

  /* O nó fica em coluna: sinal em cima, nome e verbo por baixo, ao centro. É
     o que lhe tira largura, e é a largura que está em falta. */
  .no{
    flex-direction:column; align-items:center; text-align:center;
    gap:6px; padding:9px 8px 10px;
    min-block-size:0;
    border-radius:14px;
  }
  .no__ico{ inline-size:34px; block-size:34px }
  .no__ico .ico{ inline-size:18px; block-size:18px }
  .no__txt b{ font-size:12.5px; line-height:1.12 }
  .no__txt i{ font-size:11px; margin-block-start:2px }

  /* O de cima e o de baixo estão no eixo vertical: alargá-los é simétrico e
     não empurra as arestas do palco. "Empresas de tecnologia" cabe em duas
     linhas em vez de três. */
  .no:nth-of-type(1),
  .no:nth-of-type(3){ inline-size:clamp(116px, 32vw, 140px) }

  .mod__nucleo img{ inline-size:calc(var(--orb) * .6) }
  .mod__frase{ max-inline-size:none }
}

/* Abaixo dos 340px de largura já não há conta que salve a cruz: o núcleo mais
   dois nós não cabem lado a lado. Aí sim vale mais empilhar do que espremer. */
@media (max-width:339px){
  .mod__anel{
    inline-size:100%; block-size:auto;
    display:flex; flex-direction:column; align-items:stretch; gap:10px;
  }
  .raio,.mod__halo{ display:none }
  .no{ position:static; transform:none; inline-size:auto; order:2;
       flex-direction:row; text-align:start; align-items:center }
  .no:nth-of-type(1),.no:nth-of-type(3){ inline-size:auto }
  .mod__nucleo{
    position:static; translate:none; order:1; margin-inline:auto;
    margin-block-end:16px; inline-size:104px; block-size:104px;
  }
}

/* ==========================================================================
   04 · COMO ATUAMOS, EM CHÃO ESCURO

   RECOLORIR, NÃO REDESENHAR. A composição é a mesma — o fio, o pulso que o
   percorre, os discos a meio da aresta, o numeral apagado no fundo, a barra
   no pé. O que muda é que tudo isto foi calibrado para branco sobre branco e
   agora está sobre o degradê escuro.

   Encostado a `.atuar`: `onde-atuamos.html` usa a mesma conduta num chão
   claro e não pode ser afectada por nada disto.
   ========================================================================== */
.atuar .fluxo__linha{ stroke:rgba(241,247,247,.2) }
.atuar .fluxo__no{ fill:#0a2427; stroke:var(--cyan) }

/* A PLACA TEM DE SER OPACA. O fio da jornada é desenhado ATRÁS das placas e
   elas ficam por cima — a ordem de empilhamento sempre esteve certa. O que
   estava errado era o fundo: um vidro a 5,5% de branco deixa passar tudo, e
   via-se a linha a atravessar o cartão e o texto, sobretudo no telemóvel,
   onde o fio é vertical e corta as quatro placas ao meio.

   A correcção é uma CAMADA DE BASE opaca por baixo do mesmo vidro: o cartão
   continua a ter o aspecto de vidro que tinha, e deixa de ser transparente.
   Mudar a cor do fio seria esconder o sintoma; o fio está bem onde está.

   O tom é o do degradê da secção à altura em que as placas ficam. */
.atuar .etp__placa{
  background:
    linear-gradient(168deg,rgba(241,247,247,.055),rgba(241,247,247,.016)),
    #06181b;
  border:1px solid var(--rule-dark);
  box-shadow:0 26px 50px -34px rgba(0,0,0,.7), inset 0 1px 0 rgba(241,247,247,.08);
}
.atuar .etp__n{ color:rgba(241,247,247,.07) }
/* O anel do disco era `var(--paper)` — sete pixéis de branco puro a abrir um
   buraco no degradê. Passa a ser a cor do próprio chão, para o disco
   continuar a parecer pousado sobre a aresta da placa. */
.atuar .etp__ico{
  color:var(--cyan);
  background:radial-gradient(72% 66% at 32% 26%, #0f3236, #08181b 72%);
  box-shadow:0 0 0 7px #071619, 0 14px 28px -18px rgba(0,0,0,.8),
             inset 0 0 0 1px rgba(7,210,210,.22);
}
.atuar .etp__verbo{ color:var(--cyan) }
.atuar .etp__t{ color:var(--on-dark) }
.atuar .etp__d{ color:var(--on-dark-soft) }
.atuar .etp__barra{ background:rgba(7,210,210,.34) }

.atuar .etp.is-pulso .etp__ico,
.atuar .etp.is-on .etp__ico{
  color:var(--cyan-lit);
  box-shadow:0 0 0 7px #071619, 0 0 0 10px rgba(7,210,210,.18),
             0 16px 30px -16px rgba(7,210,210,.5), inset 0 0 0 1px rgba(7,210,210,.45);
}
.atuar .etp.is-pulso .etp__n,
.atuar .etp.is-on .etp__n{ color:rgba(7,210,210,.14) }
.atuar .etp.is-on .etp__placa{ box-shadow:0 32px 58px -30px rgba(0,0,0,.75) }

/* O botão do Método fica separado da conduta por respiro, e não por linha:
   as quatro placas já se leem como um bloco, e uma régua por baixo fazia do
   botão uma quinta etapa. */
.atuar__acao{ margin-block-start:clamp(34px,4vw,52px) }

/* ==========================================================================
   05 · NOSSOS OBJETIVOS, EM CHÃO CLARO

   A versão em teal não ficou aprovada. A secção passa a clara, e a referência
   é a da modernizadora, logo acima: cartão branco, borda finíssima, sombra
   quase inexistente, desenho como protagonista e muito respiro.

   ISTO NÃO É UMA TROCA DE FUNDO. O cartão foi desenhado para chão escuro e
   quase tudo nele dependia disso:

   · o fundo era vidro — 5% de branco sobre escuro. Sobre branco, 5% de
     branco é branco, e o cartão desaparecia;
   · a borda era `--rule-dark`, que é branco a 15%: invisível no claro;
   · o nome era `#fff`;
   · o desenho é traçado nas cores de acento — ciano, verde, azul, âmbar —,
     todas pensadas para brilhar no escuro. Sobre branco, o ciano dá 1,8:1 e
     o âmbar 1,9:1: linhas que mal se veem;
   · à volta do desenho havia um halo de néon da cor do objectivo, que no
     claro vira uma mancha suja;
   · e um risco de LUZ BRANCA percorria o traço principal, animado. Sobre
     branco, um risco branco é nada.

   Cada uma dessas seis coisas tem aqui a sua resposta. A cor de cada objetivo
   MANTÉM-SE e é o que continua a distinguir os cinco; o que muda é o tom em
   que ela se escreve no claro.
   ========================================================================== */
.obj .head{ max-width:920px }
.obj .h2{ text-wrap:balance }

/* O TOM ESCURO DE CADA ACENTO. `--t` é a cor do objetivo e não se toca — é
   ela que dá a temperatura ao cartão. `--t-ink` é a mesma cor com luz a
   menos, para poder ser TRAÇO sobre branco.

   Misturado com preto e não com o teal da casa: com um azul-escuro, o âmbar
   de "Tornar referência" vinha-se abaixo para um verde-azeitona e deixava de
   ser âmbar. Preto tira luz sem mexer no matiz. */
.obj .aim{ --t-ink:color-mix(in srgb, var(--t) 66%, #000) }

.obj .aim{
  background:#fff;
  border:1px solid rgba(11,29,31,.08);
  box-shadow:0 18px 38px -30px rgba(1,20,24,.5);
}
.obj .aim:hover{
  border-color:color-mix(in srgb, var(--t-ink) 34%, transparent);
  box-shadow:0 22px 44px -28px rgba(1,20,24,.55);
}
/* O véu de cor no canto fica, muito mais fraco: sobre escuro dava
   temperatura, sobre branco a 16% dava uma nódoa. */
.obj .aim::before{
  background:radial-gradient(closest-side, color-mix(in srgb,var(--t) 9%,transparent), transparent 72%);
}

/* O DESENHO. As cores estão escritas como ATRIBUTO no SVG — `stroke="..."` —
   e uma declaração de CSS ganha sempre a um atributo de apresentação, que é
   o que permite recolorir os cinco sem tocar no gerador. */
.obj .aim__arte svg [stroke]{ stroke:var(--t-ink) }
/* O halo de néon sai. No escuro fazia o desenho acender; no claro só suja o
   branco à volta dele. */
.obj .obj-desenho{ filter:none }
/* E o risco de luz branca que percorria o traço principal também: sobre
   branco não se vê, e com a regra de cima acima passaria a ser um segundo
   traço grosso por cima do primeiro. */
.obj .obj-fio{ display:none }
/* A poça de luz no pé assentava o objecto sobre o escuro. No claro, uma
   sombra fininha faz o mesmo trabalho sem pintar nada. */
.obj .aim__arte svg [fill^="url"]{ opacity:.34 }

.obj .aim__risco{ background:var(--t-ink) }
/* Petróleo, como os nomes das quatro capacidades da secção de cima. */
.obj .aim b{ color:var(--text) }

/* O QUINTO OBJETIVO NO TELEMÓVEL. São cinco numa grelha de duas colunas, e o
   último fica sozinho na última fila a ocupá-la inteira — o que já estava
   certo. O que não estava era o desenho: com a largura toda para crescer, o
   troféu de "Tornar referência" desenhava-se a 300px de altura, três vezes o
   dos outros quatro, e passava a ser ele o objetivo importante. Cinco
   objetivos têm o mesmo peso: a chapa pode ser mais larga, o desenho não
   pode ser maior. */
@media (max-width:640px){
  .obj .aim:last-child .aim__arte{ max-inline-size:130px }
}

/* ==========================================================================
   07 · ONDE ATUAMOS

   A secção voltou ao formato anterior e ao chão escuro. O que precisa de
   ajuste é só o respiro: `.eco` tinha o pé curto porque, na versão antiga,
   os objetivos viviam dentro dela e o fim da secção era outro. Agora é uma
   secção inteira e leva respiro igual dos dois lados.
   ========================================================================== */
.eco{ padding-block:clamp(56px,7vw,88px) }

/* ==========================================================================
   09 · O CTA DOS NÚMEROS

   Fica separado dos números por respiro, e não por linha: os quatro números
   já estão divididos entre si por réguas, e uma quinta régua faria do botão
   um quinto indicador.
   ========================================================================== */
.tally__acao{ margin-block-start:clamp(34px,4vw,50px) }

/* ==========================================================================
   Movimento reduzido
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .raio i,.mod__halo{ animation:none }
  /* A luz parada no meio do raio não diz nada; some. */
  .raio i{ display:none }
  .no{ transition:none }
}