/* ===========================================================================
   DIREÇÃO VISUAL (2026-10-22) — ver DIRECAO-VISUAL.md e a Figma
   (ficheiro "RE WEBFOLIO — Website 2026", páginas Fundamentos e Composição).
   ---------------------------------------------------------------------------
   Carregado por ÚLTIMO na landing e na casa/. Não é um segundo sistema: os
   nomes são os que o código já usava (`--void`, `--paper`, `--ink`,
   `--volt`… em signal.css); aqui só se corrigem valores e se acrescentam os
   degraus que faltavam. A ideia da página: uma sala escura onde o trabalho
   acende. Uma cor de fundo de ponta a ponta, tipografia em cinco tamanhos,
   um botão em dois tipos, uma etiqueta, e o acento lima uma vez por ecrã.
   ======================================================================== */

/* ---- 1. tokens ---------------------------------------------------------- */
:root{
  /* tinta secundária sólida: 8,4:1 sobre --void (era rgba .62, ~6,9:1, e
     mudava de valor conforme o fundo por baixo) */
  --paper-dim:#A3A8B3;
  --volt-hover:#D7FF5C;
  --volt-press:#B6EC1C;
  --ink-hover:#232733;            /* --ink-2 (#171B27) é o secundário em repouso */
  --ink-press:#14161D;
  --curva:cubic-bezier(.2,.8,.2,1);
  --margem:clamp(20px,4vw,64px);
  --entre:clamp(96px,11vw,168px);
  --conteudo:min(1320px, 100% - 2 * var(--margem));
  --t-d2:clamp(36px,4.4vw,68px);
  --t-titulo:clamp(22px,1.9vw,28px);
}
@media (max-width:820px){
  :root{ --margem:20px; }
}

