/* =====================================================================================
   Capa da apresentação — padrão visual AJAXX (site oficial ajaxx.com)
   Fundos lisos grafite / off-white quente · títulos pesados e justos com ponto final ·
   rótulos laranja em caixa alta com linha à frente · botões retos · cantos de enquadramento ·
   linha laranja luminosa. Mobile-first; ≥ 900 px ajusta no fim do arquivo.

   Índice: 1 tokens · 2 base · 3 componentes · 4 pré-carregamento · 5 abertura · 6 filme ·
           7 imagens · 8 fundador · 9 fechamento · 10 rodapé · 11 galeria ampliada · 12 telas grandes
   ===================================================================================== */

/* 1. TOKENS — definidos em design/tokens.json (gerado como tokens.css, carregado antes deste arquivo).
   Aqui só os apelidos de uso local. Não declarar cores novas neste arquivo: acrescente o token e use var(). */
:root { --gutter: var(--espaco-gutter); --ease-firme: var(--mov-firme); color-scheme: dark; }

/* 2. BASE ------------------------------------------------------------------------------ */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; background: var(--fundo); }
body { margin: 0; background: var(--fundo); color: var(--texto);
  font: 16px/1.55 var(--fonte-base); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: var(--fonte-titulo-peso); line-height: var(--fonte-titulo-altura); letter-spacing: var(--fonte-titulo-espaco); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@keyframes aparece { to { opacity: 1; } }
@keyframes girar { to { transform: rotate(360deg); } }

/* 3. COMPONENTES ------------------------------------------------------------------------- */
/* rótulo: —— AJAXX · SEÇÃO */
.rotulo { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; font-size: 12px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--acento); }
.rotulo i { display: block; flex: none; width: 38px; height: 1px; background: var(--acento); }
/* botões retos: base (contorno) e primário (laranja sólido, com seta) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px;
  border: 1px solid rgba(255,255,255,.35); border-radius: 0; background: rgba(11,11,12,.35); color: #fff; cursor: pointer;
  font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.btn:active { opacity: .85; }
.btn-primario { background: var(--acento); border-color: var(--acento); color: var(--acento-texto); }
.btn-primario::after { content: "→"; margin-left: 4px; font-size: 16px; letter-spacing: 0; }
.play { width: 0; height: 0; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
/* link para o site principal */
.site-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 14px; padding-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,.45);
  color: var(--texto); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; transition: color .3s, border-color .3s; }
.site-link:hover { color: var(--acento); border-color: var(--acento); }
/* seta circular */
.seta { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(0,0,0,.18); background: #fff; color: #222;
  box-shadow: 0 6px 18px rgba(0,0,0,.08); cursor: pointer; transition: border-color .3s, color .3s; }
.seta:hover { border-color: var(--acento); color: var(--acento); }
.seta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* 4. PRÉ-CARREGAMENTO ----------------------------------------------------------------------- */
html.carregando, html.carregando body { overflow: hidden; }
.preload { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; transition: opacity .8s ease, visibility .8s;
  background: radial-gradient(ellipse 80% 62% at 50% 52%, #1e1e22 0%, #111113 55%, var(--fundo) 100%); }
.preload.saindo { opacity: 0; visibility: hidden; }
.preload-centro { display: grid; justify-items: center; gap: 22px; padding: 0 var(--gutter); text-align: center; }
.preload-anel { position: relative; width: 72px; height: 72px; border-radius: 50%; }
.preload-anel::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,.08);
  border-top-color: var(--acento); border-right-color: rgb(var(--acento-rgb) / .35); animation: girar 1.1s cubic-bezier(.55,.15,.45,.85) infinite; }
