/* Hallmark · genre: editorial (registro luxo · Apple / A24), agora EM CINEMA · macrostructure: Marquee Hero (03) em vídeo; o cadastro é um formulário inline dentro do Eu no Universo (portão; Paulo, 09/09: sem modal, mas para copiar o prompt e baixar os wallpapers "ela tem que deixar os dados")
 * theme: custom "Dois lados" — DOIS temas completos, escolhidos pelo leitor no segmentado Justiça | Vingança (html[data-lado]); o hero é SEMPRE a sala escura (tokens --cine-*) e o lado governa a página a partir da sinopse
 *   · Justiça: paper oklch(96% .012 80) light-band · Vingança: paper oklch(13% .012 60) dark-band · cinema: ~10%, mesmo matiz quente nos três
 *   · display roman-serif Newsreader 500, opsz 72, tracking −0.02, sempre romano · body Geist 400 (350 no escuro) · accent NEUTRO: tinta no claro, luz no escuro;
 *     a única cor da página vem do logo, do vídeo e das fotos. Os mesmos tokens servem os dois lados: --ink é a tinta no claro e a luz no escuro.
 * hero: vídeo local em loop mudo (teaser oficial: 1080p; 720p só abaixo de 768 px em telas ≤ 2,5 dppx), poster e camada de espera = primeiro frame 1920×1080, scrim em gradiente, botão Pausar/Reproduzir (WCAG 2.2.2, persiste na sessão);
 *   reduced-motion (ouvido em change), sessão pausada ou autoplay negado → poster (.hero--parado), nada quebra · barra translúcida com blur sobre o vídeo (nada vaza por trás do logo)
 * enrichment: E8 fotografia real no teto de 1,5× do pixel físico (tokens --foto-max/--quadro-max/--logo-max por dppx; wallpapers em grade 3:2 abaixo do teto; decisão da diretora, 09/09) · ícones de pagamento no tamanho natural (decisão do Paulo, 09/09)
 * nav: N12 banner + retract — sobre o vídeo a faixa fica recolhida e a barra vira cinema translúcido (.sobre-hero); depois do hero recolhe ao descer e volta ao subir; "Assine agora" fica sempre na barra do desktop (não depende da faixa); no celular a faixa some e a ação vai para a barra inferior (C4)
 * footer: só Termos de Uso · Política de Privacidade, centrado, igual ao rodapé da landing do marketing (decisão do Paulo, 09/09: "tira tudo lá, deixa ele clean") · seções: S2 hanging heads com ritmo variado (teasers = faixa de cinema com frase centrada e sem filete; história e wallpapers = cabeça empilhada) · F3 ledger no fluxo "Eu no Universo" (upload → quadro → JPG → legenda) · C3 links tipográficos · sinopse: bloco normal, texto + UMA foto (a cena presa saiu em 09/09: "trava a rolagem", Paulo)
 * inferências: audiência = público brasileiro do Univer Vídeo, chega do celular pelas redes · uso = assinar (registration) · tom = cinema com sobriedade Apple
 * motion (Íris + Aurora, §8.4): 4 primitivas, só transform/opacity, easing e duração em tokens, tudo colapsa em prefers-reduced-motion (opacity ≤ 150 ms ou nada), foco nunca animado —
 *   1 entrada do hero (logo → pergunta → data → CTA, 0/90/180/270 ms) + fade do poster para o vídeo no "playing" · 2 revelação única por seção ([data-reveal], IntersectionObserver, opacity + 16 px, 560 ms, uma vez)
 *   3 realce curto do portão de cadastro quando um wallpaper travado é clicado (transform + opacity, --dur-folha, uma vez) · 4 faixa que recolhe (transform 220 ms) + hover de um sinal · will-change só no bloco que está revelando, e só enquanto revela
 *   sem parallax, partículas, cursor, bounce ou loop decorativo; sem cena presa (sticky + stills pelo scroll): retirada em 09/09 a pedido do Paulo — a rolagem é 100 % normal do topo ao rodapé
 * Hallmark · pre-emit critique: P4 H5 E5 S4 R5 V4 · contrast: pass (40–41, AA medido nos dois lados) · slop (42–45): exceções declaradas — ícones de pagamento no tamanho natural (30), teto de mídia 1,5× em vez de 1× nas fotos e o vídeo do hero em cover acima disso no celular (é vídeo, §8.1)
 *   · honest (46), chrome (47), tokens (48), responsive (49): sem exceção (a tira horizontal dos wallpapers saiu em 09/09: grade uniforme 3:2, 2 colunas no celular e 5 no desktop — "bagunçado", Paulo) · mobile (34, 50–57): 44 px em todo alvo, safe-area, barra inferior compensada no fim do documento */