/* ---- 2. cabeçalho (vinha de villa-night.css, que a landing já não carrega) */
.site-header{background:rgba(7,8,13,.72)!important;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(238,241,247,.10)}
.site-header .brand,
.site-header .brand .mark{color:#EEF1F7}
.site-header .brand .mark{border-color:rgba(238,241,247,.34)}
.site-header .site-nav a{color:rgba(238,241,247,.74)}
.site-header .site-nav a:hover{color:#EEF1F7}
.site-header .lang-switch a{color:rgba(238,241,247,.5)}
.site-header .lang-switch [aria-current]{color:#C8FF2E}
.site-header .menu-toggle{border-color:rgba(238,241,247,.28);color:#EEF1F7}
@media(max-width:820px){
  .site-header .site-nav{background:rgba(7,8,13,.96);border-bottom-color:rgba(238,241,247,.12)}
}
/* o número do menu é o da etiqueta da secção; a ordem já não é contígua
   (02, 04, 05, 06, 08, 09), por isso vem do HTML e não de um contador */
body:not(.page-plain) .site-nav a::before{content:attr(data-n)}

/* o hero fica como estava (fundo escuro, texto claro, lima, tipo forte), sem
   o grão: sobre o --void o grão levantava o palco fixo um degrau acima do
   chão e, a meio do scroll, lia-se como uma placa mais clara a acabar antes
   do trabalho. A direção pede uma cor só. Sai também a metade de cima da
   "ponte" de numbers.css (`.signal::after`): levava o fundo do hero ao azul
   da secção de números, que deixou de vir a seguir; agora a seguir vem o
   trabalho, no mesmo --void, e a ponte era ela própria a costura. */
.signal-stage::after,
.signal::after{content:none!important}

/* ---- 3. botões ----------------------------------------------------------
   Uma forma (pílula), uma altura (52 px), rótulo Inter 15/600. Principal =
   lima; secundário = degrau de superfície. `.btn-d` é a classe nova; as
   antigas das secções que ficam (`.signal-btn`, `.btn--primary`, `.btn--ghost`)
   recebem as mesmas regras para a página ter um só botão.
   Os `!important` são contra o cauda.css, que pinta estes botões com
   seletores de id (`#trabalho .btn--primary{box-shadow:…}`, o brilho lima que
   a direção tirou). Os botões da visita (`.rs-chapter .btn`, villa-night.css)
   ficam de fora: estão afinados para assentar por cima do 3D. */
.btn-d,
.signal-btn,
body:not(.pagina-casa) main .btn,
.casa-fim .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 24px;border-radius:999px;border:0!important;
  font:600 15px/1 var(--ff-ui);letter-spacing:0;text-transform:none;text-decoration:none;
  white-space:nowrap;cursor:pointer;box-shadow:none!important;
  transition:background-color .16s ease-out,color .16s ease-out,transform .16s ease-out;
}
.btn-d--principal,
.signal-btn--solid,
body:not(.pagina-casa) main .btn--primary,
.casa-fim .btn--primary{background:var(--volt)!important;color:var(--void)!important}
.btn-d--principal:hover,
.signal-btn--solid:hover,
body:not(.pagina-casa) main .btn--primary:hover,
.casa-fim .btn--primary:hover{background:var(--volt-hover)!important;transform:translateY(-1px)}
.btn-d--principal:active,
.signal-btn--solid:active,
body:not(.pagina-casa) main .btn--primary:active,
.casa-fim .btn--primary:active{background:var(--volt-press)!important;transform:none}
.btn-d--secundario,
.signal-btn--ghost,
body:not(.pagina-casa) main .btn--ghost,
.casa-fim .btn--ghost,
.proof-open{background:var(--ink-2)!important;color:var(--paper)!important;border:0!important}
.btn-d--secundario:hover,
.signal-btn--ghost:hover,
body:not(.pagina-casa) main .btn--ghost:hover,
.casa-fim .btn--ghost:hover,
.proof-open:hover{background:var(--ink-hover)!important;transform:none}
.btn-d--secundario:active,
.signal-btn--ghost:active,
body:not(.pagina-casa) main .btn--ghost:active,
.casa-fim .btn--ghost:active,
.proof-open:active{background:var(--ink-press)!important}
/* os canais do contacto (contacto.css) e o botão de cada setor (setores.css)
   são o mesmo botão: o principal continua lima, os outros passam ao degrau
   de superfície. Saem os brilhos coloridos e os cinco tons de botão dos
   setores; o tom de cada hora fica no cartão e no desenho. */
#contacto .canal{min-height:52px;padding:0 24px;font:600 15px/1 var(--ff-ui);letter-spacing:0;box-shadow:none!important}
#contacto .canal--site{background:var(--volt);color:var(--void)}
#contacto .canal--site:hover{background:var(--volt-hover);transform:translateY(-1px)}
#contacto .canal--site:active{background:var(--volt-press)}
#contacto .canal--sec{background:var(--ink-2);color:var(--paper);border:0}
#contacto .canal--sec:hover{background:var(--ink-hover);color:var(--paper);transform:none}
#contacto .canal--sec:active{background:var(--ink-press)}
#contacto .canal:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
#imobiliario .st-cta{
  display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;
  background:var(--ink-2);color:var(--paper);font:600 14px/1 var(--ff-ui);box-shadow:none!important;
  transition:background-color .16s ease-out;
}
#imobiliario .st-cta:hover{background:var(--ink-hover);transform:none}
#imobiliario .st-cta:active{background:var(--ink-press)}
#imobiliario .st-cta:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
#imobiliario .st-card{box-shadow:none!important}
/* no desktop o cartão fechado abre por foco (sectors.js), mas o conteúdo só
   aparecia ao fim de 0,3 s + 0,5 s: o foco do teclado caía num botão ainda
   invisível (medido: opacidade 0 aos 120 ms). Com o foco lá dentro, abre já. */
@media (min-width:1000px){
  #imobiliario .st-card:focus-within .st-more{opacity:1;transform:none;transition:none}
}
.btn-d:focus-visible,
.signal-btn:focus-visible,
body:not(.pagina-casa) main .btn:focus-visible,
.casa-fim .btn:focus-visible,
.proof-open:focus-visible{outline:2px solid var(--paper);outline-offset:3px}

/* ---- 4. o chão: uma cor de ponta a ponta --------------------------------
   As secções deixam de ter fundos e bandas próprias (cauda.css dava a cada
   uma a sua "matéria"); separa-as o espaço. Na casa/ o `#estudio` é o fecho
   da visita e tem a faixa de água do water.css (`#estudio::before`) e o fundo
   `--ink` contra o qual o mergulho foi afinado: fica de fora. */
body{background:var(--void)}
#trabalho, #demonstracao, #demo, #agentes, body:not(.pagina-casa) #estudio, #numeros, #imobiliario, #contacto{
  background:var(--void)!important;border-top:0!important;box-shadow:none!important;
}
#trabalho::before, #trabalho::after, #demo::before, #demo::after, #agentes::before, #agentes::after,
#imobiliario::before, #imobiliario::after, #contacto::before, #contacto::after,
body:not(.pagina-casa) #estudio::before, #numeros::before, #numeros::after{content:none!important}
#trabalho, #demonstracao, #demo, #agentes, body:not(.pagina-casa) #estudio, #numeros, #imobiliario{padding:var(--entre) 0 0!important}
#contacto{padding:var(--entre) 0 var(--entre)!important}

/* a largura de conteúdo é a mesma em todas */
#trabalho .proofs-inner, .previa-inner, #demo > .wrap, #agentes > .wrap, #estudio .path-inner,
#numeros .numbers-inner, #imobiliario > .wrap, #contacto > .wrap{
  width:var(--conteudo)!important;max-width:none!important;margin-inline:auto!important;padding-inline:0!important;
}

