/* AMOSTRA ZERO — portado da prévia aprovada (referencia/previa/index.html).
   Layout: pilha de telas 16:9 medidas na base 1366×768 do Canva; tudo em unidades --u.
   Não redesenhar: só as trocas listadas no briefing.md secao 2. */

@font-face {
  font-family: "Alte Haas Grotesk";
  src: url("../assets/fonts/alte-haas-grotesk-regular.woff2") format("woff2"),
       url("../assets/fonts/alte-haas-grotesk-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Alte Haas Grotesk";
  src: url("../assets/fonts/alte-haas-grotesk-bold.woff2") format("woff2"),
       url("../assets/fonts/alte-haas-grotesk-bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root{
  --papel:#ffffff; --tinta:#111111; --cinza:#6b6b6b; --linha:#d9d6d0;
  --sans:"Alte Haas Grotesk","Arimo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"Courier New",monospace;
  --U:calc(100vw/1366);--u:calc(100vw/1366*.86);
  color-scheme:light;
}
html{background:var(--papel)}
body{background:var(--papel);color:var(--tinta);font-family:var(--sans);overflow-x:hidden;margin:0}
.tela,.bloco{box-sizing:border-box}
.tela{position:relative;width:100%;height:calc(768*var(--U));overflow:hidden}
.palco{position:absolute;left:50%;top:50%;width:calc(1366*var(--u));height:calc(768*var(--u));transform:translate(-50%,-50%)}
.cheia{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.recorte{overflow:hidden}
.a{position:absolute;margin:0}
img.a{display:block}
.txt{font-size:calc(16.4*var(--u));line-height:1.34;margin:0}
.quad{text-align:justify;text-align-last:left;hyphens:manual;-webkit-hyphens:manual;text-wrap:pretty;word-spacing:-.02em}
b{font-weight:700}
.copy{font-weight:700;font-size:calc(16*var(--u))}
.ghost{z-index:0;pointer-events:none;user-select:none;line-height:1.34;margin:0;opacity:.5}
.ghost.mono{font-family:var(--mono);font-weight:400}
.ghost.it{font-style:italic}
.ghost.sans{font-family:var(--sans)}
.ghost.big{font-family:var(--sans);font-weight:600;font-size:calc(74.7*var(--u));line-height:1.4;color:#f6f6f6;text-align:center;white-space:nowrap}
.palco>*:not(.ghost){z-index:1}
.titulo{font-weight:400;font-size:calc(16.4*var(--u));margin:0}
table.ficha{border-collapse:collapse;font-size:calc(13*var(--u));line-height:1.3}
.ficha th,.ficha td{border-top:1px solid var(--tinta);padding:calc(7*var(--u)) 0;vertical-align:top;text-align:left}
.ficha th{font-weight:400;letter-spacing:.06em;width:38%;padding-right:calc(10*var(--u))}
.ficha tr:last-child th,.ficha tr:last-child td{border-bottom:1px solid var(--tinta)}
.seta{border:0;background:none;padding:0;color:var(--tinta);cursor:pointer}
.seta svg{width:100%;height:100%;display:block}
.seta.volta{opacity:1}.seta.volta svg{transform:scaleX(-1)}
.seta:focus-visible,.abre:focus-visible{outline:2px solid var(--tinta);outline-offset:3px}
.navl{display:flex;gap:calc(14*var(--u));align-items:center;left:0}
.navl .seta{position:static;width:calc(42*var(--u));height:calc(27*var(--u))}
.navl .cont{position:absolute;left:100%;margin-left:calc(14*var(--u));white-space:nowrap}
.rosto{all:unset;position:absolute;cursor:pointer;display:block}
.rosto img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .22s linear}
.rosto img.on{opacity:1}
.troca{all:unset;position:absolute;cursor:pointer;display:flex;align-items:center;gap:calc(10*var(--u));transform:translateX(-50%);font-size:calc(12*var(--u));letter-spacing:.08em;white-space:nowrap;border:1.5px solid var(--tinta);border-radius:99px;padding:calc(6*var(--u)) calc(14*var(--u))}
.troca .pontos{display:flex;gap:calc(5*var(--u))}.troca i{width:calc(7*var(--u));height:calc(7*var(--u));border-radius:50%;border:1.2px solid var(--tinta)}.troca i.on{background:var(--tinta)}
.troca:focus-visible,.rosto:focus-visible{outline:2px solid var(--tinta);outline-offset:3px}
.orelha{transform-origin:3.7% 42%;transform:scale(.05);transition:transform .7s cubic-bezier(.22,1,.36,1)}
.orelha.cresceu{transform:scale(1)}
.orelha .fatia{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;clip-path:inset(0 0 100% 0)}
.orelha .fatia:first-child{opacity:1;clip-path:inset(0 0 0 0)}
.vaza{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.riso .palco img.a{z-index:1}
.cont{font-size:calc(12*var(--u));letter-spacing:.08em;color:var(--cinza);font-variant-numeric:tabular-nums}
.livro{filter:drop-shadow(0 calc(10*var(--u)) calc(14*var(--u)) rgba(17,17,17,.16))}
.pg{background:#fff;overflow:hidden}
.pg img{width:100%;height:100%;object-fit:cover;display:block}
.pg.branca{background:#fff;position:relative}
.pg.branca.esq{background:linear-gradient(to left,rgba(0,0,0,.07),rgba(0,0,0,0) 12%),#fff}
.pg.branca.dir{background:linear-gradient(to right,rgba(0,0,0,.07),rgba(0,0,0,0) 12%),#fff}
.pg .num{position:absolute;bottom:6%;font-family:var(--mono);font-size:11px;color:#b9b6b0}
.pg.esq .num{left:8%}.pg.dir .num{right:8%}
.palavra{font-size:calc(16.4*var(--u));line-height:1;white-space:nowrap;transform-origin:0 85%;transform:var(--t0)}
#reticulacao.caiu .palavra{transform:var(--t1);transition:transform 3.4s cubic-bezier(.05,.75,.12,1) var(--d)}
#capa{height:calc(100vh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));min-height:calc(768*var(--u))}
#capa .palco{top:auto;bottom:0;transform:translateX(-50%)}
.respira{animation:respira 11s ease-in-out infinite}
@keyframes respira{0%,100%{opacity:.5}50%{opacity:.12}}
.eco{font-family:var(--mono);font-size:calc(15*var(--u));line-height:1.34;color:#dedcd8;opacity:0;transition:opacity 1.2s ease;white-space:normal}
.eco.it{font-style:italic}
.eco.on{opacity:.45}
.codigo{color:#eeedeb!important;opacity:.6!important}
.codigo .l{display:inline-block}
.trilho{list-style:none;padding:0;display:flex;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;cursor:grab;overscroll-behavior-x:contain}
.trilho::-webkit-scrollbar{display:none}
.trilho.arrastando{cursor:grabbing;scroll-snap-type:none}
#trilho{gap:calc(33*var(--u));padding-left:calc(76.8*var(--u));padding-right:calc(76.8*var(--u));scroll-padding-left:calc(76.8*var(--u))}
.peca{flex:0 0 calc(330*var(--u));height:100%;scroll-snap-align:start}
.abre{all:unset;cursor:pointer;display:block;position:relative;width:100%;height:100%}
.abre img{width:100%;height:calc(380*var(--u));object-fit:contain;display:block;pointer-events:none}
.rot{position:absolute;right:0;top:calc(396*var(--u));display:flex;align-items:center;gap:calc(6*var(--u));font-size:calc(14*var(--u))}
.rot svg{width:calc(26*var(--u));height:calc(21*var(--u))}
#trilhoEd{gap:calc(24*var(--u));padding-left:calc(133*var(--u));padding-right:calc(133*var(--u));scroll-padding-left:calc(133*var(--u))}
.tela.curta{height:calc(290*var(--U))}
.tela.curta .palco{top:0;transform:translateX(-50%)}
.trilho.ed li{flex:0 0 auto;height:100%;scroll-snap-align:start}
.foto{all:unset;cursor:zoom-in;display:block;height:100%}
.foto img{height:100%;width:auto;display:block;pointer-events:none}
.foto:focus-visible{outline:2px solid var(--tinta);outline-offset:3px}
#luz{position:fixed;inset:0;z-index:60;background:rgba(255,255,255,.97);display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
#luz[hidden]{display:none}
#luz img{max-width:92vw;max-height:84vh;object-fit:contain;box-shadow:0 10px 30px rgba(0,0,0,.12)}
#luz .fecha{position:absolute;top:max(14px,env(safe-area-inset-top,0px));right:max(18px,env(safe-area-inset-right,0px));border:0;background:none;font:400 28px/1 var(--sans);cursor:pointer;color:var(--tinta)}
#luz .nav{position:absolute;bottom:max(18px,env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);display:flex;gap:14px}
#luz .nav .seta{position:static;width:44px;height:28px}
.bloco{display:flex;flex-wrap:wrap;gap:calc(60*var(--u));align-items:flex-start;padding:calc(76.8*var(--u)) calc(76.8*var(--u)) calc(30*var(--u))}
.etapa-t,.etapa-x{transition:opacity .25s}
.sai{opacity:0}
/* zoom */
#zoom{position:fixed;inset:0;background:rgba(255,255,255,.98);z-index:50;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(20px,4vw,64px);align-items:center;padding:clamp(20px,5vw,76px);padding-left:max(clamp(20px,5vw,76px),env(safe-area-inset-left,0px));padding-right:max(clamp(20px,5vw,76px),env(safe-area-inset-right,0px))}
#zoom[hidden]{display:none}
#zoom img{width:100%;max-height:80vh;object-fit:contain}
#zoom dl{display:grid;grid-template-columns:auto 1fr;margin:0;font-size:15px;line-height:1.4}
#zoom dt,#zoom dd{border-top:1px solid var(--tinta);padding:9px 0;margin:0}
#zoom dt{letter-spacing:.06em;padding-right:18px}
#zoom .nota{color:var(--cinza);font-size:12px;margin-top:10px}
#zoom .fecha{position:absolute;top:max(16px,env(safe-area-inset-top,0px));right:max(16px,env(safe-area-inset-right,0px));border:0;background:none;font:400 28px/1 var(--sans);cursor:pointer;color:var(--tinta)}
#zoom .nav{display:flex;gap:14px;margin-top:22px}#zoom .nav .seta{position:static;width:44px;height:28px}
@media (max-width:700px){
  :root{--u:calc(100vw/700);--U:calc(100vw/700)}
  .tela{height:auto;display:flex;flex-direction:column;gap:18px;padding-block:28px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .a{position:static!important;width:auto!important;height:auto!important;max-width:100%}
  .ghost{display:none}
  .txt,.titulo,.palavra,.rot,table.ficha{font-size:15px}
  .palavra{transform:none!important}
  #capa{height:auto;min-height:0}
  .tela.curta{height:auto}
  .eco,.codigo{display:none}
  .livro{width:100%!important}
  img.a{width:100%!important;max-height:70vh;object-fit:contain!important}
  #trilho{height:auto!important;padding:0}.peca{flex-basis:72vw}.abre img{height:auto;aspect-ratio:4/5}.rot{position:static;justify-content:flex-end;font-size:14px}
  #trilhoEd{height:46vw!important;padding:0}
  .seta{width:44px!important;height:28px!important;align-self:center}
  .palco{position:static;transform:none;width:auto;height:auto;display:flex;flex-direction:column;gap:18px}
  /* as regras #capa .palco e .tela.curta .palco tem especificidade maior (id / 3 classes) que
     o reset .palco acima e venciam mesmo dentro da media query, empurrando o conteudo pra fora
     da tela (transform:translateX(-50%) sem um width previsivel no mobile). Repete o reset aqui
     com a mesma especificidade para garantir que ele vença. */
  #capa .palco, .tela.curta .palco{position:static;top:auto;bottom:auto;transform:none}
  .cheia{position:static;height:auto}
  .cont{align-self:center}
  .navl{align-self:center}.navl .cont{position:static}
  .vaza{display:none}
  .troca{transform:none;align-self:center}
  /* position:relative (nao static) e proposital: os ".rosto img" sao position:absolute;inset:0
     e precisam de um ancestral posicionado para se encaixar certo. Mas isso faz o left/top
     inline (calc(442.2*var(--u)) etc, pensado pra posicionamento absoluto no desktop) continuarem
     valendo como deslocamento relativo, empurrando o rosto pra fora da tela — por isso zera os dois aqui. */
  .rosto{position:relative!important;left:0!important;top:0!important;height:110vw!important}
  .troca{position:static!important}
  /* mesmo problema do .rosto: ".orelha img" e position:absolute;inset:0 e precisa de um
     ancestral posicionado do tamanho certo — sem isso ele escapa pro .tela (a tela toda) e o
     left/top inline do desktop ainda empurrariam a caixa pra fora. Da uma caixa propria,
     do tamanho/proporcao do logo, position:relative e left/top zerados. */
  .orelha{position:relative!important;left:0!important;top:0!important;width:100%!important;aspect-ratio:475.5/355.2;height:auto!important}
  #capa,#quebra1,#quebra2{padding:0}
  .bloco{padding:28px 16px}
  #zoom{grid-template-columns:1fr;overflow:auto}
}
@media (prefers-reduced-motion:reduce){.etapa-t,.etapa-x{transition:none}.respira{animation:none}#reticulacao.caiu .palavra{transition:none}}