/* ═══════════════════════════════════════════════════════════
   CristianoFLIX — landing ES (España)

   ⚠️ ESPANHOL DA ESPANHA em toda a copy: "móvil" e não "celular",
   "ordenador" e não "computadora", "vosotros" e não "ustedes".
   Espanhol latino soa estrangeiro pra cliente de Madrid — e é a
   primeira coisa que derruba a confiança na dobra de cima.

   IDENTIDADE: azul meia-noite + dourado, com ATMOSFERA — raios de
   luz descendo do topo, brilho quente atrás das seções e grão de
   filme por cima de tudo. Fundo chapado deixava a página com cara
   de template; a luz é o que dá o tom religioso sem precisar
   encher a tela de cruz.

   ⚠️ CTA é DOURADO com texto ESCURO (#2A1B00). Dourado com texto
   branco perde contraste e some.

   Coluna estreita (480px): o tráfego é Instagram, ou seja, celular.
   Conferir SEMPRE em 390×844.
   ═══════════════════════════════════════════════════════════ */

:root{
  --bg:        #050A16;
  --bg-2:      #0A1122;
  --bg-3:      #0F1930;
  --painel:    #0C1424;
  --line:      rgba(255,255,255,.09);
  --line-2:    rgba(255,255,255,.16);

  --card-1:    rgba(28,54,112,.36);
  --card-2:    rgba(10,20,48,.55);

  --gold:      #F5C451;
  --gold-2:    #E0A02C;
  --gold-luz:  #FFE9B0;
  --blue:      #7FB0FF;
  --blue-2:    #3E6FD1;

  --grad-titulo: linear-gradient(118deg,#FFE9B0 0%,#F5C451 42%,#93BCFF 100%);
  --grad-gold:   linear-gradient(135deg,#F9D67C 0%,#E0A02C 100%);
  --sombra-gold: 0 16px 40px -14px rgba(224,160,44,.55);
  --sombra:      0 22px 64px -20px rgba(0,0,0,.85);

  --tx:        #F2F5FB;
  --tx-2:      #B9C4DA;
  --tx-3:      #7E8AA4;

  --wrap:      480px;
  --pad:       clamp(18px,6vw,28px);
  --r-sm:      14px;
  --r:         20px;
  --r-lg:      26px;

  --ease:      cubic-bezier(.22,.8,.32,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:76px }

body{
  position:relative;
  background:var(--bg);
  color:var(--tx);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ── ATMOSFERA ───────────────────────────────────────────
   Duas camadas fixas atrás de tudo. É o que faz a página
   parecer um lugar e não um fundo de cor. */

/* 1. o brilho: luz quente descendo do topo + halo azul */
body::before{
  content:''; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(ellipse 90vw 60vh at 50% -8%,  rgba(245,196,81,.16), transparent 62%),
    radial-gradient(ellipse 120vw 70vh at 50% -2%, rgba(62,111,209,.28), transparent 66%),
    radial-gradient(ellipse 80vw 50vh at 50% 104%, rgba(62,111,209,.14), transparent 64%),
    var(--bg);
}

/* 2. os RAIOS — leques de luz saindo do topo, bem de leve.
   `repeating-conic-gradient` a partir de um ponto acima da tela dá
   o feixe divergente sem imagem nenhuma: pesa zero e nunca pixela. */
body::after{
  content:''; position:fixed; z-index:-1; pointer-events:none;
  top:-40vh; left:50%; width:170vw; height:120vh;
  transform:translateX(-50%);
  background:repeating-conic-gradient(from 200deg at 50% 0%,
    rgba(255,233,176,.075) 0deg 2.2deg,
    transparent 2.2deg 9deg);
  -webkit-mask-image:radial-gradient(ellipse 60% 78% at 50% 6%, #000 0%, transparent 74%);
          mask-image:radial-gradient(ellipse 60% 78% at 50% 6%, #000 0%, transparent 74%);
  opacity:.9;
}

img{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
ul{ list-style:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
details > summary{ cursor:pointer; list-style:none }
details > summary::-webkit-details-marker{ display:none }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  padding:12px 18px; background:var(--blue-2); color:#fff; border-radius:0 0 10px 0;
}
.skip:focus{ left:0 }

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

.section{ position:relative; padding-block:clamp(48px,10vw,80px) }

/* painel: seção sobre uma faixa mais clara, pra dar ritmo à rolagem */
.section--painel{
  background:linear-gradient(180deg,transparent,rgba(12,20,36,.85) 12%,rgba(12,20,36,.85) 88%,transparent);
}

em{
  font-style:normal; font-weight:800;
  background:var(--grad-titulo);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.shead{ margin-bottom:clamp(24px,5vw,36px) }
.shead__kicker{
  font-size:.72rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); margin-bottom:10px;
}
.shead__title{
  font-size:clamp(1.55rem,6.4vw,2.1rem);
  font-weight:800; line-height:1.16; letter-spacing:-.02em;
  text-wrap:balance; margin-bottom:22px;
}
.shead .shead__title{ margin-bottom:0 }
.shead__sub{ margin-top:12px; color:var(--tx-2); font-size:.92rem; text-wrap:pretty }
.shead--center{ text-align:center }

/* ── BOTÕES ────────────────────────────────────────────── */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center;
  padding:16px 26px;
  border-radius:100px;
  font-weight:800; font-size:1rem; letter-spacing:-.01em;
  text-align:center;
  background:var(--grad-gold);
  color:#2A1B00;
  box-shadow:var(--sombra-gold);
  border:0;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
/* brilho passando por cima — o CTA precisa puxar o olho numa
   página longa, e o movimento faz isso sem piscar nem gritar */
.btn--cta::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg,transparent 22%,rgba(255,255,255,.42) 50%,transparent 78%);
  transform:translate3d(-130%,0,0);
  animation:brilho 4.6s var(--ease) infinite;
  pointer-events:none;
}
@keyframes brilho{ 0%,64%{ transform:translate3d(-130%,0,0) } 100%{ transform:translate3d(130%,0,0) } }
.btn:active{ transform:scale(.975) }
.btn--lg{ padding:19px 30px; font-size:1.06rem; width:100% }
.btn--block{ display:flex; width:100% }
@media (hover:hover){
  .btn:hover{ transform:translateY(-2px); filter:saturate(1.08) brightness(1.04);
              box-shadow:0 20px 50px -12px rgba(224,160,44,.72) }
}
.btn--fantasma{
  background:transparent; border:1.5px solid var(--line-2);
  color:var(--tx); box-shadow:none;
}
.btn--fantasma::after{ display:none }
@media (hover:hover){
  .btn--fantasma:hover{ background:rgba(255,255,255,.06); box-shadow:none;
                        transform:translateY(-2px); filter:none }
}

/* ── CABEÇALHO ─────────────────────────────────────────── */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .3s var(--ease), border-color .3s var(--ease);
  border-bottom:1px solid transparent;
}
.hdr.is-stuck{
  background:rgba(5,10,22,.9);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-bottom-color:var(--line);
}
.hdr__in{
  max-width:var(--wrap); margin-inline:auto;
  padding:13px var(--pad);
  display:flex; align-items:center; justify-content:center;
}

/* LOGO — wordmark em TEXTO, não imagem: gerador de imagem erra
   acento e nome próprio, e o nome da marca é o pior lugar do mundo
   pra ter um erro de escrita. Em texto sai sempre certo e pesa zero. */
.logo{
  display:inline-flex; align-items:baseline; gap:0;
  font-weight:900; letter-spacing:-.035em; line-height:1;
  font-size:clamp(1.3rem,5.2vw,1.62rem);
}
.logo b{ color:#fff; font-weight:900 }
.logo i{
  font-style:normal; font-weight:900;
  background:var(--grad-gold);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.logo--lg{ font-size:clamp(1.7rem,7vw,2.1rem) }

/* ── HERÓI ─────────────────────────────────────────────── */
.hero{ padding-top:clamp(74px,14vw,100px); padding-bottom:36px; text-align:center }
.hero__eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  margin-bottom:14px; padding:6px 15px;
  border-radius:100px;
  background:rgba(245,196,81,.11); border:1px solid rgba(245,196,81,.3);
  font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold);
}
.hero__eyebrow span{
  width:6px; height:6px; border-radius:50%; background:#34D976;
  box-shadow:0 0 0 3px rgba(52,217,118,.22);
  animation:pisca 1.9s var(--ease) infinite;
}
@keyframes pisca{ 0%,100%{ opacity:1 } 50%{ opacity:.4 } }

.hero__h1{
  font-size:clamp(1.95rem,8.2vw,2.75rem);
  font-weight:900; line-height:1.06; letter-spacing:-.028em;
  text-transform:uppercase;
  color:#fff; text-wrap:balance;
  text-shadow:0 0 70px rgba(127,176,255,.32);
}
.hero__sub{
  margin-top:16px; color:var(--tx-2);
  font-size:clamp(1rem,3.4vw,1.1rem); text-wrap:pretty;
}
.hero__sub strong{ color:#fff }
.hero > .wrap > .btn{ margin-top:24px }
.hero__micro{
  margin-top:13px; display:flex; flex-wrap:wrap; justify-content:center;
  gap:6px 14px; font-size:.76rem; color:var(--tx-3);
}
.hero__micro span{ display:inline-flex; align-items:center; gap:5px }

/* ── PLAYER (VSL) ──────────────────────────────────────
   16:9 porque é o formato que o vídeo vai ter. Enquanto o
   data-video estiver vazio o clique leva aos planos — botão de
   play que não toca nada é a pior primeira impressão possível. */
.player{
  position:relative;
  border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line-2);
  background:var(--bg-2);
  box-shadow:var(--sombra), 0 0 60px -20px rgba(245,196,81,.35);
  cursor:pointer;
}
.player--wide{ aspect-ratio:16/9; max-width:min(94vw,440px); margin:22px auto 0 }
.player img{ width:100%; height:100%; object-fit:cover; opacity:.82 }
.player iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; z-index:3; background:#000 }
.player::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(5,10,22,.4) 0%,rgba(5,10,22,.08) 40%,rgba(5,10,22,.86) 100%);
  pointer-events:none;
}
.player.is-live::after{ display:none }
.player__btn{
  position:absolute; inset:0; margin:auto; z-index:2;
  width:clamp(58px,15vw,76px); height:clamp(58px,15vw,76px);
  display:grid; place-items:center; border-radius:50%;
  background:var(--grad-gold);
  box-shadow:0 0 0 0 rgba(224,160,44,.5), var(--sombra-gold);
  animation:anel 2.6s var(--ease) infinite;
}
.player__btn svg{ width:38%; height:38%; fill:#2A1B00; margin-left:8% }
@keyframes anel{
  0%  { box-shadow:0 0 0 0 rgba(224,160,44,.5),  var(--sombra-gold) }
  70% { box-shadow:0 0 0 24px rgba(224,160,44,0), var(--sombra-gold) }
  100%{ box-shadow:0 0 0 0 rgba(224,160,44,0),   var(--sombra-gold) }
}
.player__label{
  position:absolute; left:0; right:0; bottom:14px; z-index:2;
  text-align:center; font-size:.82rem; font-weight:700; color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.9); pointer-events:none;
}
.player__proof{
  position:absolute; top:12px; left:12px; z-index:2;
  padding:6px 12px; border-radius:100px;
  background:rgba(5,10,22,.76);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--line-2);
  font-size:.7rem; font-weight:700; color:#fff; pointer-events:none;
}
.player.is-live img,.player.is-live .player__btn,.player.is-live .player__label{ display:none }

/* ── DOR ───────────────────────────────────────────────── */
.dolor__lista{ display:grid; gap:10px }
.dolor__lista li{
  display:flex; align-items:flex-start; gap:13px;
  padding:15px 17px; border-radius:var(--r-sm);
  background:rgba(255,72,96,.055);
  border:1px solid rgba(255,72,96,.2);
  font-size:.92rem; color:var(--tx-2); line-height:1.5;
}
.dolor__lista li b{ color:#fff; font-weight:700 }
.dolor__x{
  flex:none; width:22px; height:22px; margin-top:1px;
  display:grid; place-items:center; border-radius:50%;
  background:rgba(255,72,96,.16); color:#FF7A8C;
  font-size:.72rem; font-weight:900;
}
.dolor__saida{
  margin-top:22px; padding:20px 20px 22px;
  border-radius:var(--r); text-align:center;
  background:linear-gradient(150deg,rgba(245,196,81,.12),rgba(62,111,209,.07));
  border:1px solid rgba(245,196,81,.28);
}
.dolor__saida p{ font-size:1.02rem; font-weight:700; color:#fff; line-height:1.4; text-wrap:balance }
.dolor__saida small{ display:block; margin-top:8px; font-size:.86rem; color:var(--tx-2); font-weight:400 }

/* ── CATEGORIAS COM FOTO ──────────────────────────────────
   Substitui a grade de emoji da 1ª versão. Foto de verdade
   comunica "isto é um serviço" — chip de emoji comunica "isto é
   um template". */
.cats{ display:grid; grid-template-columns:1fr 1fr; gap:11px }
.cat{
  position:relative; aspect-ratio:4/3;
  border-radius:var(--r-sm); overflow:hidden;
  border:1px solid var(--line);
  background:var(--bg-3);
  box-shadow:0 14px 34px -16px rgba(0,0,0,.9);
  transition:transform .35s var(--ease), border-color .35s var(--ease);
}
.cat img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease) }
.cat::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(5,10,22,.05) 30%,rgba(5,10,22,.72) 72%,rgba(5,10,22,.95) 100%);
}
.cat b{
  position:absolute; left:12px; right:12px; bottom:11px; z-index:2;
  font-size:.86rem; font-weight:800; color:#fff; letter-spacing:-.01em;
  text-shadow:0 2px 10px rgba(0,0,0,.8);
}
.cat small{
  position:absolute; left:12px; right:12px; bottom:11px; z-index:2;
  transform:translateY(15px);
  font-size:.68rem; color:var(--tx-3);
}
@media (hover:hover){
  .cat:hover{ transform:translateY(-4px); border-color:rgba(245,196,81,.45) }
  .cat:hover img{ transform:scale(1.06) }
}