/* ---- 5. a cabeça de cada secção: etiqueta → título → frase ------------- */
main .sec-tag{
  display:block;margin:0 0 24px;padding:0;
  font:500 13px/1.2 var(--ff-mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--paper-dim)!important;background:none;border:0;
}
main .sec-tag::before, main .sec-tag::after{content:none!important}

#trabalho .proofs-head, #estudio .path-head, #numeros .numbers-head, #demo .bancada-cabeca,
#agentes .ag-cabeca, #imobiliario .st-head, #contacto .close-cta{
  display:block!important;text-align:left;max-width:860px;margin:0 0 56px!important;padding:0;
}
.proofs-title, .previa-titulo, .path-title, .numbers-title,
#demo h2.display, #agentes h2.display, #imobiliario h2.display, #contacto h2.display{
  margin:0!important;max-width:18ch;
  font-family:var(--ff-display)!important;font-weight:500!important;
  font-size:var(--t-d2)!important;line-height:1!important;letter-spacing:-.025em!important;
  color:var(--paper)!important;text-shadow:none!important;
}
.proofs-title em, .path-title em, .numbers-title em,
#demo h2.display em, #agentes h2.display em, #imobiliario h2.display em, #contacto h2.display em{
  font-style:normal;color:var(--paper-dim)!important;
}
.proofs-lede, .previa-frase, .path-lede, .numbers-lede,
#demo .bancada-cabeca .lede, #agentes .ag-cabeca .lede, #imobiliario .st-head .lede, #contacto .close-cta .lede{
  margin:24px 0 0!important;max-width:58ch!important;
  font:400 18px/1.6 var(--ff-ui)!important;color:var(--paper)!important;text-align:left;
}
@media (max-width:820px){
  .proofs-lede, .previa-frase, .path-lede, .numbers-lede,
  #demo .bancada-cabeca .lede, #agentes .ag-cabeca .lede, #imobiliario .st-head .lede, #contacto .close-cta .lede{font-size:17px!important}
}

/* ---- 6. 02 · trabalho: um projeto por painel ---------------------------
   Desktop: a linha de texto a meio da altura (etiqueta, título, "Ver
   solução") à esquerda, o ecrã de telemóvel ao centro, disciplinas e
   tecnologia à direita. Percorrer os painéis lê-se como virar pranchas.
   Telemóvel: o ecrã primeiro, o texto por baixo. */
