/* ═══════════════════════════════════════════════════════════
   DoramaFLIX v2 — variante de teste inspirada no CinefyDrama
   Identidade visual própria: violeta/roxo escuro, cards de vidro,
   headline em gradiente magenta, CTA verde. Layout de coluna única
   e estreita (como o original), não a grade larga do site principal.
   JS puro, sem dependência. Comportamento vem de ../assets/js/app.js.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* superfícies */
  --bg:        #0A0714;
  --bg-2:      #100A20;
  --line:      rgba(255,255,255,.10);
  --line-2:    rgba(255,255,255,.16);

  /* cards de vidro (índigo/violeta translúcido) */
  --card-1:    rgba(64,42,140,.38);
  --card-2:    rgba(30,18,64,.55);
  --card-glow: rgba(155,107,255,.16);
  --bg-3:      #170F2C;

  /* marca */
  --magenta:   #FF6FD8;
  --violet:    #9B6BFF;
  --violet-2:  #6C4CE0;
  --gold:      #F3C87B;

  --grad-heading: linear-gradient(120deg, #FF7FE0 0%, #C77CFF 55%, #8B6BFF 100%);
  --grad-price:   linear-gradient(135deg, #5B3FE0 0%, #3450C9 100%);
  --grad-green:   linear-gradient(135deg, #34D976 0%, #16A34A 100%);
  --shadow-green: 0 16px 40px -14px rgba(22,163,74,.55);
  --shadow:       0 20px 60px -18px rgba(0,0,0,.75);

  /* texto */
  --tx:        #F5F2FA;
  --tx-2:      #C7C0D9;
  --tx-3:      #8B84A0;

  /* medidas — coluna única e estreita, de propósito */
  --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:78px }

body{
  background:
    radial-gradient(ellipse 800px 500px at 50% -10%, rgba(107,63,224,.28), transparent 60%),
    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;
}

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(--violet-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) }

em{
  font-style:normal; font-weight:800;
  background:var(--grad-heading);
  -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(--magenta); margin-bottom:10px;
}
.shead__title{
  font-size:clamp(1.5rem,6vw,2rem);
  font-weight:800; line-height:1.18; 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;
  display:inline-flex; align-items:center; justify-content:center;
  padding:15px 26px;
  border-radius:100px;
  font-weight:800; font-size:.98rem; letter-spacing:-.01em;
  text-align:center;
  background:var(--grad-green);
  color:#fff;
  box-shadow:var(--shadow-green);
  border:0;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.btn:active{ transform:scale(.975) }
.btn--sm{ padding:10px 18px; font-size:.86rem }
.btn--lg{ padding:18px 30px; font-size:1.05rem; width:100% }
.btn--block{ display:flex; width:100% }
@media (hover:hover){
  .btn:hover{ transform:translateY(-2px); filter:saturate(1.1); box-shadow:0 20px 50px -12px rgba(22,163,74,.7) }
}

/* ── HEADER ────────────────────────────────────────────── */
.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(10,7,20,.86);
  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:14px var(--pad);
  display:flex; align-items:center; justify-content:center;
}
.hdr__logo img{ width:clamp(110px,28vw,140px); height:auto }

/* ── HERO ──────────────────────────────────────────────── */
.hero{ padding-top:clamp(78px,15vw,104px); padding-bottom:40px; text-align:center }
.hero__eyebrow{
  font-size:clamp(.86rem,3vw,1rem); font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  background:var(--grad-heading); -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:12px;
}
.hero__h1{
  font-size:clamp(2.5rem,11vw,3.5rem);
  font-weight:900; line-height:1.02; letter-spacing:-.025em;
  text-transform:uppercase;
  color:#fff; text-wrap:balance;
  text-shadow:0 0 60px rgba(155,107,255,.28);
}
.hero__sub{
  margin-top:16px; color:var(--tx-2);
  font-size:clamp(1rem,3.4vw,1.12rem); text-wrap:pretty;
}
.hero__sub strong{ color:#fff }

/* ── PLAYER (vídeo — clica pra tocar) ─────────────────── */
.player{
  position:relative;
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--line-2);
  background:var(--bg-2);
  box-shadow:var(--shadow);
  cursor:pointer;
}
.player--vertical{ aspect-ratio:9/16; max-width:min(92vw,380px); margin:24px auto 0 }
.player img{ width:100%; height:100%; object-fit:cover; opacity:.72; transition:opacity .4s var(--ease), transform .6s var(--ease) }
.player iframe,
.player video{ 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(10,7,20,.42) 0%,rgba(10,7,20,.12) 40%,rgba(10,7,20,.88) 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-green);
  box-shadow:0 0 0 0 rgba(22,163,74,.5), var(--shadow-green);
  animation:ring 2.6s var(--ease) infinite;
  transition:transform .25s var(--ease);
}
.player__btn svg{ width:38%; height:38%; fill:#fff; margin-left:8% }
@keyframes ring{
  0%  { box-shadow:0 0 0 0 rgba(22,163,74,.5),  var(--shadow-green) }
  70% { box-shadow:0 0 0 24px rgba(22,163,74,0), var(--shadow-green) }
  100%{ box-shadow:0 0 0 0 rgba(22,163,74,0),   var(--shadow-green) }
}
.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;
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:100px;
  background:rgba(10,7,20,.72);
  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__proof-dot{
  width:6px; height:6px; border-radius:50%; background:#FF3B3B;
  box-shadow:0 0 0 3px rgba(255,59,59,.22);
  animation:pulse 1.8s var(--ease) infinite; flex:none;
}
@keyframes pulse{ 0%,100%{ transform:scale(1); opacity:1 } 50%{ transform:scale(1.35); opacity:.65 } }
.player.is-live img,.player.is-live .player__btn,.player.is-live .player__label,.player.is-live .player__proof{ display:none }
/* Panda já entra tocando (sem a nossa capa), mas o selo de prova
   social continua — fica flutuando por cima do player.
   z-index acima do iframe (que é 3) e pointer-events:none pra não
   roubar o clique dos controles do Panda embaixo. */
.player--panda.is-live .player__proof{ display:inline-flex; z-index:4; pointer-events:none }

/* ── DEPOIMENTO EM ÁUDIO ───────────────────────────────── */
.audio{ max-width:340px; margin:22px auto 0 }
.audio__kicker{ font-size:.84rem; font-weight:700; color:var(--tx-2); margin-bottom:10px }
.audio__card{
  padding:15px 17px; border-radius:var(--r-sm);
  background:linear-gradient(120deg,var(--card-1),var(--card-2));
  border:1px solid var(--line); backdrop-filter:blur(10px);
}
.audio__name{
  display:block; margin-bottom:9px;
  font-size:.68rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.audio__card audio{ width:100%; display:block; border-radius:999px; accent-color:var(--violet) }

.hero > .wrap > .btn{ margin-top:26px }

/* ── DEPOIMENTOS (prints reais) ───────────────────────── */
.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(84vw, 320px);
  scroll-snap-align:center; border-radius:var(--r);
  border:1px solid var(--line-2); background:var(--bg-2); box-shadow:var(--shadow);
}
.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(16,10,32,.86);
  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(--violet-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(--magenta) }
/* aviso de honestidade nas versões traduzidas (EN/ES): a conversa
   é de cliente real, o que muda é só o idioma. */
.testi__nota{ margin-top:14px; text-align:center; font-size:.72rem; color:var(--tx-3) }

/* ── DESTAQUES (em alta agora) ────────────────────────── */
.spot{ position:relative; max-width:var(--wrap); margin-inline:auto }
.spot__rail{
  display:flex; gap:14px; overflow-x:auto;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
  padding:6px var(--pad) 22px;
  overscroll-behavior-x:contain;
}
.spot__rail::-webkit-scrollbar{ display:none }
.spot__card{
  position:relative; flex:0 0 min(78vw, 320px);
  scroll-snap-align:center; aspect-ratio:2/3;
  border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line); background:var(--bg-3);
  box-shadow:var(--shadow);
  transition:transform .4s var(--ease), border-color .4s var(--ease);
}
@media (min-width:760px){ .spot__card{ flex-basis:288px } }
.spot__card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease) }
.spot__card::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(10,7,20,.05) 30%,rgba(10,7,20,.6) 62%,rgba(10,7,20,.96) 100%);
}
.spot__body{ position:absolute; inset:auto 0 0 0; z-index:2; padding:17px 15px; display:grid; gap:8px }
.spot__rank{
  position:absolute; top:11px; left:11px; z-index:2;
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 10px; border-radius:100px;
  background:rgba(10,7,20,.72); backdrop-filter:blur(10px);
  border:1px solid var(--line-2);
  font-size:.64rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:var(--gold);
}
.spot__name{ font-size:1rem; font-weight:800; line-height:1.2; letter-spacing:-.01em; color:#fff }
.spot__tags{ display:flex; flex-wrap:wrap; gap:6px }
.spot__tags span{
  padding:4px 9px; border-radius:100px;
  background:rgba(255,255,255,.1); border:1px solid var(--line);
  font-size:.64rem; font-weight:600; color:var(--tx-2);
}
@media (hover:hover){
  .spot__card:hover{ transform:translateY(-6px); border-color:rgba(255,111,216,.5) }
  .spot__card:hover img{ transform:scale(1.06) }
}
.spot__arrow{
  position:absolute; top:calc(50% - 24px); z-index:5;
  width:42px; height:42px; display:none; place-items:center;
  border-radius:50%; background:rgba(16,10,32,.86);
  border:1px solid var(--line-2);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  transition:transform .2s var(--ease), background .2s var(--ease);
}
.spot__arrow svg{ width:20px; height:20px; fill:none; stroke:var(--tx); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round }
.spot__arrow--prev{ left:-6px }
.spot__arrow--next{ right:-6px }
.spot__arrow:hover{ background:var(--violet-2); transform:scale(1.08) }
.spot__arrow[disabled]{ opacity:.3; pointer-events:none }
@media (min-width:calc(480px + 80px)){ .spot__arrow{ display:grid } }
.spot__dots{ display:flex; justify-content:center; gap:7px; margin-top:2px }
.spot__dots button{ width:7px; height:7px; border-radius:100px; background:var(--line-2); transition:width .3s var(--ease), background .3s var(--ease) }
.spot__dots button[aria-selected="true"]{ width:22px; background:var(--magenta) }

/* ── ESTEIRA DE POSTERS (catálogo completo) ───────────────
   Mesmo tamanho e mecânica do site v1.0: 3 fileiras contínuas,
   sentidos alternados, mas sem achatar — aspect-ratio 2/3 real
   com object-fit:cover, nunca esticado. */
@keyframes slide{
  from{ transform:translate3d(0,0,0) }
  to  { transform:translate3d(-50%,0,0) }
}
.band{ position:relative; padding-block:clamp(56px,9vw,96px); overflow:hidden }
.band__rows{
  display:grid; gap:clamp(10px,2.4vw,16px);
  margin-top:clamp(28px,5vw,46px);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.band__row{ overflow:hidden }
.band__track{
  display:flex; align-items:flex-start; gap:clamp(10px,2.4vw,16px);
  width:max-content;
  will-change:transform;
  animation:slide var(--dur,60s) linear infinite;
}
.band__track--rev{ animation-direction:reverse }
.band__track img{
  width:clamp(96px,26vw,150px);
  height:auto;
  aspect-ratio:2/3;
  object-fit:cover;
  flex-shrink:0;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--bg-3);
  box-shadow:0 12px 28px -12px rgba(0,0,0,.8);
}
.band.is-out .band__track{ animation-play-state:paused }

/* ── NOTIFICAÇÃO DE COMPRA RECENTE ────────────────────── */
.notif{
  position:fixed; left:14px; bottom:14px; z-index:45;
  display:flex; align-items:center; gap:11px;
  max-width:min(300px, calc(100% - 28px));
  padding:11px 14px 11px 11px;
  border-radius:14px; border:1px solid var(--line-2);
  background:rgba(16,10,32,.96);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:var(--shadow);
  animation:notifIn .45s var(--ease) both;
}
.notif[hidden]{ display:none }
@keyframes notifIn{ from{ opacity:0; transform:translateY(14px) scale(.97) } to{ opacity:1; transform:none } }
.notif.saindo{ animation:notifOut .35s var(--ease) both }
@keyframes notifOut{ to{ opacity:0; transform:translateY(10px) scale(.98) } }
.notif__img{ flex:none; width:40px; height:40px; border-radius:9px; object-fit:cover; border:1px solid var(--line) }
.notif__txt{ min-width:0 }
.notif__ttl{ font-size:.8rem; font-weight:700; line-height:1.3; color:#fff }
.notif__sub{ font-size:.71rem; color:var(--tx-3); line-height:1.35; margin-top:2px }
.notif__sub b{ color:#34D976; font-weight:700 }
/* abaixo de 760px o CTA fixo (.sticky) ocupa a faixa inferior —
   sobe a notificação pra não ficar coberta por ele */
@media (max-width:760px){
  .notif{ left:10px; bottom:calc(78px + env(safe-area-inset-bottom)); padding:9px 12px 9px 9px }
}

/* ── COMPARAÇÃO DE PREÇO ───────────────────────────────── */
/* caixa "cara": lista dos apps + total somado, tudo em vermelho */
.compare__box{
  padding:16px 16px 6px;
  border-radius:var(--r);
  background:linear-gradient(165deg, rgba(255,72,96,.07), rgba(255,255,255,.015));
  border:1px solid rgba(255,72,96,.22);
  margin-bottom:4px;
}
.compare__list{ display:grid; gap:8px }
.compare__list li{
  display:flex; align-items:center; gap:12px;
  padding:11px 14px; border-radius:var(--r-sm);
  background:rgba(255,255,255,.04); border:1px solid var(--line);
}
.compare__icon{
  width:38px; height:38px; border-radius:10px; flex:none; object-fit:cover;
  box-shadow:0 6px 14px -6px rgba(0,0,0,.7);
}
.compare__name{ flex:1; font-weight:700; font-size:.94rem; color:var(--tx) }
.compare__price{ font-weight:800; font-size:.94rem; color:#FF6B7F; white-space:nowrap }
.compare__price small{ font-weight:600; font-size:.68rem; color:var(--tx-3); margin-left:2px }

.compare__sum{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:12px; padding:16px 14px 18px;
  border-top:1px dashed rgba(255,72,96,.32);
}
.compare__sum-label{ font-size:.8rem; font-weight:700; color:var(--tx-2); text-transform:uppercase; letter-spacing:.06em }
.compare__sum-val{
  font-size:clamp(1.5rem,6vw,1.9rem); font-weight:900; letter-spacing:-.02em;
  color:#FF6B7F; white-space:nowrap;
}

/* separador "ou" */
.compare__switch{
  display:flex; align-items:center; gap:14px;
  margin:22px 0;
}
.compare__switch-line{ flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--line-2),transparent) }
.compare__switch-word{
  font-size:.74rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tx-3);
}

/* caixa "barata": nosso preço, verde, com brilho */
.compare__ours{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  text-align:center; padding:30px 22px 26px;
  border-radius:var(--r);
  background:var(--grad-green);
  box-shadow:var(--shadow-green), 0 0 0 1px rgba(255,255,255,.1) inset;
}
/* brilho passando por cima, mesmo efeito do botão */
.compare__ours::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.22) 50%,transparent 80%);
  transform:translate3d(-120%,0,0);
  animation:shine 4.2s var(--ease) infinite;
  pointer-events:none;
}
@keyframes shine{
  0%,62%{ transform:translate3d(-120%,0,0) }
  100%  { transform:translate3d(120%,0,0) }
}
.compare__ours > *{ position:relative; z-index:1 }
.compare__ours-label{
  font-size:.74rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.9);
}
.compare__ours-was{
  font-size:1rem; font-weight:600; color:rgba(255,255,255,.72);
  text-decoration-thickness:2px;
}
.compare__ours-price{
  font-size:clamp(3rem,13vw,3.9rem); font-weight:900; color:#fff;
  letter-spacing:-.035em; line-height:1.02;
  text-shadow:0 6px 26px rgba(0,0,0,.28);
}
.compare__ours-sub{ font-size:.86rem; color:rgba(255,255,255,.92); font-weight:700 }
/* "desde" pequeno antes do valor — o preço grande é o do plano
   mais barato, e a linha de baixo abre os dois pra não deixar
   dúvida de quanto custa cada um. */
