/* website2 v3 — CENA 3 · PERCURSO "Como construímos" =======================
 * ROTEIRO-V3 §3, Cena 3: quatro estações horizontais percorridas pelo scroll
 * vertical, com barra de progresso visível. Acento da cena: --flux.
 *
 * O QUE ESTAVA AQUI ANTES, e porque é que não foi deitado fora
 * -----------------------------------------------------------
 * Esta secção substitui o `#estudio` da v2 — uma lista de três items
 * (Estratégia & Design / Engenharia & Integrações / SEO & Presença) ao lado
 * de um medalhão de azulejo em SVG. O conteúdo era já o desta cena, em
 * lista; o medalhão é que era da linguagem antiga (o mundo do azulejo) e não
 * tem lugar no tema SINAL. O texto foi reescrito para quatro estações; o
 * `id="estudio"` e o `id="estudio-title"` **ficam** — o menu do cabeçalho
 * aponta para `#estudio` e a secção é nomeada por `aria-labelledby`.
 *
 * O CHÃO SEM JAVASCRIPT É O PONTO DE PARTIDA, NÃO O REMATE
 * --------------------------------------------------------
 * Sem JS, com movimento reduzido, ou abaixo de 900px, isto é uma **coluna
 * vertical** com as quatro estações inteiras e todo o texto legível. O
 * percurso horizontal é uma camada que `path.js` acrescenta por cima, e só
 * no desktop. É a mesma regra do resto da v3 (`numbers.js`: "sem JavaScript
 * lê-se a medida final"; `curtainAutoClear`; `.rs--static`).
 *
 * PORQUE É QUE O HORIZONTAL NÃO VAI ATÉ AO TELEMÓVEL
 * --------------------------------------------------
 * Está registado no CLAUDE.md do projeto: o `.ascii-compare` do site em
 * produção tinha `touch-action:none` e agarrava o gesto no `pointerdown`.
 * Num elemento alto e de largura inteira, qualquer deslize vertical ficava
 * preso — "cai no meio do pixel e não sobe nem desce". Uma corrida
 * horizontal arrastável é exactamente a mesma forma de defeito. No
 * telemóvel a cena empilha; no desktop, onde há rato, arrasta-se.
 * ========================================================================= */

.path{position:relative;background:var(--void);color:var(--paper);
  border-top:1px solid var(--rule);
  padding:clamp(80px,12vh,140px) 0 clamp(72px,10vh,120px)}
.path-inner{width:min(1320px,100% - clamp(32px,6vw,96px));margin-inline:auto}

/* ---- cabeça da cena ---------------------------------------------------- */
.path-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
  gap:clamp(20px,4vw,64px);align-items:end;margin-bottom:clamp(32px,5vh,58px)}
.path-eyebrow{display:block;font:500 11px/1 var(--ff-mono,ui-monospace,monospace);
  letter-spacing:.16em;text-transform:uppercase;color:var(--flux);margin-bottom:18px}
.path-title{margin:0;font-family:var(--ff-display);font-weight:700;
  font-size:clamp(28px,4.6vw,62px);line-height:1;letter-spacing:-.03em;color:var(--paper)}
.path-title em{font-style:normal;color:var(--flux)}
.path-lede{margin:0;font-size:clamp(14px,1.2vw,17px);line-height:1.6;color:var(--paper-dim)}

/* ---- a barra de progresso / seletor ------------------------------------
   É navegação a sério: quatro botões, um por estação, com `aria-current` na
   activa. No desktop clicar num deles leva o scroll ao ponto respectivo; no
   telemóvel é uma âncora comum para a estação, que está logo abaixo. */
.path-bar{position:relative;margin-bottom:clamp(18px,2.6vh,30px)}
.path-stations{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;margin:0;padding:0;list-style:none}
.path-stations button{all:unset;display:flex;align-items:baseline;gap:10px;
  box-sizing:border-box;width:100%;padding:14px 16px 14px 0;cursor:pointer;
  font:500 11px/1.2 var(--ff-mono,ui-monospace,monospace);letter-spacing:.14em;
  text-transform:uppercase;color:var(--paper-faint);
  transition:color .35s ease}
.path-stations button:hover,
.path-stations button:focus-visible{color:var(--paper)}
.path-stations button:focus-visible{outline:2px solid var(--flux);outline-offset:3px}
.path-stations button .n{color:var(--flux);opacity:.55;transition:opacity .35s ease}
.path-stations [aria-current="true"]{color:var(--paper)}
.path-stations [aria-current="true"] .n{opacity:1}

