/* ============================================================================
   RONALDO CÔRTES · style.css
   Só o que é específico deste cliente. As receitas vivem em kits.css (verbatim).
   Os números de movimento são os do BLUEPRINT §1 (RECEITAS §E): a IA lê, não escolhe.
   ============================================================================ */

/* ---- 1. TOKENS ----------------------------------------------------------- */
:root{
  /* papel preto: o padrão do site (base escura, evidência no BLUEPRINT §0) */
  --bg:#08080A;
  --fg:#ECEEF2;

  /* os outros 4 papéis + o acento derivam de --bg/--fg: trocam sozinhos no corte */
  --superficie: color-mix(in oklab, var(--fg) 6%,  var(--bg));
  --mudo:       color-mix(in oklab, var(--fg) 58%, var(--bg));
  --linha:      color-mix(in oklab, var(--fg) 14%, var(--bg));
  --inverso:    var(--fg);
  --acento:     var(--fg);

  /* escala de 4px */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e6:24px; --e8:32px;
  --e12:48px; --e16:64px; --e24:96px; --e32:128px;
  --pad-sec: clamp(64px, 10vw, 140px);
  --larg: min(1240px, 88vw);

  /* DUAS famílias (PADRAO §4): Archivo faz display E texto (variável 200 a 900,
     aguenta o corpo sem brigar consigo mesma) + JetBrains Mono nos rótulos */
  --display:'Archivo', system-ui, sans-serif;
  --texto:'Archivo', system-ui, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, monospace;
}