/* 0) tokens — Justiça (claro) é a base; Vingança (escuro) troca só lightness/chroma, nunca o matiz; o cinema (hero) é fixo */
:root{
  --paper:#F4EFE6; --paper-2:#EBE4D8; --paper-3:#E1D8C9; --rule:#D2C8B8; --rule-2:#B4A896;
  --ink:#221D18; --ink-2:#5B5349; --focus:#221D18;
  --cine:#0F0C09; --cine-rgb:15,12,9; --cine-2:#1B1510; --cine-ink:#F1EAE0; --cine-ink-2:#C2B8AB; --cine-rule:rgba(241,234,224,.18); --cine-rule-2:rgba(241,234,224,.38);
  --font-display:"Newsreader",ui-serif,Georgia,"Times New Roman",serif;
  --font-body:"Geist",ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",sans-serif;
  --peso-corpo:400;
  --text-xs:.8125rem; --text-sm:.875rem; --text-base:1rem; --text-md:1.125rem; --text-lg:1.375rem; --text-xl:1.75rem;
  --text-h2:clamp(2rem,1.3rem + 2.2vw,3rem); --text-display:clamp(2.5rem,1.3rem + 4vw,4.75rem);
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; --s-20:80px; --s-24:96px; --s-32:128px;
  --pagina:1200px; --gutter:clamp(16px,4vw,48px);
  --faixa-h:40px; --barra-h:64px; --inferior-h:73px; /* 12 + 48 (botão) + 12 + 1 (filete) */
  --r-chip:999px; --r-foto:2px; --r-campo:10px; --r-folha:20px;
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-in:cubic-bezier(.7,0,.84,0);
  --dur-micro:120ms; --dur-short:220ms; --dur-folha:320ms; --dur-long:420ms; --dur-revela:560ms;
  --z-raised:10; --z-sticky:200; --z-nav:300; --z-modal:400;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  /* teto de resolução: largura CSS × dppx ≤ 1,5 × pixels da fonte (1× = a própria fonte) */
  --foto-max:1024px; --quadro-max:1080px; --logo-max:999px;
}
@supports (color:oklch(50% .1 20)){
  :root{
    --paper:oklch(96% .012 80); --paper-2:oklch(93% .014 80); --paper-3:oklch(89.5% .016 80); --rule:oklch(84% .014 78); --rule-2:oklch(72% .014 75);
    --ink:oklch(20% .012 60); --ink-2:oklch(44% .012 60); --focus:oklch(20% .012 60);
  }
}
html[data-lado="vinganca"]{
  --paper:#17120E; --paper-2:#1F1914; --paper-3:#2A2219; --rule:#3B322A; --rule-2:#5A4D41;
  --ink:#EDE6DB; --ink-2:#B5ACA1; --focus:#EDE6DB; --peso-corpo:350;
  color-scheme:dark;
}
@supports (color:oklch(50% .1 20)){
  html[data-lado="vinganca"]{
    --paper:oklch(13% .012 60); --paper-2:oklch(17% .012 60); --paper-3:oklch(22% .013 60); --rule:oklch(30% .012 60); --rule-2:oklch(42% .012 60);
    --ink:oklch(93% .008 80); --ink-2:oklch(74% .01 75); --focus:oklch(93% .008 80);
  }
}
@media (min-resolution:1.5dppx),(-webkit-min-device-pixel-ratio:1.5){
  :root{ --foto-max:768px; --quadro-max:810px; --logo-max:749px; }
}
@media (min-resolution:2.5dppx),(-webkit-min-device-pixel-ratio:2.5){
  :root{ --foto-max:512px; --quadro-max:540px; --logo-max:499px; }
}

/* 1) base */
*,*::before,*::after{ box-sizing:border-box; }
html{ overflow-x:clip; color-scheme:light; -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--barra-h) + var(--s-4)); }
html[data-lado="vinganca"]{ color-scheme:dark; }
body{ margin:0; overflow-x:clip; background:var(--paper); color:var(--ink); font-family:var(--font-body); font-weight:var(--peso-corpo); font-size:var(--text-base); line-height:1.55; -webkit-font-smoothing:antialiased; }
body.travado{ overflow:hidden; }
h1,h2,h3,h4{ margin:0; font-family:var(--font-display); font-style:normal; font-weight:500; font-optical-sizing:auto; letter-spacing:-.02em; line-height:1.05; overflow-wrap:anywhere; min-width:0; text-wrap:balance; }
p{ margin:0; }
a{ color:inherit; }
img,canvas,iframe,video{ display:block; max-width:100%; }
img{ height:auto; }
button,input,textarea{ font:inherit; color:inherit; }
[hidden]{ display:none !important; }
.oculto{ position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important; border:0 !important; }
.pagina{ width:min(var(--pagina), calc(100% - 2 * var(--gutter))); margin-inline:auto; }
.pular{ position:fixed; z-index:var(--z-modal); top:var(--s-3); left:var(--s-3); padding:var(--s-3) var(--s-4); background:var(--ink); color:var(--paper); text-decoration:none; border-radius:var(--r-chip); transform:translateY(-200%); }
.pular:focus-visible{ transform:none; outline:2px solid var(--paper); outline-offset:2px; }
:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; }

/* botões e links de ação — um sinal por elemento */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2); min-height:44px; padding:0 var(--s-5); border:1px solid var(--ink); border-radius:var(--r-chip); background:var(--ink); color:var(--paper); font-weight:500; font-size:var(--text-sm); line-height:1; letter-spacing:.005em; text-decoration:none; white-space:nowrap; cursor:pointer; transition:transform var(--dur-micro) var(--ease-out); }
.btn--vazio{ background:transparent; color:var(--ink); }
.btn:active{ transform:translateY(1px); }
.btn:disabled,.btn[aria-disabled="true"]{ opacity:.55; cursor:not-allowed; pointer-events:none; }
.btn--espera{ cursor:wait; }
.link{ display:inline-flex; align-items:center; gap:var(--s-1); padding:calc((44px - 1lh) / 2) var(--s-2); margin:calc((1lh - 44px) / 2) calc(-1 * var(--s-2)); color:var(--ink); font-weight:500; font-size:var(--text-sm); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em; text-decoration-color:var(--rule-2); white-space:nowrap; }
.link:active{ text-decoration-color:var(--ink); }
@media (hover:hover){
  .btn:hover{ transform:translateY(-1px); }
  .link:hover{ text-decoration-color:var(--ink); }
}

