/* ============================================================================
   CONF27. Página curta de inscrição. v2 de 25/09/2026.

   Design Read: landing curta de inscrição de conferência cristã, público de
   igreja chegando pelo celular, identidade synthwave de fliperama herdada da
   arte oficial de 2027.

   Dials: DESIGN_VARIANCE 6 (a v1 era uma coluna centrada do começo ao fim; a
   v2 alterna capa centrada, texto com mosaico, bilhete em duas partes e lista),
   MOTION_INTENSITY 6 desde a v3 (a arte da capa ganhou vida a pedido do Samuel). v4: a arte virou a versão limpa do PDF oficial e passou a ser o palco da capa, VISUAL_DENSITY 4.

   O QUE A V2 MUDA, E POR QUÊ. O Samuel aprovou o mundo visual da v1 e pediu
   mais atração e experiência, sem crescer a página. Cinco coisas:
   1. O chão quadriculado sai do rodapé e vai para a CAPA, logo abaixo da arte,
      que é onde ele já está no banner. A capa passa a ser um palco, não uma
      imagem solta sobre fundo liso.
   2. A data vira PLACAR em letra de bloco com brilho de neon, e ganha a
      contagem de dias, que é um fato calculado e não uma urgência inventada.
   3. Entra fotografia de verdade: três fotos de público da edição de 2024,
      tingidas com o degradê do CONF. Gente, nunca palco nem palestrante.
   4. A ficha do dia vira o BILHETE: preço, dados e botão num lugar só.
   5. No celular, uma barra do polegar com preço e botão, sempre visível.

   O degradê do CONF (laranja, rosa, violeta, ciano) é a assinatura, e aparece
   em três lugares só: a palavra-chave do texto, a borda do bilhete e o tingido
   das fotos. O resto é noite e branco.
   ========================================================================== */

