/* =========================================================
   KIVORA TV — Landing page
   ========================================================= */

/* ---------- TOKENS ---------- */
:root{
  --ink:#07060A;
  --ink-2:#0C0A10;
  --ink-3:#12101A;
  --ink-4:#1A1622;

  --paper:#F7F2ED;
  --paper-2:#DED6D2;
  --muted:#9C93A0;
  --muted-2:#6F6775;
  /* cinza claro para texto secundário sobre os fundos coloridos dos cards:
     --muted cai para ~3,9:1 em cima do carmim/violeta e reprova no AA */
  --muted-hi:#B9AFBC;

  --wine:#5E0A1D;
  --crimson:#B01236;
  --rose:#E8305C;
  --rose-lite:#FF6D8E;
  --gold:#E3BE86;

  /* Identidade do Plano Mensal. O roxo não é cor nova solta: os pretos do site
     (--ink-3 #12101A, --ink-4 #1A1622) já puxam para o violeta, então ele
     assenta sem brigar com o carmim do Anual nem com o dourado da oferta. */
  --violet:#8B5CF6;
  --violet-lite:#B794FF;
  --violet-deep:#4A2196;

  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);

  --serif:"Playfair Display", Georgia, "Times New Roman", serif;
  --sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* PÁGINA SÓ PARA CELULAR (18/09/2026)
     O site inteiro vive numa coluna de no máximo --app. No celular ela é a
     tela toda; num computador vira uma "tela de celular" centralizada, e o
     layout é exatamente o mesmo — não existe mais versão de desktop.
     --vw substitui a unidade vw em todo o arquivo: é 1vw até o limite da
     coluna, para que nada cresça além do tamanho de um celular grande. */
  --app:480px;
  --vw:min(1vw, 4.8px);
  --wrap:var(--app);
  --sec:clamp(52px, calc(13 * var(--vw)), 64px);
  --pad:clamp(20px, calc(5 * var(--vw)), 40px);
  --r:14px;

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; background:#020103}
body{
  margin:0 auto;
  max-width:var(--app);
  min-height:100vh;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,video{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,p{margin:0}
table{border-collapse:collapse;width:100%}

/* aberta num computador, a coluna ganha um contorno discreto de aparelho */
@media(min-width:520px){
  body{box-shadow:0 0 0 1px var(--line), 0 0 90px -10px rgba(0,0,0,.9)}
}

::selection{background:var(--rose);color:#fff}

:focus-visible{outline:2px solid var(--rose-lite);outline-offset:3px;border-radius:4px}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--rose);color:#fff;padding:12px 18px}
.skip:focus{left:12px;top:12px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

/* o header rola junto com a página (não é mais fixo): a âncora só precisa
   de um respiro acima do título */
section[id],main[id],.steps{scroll-margin-top:12px}

/* ---------- TIPOGRAFIA BASE ---------- */
.eyebrow{
  font-size:.76rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--rose-lite);
  margin-bottom:16px;
}
.h2{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(1.85rem, calc(5.4 * var(--vw)), 3.1rem);
  line-height:1.12;
  letter-spacing:-.015em;
}
.h2 em{font-style:italic;color:var(--rose-lite)}
.lead{
  color:var(--muted);
  font-size:clamp(.98rem,calc(2.6 * var(--vw)),1.09rem);
  max-width:52ch;
  margin-top:18px;
}
/* variante com mais presença, para quando o parágrafo carrega a promessa */
.lead--strong{color:var(--paper-2);font-weight:500}
.ph{color:var(--muted-2);font-size:.85em;font-style:italic}
.br-d{display:none}

/* ---------- BOTÕES ---------- */
.btn{
  --bg:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;
  padding:0 26px;
  border-radius:999px;
  font-weight:600;
  font-size:.95rem;
  letter-spacing:.01em;
  text-align:center;
  position:relative;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
/* will-change só durante a interação. Fixo, ele mantinha uma camada de
   composição por botão o tempo todo, inclusive fora da tela. */
.btn:hover,.btn:focus-visible,.btn:active{will-change:transform}
.btn--lg{min-height:60px;padding:0 34px;font-size:1.02rem}
.btn--sm{min-height:44px;padding:0 20px;font-size:.88rem}
.btn--block{display:flex;width:100%}

.btn--primary{
  background:linear-gradient(135deg,var(--crimson) 0%, var(--rose) 55%, #D31E52 100%);
  color:#fff;
  box-shadow:0 10px 30px -12px rgba(232,48,92,.75), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 18px 44px -14px rgba(232,48,92,.9), inset 0 1px 0 rgba(255,255,255,.3)}
.btn--primary:active{transform:translateY(0)}

.btn--outline{border:1px solid var(--line-2);color:var(--paper);background:rgba(255,255,255,.02)}
.btn--outline:hover{border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.06)}

.btn--ghost{border:1px solid var(--line-2);background:rgba(255,255,255,.05)}
.btn--ghost:hover{border-color:var(--rose);color:#fff;background:rgba(232,48,92,.14)}

.btn--link{
  min-height:52px;padding:0 6px;color:var(--muted);font-weight:500;
  border-bottom:1px solid transparent;border-radius:0;
}
.btn--link:hover{color:var(--paper);border-bottom-color:var(--rose)}

/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease), transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* =========================================================
   HEADER
   ========================================================= */
/* 18/09/2026: o header NÃO é mais fixo. Ele fica por cima do topo do hero
   (que reserva o espaço dele no padding-top) e sai da tela junto com a
   rolagem, como parte da página. Absoluto em relação ao <body> — a coluna
   do celular —, e não à janela: por isso o body tem position:relative.
   top/left/right em vez de inset: iOS abaixo de 14.5 não entende inset.
   Não volte para position:fixed/sticky: no navegador interno do Instagram
   ele ficava flutuando sobre o conteúdo, e nenhum JS mexe mais nele. */
body{position:relative}
.hd{
  position:absolute;top:0;left:0;right:0;z-index:90;
}
.hd__in{
  padding:10px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
/* área de toque confortável no celular */
.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px}
.brand__mark{
  width:9px;height:26px;border-radius:2px;
  background:linear-gradient(180deg,var(--rose) 0%, var(--wine) 100%);
  box-shadow:0 0 18px -2px rgba(232,48,92,.8);
}
.brand__name{
  font-family:var(--serif);
  font-weight:700;
  font-size:1.22rem;
  letter-spacing:.14em;
}
.brand__tv{
  color:var(--rose-lite);
  font-family:var(--sans);
  font-size:.72em;
  font-weight:700;
  letter-spacing:.16em;
  margin-left:5px;
  vertical-align:2px;
}
.brand--sm .brand__name{font-size:1.05rem}
.brand--sm .brand__mark{height:22px;width:7px}

/* O menu de navegação do desktop saiu junto com a versão de desktop.
   No celular o header tem só a marca e um atalho curto para os planos. */
.hd__cta{min-height:40px;padding:0 16px;font-size:.8rem}

/* =========================================================
   HERO
   ========================================================= */
/* Com o vídeo dentro, o hero deixou de ter a altura fixa de uma tela:
   headline + vídeo + sub + selos + botão definem a altura sozinhos. */
.hero{
  position:relative;
  padding:92px 0 52px;
  overflow:hidden;
  isolation:isolate;
}
/* o muro de fundo é estático: promovido a camada própria, ele é pintado uma vez
   e depois só composto — sem repaint a cada frame de scroll.
   O filtro fica no container (1 passada) e não em cada imagem (24 passadas). */
.hero__wall{
  position:absolute;inset:-14% -22%;
  display:flex;gap:14px;
  transform:rotate(-9deg) scale(1.18) translateZ(0);
  z-index:-2;
  opacity:.62;
  filter:saturate(.9) contrast(1.05);
  will-change:transform;
  contain:layout paint style;
  pointer-events:none;
}
.hero__col{display:flex;flex-direction:column;gap:14px;flex:1 0 0;min-width:0}
.hero__col img{
  width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:8px;
}
.hero__veil{
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(120% 80% at 18% 92%, rgba(94,10,29,.55) 0%, transparent 62%),
    linear-gradient(180deg, rgba(7,6,10,.92) 0%, rgba(7,6,10,.58) 32%, rgba(7,6,10,.86) 68%, var(--ink) 100%),
    linear-gradient(90deg, rgba(7,6,10,.94) 0%, rgba(7,6,10,.55) 55%, rgba(7,6,10,.8) 100%);
}
/* hero centralizado: headline, faixa de apps, botões e microcopy no eixo.
   Centralizar só a headline e a imagem deixaria o resto pendurado à esquerda. */
.hero__in{
  width:100%;
  padding-inline:var(--pad);position:relative;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.hero__h1{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(1.8rem, calc(8.2 * var(--vw)), 2.45rem);
  line-height:1.1;
  letter-spacing:-.022em;
  max-width:100%;
  /* equilibra as linhas em vez de deixar "favorita" sozinha na última */
  text-wrap:balance;
  text-shadow:0 2px 40px rgba(0,0,0,.6);
}
.hero__h1 em{
  font-style:italic;
  background:linear-gradient(100deg,var(--rose-lite) 0%, var(--gold) 130%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__sub{
  margin-top:22px;
  color:var(--paper-2);
  font-size:1rem;
  max-width:34ch;
  /* 300 era fino demais sobre o muro de pôsteres: em telas pequenas o texto
     sumia nas capas. 400 mantém a leveza e passa no contraste AA. */
  font-weight:400;
}

/* Temas do catálogo (Romances, Dramas, +18, Suspense...), em três colunas
   iguais: seis chips viram uma grade 3x2 arrumada em qualquer celular. */
.hero__badges{
  margin:22px 0 0;
  width:100%;max-width:360px;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:8px;
}
.hero__badges li{
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 6px;
  border-radius:12px;
  font-size:.8rem;font-weight:600;
  color:#fff;
  border:1px solid rgba(255,109,142,.34);
  /* fundo levemente opaco: os chips ficam sobre o muro de pôsteres e
     precisam de base própria para o texto não brigar com as capas */
  background:linear-gradient(160deg, rgba(232,48,92,.2), rgba(12,10,16,.78) 70%);
  white-space:nowrap;
}
.hero__badge-ico{font-size:1em;line-height:1}
@media(max-width:359px){
  .hero__badges li{font-size:.72rem;gap:4px;padding:8px 4px}
}

.hero__cta{
  margin-top:26px;width:100%;
  display:flex;justify-content:center;
}
.hero__cta .btn--primary{width:100%;max-width:360px}
.hero__micro{
  margin-top:18px;
  display:flex;align-items:center;justify-content:center;gap:9px;
  color:var(--muted);font-size:.8rem;line-height:1.45;
  max-width:36ch;
}
.dot{
  width:7px;height:7px;border-radius:50%;background:#39D98A;
  box-shadow:0 0 0 4px rgba(57,217,138,.16);
  flex:0 0 auto;
}
/* O indicador de scroll (.hero__scroll) saiu: o hero não ocupa mais
   exatamente uma tela, então a linha não apontava para nada. */

/* celular deitado: hero mais baixo */
@media(orientation:landscape) and (max-height:560px){
  .hero{padding:80px 0 44px}
}

/* =========================================================
   TUDO QUE VOCÊ VAI ASSISTIR — imagem logo abaixo do hero
   A imagem original ("tudo que voce vai assistir.png", na raiz) é uma
   faixa de 1920x352 com oito ícones. assets/img/tudo-que-vai-assistir.webp
   é a mesma faixa inteira, só sem a margem transparente (1200x173).
   Fica pequena de propósito: uma tira discreta, não um bloco que ocupa a
   seção (pedido de 18/09/2026).
   ========================================================= */
.watch{
  padding:4px 0 calc(var(--sec) * .5);
  text-align:center;
}
.watch .h2{font-size:clamp(1.3rem,calc(5.8 * var(--vw)),1.6rem)}
.watch__img{
  width:88%;height:auto;
  margin:14px auto 0;
  max-width:340px;
}

/* =========================================================
   CATÁLOGO — duas fileiras em esteira contínua
   ---------------------------------------------------------
   Quantas fileiras: WALL_ROWS; velocidade: CATALOGO_VELOCIDADE
   (os dois em assets/js/config.js).

   As fileiras passam sozinhas, sem parar, da esquerda para a direita.
   O movimento é a animação "esteira" abaixo: transform no .shelf__track,
   executado pelo compositor — a thread principal não trabalha a cada
   quadro, então a esteira não trava nem atrapalha a rolagem da página.
   O trilho tem o conjunto de pôsteres duas vezes (o segundo é o "eco",
   aria-hidden); andar exatamente -50% -> 0 fecha o laço sem emenda.
   Por isso o espaço entre cards é margin-right (e não gap): cada card
   carrega o próprio espaço e as duas metades medem exatamente o mesmo.

   O main.js define --dur (duração de uma volta, para a velocidade em px/s
   ser a mesma nas duas fileiras) e --atraso (cada fileira começa num
   ponto diferente do laço), e pausa a esteira pelas classes:
     #wall.is-parado     fora da tela ou aba oculta
     .shelf.is-segurada  dedo/mouse segurando a fileira
   ========================================================= */
.cat{padding:calc(var(--sec) * .6) 0 var(--sec);position:relative}
.cat__head{text-align:center}
.cat__head .lead{margin-inline:auto}

.wall{
  --poster-w:clamp(112px,calc(33 * var(--vw)),160px);
  margin-top:28px;
  display:flex;flex-direction:column;gap:12px;
  position:relative;
}
/* degradês nas bordas em vez de mask-image: a máscara obrigaria o navegador
   a recompor a faixa inteira a cada quadro da esteira */
.wall::before,.wall::after{
  content:"";position:absolute;top:0;bottom:0;width:clamp(28px,calc(7 * var(--vw)),90px);
  z-index:2;pointer-events:none;
}
.wall::before{left:0;background:linear-gradient(90deg,var(--ink),transparent)}
.wall::after{right:0;background:linear-gradient(270deg,var(--ink),transparent)}

.shelf{
  overflow:hidden;
  padding-block:2px;
  /* isola cada fileira: o que acontece nela não invalida o resto da página */
  contain:layout paint style;
  -webkit-tap-highlight-color:transparent;
}
.shelf__track{
  display:flex;
  width:max-content;
  animation:esteira var(--dur,80s) linear infinite;
  animation-delay:var(--atraso,0s);
}
@keyframes esteira{
  from{transform:translate3d(-50%,0,0)}
  to{transform:translate3d(0,0,0)}
}
#wall.is-parado .shelf__track,
.shelf.is-segurada .shelf__track{animation-play-state:paused}
@media(hover:hover){
  .shelf:hover .shelf__track{animation-play-state:paused}
}

.poster{
  flex:0 0 auto;
  width:var(--poster-w,clamp(112px,calc(33 * var(--vw)),160px));
  margin-right:12px;
  aspect-ratio:2/3;
  border-radius:9px;
  overflow:hidden;
  position:relative;
  /* placeholder enquanto o pôster carrega — mesma proporção do card */
  background:linear-gradient(160deg,#1B1622,#100D16);
  box-shadow:0 5px 14px -10px rgba(0,0,0,.85);
  -webkit-user-select:none;user-select:none;
  /* o card não influencia nem é influenciado pelo resto da fileira */
  contain:layout paint style;
  /* SEM content-visibility:auto aqui: dentro de uma faixa animada só pelo
     compositor, o navegador não reavalia quais cards entraram na tela, e
     um card "pulado" apareceria em branco passando. */
}
.poster img{
  width:100%;height:100%;object-fit:cover;
  -webkit-user-drag:none;
  pointer-events:none;
}
.poster::after{
  content:"";position:absolute;inset:0;
  border:1px solid rgba(255,255,255,.07);border-radius:9px;
  box-shadow:inset 0 -30px 38px -34px rgba(0,0,0,.85);
  pointer-events:none;
}

/* Quem pediu menos movimento não recebe esteira: a fileira vira uma faixa
   que a pessoa desliza com o dedo, e o eco (cópia do laço) some. */
@media(prefers-reduced-motion:reduce){
  .shelf{
    overflow-x:auto;overflow-y:hidden;
    padding-inline:var(--pad);
    scrollbar-width:none;
    overscroll-behavior-x:contain;
  }
  .shelf::-webkit-scrollbar{display:none}
  .shelf__track{animation:none}
  .poster--eco{display:none}
}

.cat__foot{margin-top:30px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px}
/* As etiquetas de temas do catálogo (.tags: Romance, Fantasia, Amor e
   vingança...) saíram em 18/09/2026, a pedido. */
/* O vídeo de prévia (.phone, .phone__play, .hero__video) saiu da página em
   18/09/2026, a pedido. O CSS dele saiu junto. */

/* A seção "Curiosity gap" (Só um detalhe… / 01 02 03) foi removida a pedido.
   O CSS dela saiu junto para não deixar código morto. */

/* As secoes "Em destaque" (.feat), "Por que a Kivora" (.ben) e o CTA
   intermediario (.mid) ja tinham sido retiradas do HTML antes desta revisao.
   O CSS delas seguia no arquivo sem uso e saiu agora — esta preservado em
   _versao_anterior_kivora_*, caso alguem queira restaurar as secoes.
   Conferido por busca: nenhuma classe .feat/.ben/.mid no HTML atual. */

/* =========================================================
   PROVA SOCIAL
   ========================================================= */
.soc{padding:var(--sec) 0 calc(var(--sec) * .7);overflow:hidden}
.soc__head{max-width:760px;margin-inline:auto;text-align:center}
.soc__head .lead{margin-inline:auto}

/* Um print por vez, centralizado na página.
   O trilho vira uma "janela" da largura de um card; cada card ocupa 100% dela,
   então nunca aparecem dois ao mesmo tempo. O arrastar com o dedo continua
   sendo o scroll nativo com snap — nada de gesto reimplementado em JS. */
/* No celular continua um print por vez, ocupando quase toda a largura.
   No desktop a janela cresce muito: 300px num monitor de 1440 deixava as
   mensagens ilegíveis — era o principal problema desta seção. */
.soc__rail{
  margin:clamp(30px,calc(5 * var(--vw)),46px) auto 0;
  width:min(330px, calc(86 * var(--vw)));
  display:flex;align-items:stretch;gap:14px;
  overflow-x:auto;
  padding:6px 0 8px;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  cursor:grab;
  overscroll-behavior-x:contain;
  /* isola o repaint do trilho do resto da página */
  contain:layout paint style;
}
.soc__rail::-webkit-scrollbar{display:none}
.soc__rail.is-drag{cursor:grabbing;scroll-behavior:auto}

.soc__card{
  flex:0 0 100%;
  width:100%;
  aspect-ratio:9/16;          /* todos os cards com a mesma altura */
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(232,48,92,.28);
  background:linear-gradient(160deg,#1B1622,#100D16);
  scroll-snap-align:center;
  position:relative;
  cursor:zoom-in;
  transition:border-color .5s var(--ease);
  box-shadow:0 34px 70px -34px rgba(0,0,0,1), 0 0 0 1px rgba(232,48,92,.14);
}
.soc__card img{
  display:block;width:100%;height:100%;
  /* contain em vez de cover: cover cortava o fim das conversas, que é
     justamente onde estão as mensagens que interessam ler */
  object-fit:contain;object-position:center;
  background:#0B0910;
  -webkit-user-drag:none;
}
@media(hover:hover){
  .soc__card:hover{border-color:rgba(232,48,92,.6)}
}

/* ---- controles do carrossel ---- */
/* acompanham a largura do print, para o conjunto ficar centralizado */
.soc__ctrl{
  margin:clamp(22px,calc(4 * var(--vw)),32px) auto 0;
  width:min(360px, calc(86 * var(--vw)));
  display:flex;align-items:center;gap:14px;
}
.soc__arrow{
  flex:0 0 auto;
  width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid var(--line-2);
  background:rgba(255,255,255,.03);
  transition:background .3s var(--ease), border-color .3s var(--ease), opacity .3s var(--ease);
}
.soc__arrow svg{width:20px;height:20px;fill:none;stroke:var(--paper);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.soc__arrow:hover{background:rgba(232,48,92,.16);border-color:var(--rose)}
.soc__arrow:disabled{opacity:.3;pointer-events:none}

.soc__track{
  flex:1 1 auto;height:2px;border-radius:2px;
  background:rgba(255,255,255,.1);
  overflow:hidden;
}
.soc__track span{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--crimson),var(--rose));
  transform-origin:left center;
  transition:width .35s var(--ease);
}
.soc__count{
  flex:0 0 auto;
  font-size:.82rem;color:var(--muted-2);
  font-variant-numeric:tabular-nums;
  display:flex;gap:5px;
}
.soc__count b{color:var(--paper);font-weight:600}

/* ---- depoimentos em áudio ---- */
/* o sprite só guarda o desenho da estrela: não ocupa espaço no fluxo */
.voz__sprite{position:absolute;width:0;height:0;overflow:hidden}

.voz{margin-top:clamp(46px,calc(7 * var(--vw)),72px)}
.voz__lead{
  text-align:center;
  font-size:.86rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted-2);
}
.voz__grid{
  margin:clamp(22px,calc(4 * var(--vw)),34px) auto 0;
  display:grid;gap:14px;
}

.voz__card{
  height:100%;
  padding:20px;
  border-radius:18px;
  border:1px solid var(--line);
  background:linear-gradient(160deg,#1B1622,#100D16);
  box-shadow:0 24px 50px -30px rgba(0,0,0,.9);
  transition:border-color .4s var(--ease);
}
.voz__card.is-playing{border-color:rgba(232,48,92,.45)}
/* o <audio> não tem controls: quem desenha o player é o bloco abaixo */
.voz__card audio{display:none}

.voz__top{display:flex;align-items:center;gap:14px}
.voz__face{
  flex:0 0 auto;
  width:60px;height:60px;border-radius:50%;
  object-fit:cover;
  border:1px solid rgba(232,48,92,.3);
}
.voz__who{min-width:0}
.voz__name{font-weight:600;line-height:1.25}
.voz__stars{display:flex;gap:2px;margin-top:3px}
.voz__stars svg{width:14px;height:14px;fill:var(--gold)}
.voz__tag{margin-top:2px;font-size:.78rem;color:var(--muted-2)}

.voz__player{
  margin-top:16px;
  display:flex;align-items:center;gap:13px;
}
.voz__play{
  flex:0 0 auto;
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--crimson),var(--rose));
  box-shadow:0 8px 22px -10px rgba(232,48,92,.9);
  transition:transform .25s var(--ease);
}
@media(hover:hover){.voz__play:hover{transform:scale(1.06)}}
.voz__ico{width:20px;height:20px;fill:#fff;grid-area:1/1}
.voz__ico--pause{display:none}
.is-playing .voz__ico--play{display:none}
.is-playing .voz__ico--pause{display:block}

/* duas fileiras de barras idênticas, uma por cima da outra:
   a de cima é recortada até a posição atual do áudio (--p) */
.voz__wave{
  position:relative;
  flex:1 1 auto;min-width:0;height:30px;
  cursor:pointer;
}
.voz__bars{
  position:absolute;inset:0;
  display:flex;align-items:center;gap:2px;
}
.voz__bars i{
  flex:1 1 0;min-width:0;
  height:var(--h,40%);
  border-radius:2px;
  background:rgba(255,255,255,.18);
}
.voz__bars--on{
  clip-path:inset(0 calc(100% - var(--p,0%)) 0 0);
  transition:clip-path .12s linear;
}
.voz__bars--on i{background:linear-gradient(180deg,var(--rose-lite),var(--rose))}

.voz__time{
  flex:0 0 auto;
  font-size:.8rem;color:var(--muted-2);
  font-variant-numeric:tabular-nums;
}

@media(prefers-reduced-motion:reduce){
  .voz__bars--on{transition:none}
}

/* =========================================================
   PLANOS
   ========================================================= */
.plan{
  padding:var(--sec) 0;
  background:
    radial-gradient(80% 55% at 78% 22%, rgba(176,18,54,.2) 0%, transparent 66%),
    var(--ink-2);
  border-block:1px solid var(--line);
}
/* ---------------------------------------------------------
   Quatro planos (18/09/2026): Semanal, Mensal, Semestral e Vitalício.
   Substituíram os cards Essencial/Completo (.card, .card--basic,
   .card--premium, .plan__grid, .plan__delta) — o CSS deles saiu junto.

   Visual: fundo quase preto, borda fina, verde nos planos normais e
   dourado no Vitalício, que é o card mais chamativo.

   Layout por container query (não por largura da janela):
     • a grade vira 2 colunas quando a ÁREA dela passa de 680px;
     • a lista de benefícios vira 2 colunas quando o miolo do card passa
       de 360px (no computador, onde a coluna tem 480px).
   Na coluna de celular do site (máx. 480px) a grade fica em 1 card por
   linha; se um dia a coluna crescer, os 2 por linha entram sozinhos.
   Navegador sem container query (iOS < 16): tudo em 1 coluna, sem quebrar.
   --------------------------------------------------------- */
.plan{
  --pl-green:#22C55E;
  --pl-green-hi:#4ADE80;
  --pl-green-lo:#16A34A;
  --pl-gold:#FACC15;
  --pl-gold-hi:#FDE68A;
  --pl-gold-lo:#EAB308;
}
.plan > .wrap{container:pl-area / inline-size}
.pl-sprite{position:absolute;width:0;height:0;overflow:hidden}

.pl-head{text-align:center;margin:0 auto 32px;max-width:36ch}
.pl-head__t{
  font-family:var(--sans);font-weight:800;
  font-size:clamp(1.3rem,calc(6 * var(--vw)),1.6rem);
  letter-spacing:.06em;text-transform:uppercase;
  line-height:1.2;
}
.pl-head__sub{margin-top:10px;color:var(--muted);font-size:.95rem;line-height:1.5}

.pl-grid{display:grid;gap:26px 18px;align-items:stretch}
@container pl-area (min-width:680px){
  .pl-grid{grid-template-columns:1fr 1fr}
}

/* ---- card base: planos normais (verde) ---- */
.pl-card{
  container:pl-card / inline-size;
  position:relative;
  display:flex;flex-direction:column;
  padding:24px 20px 20px;
  border-radius:18px;
  border:1px solid rgba(34,197,94,.34);
  background:linear-gradient(180deg,#111316 0%,#0A0B0D 100%);
  box-shadow:0 20px 50px -30px rgba(0,0,0,.95);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.pl-card__top{display:flex;align-items:center;gap:12px}
.pl-card__ico{
  flex:0 0 auto;
  width:42px;height:42px;border-radius:12px;
  display:grid;place-items:center;
  background:rgba(34,197,94,.12);
  border:1px solid rgba(34,197,94,.34);
}
.pl-card__ico svg{width:22px;height:22px;fill:var(--pl-green)}
.pl-card__t{font-family:var(--sans);font-size:1.12rem;font-weight:700;line-height:1.25;color:#fff}
.pl-card__sub{margin-top:2px;font-size:.82rem;color:var(--muted)}

.pl-card__price{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:2px;
  margin-top:18px;line-height:1;color:#fff;
}
.pl-cur{font-size:1.05rem;font-weight:600;color:rgba(255,255,255,.78);margin-right:5px}
.pl-num{font-size:clamp(2.6rem,calc(12 * var(--vw)),3.1rem);font-weight:800;letter-spacing:-.03em}
.pl-cents{font-size:1.35rem;font-weight:700}
.pl-card__day{margin-top:8px;font-size:.86rem;font-weight:600;color:var(--pl-green-hi)}

.pl-card__list{
  display:grid;gap:10px;
  margin:18px 0 22px;padding-top:18px;
  border-top:1px solid rgba(255,255,255,.07);
  flex:1 1 auto;align-content:start;
}
/* 360px = largura INTERNA do card (a consulta mede sem o padding). Abaixo
   disso cada coluna ficaria com menos de ~170px e itens como "3 telas
   simultâneas" quebrariam linha — em 1 coluna a lista fica mais limpa. */
@container pl-card (min-width:360px){
  .pl-card__list{grid-template-columns:1fr 1fr;gap:10px 14px}
}
.pl-card__list li{
  display:flex;gap:8px;align-items:flex-start;
  font-size:.88rem;line-height:1.35;color:#E9E6EC;
  min-width:0;overflow-wrap:anywhere;
}
.pl-card__list svg{flex:0 0 auto;width:16px;height:16px;margin-top:1px;fill:var(--pl-green)}

/* botão: 100% da largura interna, alto, com o ícone do PIX */
.pl-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:54px;padding:0 18px;
  border-radius:12px;
  font-size:1rem;font-weight:800;letter-spacing:.01em;
  color:#03200E;
  background:linear-gradient(180deg,#34D86F 0%,var(--pl-green-lo) 100%);
  box-shadow:0 12px 26px -14px rgba(34,197,94,.9), inset 0 1px 0 rgba(255,255,255,.35);
  transition:filter .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.pl-btn svg{width:20px;height:20px;fill:currentColor;flex:0 0 auto}

/* selos acima do card (Mais popular / Melhor oferta) */
.pl-card__flag{
  position:absolute;top:0;left:50%;transform:translate(-50%,-50%);
  padding:6px 14px;border-radius:999px;
  font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  white-space:nowrap;
  color:#241900;
  background:linear-gradient(135deg,var(--pl-gold-hi),var(--pl-gold));
  box-shadow:0 8px 20px -10px rgba(250,204,21,.9);
}
.pl-card--pop,.pl-card--vip{padding-top:30px}

/* ---- Mensal: mais popular (verde mais forte, um pouco maior) ---- */
.pl-card--pop{
  border:1.5px solid var(--pl-green);
  background:linear-gradient(180deg,rgba(34,197,94,.17) 0%,#0B100D 48%,#0A0B0D 100%);
  box-shadow:0 0 0 3px rgba(34,197,94,.1), 0 22px 54px -28px rgba(34,197,94,.7);
}
.pl-card--pop .pl-card__t{font-size:1.22rem}
.pl-card--pop .pl-btn{
  background:linear-gradient(180deg,var(--pl-green-hi) 0%,var(--pl-green) 100%);
  box-shadow:0 14px 30px -12px rgba(74,222,128,.9), inset 0 1px 0 rgba(255,255,255,.45);
}

/* ---- Vitalício: o mais chamativo (dourado, com brilho) ---- */
.pl-card--vip{
  border:1.5px solid var(--pl-gold);
  background:
    radial-gradient(120% 55% at 50% 0%, rgba(250,204,21,.17) 0%, transparent 62%),
    linear-gradient(180deg,#16130A 0%,#0B0A07 100%);
  box-shadow:
    0 0 0 3px rgba(250,204,21,.12),
    0 0 44px -12px rgba(250,204,21,.45),
    0 26px 60px -28px rgba(250,204,21,.55);
}
.pl-card--vip .pl-card__flag{
  padding:7px 16px;font-size:.74rem;
  box-shadow:0 0 22px -4px rgba(250,204,21,.8);
}
.pl-card--vip .pl-card__ico{background:rgba(250,204,21,.13);border-color:rgba(250,204,21,.45)}
.pl-card--vip .pl-card__ico svg,
.pl-card--vip .pl-card__list svg{fill:var(--pl-gold)}
.pl-card--vip .pl-card__t{font-size:1.22rem}
.pl-card--vip .pl-card__sub{color:var(--pl-gold-hi)}
.pl-card--vip .pl-card__price{color:var(--pl-gold)}
.pl-card--vip .pl-cur{color:var(--pl-gold-hi)}
.pl-card--vip .pl-card__list{border-top-color:rgba(250,204,21,.16)}
.pl-card__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.pl-card__tags li{
  padding:5px 10px;border-radius:999px;
  font-size:.72rem;font-weight:700;
  color:var(--pl-gold-hi);
  border:1px solid rgba(250,204,21,.45);
  background:rgba(250,204,21,.08);
}
.pl-card--vip .pl-btn{
  color:#2A1C00;
  background:linear-gradient(180deg,#FDE047 0%,var(--pl-gold-lo) 100%);
  box-shadow:0 14px 32px -12px rgba(250,204,21,.9), inset 0 1px 0 rgba(255,255,255,.5);
}

/* ---- efeitos discretos: só com mouse (no celular, nada) ---- */
@media(hover:hover){
  .pl-card:hover{
    transform:translateY(-4px);
    border-color:var(--pl-green-hi);
    box-shadow:0 0 0 3px rgba(34,197,94,.14), 0 26px 60px -28px rgba(34,197,94,.75);
  }
  .pl-card--vip:hover{
    border-color:var(--pl-gold-hi);
    box-shadow:0 0 0 3px rgba(250,204,21,.18), 0 0 56px -10px rgba(250,204,21,.55), 0 30px 64px -26px rgba(250,204,21,.65);
  }
  .pl-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
}
.pl-btn:active{transform:translateY(0);filter:brightness(.97)}
@media(prefers-reduced-motion:reduce){
  .pl-card,.pl-btn{transition:none}
  .pl-card:hover,.pl-btn:hover{transform:none}
}

/* ✓ circular do card de oferta (modal .offer) */
.ck{
  flex:0 0 auto;width:18px;height:18px;border-radius:50%;margin-top:2px;
  background:rgba(255,255,255,.07);
  border:1px solid var(--line-2);
  position:relative;
}
.ck::after{
  content:"";position:absolute;left:5.6px;top:2.6px;
  width:4px;height:8px;border:solid var(--muted);border-width:0 1.6px 1.6px 0;
  transform:rotate(43deg);
}

/* O bloco "Depois da compra" (.trust) e a seção inteira "Como funciona"
   (.how) saíram em 18/09/2026. No lugar dos dois ficou este quadro curto,
   logo abaixo dos cards: três passos de uma linha + os aparelhos. */
.steps{
  margin:30px auto 0;
  padding:18px 18px 16px;
  border:1px solid var(--line-2);
  border-radius:18px;
  background:linear-gradient(170deg, rgba(255,255,255,.05), rgba(255,255,255,.012) 70%);
}
.steps__t{
  text-align:center;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--rose-lite);
  margin-bottom:14px;
}
.steps__list{display:grid;gap:11px}
.steps__list li{
  display:flex;gap:12px;align-items:flex-start;
  font-size:.86rem;line-height:1.45;color:var(--muted-hi);
}
.steps__list b{
  flex:0 0 auto;
  width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;
  font-size:.76rem;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--crimson),var(--rose));
}
.steps__list strong{color:#fff;font-weight:600}
.steps__dev{
  margin-top:14px;padding-top:13px;
  border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:.8rem;line-height:1.4;color:var(--muted);
  text-align:left;
}
.steps__dev svg{width:18px;height:18px;fill:var(--rose-lite);flex:0 0 auto}

/* A seção "Comparativo" (tabela no desktop / abas no mobile) foi removida a
   pedido. O CSS dela saiu junto para não deixar código morto. */

/* =========================================================
   FAQ
   ========================================================= */
.faq{padding:var(--sec) 0}
.faq__grid{display:grid;gap:clamp(34px,calc(5 * var(--vw)),60px)}
/* o título da seção centraliza; as perguntas continuam à esquerda, com o
   sinal de + à direita — é o que torna um accordion legível e clicável */
.faq__side{text-align:center}
.ac{border-bottom:1px solid var(--line)}
.ac:first-child{border-top:1px solid var(--line)}
.ac summary{
  list-style:none;cursor:pointer;
  padding:22px 0;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  font-size:clamp(.98rem,calc(2.8 * var(--vw)),1.08rem);
  font-weight:500;
  transition:color .3s var(--ease);
}
.ac summary::-webkit-details-marker{display:none}
.ac summary:hover{color:var(--rose-lite)}
.ac summary i{
  flex:0 0 auto;position:relative;width:16px;height:16px;
}
.ac summary i::before,.ac summary i::after{
  content:"";position:absolute;background:var(--rose);
  transition:transform .35s var(--ease), opacity .35s var(--ease);
}
.ac summary i::before{left:0;top:7.5px;width:16px;height:1.5px}
.ac summary i::after{left:7.5px;top:0;width:1.5px;height:16px}
.ac[open] summary i::after{transform:rotate(90deg);opacity:0}
.ac[open] summary{color:var(--rose-lite)}
.ac__body{padding:0 0 24px;max-width:62ch}
/* --muted (#9C93A0) sobre o fundo preto dá 6,4:1 — passa em AA. Mantido,
   mas o corpo subiu de .95 para .97rem: era o texto menor da página. */
.ac__body p{color:var(--muted);font-size:.97rem;line-height:1.7}
.ac__link{
  color:var(--rose-lite);
  border-bottom:1px solid rgba(255,109,142,.4);
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.ac__link:hover,.ac__link:focus-visible{color:#fff;border-bottom-color:var(--rose-lite)}
.ac[open] .ac__body{animation:acIn .45s var(--ease) both}
@keyframes acIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* A chamada final (.end, .end__*, .pick*) saiu da página em 18/09/2026,
   a pedido. O CSS dela saiu junto. */

/* =========================================================
   FOOTER
   ========================================================= */
.ft{border-top:1px solid var(--line);padding:44px 0 calc(44px + env(safe-area-inset-bottom))}
.ft__in{display:flex;flex-direction:column;gap:22px;align-items:center;text-align:center}
.ft__nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;margin-inline:-10px}
.ft__nav a{
  font-size:.88rem;color:var(--muted);transition:color .3s var(--ease);
  display:inline-flex;align-items:center;min-height:44px;padding-inline:10px;
}
.ft__nav a:hover{color:var(--paper)}
/* .78rem em --muted-2 (#6F6775) dava 3,3:1 sobre o preto: reprovava em AA.
   Subiu para .82rem em --muted (6,4:1). */
.ft__legal{font-size:.82rem;color:var(--muted);line-height:1.8}
/* aviso de direitos: menor, mas ainda no cinza que passa no contraste */
.ft__rights{
  display:inline-block;
  margin-top:8px;
  max-width:62ch;
  font-size:.76rem;line-height:1.6;
  color:var(--muted-2);
}
/* 44px: os três links legais eram os únicos alvos de toque abaixo do mínimo */
.ft__doc{
  display:inline-flex;align-items:center;min-height:44px;
  padding-inline:2px;
  color:var(--muted);
  border-bottom:1px solid transparent;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.ft__doc:hover{color:var(--paper);border-bottom-color:var(--rose)}

/* ---- redes sociais ---- */
.ft__social{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ft__social-label{
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:var(--muted-2);
}
.ft__social ul{display:flex;gap:10px}
.ft__social a{
  display:grid;place-items:center;
  width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line);
  color:var(--muted);
  transition:color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.ft__social svg{width:19px;height:19px;fill:currentColor}
.ft__social a:hover{
  color:#fff;
  border-color:var(--rose);
  background:rgba(232,48,92,.16);
  transform:translateY(-2px);
}

/* espaço para a barra sticky */
.ft{padding-bottom:calc(110px + env(safe-area-inset-bottom))}

/* =========================================================
   STICKY MOBILE
   ========================================================= */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  max-width:var(--app);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px var(--pad) calc(11px + env(safe-area-inset-bottom));
  background:rgba(10,8,14,.97);
  border-top:1px solid var(--line-2);
  transform:translateY(110%);
  transition:transform .45s var(--ease);
  visibility:hidden;
}
.sticky.is-on{transform:none;visibility:visible}
.sticky__txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.sticky__txt strong{font-size:.9rem;font-weight:600}
.sticky__txt span{font-size:.76rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky .btn{flex:0 0 auto}

/* =========================================================
   LIGHTBOX
   ========================================================= */
.lb{
  position:fixed;inset:0;z-index:120;
  display:flex;align-items:center;justify-content:center;
  background:rgba(4,3,6,.94);
  backdrop-filter:blur(10px);
  padding:60px 16px;
  animation:lbIn .3s var(--ease);
}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lb[hidden]{display:none}
.lb img{max-width:min(420px,calc(86 * var(--vw)));max-height:86vh;width:auto;border-radius:14px;box-shadow:0 40px 90px -40px #000}
.lb__close{
  position:absolute;top:16px;right:18px;
  width:44px;height:44px;font-size:2rem;line-height:1;
  color:var(--paper);opacity:.7;
}
.lb__close:hover{opacity:1}
.lb__nav{
  width:52px;height:52px;border-radius:50%;
  font-size:2rem;line-height:1;
  background:rgba(255,255,255,.06);border:1px solid var(--line);
  display:grid;place-items:center;
  transition:background .3s var(--ease);
  flex:0 0 auto;
}
.lb__nav:hover{background:rgba(255,255,255,.14)}
.lb__nav--prev{margin-right:10px}
.lb__nav--next{margin-left:10px}
@media(max-width:600px){
  .lb__nav{position:absolute;bottom:18px}
  .lb__nav--prev{left:22%}
  .lb__nav--next{right:22%}
}

body.no-scroll{overflow:hidden}

/* =========================================================
   PÁGINAS LEGAIS (termos.html / privacidade.html)
   Acessíveis apenas pelo rodapé da página principal.
   ========================================================= */
.lhd{
  position:sticky;top:0;z-index:90;
  background:rgba(8,7,11,.94);
  border-bottom:1px solid var(--line);
}
.lhd__in{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-block:14px;
}
.lhd__back{
  display:inline-flex;align-items:center;gap:9px;min-height:44px;
  font-size:.86rem;color:var(--muted);font-weight:500;
  transition:color .3s var(--ease);
}
.lhd__back:hover{color:var(--paper)}
.lhd__back svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.legal{padding:clamp(48px,calc(9 * var(--vw)),88px) 0 clamp(64px,calc(10 * var(--vw)),110px)}
.legal__in{max-width:760px}

.legal h1{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(2rem,calc(6.5 * var(--vw)),3.1rem);
  line-height:1.1;letter-spacing:-.02em;
  text-wrap:balance;
}
.legal__date{
  margin-top:14px;
  font-size:.82rem;color:var(--muted-2);
  letter-spacing:.04em;
}
.legal__lead{
  margin-top:28px;padding-bottom:34px;
  border-bottom:1px solid var(--line);
  color:var(--paper-2);
  font-size:clamp(1rem,calc(2.8 * var(--vw)),1.09rem);
  line-height:1.7;
}
.legal__lead + .legal__lead{margin-top:16px;border-bottom:0;padding-bottom:0}

.legal section{margin-top:clamp(38px,calc(6 * var(--vw)),54px)}
.legal h2{
  display:flex;gap:14px;align-items:baseline;
  font-family:var(--serif);font-weight:600;
  font-size:clamp(1.2rem,calc(3.6 * var(--vw)),1.55rem);
  line-height:1.25;letter-spacing:-.01em;
  margin-bottom:18px;
}
.legal h2 span{
  flex:0 0 auto;
  font-style:italic;font-size:.86em;
  color:var(--wine);
  font-variant-numeric:tabular-nums;
}
.legal p{
  color:var(--muted);
  font-size:clamp(.95rem,calc(2.5 * var(--vw)),1rem);
  line-height:1.78;
}
.legal p + p{margin-top:14px}
.legal strong{color:var(--paper);font-weight:600}

.legal ul{margin-top:16px;display:flex;flex-direction:column;gap:10px}
.legal li{
  position:relative;padding-left:22px;
  color:var(--muted);
  font-size:clamp(.94rem,calc(2.5 * var(--vw)),.99rem);
  line-height:1.65;
}
.legal li::before{
  content:"";position:absolute;left:2px;top:.65em;
  width:5px;height:5px;border-radius:50%;
  background:var(--wine);
}

/* bloco final de identificação do responsável */
.legal__id{
  margin-top:clamp(40px,calc(6 * var(--vw)),56px);
  padding:clamp(22px,calc(4 * var(--vw)),30px);
  border:1px solid var(--line);
  border-radius:var(--r);
  background:linear-gradient(160deg, rgba(255,255,255,.035), transparent 70%);
}
.legal__id dl{margin:0;display:grid;gap:10px}
.legal__id dt{
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted-2);font-weight:600;
}
.legal__id dd{margin:0;color:var(--paper);font-size:1rem;font-weight:500}

.legal__end{
  margin-top:clamp(38px,calc(6 * var(--vw)),52px);
  padding-top:28px;border-top:1px solid var(--line);
  font-family:var(--serif);font-style:italic;
  color:var(--muted);font-size:1.02rem;
}

/* =========================================================
   FAIXA DE OFERTA DO TOPO — REMOVIDA em 18/09/2026, a pedido.
   ("🔥 Comece hoje por R$ 10 — acesso enviado por WhatsApp e e-mail")
   Saiu por inteiro: HTML, CSS, JS e o bloco OFERTA do config.js. Com ela
   foi embora a variável --alert-h, que empurrava header, hero e âncoras.
   A versão com a faixa está em _backup_antes_mobile_2026-09-18.
   ========================================================= */

/* =========================================================
   CARD DE OFERTA — abre ao clicar no Plano Mensal
   Mais quente que os cards comuns (selo, brilho, borda dourada/rosa),
   mas dentro da mesma paleta.
   ========================================================= */
.offer{
  position:fixed;inset:0;z-index:130;
  display:flex;align-items:center;justify-content:center;
  padding:16px 16px calc(16px + env(safe-area-inset-bottom));
  overflow-y:auto;
  overscroll-behavior:contain;
}
.offer[hidden]{display:none}
/* fixed, não absolute: a caixa pode rolar dentro de .offer em telas baixas e o
   véu precisa continuar cobrindo a tela inteira durante essa rolagem */
.offer__veil{
  position:fixed;inset:0;
  background:rgba(4,3,6,.86);
  animation:offerVeil .28s var(--ease);
}
@keyframes offerVeil{from{opacity:0}to{opacity:1}}

.offer__box{
  position:relative;
  width:100%;max-width:452px;
  margin:auto;
  border-radius:22px;
  padding:clamp(26px,calc(5.4 * var(--vw)),36px) clamp(20px,calc(4.6 * var(--vw)),32px) clamp(22px,calc(4 * var(--vw)),28px);
  text-align:center;
  /* terceira identidade: dourado por cima do carmim do Anual — é uma oferta
     do Anual, então carrega a cor dele, mas coroada de ouro para não parecer
     mais um card comum */
  border:1px solid rgba(227,190,134,.8);
  background:
    /* o dourado só beija a borda de cima; espalhado ele deixava o card cor de
       tijolo em vez de vinho coroado de ouro */
    radial-gradient(88% 30% at 50% -4%, rgba(227,190,134,.38) 0%, transparent 68%),
    radial-gradient(130% 92% at 50% 6%, rgba(176,18,54,.52) 0%, transparent 66%),
    linear-gradient(168deg, rgba(232,48,92,.14), rgba(227,190,134,.05) 100%),
    var(--ink-3);
  box-shadow:
    0 48px 96px -38px rgba(0,0,0,.95),
    0 0 0 1px rgba(227,190,134,.22),
    0 0 80px -26px rgba(227,190,134,.62);
  animation:offerIn .42s var(--ease);
  isolation:isolate;
}
@keyframes offerIn{
  from{opacity:0;transform:translateY(20px) scale(.965)}
  to{opacity:1;transform:none}
}
/* halo suave atrás do topo do card */
.offer__glow{
  position:absolute;left:50%;top:-1px;transform:translateX(-50%);
  width:74%;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  opacity:.75;
}

.offer__x{
  position:absolute;top:8px;right:8px;
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  color:var(--muted);
  transition:color .25s var(--ease), background .25s var(--ease);
}
.offer__x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.offer__x:hover{color:var(--paper);background:rgba(255,255,255,.07)}

.offer__seal{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 15px 7px 12px;border-radius:999px;
  font-size:.7rem;letter-spacing:.19em;text-transform:uppercase;font-weight:700;
  color:#2A1405;
  background:linear-gradient(135deg,var(--gold) 0%, #FFE2B4 55%, var(--gold) 100%);
  box-shadow:0 12px 28px -14px rgba(227,190,134,.95);
  white-space:nowrap;
}
.offer__seal svg{width:14px;height:14px;fill:#2A1405;flex:0 0 auto}

.offer__h{
  margin-top:18px;
  font-family:var(--serif);font-weight:600;
  font-size:clamp(1.55rem,calc(6 * var(--vw)),2.05rem);
  line-height:1.12;letter-spacing:-.018em;
}
.offer__sub{
  margin-top:12px;
  color:var(--muted-hi);
  font-size:.92rem;line-height:1.55;
  max-width:38ch;margin-inline:auto;
}
.offer__sub strong{color:var(--paper-2);font-weight:600}

.offer__pricebox{
  margin:22px auto 20px;
  padding:16px 20px 14px;
  border-radius:16px;
  border:1px solid rgba(227,190,134,.44);
  background:
    linear-gradient(165deg, rgba(227,190,134,.16), transparent 55%),
    linear-gradient(165deg, rgba(176,18,54,.34), rgba(255,255,255,.015));
}
.offer__was{
  display:block;
  font-size:.78rem;letter-spacing:.06em;
  color:var(--muted-hi);
}
.offer__was s{color:var(--muted);text-decoration-thickness:1px}
.offer__price{
  display:flex;align-items:baseline;justify-content:center;gap:2px;
  margin-top:4px;
  font-family:var(--serif);line-height:1;
}
.offer__price .cur{
  font-family:var(--sans);font-weight:500;
  font-size:1.1rem;color:var(--paper-2);margin-right:6px;
}
.offer__price .num{
  font-size:clamp(3.4rem,calc(13 * var(--vw)),4.4rem);font-weight:700;letter-spacing:-.035em;
  background:linear-gradient(140deg,#fff 8%, var(--rose-lite) 62%, var(--gold) 115%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.offer__price .cents{font-size:1.7rem;font-weight:600;color:var(--rose-lite)}

.offer__list{
  display:flex;flex-direction:column;gap:11px;
  margin-bottom:24px;text-align:left;
  max-width:32ch;margin-inline:auto;
}
.offer__list li{
  display:flex;gap:11px;align-items:flex-start;
  font-size:.9rem;color:var(--paper-2);line-height:1.45;
}
.offer__list strong{color:#fff;font-weight:600}
.offer__list .ck{background:linear-gradient(135deg,var(--crimson),var(--rose));border-color:transparent}
.offer__list .ck::after{border-color:#fff}

.offer__cta{
  font-size:.96rem;
  line-height:1.25;
  padding:14px 22px;
  height:auto;min-height:60px;
  box-shadow:0 16px 40px -14px rgba(232,48,92,.95), inset 0 1px 0 rgba(255,255,255,.26);
}
@media(max-width:400px){.offer__cta{font-size:.9rem;padding:13px 16px}}

.offer__alt{
  display:block;
  margin-top:16px;
  padding:13px 12px;
  min-height:46px;
  font-size:.87rem;font-weight:500;
  color:var(--muted);
  border-radius:12px;
  border:1px solid transparent;
  transition:color .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
/* leva ao Plano Mensal, então acende na cor do Mensal */
.offer__alt:hover,.offer__alt:focus-visible{
  color:var(--paper);
  background:rgba(139,92,246,.14);
  border-color:rgba(139,92,246,.5);
}
.offer__micro{margin-top:14px;color:var(--muted);font-size:.78rem}

@media(prefers-reduced-motion:reduce){
  .offer__box,.offer__veil{animation:none}
}

/* =========================================================
   POP-UP DO VITALÍCIO COM DESCONTO (#upsell, .offer--vip)
   Mesma estrutura do card de oferta acima (.offer__*), vestida com o
   preto e dourado do card Acesso Vitalício da seção de planos.
   ========================================================= */
.offer--vip .offer__box{
  border:1.5px solid #FACC15;
  background:
    radial-gradient(90% 32% at 50% -4%, rgba(250,204,21,.3) 0%, transparent 68%),
    radial-gradient(120% 70% at 50% 0%, rgba(250,204,21,.1) 0%, transparent 66%),
    linear-gradient(180deg,#16130A 0%,#0B0A07 100%);
  box-shadow:
    0 48px 96px -38px rgba(0,0,0,.95),
    0 0 0 3px rgba(250,204,21,.14),
    0 0 70px -20px rgba(250,204,21,.55);
}
/* a caixa recebe foco ao abrir (o leitor de tela anuncia o título), mas
   ela mesma não é clicável: sem anel de foco em volta do pop-up inteiro */
.offer--vip .offer__box:focus{outline:none}
.offer--vip .offer__glow{background:linear-gradient(90deg,transparent,#FDE68A,transparent)}
.offer--vip .offer__seal{background:linear-gradient(135deg,#FDE68A 0%,#FACC15 100%);color:#241900}
.offer--vip .offer__seal svg{fill:#241900}
.offer--vip .offer__pricebox{
  border-color:rgba(250,204,21,.5);
  background:linear-gradient(165deg, rgba(250,204,21,.14), rgba(250,204,21,.03) 70%);
}
.offer--vip .offer__price .num{
  background:linear-gradient(140deg,#FFF6C8 5%,#FACC15 60%,#EAB308 110%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.offer--vip .offer__price .cents{color:#FACC15}
.offer--vip .offer__list .ck{background:#FACC15;border-color:transparent}
.offer--vip .offer__list .ck::after{border-color:#241900}
.upsell__cta{
  color:#2A1C00;font-weight:800;
  background:linear-gradient(180deg,#FDE047 0%,#EAB308 100%);
  box-shadow:0 16px 36px -14px rgba(250,204,21,.95), inset 0 1px 0 rgba(255,255,255,.5);
}
@media(hover:hover){
  .upsell__cta:hover{filter:brightness(1.07);transform:translateY(-1px)}
}
/* a saída sem desconto é neutra: visível, mas sem competir com o dourado */
.offer--vip .offer__alt{color:var(--paper-2);border-color:var(--line-2)}
.offer--vip .offer__alt:hover,.offer--vip .offer__alt:focus-visible{
  color:#fff;background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.3);
}

/* =========================================================
   AVISOS DO CANTO INFERIOR — REMOVIDO NESTA REVISAO
   O componente exibia "<Nome> acabou de garantir o acesso" com nomes
   ficticios sorteados na hora. Como nao vinha de vendas reais, saiu
   por inteiro (HTML, CSS e JS). Esta preservado em
   _versao_anterior_kivora_*, caso surja uma fonte de dados reais.
   ========================================================= */