.preload-anel::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; box-shadow: 0 0 40px rgb(var(--acento-rgb) / .18); animation: pulsar 2.2s ease-in-out infinite; }
@keyframes pulsar { 50% { opacity: .35; } }
.preload-frase { margin: 0; min-height: 1.5em; font-size: 17px; font-weight: 500; color: #e9e4dd; }
.preload-frase::after { content: "…"; }
.preload-frase.entra { animation: frase .6s ease both; }
@keyframes frase { from { opacity: 0; transform: translateY(6px); filter: blur(3px); } }
.preload-pct { margin: -12px 0 0; font-size: 12px; letter-spacing: .22em; color: var(--suave); font-variant-numeric: tabular-nums; }
.preload-marca { position: absolute; left: 50%; bottom: calc(max(36px, env(safe-area-inset-bottom) + 24px)); height: 30px; width: auto; transform: translateX(-50%); opacity: .9; }

/* 5. ABERTURA -------------------------------------------------------------------------------
   (1) entrada automática depois do pré-carregamento; (2) motion graphics presos à rolagem
   (valores vindos do capa.js); (3) chegada na maquete: anel de play + entrar. */
.topo { position: fixed; z-index: 3; top: 0; left: 0; right: 0; display: flex; justify-content: flex-end;   /* logo à direita (pedido de 30/09/2026) */
  /* dentro do canto superior direito da moldura (inset 22 px, braço 34 px), sem cruzar as linhas */
  padding: max(38px, env(safe-area-inset-top) + 16px) calc(42px + env(safe-area-inset-right)) 0 var(--gutter); pointer-events: none; transition: opacity .4s; }
body:not(.revelado) .topo, body.passou .topo { opacity: 0; }
.logo { height: 30px; width: auto; }
.intro { position: relative; height: 480svh; }   /* os últimos ~20% seguram a maquete com os botões na tela */
.palco { position: sticky; top: 0; height: 100svh; overflow: hidden; background: radial-gradient(ellipse 70% 55% at 50% 50%, var(--fundo-palco-centro) 0%, var(--fundo-palco) 50%, var(--fundo) 100%); }
#seq { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }body.na-maquete #seq { cursor: pointer; }
.veu { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(11,11,12,.5) 0%, rgba(11,11,12,0) 22%, rgba(11,11,12,0) 45%, rgba(11,11,12,.78) 80%, rgba(11,11,12,.92) 100%); }
/* (1) entrada */
.moldura { --fecha: 0; position: absolute; pointer-events: none;
  inset: calc(max(22px, env(safe-area-inset-top)) + var(--fecha) * 9svh) calc(22px + var(--fecha) * 5vw) calc(max(22px, env(safe-area-inset-bottom)) + var(--fecha) * 9svh); }
.moldura i { position: absolute; width: 34px; height: 34px; border: 0 solid rgba(255,255,255,.5); opacity: 0; transition: border-color .5s; }
.moldura .c1 { left: 0; top: 0; border-width: 1.5px 0 0 1.5px; }  .moldura .c2 { right: 0; top: 0; border-width: 1.5px 1.5px 0 0; }
.moldura .c3 { right: 0; bottom: 0; border-width: 0 1.5px 1.5px 0; } .moldura .c4 { left: 0; bottom: 0; border-width: 0 0 1.5px 1.5px; }
.moldura.fechada i { border-color: var(--acento); }
body.revelado .moldura i { animation: canto .8s .1s cubic-bezier(.6,0,.2,1) forwards; }
@keyframes canto { from { opacity: 0; transform: scale(1.6); } to { opacity: 1; transform: none; } }
.cartela { position: absolute; left: calc(var(--gutter) + 8px); right: var(--gutter); bottom: calc(max(84px, env(safe-area-inset-bottom) + 70px));
  transform-origin: left top; will-change: transform; pointer-events: none; }