@font-face { font-family:'Silkscreen'; src:url('assets/fonts/Silkscreen-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'InstrumentSans'; src:url('assets/fonts/InstrumentSans-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'InstrumentSans'; src:url('assets/fonts/InstrumentSans-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; }

:root {
  /* Amostradas por pixel do banner oficial em 25/09/2026. */
  --noite:    #080c46;
  --noite-0:  #050833;
  --noite-2:  #0f166b;
  --rosa:     #ff3d9e;
  --ciano:    #3de8ff;
  --laranja:  #ff7a2e;
  --violeta:  #9b5cff;
  --branco:   #f4f5ff;

  --degrade:  linear-gradient(95deg, var(--laranja) 0%, var(--rosa) 36%, var(--violeta) 66%, var(--ciano) 100%);

  --texto:    rgba(244,245,255,.92);
  --texto-2:  rgba(244,245,255,.74);
  --linha:    rgba(61,232,255,.24);

  --t-grande: clamp(30px, 4.6vw, 56px);
  --t-tit:    clamp(24px, 3.2vw, 36px);
  --t-preco:  clamp(34px, 3.9vw, 50px);
  --t-placar: clamp(15px, 1.9vw, 22px);
  --t-lide:   clamp(18px, 1.6vw, 21px);
  --t-corpo:  17px;
  --t-mi:     14px;
  --t-rot:    13px;

  --e1: 8px; --e2: 14px; --e3: 22px;
  --e4: clamp(28px, 3.4vw, 44px);
  --e5: clamp(56px, 8vw, 110px);

  --wrap: 1120px;
  --nav: 60px;
  --polegar: 72px;
  --m-feed: 120ms cubic-bezier(.3,.7,.4,1);
  --m-est:  160ms cubic-bezier(.3,.7,.4,1);

  /* O brilho de neon, um só para a página inteira. */
  --neon-ciano: 0 0 6px rgba(61,232,255,.55), 0 0 18px rgba(61,232,255,.35);
  --neon-rosa:  0 0 10px rgba(255,61,158,.55), 0 0 28px rgba(255,61,158,.3);
}

/* ---------------- Base ---------------- */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav) + 12px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }
body {
  margin:0; background:var(--noite); color:var(--texto);
  font-family:'InstrumentSans', system-ui, sans-serif;
  font-size:var(--t-corpo); line-height:1.62; letter-spacing:.006em;
  -webkit-font-smoothing:antialiased;
}
img,svg,video { display:block; max-width:100%; height:auto; }
h1,h2,p,dl,dd,dt,ul,figure { margin:0; }
ul { list-style:none; padding:0; }
a { color:inherit; }
.wrap { width:100%; max-width:var(--wrap); margin:0 auto; padding:0 20px; position:relative; }
@media (min-width:900px){ .wrap { padding:0 40px; } }

.pular { position:absolute; left:12px; top:-60px; z-index:50; background:var(--branco); color:var(--noite); padding:10px 14px; font-weight:700; }
.pular:focus { top:12px; }
:focus-visible { outline:3px solid var(--ciano); outline-offset:3px; }
/* v5, toque. O flash cinza do WebKit sai porque o botão já responde pelo
   :active (ele assenta na sombra); touch-action tira a espera do toque duplo. */
a, summary, button { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }

.nav__marca, .placar, .rotulo, .titulo, .fecho__tit, .bilhete__preco, .bilhete__rot, .capa__conta b, .polegar__preco {
  font-family:'Silkscreen', 'InstrumentSans', monospace; font-weight:700;
}

/* ---------------- Botão ----------------
   Rosa com sombra dura em ciano: o bloco 3D do CONF traduzido para botão.
   O brilho rosa em volta é o neon. Hover levanta, clique assenta. */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:var(--rosa); color:var(--noite-0);
  font-weight:700; font-size:var(--t-lide); letter-spacing:.01em; line-height:1.2; white-space:nowrap;
  text-decoration:none; padding:17px 28px; border-radius:4px;
  box-shadow:5px 5px 0 var(--ciano);
  transition:transform var(--m-est), box-shadow var(--m-est);
}
.btn--neon { box-shadow:5px 5px 0 var(--ciano), var(--neon-rosa); }
@media (hover:hover) and (pointer:fine){ .btn:hover { transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--ciano), var(--neon-rosa); } }
.btn:active { transform:translate(3px,3px); box-shadow:2px 2px 0 var(--ciano); transition-duration:120ms; }
.btn__i { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.btn--peq { font-size:var(--t-mi); padding:10px 16px; box-shadow:3px 3px 0 var(--ciano); }
@media (hover:hover) and (pointer:fine){ .btn--peq:hover { box-shadow:5px 5px 0 var(--ciano); } }
.btn--peq:active { box-shadow:1px 1px 0 var(--ciano); transform:translate(2px,2px); }
@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover, .btn:active { transition:none; transform:none; }
}

.link { color:var(--ciano); text-underline-offset:3px; font-weight:700; }
@media (hover:hover){ .link:hover { color:var(--branco); } }

/* ---------------- Barra ---------------- */
.nav {
  position:sticky; top:0; z-index:20; height:var(--nav);
  background:rgba(5,8,51,.96); border-bottom:1px solid var(--linha);
}
.nav__in { height:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--e3); }
.nav__marca { text-decoration:none; font-size:var(--t-mi); letter-spacing:.06em; color:var(--branco); }
.nav__marca b { color:var(--rosa); text-shadow:var(--neon-rosa); }
.nav__links { display:none; gap:var(--e4); margin-left:auto; }
.nav__links a { text-decoration:none; font-size:var(--t-mi); color:var(--texto-2); padding:6px 0; border-bottom:2px solid transparent; transition:color var(--m-est), border-color var(--m-est); }
.nav__links a:hover { color:var(--branco); border-bottom-color:var(--ciano); }
@media (min-width:760px){ .nav__links { display:flex; } }
/* v5: desfoque de fundo só no desktop. No celular, barra fixa com
   backdrop-filter refaz o desfoque a cada quadro de rolagem, em cima de uma
   capa que está animando; o fundo quase opaco dá a mesma leitura de graça. */
