/* =========================================================
   Páginas de venda (OrusApp e NexaCast).
   Linguagem visual: cinema (cenas, ingressos, faixa de letreiro, grão de filme).
   Cores, fontes e detalhes de cada marca vêm de marca.css.
   HTML + CSS + JS puros, sem framework.
   ========================================================= */
:root {
  --max: 1240px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; -webkit-text-size-adjust: 100%;
  scrollbar-width: thin; scrollbar-color: var(--c-destaque) var(--c-fundo2); }
body { margin: 0; background: var(--c-fundo); color: var(--c-texto); font: 400 1.0625rem/1.7 var(--f-corpo);
  -webkit-font-smoothing: antialiased; overflow-x: hidden; position: relative; }
/* grão de filme: textura fixa, bem discreta */
body::after { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
.wrap { width: min(100% - 40px, var(--max)); margin-inline: auto; }
.somente-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* barra de rolagem personalizada */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--c-fundo2); }
::-webkit-scrollbar-thumb { background: var(--c-destaque); border-radius: 999px; border: 3px solid var(--c-fundo2); }
::-webkit-scrollbar-thumb:hover { background: var(--c-destaque2); }
::selection { background: var(--c-destaque); color: var(--c-sobre); }
:focus-visible { outline: 3px solid var(--c-destaque2); outline-offset: 3px; border-radius: 6px; }
.pular { position: absolute; left: -999px; top: 8px; background: var(--c-destaque); color: var(--c-sobre); padding: 10px 16px; border-radius: 8px; z-index: 200; font-weight: 700; }
.pular:focus { left: 12px; }

/* progresso da leitura: fita de filme no topo */
.progresso { position: fixed; inset: 0 auto auto 0; height: 4px; width: 0; z-index: 120; background: var(--c-destaque); }

/* ---------- tipografia ---------- */
.legenda { font: 600 .78rem var(--f-corpo); letter-spacing: .2em; text-transform: uppercase; color: var(--c-destaque); display: flex; align-items: center; gap: 14px; }
.legenda::before { content: ""; width: 38px; height: 2px; background: currentColor; flex: none; }
.titulo { font-family: var(--f-titulo); font-weight: var(--peso-titulo); font-stretch: var(--esticado); line-height: 1; letter-spacing: var(--espaco-titulo); }
.titulo-2 { font-size: clamp(2.3rem, 5.6vw, 4.6rem); }
.titulo em, .grifo { font-style: var(--estilo-enfase); color: var(--c-destaque); }
.texto-suave { color: var(--c-suave); }
.cena { display: inline-flex; align-items: center; gap: 12px; font: 700 .78rem var(--f-corpo); letter-spacing: .22em; text-transform: uppercase; color: var(--c-destaque); }
.cena b { display: inline-grid; place-items: center; min-width: 44px; height: 26px; padding: 0 8px; border: 1.5px solid currentColor; border-radius: 4px; font-weight: 800; letter-spacing: .06em; }

/* ---------- anúncio e topo ---------- */
.aviso-topo { background: var(--c-destaque); color: var(--c-sobre); text-align: center; font: 600 .85rem/1.35 var(--f-corpo); padding: 10px 16px; }
.aviso-topo a { font-weight: 800; text-underline-offset: 3px; }
.topo { position: sticky; top: 0; z-index: 80; transition: background .3s, box-shadow .3s; }
.topo.rolou { background: color-mix(in srgb, var(--c-fundo) 88%, transparent); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--c-linha); }
.topo .wrap { display: flex; align-items: center; justify-content: space-between; gap: 18px; height: 74px; }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo img { height: 38px; width: auto; }
.nome { font: var(--peso-logo) 1.4rem/1 var(--f-logo); letter-spacing: -.02em; }
.nome b { font-weight: 300; color: var(--c-destaque); }
.menu { display: none; gap: 30px; font-size: .95rem; }
.menu a { text-decoration: none; color: var(--c-suave); position: relative; padding: 6px 0; }
.menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--c-destaque); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.menu a:hover { color: var(--c-texto); }
.menu a:hover::after { transform: scaleX(1); }
@media (min-width: 920px) { .menu { display: flex; } }

/* ---------- botão do WhatsApp (glifo oficial) ---------- */
.zap { --verde: #25D366; position: relative; display: inline-flex; align-items: center; gap: 14px; padding: 8px 26px 8px 8px; min-height: 62px;
  border-radius: 18px; background: var(--verde); color: #04260f; text-decoration: none; font: 800 1.04rem/1.15 var(--f-corpo);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .14), 0 14px 32px -14px rgba(37, 211, 102, .8); overflow: hidden; isolation: isolate;
  transition: transform .25s var(--ease), box-shadow .25s; }