/* o papel de cada seção: o corte é DURO, como manda a gramática rhythmic-cutlist */
.ato--preto{ --bg:#08080A; --fg:#ECEEF2; }
.ato--branco{ --bg:#F4F4F2; --fg:#0C0C0E; }
.ato{
  background: var(--bg);
  color: var(--fg);
  position: relative;
}

/* o fundo da PÁGINA segue o :root, que é o que P06 (AM.amanhecer) interpola;
   as seções com classe de papel pintam o seu próprio por cima, em corte duro */
html, body{ background: var(--bg); }
body{
  font-family: var(--texto);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: .006em;              /* light-on-dark: tracking abre */
  background: var(--bg);
  color: var(--fg);
}
::selection{ background: var(--fg); color: var(--bg); }

/* ---- 2. TIPOGRAFIA ------------------------------------------------------- */
.display{
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.04;
  letter-spacing: -.035em;
  margin: 0;
  text-wrap: balance;
}
/* a "uma palavra em outro peso" (no lugar de D3: o dono recusou serifa display) */
.display .leve, .leve, em.leve{ font-weight: 200; font-style: normal; }

.display--xl{ font-size: clamp(40px, 6.6vw, 104px); letter-spacing: -.045em; }
.ln{ display:block; }
.display--l { font-size: clamp(32px, 5.4vw, 86px);  letter-spacing: -.04em; }
.display--m { font-size: clamp(28px, 4.2vw, 64px);  letter-spacing: -.035em; }
.display--s { font-size: clamp(17px, 1.7vw, 26px);  letter-spacing: -.02em; font-weight:400; text-transform:none; }
.display--xs{ font-size: clamp(17px, 1.5vw, 23px);  letter-spacing: -.02em; font-weight:700; text-transform:none; line-height:1.2; }
.display--num{ font-size: clamp(40px, 4vw, 62px); letter-spacing:-.04em; display:block; color: var(--mudo); }

.mono{
  font-family: var(--mono);
  font-weight: 500;
  font-size: clamp(10px, .78vw, 12px);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.mono i{ font-style: normal; opacity:.4; padding: 0 .35em; }

.eyebrow{ color: var(--mudo); margin: 0 0 var(--e6); }
.corpo{ max-width: 58ch; font-size: clamp(15px, 1.15vw, 18px); color: var(--mudo); margin: var(--e6) 0 0; }
.corpo--grande{ max-width: 52ch; font-size: clamp(17px, 1.45vw, 22px); line-height:1.5; color: var(--fg); }

/* ---- 3. BOTÕES E CTA ----------------------------------------------------- */
.botao{
  display:inline-flex; align-items:center; gap: var(--e3);
  font-family: var(--mono); font-weight:500; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  padding: 16px 26px; border-radius: 10px;
  background: var(--fg); color: var(--bg);
  border: 1px solid var(--fg);
  transition: background var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
  will-change: auto;
}
.botao:hover{ background: transparent; color: var(--fg); transform: translateY(-2px); }
.botao--nav{ padding: 11px 18px; font-size:11px; }

/* ---- 4. NAV -------------------------------------------------------------- */
/* A NAV CARREGA O PRÓPRIO PAPEL. Ela é filha do body, fora de qualquer seção,
   então herdaria o :root — e o :root é justamente o que P06 (AM.amanhecer)
   deixa CLARO depois do pico. Sem esta declaração, a barra ficava escura sobre
   papel escuro do bloco 09 até o fim da página. */
.nav{
  --bg:#08080A; --fg:#ECEEF2; --linha:#23242A;
  color: var(--fg);
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display:flex; align-items:center; justify-content:space-between; gap: var(--e4);
  padding: var(--e4) clamp(16px, 4vw, 44px);
  mix-blend-mode: normal;
  opacity: 0; pointer-events:none;
  /* A BARRA TEM PLACA PRÓPRIA. Sem ela o conteúdo passava por baixo colado e o
     logo caía dentro do parágrafo (auditoria de 21/09). O véu usa o --bg da
     própria nav, então ele inverte junto com .sobre-branco, sem regra extra. */
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linha);
}
.nav.ligada{ opacity:1; pointer-events:auto; transition: opacity var(--dur-reveal) var(--ease-out); }
.nav__marca{ display:block; line-height:0; }
.nav__marca img{ width: 104px; height:auto; }
.nav__cap{ color: var(--mudo); display:none; transition: opacity .2s linear; }
.nav__cap b{ font-weight:500; color: var(--fg); }
.nav__dir{ display:flex; align-items:center; gap: var(--e3); }
.nav__idioma{
  display:flex; align-items:center; gap: var(--e2);
  background: transparent; color: var(--fg);
  border:1px solid var(--linha); border-radius: 999px;
  padding: 10px 14px; cursor:pointer;
  font-family: var(--mono); font-weight:500; font-size:11px; letter-spacing:.14em;
  transition: border-color var(--dur-micro) var(--ease-out);
}
.nav__idioma:hover{ border-color: var(--fg); }
@media (min-width: 900px){ .nav__cap{ display:block; } }

/* a nav vive sobre mídia: ela inverte com o papel da seção que está atrás,
   medido a cada tique em main.js (nunca guardado por gatilho) */
.nav.sobre-branco{ --bg:#F4F4F2; --fg:#0C0C0E; --linha:#D5D5D1; }
.nav.sobre-branco .nav__marca img{ filter: invert(1); }

/* ---- 5. BLOCO 00 · A ABERTURA (B1 adaptada) ------------------------------ */
.abertura{
  position: fixed; inset:0; z-index: 9999;
  background:#08080A; color:#ECEEF2;
  display:grid; place-items:center;
  clip-path: inset(0 0 0 0 round 0);
}
.abertura__logo{ position:relative; width: min(420px, 62vw); overflow:hidden; line-height:0; }
.abertura__logo img{ width:100%; height:auto; }
.abertura__cobre{
  position:absolute; inset:0; background:#08080A;
  transform: scaleX(1); transform-origin: right center;
}
.abertura__local{ position:absolute; left: clamp(16px,4vw,44px); bottom: var(--e6); color:#8A8D96; }
.abertura__hora { position:absolute; right: clamp(16px,4vw,44px); bottom: var(--e6); color:#8A8D96; }

/* ---- 6. PAINEL DE IDIOMAS ------------------------------------------------ */
.painel{
  position: fixed; inset:0; z-index: 9000;
  background:#08080A; color:#ECEEF2;
  display:grid; place-items:center;
  opacity:0; transform: scale(1.02);
}
.painel[hidden]{ display:none; }
.painel__fechar{
  position:absolute; top: var(--e4); right: clamp(16px,4vw,44px);
  background:none; border:none; color:#8A8D96; cursor:pointer;
  font-family: var(--mono); font-size:11px; letter-spacing:.18em;
}
.painel__fechar:hover{ color:#ECEEF2; }
.painel__corpo{ width: var(--larg); }
.painel__rotulo{ color:#8A8D96; margin: 0 0 var(--e4); }
.painel__titulo{
  font-family: var(--display); font-weight:900; text-transform:uppercase;
  font-size: clamp(28px,4vw,56px); letter-spacing:-.04em; line-height:1.05;
  margin: 0 0 var(--e12);
}
.painel__lista{ list-style:none; margin:0; padding:0; border-top:1px solid #23242A; }
.painel__lista li{ border-bottom:1px solid #23242A; }
.painel__lista button{
  width:100%; display:flex; align-items:baseline; gap: var(--e6);
  background:none; border:none; cursor:pointer; text-align:left;
  color:#ECEEF2; font-family: var(--display); font-weight:400;
  font-size: clamp(20px,2.4vw,32px); letter-spacing:-.02em;
  padding: var(--e4) 0;
  transition: color var(--dur-micro) var(--ease-out), padding-left var(--dur-micro) var(--ease-out);
}
.painel__lista button:hover{ color:#fff; padding-left: var(--e3); }
.painel__lista button.ativo{ color:#fff; }
.painel__lista button.ativo::after{ content:''; width:6px; height:6px; border-radius:999px; background:#fff; margin-left:auto; align-self:center; }
.painel__lista .mono{ color:#8A8D96; min-width: 3.2em; }

/* ---- 7. PALCOS E CENAS (P12 · .am-palco / .am-sobre do kit) --------------- */
.trilho{ height: var(--trilho-cena); }
.palco{ background:#08080A; }
.palco__canvas{ position:absolute; inset:0; width:100%; height:100%; }
.palco__capa{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition: opacity .35s linear;
}
.palco__capa.apagada{ opacity:0; }
/* O ALTO DO FRAME É INTOCÁVEL. O "cover" do kit corta o excesso pela metade em
   cima e em baixo, e em janela baixa isso comia a cabeça dele (cena 2) e o topo
   do quadro de luz (cena 3). Aqui o palco ancora o topo do 16:9 e deixa sobrar
   só o rodapé, que o overflow do palco esconde. Em janela alta nada muda: o
   min-height devolve o comportamento de antes. */
.am-palco .palco__canvas,
.am-palco .palco__capa{
  top:0; bottom:auto;
  aspect-ratio: 16 / 9; height:auto; min-height:100%;
}

/* a lei do contraste: véus medidos, um por display sobre mídia */
.veu{ position:absolute; inset:0; pointer-events:none; }
.veu--esq  { background: linear-gradient(100deg, rgba(8,8,10,.88) 0%, rgba(8,8,10,.55) 38%, rgba(8,8,10,0) 64%); }
.veu--dir  { background: linear-gradient(260deg, rgba(8,8,10,.88) 0%, rgba(8,8,10,.50) 40%, rgba(8,8,10,0) 66%); }
.veu--baixo{ background: linear-gradient(0deg,  rgba(8,8,10,.94) 0%, rgba(8,8,10,.72) 34%, rgba(8,8,10,0) 62%); }

/* D1 · o motivo recorrente: a régua de luz de 1px */
/* a régua mora na altura dos olhos dele: a luz encosta no rosto, não corta o título */
.regua{ position:absolute; left:0; right:0; top:32%; height:1px; pointer-events:none; overflow:hidden; }
.regua i{
  display:block; height:1px; width:100%;
  background: linear-gradient(90deg, transparent 0%, color-mix(in oklab, var(--fg) 55%, transparent) 22%, color-mix(in oklab, var(--fg) 90%, transparent) 50%, color-mix(in oklab, var(--fg) 55%, transparent) 78%, transparent 100%);
  transform: scaleX(0); transform-origin: left center;
}
.regua--inline{ position:relative; top:auto; margin: var(--e12) 0 0; }

/* hero e blocos de texto sobre mídia */
.hero{
  position:absolute; left: clamp(16px,4vw,64px); bottom: clamp(56px, 10vh, 120px);
  width: min(620px, 50vw); z-index:3;
}
.hero--dir{ left:auto; right: clamp(16px,4vw,64px); text-align:left; }
.hero--baixo{ bottom: clamp(56px, 16vh, 180px); }
.hero__nome{ margin: 0; }
.hero__slogan{ color: color-mix(in oklab, var(--fg) 76%, var(--bg)); margin: var(--e4) 0 0; }
.hero__sub{ max-width: 42ch; color: var(--fg); margin: var(--e6) 0 var(--e8); font-size: clamp(15px,1.15vw,18px); }
.rolar{ position:absolute; right: clamp(16px,4vw,44px); bottom: var(--e6); color: var(--mudo); z-index:3; }

/* ---- 8. BLOCOS DE TEXTO -------------------------------------------------- */
.bloco{ padding: var(--pad-sec) 0; overflow:clip; }
.largura{ width: var(--larg); margin-inline:auto; position:relative; z-index:2; }

/* P16 · o retrato atravessa o corte: o mesmo frame da cena 1, em negativo, no papel branco */
.negativo{
  position:absolute; right:-6%; top:50%; transform: translateY(-50%) scale(1.06);
  width: min(62%, 900px); height:auto;
  filter: invert(1) grayscale(1) contrast(1.05);   /* pintado UMA vez, nunca animado */
  opacity: 0; pointer-events:none; z-index:0;
}
.bloco--manifesto .largura{ max-width: min(980px, 64vw); }
.bloco--manifesto h2{ font-size: clamp(30px, 4.4vw, 66px); }
.bloco--manifesto .corpo{ margin-top: var(--e12); }
.tarjado{ position:relative; }
.tarjado .am-linha{ position:relative; }
.tarjado .tarja{
  position:absolute; inset:0; background: var(--fg);
  transform: scaleX(1); transform-origin: right center; z-index:2;
}

/* ---- 9. C8 · TRILHO HORIZONTAL ------------------------------------------ */
.htrilho{ height: 300vh; }
.htrilho__cabeca{
  position:absolute; left: clamp(16px,4vw,64px); top: clamp(56px,11vh,120px);
  width: min(460px, 44vw); z-index:3; pointer-events:none;
}
.faixa{ align-items:center; padding-inline: clamp(16px,4vw,64px) 6vw; }
.ficha{
  width: clamp(240px, 26vw, 360px);
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-top: 1px solid color-mix(in oklab, var(--fg) 26%, transparent);   /* luz de borda */
  border-radius: 14px;
  padding: var(--e8) var(--e6) var(--e12);
  box-shadow: 18px 22px 0 -8px color-mix(in oklab, var(--fg) 5%, transparent);  /* sombra deslocada */
}
.ficha--alta{ align-self: flex-start; margin-top: clamp(0px, 10vh, 120px); }
.ficha .mono{ color: var(--mudo); display:block; margin-bottom: var(--e8); }
.ficha h3{ margin: 0 0 var(--e3); }
.ficha p{ margin:0; color: var(--mudo); font-size: clamp(14px,1vw,16px); }
/* A FRASE E AS FICHAS NÃO DIVIDEM A MESMA FAIXA. Com a cabeça em absoluto sobre
   o palco, cada ficha passava POR TRÁS do título no meio do percurso horizontal
   (auditoria do dono, 21/09). O palco vira uma coluna: o título ocupa a banda de
   cima, as fichas correm na banda que sobra, e a sobreposição deixa de ser
   possível em qualquer altura de tela. A primeira ficha passa a nascer na mesma
   margem do título, no lugar do vão de 26vw que existia só para desviar dele. */
@media (min-width: 821px){
  .htrilho .am-htrilho__palco{ display:flex; flex-direction:column; align-items:stretch; }
  .htrilho .htrilho__cabeca{
    position:relative; left:auto; top:auto;
    padding: clamp(48px,9vh,110px) 0 var(--e8) clamp(16px,4vw,64px);
  }
  .htrilho .faixa{ flex:1; min-height:0; }
  .htrilho .ficha--alta{ margin-top: clamp(0px, 6vh, 72px); }
}

/* ---- 10. P10 · DADOS SOBRE A CENA --------------------------------------- */
.dados .am-dado{ background: color-mix(in oklab, var(--bg) 82%, transparent); backdrop-filter: blur(8px); transform: translateY(12px); }
.dados svg path{ stroke: color-mix(in oklab, var(--fg) 62%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* ---- 11. BLOCO 06 · O PICO (C19 coreografia de peças) -------------------- */
/* o pico é a ÚNICA seção sem classe de papel: ele segue o :root, e é por isso
   que P06 (AM.amanhecer) pode acender a página inteira a partir daqui */
.pico{ background: transparent; color: var(--fg); }
.pico__palco{
  position: sticky; top:0; height:100dvh; overflow:clip;
  display:grid; place-items:center;
  background: transparent; color: var(--fg);
}
/* durante a ponte P09 o palco do pico é transparente (a cena 3 aparece por trás
   e o retângulo de luz cresce); quando a prancha chega, o preto fecha atrás dela */
.pico__fundo{ position:absolute; inset:0; background: var(--bg); opacity:0; z-index:0; }
.pico__cabeca{
  position:absolute; left: clamp(16px,4vw,64px); top: clamp(48px,10vh,110px);
  width: min(420px, 42vw); z-index:4;
}
/* O TÍTULO DIVIDE A COLUNA ESQUERDA COM O RELÓGIO. Numa janela baixa as linhas
   do título desciam até o número e o 02:25 ficava ilegível por cima da palavra
   (auditoria do dono, 21/09). O corpo passa a ler também a ALTURA da janela:
   em tela baixa ele encolhe antes de encostar no relógio. */
.pico__cabeca h2{ font-size: clamp(24px, min(4.2vw, 6.2vh), 64px); }
/* a prancha e as suas peças têm cor FIXA: elas são objetos na cena, não interface.
   Assim o amanhecer muda a página em volta sem inverter a folha no meio do caminho. */
.prancha{
  position:relative;
  width: clamp(210px, 26vw, 380px); aspect-ratio: 3/4;
  background:#F4F4F2;
  box-shadow: 16px 20px 0 -4px rgba(236,238,242,.05);
  transform: scale(.18); opacity:0;
  transform-origin: center center;
  will-change: transform;
}
.prancha__margem{ position:absolute; inset:0; width:100%; height:100%; }
.prancha__margem path{ stroke: rgba(8,8,10,.42); stroke-width:2; fill:none; }
.prancha__acesa{
  position:absolute; inset:-16%; pointer-events:none; opacity:0;
  background: radial-gradient(58% 58% at 50% 50%, rgba(244,244,242,.55) 0%, rgba(244,244,242,0) 72%);
}
.peca{ background:#08080A; }
.peca--faixa { left:9%;  top:10%; width:60%; height:6%;  }
.peca--imagem{ left:9%;  top:22%; width:82%; height:34%; background-image:url('assets/frames/cena-2/f0060.jpg'); background-size:cover; background-position: 62% 40%; }
.peca--texto { left:9%;  top:62%; width:82%; height:16%; background:transparent; display:flex; flex-direction:column; gap:14%; }
.peca--texto i{ display:block; height:12%; background:#08080A; opacity:.55; }
.peca--texto i:nth-child(2){ width:88%; }
.peca--texto i:nth-child(3){ width:94%; }
.peca--texto i:nth-child(4){ width:52%; }
.peca--placa {
  left:9%; top:84%; width:82%; height:8%;
  background:#08080A; color:#F4F4F2;
  display:grid; place-items:center; border-radius:4px;
}
.peca--placa .mono{ font-size: clamp(7px, .62vw, 10px); letter-spacing:.1em; }

/* as cinco legendas COMEÇAM na margem direita da folha: sem isto havia um vão
   morto de 200 px entre a prancha e o relógio, e a faixa 00:00 a 04:00 lia como
   uma segunda peça encostada na borda. Agora a folha e as horas são um objeto só. */
.horas{
  position:absolute; top:50%; transform: translateY(-50%);
  left: calc(50% + clamp(210px, 26vw, 380px) / 2 + var(--e8));
  right: clamp(16px,4vw,64px); width:auto;
  list-style:none; margin:0; padding:0; z-index:4;
}
.horas li{
  display:flex; gap: var(--e4); align-items:baseline;
  padding: var(--e3) 0; border-bottom:1px solid var(--linha);
  color: var(--mudo); font-size: clamp(13px,1vw,16px);
  opacity:.28;
}
.horas li.acesa{ opacity:1; color: var(--fg); }
.horas li b{ color: var(--fg); }
.horas--fim{ border-bottom:none; }

.pico__relogio{
  position:absolute; left: clamp(16px,4vw,64px); bottom: clamp(40px,8vh,80px);
  z-index:4; width: min(420px, 44vw);
}
#relogio{
  display:block; font-size: clamp(30px, min(4vw, 5.4vh), 58px); letter-spacing:-.02em;
  font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--fg);
}
.nota{ color: var(--mudo); letter-spacing:.06em; text-transform:none; font-size:11px; line-height:1.6; max-width:44ch; margin: var(--e3) 0 var(--e6); }

/* ---- 12. P11 · A FOTO PINADA CEDE ESPAÇO -------------------------------- */
.ceder{ background: var(--bg); color: var(--fg); }
.ceder .am-ceder__palco{ background: var(--bg); }
/* a chapa do capítulo pessoal é o retrato VERTICAL original dele (2:3), não o
   quadro alargado: é a foto como ele a tirou, e sobra ar para o texto entrar */
.ceder .am-ceder__foto{ width: min(34vw, 400px); height: auto; aspect-ratio: 2/3; object-fit: cover; }
.foto{ border-radius: 14px; box-shadow: 20px 24px 0 -8px color-mix(in oklab, var(--fg) 7%, transparent); }
/* o título deste capítulo deixou de ser uma palavra só ("EU") e virou uma frase
   de três ("QUEM SOU EU"): o corpo baixa para as três linhas caberem na coluna
   sem empurrar o parágrafo para fora do palco */
.ceder__texto h2{ font-size: clamp(38px, 5.4vw, 88px); line-height:.9; margin: 0 0 var(--e8); }
/* o ar deste capítulo ficava todo no rodapé da seção (220 px de papel morto) e
   quase nenhum ENTRE os elementos. A chapa cresce até a mesma faixa vertical do
   texto, e o texto distribui o ar pela escala de 4px, mais acima do heading do
   que abaixo (PADRAO §5). As duas peças passam a abrir e fechar na mesma altura. */
@media (min-width: 821px){
  .ceder .am-ceder__texto{ right: 6vw; width: min(42vw, 560px); }
  .ceder .am-ceder__foto{ width:auto; height: min(78vh, 720px); }
  .ceder__texto .eyebrow{ margin-bottom: var(--e24); }
  .ceder__texto h2{ margin-bottom: var(--e16); }
}

/* ---- 13. BLOCO 08 · A GARANTIA ----------------------------------------- */
.bloco--garantia{ padding-bottom: clamp(120px, 20vh, 220px); overflow: visible; }
.colunas{ display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 56px); margin-top: var(--e16); }
.coluna h3{ margin: var(--e4) 0 var(--e3); }
.coluna p{ margin:0; color: var(--mudo); font-size: clamp(14px,1vw,16px); max-width: 46ch; }
.paraquem{ margin: var(--e16) 0 0; color: var(--mudo); font-size: clamp(14px,1.05vw,17px); }
/* P16 · o protagonista atravessa o corte: a chapa sangra para dentro do palco preto */
.chapa{
  position:absolute; right: clamp(16px,4vw,64px); bottom: -14vh;
  width: min(340px, 30vw); height:auto; border-radius: 14px;
  z-index:3; will-change: transform;
  box-shadow: 18px 22px 0 -8px color-mix(in oklab, var(--fg) 8%, transparent);
}

/* ---- 14. BLOCO 09 · A CHEGADA ------------------------------------------ */
.chegada__wordmark{
  font-family: var(--display); font-weight:900; letter-spacing:-.05em;
  font-size: clamp(54px, 12vw, 210px);
  color: color-mix(in oklab, var(--fg) 10%, transparent);
  bottom: 30%;
  text-align:center; left:0; right:0;
}
.chegada{
  position:absolute; left:0; right:0; bottom: clamp(40px, 8vh, 96px);
  z-index:4; text-align:center;
  padding-inline: clamp(16px,4vw,44px);
}
.chegada h2{ margin: 0 auto var(--e8); max-width: 20ch; }
.chegada__num{
  display:inline-block; font-family: var(--display); font-weight:700;
  font-size: clamp(26px, 4.4vw, 64px); letter-spacing:-.03em;
  color: var(--fg); text-decoration:none;
  border-bottom: 2px solid color-mix(in oklab, var(--fg) 30%, transparent);
  padding-bottom: 4px;
  transition: border-color var(--dur-micro) var(--ease-out);
}
.chegada__num:hover{ border-color: var(--fg); }
.chegada__horario{ color: var(--mudo); margin: var(--e6) 0 0; }

/* ---- 15. RODAPÉ --------------------------------------------------------- */
.rodape{ padding: var(--pad-sec) 0 var(--e16); background: var(--bg); }
/* O FECHO. Antes a mesma frase aparecia SETE vezes empilhada, uma por idioma:
   sete linhas quase iguais, e nada acontecendo entre elas. Agora é uma frase só,
   no mesmo lugar, e o mundo passa por dentro dela: a linha troca de idioma e o
   código muda junto, como o contador de uma película. Sete idiomas, uma frase. */
.assinatura{
  --fecho: clamp(16px, 3.8vw, 54px);
  width: var(--larg); margin-inline:auto;
}
.assinatura__codigo{ display:block; color: var(--mudo); margin: 0 0 var(--e4); }
.assinatura__janela{ display:block; overflow:hidden; height: calc(var(--fecho) * 1.24); }
.assinatura__rolo{ display:block; will-change: transform; }
.assinatura__rolo b{
  display:block; white-space:nowrap;
  font-family: var(--display); font-weight:200; text-transform:uppercase;
  font-size: var(--fecho); line-height:1.24; letter-spacing:-.03em;
  color: var(--fg);
}
.rodape__base{
  width: var(--larg); margin: var(--e16) auto 0;
  display:flex; align-items:center; justify-content:space-between; gap: var(--e6); flex-wrap:wrap;
}
.rodape__mono{ width: 200px; height:auto; opacity:.7; }
.rodape__base p{ margin:0; color: var(--mudo); }
.rodape__wa{ color: var(--fg); text-decoration:none; border-bottom:1px solid var(--linha); padding-bottom:3px; }
.rodape__wa:hover{ border-color: var(--fg); }

/* ---- 16. CTA FIXO NO CELULAR ------------------------------------------- */
.wa-movel{
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 55;
  display:none; justify-content:center; align-items:center;
  padding: 15px; border-radius: 12px;
  background:#ECEEF2; color:#08080A; text-decoration:none;
  font-family: var(--mono); font-weight:500; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  opacity:0; pointer-events:none;
}
.wa-movel.ligada{ opacity:1; pointer-events:auto; transition: opacity var(--dur-reveal) var(--ease-out); }

/* ---- 16b. AS SOBREPOSIÇÕES QUE FAZEM AS PONTES EXISTIREM ---------------
   P12 (layered pinned reveal) e P09 (a tela vira o viewport) só são pontes de
   verdade se as duas seções ocuparem a MESMA faixa do documento por um tempo:
   o palco de baixo continua pinado e rodando enquanto o de cima sobe por cima.
   Sem isto, o "P12" seria só duas seções vizinhas, que é o erro de 16 a 18/09.
   A altura extra compensa exatamente a margem negativa: o trilho útil não muda. */
@media (min-width: 821px){
  .htrilho{ height: 370vh; }                         /* 300vh de trilho + 70vh de sobreposição */
  #cena3{ height: 380vh; margin-top: -70vh; position: relative; z-index: 2; }   /* P12: sobe por cima do trilho */
  #pico { height: 400vh; margin-top: -100vh; }       /* P09: a prancha cresce por cima da cena 3 */
  #cena4{ height: 334vh; }
  .rodape{ margin-top: -34vh; position: relative; z-index: 3; }                 /* P12: a placa sobe por cima do palco final */
}

/* ---- 17. MOBILE (BLUEPRINT §5) ----------------------------------------- */
@media (max-width: 900px){
  .colunas{ grid-template-columns: 1fr; gap: var(--e12); }
  .chapa{ position:relative; right:auto; bottom:auto; width: min(380px, 70vw); margin: var(--e16) auto 0; display:block; }
}
@media (max-width: 820px){
  .trilho{ height: 200vh; }
  .htrilho{ height:auto; }
  .hero{ width: auto; right: clamp(16px,4vw,64px); bottom: clamp(88px, 14vh, 160px); }
  .hero--dir{ left: clamp(16px,4vw,64px); }
  .veu--esq{ background: linear-gradient(170deg, rgba(8,8,10,.55) 0%, rgba(8,8,10,.72) 46%, rgba(8,8,10,.94) 100%); }
  .veu--dir{ background: linear-gradient(170deg, rgba(8,8,10,.55) 0%, rgba(8,8,10,.72) 46%, rgba(8,8,10,.94) 100%); }
  /* no celular a régua sai do HERO (o rosto ocupa a tela inteira e ela viraria
     um risco sobre o olho), mas CONTINUA nos capítulos: é o motivo recorrente
     D1, e tirá-lo do celular deixaria a costura só no desktop. Nenhuma linha de
     copy cita a régua, então não há texto a corrigir aqui. */
  .palco .regua{ display:none; }
  /* o kit deixa o palco em flex no celular: sem isto o título e o trilho ficam
     LADO A LADO em vez de empilhados, e a primeira ficha nasce cortada */
  .am-htrilho__palco{ display:block; }
  .htrilho__cabeca{ position:relative; left:auto; top:auto; width:auto; padding: var(--pad-sec) clamp(16px,6vw,32px) var(--e12); }
  .faixa{ padding-inline: clamp(16px,6vw,32px); gap: var(--e4); }
  .ficha{ width: 78vw; }
  .ficha--alta{ margin-top:0; }
  .largura{ width: min(1240px, 88vw); }
  /* o pico no celular: tudo numa coluna que CABE em 100dvh, sem corte */
  #cena3{ height: 246vh; }
  #pico { height: 220vh; margin-top: -46vh; position:relative; z-index:2; }
  .pico__palco{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap: clamp(12px, 2.4vh, 22px); padding: 76px 16px 108px;
  }
  .pico__cabeca{ position:static; width:100%; }
  .pico__cabeca h2{ font-size: clamp(21px, 6.4vw, 30px); }
  .prancha{ width: min(148px, 36vw); }
  .horas{ position:static; transform:none; width:100%; left:auto; right:auto; }
  .horas li{ padding: 5px 0; font-size:13px; }
  .pico__relogio{ position:static; width:100%; }
  #relogio{ font-size: 32px; }
  .nota{ font-size:10px; margin-bottom:0; }
  .pico__relogio .botao{ display:none; }        /* o CTA do celular é o fixo de baixo */
  .ceder__texto h2{ font-size: clamp(34px, 13vw, 64px); }
  .chegada{ bottom: clamp(88px, 14vh, 150px); }
  .wa-movel{ display:flex; }
  /* no celular o CTA é o fixo de baixo: um CTA primário por tela visível */
  .nav__dir .botao--nav{ display:none; }
  .hero .botao{ display:none; }
  .hero__sub{ max-width: 32ch; }
  .hero{ max-width: calc(100vw - 32px); }
  .rodape{ padding-bottom: 96px; }
}

/* ---- 18. REDUZIR MOVIMENTO --------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .abertura{ display:none; }
  .nav, .wa-movel{ opacity:1 !important; pointer-events:auto !important; }
  .regua i{ transform: scaleX(1) !important; }
  .negativo{ opacity:.08 !important; transform: translateY(-50%) scale(1) !important; }
  .prancha{ transform: scale(1) !important; opacity:1 !important; }
  .prancha__acesa{ opacity:1 !important; }
  .horas li{ opacity:1 !important; color: var(--fg); }
  .assinatura__rolo{ transform:none !important; }   /* o fecho para na primeira linha */
  /* armadilha registrada: AM.cederEspaco devolve null aqui e .am-ceder__texto nasce com opacity:0 */
  .am-ceder__texto, .ceder__texto{ opacity:1 !important; }
  .tarjado .tarja{ display:none; }
  .palco__capa{ opacity:1 !important; }
}