@media (min-width:760px){
  .nav { background:rgba(5,8,51,.84); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
}
/* No celular quem vende é a barra do polegar; o botão do topo sai para não
   haver dois botões iguais na mesma tela. */
@media (max-width:759px){ .nav__cta { display:none; } }

/* ---------------- Capa, v4 ----------------
   A arte é o palco. No celular ela abre ampliada no topo e o texto entra por
   cima do chão dela. No desktop ela cobre a capa inteira, presa ao topo, e o
   texto pisa no chão quadriculado da própria arte. */
.capa { position:relative; overflow:hidden; isolation:isolate; background:var(--noite); }

.capa__palco { position:relative; height:calc(165vw * 1004 / 1896 * .82); overflow:hidden; }
.arte {
  margin:0; display:block; position:absolute; top:0; left:50%;
  width:165vw; aspect-ratio:1896 / 1004;
  translate:-50% 0;
  transform-origin:50% 38%;
  animation:respira 9s cubic-bezier(.645,.045,.355,1) infinite alternate;
  will-change:transform;
}
.arte__giro {
  display:block; position:absolute; inset:0;
  transform:rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition:transform 600ms cubic-bezier(.23,1,.32,1);
  animation:chega 1100ms cubic-bezier(.23,1,.32,1) backwards;
}
.arte__base, .arte__neon { position:absolute; inset:0; width:100%; height:100%; }
/* A saída da arte para a noite, embaixo, sem costura. */
.capa__palco::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:45%; pointer-events:none;
  background:linear-gradient(180deg, transparent, var(--noite));
}

.capa__texto {
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--e3);
  margin-top:-44px; padding-bottom:var(--e5);
}

/* O chão em CSS continua existindo no celular, embaixo do texto, onde a arte
   já acabou. No desktop quem faz o chão é a própria arte. */