.path-meter{position:relative;height:1px;background:var(--rule-strong)}
.path-meter i{position:absolute;inset:0 auto 0 0;display:block;
  width:calc(var(--p,0) * 100%);background:var(--flux)}

/* ---- a pista ------------------------------------------------------------
   Por omissão (sem JS, telemóvel, movimento reduzido) é uma coluna. O
   `.path--run` só é posto por `path.js` quando o percurso horizontal está
   mesmo montado, e é ele que transforma isto numa fila. */
.path-track{display:grid;gap:clamp(28px,5vh,56px)}
.station{position:relative;display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(20px,3vw,54px);align-items:start;
  border-top:1px solid var(--rule);padding-top:clamp(20px,3vh,32px)}
.station-index{font:500 10px/1 var(--ff-mono,ui-monospace,monospace);
  letter-spacing:.2em;text-transform:uppercase;color:var(--flux);margin-bottom:14px;display:block}
.station h3{margin:0 0 12px;font-family:var(--ff-display);font-weight:700;
  font-size:clamp(21px,2.4vw,34px);line-height:1.08;letter-spacing:-.025em;color:var(--paper)}
.station p{margin:0;font-size:clamp(14px,1.1vw,16px);line-height:1.6;color:var(--paper-dim);max-width:46ch}
.station-note{display:block;margin-top:14px;
  font:500 10px/1.6 var(--ff-mono,ui-monospace,monospace);letter-spacing:.11em;
  text-transform:uppercase;color:var(--paper-faint)}

/* ---- o painel vivo de cada estação -------------------------------------
   Cada painel tem conteúdo estático legível ANTES de qualquer animação —
   a animação é o que acontece quando a estação fica activa, não o que
   torna o painel legível. */
.station-live{position:relative;min-height:clamp(220px,32vh,340px);
  display:flex;flex-direction:column;justify-content:center;
  border:1px solid var(--rule);background:linear-gradient(180deg,rgba(238,241,247,.035),rgba(238,241,247,.012));
  padding:clamp(16px,2vw,26px);overflow:hidden}
.station-live::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--flux);transform:scaleX(0);transform-origin:left center;
  transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.station.is-live .station-live::after{transform:scaleX(1)}

/* 01 · estratégia — a lista de perguntas */
.ask{margin:0;padding:0;list-style:none;display:grid;gap:2px}
.ask li{display:flex;align-items:baseline;gap:12px;padding:11px 0;
  border-bottom:1px solid var(--rule);
  font-size:14px;line-height:1.4;color:var(--paper-dim);
  opacity:.45;transition:opacity .5s ease,color .5s ease}
.ask li:last-child{border-bottom:0}
.ask li.is-asked{opacity:1;color:var(--paper)}
.ask li::before{content:"";flex:0 0 auto;width:9px;height:9px;border:1px solid var(--rule-strong);
  transform:translateY(-1px);transition:background .4s ease,border-color .4s ease}
.ask li.is-asked::before{background:var(--flux);border-color:var(--flux)}
.ask-count{display:block;margin-top:14px;
  font:500 10px/1 var(--ff-mono,ui-monospace,monospace);letter-spacing:.14em;
  text-transform:uppercase;color:var(--paper-faint)}

/* 02 · design — o tipo a compor-se */
.compose{display:grid;gap:14px;align-content:center;min-height:inherit}
.compose-line{margin:0;font-family:var(--ff-display);font-weight:700;color:var(--paper);
  font-size:clamp(24px,3.4vw,46px);line-height:1;letter-spacing:var(--tracking,.22em);
  opacity:var(--settle,.35);transition:letter-spacing 1.1s cubic-bezier(.22,.61,.36,1),opacity 1.1s ease}
.compose-scale{display:flex;align-items:baseline;gap:clamp(10px,1.6vw,22px);
  border-top:1px solid var(--rule);padding-top:12px;
  font-family:var(--ff-display);font-weight:700;color:var(--paper-faint);letter-spacing:-.02em}
.compose-scale span{line-height:1}
.compose-scale span:nth-child(1){font-size:12px}
.compose-scale span:nth-child(2){font-size:17px}
.compose-scale span:nth-child(3){font-size:24px}
.compose-scale span:nth-child(4){font-size:34px;color:var(--paper-dim)}
.compose-meta{margin:0;font:500 10px/1.6 var(--ff-mono,ui-monospace,monospace);
  letter-spacing:.12em;text-transform:uppercase;color:var(--paper-faint)}