/* 2) topo — N12: faixa (o lado inverso) + barra; sobre o vídeo a faixa fica recolhida e a barra é cinema translúcido; depois do hero recolhe ao descer, volta ao subir */
.topo{ position:fixed; inset:0 0 auto; z-index:var(--z-nav); transform:translateY(0); transition:transform var(--dur-short) var(--ease-out); }
/* .recolhida só desloca onde a faixa existe (bloco >= 64rem, abaixo); no celular a faixa é display:none e a barra fica inteira (R-003) */
.faixa{ display:none; height:var(--faixa-h); background:var(--ink); color:var(--paper); --focus:var(--paper); }
.faixa__in{ display:flex; align-items:center; justify-content:center; gap:var(--s-3); height:100%; font-size:var(--text-xs); font-weight:500; letter-spacing:.01em; }
.faixa__sep{ opacity:.5; }
.faixa__conta{ display:none; font-variant-numeric:tabular-nums; }
.faixa__conta::before{ content:"·"; opacity:.5; margin-right:var(--s-3); }
.topo.longe .faixa__conta{ display:inline; }
.faixa__conta:empty{ display:none !important; } /* depois da estreia não há contagem: nem o separador aparece */
.faixa__cta{ display:inline-flex; align-items:center; min-height:44px; color:inherit; text-decoration:underline; text-underline-offset:.2em; text-decoration-thickness:1px; white-space:nowrap; } /* alvo de 44 px numa faixa de 40: o desenho não muda */
.faixa__x{ position:absolute; top:calc((var(--faixa-h) - 44px) / 2); right:var(--gutter); width:44px; height:44px; display:grid; place-items:center; border:0; background:transparent; color:inherit; cursor:pointer; }
.faixa__x svg{ width:14px; height:14px; }
.barra{ height:calc(var(--barra-h) + var(--sat)); padding-top:var(--sat); background:var(--paper); border-bottom:1px solid var(--rule); }
.topo.sobre-hero .barra{ --paper:var(--cine); --paper-2:var(--cine-2); --ink:var(--cine-ink); --ink-2:var(--cine-ink-2); --rule:var(--cine-rule); --focus:var(--cine-ink); background:rgba(var(--cine-rgb),.72); -webkit-backdrop-filter:blur(18px) saturate(1.3); backdrop-filter:blur(18px) saturate(1.3); color:var(--cine-ink); color-scheme:dark; } /* o blur é funcional: o h1 e o CTA do hero não vazam por trás do logo */
.topo.sobre-hero .marca img{ filter:none; opacity:1; }
.barra__in{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-2); height:100%; }
.barra__direita{ display:flex; align-items:center; gap:var(--s-2); }
.marca{ display:inline-flex; align-items:center; height:44px; }
.marca img{ width:84px; height:auto; }
html[data-lado="justica"] .marca img{ filter:brightness(0); opacity:.86; }
.barra__links{ display:none; }
.barra__links a{ display:inline-flex; align-items:center; min-height:44px; color:var(--ink-2); font-size:var(--text-sm); font-weight:500; text-decoration:none; white-space:nowrap; }
.barra__links a:active{ color:var(--ink); }
.barra__acessar,.barra__assinar{ display:none; }
.barra__assinar{ position:relative; min-height:36px; padding:0 var(--s-4); font-size:var(--text-xs); }
.barra__assinar::before{ content:""; position:absolute; inset:-4px 0; } /* pílula de 36 com alvo de 44 */
.barra__menu{ width:44px; height:44px; display:grid; place-items:center; border:0; background:transparent; color:var(--ink); cursor:pointer; border-radius:var(--r-chip); }
.barra__menu svg{ width:22px; height:22px; }
@media (hover:hover){
  .barra__links a:hover{ color:var(--ink); }
}

/* o segmentado: o conceito da página em ~130 px — discreto (pílula de 28), alvo de 44 */
.lado{ margin:0; padding:2px; border:1px solid var(--rule); border-radius:var(--r-chip); display:inline-flex; background:transparent; }
.lado legend{ position:absolute; clip:rect(0 0 0 0); width:1px; height:1px; overflow:hidden; }
.lado__op{ position:relative; display:inline-flex; align-items:center; padding-block:8px; margin-block:-8px; } /* alvo de toque 44 px (28 da pílula + 16) sem mudar a pílula: o input cobre o padding */
.lado__op input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.lado__op span{ display:inline-flex; align-items:center; height:28px; padding:0 10px; border-radius:var(--r-chip); color:var(--ink-2); font-size:var(--text-xs); font-weight:500; letter-spacing:.01em; white-space:nowrap; pointer-events:none; }
.lado__op input:checked + span{ background:var(--ink); color:var(--paper); }
.lado__op input:focus-visible + span{ outline:2px solid var(--focus); outline-offset:2px; }
@media (hover:hover){ .lado__op input:not(:checked):hover + span{ color:var(--ink); } }

/* o idioma: três bandeiras num grupo com a mesma pílula do segmentado (28 de pílula, 44 de alvo via ::before); abaixo de 40 rem sai da barra e mora no topo da folha, com o nome ao lado (Paulo, 09/09: "a bandeirinha lá em cima do idioma") */
.idioma{ display:inline-flex; align-items:center; gap:2px; margin:0; padding:2px; border:1px solid var(--rule); border-radius:var(--r-chip); }
.idioma__op{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2); height:28px; min-width:36px; padding:0 8px; margin:0; border:0; border-radius:var(--r-chip); background:transparent; color:var(--ink-2); font-size:var(--text-xs); font-weight:500; letter-spacing:.01em; white-space:nowrap; cursor:pointer; }
.idioma__op::before{ content:""; position:absolute; inset:-8px 0; } /* alvo de toque 44 px sem mudar a pílula */
.idioma__op[aria-pressed="true"]{ background:var(--ink); color:var(--paper); }
.idioma__op:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.idioma__bandeira{ font-size:18px; line-height:1; letter-spacing:0; }
.idioma__nome{ display:none; }
@media (hover:hover){ .idioma__op:not([aria-pressed="true"]):hover{ color:var(--ink); } }
.folha__idioma{ margin-top:var(--s-6); }
.folha__idioma .idioma{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; }
.folha__idioma .idioma__op{ height:44px; min-width:0; gap:var(--s-1); padding:0 var(--s-1); } /* em 320 px cada célula tem 93 px: bandeira 18 + 4 + "Português" + 8 */
.folha__idioma .idioma__op::before{ inset:0; }
.folha__idioma .idioma__nome{ display:inline; font-size:var(--text-xs); }
/* celular: a bandeira do idioma fica NA BARRA e o segmentado do lado vai para a folha
   (Paulo, 09/09: "é mais importante que o Justiça/Vingança"); a partir de 40 rem os dois cabem */
.barra .lado{ display:none; }
.folha__lado{ margin-top:var(--s-4); }
.folha__lado .lado{ display:flex; width:100%; }
.folha__lado .lado__op{ flex:1; }
.folha__lado .lado__op span{ width:100%; height:44px; justify-content:center; font-size:var(--text-sm); }
.folha__idioma{ display:none; }
@media (min-width:40rem){ .barra .lado{ display:inline-flex; } }