.kicker { opacity: 0; }
.kicker i { width: 0; }
body.revelado .kicker { animation: entra .7s .25s cubic-bezier(.2,.7,.2,1) forwards; }
body.revelado .kicker i { animation: cresce .7s .45s cubic-bezier(.6,0,.2,1) forwards; }
.cartela { transition: opacity .4s; }
body.na-maquete .cartela { opacity: 0; }   /* na maquete a moldura fecha sobre o canto do título; a chegada fica só com a maquete e o botão */
.cartela.reduzida .kicker { animation: none; opacity: 0; transition: opacity .3s; }
@keyframes entra { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes cresce { to { width: 38px; } }
.titulo { font-size: clamp(46px, 13vw, 104px); }
.titulo .m { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .06em; }
.titulo .m > span { display: inline-block; transform: translateY(105%); }
body.revelado .titulo .m > span { animation: sobe .9s cubic-bezier(.2,.8,.2,1) forwards; }
.titulo .m > span { animation-delay: calc(.4s + var(--i, 0) * .15s) !important; }
@keyframes sobe { to { transform: none; } }
.deslize { position: absolute; left: 50%; bottom: max(20px, env(safe-area-inset-bottom) + 8px); display: flex; flex-direction: column; align-items: center; gap: 8px;
  transform: translateX(-50%); opacity: 0; pointer-events: none; }
body.revelado .deslize { animation: aparece .8s 2.1s forwards; }
body.rolou .deslize { animation: none; opacity: 0; }
.deslize span { position: relative; width: 24px; height: 38px; border: 1.5px solid rgba(255,255,255,.55); border-radius: 13px; }
.deslize span::after { content: ""; position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--acento);
  animation: rolar 1.6s ease-in-out infinite; }
@keyframes rolar { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(13px); } }
.deslize em { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--texto-2); }
/* (2) rolagem */
.capitulo { position: absolute; left: calc(var(--gutter) + 8px); bottom: calc(max(84px, env(safe-area-inset-bottom) + 70px)); margin: 0; pointer-events: none;
  font-size: 13px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--texto); text-shadow: 0 2px 12px rgba(0,0,0,.6);
  opacity: 0; transform: translateY(10px); transition: opacity .6s, transform .6s; }
.capitulo::before { content: ""; display: inline-block; width: 30px; height: 2px; margin: 0 12px 4px 0; vertical-align: middle; background: var(--acento); }
.capitulo.mostra { opacity: .95; transform: none; }
.progresso { position: absolute; right: calc(max(22px, env(safe-area-inset-right)) + 6px); top: 26%; bottom: 26%; width: 2px; background: rgba(255,255,255,.14);
  opacity: 0; transition: opacity .5s; pointer-events: none; }