/* 03 · construção — uma cadeia de trabalho, não uma constelação aleatória.
   Os nomes já estavam no HTML; a geometria passa a mostrar a ordem e a
   entrega entre sistemas. O canvas fica inerte para preservar a marcação e
   garantir que uma falha de JS nunca apaga a explicação. */
.path-graph{position:relative;min-height:inherit;display:grid;align-content:center}
.path-graph-canvas{display:none}
.path-graph-caption{position:absolute;left:0;bottom:0;margin:0;
  font:500 10px/1 var(--ff-mono,ui-monospace,monospace);letter-spacing:.14em;
  text-transform:uppercase;color:var(--paper-faint)}
.path-graph-points{margin:0;padding:0;list-style:none;display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));align-items:center;gap:0}
.path-graph-points li{position:relative;display:grid;place-items:center;min-height:58px;
  padding:9px 6px;border-block:1px solid var(--rule-strong);
  font:500 9px/1.25 var(--ff-mono,ui-monospace,monospace);letter-spacing:.09em;
  text-align:center;text-transform:uppercase;color:var(--paper-dim)}
.path-graph-points li::after{content:"";position:absolute;z-index:1;right:-3px;top:50%;
  width:6px;height:6px;border:1px solid var(--flux);background:var(--void);
  transform:translateY(-50%) rotate(45deg)}
.path-graph-points li:last-child::after{display:none}

/* 04 · automação — a demonstração a sério, montada aqui dentro */
.station-live .demo{margin:0}
.station-live .demo-help{font-size:13px;line-height:1.5;color:var(--paper-dim);margin:0 0 14px}
.station-live .demo-flow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.station-live .demo-node{border:1px solid var(--rule-strong);padding:8px 10px;
  font:500 9.5px/1 var(--ff-mono,ui-monospace,monospace);letter-spacing:.11em;
  text-transform:uppercase;color:var(--paper-dim);transition:color .3s ease,border-color .3s ease,background .3s ease}
.station-live .demo-node.is-on,
.station-live .demo-node.is-active{color:var(--void);background:var(--flux);border-color:var(--flux)}
.station-live .demo-wire{flex:0 0 14px;height:1px;background:var(--rule-strong)}
.station-live .demo-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.station-live .demo-actions .btn{font:500 10px/1 var(--ff-mono,ui-monospace,monospace);
  letter-spacing:.12em;text-transform:uppercase;padding:11px 16px;border-radius:0;cursor:pointer}
.station-live .demo-actions .btn--primary{background:var(--flux);color:var(--paper);border:1px solid var(--flux)}
.station-live .demo-actions .btn--ghost{background:transparent;color:var(--paper-dim);border:1px solid var(--rule-strong)}
.station-live .demo-stat{margin:0 0 8px;font:500 10px/1 var(--ff-mono,ui-monospace,monospace);
  letter-spacing:.12em;text-transform:uppercase;color:var(--paper-faint)}
.station-live .demo-stat b{color:var(--flux)}
.station-live .demo-log{margin:0;padding-left:16px;max-height:86px;overflow:auto;
  font:500 10px/1.7 var(--ff-mono,ui-monospace,monospace);letter-spacing:.06em;color:var(--paper-faint)}

/* ---- a camada horizontal, montada por path.js (só desktop) --------------
   `--n` é o número de estações e `--i` o progresso contínuo (0..n-1).
   O deslocamento é uma função de `--i`, e nada mais: ao recuar o scroll
   desfaz-se sozinho, exactamente como a cena da villa. */