.compare__ours-price small{
  font-size:.42em; font-weight:800; letter-spacing:.02em;
  vertical-align:middle; margin-right:.12em; opacity:.9;
}
.compare__ours-planos{
  margin-top:7px; padding:6px 14px; border-radius:100px;
  background:rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.2);
  font-size:.78rem; font-weight:700; color:rgba(255,255,255,.95);
}
.compare__save{
  margin-top:12px; padding:8px 16px; border-radius:100px;
  background:rgba(0,0,0,.24); border:1px solid rgba(255,255,255,.26);
  font-size:.8rem; font-weight:800; color:#fff;
}

.compare__note{ margin-top:16px; text-align:center; font-size:.68rem; color:var(--tx-3); line-height:1.5 }

/* ── 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,.05), rgba(255,255,255,.015));
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.plan--vip{
  border-color:rgba(155,107,255,.4);
  box-shadow:var(--shadow), 0 0 0 1px rgba(155,107,255,.12), 0 30px 70px -20px var(--card-glow);
}
.plan__tag{
  display:inline-block; margin-bottom:16px;
  padding:6px 14px; border-radius:100px;
  background:linear-gradient(120deg,var(--violet-2),var(--violet));
  font-size:.68rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#fff;
}

.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__mosaic{ display:grid; grid-template-columns:repeat(4,1fr); align-items:start; gap:8px; margin-bottom:20px }
.plan__mosaic img{ width:100%; height:auto; aspect-ratio:2/3; object-fit:cover; border-radius:9px; border:1px solid var(--line) }

/* ── GRADE DE APPS (componente compartilhado) ─────────────
   "Os doramas desses apps — num acesso só". Aparece DUAS vezes:
   logo abaixo do vídeo (pra quem não rola a página inteira já
   entender a oferta) e dentro do card do plano VIP. Mesma
   marcação nos dois lugares — mexeu aqui, mudou nos dois. */