body.rolando .progresso { opacity: 1; }
.progresso i { position: absolute; inset: 0; background: var(--acento); transform-origin: top; transform: scaleY(0); }
.progresso b { position: absolute; left: -3px; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--fundo); border: 1.5px solid rgba(255,255,255,.5); }
.progresso b.ok { border-color: var(--acento); background: var(--acento); }
/* (3) chegada na maquete */
.fim { display: none; }
body.na-maquete .fim { display: block; }
.play-anel { position: absolute; left: 50%; top: 46%; width: 116px; height: 116px; margin: -58px 0 0 -58px; color: #fff; text-decoration: none; }
.play-anel svg { width: 100%; height: 100%; overflow: visible; transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.play-anel:hover svg { transform: scale(1.06); }
.play-anel:active svg { transform: scale(.96); }
.play-anel .trilho { fill: rgba(11,11,12,.4); stroke: rgba(255,255,255,.14); stroke-width: 1.5; }
.play-anel .anel { fill: none; stroke: var(--acento); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 340; stroke-dashoffset: 340;
  transform: rotate(-90deg); transform-origin: 60px 60px; animation: traca 1s .1s cubic-bezier(.6,0,.2,1) forwards; }
.play-anel .tracos { fill: none; stroke: rgba(255,255,255,.35); stroke-width: 1; stroke-dasharray: 2 6; transform-origin: 60px 60px; opacity: 0;
  animation: aparece .5s .5s forwards, girar 18s linear infinite; }
.play-anel .tri { fill: #fff; transform-origin: 62px 60px; transform: scale(0); animation: pop .5s .6s cubic-bezier(.3,1.6,.5,1) forwards; }
.play-anel:hover .tri { fill: var(--acento); }
.play-anel::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1px solid rgb(var(--acento-rgb) / .6); opacity: 0; animation: onda 2.6s 1.4s ease-out infinite; }
.play-anel span { position: absolute; left: 50%; top: calc(100% + 14px); transform: translateX(-50%); white-space: nowrap; font-size: 11px; font-weight: 700;
  letter-spacing: .3em; text-transform: uppercase; opacity: 0; animation: aparece .6s .8s forwards; text-shadow: 0 2px 10px rgba(0,0,0,.7); }
@keyframes traca { to { stroke-dashoffset: 0; } }
@keyframes pop { to { transform: scale(1); } }
@keyframes onda { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }
.entrar { position: absolute; left: 50%; bottom: calc(max(34px, env(safe-area-inset-bottom) + 22px)); min-height: 56px; transform: translate(-50%, 12px); opacity: 0;
  animation: sobeBotao .6s 1s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes sobeBotao { to { opacity: 1; transform: translate(-50%, 0); } }
.play-anel .seta3d { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transform-origin: 60px 60px; transform: scale(0);
  animation: pop .5s .6s cubic-bezier(.3,1.6,.5,1) forwards; }
.play-anel:hover .seta3d { stroke: var(--acento); }
.fim-filme { white-space: nowrap; background: rgba(11,11,12,.55); border-color: rgba(255,255,255,.35); color: #fff; backdrop-filter: blur(8px); }
.fim-filme:hover { border-color: var(--acento); }

/* Camada 3D sobre a capa: tela inteira, respeitando o recorte do iPhone; a página de baixo não rola */
.camada3d { position: fixed; inset: 0; z-index: 50; background: var(--fundo);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); animation: aparece .35s ease both; }
.camada3d[hidden] { display: none; }
.camada3d iframe { display: block; width: 100%; height: 100%; border: 0; }
html.em-3d, html.em-3d body { overflow: hidden; }

/* Filme com som em tela cheia */
dialog.filme-cheio { width: 100vw; height: 100svh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #000; }
dialog.filme-cheio[open] { display: grid; place-items: center; }
dialog.filme-cheio::backdrop { background: #000; }
dialog.filme-cheio video { width: 100%; height: 100%; object-fit: contain; background: #000; }
dialog.filme-cheio .fechar { position: absolute; z-index: 2; top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); width: 48px; height: 48px;
  border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 26px; line-height: 1; }

/* 6. O FILME — a tela vertical cresce com a rolagem (--p, --hh e --mw/--mh vêm do capa.js) -------- */
.filme-exp { position: relative; height: 210svh; }   /* bônus: rolagem mais curta que a abertura */
.fx-palco { --p: 0; position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--fundo-cinema); }
.fx-luz { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(255,255,255,.035), transparent 70%); }
.fx-tela { position: absolute; left: 50%; top: 50%; width: 214px; height: 380px; transform: translate(-50%, -50%); overflow: hidden; background: #000; border-radius: 2px;
  box-shadow: 0 40px 100px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.1); }
.fx-tela video { width: 100%; height: 100%; object-fit: cover; display: block; }
.fx-mira { --mw: 214px; --mh: 380px; position: absolute; left: 50%; top: 50%; width: calc(var(--mw) + 36px); height: calc(var(--mh) + 36px);
  transform: translate(-50%, -50%); pointer-events: none; }
.fx-mira i { position: absolute; width: 22px; height: 22px; border: 0 solid var(--acento); }
.fx-mira i:nth-child(1) { left: 0; top: 0; border-width: 2px 0 0 2px; }   .fx-mira i:nth-child(2) { right: 0; top: 0; border-width: 2px 2px 0 0; }
.fx-mira i:nth-child(3) { right: 0; bottom: 0; border-width: 0 2px 2px 0; } .fx-mira i:nth-child(4) { left: 0; bottom: 0; border-width: 0 0 2px 2px; }
.fx-laser { position: absolute; left: 50%; top: calc(50% + var(--hh, 190px) + 18px); bottom: 0; width: 2px; margin-left: -1px; pointer-events: none;
  background: linear-gradient(180deg, var(--acento-brilho) 0%, var(--acento) 40%, rgb(var(--acento-rgb) / .2) 100%);
  box-shadow: 0 0 10px rgb(var(--acento-rgb) / .9), 0 0 28px rgb(var(--acento-rgb) / .55), 0 0 60px rgb(var(--acento-rgb) / .25); }
.fx-laser::after { content: ""; position: absolute; left: 50%; bottom: 0; width: min(70vw, 520px); height: 3px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgb(var(--acento-rgb) / .9), transparent); box-shadow: 0 0 24px rgb(var(--acento-rgb) / .7); }
.fx-som { position: absolute; left: 50%; bottom: 22px; transform: translate(-50%, 10px); opacity: 0; pointer-events: none; transition: opacity .4s, transform .4s; }
.fx-som::after { content: none; }
.fx-som { white-space: nowrap; background: rgba(11,11,12,.55); border-color: rgba(255,255,255,.4); color: #fff; backdrop-filter: blur(8px); }   /* bônus: só contorno; laranja cheio é para entrar e falar com o Mauricio */
.fx-som.mostra { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.fx-titulo { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .08em; pointer-events: none;
  font-size: clamp(40px, 10vw, 110px); font-weight: 800; letter-spacing: -.045em; line-height: .95; color: var(--texto); text-shadow: 0 6px 40px rgba(0,0,0,.8); }
.fx-titulo span { display: block; white-space: nowrap; will-change: transform; }
.fx-rotulo { position: absolute; z-index: 3; left: 0; right: 0; top: calc(max(22px, env(safe-area-inset-top)) + 7svh); justify-content: center; margin: 0; }
.fx-dica { position: absolute; z-index: 3; left: 0; right: 0; bottom: calc(max(22px, env(safe-area-inset-bottom)) + 3svh); margin: 0; text-align: center;
  font-size: 11px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--texto-2); }

/* 7. IMAGENS — seção clara; leque firme (posições no capa.js), setas nas laterais, arraste ------------ */
.galeria-sec { overflow: hidden; padding: 96px 0 72px; background: var(--claro); color: var(--tinta); }
.sec-cab { padding: 0 var(--gutter); text-align: center; }
.sec-cab .rotulo { display: inline-flex; margin-bottom: 12px; }
.galeria-sec .rotulo { color: var(--acento-escuro); }   /* laranja de texto no fundo claro (contraste ≥ 4,5:1) */
.galeria-sec h2 { margin: 6px 0 10px; font-size: clamp(40px, 10vw, 84px); color: var(--tinta); }
.leque { --cw: min(72vw, 340px); position: relative; height: calc(var(--cw) * 1.25 + 4.5rem); max-width: 1400px; margin: 18px auto 0; touch-action: pan-y; user-select: none; }
.leque-trilho { position: absolute; inset: 0; transition: transform .45s var(--ease-firme); cursor: grab; }
.leque-trilho:active { cursor: grabbing; }
.carta { position: absolute; left: 50%; top: 50%; width: var(--cw); aspect-ratio: 4 / 5; padding: 0; border: 0; border-radius: 3px; overflow: hidden; background: #111; cursor: pointer;
  box-shadow: 0 24px 50px rgba(40,30,20,.22), 0 0 0 1px rgba(0,0,0,.06); opacity: 0; transform: translate(-50%, -50%) translateY(3rem) scale(.9);
  transition: transform .6s var(--ease-firme), opacity .5s ease, box-shadow .35s; will-change: transform; }
.leque.aberto .carta { opacity: 1; }
.leque.aberto .carta.fora { opacity: 0; pointer-events: none; }
.carta img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.carta span { position: absolute; left: 10px; bottom: 10px; padding: 7px 10px; background: #111; color: #fff; opacity: 0; transition: opacity .3s;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.carta.centro { cursor: zoom-in; box-shadow: 0 30px 60px rgba(40,30,20,.3), 0 0 0 2px var(--acento); }
.carta.centro span { opacity: 1; }
.leque .seta { position: absolute; top: 50%; z-index: 30; width: 46px; height: 46px; transform: translateY(-50%); }
.leque #lqAnt { left: 8px; } .leque #lqProx { right: 8px; }
.leque-nav { display: flex; justify-content: center; margin-top: 10px; }
.pontos { display: flex; gap: 8px; }
.pontos i { width: 18px; height: 2px; background: rgba(0,0,0,.18); transition: background .3s, width .3s; }
.pontos i.ativo { width: 34px; background: var(--acento); }
.leque-dica { margin: 14px 0 0; text-align: center; color: var(--tinta-suave); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }

/* 8. FUNDADOR — quem planejou e vai construir (padrão "Founder-led accountability" do ajaxx.com) ------- */
.fundador { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; background: var(--fundo); }
.fundador picture, .fundador picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.fundador::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(11,11,13,0) 30%, rgba(11,11,13,.82) 58%, #0b0b0d 100%); }
.fundador-texto { position: relative; z-index: 2; max-width: 560px; padding: 0 var(--gutter) calc(max(56px, env(safe-area-inset-bottom) + 40px)); }
.fundador h2 { margin: 6px 0 16px; font-size: clamp(40px, 10.5vw, 76px); }
.fundador-lead { margin: 0 0 22px; color: var(--texto-2); font-size: 16px; line-height: 1.6; }
.fundador-frase { margin: 0 0 24px; padding-left: 18px; border-left: 2px solid var(--acento); font-size: 19px; font-weight: 700; line-height: 1.35; }
.fundador .assinatura { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.fundador .assinatura b { font-size: 15px; }
.fundador .whats { margin: 26px 0 0; }   /* contato logo abaixo do nome, alinhado ao texto */
.fundador .assinatura span { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--acento); }

/* 9. FECHAMENTO — chamada para o WhatsApp, com a linha laranja luminosa ---------------------------- */
.fechamento { position: relative; overflow: hidden; padding: 150px var(--gutter) 110px; text-align: center; }
.fechamento .rotulo { justify-content: center; }
.fech-laser { position: absolute; left: 50%; top: 0; width: 2px; height: 104px; margin-left: -1px;
  background: linear-gradient(180deg, rgb(var(--acento-rgb) / 0), var(--acento) 70%, var(--acento-brilho)); box-shadow: 0 0 10px rgb(var(--acento-rgb) / .9), 0 0 30px rgb(var(--acento-rgb) / .5); }
.fechamento h2 { margin: 8px 0 34px; font-size: clamp(46px, 12vw, 104px); line-height: .92; letter-spacing: -.05em; }
.whats { display: flex; width: fit-content; margin: 0 auto; min-height: 60px; padding: 0 30px; font-size: 14px; gap: 12px; }   /* centralizado, sozinho na linha */
.whats svg { width: 22px; height: 22px; fill: currentColor; }
.fech-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; max-width: 560px; margin: 44px auto 36px; }   /* mesma largura */
.fech-links .btn { min-height: 48px; font-size: 12px; }

/* 10. RODAPÉ ------------------------------------------------------------------------------------ */
.rodape { padding: 36px var(--gutter) calc(28px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linha); text-align: center; }
.rodape img { height: 26px; width: auto; margin: 0 auto 16px; }
.rodape p { max-width: 60ch; margin: 0 auto 8px; color: var(--suave); font-size: 13px; }
.rodape-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 22px; }
.rodape-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; color: var(--texto); font-size: 13px; letter-spacing: .08em; text-decoration: none; }
.rodape-links a:hover { color: var(--acento); }
.rodape .copy { opacity: .7; }