@media(min-width:900px){
  .path--run{padding-bottom:0}
  .path--run .path-pin{min-height:100svh;display:flex;flex-direction:column;
    justify-content:center;padding:clamp(56px,8vh,92px) 0 clamp(32px,5vh,60px)}
  .path--run .path-head{margin-bottom:clamp(16px,2.4vh,30px)}
  /* Fixada, a cena tem de caber num ecrã — num portátil de 900px de altura
     o título grande da versão em coluna empurrava o painel para fora por
     baixo. Aqui a tipografia e as alturas passam a depender da ALTURA da
     janela, não só da largura. */
  .path--run .path-title{font-size:clamp(26px,min(3.4vw,4.4vh),44px)}
  .path--run .path-lede{font-size:clamp(13px,1.6vh,16px)}
  .path--run .station h3{font-size:clamp(19px,min(2vw,3vh),29px)}
  .path--run .station p{font-size:clamp(13px,1.6vh,15.5px)}
  /* A altura do painel é o que faz o bloco encher o ecrã fixado. Com
     34vh sobrava uma faixa morta de ~180px por cima do título (a cena está
     centrada verticalmente, e um bloco curto centra-se com muito ar em
     cima e em baixo). 42vh dá-lhe corpo sem cortar nada a 900px de altura. */
  .path--run .station-live{min-height:clamp(240px,42vh,400px)}
  .path--run .path-track{display:flex;gap:0;flex-wrap:nowrap;
    width:calc(var(--n,4) * 100%);
    transform:translate3d(calc(var(--i,0) * -100% / var(--n,4)),0,0);
    will-change:transform}
  /* Revisão de 2026-10-12: o fundido ainda deixava duas camadas legíveis nas
     capturas intermédias. A pista muda agora por corte no ponto médio de cada
     troço (`path.js` arredonda `--i`); a estação activa está inteira e todas
     as outras ficam invisíveis. A barra mantém o progresso contínuo, por isso
     conserva-se a orientação sem transformar a troca num travelling. */
  .path--run .station{flex:0 0 calc(100% / var(--n,4));
    padding-right:clamp(28px,4vw,72px);border-top:1px solid var(--rule);
    opacity:0;visibility:hidden;transition:none}
  .path--run .station.is-live{opacity:1;visibility:visible;transition:none}
  .path--run .path-stations button{cursor:pointer}
  /* o cursor de arrasto só onde arrastar faz sentido */
  .path--run .path-track{cursor:grab;touch-action:pan-y}
  .path--run.is-dragging .path-track{cursor:grabbing;user-select:none}
}

/* ---- telemóvel: coluna, com a barra a servir de índice ----------------- */
@media(max-width:899px){
  .path-head{grid-template-columns:1fr;align-items:start}
  .station{grid-template-columns:1fr;gap:18px}
  .path-stations{grid-template-columns:repeat(2,minmax(0,1fr))}
  .path-stations button{padding:12px 10px 12px 0;font-size:10px}
  .station-live{min-height:200px}
  /* A Estação 04 monta a demo do fluxo quando entra em vista e o painel
     passava de 200px para 408px (390) ou 451px (360), empurrando a secção
     seguinte já à vista (CLS, auditoria de 2026-10-21). Reserva-se a altura
     montada, medida nas duas larguras. */
  .station[data-station="3"] .station-live{min-height:clamp(200px,calc(967px - 143vw),470px)}
  .path-graph-points{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 0}
}

@media(prefers-reduced-motion:reduce){
  .station{opacity:1!important}
  .ask li{opacity:1;color:var(--paper)}
  .ask li::before{background:var(--flux);border-color:var(--flux)}
  .compose-line{letter-spacing:-.02em;opacity:1;transition:none}
  .station-live::after{transform:scaleX(1);transition:none}
}

/* =========================================================================
   O FIO CONDUTOR (2026-09-27)
   -------------------------------------------------------------------------
   O que já existia: a linha de cima (`.path-meter`) com um preenchimento que
   avança com `--p`. O que faltava era a LIGAÇÃO — o pulso viajava por cima e
   as quatro estações aconteciam em baixo, sem nada a dizer que eram a mesma
   coisa. Era isso que fazia cada estação ler-se como um painel solto.

   O fio tem dois estados e nenhum temporizador:
     - A VIAJAR (`--settle` -> 0): a cabeça do pulso brilha e alonga-se no
       sentido da marcha; não há descida nenhuma.
     - POUSADO (`--settle` -> 1): a cabeça pára e o fio DESCE da linha para
       dentro do painel da estação activa, onde o diagrama dessa estação já
     vive (perguntas, grelha tipográfica, cadeia funcional, fluxo).
   `--settle` é escrito por `path.js` a partir da distância de `--i` ao
   inteiro mais próximo, ou seja é função do progresso e desfaz-se ao recuar.

   `--est` (o `data-est` no `.path`) diz QUAL a estação, e é o que muda a
   forma da aterragem — a "quebra" no diagnóstico, a régua na mensagem, o nó
   na construção, a seta concluída em "a correr".
   ===================================================================== */