.zap::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%); transform: translateX(-120%); }
.zap:hover { transform: translateY(-3px); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .14), 0 20px 38px -14px rgba(37, 211, 102, .95); }
.zap:hover::after { transform: translateX(120%); transition: transform .7s var(--ease); }
.zap:active { transform: translateY(0); }
.zap-ico { width: 46px; height: 46px; border-radius: 13px; background: #fff; display: grid; place-items: center; flex: none; }
.zap-ico svg { width: 28px; height: 28px; fill: #1DA851; }
.zap-txt { display: grid; text-align: left; }
.zap-txt small { font: 600 .74rem var(--f-corpo); opacity: .8; margin-top: 2px; }
.zap-mini { min-height: 46px; padding: 5px 18px 5px 5px; gap: 10px; font-size: .92rem; border-radius: 14px; }
.zap-mini .zap-ico { width: 36px; height: 36px; border-radius: 10px; }
.zap-mini .zap-ico svg { width: 22px; height: 22px; }
.zap-grande { min-height: 74px; padding-right: 34px; font-size: 1.2rem; }
.zap-grande .zap-ico { width: 56px; height: 56px; }
.zap-grande .zap-ico svg { width: 34px; height: 34px; }
.zap-bloco { width: 100%; justify-content: center; }
.zap-fab { position: fixed; right: 18px; bottom: 18px; z-index: 85; display: flex; align-items: center; gap: 10px; text-decoration: none; }
.zap-fab .bola { width: 64px; height: 64px; border-radius: 50%; background: #25D366; display: grid; place-items: center; position: relative; box-shadow: 0 14px 32px -8px rgba(37, 211, 102, .8); transition: transform .25s var(--ease); }
.zap-fab .bola::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25D366; animation: pulso 2.4s ease-out infinite; }
.zap-fab svg { width: 36px; height: 36px; fill: #fff; position: relative; }
.zap-fab .rotulo { background: #fff; color: #04260f; font: 800 .85rem var(--f-corpo); padding: 9px 14px; border-radius: 12px 12px 4px 12px; box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .6);
  max-width: 0; padding-inline: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width .45s var(--ease), padding .45s var(--ease), opacity .3s; }
.zap-fab:hover .rotulo, .zap-fab.mostra .rotulo { max-width: 220px; padding-inline: 14px; opacity: 1; }
.zap-fab:hover .bola { transform: scale(1.08) rotate(-6deg); }
@keyframes pulso { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.7); opacity: 0; } }

/* botões comuns */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 62px; padding: 0 28px; border-radius: 18px; text-decoration: none;
  font: 700 1rem var(--f-corpo); border: 1.5px solid var(--c-linha-forte); color: var(--c-texto); transition: transform .25s var(--ease), background .25s, border-color .25s; }
.btn svg { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.btn:hover { transform: translateY(-3px); border-color: var(--c-destaque); background: color-mix(in srgb, var(--c-destaque) 12%, transparent); }
.btn-solido { background: var(--c-destaque); color: var(--c-sobre); border-color: var(--c-destaque); }
.btn-solido:hover { background: var(--c-destaque); filter: brightness(1.08); }
.btn-pequeno { min-height: 46px; padding: 0 20px; font-size: .92rem; border-radius: 14px; }
.btn-bloco { width: 100%; }

/* ---------- abertura (hero) ---------- */
.abertura { position: relative; padding-block: clamp(40px, 7vw, 90px) 0; overflow: hidden; isolation: isolate; }
.abertura::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(520px circle at var(--mx, 70%) var(--my, 20%), var(--c-aura), transparent 70%); transition: background .1s; }
.feixe { position: absolute; top: -20%; left: 50%; width: 130%; height: 120%; transform: translateX(-50%); z-index: -1; opacity: .7;
  background: conic-gradient(from 180deg at 50% 0, transparent 160deg, var(--c-feixe) 175deg, transparent 190deg); filter: blur(30px); animation: respira 7s ease-in-out infinite alternate; }
@keyframes respira { from { opacity: .45; } to { opacity: .85; } }
.abertura-grade { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1000px) { .abertura-grade { grid-template-columns: 1.08fr 1fr; gap: 24px; } }
.marca-hero { display: flex; align-items: center; gap: 16px; margin-bottom: 30px; }
.marca-hero img { height: clamp(64px, 9vw, 96px); width: auto; filter: drop-shadow(0 8px 24px var(--c-brilho)); }
.marca-hero .nome { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.abertura h1 { font-size: clamp(2.9rem, 7.2vw, 6rem); margin: 22px 0 26px; }
.marca-hero.lockup img { height: clamp(104px, 14vw, 150px); }
.abertura h1 .p { display: inline-block; animation: sobe .95s var(--ease) both; animation-delay: calc(var(--i) * .1s + .15s); }
@keyframes sobe { from { transform: translateY(.7em) rotate(2.5deg); } to { transform: none; } }
.abertura h1 em { position: relative; white-space: nowrap; }
.abertura h1 em svg { position: absolute; left: -2%; bottom: -.14em; width: 104%; height: .3em; fill: none; stroke: var(--c-destaque2); stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 0; animation: risca 1.2s var(--ease) 1s both; }
@keyframes risca { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.abertura .sub { font-size: clamp(1.12rem, 2.2vw, 1.4rem); color: var(--c-suave); max-width: 34ch; line-height: 1.55; }
.acoes { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; align-items: center; }
.rodape-hero { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 34px; color: var(--c-suave); font-size: .92rem; }
.rodape-hero li { display: flex; align-items: center; gap: 8px; }
.rodape-hero li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c-destaque); }