/* folha de menu (celular) */
.folha{ position:fixed; inset:0; z-index:var(--z-modal); background:var(--paper); color:var(--ink); padding:calc(var(--sat) + var(--s-3)) var(--gutter) var(--s-8); transform:translateY(-100%); visibility:hidden; transition:transform var(--dur-short) var(--ease-in), visibility 0s linear var(--dur-short); overflow:auto; }
.folha.aberta{ transform:none; visibility:visible; transition:transform 260ms var(--ease-out), visibility 0s; }
.folha__cabeca{ display:flex; align-items:center; justify-content:space-between; height:44px; }
.folha__x{ width:44px; height:44px; display:grid; place-items:center; border:0; background:transparent; color:inherit; cursor:pointer; border-radius:var(--r-chip); }
.folha__x svg{ width:20px; height:20px; }
.folha__lista{ list-style:none; margin:var(--s-8) 0 0; padding:0; }
.folha__lista li + li{ border-top:1px solid var(--rule); }
.folha__lista a{ display:flex; align-items:center; justify-content:space-between; min-height:60px; font-family:var(--font-display); font-size:var(--text-xl); font-weight:500; letter-spacing:-.01em; text-decoration:none; white-space:nowrap; }
.folha__lista a svg{ width:18px; height:18px; color:var(--ink-2); }

/* 3) hero — cinema: o teaser em loop mudo, full-bleed, sempre a sala escura; o vídeo corre por baixo da barra */
main{ padding-bottom:0; } /* a compensação da barra inferior fica no FIM do documento (rodapé, bloco 11) — C3 */
.hero{ position:relative; isolation:isolate; overflow:hidden; display:grid; min-height:70svh; padding-top:calc(var(--barra-h) + var(--sat)); background:var(--cine); color:var(--cine-ink); color-scheme:dark;
  --paper:var(--cine); --paper-2:var(--cine-2); --ink:var(--cine-ink); --ink-2:var(--cine-ink-2); --rule:var(--cine-rule); --focus:var(--cine-ink); }
.hero__video{ position:absolute; inset:0; z-index:-3; width:100%; height:100%; object-fit:cover; object-position:50% 40%; background:var(--cine); }
.hero__poster{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; max-width:none; object-fit:cover; object-position:50% 40%; opacity:0; visibility:hidden; } /* o mesmo primeiro frame (1920×1080) do atributo poster, por cima do vídeo só entre o play() e o "playing": é ele que se dissolve (bloco 13.1) */
.hero__video::-webkit-media-controls-start-playback-button{ display:none !important; -webkit-appearance:none; }
.hero__video::-webkit-media-controls{ display:none !important; }
.hero__scrim{ position:absolute; inset:0; z-index:-1; background:linear-gradient(to top, rgba(var(--cine-rgb),.94) 0%, rgba(var(--cine-rgb),.66) 32%, rgba(var(--cine-rgb),.14) 68%, rgba(var(--cine-rgb),0) 100%), linear-gradient(to right, rgba(var(--cine-rgb),.72) 0%, rgba(var(--cine-rgb),.28) 42%, rgba(var(--cine-rgb),0) 72%); }
.hero__in{ display:grid; align-content:end; justify-items:start; gap:var(--s-4); padding:var(--s-10) 0 calc(var(--s-4) + 44px + var(--s-3)); } /* embaixo: a faixa do botão de pausa (44) fica livre do texto */
.hero__logo{ width:min(100%, var(--logo-max), 236px); }
.hero__titulo{ font-size:var(--text-display); max-width:18ch; letter-spacing:-.025em; line-height:1.02; }
.hero__estreia{ display:none; font-size:var(--text-md); font-weight:500; letter-spacing:-.005em; }
.hero__cta{ display:none; }
/* pausa do loop (WCAG 2.2.2): só ícone, 44×44 no canto inferior direito; o nome vive no aria-label e no texto oculto; some se não há vídeo */
.hero__pausa{ position:absolute; z-index:1; right:var(--gutter); bottom:var(--s-4); width:44px; height:44px; display:grid; place-items:center; padding:0; border:1px solid var(--cine-rule-2); border-radius:var(--r-chip); background:rgba(var(--cine-rgb),.5); color:var(--cine-ink); cursor:pointer; }
.hero__pausa svg{ width:14px; height:14px; }
.hero__pausa .ico-play{ display:none; }
.hero--pausado .hero__pausa .ico-play,.hero--parado .hero__pausa .ico-play{ display:block; }
.hero--pausado .hero__pausa .ico-pausa,.hero--parado .hero__pausa .ico-pausa{ display:none; }
.hero--sem-video .hero__pausa{ display:none; }
@media (hover:hover){ .hero__pausa:hover{ border-color:var(--cine-ink); } }

/* 4) seções — cabeças penduradas, divisão por filete */
.sec{ padding:var(--s-16) 0; border-top:1px solid var(--rule); }
.hero + .sec{ border-top:0; } /* a sinopse encosta no cinema sem filete */
/* ritmo variado (C17): os teasers são uma faixa de cinema (sempre escura, como o hero) com a frase centrada e sem filete; a história empilha título e lede */
.sec--cine{ border-top:0; background:var(--paper); color:var(--ink); }
.sec--cine + .sec{ border-top:0; }
.sec__cabeca--centro{ justify-items:center; text-align:center; }
.sec__cabeca--centro .sec__titulo{ font-family:var(--font-body); font-size:var(--text-xs); font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); line-height:1.4; max-width:none; }
.sec__cabeca--centro .sec__frase{ font-size:var(--text-h2); line-height:1.15; max-width:22ch; }
.sec__cabeca{ display:grid; gap:var(--s-3); margin-bottom:var(--s-8); }
.sec__titulo{ font-size:var(--text-h2); max-width:20ch; }
.sec__lede{ color:var(--ink-2); font-size:var(--text-md); max-width:52ch; }
.sec__frase{ font-family:var(--font-display); font-weight:400; font-size:var(--text-lg); letter-spacing:-.01em; line-height:1.3; max-width:30ch; color:var(--ink); }

/* 5) (a seção da estreia — calendário, contagem e foto — saiu em 09/09 a pedido do Paulo; a data fica no hero, na faixa e na barra inferior) */