.path--run .path-bar{ position: relative; }

/* a cabeça do pulso: existe sempre, alonga-se enquanto viaja */
.path--run .path-meter i::after{
  content:"";
  position:absolute; right:-3px; top:50%;
  width: calc(6px + (1 - var(--settle,1)) * 26px);
  height:3px; transform: translateY(-50%);
  border-radius:2px;
  background: linear-gradient(90deg, rgba(75,92,255,0), var(--flux) 55%, #EEF1F7);
  box-shadow: 0 0 calc(6px + (1 - var(--settle,1)) * 14px) rgba(75,92,255,.75);
}

/* a descida: nasce na cabeça do pulso e entra no painel activo */
.path--run .path-bar::after{
  content:"";
  position:absolute;
  left: calc(var(--p,0) * 100%);
  top: 100%;
  width:1px;
  height: calc(var(--settle,0) * clamp(26px, 4.4vh, 52px));
  background: linear-gradient(180deg, var(--flux), rgba(75,92,255,0));
  opacity: var(--settle,0);
  pointer-events:none;
}

/* 01 · DIAGNÓSTICO — o pulso encontra uma QUEBRA e marca-a: a linha
   interrompe-se por baixo da cabeça e fica um traço vermelho-âmbar. */
.path--run[data-est="0"] .path-bar::before{
  content:"";
  position:absolute;
  left: calc(var(--p,0) * 100% + 7px);
  top: -2px;
  width: calc(var(--settle,0) * 16px);
  height: 5px;
  background: repeating-linear-gradient(90deg,
    var(--amber,#c8794f) 0 3px, transparent 3px 6px);
  opacity: var(--settle,0);
  pointer-events:none;
}

/* 02 · MENSAGEM — a aterragem organiza-se: três réguas curtas, uma grelha. */
.path--run[data-est="1"] .path-bar::before{
  content:"";
  position:absolute;
  left: calc(var(--p,0) * 100% - 30px);
  top: 7px;
  width: calc(var(--settle,0) * 34px);
  height: 7px;
  background:
    linear-gradient(var(--flux),var(--flux)) 0 0/100% 1px no-repeat,
    linear-gradient(var(--flux),var(--flux)) 0 3px/72% 1px no-repeat,
    linear-gradient(var(--flux),var(--flux)) 0 6px/46% 1px no-repeat;
  opacity: calc(var(--settle,0) * .85);
  pointer-events:none;
}

/* 03 · CONSTRUÇÃO — dois nós ligados: a estrutura mínima. */
.path--run[data-est="2"] .path-bar::before{
  content:"";
  position:absolute;
  left: calc(var(--p,0) * 100% - 26px);
  top: 5px;
  width: calc(var(--settle,0) * 28px);
  height: 5px;
  background:
    radial-gradient(circle 2.5px at 2.5px 2.5px, var(--flux) 98%, transparent) no-repeat,
    radial-gradient(circle 2.5px at calc(100% - 2.5px) 2.5px, var(--flux) 98%, transparent) no-repeat,
    linear-gradient(var(--flux),var(--flux)) 50% 2px/100% 1px no-repeat;
  opacity: var(--settle,0);
  pointer-events:none;
}

/* 04 · A CORRER — o estado resolvido, e o fio contrai-se numa linha só que
   atravessa a largura toda e aponta para o que vem a seguir (`#trabalho`). */
.path--run[data-est="3"] .path-bar::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top: 7px;
  height:1px;
  transform-origin:left center;
  transform: scaleX(var(--settle,0));
  background: linear-gradient(90deg, var(--flux), var(--aqua,#19E5CE));
  opacity: calc(var(--settle,0) * .9);
  pointer-events:none;
}
/* na estação 04 a descida deixa de fazer sentido — o percurso já não entra
   em lado nenhum, sai. */
.path--run[data-est="3"] .path-bar::after{ opacity: 0; }

/* Movimento reduzido: o fio existe, no estado final da estação activa, sem
   nenhum passo intermédio — `--settle` deixa de ser lido. */
@media (prefers-reduced-motion: reduce){
  .path--run .path-bar::after,
  .path--run .path-bar::before,
  .path--run .path-meter i::after{ --settle: 1 !important; transition:none !important; }
  .path--run .path-meter i::after{ width:6px; box-shadow:none }
}