/* ── CATÁLOGO ESTILO APP ──────────────────────────────────
   Não é o carrossel do dorama: aqui são FILEIRAS com nome, como a
   home de um streaming de verdade. Mostra muito mais título na
   mesma altura de tela e comunica "isto é um catálogo", não
   "isto são três fotos bonitas". */
.fila{ margin-bottom:clamp(20px,4vw,28px) }
.fila__nome{
  max-width:var(--wrap); margin:0 auto 11px; padding-inline:var(--pad);
  display:flex; align-items:baseline; gap:9px;
  font-size:.98rem; font-weight:800; color:#fff; letter-spacing:-.01em;
}
.fila__nome span{ font-size:.7rem; font-weight:700; color:var(--gold); letter-spacing:.06em; text-transform:uppercase }
.fila__trilho{
  display:flex; gap:11px; overflow-x:auto;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:2px var(--pad) 6px;
  overscroll-behavior-x:contain;
}
.fila__trilho::-webkit-scrollbar{ display:none }
.fila__card{
  position:relative; flex:0 0 auto;
  width:clamp(124px,34vw,152px); aspect-ratio:2/3;
  scroll-snap-align:start;
  border-radius:12px; overflow:hidden;
  border:1px solid var(--line);
  background:var(--bg-3);
  box-shadow:0 14px 30px -14px rgba(0,0,0,.9);
  transition:transform .35s var(--ease), border-color .35s var(--ease);
}
.fila__card img{ width:100%; height:100%; object-fit:cover }
.fila__selo{
  position:absolute; top:7px; left:7px; z-index:2;
  padding:3px 8px; border-radius:100px;
  background:rgba(5,10,22,.8); border:1px solid var(--line-2);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  font-size:.56rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gold);
}
@media (hover:hover){
  .fila__card:hover{ transform:translateY(-5px); border-color:rgba(245,196,81,.5) }
}
/* o "e muitos más" no fim da fileira, pra não parecer que o
   catálogo acaba onde a fileira acaba */