html[data-lado="vinganca"] .sinopse__foto{ filter:saturate(.92); }
/* 6) sinopse — bloco normal, rolagem normal (a cena presa saiu em 09/09): no celular a foto em cima e o texto embaixo; no desktop texto à esquerda e UMA foto à direita, no teto --foto-max */
.sinopse__grade{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-6); align-items:center; }
.sinopse__texto{ display:grid; gap:var(--s-5); align-content:start; }
.sinopse__rotulo{ font-family:var(--font-body); font-size:var(--text-xs); font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); line-height:1.4; }
.sinopse__corpo{ font-family:var(--font-display); font-weight:400; font-size:var(--text-lg); letter-spacing:-.01em; line-height:1.35; max-width:34ch; text-wrap:pretty; }
.sinopse__foto{ order:-1; width:100%; max-width:var(--foto-max); aspect-ratio:1024/683; object-fit:cover; border-radius:var(--r-foto); background:var(--paper-3); }

/* 7) teasers */
.teasers__grade{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-4); }
.tela{ aspect-ratio:16/9; width:100%; border:0; border-radius:var(--r-foto); background:var(--paper-3); }

/* 8) universo — amostras + livro-razão do fluxo + quadro */
.amostras{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s-2); list-style:none; margin:0 0 var(--s-8); padding:0; }
.amostras img{ width:100%; max-width:var(--quadro-max); border-radius:var(--r-foto); background:var(--paper-3); }
.fluxo{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-8); align-items:start; }
.razao{ margin:0; border-top:1px solid var(--rule); }
.razao > div{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-3); padding:var(--s-5) 0; border-bottom:1px solid var(--rule); }
.razao dt{ font-size:var(--text-xs); font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); padding-top:var(--s-1); }
.razao dd{ margin:0; display:grid; gap:var(--s-3); min-width:0; }
.razao p{ color:var(--ink-2); font-size:var(--text-sm); }
.campo{ width:100%; min-height:8lh; resize:vertical; padding:var(--s-3) var(--s-4); border:1px solid var(--rule); border-radius:var(--r-campo); background:var(--paper-2); color:var(--ink); font-size:var(--text-sm); line-height:1.5; outline:2px solid transparent; }
.campo:focus-visible{ outline:2px solid var(--focus); outline-offset:1px; }
.acoes{ display:flex; flex-wrap:wrap; gap:var(--s-2); align-items:center; }
.acoes .btn{ flex:1 1 auto; }
.upload{ position:relative; }
.upload input{ position:absolute; width:1px; height:1px; margin:-1px; opacity:0; overflow:hidden; clip:rect(0 0 0 0); }
.upload input:focus-visible + label{ outline:2px solid var(--focus); outline-offset:3px; }
.upload label{ width:100%; }
.hashtags{ font-weight:500; color:var(--ink); }
.quadro{ display:grid; gap:var(--s-4); justify-items:start; }
.quadro > .btn{ justify-self:stretch; } /* Baixar JPG na largura dos outros botões do fluxo */
.quadro__palco{ width:100%; max-width:var(--quadro-max); border-radius:var(--r-foto); overflow:hidden; background:var(--paper-3); }
.quadro__palco canvas{ width:100%; aspect-ratio:4/5; }
.quadro__estado{ color:var(--ink-2); font-size:var(--text-sm); min-height:1lh; max-width:var(--quadro-max); }

/* 9) wallpapers — grade uniforme e calma (09/09): todo quadro na MESMA caixa 3:2 (cover; o vertical recortado pelo rosto), 2 colunas até 64 rem e 5 no desktop, gap único;
   legenda = título à esquerda e Baixar à direita na mesma linha, 44 px reservados em todos os quadros (o título que quebra em 2 linhas desce, a fileira continua alinhada pelo topo) */
.galeria{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-4); }
.obra{ min-width:0; }
.obra figure{ margin:0; display:grid; gap:var(--s-1); transition:transform var(--dur-short) var(--ease-out); }
.obra img{ width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:var(--r-foto); background:var(--paper-3); }
.obra--v img{ object-position:50% 12%; } /* 640×960: recorte pelo alto, o rosto fica no quadro */
.obra figcaption{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:var(--s-2); min-height:44px; }
.obra h3{ font-family:var(--font-body); font-size:var(--text-sm); font-weight:500; letter-spacing:0; line-height:1.3; padding-top:calc((44px - 1lh) / 2); text-wrap:pretty; } /* a primeira linha do título na linha do Baixar */
.obra .link{ line-height:1.3; margin-block:0; } /* alvo de 44 px de altura, no fluxo (sem a margem negativa do .link) */
@media (hover:hover){ .obra figure:hover{ transform:translateY(-2px); } }

/* 9b) portão do cadastro — travado, a seção INTEIRA é uma faixa de cinema (Paulo, 09/09: "tem que estar com destaque, tem que chamar atenção ... Desse jeito está horrível"):
   #universo leva sec--cine + universo--trava; a cabeça e o portão viram display:contents e a .pagina é a grade — celular: eyebrow → título → lede → leque → formulário;
   a partir de 64 rem duas colunas (7fr leque | 5fr chamada + formulário) centradas na vertical. Sem cartão em volta do formulário (o escuro é o palco): campos de 52 px em --cine-2,
   botão --cine-ink na largura toda; o leque são as MESMAS três amostras da vitrine (li na mesma célula, rotate/translate estáticos, aria-hidden enquanto decorativas);
   liberado (JS), as classes saem e a vitrine volta à grade — troca instantânea, sem segundo download. html.cadastrado (head, com a flag) segura a seção até o script liberar: nada pisca. */