.appsbox{
  margin-bottom:18px; padding:16px 14px;
  border-radius:var(--r-sm);
  background:linear-gradient(120deg,var(--card-1),var(--card-2));
  border:1px solid var(--line);
}
/* no hero ele respira um pouco mais e centraliza junto do vídeo */
.hero .appsbox{ margin:24px auto 0; max-width:340px; text-align:center }
.appsbox__kicker{
  text-align:center; margin-bottom:14px;
  font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.75);
}
.appsbox__grid{
  display:grid; grid-template-columns:repeat(4,1fr); align-items:start; gap:12px 8px;
}
.appchip{ display:grid; justify-items:center; gap:6px; min-width:0 }
.appchip img{
  width:100%; max-width:46px; height:auto; aspect-ratio:1/1;
  border-radius:11px; object-fit:cover;
  box-shadow:0 8px 18px -8px rgba(0,0,0,.8);
}
.appchip b{
  font-size:.6rem; font-weight:700; color:rgba(255,255,255,.72);
  text-align:center; line-height:1.2; letter-spacing:-.01em;
  overflow:hidden; text-overflow:ellipsis; max-width:100%;
}

.plan__bonus{
  margin-bottom:18px; padding:15px 17px; border-radius:var(--r-sm);
  background:linear-gradient(120deg,var(--card-1),var(--card-2));
  border:1px solid var(--line); text-align:center;
}
.plan__bonus-kicker{ display:block; font-size:.64rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-bottom:4px }
.plan__bonus strong{ display:block; font-size:1.15rem; font-weight:900; color:#fff; letter-spacing:-.01em }
.plan__bonus-sub{ display:block; margin-top:5px; font-size:.78rem; color:rgba(255,255,255,.62) }

.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-heading); font-size:.66rem; font-weight:900; color:#1a0f2e; letter-spacing:.04em;
}
.plan__vip-desc{ margin-top:6px; font-size:.86rem; color:var(--tx-2) }