/* palco com os aparelhos desenhados em CSS */
.palco { position: relative; padding: 24px 0 70px; perspective: 1400px; }
.palco-inclina { transform-style: preserve-3d; transition: transform .25s ease-out; will-change: transform; }
.tv { width: 100%; max-width: 640px; margin-inline: auto; }
.tv-tela { aspect-ratio: 16 / 9; border-radius: 12px; border: 7px solid #12131a; background: var(--c-fundo2); display: flex; overflow: hidden;
  box-shadow: 0 40px 80px -30px #000, 0 0 0 1px var(--c-linha-forte); }
.tv-pe { height: 14px; width: 24%; margin: 0 auto; background: linear-gradient(#1b1d27, #0b0c11); border-radius: 0 0 12px 12px; }
.m-rail { width: 13%; background: var(--c-superficie); display: flex; flex-direction: column; gap: 9%; padding: 10% 0; align-items: center; }
.m-rail i { width: 38%; aspect-ratio: 1; border-radius: 28%; background: var(--c-linha-forte); }
.m-rail i.on { background: var(--c-destaque); }
.m-conteudo { flex: 1; padding: 4% 4% 0; display: flex; flex-direction: column; gap: 5%; min-width: 0; }
.m-hero { height: 46%; border-radius: 8px; padding: 4% 5%; display: flex; flex-direction: column; justify-content: flex-end; gap: 5px;
  background: linear-gradient(110deg, var(--c-fundo2) 22%, transparent 80%), linear-gradient(135deg, var(--c-poster1), var(--c-poster2)); }
.m-hero small { font: 700 clamp(5px, .9vw, 8px) var(--f-corpo); color: var(--c-destaque2); letter-spacing: .1em; }
.m-hero b { font: var(--peso-logo) clamp(11px, 2.4vw, 21px) var(--f-logo); }
.m-hero span { display: flex; gap: 6px; }
.m-hero span::before, .m-hero span::after { content: ""; height: clamp(8px, 1.7vw, 15px); border-radius: 99px; background: var(--c-destaque); width: 24%; }
.m-hero span::after { background: rgba(255, 255, 255, .2); width: 18%; }
.m-fila { display: flex; gap: 3%; height: 24%; }
.m-fila u { flex: 1; border-radius: 5px; background: linear-gradient(160deg, var(--c-poster1), var(--c-poster2)); }
.m-fila u:nth-child(2n) { background: linear-gradient(160deg, var(--c-poster3), var(--c-poster1)); }
.m-fila u:nth-child(3n) { background: linear-gradient(160deg, var(--c-poster2), var(--c-poster3)); }
.m-fila u:nth-child(2) { outline: 2px solid var(--c-destaque); outline-offset: 1px; transform: scale(1.08); animation: foco 5s ease-in-out infinite; }
@keyframes foco { 0%, 100% { transform: scale(1.08); } 50% { transform: scale(1.14) translateY(-2px); } }
.fone { position: absolute; right: 1%; bottom: 0; width: 24%; min-width: 120px; max-width: 168px; aspect-ratio: 9 / 19; border-radius: 22px; border: 5px solid #12131a;
  background: var(--c-fundo2); box-shadow: 0 40px 70px -24px #000, 0 0 0 1px var(--c-linha-forte); overflow: hidden; transform: rotate(4deg) translateZ(60px);
  display: flex; flex-direction: column; gap: 6%; padding: 9% 8% 6%; animation: flutua 6s ease-in-out infinite; }
@keyframes flutua { 0%, 100% { transform: rotate(4deg) translateZ(60px) translateY(0); } 50% { transform: rotate(4deg) translateZ(60px) translateY(-10px); } }
.fone::before { content: ""; position: absolute; top: 2.5%; left: 50%; transform: translateX(-50%); width: 30%; height: 2.4%; border-radius: 9px; background: #12131a; }
.f-hero { height: 36%; border-radius: 9px; background: linear-gradient(160deg, var(--c-poster1), var(--c-poster2)); }
.f-chips { display: flex; gap: 4px; }
.f-chips i { height: 7px; flex: 1; border-radius: 9px; background: var(--c-linha-forte); }
.f-chips i:first-child { background: var(--c-destaque); }
.f-grade { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.f-grade u { border-radius: 4px; background: linear-gradient(160deg, var(--c-poster3), var(--c-poster1)); }
.f-grade u:nth-child(2n) { background: linear-gradient(160deg, var(--c-poster2), var(--c-poster3)); }

/* selo giratório: planos a partir de R$ 25 */
.selo-giro { position: absolute; left: 0; bottom: 2%; width: clamp(96px, 12vw, 136px); aspect-ratio: 1; z-index: 3; }
.selo-giro .disco { position: absolute; inset: 0; border-radius: 50%; background: var(--c-destaque); }
.selo-giro svg.anel { position: absolute; inset: 0; animation: gira 22s linear infinite; }
.selo-giro text { font: 800 12.5px var(--f-corpo); fill: var(--c-sobre); text-transform: uppercase; }
.selo-giro .centro { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: var(--c-sobre); font: var(--peso-titulo) clamp(1.5rem, 3vw, 2.1rem)/1 var(--f-titulo); font-stretch: var(--esticado); transform: rotate(-8deg); }
.selo-giro .centro small { display: block; font: 800 .52em var(--f-corpo); letter-spacing: .08em; }
@keyframes gira { to { transform: rotate(360deg); } }

/* ---------- letreiro (faixa que corre) ---------- */
.letreiro { border-block: 1.5px solid var(--c-linha-forte); background: var(--c-fundo2); overflow: hidden; padding: 16px 0; transform: rotate(-1.1deg) scale(1.03); margin-top: -8px; position: relative; z-index: 2; }
.letreiro-trilho { display: flex; width: max-content; animation: corre 34s linear infinite; }
.letreiro:hover .letreiro-trilho { animation-play-state: paused; }
.letreiro span { font: var(--peso-titulo) clamp(1.5rem, 3.4vw, 2.5rem)/1 var(--f-titulo); font-stretch: var(--esticado); text-transform: uppercase; padding-inline: 22px; white-space: nowrap; color: var(--c-texto); }
.letreiro span.o { color: transparent; -webkit-text-stroke: 1.5px var(--c-destaque); }
.letreiro i { color: var(--c-destaque); font-style: normal; align-self: center; font-size: 1.1rem; }
@keyframes corre { to { transform: translateX(-50%); } }

/* ---------- seções ---------- */
section { position: relative; }
.secao { padding-block: clamp(80px, 12vw, 160px); }
.cabeca { max-width: 820px; margin-bottom: clamp(40px, 6vw, 72px); }
.cabeca .titulo { margin-top: 20px; }
.cabeca p { margin-top: 22px; color: var(--c-suave); font-size: 1.15rem; max-width: 56ch; }

/* declaração: o texto se acende conforme a rolagem */
.declaracao .titulo { font-size: clamp(1.9rem, 4.6vw, 3.9rem); line-height: 1.12; letter-spacing: -.02em; max-width: 24ch; }
.declaracao .titulo span { color: color-mix(in srgb, var(--c-texto) 22%, transparent); transition: color .35s; }
.declaracao .titulo span.acesa { color: var(--c-texto); }
.declaracao .titulo span.acesa.d { color: var(--c-destaque); }
.js-off .declaracao .titulo span { color: var(--c-texto); }

/* cenas: filmes, séries e ao vivo (linhas alternadas, sem grade de cartões) */
.cenas-lista { display: grid; gap: clamp(70px, 10vw, 140px); }
.cena-linha { display: grid; gap: 34px; align-items: center; }
@media (min-width: 940px) {
  .cena-linha { grid-template-columns: 1fr 1.05fr; gap: 70px; }
  .cena-linha:nth-child(even) .cena-texto { order: 2; }
}
.cena-texto h3 { font-size: clamp(2.1rem, 4.4vw, 3.5rem); margin: 18px 0 18px; }
.cena-texto p { color: var(--c-suave); font-size: 1.12rem; max-width: 42ch; }
.cena-texto ul { margin-top: 22px; display: grid; gap: 10px; color: var(--c-suave); }
.cena-texto li { display: flex; gap: 12px; align-items: baseline; }
.cena-texto li::before { content: "—"; color: var(--c-destaque); }
.janela { border-radius: 18px; border: 1.5px solid var(--c-linha-forte); background: var(--c-fundo2); box-shadow: 0 50px 90px -40px #000; overflow: hidden; }
.janela-barra { display: flex; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--c-linha); background: var(--c-superficie); }
.janela-barra i { width: 10px; height: 10px; border-radius: 50%; background: var(--c-linha-forte); }
.janela-corpo { padding: clamp(16px, 3vw, 28px); }
.ui-cartazes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.ui-cartazes div { aspect-ratio: 2 / 3; border-radius: 8px; padding: 8px; display: flex; align-items: flex-end; font: 700 clamp(7px, 1vw, 10px) var(--f-corpo); line-height: 1.15;
  background: linear-gradient(170deg, transparent 40%, rgba(0, 0, 0, .65)), linear-gradient(150deg, var(--c-poster1), var(--c-poster2)); transition: transform .3s var(--ease); }
.ui-cartazes div:nth-child(2n) { background: linear-gradient(170deg, transparent 40%, rgba(0, 0, 0, .65)), linear-gradient(150deg, var(--c-poster3), var(--c-poster1)); }
.ui-cartazes div:nth-child(3n) { background: linear-gradient(170deg, transparent 40%, rgba(0, 0, 0, .65)), linear-gradient(150deg, var(--c-poster2), var(--c-poster3)); }
.ui-cartazes div.foco { outline: 2px solid var(--c-destaque); outline-offset: 2px; transform: translateY(-8px) scale(1.06); }
.ui-info { margin-top: 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--c-linha); }
.ui-info b { font: var(--peso-logo) 1.1rem var(--f-logo); }
.ui-info span { color: var(--c-suave); font-size: .8rem; }
.ui-info .ui-play { color: var(--c-sobre); font-size: .8rem; }
.ui-play { height: 36px; padding: 0 20px; display: inline-flex; align-items: center; border-radius: 99px; background: var(--c-destaque); color: var(--c-sobre); font: 800 .8rem var(--f-corpo); }
.ui-chips { display: flex; gap: 8px; margin-bottom: 18px; }
.ui-chips span { padding: 6px 14px; border-radius: 99px; background: var(--c-superficie); font-size: .78rem; color: var(--c-suave); }
.ui-chips span.on { background: var(--c-destaque); color: var(--c-sobre); font-weight: 700; }
.ui-ep { display: grid; grid-template-columns: 84px 1fr; gap: 14px; padding: 12px; border-radius: 12px; background: var(--c-superficie); align-items: center; }
.ui-ep + .ui-ep { margin-top: 10px; }
.ui-ep .mini { aspect-ratio: 16 / 9; border-radius: 6px; background: linear-gradient(135deg, var(--c-poster1), var(--c-poster2)); position: relative; }
.ui-ep .mini::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--c-destaque); width: var(--v, 0%); border-radius: 0 0 6px 6px; }
.ui-ep b { display: block; font-size: .9rem; }
.ui-ep span { font-size: .76rem; color: var(--c-suave); }
.ui-ep.ok span { color: var(--c-destaque); }
.ui-canal { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; padding: 12px; border-radius: 12px; background: var(--c-superficie); }
.ui-canal + .ui-canal { margin-top: 10px; }
.ui-canal .logo-c { width: 56px; aspect-ratio: 1; border-radius: 10px; display: grid; place-items: center; font: 800 1rem var(--f-corpo); background: linear-gradient(135deg, var(--c-poster3), var(--c-poster2)); }
.ui-canal b { font-size: .9rem; display: flex; gap: 8px; align-items: center; }
.ui-canal em { font: 800 .6rem var(--f-corpo); font-style: normal; background: #e5372d; padding: 2px 6px; border-radius: 4px; letter-spacing: .06em; animation: ao-vivo 1.6s ease-in-out infinite; }
@keyframes ao-vivo { 50% { opacity: .55; } }
.ui-canal span { font-size: .76rem; color: var(--c-suave); display: block; margin: 2px 0 6px; }
.ui-canal .bar { height: 4px; border-radius: 4px; background: var(--c-linha); }
.ui-canal .bar::after { content: ""; display: block; height: 100%; width: var(--v, 50%); background: var(--c-destaque2); border-radius: 4px; }

/* telas: seletor de aparelhos */
.telas-fundo { background: var(--c-fundo2); }
.abas { display: none; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.js .abas { display: flex; }
.painel + .painel { border-top: 1.5px solid var(--c-linha-forte); margin-top: 20px; padding-top: 40px; }
.js .painel + .painel { border: 0; margin: 0; padding-top: 20px; }
.aba { padding: 14px 24px; border-radius: 99px; border: 1.5px solid var(--c-linha-forte); font: 700 .98rem var(--f-corpo); color: var(--c-suave); transition: all .25s var(--ease); }
.aba:hover { color: var(--c-texto); border-color: var(--c-destaque); }
.aba[aria-selected="true"] { background: var(--c-destaque); border-color: var(--c-destaque); color: var(--c-sobre); }
.painel { display: grid; gap: 36px; align-items: center; padding-block: 20px; }
@media (min-width: 900px) { .painel { grid-template-columns: 1.1fr 1fr; gap: 60px; } }
.js .painel[hidden] { display: none; }
.js .painel:not([hidden]) { animation: troca .55s var(--ease); }
@keyframes troca { from { transform: translateY(18px); } to { transform: none; } }
.painel h3 { font-size: clamp(2rem, 4vw, 3rem); margin: 16px 0 14px; }
.painel p { color: var(--c-suave); font-size: 1.1rem; max-width: 44ch; }
.painel ul { margin: 22px 0 28px; display: grid; gap: 8px; color: var(--c-suave); }
.painel li { display: flex; gap: 12px; }
.painel li::before { content: "✓"; color: var(--c-destaque); font-weight: 800; }
.arte { min-height: 280px; display: grid; place-items: center; position: relative; }
.arte .tv, .arte .fone { position: relative; }
.arte .fone { right: auto; bottom: auto; transform: rotate(-3deg); animation: none; width: min(48vw, 200px); max-width: none; }
.arte .tv { max-width: 560px; }
.projetor { position: relative; width: 100%; max-width: 560px; aspect-ratio: 16 / 10; }
.projetor .corpo { position: absolute; left: 2%; top: 46%; width: 24%; aspect-ratio: 2.2; border-radius: 14px; background: linear-gradient(#262938, #12131a); box-shadow: 0 20px 40px -14px #000, 0 0 0 1px var(--c-linha-forte); }
.projetor .corpo::after { content: ""; position: absolute; right: 12%; top: 50%; width: 26%; aspect-ratio: 1; border-radius: 50%; transform: translateY(-50%); background: radial-gradient(circle, #fff, var(--c-destaque2) 45%, #12131a 70%); box-shadow: 0 0 22px var(--c-destaque2); }
.projetor .luz { position: absolute; left: 24%; top: 12%; width: 74%; height: 76%; clip-path: polygon(0 47%, 100% 0, 100% 100%, 0 53%); background: linear-gradient(90deg, color-mix(in srgb, var(--c-destaque2) 45%, transparent), color-mix(in srgb, var(--c-destaque2) 8%, transparent)); animation: respira 4s ease-in-out infinite alternate; }
.projetor .imagem { position: absolute; right: 0; top: 8%; width: 46%; aspect-ratio: 16 / 9; border-radius: 6px; border: 3px solid rgba(255, 255, 255, .15); overflow: hidden; display: flex; }
.projetor .imagem .m-conteudo { padding: 6% 6% 0; }
.caixa-streaming { position: relative; width: min(100%, 460px); aspect-ratio: 16 / 10; display: grid; place-items: center; }
.caixa-streaming .tv { max-width: 100%; }
.caixa-streaming .box { position: absolute; right: 2%; bottom: 2%; width: 30%; aspect-ratio: 3; border-radius: 12px; background: linear-gradient(#2a2d3d, #14151d); box-shadow: 0 20px 40px -14px #000, 0 0 0 1px var(--c-linha-forte); display: flex; align-items: center; justify-content: flex-end; padding-right: 8%; transform: translateZ(40px); }
.caixa-streaming .box::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c-destaque2); box-shadow: 0 0 10px var(--c-destaque2); animation: ao-vivo 2s infinite; }
.etiqueta-sob { display: inline-block; margin-left: 10px; padding: 3px 10px; border-radius: 99px; background: color-mix(in srgb, var(--c-destaque) 18%, transparent); color: var(--c-destaque); font: 700 .7rem var(--f-corpo); letter-spacing: .08em; text-transform: uppercase; vertical-align: middle; }

/* ---------- bilheteria (planos como ingressos) ---------- */
.bilheteria { background: var(--c-papel); color: var(--c-tinta); }
.bilheteria .legenda, .bilheteria .grifo, .bilheteria .titulo em { color: var(--c-destaque-papel); }
.bilheteria .cabeca p { color: color-mix(in srgb, var(--c-tinta) 74%, transparent); }
.ingressos { display: grid; gap: 28px; align-items: start; }
@media (min-width: 940px) { .ingressos { grid-template-columns: 1fr 1.12fr 1fr; align-items: center; } }
.ingresso { position: relative; background: var(--c-fundo); color: var(--c-texto); border-radius: 18px; padding: 30px 28px 28px;
  box-shadow: 0 30px 50px -28px rgba(0, 0, 0, .55); transition: transform .35s var(--ease); }
.ingresso:hover { transform: translateY(-8px) rotate(-.6deg); }
.ingresso.principal { background: var(--c-fundo); outline: 3px solid var(--c-destaque); outline-offset: 5px; }
.ing-topo { display: flex; justify-content: space-between; align-items: center; font: 800 .68rem var(--f-corpo); letter-spacing: .22em; text-transform: uppercase; color: var(--c-destaque); }
.ing-topo span:last-child { color: var(--c-suave); }
.ingresso h3 { font-size: 1.9rem; margin: 20px 0 6px; }
.ing-valor { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; color: var(--c-suave); font-size: .9rem; }
.ing-valor b { font: var(--peso-titulo) clamp(3.2rem, 6vw, 4.4rem)/.9 var(--f-titulo); font-stretch: var(--esticado); color: var(--c-texto); letter-spacing: -.03em; }
.ing-valor b.menor { font-size: 2.3rem; }
.ing-lista { display: grid; gap: 11px; color: var(--c-suave); font-size: .96rem; }
.ing-lista li { display: flex; gap: 11px; }
.ing-lista li::before { content: "✓"; color: var(--c-destaque); font-weight: 800; }
.corte { position: relative; margin: 26px -28px 24px; border-top: 2px dashed var(--c-linha-forte); }
.corte::before, .corte::after { content: ""; position: absolute; top: -14px; width: 26px; height: 26px; border-radius: 50%; background: var(--c-papel); }
.corte::before { left: -13px; }
.corte::after { right: -13px; }
.ing-rodape { display: flex; justify-content: space-between; margin-top: 16px; font: 600 .66rem var(--f-corpo); letter-spacing: .2em; color: var(--c-suave); text-transform: uppercase; }
.barras { height: 26px; margin-top: 12px; opacity: .55; background: repeating-linear-gradient(90deg, var(--c-texto) 0 2px, transparent 2px 5px, var(--c-texto) 5px 6px, transparent 6px 10px, var(--c-texto) 10px 13px, transparent 13px 16px); }
.nota-bilheteria { margin-top: 34px; font-size: .9rem; color: color-mix(in srgb, var(--c-tinta) 66%, transparent); text-align: center; }

/* ---------- roteiro (passos) ---------- */
.roteiro-grade { display: grid; gap: 40px; position: relative; counter-reset: p; }
@media (min-width: 900px) { .roteiro-grade { grid-template-columns: repeat(3, 1fr); gap: 56px; } .roteiro-grade::before { content: ""; position: absolute; left: 3%; right: 3%; top: 31px; height: 2px; background: repeating-linear-gradient(90deg, var(--c-linha-forte) 0 10px, transparent 10px 20px); } }
.passo { counter-increment: p; position: relative; }
.passo::before { content: counter(p); display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--c-fundo); border: 2px solid var(--c-destaque);
  font: var(--peso-titulo) 1.7rem var(--f-titulo); font-stretch: var(--esticado); color: var(--c-destaque); margin-bottom: 24px; position: relative; z-index: 1; }
.passo h3 { font-size: 1.5rem; margin-bottom: 10px; font-family: var(--f-titulo); font-weight: var(--peso-titulo); font-stretch: var(--esticado); letter-spacing: var(--espaco-titulo); }
.passo p { color: var(--c-suave); max-width: 32ch; }

/* ---------- download ---------- */
.baixar { background: var(--c-fundo2); }
.apks { display: grid; gap: 22px; }
@media (min-width: 820px) { .apks { grid-template-columns: repeat(2, 1fr); } }
.apk { padding: 32px; border-radius: 22px; background: var(--c-superficie); border: 1.5px solid var(--c-linha-forte); display: flex; flex-direction: column; gap: 18px; position: relative; }
.apk.sugerido { border-color: var(--c-destaque); }
.apk.sugerido::before { content: "recomendado para este aparelho"; position: absolute; top: -12px; left: 24px; background: var(--c-destaque); color: var(--c-sobre); font: 800 .68rem var(--f-corpo); letter-spacing: .1em; text-transform: uppercase; padding: 4px 12px; border-radius: 99px; }
.apk header { display: flex; align-items: center; gap: 18px; }
.apk header svg { width: 56px; height: 56px; flex: none; stroke: var(--c-destaque2); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.apk h3 { font: var(--peso-titulo) 1.6rem var(--f-titulo); font-stretch: var(--esticado); letter-spacing: var(--espaco-titulo); }
.apk .meta { color: var(--c-suave); font-size: .94rem; }
.dados { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: .86rem; color: var(--c-suave); }
.dados dt { color: var(--c-texto); font-weight: 700; }
.dados dd { word-break: break-all; font: .78rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.link-direto { padding: 13px 15px; border-radius: 12px; background: var(--c-fundo2); border: 1px dashed var(--c-linha-forte); font: .8rem ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--c-suave); word-break: break-all; }
.aviso-caixa { margin-top: 26px; padding: 18px 22px; border-radius: 14px; border-left: 4px solid var(--c-destaque); background: color-mix(in srgb, var(--c-destaque) 8%, transparent); color: var(--c-suave); font-size: .95rem; }
.aviso-caixa strong { color: var(--c-texto); }
details { border-bottom: 1.5px solid var(--c-linha-forte); }
summary { list-style: none; cursor: pointer; padding: 24px 6px; display: flex; justify-content: space-between; align-items: center; gap: 20px; font: var(--peso-titulo) clamp(1.15rem, 2.4vw, 1.5rem)/1.25 var(--f-titulo); font-stretch: var(--esticado); letter-spacing: var(--espaco-titulo); transition: color .2s; }
summary:hover { color: var(--c-destaque); }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; flex: none; width: 22px; height: 22px; background: linear-gradient(var(--c-destaque), var(--c-destaque)) center / 100% 2px no-repeat, linear-gradient(var(--c-destaque), var(--c-destaque)) center / 2px 100% no-repeat; transition: transform .35s var(--ease); }
details[open] summary::after { transform: rotate(135deg); }
details .corpo { padding: 0 6px 28px; color: var(--c-suave); max-width: 70ch; animation: abre .4s var(--ease); }
@keyframes abre { from { transform: translateY(-8px); } to { transform: none; } }
details .corpo ol { margin: 0; padding-left: 22px; display: grid; gap: 10px; }
details .corpo p + p { margin-top: 12px; }
details .corpo strong { color: var(--c-texto); }
details .corpo code { background: var(--c-superficie); padding: 2px 8px; border-radius: 6px; font-size: .88em; }
.faq-lista { max-width: 920px; counter-reset: q; }
.faq-lista summary::before { counter-increment: q; content: counter(q, decimal-leading-zero); font: 700 .8rem var(--f-corpo); color: var(--c-destaque); letter-spacing: .1em; margin-right: 8px; flex: none; }
.faq-lista summary { justify-content: flex-start; }
.faq-lista summary::after { margin-left: auto; }

/* ---------- fechamento ---------- */
.fechamento { text-align: center; overflow: hidden; isolation: isolate; }
.fechamento::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(700px 380px at 50% 100%, var(--c-aura), transparent 70%); }
.fechamento h2 { font-size: clamp(2.8rem, 9vw, 7.4rem); max-width: 12ch; margin-inline: auto; }
.fechamento p { color: var(--c-suave); margin: 24px auto 0; max-width: 46ch; font-size: 1.18rem; }
.fechamento .acoes { justify-content: center; }

/* ---------- rodapé ---------- */
.rodape { border-top: 1.5px solid var(--c-linha-forte); background: var(--c-fundo2); padding: 64px 0 44px; }
.rodape-grade { display: grid; gap: 40px; }
@media (min-width: 860px) { .rodape-grade { grid-template-columns: 1.5fr 1fr 1fr; } }
.rodape h4 { font: 700 .74rem var(--f-corpo); letter-spacing: .2em; text-transform: uppercase; color: var(--c-suave); margin-bottom: 16px; }
.rodape li + li { margin-top: 9px; }
.rodape a { text-decoration: none; }
.rodape a:hover { color: var(--c-destaque); }
.rodape .sobre { color: var(--c-suave); font-size: .96rem; max-width: 38ch; margin-top: 18px; }
.rodape .logo-grande { height: 74px; width: auto; margin-bottom: 4px; }
.dev { display: inline-flex; align-items: center; gap: 14px; margin-top: 26px; color: var(--c-suave); font-size: .86rem; text-decoration: none; }
.dev img { height: 36px; width: auto; }
.miudo { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--c-linha); font-size: .7rem; line-height: 1.55; color: color-mix(in srgb, var(--c-suave) 78%, transparent); max-width: 104ch; }
.miudo + .miudo { margin-top: 10px; padding-top: 0; border: 0; }

.tag { display: inline-block; padding: 3px 10px; border-radius: 99px; background: color-mix(in srgb, var(--c-destaque) 18%, transparent); color: var(--c-destaque); font: 700 .7rem var(--f-corpo); letter-spacing: .08em; text-transform: uppercase; }

/* em cartaz: informativo da versão */
.cartaz-grade { display: grid; gap: 44px; align-items: start; }
@media (min-width: 940px) { .cartaz-grade { grid-template-columns: 1fr 1fr; gap: 90px; } }
.cartaz-grade .titulo { font-size: clamp(2.2rem, 4.8vw, 3.9rem); margin: 20px 0; }
.cartaz-grade p { color: var(--c-suave); max-width: 46ch; font-size: 1.1rem; }
.cartaz-lista li { display: grid; grid-template-columns: 44px 1fr; gap: 18px; align-items: center; padding: 22px 0; border-top: 1.5px solid var(--c-linha-forte); }
.cartaz-lista li:last-child { border-bottom: 1.5px solid var(--c-linha-forte); }
.cartaz-lista svg { width: 34px; height: 34px; stroke: var(--c-destaque2); }
.cartaz-lista b { display: block; font: var(--peso-titulo) 1.25rem/1.2 var(--f-titulo); letter-spacing: var(--espaco-titulo); }
.cartaz-lista span { color: var(--c-suave); font-size: .94rem; }

/* recursos: lista editorial numerada */
.rec-lista { display: grid; counter-reset: r; }
@media (min-width: 820px) { .rec-lista { grid-template-columns: 1fr 1fr; column-gap: 70px; } }
.rec { counter-increment: r; display: grid; grid-template-columns: 56px 1fr; gap: 6px 14px; padding: 30px 0; border-top: 1.5px solid var(--c-linha-forte); }
.rec::before { content: counter(r, decimal-leading-zero); grid-row: span 2; font: 700 .85rem var(--f-corpo); letter-spacing: .12em; color: var(--c-destaque); padding-top: 8px; }
.rec h3 { font: var(--peso-titulo) 1.45rem/1.2 var(--f-titulo); letter-spacing: var(--espaco-titulo); }
.rec p { color: var(--c-suave); max-width: 40ch; }

/* ---------- entrada ao rolar (o conteúdo nunca depende disso para existir) ---------- */
.js .rev { opacity: 0; transform: translateY(32px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--atraso, 0s); }
.js .rev.vis { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .rev { opacity: 1; transform: none; }
  .letreiro-trilho { animation: none !important; }
}

/* ---------- página de links (bio do Instagram) ---------- */
.bio-corpo { min-height: 100svh; display: flex; flex-direction: column; align-items: center; padding: 48px 20px 32px; position: relative; overflow: hidden; isolation: isolate; }
.bio-corpo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(520px circle at 50% 0, var(--c-aura), transparent 70%); }
.bio-corpo main { width: min(100%, 520px); display: flex; flex-direction: column; align-items: center; gap: 26px; flex: 1; }
.bio-logo { text-align: center; }
.bio-logo img { height: 110px; width: auto; margin: 0 auto 14px; filter: drop-shadow(0 10px 30px var(--c-brilho)); animation: flutua-logo 5s ease-in-out infinite; }
@keyframes flutua-logo { 50% { transform: translateY(-8px); } }
.bio-logo .nome { font-size: 2.1rem; }
.bio-corpo .frase { color: var(--c-suave); text-align: center; margin-top: -12px; font-size: 1.05rem; }
.bio-links { width: 100%; display: grid; gap: 12px; }
.link-bio { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 18px; text-decoration: none; background: var(--c-superficie); border: 1.5px solid var(--c-linha-forte); min-height: 68px;
  font: 700 1.02rem/1.2 var(--f-corpo); transition: transform .25s var(--ease), border-color .25s; animation: entra-link .7s var(--ease) both; animation-delay: calc(var(--i) * .07s + .2s); }
@keyframes entra-link { from { transform: translateY(18px); } to { transform: none; } }
.link-bio:hover { transform: translateY(-3px); border-color: var(--c-destaque); }
.link-bio svg { width: 26px; height: 26px; flex: none; stroke: var(--c-destaque2); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.link-bio small { display: block; font: 400 .82rem var(--f-corpo); color: var(--c-suave); margin-top: 2px; }
.bio-links .zap { width: 100%; }
.bio-corpo .miudo { margin-top: 0; text-align: center; max-width: 520px; }