html.cadastrado .universo--trava{ display:none; }
.universo--trava{ padding:var(--s-12) 0; }
.universo--trava .universo__in{ display:grid; grid-template-columns:minmax(0,1fr); grid-template-areas:"eyebrow" "texto" "leque" "form"; align-items:start; }
.universo--trava .sec__cabeca,.universo--trava .portao{ display:contents; }
.universo--trava .sec__lede,.universo--trava .universo__sufixo{ display:none; }
.universo--trava .sec__titulo{ grid-area:eyebrow; margin:0 0 var(--s-4); font-family:var(--font-body); font-size:var(--text-xs); font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); line-height:1.4; max-width:none; }
.portao__texto{ grid-area:texto; display:grid; gap:var(--s-4); align-content:start; margin:0 0 var(--s-8); }
.portao__titulo{ font-family:var(--font-display); font-style:normal; font-weight:500; font-optical-sizing:auto; font-size:var(--text-h2); letter-spacing:-.02em; line-height:1.05; color:var(--ink); text-wrap:balance; overflow-wrap:anywhere; min-width:0; }
.portao__lede{ font-size:var(--text-md); color:var(--ink-2); max-width:44ch; }
/* leque: três quadros na mesma célula; --i escalona a revelação (bloco 13.3); o translateY da revelação vem antes do rotate para ser vertical na página; overflow-x:clip = nunca rola para o lado */
.universo--trava .amostras{ grid-area:leque; display:grid; grid-template-columns:minmax(0,1fr); gap:0; justify-items:center; width:100%; margin:0 0 var(--s-8); padding:var(--s-3) 0 var(--s-6); overflow-x:clip; }
.universo--trava .amostras li{ grid-area:1 / 1; width:clamp(120px, 44%, 160px); max-width:var(--quadro-max); min-width:0; z-index:1; opacity:.92; transform:translateY(var(--leque-y,0px)) rotate(var(--rot,0deg)) translate(var(--tx,0%), var(--ty,0%)); }
.universo--trava .amostras li:nth-child(1){ --rot:-4deg; --tx:-58%; --ty:3%; --i:1; }
.universo--trava .amostras li:nth-child(2){ z-index:2; opacity:1; --i:0; }
.universo--trava .amostras li:nth-child(3){ --rot:4deg; --tx:58%; --ty:3%; --i:2; }
.portao__form{ grid-area:form; display:grid; gap:var(--s-4); }
.portao__campo{ display:grid; gap:var(--s-2); min-width:0; }
.portao__campo label{ font-size:var(--text-sm); font-weight:500; color:var(--ink); }
.portao .campo{ min-height:52px; padding:0 var(--s-4); resize:none; border-color:var(--rule-2); background:var(--paper-2); color:var(--ink); font-size:var(--text-base); }
.portao .campo::placeholder{ color:var(--ink-2); opacity:1; }
.portao .campo:focus-visible{ outline:2px solid var(--ink); outline-offset:1px; }
.portao .btn{ min-height:52px; width:100%; margin-top:var(--s-2); border-color:var(--ink); background:var(--ink); color:var(--paper); font-size:var(--text-base); }
.portao__site{ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; } /* honeypot: fora da tela, não display:none, para o robô preencher e o humano nem ver */
.portao__erro{ margin:0; font-size:var(--text-sm); line-height:1.4; color:var(--ink); }
.portao .btn[aria-busy="true"]{ opacity:.8; cursor:wait; }
.portao__legal{ font-size:var(--text-xs); color:var(--ink-2); }
.portao__legal .link{ font-size:inherit; color:var(--ink); text-decoration-color:var(--rule-2); }
/* 9c) país do WhatsApp — botão bandeira + DDI dentro do campo (à esquerda, 52 px, --pais-w medido pelo script) e lista flutuante abaixo (busca no topo, itens de 44 px, rolagem própria).
   Só tokens --cine-*: o portão é a faixa escura nos dois lados. Bandeira em emoji regional num slot de largura fixa (sem emoji viram as letras, o layout não mexe). */