#trabalho .proofs-grid{display:block;margin:0;padding:0;list-style:none}
#trabalho .proof{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  grid-template-areas:"linha ecra meta";column-gap:clamp(32px,5vw,72px);align-items:center;
  padding-block:clamp(28px,6vh,60px);margin:0;
}
#trabalho .proof-line{
  grid-area:linha;display:flex;flex-direction:column;align-items:flex-start;gap:18px;
  margin:0;padding:0;border:0;
}
#trabalho .proof-line::before, #trabalho .proof-line::after{content:none}
#trabalho .proof-kind{margin:0;font:500 13px/1.2 var(--ff-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--paper-dim)}
#trabalho .proof-line h3{
  margin:0;max-width:16ch;font-family:var(--ff-display);font-weight:500;
  font-size:var(--t-titulo);line-height:1.15;letter-spacing:-.01em;color:var(--paper);
}
#trabalho .proof-line h3::before{content:none!important;display:none!important}
#trabalho .proof-open{margin-top:6px;min-height:52px;padding:0 24px;border-radius:999px;font:600 15px/1 var(--ff-ui);cursor:pointer}
#trabalho .proof-stage{
  grid-area:ecra;position:relative;display:block;padding:0;border:0;
  height:min(780px, calc(100svh - 140px));min-height:520px;aspect-ratio:380 / 780;width:auto;
  border-radius:24px;overflow:hidden;background:var(--ink);cursor:pointer;isolation:isolate;
  box-shadow:none;transition:transform .5s var(--curva);
}
#trabalho .proof-stage::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:24px;box-shadow:inset 0 0 0 1px rgba(238,241,247,.10)}
#trabalho .proof-stage:hover{transform:translateY(-4px)}
#trabalho .proof-pan{position:absolute;inset:0;overflow:hidden;border:0;border-radius:0;box-shadow:none;transform:none;aspect-ratio:auto;background:var(--ink)}
/* a captura desliza com o scroll: começa a andar quando o painel chega ao
   meio do ecrã e pára a 70% da página (nunca no rodapé do cliente) */
#trabalho .proof-pan img,
#trabalho .proof-stage:hover .proof-pan img{
  position:absolute;left:0;top:0;width:100%;height:auto;transition:none;
  transform:translate3d(0, calc(clamp(0, (var(--pan, 0) - .3) / .5, 1) * -.7 * (100% - var(--stage, 780px))), 0);
}
#trabalho .proof-meta{grid-area:meta;display:flex;flex-direction:column;gap:10px;max-width:420px}
#trabalho .proof-solutions{margin:0;min-height:0;font:400 15px/1.6 var(--ff-ui);color:var(--paper)}
#trabalho .proof-tech{margin:0;font:400 15px/1.6 var(--ff-ui);letter-spacing:0;color:var(--paper-dim)}
#trabalho .proof-tech b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
#trabalho .proof-badge, #trabalho .proof-arrow{display:none}
/* o "pó de giz" de proofs.css (lista simples: telemóvel e movimento
   reduzido) era um halo pastel com grão atrás de cada ecrã: sai, como o
   resto dos brilhos. */
#trabalho .proof::before{content:none!important}
@media (max-width:820px){
  #trabalho .proof{display:flex;flex-direction:column;align-items:stretch;gap:18px;padding-block:28px 40px}
  #trabalho .proof-line, #trabalho .proof-meta{display:contents}
  #trabalho .proof-stage{order:0;width:100%;height:auto;min-height:0;aspect-ratio:350 / 620;margin-bottom:6px}
  #trabalho .proof-kind{order:1}
  #trabalho .proof-line h3{order:2;max-width:none}
  #trabalho .proof-solutions{order:3}
  #trabalho .proof-tech{order:4}
  #trabalho .proof-open{order:5;align-self:flex-start}
  #trabalho .proof-stage:hover{transform:none}
}
/* o modal: a captura mostrada como telemóvel, nítida (ver trabalho.css antigo) */
.proof-modal-body > img{width:min(100%,430px);margin:clamp(16px,3vh,32px) auto;border-radius:22px;
  box-shadow:0 0 0 1px rgba(238,241,247,.12)}