.fila__mais{
  flex:0 0 auto; width:clamp(124px,34vw,152px); aspect-ratio:2/3;
  display:grid; place-content:center; gap:6px; text-align:center;
  border-radius:12px;
  border:1px dashed var(--line-2);
  background:rgba(255,255,255,.03);
  font-size:.78rem; font-weight:700; color:var(--tx-2);
  padding:14px;
}
.fila__mais b{ display:block; font-size:1.5rem; color:var(--gold) }

/* ── DEPOIMENTOS ──────────────────────────────────────── */
.testi__carousel{ position:relative; max-width:var(--wrap); margin-inline:auto }
.testi__rail{
  display:flex; gap:14px; overflow-x:auto;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
  padding:4px var(--pad) 16px;
  overscroll-behavior-x:contain;
}
.testi__rail::-webkit-scrollbar{ display:none }
.testi__rail img{
  flex:0 0 auto; width:min(80vw,300px); height:auto;
  scroll-snap-align:center;
  border-radius:var(--r);
  border:1px solid var(--line-2);
  background:#000;
  box-shadow:var(--sombra);
}
.testi__arrow{
  position:absolute; top:calc(50% - 24px); z-index:5;
  width:42px; height:42px; display:none; place-items:center;
  border-radius:50%; background:rgba(10,18,38,.9);
  border:1px solid var(--line-2);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  transition:transform .2s var(--ease), background .2s var(--ease);
}
.testi__arrow svg{ width:20px; height:20px; fill:none; stroke:var(--tx); stroke-width:2.2;
                   stroke-linecap:round; stroke-linejoin:round }