.plan__list{ display:grid; gap:11px; margin-bottom:22px }
.plan__list li{ position:relative; padding-left:27px; font-size:.9rem; color:var(--tx-2); line-height:1.4 }
.plan__list li b{ color:#fff; font-weight:800 }
.plan__list li::before{
  content:'✓'; position:absolute; left:0; top:0;
  width:18px; height:18px; display:grid; place-items:center;
  border-radius:50%; font-size:.62rem; font-weight:900;
  background:rgba(52,217,118,.14); color:#34D976; border:1.2px solid rgba(52,217,118,.5);
}
.plan__list--vip li::before{ background:rgba(155,107,255,.14); color:var(--violet); border-color:rgba(155,107,255,.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:#34D976;
  background:rgba(52,217,118,.14); border:1px solid rgba(52,217,118,.4);
  padding:4px 11px; border-radius:100px;
}

/* bloco de preço — grande, com número em gradiente e brilho de fundo */
.plan__price{
  position:relative;
  margin:8px auto 6px; padding:22px 16px; max-width:270px;
  border-radius:var(--r); text-align:center;
  background:linear-gradient(155deg, rgba(155,107,255,.16), rgba(108,76,224,.04));
  border:1px solid rgba(155,107,255,.32);
  box-shadow:0 22px 48px -22px rgba(108,76,224,.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(155,107,255,.32), transparent 70%);
  pointer-events:none;
}
.plan__cur,.plan__val,.plan__cents{
  background:var(--grad-heading);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  position:relative;
}
.plan__cur{ font-size:1.4rem; font-weight:800; vertical-align:top; top:10px; margin-right:2px }
.plan__val{ font-size:clamp(3.2rem,14vw,4rem); font-weight:900; letter-spacing:-.04em; line-height:1 }
.plan__cents{ font-size:1.7rem; font-weight:800; letter-spacing:-.02em }
/* VIP: preço ainda maior e com brilho verde (é o plano que a gente quer vender) */
.plan--vip .plan__price{
  background:linear-gradient(155deg, rgba(52,217,118,.16), rgba(22,163,74,.04));
  border-color:rgba(52,217,118,.38);
  box-shadow:0 22px 48px -22px rgba(22,163,74,.8), inset 0 1px 0 rgba(255,255,255,.1);
}
.plan--vip .plan__price::before{
  background:radial-gradient(ellipse at 50% 100%, rgba(52,217,118,.3), transparent 70%);
}
.plan--vip .plan__cur,
.plan--vip .plan__val,
.plan--vip .plan__cents{
  background:linear-gradient(135deg,#6BF5A0 0%,#34D976 55%,#16A34A 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(243,200,123,.1); border:1px solid rgba(243,200,123,.26);
  font-size:.8rem; font-weight:600; color:var(--gold);
}
.plan__urg b{ font-variant-numeric:tabular-nums; font-weight:800 }

/* ── GARANTIA ──────────────────────────────────────────── */
.guarantee{ text-align:center }
.guar__eyebrow{ font-size:.8rem; font-weight:800; letter-spacing:.06em; color:#34D976; 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,.5)) }
.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(--violet); 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.4rem,6vw,1.9rem); font-weight:900; color:#fff; line-height:1.22; 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) }

/* ── FOOTER ────────────────────────────────────────────── */
.ft{ padding-block:40px 100px; border-top:1px solid var(--line); text-align:center }
.ft__logo{ width:150px; height:auto; margin:0 auto 16px; opacity:.9 }
.ft__legal{ font-size:.76rem; color:var(--tx-3); line-height:1.6 }

/* ── CTA FIXO MOBILE ───────────────────────────────────── */
.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(10,7,20,.92);
  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 } }

/* ── REVEAL 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{ animation:none }
  .player__proof-dot{ animation:none }
}

/* ═══════════════════════════════════════════════════════════
   POPUP DE UPGRADE — abre no clique do Plan Básico
   (assets/js/upgrade-es.js). Só existe no /es/.

   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(6,3,14,.82);
  -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:440px;
  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(--shadow);
  animation:upgSube .24s cubic-bezier(.2,.8,.3,1);
}

.upg__x{
  position:absolute; top:10px; right:10px; z-index:2;
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  font-size:22px; line-height:1;
  color:#fff; background:rgba(10,7,20,.62);
  border:1px solid var(--line-2);
  cursor:pointer;
}
.upg__x:hover{ background:rgba(10,7,20,.85); }

.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 3:2 cheia, o "no, gracias" caía fora da tela —
   e saída que exige scroll é saída escondida. */
.upg__foto img{
  display:block; width:100%; height:158px; object-fit:cover; object-position:center 32%;
  border-radius:20px 20px 0 0;
}
@media (min-height:800px){ .upg__foto img{ height:190px; } }
/* degradê pro texto começar sem emenda dura com a foto */
.upg__foto::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:42%;
  background:linear-gradient(180deg, rgba(23,15,44,0) 0%, var(--bg-3) 100%);
  pointer-events:none;
}