.capa__chao {
  position:absolute; z-index:0; left:-60%; right:-60%; bottom:0; height:40%;
  background-color:transparent;
  --grade:
    linear-gradient(var(--rosa) 2px, transparent 2px),
    linear-gradient(90deg, var(--violeta) 2px, transparent 2px);
  transform:perspective(380px) rotateX(64deg);
  transform-origin:50% 100%;
  opacity:.35; overflow:hidden;
  -webkit-mask-image:linear-gradient(0deg, #000 25%, transparent 92%);
          mask-image:linear-gradient(0deg, #000 25%, transparent 92%);
}
/* v5: o chão anda por TRANSFORM de um filho, e não por background-position.
   Animar background-position repinta a camada inteira a cada quadro na
   thread principal; mover um filho uma célula para baixo e voltar é trabalho
   só do compositor. O filho é uma célula mais alto que o pai, então o laço
   não tem emenda. */
.capa__chao i {
  position:absolute; left:0; right:0; top:-64px; bottom:0;
  background-image:var(--grade); background-size:64px 64px;
  will-change:transform;
  animation:chao 5s linear infinite;
}
@keyframes chao { from { transform:translateY(0); } to { transform:translateY(64px); } }

@media (min-width:760px){
  .capa {
    height:clamp(680px, calc(100svh - var(--nav)), 960px);
    container-type:size;
    display:flex; flex-direction:column; justify-content:flex-end;
  }
  .capa__palco { position:absolute; inset:0; height:auto; }
  /* A arte cobre a capa e, em tela baixa, sobe o bastante para o pé do '27
     (60% da altura da arte) ficar acima dos ~340px do bloco de texto. Em tela
     alta o min() devolve zero e ela fica presa ao topo. */
  .arte {
    width:max(100cqw, calc(100cqh * 1896 / 1004));
    top:min(0px, calc(100cqh - 340px - max(100cqw, calc(100cqh * 1896 / 1004)) * 1004 / 1896 * .6));
  }
  /* Véu só na metade de baixo, para o texto ler sobre o chão da arte. */
  .capa__palco::after { height:52%; background:linear-gradient(180deg, transparent 0%, rgba(8,12,70,.55) 40%, rgba(8,12,70,.92) 100%); }
  .capa__texto { margin-top:0; padding-bottom:clamp(32px, 6cqh, 64px); }
  .capa__chao { display:none; }
}

/* O placar: três casas com moldura de neon. */
.placar { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--e1); }
.placar li {
  font-size:var(--t-placar); letter-spacing:.04em; color:var(--branco); line-height:1.1;
  padding:12px 16px; border:2px solid var(--ciano); border-radius:4px;
  background:rgba(5,8,51,.78);
  box-shadow:var(--neon-ciano), inset 0 0 12px rgba(61,232,255,.18);
  text-shadow:0 0 8px rgba(61,232,255,.6);
}
.placar li span { color:var(--ciano); font-size:.62em; margin-right:4px; }
@media (max-width:559px){
  .placar { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; width:100%; }
  .placar li { font-size:13px; padding:10px 4px; text-align:center; }
  .placar li span { display:block; margin:0 0 6px; font-size:11px; }
}
.capa__lide { font-size:var(--t-lide); color:var(--branco); max-width:30ch; text-shadow:0 2px 12px rgba(5,8,51,.9); }
.capa__acao { display:flex; flex-direction:column; align-items:center; gap:var(--e2); }
.capa__conta { font-size:var(--t-mi); color:var(--texto); text-shadow:0 2px 10px rgba(5,8,51,.9); }
.capa__conta b { color:var(--ciano); font-size:1.15em; margin-right:4px; }

/* ---------------- A arte viva ----------------
   Tempos e curvas do membro animate do Sherk Design: ambiente em ease-in-out
   longo, chegada em ease-out-quint. Nada começa invisível. Coordenadas em
   porcentagem da arte de 1896x1004, medidas na própria camada. */
.arte__neon {
  mix-blend-mode:screen; opacity:.35;
  /* A elipse do lettering "Jesuscopy", e só ela. */
  -webkit-mask-image:radial-gradient(ellipse 20% 11% at 51.5% 29%, #000 55%, transparent 100%);
          mask-image:radial-gradient(ellipse 20% 11% at 51.5% 29%, #000 55%, transparent 100%);
  animation:neon 5.2s steps(1, end) infinite;
  will-change:opacity;
}
/* A caixa do CONF '27: o reflexo não sai dela. */
.arte__faixa {
  position:absolute; left:22%; top:31%; width:60%; height:31%; overflow:hidden; mix-blend-mode:overlay;
  /* Bordas esfumadas nos quatro lados: sem isso a faixa de luz é cortada
     seco pela caixa e desenha um retângulo no céu. */
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent), linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent), linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
          mask-composite:intersect;
}
.arte__reflexo {
  position:absolute; top:-10%; bottom:-10%; left:0; width:24%;
  background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,0) 20%, rgba(255,255,255,.95) 50%, rgba(255,255,255,0) 80%, transparent 100%);
  transform:translateX(-120%) skewX(-14deg);
  animation:reflexo 6.5s cubic-bezier(.645,.045,.355,1) 1.2s infinite;
}
.arte__brilho {
  --t:clamp(16px, 2.2vw, 38px);
  position:absolute; left:var(--x); top:var(--y);
  width:var(--t); aspect-ratio:1; margin:calc(var(--t) / -2) 0 0 calc(var(--t) / -2);
  background:radial-gradient(circle, #fff 0 12%, rgba(255,255,255,.85) 22%, transparent 60%);
  clip-path:polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
  mix-blend-mode:screen;
  transform:scale(.45) rotate(0deg); opacity:.55;
  animation:cintila 4s cubic-bezier(.645,.045,.355,1) var(--d) infinite;
}

@keyframes respira { from { transform:scale(1); } to { transform:scale(1.03); } }
@keyframes chega   { from { transform:scale(.95); } to { transform:scale(1); } }
@keyframes neon {
  0%   { opacity:.35; }
  4%   { opacity:.08; }
  6%   { opacity:.4; }
  8%   { opacity:.12; }
  10%  { opacity:.45; }
  55%  { opacity:.3; }
  57%  { opacity:.1; }
  59%  { opacity:.38; }
  100% { opacity:.35; }
}
@keyframes reflexo {
  0%   { transform:translateX(-120%) skewX(-14deg); }
  40%  { transform:translateX(480%) skewX(-14deg); }
  100% { transform:translateX(480%) skewX(-14deg); }
}
@keyframes cintila {
  0%, 100% { transform:scale(.45) rotate(0deg);  opacity:.55; }
  50%      { transform:scale(1.1) rotate(45deg); opacity:1; }
}

/* v5: a capa fora da tela não anima. O script põe .capa--fora quando ela
   sai de quadro; sem script, ou se o observer não disparar, as animações
   seguem rodando, que é o modo de falha inofensivo. */
.capa--fora .arte, .capa--fora .arte__neon, .capa--fora .arte__reflexo,
.capa--fora .arte__brilho, .capa--fora .capa__chao i { animation-play-state:paused; }

@media (prefers-reduced-motion: reduce) {
  .arte, .arte__giro, .arte__neon, .arte__reflexo, .arte__brilho, .capa__chao i { animation:none; transition:none; }
  .arte__giro { transform:none; }
  .arte__faixa { display:none; }
}

/* ---------------- Rótulo e título ---------------- */
.rotulo { font-size:var(--t-rot); letter-spacing:.14em; text-transform:uppercase; color:var(--ciano); margin-bottom:var(--e3); }
.titulo { font-size:var(--t-tit); line-height:1.15; color:var(--branco); margin-bottom:var(--e4); text-shadow:0 0 14px rgba(155,92,255,.55); }

/* ---------------- O evento ----------------
   Texto à esquerda, mosaico à direita. No celular, texto e depois fotos. */
.evento { padding:var(--e5) 0; border-top:1px solid var(--linha); background:var(--noite-0); }
.evento__in { display:grid; gap:var(--e4); align-items:center; }
@media (min-width:900px){ .evento__in { grid-template-columns:1fr 1.05fr; gap:var(--e5); } }
.evento__frase { font-size:var(--t-grande); line-height:1.1; font-weight:700; color:var(--branco); letter-spacing:-.012em; }
.evento__frase em {
  font-style:normal; background:var(--degrade);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.evento__corpo { margin-top:var(--e3); font-size:var(--t-lide); color:var(--texto-2); max-width:44ch; line-height:1.6; }

.mosaico {
  display:grid; gap:6px;
  grid-template-columns:1.25fr 1fr; grid-template-rows:auto auto;
  grid-template-areas:"a b" "a c";
}
.mosaico figcaption { grid-column:1 / -1; font-size:var(--t-mi); color:var(--texto-2); margin-top:var(--e1); }
/* O tingido. A foto já é preto e branco assado; por cima dela o degradê do
   CONF entra em modo "color", e um véu violeta em "screen" levanta a sombra,
   porque as fotos de 2024 são escuras de origem. Sem
   filtro de CSS na imagem, que custaria pintura em aparelho fraco. */
.foto { position:relative; overflow:hidden; border-radius:4px; background:var(--noite); }
.foto img { width:100%; height:100%; object-fit:cover; }
.foto::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:var(--degrade); mix-blend-mode:color; opacity:.85;
}
.foto::before {
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:var(--violeta); mix-blend-mode:screen; opacity:.22;
}
.foto--a { grid-area:a; min-height:100%; }
.foto--b { grid-area:b; aspect-ratio:4 / 3; }
.foto--c { grid-area:c; aspect-ratio:4 / 3; }
.foto--c::after { background:linear-gradient(95deg, var(--violeta), var(--ciano)); }
.foto--b::after { background:linear-gradient(95deg, var(--laranja), var(--rosa)); }

/* ---------------- O bilhete ----------------
   Duas partes separadas por picote: o canhoto com o preço e o botão, e a
   ficha com os dados. A borda é o degradê do CONF. */
.ingresso { padding:var(--e5) 0; }
.bilhete {
  position:relative; display:grid; border-radius:10px;
  background:
    linear-gradient(var(--noite-2), var(--noite-2)) padding-box,
    var(--degrade) border-box;
  border:3px solid transparent;
  box-shadow:0 0 40px rgba(155,92,255,.25);
}
@media (min-width:860px){ .bilhete { grid-template-columns:minmax(300px, .9fr) 1.3fr; } }
.bilhete__canhoto {
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--e2);
  padding:var(--e4);
  border-bottom:2px dashed rgba(244,245,255,.3);
}
@media (min-width:860px){
  .bilhete__canhoto { border-bottom:0; border-right:2px dashed rgba(244,245,255,.3); }
}
.bilhete__rot { font-size:var(--t-rot); letter-spacing:.14em; text-transform:uppercase; color:var(--ciano); }
.bilhete__preco { font-size:var(--t-preco); line-height:1; white-space:nowrap; color:var(--rosa); text-shadow:var(--neon-rosa); letter-spacing:.01em; }
.bilhete__nota { font-size:var(--t-mi); color:var(--texto-2); margin-bottom:var(--e2); }
.bilhete__ficha { display:grid; gap:0; padding:var(--e2) var(--e4); }
@media (min-width:560px){ .bilhete__ficha { grid-template-columns:1fr 1fr; column-gap:var(--e4); } }
.bilhete__ficha > div {
  display:grid; grid-template-columns:28px 1fr; column-gap:var(--e2); row-gap:2px;
  padding:var(--e3) 0; border-bottom:1px solid var(--linha);
}
.bilhete__ficha > div:nth-last-child(-n+2) { border-bottom:0; }
@media (max-width:559px){ .bilhete__ficha > div:nth-last-child(2) { border-bottom:1px solid var(--linha); } }
.bilhete__i { grid-row:span 2; width:24px; height:24px; fill:none; stroke:var(--ciano); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; margin-top:3px; }
.bilhete dt { font-size:var(--t-mi); color:var(--texto-2); }
.bilhete dd { color:var(--branco); font-weight:700; line-height:1.45; }
.bilhete dd .link { display:inline-block; margin-top:6px; font-size:var(--t-mi); }