.testi__arrow--prev{ left:-6px }
.testi__arrow--next{ right:-6px }
.testi__arrow:hover{ background:var(--blue-2); transform:scale(1.08) }
.testi__arrow[disabled]{ opacity:.3; pointer-events:none }
@media (min-width:calc(480px + 80px)){ .testi__arrow{ display:grid } }
.testi__dots{ display:flex; justify-content:center; gap:7px; margin-top:2px }
.testi__dots button{ width:7px; height:7px; border-radius:100px; background:var(--line-2);
                     transition:width .3s var(--ease), background .3s var(--ease) }
.testi__dots button[aria-selected="true"]{ width:22px; background:var(--gold) }
.testi__nota{ margin-top:14px; text-align:center; font-size:.72rem; color:var(--tx-3) }

/* ── BÔNUS ────────────────────────────────────────────────
   A pilha. Cada linha é um regalo com o seu valor à direita, e o
   total riscado no fim é o que faz o preço parecer pequeno. */
.bonus__lista{ display:grid; gap:11px }
.bonus{
  display:flex; align-items:center; gap:13px;
  padding:12px 15px 12px 12px;
  border-radius:var(--r-sm);
  background:linear-gradient(120deg,var(--card-1),var(--card-2));
  border:1px solid var(--line);
}
.bonus--destaque{ border-color:rgba(245,196,81,.4); background:linear-gradient(120deg,rgba(245,196,81,.14),rgba(10,20,48,.5)) }
.bonus__foto{
  flex:none; width:62px; height:62px; border-radius:11px; overflow:hidden;
  border:1px solid var(--line-2); background:var(--bg-3);
}
.bonus__foto img{ width:100%; height:100%; object-fit:cover }
.bonus__ico{
  flex:none; width:62px; height:62px; border-radius:11px;
  display:grid; place-items:center; font-size:1.5rem;
  background:linear-gradient(150deg,rgba(245,196,81,.2),rgba(62,111,209,.18));
  border:1px solid var(--line-2);
}
.bonus__txt{ flex:1; min-width:0 }
.bonus__n{
  display:block; font-size:.62rem; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gold); margin-bottom:2px;
}
.bonus__t{ display:block; font-size:.93rem; font-weight:800; color:#fff; line-height:1.25 }
.bonus__d{ display:block; margin-top:3px; font-size:.78rem; color:var(--tx-2); line-height:1.4 }
.bonus__v{
  flex:none; text-align:right; font-size:.8rem; font-weight:800;
  color:var(--tx-3); text-decoration:line-through; white-space:nowrap;
}
.bonus__v b{ display:block; font-size:.66rem; font-weight:800; color:#34D976;
             text-decoration:none; letter-spacing:.04em }

.bonus__soma{
  margin-top:16px; padding:20px 18px 22px;
  border-radius:var(--r); text-align:center;
  background:linear-gradient(155deg,rgba(52,217,118,.1),rgba(255,255,255,.015));
  border:1px solid rgba(52,217,118,.3);
}
.bonus__soma-l{ font-size:.74rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--tx-2) }
.bonus__soma-v{
  display:block; margin-top:4px;
  font-size:clamp(1.9rem,8vw,2.4rem); font-weight:900; letter-spacing:-.03em;
  color:var(--tx-3); text-decoration:line-through;
}
.bonus__soma-hoy{ display:block; margin-top:12px; font-size:.88rem; font-weight:700; color:var(--tx-2) }
.bonus__soma-hoy b{
  display:block; margin-top:2px;
  font-size:clamp(2.2rem,10vw,2.9rem); font-weight:900; letter-spacing:-.035em;
  background:var(--grad-titulo); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.bonus__nota{ margin-top:14px; text-align:center; font-size:.67rem; color:var(--tx-3); line-height:1.5 }

/* ── PASSOS ───────────────────────────────────────────── */
.passos{ display:grid; gap:11px }
.passo{
  display:flex; align-items:flex-start; gap:14px;
  padding:16px 17px; border-radius:var(--r-sm);
  background:linear-gradient(120deg,var(--card-1),var(--card-2));
  border:1px solid var(--line);
}
.passo__n{
  flex:none; width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center;
  font-size:.9rem; font-weight:900; color:#2A1B00;
  background:var(--grad-gold);
  box-shadow:0 8px 18px -8px rgba(224,160,44,.8);
}
.passo__t{ font-size:.95rem; font-weight:800; color:#fff; line-height:1.3 }
.passo__d{ margin-top:4px; font-size:.84rem; color:var(--tx-2); line-height:1.5 }

/* ── ONDE VER ─────────────────────────────────────────── */
.onde{
  position:relative; border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line-2); box-shadow:var(--sombra);
}
.onde img{ width:100%; height:auto; display:block }
.onde__txt{
  position:absolute; inset:auto 0 0 0; z-index:2;
  padding:24px 18px 18px;
  background:linear-gradient(180deg,transparent,rgba(5,10,22,.94) 62%);
}
.onde__chips{ display:flex; flex-wrap:wrap; gap:7px }
.onde__chips span{
  padding:6px 13px; border-radius:100px;
  background:rgba(255,255,255,.1); border:1px solid var(--line-2);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  font-size:.76rem; font-weight:700; color:#fff;
}

/* ── PLANOS ───────────────────────────────────────────── */
.pricing .shead__title{ margin-top:44px }
.pricing .shead__title:first-child{ margin-top:0 }
.plan__vip-head{ margin-top:52px }

.plan{
  position:relative;
  padding:24px 20px 26px;
  border-radius:var(--r-lg);
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  border:1px solid var(--line);
  box-shadow:var(--sombra);
}
.plan--vip{
  border-color:rgba(245,196,81,.42);
  box-shadow:var(--sombra), 0 0 0 1px rgba(245,196,81,.12), 0 34px 76px -22px rgba(245,196,81,.22);
}
.plan__tag{
  display:inline-block; margin-bottom:16px;
  padding:6px 14px; border-radius:100px;
  background:var(--grad-gold);
  font-size:.68rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#2A1B00;
}
.plan__mosaic{ display:grid; grid-template-columns:repeat(4,1fr); align-items:start; gap:7px; margin-bottom:20px }
.plan__mosaic img{ width:100%; height:auto; aspect-ratio:2/3; object-fit:cover; border-radius:8px; border:1px solid var(--line) }
.plan__posters{ display:grid; grid-template-columns:repeat(3,1fr); align-items:start; gap:9px; margin-bottom:20px }
.plan__posters img{ width:100%; height:auto; aspect-ratio:2/3; object-fit:cover; border-radius:10px }

.plan__vip-header{ text-align:center; margin-bottom:18px }
.plan__vip-name{ font-size:1.3rem; font-weight:900; color:#fff; letter-spacing:-.01em }
.plan__vip-badge{
  display:inline-block; margin-left:6px; padding:3px 10px; border-radius:100px;
  background:var(--grad-gold); font-size:.66rem; font-weight:900; color:#2A1B00; letter-spacing:.04em;
}
.plan__vip-desc{ margin-top:6px; font-size:.86rem; color:var(--tx-2) }

.plan__list{ display:grid; gap:10px; margin-bottom:22px }
.plan__list li{ position:relative; padding-left:27px; font-size:.89rem; color:var(--tx-2); line-height:1.42 }
.plan__list li b{ color:#fff; font-weight:800 }
.plan__list li::before{
  content:'✓'; position:absolute; left:0; top:1px;
  width:18px; height:18px; display:grid; place-items:center;
  border-radius:50%; font-size:.62rem; font-weight:900;
  background:rgba(127,176,255,.14); color:var(--blue); border:1.2px solid rgba(127,176,255,.5);
}
.plan__list--vip li::before{ background:rgba(245,196,81,.14); color:var(--gold); border-color:rgba(245,196,81,.5) }

.plan__from{ text-align:center; display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:6px }
.plan__from s{ color:var(--tx-3); font-size:1rem; text-decoration-thickness:2px }
.plan__off{
  font-size:.72rem; font-weight:800; color:var(--gold);
  background:rgba(245,196,81,.14); border:1px solid rgba(245,196,81,.4);
  padding:4px 11px; border-radius:100px;
}

.plan__price{
  position:relative;
  margin:8px auto 6px; padding:22px 16px; max-width:290px;
  border-radius:var(--r); text-align:center;
  background:linear-gradient(155deg,rgba(127,176,255,.16),rgba(62,111,209,.04));
  border:1px solid rgba(127,176,255,.32);
  box-shadow:0 22px 48px -22px rgba(62,111,209,.75), inset 0 1px 0 rgba(255,255,255,.09);
}
.plan__price::before{
  content:''; position:absolute; inset:auto 0 -30% 0; height:70%;
  background:radial-gradient(ellipse at 50% 100%, rgba(127,176,255,.32), transparent 70%);
  pointer-events:none;
}
.plan__val,.plan__cents{
  background:var(--grad-titulo);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  position:relative;
}
.plan__val{ font-size:clamp(3.2rem,14vw,4rem); font-weight:900; letter-spacing:-.04em; line-height:1 }
.plan__cents{ font-size:1.6rem; font-weight:800; letter-spacing:-.02em }
.plan--vip .plan__price{
  background:linear-gradient(155deg,rgba(245,196,81,.16),rgba(224,160,44,.04));
  border-color:rgba(245,196,81,.38);
  box-shadow:0 22px 48px -22px rgba(224,160,44,.8), inset 0 1px 0 rgba(255,255,255,.1);
}
.plan--vip .plan__price::before{ background:radial-gradient(ellipse at 50% 100%, rgba(245,196,81,.3), transparent 70%) }
.plan--vip .plan__val,.plan--vip .plan__cents{
  background:linear-gradient(135deg,#FFE7AE 0%,#F5C451 55%,#E0A02C 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.plan__once{ text-align:center; font-size:.78rem; color:var(--tx-3); margin-bottom:18px }
.plan__secure{ margin-top:12px; text-align:center; font-size:.76rem; color:var(--tx-3) }
.plan__urg{
  margin-top:12px; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border-radius:12px;
  background:rgba(245,196,81,.1); border:1px solid rgba(245,196,81,.26);
  font-size:.8rem; font-weight:600; color:var(--gold);
}
.plan__urg b{ font-variant-numeric:tabular-nums; font-weight:800 }

/* opção ANUAL — visível ao lado da mensal, sem alternador.
   Toggle esconde uma das duas atrás de um clique, e a anual só
   convence quando ela VÊ a conta feita. */
.anual{
  margin:14px 0 0; padding:14px 14px 13px;
  border:1px dashed var(--line-2); border-radius:14px;
  background:rgba(127,176,255,.07);
  text-align:center;
}
.anual__kicker{
  display:inline-block; margin-bottom:6px;
  font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--gold);
}
.anual__precio{ margin:0 0 4px; line-height:1 }
.anual__precio strong{ font-size:30px; font-weight:900; color:var(--tx) }
.anual__precio span{ font-size:14px; font-weight:700; color:var(--tx-2) }
.anual__conta{ margin:0 0 11px; font-size:12.5px; line-height:1.5; color:var(--tx-3) }
.anual__conta s{ opacity:.75 }
.anual__conta b{ color:var(--tx-2) }
.anual__btn{ font-size:13.5px !important }
.anual .btn--fantasma{ border-color:rgba(127,176,255,.5) }
.anual--vip{ border-color:rgba(245,196,81,.35); background:rgba(245,196,81,.07) }
.anual--vip .btn--fantasma{ border-color:rgba(245,196,81,.55) }

@media (max-width:380px){
  .anual__precio strong{ font-size:26px }
  .anual__conta{ font-size:12px }
}

/* ── GARANTIA ─────────────────────────────────────────── */
.guarantee{ text-align:center }
.guar__eyebrow{ font-size:.8rem; font-weight:800; letter-spacing:.06em; color:var(--gold); margin-bottom:18px }
.guar__seal{ width:150px; margin:0 auto 20px }
.guar__seal svg{ width:100%; height:auto; filter:drop-shadow(0 14px 30px rgba(0,0,0,.55)) }
.guar__txt h2{ font-size:1.4rem; font-weight:900; margin-bottom:12px; color:#fff }
.guar__txt p{ color:var(--tx-2); font-size:.94rem; line-height:1.6 }
.guar__txt strong{ color:#fff }
.guar__trust{
  margin-top:20px; display:grid; grid-template-columns:1fr 1fr; gap:10px 16px;
  font-size:.82rem; color:var(--tx-2); font-weight:600;
}
.guar__trust li{ display:flex; align-items:center; gap:7px; justify-content:center }

/* ── FAQ ──────────────────────────────────────────────── */
.faq__list{ display:grid; gap:10px }
.faq__item{
  padding:17px 18px; border-radius:var(--r-sm);
  background:rgba(255,255,255,.035); border:1px solid var(--line);
}
.faq__item summary{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  font-weight:700; font-size:.94rem; color:#fff;
}
.faq__item summary::after{ content:'+'; font-size:1.3rem; color:var(--gold); flex:none;
                           transition:transform .25s var(--ease) }
.faq__item[open] summary::after{ transform:rotate(45deg) }
.faq__body{ margin-top:12px; color:var(--tx-2); font-size:.88rem; line-height:1.55 }
.faq__body strong{ color:#fff }

/* ── CTA FINAL ────────────────────────────────────────── */
.final{ text-align:center }
.final__h2{ font-size:clamp(1.45rem,6.2vw,1.95rem); font-weight:900; color:#fff; line-height:1.2; text-wrap:balance }
.final__sub{ margin-top:12px; color:var(--tx-2); font-size:.96rem }
.final .btn{ margin-top:22px; width:100% }
.final__micro{ margin-top:14px; font-size:.78rem; color:var(--tx-3) }
.final__verso{
  margin-top:26px; padding-top:20px; border-top:1px solid var(--line);
  font-size:.86rem; color:var(--tx-2); font-style:italic; line-height:1.65;
}
.final__verso b{ display:block; margin-top:6px; font-style:normal; font-weight:700; color:var(--gold) }

/* ── RODAPÉ ───────────────────────────────────────────── */
.ft{ padding-block:40px 100px; border-top:1px solid var(--line); text-align:center }
.ft .logo{ margin-bottom:16px; opacity:.9 }
/* contato ACIMA do legal de propósito: quem desce até o fim
   procurando ajuda tem que achar o e-mail antes do bloco de
   direitos autorais. Contato fácil de achar derruba disputa no
   cartão — a pessoa escreve pra gente em vez de ligar pro banco. */
.ft__contato{ margin-bottom:10px; font-size:.82rem; color:var(--tx-2) }
.ft__contato a{
  color:var(--gold); font-weight:700;
  text-decoration:underline; text-underline-offset:3px;
  word-break:break-word;
}
.ft__legal{ font-size:.74rem; color:var(--tx-3); line-height:1.6 }

/* ── CTA FIXO NO CELULAR ──────────────────────────────── */
.sticky{
  position:fixed; inset:auto 0 0 0; z-index:90;
  display:flex; align-items:center; gap:12px;
  padding:11px var(--pad) calc(11px + env(safe-area-inset-bottom));
  background:rgba(5,10,22,.94);
  backdrop-filter:blur(20px) saturate(1.5); -webkit-backdrop-filter:blur(20px) saturate(1.5);
  border-top:1px solid var(--line-2);
  transform:translate3d(0,110%,0); transition:transform .38s var(--ease);
}
.sticky.is-on{ transform:translate3d(0,0,0) }
.sticky__info{ display:grid; gap:1px; line-height:1.25; min-width:0 }
.sticky__from{ font-size:.66rem; color:var(--tx-3); font-weight:700; text-transform:uppercase; letter-spacing:.07em }
.sticky__price{ font-size:1rem; font-weight:800; letter-spacing:-.02em; white-space:nowrap; color:#fff }
.sticky__price s{ color:var(--tx-3); font-weight:500; font-size:.8rem; margin-right:3px }
.sticky .btn{ margin-left:auto; padding:12px 20px; font-size:.9rem; flex:none }
@media (min-width:760px){ .sticky{ display:none } }

/* ═══════════════════════════════════════════════════════
   POPUP DE UPGRADE — abre no clique do plano BÁSICO.

   ⚠️ REGRA DE DESENHO: a saída ("seguir con el Básico") fica
   VISÍVEL na mesma tela, sem rolar. Esconder a saída converte um
   pouco mais no dia e devolve reembolso, denúncia no anúncio e
   destino marcado como má experiência pelo Meta — o funil inteiro
   paga por isso.
   ═══════════════════════════════════════════════════════ */
.upg{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  padding:16px;
  background:rgba(3,6,14,.86);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  animation:upgFade .18s ease-out;
}
.upg[hidden]{ display:none }
body.upg-abierto{ overflow:hidden }

@keyframes upgFade{ from{ opacity:0 } to{ opacity:1 } }
@keyframes upgSube{ from{ opacity:0; transform:translateY(14px) scale(.985) } to{ opacity:1; transform:none } }

.upg__caja{
  position:relative;
  width:100%; max-width:430px;
  max-height:92vh; overflow-y:auto;
  background:linear-gradient(180deg,var(--bg-3) 0%,var(--bg) 100%);
  border:1px solid var(--line-2);
  border-radius:20px;
  box-shadow:var(--sombra);
  animation:upgSube .24s cubic-bezier(.2,.8,.3,1);
}
.upg__x{
  position:absolute; top:10px; right:10px; z-index:3;
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  font-size:22px; line-height:1; color:#fff;
  background:rgba(5,10,22,.66); border:1px solid var(--line-2);
}
.upg__x:hover{ background:rgba(5,10,22,.9) }

.upg__foto{ position:relative }
/* altura FIXA e recorte, não altura natural: a decisão inteira
   (preço + os dois botões) tem que caber numa tela de celular sem
   rolar. Com a foto em altura livre, o "no, gracias" caía fora — e
   saída que exige scroll é saída escondida. */
.upg__foto img{ display:block; width:100%; height:150px; object-fit:cover; border-radius:20px 20px 0 0 }
@media (min-height:820px){ .upg__foto img{ height:180px } }
.upg__foto::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:46%;
  background:linear-gradient(180deg,rgba(15,25,48,0) 0%,var(--bg-3) 100%);
  pointer-events:none;
}
.upg__sello{
  position:absolute; top:12px; left:12px; z-index:2;
  padding:5px 11px; border-radius:999px;
  font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:#2A1B00; background:var(--grad-gold);
  box-shadow:0 6px 18px -6px rgba(224,160,44,.7);
}

.upg__cuerpo{ position:relative; z-index:1; padding:4px 20px 20px; text-align:center }
.upg__kicker{ margin:0 0 6px; font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--gold) }
.upg__titulo{ margin:0 0 10px; font-size:23px; line-height:1.22; font-weight:900; color:var(--tx) }
.upg__titulo em{ font-style:normal }
.upg__texto{ margin:0 0 9px; font-size:14.5px; line-height:1.55; color:var(--tx-2) }
.upg__texto b{ color:var(--tx) }

.upg__precio{ margin:14px 0 12px; display:grid; gap:2px }
.upg__precio-de{ font-size:14px; color:var(--tx-3); text-decoration:line-through }
.upg__precio-hoy{
  font-size:40px; font-weight:900; line-height:1;
  background:var(--grad-titulo); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.upg__precio-hoy small{ font-size:16px; font-weight:700 }
.upg__precio-nota{ font-size:12px; color:var(--tx-3) }

.upg__lista{ margin:0 0 16px; display:grid; gap:7px; text-align:left }
.upg__lista li{ position:relative; padding-left:24px; font-size:14px; line-height:1.45; color:var(--tx-2) }
.upg__lista li::before{ content:'✓'; position:absolute; left:0; top:0; font-weight:900; color:var(--gold) }
.upg__lista b{ color:var(--tx) }

.upg__si{ font-size:15px !important }
.upg__no{
  display:block; width:100%;
  margin:11px 0 0; padding:9px 4px;
  font-size:13.5px; line-height:1.4; font-weight:600;
  color:var(--tx-3); background:none; border:0;
  text-decoration:underline; text-underline-offset:3px;
}
.upg__no:hover{ color:var(--tx-2) }
.upg__seguro{ margin:9px 0 0; font-size:12px; color:var(--tx-3) }

@media (max-width:380px){
  .upg__titulo{ font-size:21px }
  .upg__precio-hoy{ font-size:35px }
  .upg__cuerpo{ padding:4px 15px 16px }
}
/* celular deitado: a foto some pra caber a decisão inteira */
@media (max-height:640px){
  .upg__foto{ display:none }
  .upg__caja{ border-radius:16px }
  .upg__cuerpo{ padding-top:18px }
}

/* ── REVELAR AO ROLAR ─────────────────────────────────── */
.rv{ opacity:0; transform:translate3d(0,20px,0);
     transition:opacity .7s var(--ease), transform .7s var(--ease) }
.rv.is-in{ opacity:1; transform:none }
.faq__list .rv.is-in{ transition-delay:var(--d,0ms) }

@media (prefers-reduced-motion:reduce){
  .rv{ opacity:1; transform:none; transition:none }
  .player__btn,.hero__eyebrow span,.btn--cta::after{ animation:none }
  .upg,.upg__caja{ animation:none }
}