.upg__sello{
  position:absolute; top:12px; left:12px; z-index:1;
  padding:5px 11px; border-radius:999px;
  font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:#2A0A00; background:linear-gradient(135deg,#FFD37A 0%,#F3A64B 100%);
  box-shadow:0 6px 18px -6px rgba(243,166,75,.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(--magenta);
}
.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;
  background:var(--grad-heading); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.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__texto--dolor{ color:var(--tx-3); font-size:13.5px; font-style:italic; }

.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; color:var(--tx);
  background:var(--grad-heading); -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; padding:0; list-style:none; 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:#34D976;
}
.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;
  cursor:pointer;
}
.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; }
}

/* telas baixas (celular deitado): a foto some pra caber a decisão */
@media (max-height:620px){
  .upg__foto{ display:none; }
  .upg__caja{ border-radius:16px; }
  .upg__cuerpo{ padding-top:18px; }
}

@media (prefers-reduced-motion:reduce){
  .upg, .upg__caja{ animation:none; }
}

/* ═══════════════════════════════════════════════════════════
   OPÇÃO ANUAL — aparece embaixo da mensal, nos dois planos.

   Sem alternador de propósito: toggle esconde uma das duas atrás de
   um clique, e a anual só convence quando ela VÊ a conta feita —
   12 × mensal riscado contra o preço do ano, e o "sale a X/mes",
   que compara na unidade que ela já tem na cabeça.

   Visualmente é SECUNDÁRIA (borda, não preenchida): a mensal
   continua sendo o botão principal, porque é o degrau de entrada
   mais fácil. Quem quer economizar acha a anual sozinha.
   ═══════════════════════════════════════════════════════════ */