@media (max-width:820px){
  .proof-modal-head{flex-wrap:wrap;align-items:flex-start;gap:10px 14px}
  .proof-modal-head h3{flex:1 1 0;min-width:0;line-height:1.2}
  .proof-modal-head p{order:3;flex:1 1 100%;line-height:1.5}
}

/* ---- 7. 03 · demonstração: a prévia da casa ----------------------------
   Um foco por momento: texto curto à esquerda, um só quadro em movimento à
   direita. Cantos retos e bordas que se fundem com o chão (render noturno). */
.previa{color:var(--paper);position:relative}
.previa-inner{display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:clamp(40px,4.5vw,72px);align-items:center}
.previa-texto{display:flex;flex-direction:column;align-items:flex-start}
.previa-texto .sec-tag{margin-bottom:24px}
.previa-frase{margin-top:24px!important}
.previa-factos{list-style:none;margin:40px 0 0;padding:0;display:grid;gap:0;width:100%}
.previa-factos li{display:grid;gap:4px;padding:14px 0;border-top:1px solid var(--rule)}
.previa-factos li:last-child{border-bottom:1px solid var(--rule)}
.previa-factos b{font:500 17px/1.3 var(--ff-display);color:var(--paper)}
.previa-factos span{font:400 15px/1.55 var(--ff-ui);color:var(--paper-dim)}
.previa-acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}
.previa-media{margin:0;display:grid;gap:14px}
.previa-ecra{position:relative;aspect-ratio:16 / 10;overflow:hidden;background:var(--void)}
.previa-poster, .previa-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  -webkit-mask-image:radial-gradient(130% 120% at 50% 42%, #000 62%, transparent 100%);
          mask-image:radial-gradient(130% 120% at 50% 42%, #000 62%, transparent 100%);
}
.previa-video{opacity:0;transition:opacity .6s ease}
.previa--video .previa-video{opacity:1}
.previa-pausa{
  position:absolute;left:16px;bottom:16px;z-index:2;display:inline-flex;align-items:center;gap:8px;
  min-height:36px;padding:0 14px 0 12px;border:0;border-radius:999px;background:var(--void);color:var(--paper);
  font:500 13px/1 var(--ff-mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
  transition:background-color .16s ease-out;
}
.previa-pausa[hidden]{display:none}
.previa-pausa:hover{background:var(--ink-2)}
.previa-pausa:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
.previa-pausa i{width:10px;height:10px;display:block;
  background:linear-gradient(90deg, currentColor 0 3px, transparent 3px 7px, currentColor 7px 10px)}
.previa-pausa.is-parado i{background:none;width:0;height:0;border-style:solid;border-width:5px 0 5px 9px;border-color:transparent transparent transparent currentColor}
.previa-legenda{font:400 15px/1.5 var(--ff-ui);color:var(--paper-dim);max-width:62ch}
@media (max-width:900px){
  .previa-inner{grid-template-columns:1fr;gap:0}
  .previa-texto{display:contents}
  .previa-texto .sec-tag{order:0}
  .previa-titulo{order:1}
  .previa-frase{order:2}
  .previa-media{order:3;margin-top:40px}
  .previa-factos{order:4}
  .previa-acoes{order:5;flex-direction:column;align-items:stretch}
  .previa-ecra{aspect-ratio:4 / 5}
}

/* ---- 8. 06 · como trabalho: a fila de estações (path.js, rowMode) -------
   Sem pin. No desktop herda a composição de `.path--run` (path.css /
   cena04.css); aqui só se desfaz o que era do pin e se dá à fila o que ela
   precisa no telemóvel. */
.path--fila .path-pin{min-height:0!important;display:block!important;padding:0!important}
.path--fila .path-track{
  display:flex;flex-wrap:nowrap;gap:0;align-items:flex-start;
  width:calc(var(--n,4) * 100%);
  transform:translate3d(calc(var(--i,0) * -100% / var(--n,4)),0,0);
  cursor:grab;touch-action:pan-y;
}
.path--fila.is-dragging .path-track{cursor:grabbing;user-select:none}
.path--fila .station{flex:0 0 calc(100% / var(--n,4));opacity:0;visibility:hidden;transition:none}
.path--fila .station.is-live{opacity:1;visibility:visible;animation:estacaoEntra .5s var(--curva)}
@keyframes estacaoEntra{from{opacity:0}to{opacity:1}}
.path--fila .path-stations button{cursor:pointer}
.path-setas{display:flex;align-items:center;gap:16px;margin-top:28px}
.path-seta{
  display:inline-grid;place-items:center;width:52px;height:52px;border-radius:999px;border:0;
  background:var(--ink-2);color:var(--paper);font:500 18px/1 var(--ff-ui);cursor:pointer;
  transition:background-color .16s ease-out;
}
.path-seta:hover{background:var(--ink-hover)}
.path-seta:active{background:var(--ink-press)}
.path-seta:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
.path-seta:disabled{opacity:.4;cursor:default}
.path-conta{font:500 13px/1 var(--ff-mono);letter-spacing:.06em;color:var(--paper-dim)}
.path-conta b{font-weight:500;color:var(--paper)}
#estudio{color:var(--paper)}
#estudio .path-bar{margin-bottom:clamp(20px,3vh,32px)}
/* o "fio condutor" (path.css) contava a viagem do pulso que vinha da casa,
   com cabeça a brilhar e uma marca âmbar/azul por estação. Sem a casa na
   página e sem pin não há viagem: o medidor fica uma régua simples, na
   tinta da página, sem brilho. */
.path--fila .path-bar::before,
.path--fila .path-bar::after,
.path--fila .path-meter i::after{content:none!important}
.path--fila .path-meter i{background:var(--paper)!important;box-shadow:none!important}
/* os campos decorativos de cada acto (`.act-field`, cena04.css) foram
   compostos para a estação ocupar o ecrã inteiro, com o pin. Numa fila de
   ~400 px atravessavam a coluna do texto e saíam do painel (rótulos soltos,
   blocos cinzentos por trás das frases). Fica o painel de cada estação, que é
   onde está a demonstração; o texto fica numa só tinta. */
#estudio .act-field{display:none!important}
#estudio .act-proof{color:var(--paper)!important}
#estudio .path-stations .n,
#estudio .station-index{color:var(--paper-dim)!important}
#estudio .path-stations button[aria-current="true"] .n{color:var(--volt)!important}
@media (max-width:899px){
  .path--fila .station{padding-right:0}
}

/* ---- 9. Entradas (scroll/cinema.js) -------------------------------------
   Os estados escondidos existem APENAS debaixo das classes que o JS põe. */
.en-armada .en-peca{opacity:0;transform:translate3d(0,24px,0)}
.en-armada.en-in .en-peca{
  opacity:1;transform:none;
  transition:opacity .7s var(--curva) calc(var(--en-i,0) * 80ms),transform .7s var(--curva) calc(var(--en-i,0) * 80ms);
}
.ac-armado{filter:brightness(.45)}
.ac-armado.ac-aceso{filter:none;transition:filter .9s var(--curva)}
@media (max-width:820px){
  .en-armada .en-peca{transform:translate3d(0,16px,0)}
}
@media (prefers-reduced-motion:reduce){
  .en-armada .en-peca{opacity:1!important;transform:none!important}
  .ac-armado{filter:none!important}
  #trabalho .proof-stage{transition:none}
  #trabalho .proof-stage:hover{transform:none}
  #trabalho .proof-pan img{transform:none!important}
  .path--fila .station.is-live{animation:none}
}