.tel{ position:relative; min-width:0; }
.tel .campo{ width:100%; padding-left:calc(var(--pais-w, 96px) + var(--s-3)); }
.pais{ position:absolute; left:0; top:0; bottom:0; z-index:1; display:inline-flex; align-items:center; gap:var(--s-1); margin:0; padding:0 var(--s-2) 0 var(--s-3); border:0; border-radius:var(--r-campo) 0 0 var(--r-campo); background:transparent; color:var(--ink); font:inherit; font-size:var(--text-base); line-height:1; cursor:pointer; -webkit-appearance:none; appearance:none; }
.pais::after{ content:""; position:absolute; right:0; top:12px; bottom:12px; width:1px; background:var(--rule); }
.pais:focus-visible{ outline:2px solid var(--ink); outline-offset:-2px; }
.pais__bandeira{ width:26px; flex:none; text-align:center; font-size:20px; line-height:1; letter-spacing:0; overflow:hidden; }
.pais__ddi{ font-variant-numeric:tabular-nums; }
.pais__seta{ width:12px; height:12px; flex:none; color:var(--ink-2); }
.paises{ position:absolute; left:0; right:0; top:calc(100% + var(--s-1)); z-index:var(--z-raised); display:grid; grid-template-rows:auto minmax(0,1fr); gap:var(--s-2); max-height:min(320px, 50vh); padding:var(--s-2); border:1px solid var(--rule-2); border-radius:var(--r-campo); background:var(--paper-2); color:var(--ink); box-shadow:0 12px 32px rgba(var(--cine-rgb),.45); transition:opacity var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.paises:not(.aberta){ opacity:0; transform:translateY(4px); }
.paises__busca{ min-height:44px; width:100%; margin:0; padding:0 var(--s-3); border:1px solid var(--rule); border-radius:8px; background:var(--paper); color:var(--ink); font:inherit; font-size:var(--text-base); -webkit-appearance:none; appearance:none; }
.paises__busca::placeholder{ color:var(--ink-2); opacity:1; }
.paises__busca::-webkit-search-decoration,.paises__busca::-webkit-search-cancel-button{ -webkit-appearance:none; }
.paises__busca:focus-visible{ outline:2px solid var(--ink); outline-offset:1px; }
.paises__lista{ list-style:none; margin:0; padding:0; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.paises__item{ display:grid; grid-template-columns:26px minmax(0,1fr) auto; gap:var(--s-2); align-items:center; min-height:44px; padding:0 var(--s-2); border-radius:8px; color:var(--ink); font-size:var(--text-base); cursor:pointer; }
.paises__item > span:first-child{ text-align:center; font-size:20px; line-height:1; overflow:hidden; }
.paises__item > span:nth-child(2){ overflow-wrap:anywhere; }
.paises__item > span:last-child{ color:var(--ink-2); font-variant-numeric:tabular-nums; }
.paises__item.ativa,.paises__item[aria-selected="true"]{ background:var(--rule); }
.paises__item[aria-selected="true"]{ font-weight:500; }
@media (hover:hover){ .paises__item:hover{ background:var(--rule); } }
.paises__sep{ height:1px; margin:var(--s-2) var(--s-2); background:var(--rule); }
.paises__vazio{ margin:0; padding:var(--s-3) var(--s-2); color:var(--ink-2); font-size:var(--text-sm); }
/* 9d) validação na origem (Paulo, 09/09: "não pegar lead com dados mal preenchidos e perder o lead"): aviso curto sob o campo com a causa, sinal de OK dentro do campo (só transform/opacity),
   lista de domínios de e-mail reusa .paises (mesmo visual da lista de países) e "Você quis dizer …?" é um botão de 44 px. Só tokens --cine-*. */
.campo-wrap{ position:relative; min-width:0; }
.campo-wrap .campo,.tel .campo{ padding-right:calc(var(--s-4) + 28px); }
.portao .campo[aria-invalid="true"]{ border-color:var(--ink); }
.campo__ok{ position:absolute; right:var(--s-4); top:50%; width:20px; height:20px; color:var(--ink); opacity:0; transform:translateY(-50%) scale(.6); pointer-events:none; transition:opacity var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.campo-wrap.ok .campo__ok,.tel.ok .campo__ok{ opacity:1; transform:translateY(-50%) scale(1); }
.portao__aviso{ margin:0; font-size:var(--text-sm); line-height:1.4; color:var(--ink); overflow-wrap:anywhere; }
.quis{ display:inline-flex; align-items:center; min-height:44px; margin:0; padding:0; border:0; background:transparent; color:var(--ink); font:inherit; font-size:var(--text-sm); line-height:1.4; text-align:left; cursor:pointer; text-decoration:underline; text-decoration-color:var(--rule-2); text-underline-offset:.15em; overflow-wrap:anywhere; }
.quis b{ font-weight:600; }
.quis:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.paises--email{ grid-template-rows:minmax(0,1fr); }
.paises--email .paises__item{ grid-template-columns:minmax(0,1fr); }
.portao.realce .portao__form{ animation:portao-realce var(--dur-folha) var(--ease-out) 1; } /* só transform/opacity: o formulário "assenta" quando um wallpaper travado manda para cá (o .portao é display:contents; o alvo é o form) */
@keyframes portao-realce{ from{ opacity:.55; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.nb{ white-space:nowrap; } /* o nome próprio não quebra no hífen */
/* travas: o miolo do Universo fica hidden (nada copiável) e o portão entra no lugar; nos wallpapers o "Baixar" é um botão que rola até o portão e foca o Nome */
button.link{ border:0; background:transparent; cursor:pointer; }

/* 10) história — índice editorial, não carrossel */
.lista{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); border-top:1px solid var(--rule); }
.lista__estado{ padding:var(--s-8) 0; color:var(--ink-2); }
.lista__esq{ display:grid; grid-template-columns:112px minmax(0,1fr); gap:var(--s-4); padding:var(--s-5) 0; border-bottom:1px solid var(--rule); }
.lista__esq i{ display:block; background:var(--paper-3); border-radius:var(--r-foto); }
.lista__esq .esq-img{ aspect-ratio:16/10; }
.lista__esq .esq-l1{ height:12px; width:40%; margin-top:var(--s-2); }
.lista__esq .esq-l2{ height:18px; width:85%; margin-top:var(--s-3); }
.lista__esq .esq-l3{ height:12px; width:70%; margin-top:var(--s-3); }
.materia{ display:grid; grid-template-columns:112px minmax(0,1fr); gap:var(--s-4); padding:var(--s-5) 0; border-bottom:1px solid var(--rule); text-decoration:none; color:inherit; transition:transform var(--dur-short) var(--ease-out); }
.materia__img{ width:112px; aspect-ratio:16/10; object-fit:cover; border-radius:var(--r-foto); background:var(--paper-3); }
.materia__corpo{ display:grid; gap:var(--s-1); align-content:start; min-width:0; }
.materia__meta{ font-size:var(--text-xs); color:var(--ink-2); letter-spacing:.02em; }
.materia h3{ font-size:var(--text-md); line-height:1.2; letter-spacing:-.01em; }
.materia p{ color:var(--ink-2); font-size:var(--text-sm); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.materia__ler{ margin-top:var(--s-1); font-size:var(--text-xs); font-weight:500; color:var(--ink); }
.historia__pe{ margin-top:var(--s-6); }
@media (hover:hover){ .materia:hover{ transform:translateY(-2px); } }

/* 11) rodapé — só os dois links institucionais, centrados; igual ao rodapé da landing do marketing (Paulo, 09/09: "tira tudo lá, deixa ele clean") */
.rodape{ border-top:1px solid var(--rule); padding:var(--s-12) 0 calc(var(--s-8) + var(--inferior-h) + var(--sab)); font-size:var(--text-sm); color:var(--ink-2); text-align:center; } /* o fim do documento compensa a barra inferior fixa: os links ficam inteiros acima dela (C3) */
.rodape p{ margin:0; }
.rodape a{ display:inline-block; padding:calc((44px - 1lh) / 2) var(--s-1); color:var(--ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em; white-space:nowrap; } /* alvo de 44 px de altura; o separador " · " fica fora do link */
.rodape a:active{ text-decoration-color:var(--rule-2); }
@media (hover:hover){ .rodape a:hover{ text-decoration-color:var(--rule-2); } }

/* 12) barra inferior (celular) — a ação sempre à mão, safe-area de verdade */
.inferior{ position:fixed; left:0; right:0; bottom:0; z-index:var(--z-sticky); display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:var(--s-4); padding:var(--s-3) var(--gutter) calc(var(--s-3) + var(--sab)); background:var(--paper); border-top:1px solid var(--rule); }
.inferior__rotulo{ display:grid; line-height:1.25; }
.inferior__rotulo small{ font-size:var(--text-xs); color:var(--ink-2); }
.inferior__rotulo b{ font-weight:500; font-size:var(--text-sm); white-space:nowrap; }
.inferior .btn{ min-height:48px; padding-inline:var(--s-6); }

/* 13) movimento — 4 primitivas (ver o cabeçalho): tudo em transform/opacity, easing e duração nos tokens; o bloco 13.4 colapsa cada uma em reduced-motion */
/* 13.1 hero: entrada única (logo → pergunta → data → CTA) e o poster que se dissolve no vídeo quando o "playing" dispara */
.entra{ opacity:0; transform:translateY(12px); animation:entra var(--dur-revela) var(--ease-out) forwards; animation-delay:calc(var(--i,0) * 90ms); }
@keyframes entra{ to{ opacity:1; transform:none; } }
.hero--espera .hero__poster{ opacity:1; visibility:visible; }
.hero--toca .hero__poster{ opacity:0; visibility:hidden; transition:opacity var(--dur-revela) var(--ease-out), visibility 0s linear var(--dur-revela); }
/* 13.2 revelação única por seção: html.mov (head) esconde o bloco; .visto (IntersectionObserver, uma vez) revela. Sem JS ou em reduced-motion nada fica escondido */
[data-reveal]{ transition:opacity var(--dur-revela) var(--ease-out), transform var(--dur-revela) var(--ease-out); }
html.mov [data-reveal]:not(.visto){ opacity:0; transform:translateY(16px); }
/* 13.3 o portão de cadastro: realce único em transform + opacity — bloco 9b; o leque entra 24 px → 0 + opacity, escalonado 0/80/160 ms (mesmos tokens da revelação) */
.universo--trava .amostras li{ transition:opacity var(--dur-revela) var(--ease-out), transform var(--dur-revela) var(--ease-out); transition-delay:calc(var(--i,0) * 80ms); }
html.mov [data-reveal]:not(.visto) .amostras li{ opacity:0; --leque-y:24px; }
/* 13.4 reduced-motion: a entrada do hero vira opacity 150 ms; revelações, portão e poster ficam parados e visíveis */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:150ms !important; animation-iteration-count:1 !important; transition-duration:0s !important; }
  .entra{ transform:none; animation:entra-so 150ms linear forwards; animation-delay:0s; }
  @keyframes entra-so{ to{ opacity:1; } }
  .topo,.folha,.btn,.obra figure,.materia,.hero__poster{ transition:none; }
  .portao.realce .portao__form{ animation:none; }
  .universo--trava .amostras li{ transition:none; }
  [data-reveal]{ opacity:1 !important; transform:none !important; animation:none !important; transition:none !important; }
}

/* 14) larguras — 40 rem: tablet · 64 rem: desktop (faixa, links na barra, hero maior, duas colunas, sem barra inferior) */
@media (min-width:40rem){
  .teasers__grade{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .razao > div{ grid-template-columns:9rem minmax(0,1fr); gap:var(--s-6); }
  .campo{ min-height:5.5lh; }
  .lista{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--s-10); }
  .materia{ grid-template-columns:144px minmax(0,1fr); }
  .materia__img{ width:144px; }
  .lista__esq{ grid-template-columns:144px minmax(0,1fr); }
}
@media (min-width:64rem){
  main{ padding-bottom:0; }
  .faixa{ display:block; position:relative; }
  .topo.recolhida{ transform:translateY(calc(-1 * var(--faixa-h))); }
  .barra__links{ display:flex; gap:var(--s-8); }
  .barra__acessar,.barra__assinar{ display:inline-flex; }
  .barra__menu,.folha,.inferior{ display:none; }
  .barra__in{ gap:var(--s-8); }
  .barra__direita{ gap:var(--s-6); }
  .lado__op span{ padding:0 var(--s-4); }
  .marca img{ width:112px; }
  .hero{ min-height:85svh; }
  .hero__in{ gap:var(--s-5); padding-bottom:var(--s-16); }
  .hero__logo{ width:min(var(--logo-max), 360px); }
  .hero__estreia{ display:block; }
  .hero__cta{ display:inline-flex; margin-top:var(--s-2); }
  .sec{ padding:var(--s-24) 0; }
  .sec__cabeca{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:end; gap:var(--s-8); margin-bottom:var(--s-10); }
  .sec__lede,.sec__frase{ justify-self:end; text-align:left; }
  .sec__cabeca--centro,.sec__cabeca--pilha{ grid-template-columns:minmax(0,1fr); }
  .sec__cabeca--centro .sec__frase{ justify-self:center; text-align:center; }
  .sec__cabeca--pilha .sec__lede{ justify-self:start; }
  .sinopse__grade{ grid-template-columns:minmax(0,1fr) minmax(0,min(var(--foto-max),55%)); gap:var(--s-12); } /* a foto respeita o teto de resolução E 55% da largura: em tela 1× o teto é 1024 px e deixava 130 px para o texto (Chrome, 09/09) */
  .sinopse__foto{ order:0; justify-self:end; }
  .sinopse__corpo{ font-size:var(--text-xl); }
  .razao{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); grid-template-rows:auto auto auto auto minmax(0,1fr); column-gap:var(--s-16); align-items:start; } /* o quadro ocupa a coluna da direita inteira; a 5ª linha (1fr) absorve a altura que sobra */
  .razao > .razao__quadro{ grid-column:2; grid-row:1 / -1; grid-template-columns:minmax(0,1fr); border-bottom:0; } /* rótulo em cima, canvas na largura da coluna; sem filete próprio */
  .quadro{ justify-items:stretch; }
  .sec.universo--trava{ padding:var(--s-20) 0; }
  .universo--trava .universo__in{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); grid-template-rows:minmax(0,1fr) auto auto auto minmax(0,1fr); grid-template-areas:"leque ." "leque eyebrow" "leque texto" "leque form" "leque ."; column-gap:var(--s-12); align-items:center; } /* as duas linhas 1fr somem quando a chamada é mais alta que o leque; se o leque é mais alto, centram a chamada */
  .universo--trava .amostras{ margin:0; padding:var(--s-8) 0 var(--s-10); }
  .universo--trava .amostras li{ width:clamp(220px, 46%, 360px); }
  .universo--trava .amostras li:nth-child(1){ --rot:-6deg; --tx:-38%; --ty:4%; }
  .universo--trava .amostras li:nth-child(3){ --rot:6deg; --tx:38%; --ty:4%; }
  .portao__form{ align-self:start; }
  .galeria{ grid-template-columns:repeat(5,minmax(0,1fr)); }
  .lista{ column-gap:var(--s-16); }
  .rodape{ padding-bottom:var(--s-10); }
}
@media (max-width:22rem){ .marca img{ width:72px; } .lado__op span{ padding-inline:var(--s-2); } }