.anual{
  margin:14px 0 0;
  padding:14px 14px 13px;
  border:1px dashed var(--line-2);
  border-radius:14px;
  background:rgba(155,107,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--vip{ border-color:rgba(255,111,216,.35); background:rgba(255,111,216,.07); }

/* ── TRIMESTRAL ──
   Verde-água, e não roxo nem rosa: ele fica ENTRE o mensal e o anual
   na página, e precisava de cor própria pra não virar "mais um bloco
   pontilhado igual". Cor diferente também deixa claro, num relance,
   que são três opções e não duas.

   O destaque em `.anual__conta b` do lado das pantallas é de
   propósito: o desconto aqui é pequeno (7,70 €) e não é ele que
   vende — é a TELA. */
.anual--trim{
  border-color:rgba(64,214,190,.38);
  background:rgba(64,214,190,.07);
}
.anual--trim .anual__kicker{ color:#40D6BE; }
.anual--trim .anual__conta b{ color:#7FE8D8; }

/* ── DE POR VIDA ──
   Dourado, a cor que este funil já usa pra "o mais alto" (`--dourado`
   do CTA e dos selos). Cor própria pelo mesmo motivo do trimestral:
   quatro blocos pontilhados iguais viram um borrão, e a de por vida
   precisa parecer o topo da escada — é o maior valor da página. */
.anual--vida{
  border-color:rgba(243,200,123,.45);
  background:rgba(243,200,123,.08);
}
.anual--vida .anual__kicker{ color:#F3C87B; }
.anual--vida .anual__conta b{ color:#F7DCA9; }
.anual--vida .btn--fantasma{ border-color:rgba(243,200,123,.65); }

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

/* Botão SECUNDÁRIO (contorno, sem preenchimento).
   Não existia neste CSS — a classe `btn--fantasma` vinha do app. Sem
   ela, o botão anual herdava o verde do `.btn` e ficava idêntico ao
   principal: dois CTAs com o mesmo peso é o jeito mais rápido de
   fazer a pessoa não clicar em nenhum. */
.btn--fantasma{
  background:transparent;
  border:1.5px solid var(--line-2);
  color:var(--tx);
  box-shadow:none;
}
.anual .btn--fantasma{ border-color:rgba(243,200,123,.55); }
.anual--vip .btn--fantasma{ border-color:rgba(255,111,216,.55); }
@media (hover:hover){
  .btn--fantasma:hover{
    background:rgba(255,255,255,.06);
    box-shadow:none;
    transform:translateY(-2px);
    filter:none;
  }
}

/* Contato no rodapé. Fica ACIMA do texto legal de propósito: quem
   desce até o fim procurando ajuda tem que achar o e-mail antes do
   bloco de direitos autorais, não depois. */
.ft__contacto{
  margin-bottom:10px;
  font-size:.82rem;
  color:var(--tx-2);
}
.ft__contacto a{
  color:var(--magenta);
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
  word-break:break-word;   /* e-mail longo não estoura a tela do celular */
}