/* ---------------- Dúvidas ---------------- */
.faq { padding:0 0 var(--e5); }
.faq__in > * { max-width:820px; }
.faq__lista { border-top:1px solid var(--linha); }
.faq details { border-bottom:1px solid var(--linha); }
.faq summary {
  cursor:pointer; list-style:none; padding:var(--e3) 40px var(--e3) 0; position:relative;
  font-weight:700; font-size:var(--t-lide); color:var(--branco);
  transition:color var(--m-est);
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after {
  content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font-family:'Silkscreen', monospace; font-size:22px; color:var(--ciano);
}
.faq details[open] summary::after { content:"-"; }
@media (hover:hover){ .faq summary:hover { color:var(--ciano); } }
.faq summary:active { color:var(--ciano); }
.faq details p { padding:0 0 var(--e3); color:var(--texto-2); max-width:62ch; }

/* ---------------- Fecho ---------------- */
.fecho {
  padding:var(--e5) 0; text-align:center; border-top:1px solid var(--linha);
  background:radial-gradient(70% 90% at 50% 100%, rgba(255,61,158,.22), transparent 70%), var(--noite-0);
}
.fecho__in { display:flex; flex-direction:column; align-items:center; gap:var(--e2); }
.fecho__tit { font-size:var(--t-tit); color:var(--branco); line-height:1.25; }
.fecho__tit span { color:var(--ciano); text-shadow:var(--neon-ciano); }
.fecho__sub { color:var(--texto-2); font-size:var(--t-lide); margin-bottom:var(--e3); }

/* ---------------- Rodapé ---------------- */
.rodape { padding:var(--e3) 0; border-top:1px solid var(--linha); font-size:var(--t-mi); color:var(--texto-2); text-align:center; background:var(--noite-0); }

/* ---------------- Barra do polegar ---------------- */
.polegar { display:none; }
@media (max-width:759px){
  body { padding-bottom:calc(var(--polegar) + env(safe-area-inset-bottom, 0px)); }
  .polegar {
    display:flex; align-items:center; justify-content:space-between; gap:var(--e2);
    position:fixed; left:0; right:0; bottom:0; z-index:30; height:calc(var(--polegar) + env(safe-area-inset-bottom, 0px));
    padding:0 max(20px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(20px, env(safe-area-inset-left, 0px));
    transform:translateZ(0);
    background:rgba(5,8,51,.94); border-top:2px solid var(--rosa);
    box-shadow:0 -6px 24px rgba(255,61,158,.22);
  }
  .polegar__preco { font-size:18px; color:var(--branco); line-height:1.1; }
  .polegar__preco span { display:block; font-size:11px; color:var(--ciano); letter-spacing:.1em; text-transform:uppercase; margin-bottom:2px; }
}