/* 11. GALERIA AMPLIADA ---------------------------------------------------------------------------- */
dialog#lightbox { width: 100vw; height: 100svh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(0,0,0,.94); color: var(--texto); }
dialog#lightbox[open] { display: grid; place-items: center; }
dialog#lightbox::backdrop { background: rgba(0,0,0,.94); }
#lbImg { max-width: 100vw; max-height: 86svh; object-fit: contain; touch-action: pan-y; }
#lbLegenda { position: absolute; left: 0; right: 0; bottom: max(18px, env(safe-area-inset-bottom)); margin: 0; text-align: center; font-weight: 600; }
dialog#lightbox button { position: absolute; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; font-size: 26px; line-height: 1; }
.fechar { top: max(14px, env(safe-area-inset-top)); right: 14px; }
.nav { top: 50%; margin-top: -24px; }
.ant { left: 10px; } .prox { right: 10px; }

/* 12. TELAS GRANDES E PREFERÊNCIAS ------------------------------------------------------------------ */
@media (min-width: 900px) {
  :root { --gutter: var(--espaco-gutter-largo); }
  .logo { height: 38px; }
  .cartela, .capitulo { left: calc(var(--gutter) + 16px); bottom: 13svh; }
  .leque { --cw: clamp(260px, 25vw, 400px); }
  .leque .seta { width: 56px; height: 56px; }
  .leque .seta svg { width: 22px; height: 22px; }
  .leque #lqAnt { left: max(12px, calc(50% - var(--cw) * 1.1 - 28px)); }
  .leque #lqProx { right: max(12px, calc(50% - var(--cw) * 1.1 - 28px)); }
}
@media (min-aspect-ratio: 1/1) {
  .fundador { align-items: center; }
  .fundador picture img { object-position: 70% 30%; }
  .fundador::after { background: linear-gradient(90deg, rgba(11,11,13,.96) 0%, rgba(11,11,13,.9) 28%, rgba(11,11,13,.35) 52%, rgba(11,11,13,0) 70%),
                                 linear-gradient(180deg, rgba(11,11,13,0) 70%, #0b0b0d 100%); }
  .fundador-texto { max-width: 620px; padding: 0 0 0 max(var(--gutter), 9vw); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .palco *, .palco *::after { animation-duration: .01s !important; animation-delay: 0s !important; }
  .carta, .leque-trilho { transition-duration: .01s; }
  .deslize span::after, .play-anel .tracos, .play-anel::after, .preload-anel::before, .preload-anel::after { animation: none !important; }
  .play-anel .tracos { opacity: 1; }
}

/* 13. ACESSIBILIDADE --------------------------------------------------------------------------- */
a:focus-visible, button:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
.galeria-sec a:focus-visible, .galeria-sec button:focus-visible { outline-color: var(--tinta); }
.pular { position: absolute; left: 12px; top: -80px; z-index: 60; padding: 12px 18px; background: var(--acento); color: var(--acento-texto); font-weight: 700; text-decoration: none; }
.pular:focus { top: 12px; }
/* pausa da prévia do filme (sempre à mão, canto da tela) */
.fx-pausa { position: absolute; right: 10px; top: 10px; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 4px; width: 44px; height: 44px;
  border: 1px solid rgba(255,255,255,.3); background: rgba(11,11,12,.55); cursor: pointer; }
.fx-pausa i { width: 4px; height: 14px; background: #fff; }
.fx-pausa.parado i:first-child { width: 0; height: 0; background: none; border-left: 12px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.fx-pausa.parado i:last-child { display: none; }