/* amodramas — folha unica, escrita a mao. Sem Tailwind, sem build, sem PostCSS.
   Tokens iguais aos do tema antigo pra que a cara do site nao mude:
   fundo #080808, card #121212, borda #242424, rosa #FF75A8. */

/* o atributo hidden SEMPRE oculta — componentes com display próprio (.field flex,
   etc.) sobrescreviam o hidden e vazavam campos (ex.: a senha do login). */
[hidden]{display:none!important}

:root{
  --bg:#080808;
  --card:#121212;
  --card2:#181818;
  --surface:#1c1c1c;
  --line:#242424;
  --line2:#2e2e2e;
  --txt:#ffffff;
  --muted:#a0a0a0;
  --muted2:#6b6b6b;
  --primary:#FF75A8;
  --primary-2:#e0568c;
  --primary-ink:#ffffff;
  /* ── COR DE ACENTO DA FOLHA DE ASSINATURA ──────────────────────────────────
     Estes seis valores eram 40 cores escritas na mao espalhadas pelas regras da
     folha (planos + checkout). Trocar o acento da tela era caçar dourado em 40
     lugares e errar em dois. Agora e' um lugar so, e existe o bloco "TEMA ROSA"
     no fim do arquivo que sobrescreve estes seis — apagar aquele bloco devolve o
     dourado inteiro, sem tocar em mais nada.
     --vip-rgb e' o MESMO tom de --vip-a, so que em canal solto: as regras usam
     rgba(var(--vip-rgb),.16) e afins, e sem o par a variavel nao serviria pras
     transparencias, que sao metade dos usos. */
  --vip-a:#e6b45a;            /* acento principal (texto, borda, icone) */
  --vip-a2:#f0c674;           /* claro, inicio dos degrades cheios */
  --vip-a3:#d19a3c;           /* escuro, fim dos degrades cheios */
  --vip-ink:#2a1c05;          /* texto EM CIMA da cor cheia */
  --vip-rgb:230,180,90;       /* = --vip-a, pros rgba() */
  --vip-rgb2:240,198,116;     /* = --vip-a2, pros rgba() */
  /* O botao tem tokens proprias porque ele nao usa o acento cru: e' superficie
     preenchida, precisa de um par de cores e de um halo. Padrao dourado, como
     sempre foi — o bloco TEMA ROSA no fim do arquivo troca os tres de uma vez,
     entao apagar aquele bloco devolve tambem o botao, e nao so os detalhes. */
  --vip-cta-bg:linear-gradient(135deg,#f5d488,#e0a942);
  --vip-cta-ink:#3a2400;
  --vip-cta-glow:rgba(230,180,90,.6);
  --premium:#f0b429;
  --green:#10b981;
  --red:#ef4444;
  --radius:12px;
  --radius-lg:16px;
  --radius-xl:22px;
  --shell:1280px;
  --nav-h:64px;
  --tab-h:56px;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--txt);
  font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  overflow-x:clip;   /* o fundo full-bleed do hero (100vw) nao gera barra horizontal */
  padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom));
}
@media(min-width:768px){body{padding-bottom:0}}

img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-weight:700;letter-spacing:-.02em;line-height:1.2}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}
::selection{background:var(--primary);color:#fff}

/* mata o zoom do duplo-toque e o flash cinza ao tocar nos controles */
a,button,label,summary,select,
input[type=button],input[type=submit],input[type=reset],
input[type=checkbox],input[type=radio],
[role=button],[data-sheet-open],[data-subscribe]{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

/* iOS: input com menos de 16px faz a tela dar zoom no foco */
@supports(-webkit-touch-callout:none){
  input,select,textarea{font-size:16px !important}
}

.shell{max-width:var(--shell);margin:0 auto;padding:0 16px}
@media(min-width:640px){.shell{padding:0 24px}}
@media(min-width:1024px){.shell{padding:0 48px}}

.muted{color:var(--muted)}
.small{font-size:12px}
.center{text-align:center}
.stack{display:flex;flex-direction:column;gap:12px}
.row{display:flex;align-items:center;gap:10px}
.spread{display:flex;align-items:center;justify-content:space-between;gap:12px}
.wrap{flex-wrap:wrap}
.grow{flex:1;min-width:0}
.hide-mobile{display:none}
@media(min-width:768px){.hide-mobile{display:flex}.hide-desktop{display:none!important}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ─────────────── topo ─────────────── */
/* Header sólido, sempre fixo no topo (grudado), como o iDrama. */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  /* vidro fumê (nao transparente total): dá pra ler o header sobre qualquer conteúdo */
  background:rgba(12,12,14,.72);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:transform .34s var(--ease),background .3s,border-color .3s;
}
/* Esconde ao rolar pra BAIXO; reaparece a cada deslizada pra CIMA (app-fx.js) — PC e celular. */
.nav.nav-hidden{transform:translateY(-100%)}
/* Home: no TOPO fica transparente sobre o banner; ao rolar ganha o vidro fumê. */
body.is-home .nav.at-top{background:transparent;border-bottom-color:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none}

/* O conteúdo começa abaixo do topo fixo. */
main{padding-top:var(--nav-h)}
/* A pagina "bare" (paywall, /assinar) esconde a navbar, mas o main continuava
   reservando os 64px dela — uma faixa preta no topo, acima do papel de parede
   dourado. Foi o "retangulo preto" que o dono viu na tela.
   A excecao da linha ~121 (flash-wrap + main) devolve o espaco quando ha um
   aviso no topo, entao continua valendo. */
body.bare main{padding-top:0}
/* A mensagem de flash e irma ANTERIOR do <main>, e quem compensa a navbar fixa e o
   `main{padding-top}` acima — entao o aviso nascia debaixo da barra (MEDIDO: alerta
   em y=16..61,5 dentro da navbar y=0..65, 100% coberto; elementFromPoint devolvia
   IMG.brand-logo). A compensacao passa pro flash e o <main> logo depois nao repete o
   padding. `+` e CSS2, sem :has(). MEDIDO na home depois do patch: alerta em y=80,
   elementFromPoint devolve DIV.alert e o conteudo continua comecando em 140.
   Telas BARE (assinar/checkout/login) nao tem navbar mas o main delas SEMPRE teve
   64px de padding — a ultima linha devolve esses 64px pra pagina bare nao pular
   quando ha mensagem (MEDIDO em /assinar: identico com e sem flash, primeiro filho
   em y=140 nos dois casos). */
.flash-wrap{padding-top:var(--nav-h)}
.flash-wrap + main{padding-top:0}
body.is-player .flash-wrap,body.is-feed .flash-wrap,body.bare .flash-wrap{padding-top:0}
body.bare .flash-wrap + main{padding-top:var(--nav-h)}

.nav-in{display:flex;align-items:center;gap:10px;height:var(--nav-h);
  max-width:var(--shell);margin:0 auto;padding:0 12px}
@media(min-width:640px){.nav-in{padding:0 20px;gap:14px}}
@media(min-width:1024px){.nav-in{padding:0 32px}}

/* Busca ocupando da borda esquerda até onde os botões começam. */
.nav-search{position:relative;display:flex;align-items:center;flex:1;min-width:0}
.nav-search .ico{position:absolute;left:13px;color:var(--muted2);pointer-events:none;display:grid}
.nav-search input{
  width:100%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.09);
  border-radius:999px;padding:10px 16px 10px 38px;font-size:13.5px;color:var(--txt);
  transition:background .2s,border-color .2s
}
.nav-search input::placeholder{color:var(--muted2)}
.nav-search input:focus{outline:none;background:rgba(255,255,255,.1);
  border-color:rgba(255,117,168,.45)}
.nav-search input::-webkit-search-cancel-button{filter:invert(.6)}

.nav-actions{display:flex;align-items:center;gap:6px;flex:none}

/* botões da busca-lupa: só aparecem no celular (ver @media max-width:767) */
.nav-search-toggle,.nav-search-close{display:none;background:transparent;border:0;color:var(--txt);cursor:pointer;padding:0}

/* Coroa: chama pra assinar. */
.crownbtn{
  width:38px;height:38px;border-radius:999px;display:grid;place-items:center;
  color:var(--premium);background:rgba(240,180,41,.13);
  border:1px solid rgba(240,180,41,.28);transition:.2s
}
.crownbtn:hover{background:rgba(240,180,41,.22);color:#ffd166}

/* ─────────────── dropdown (details, sem script) ─────────────── */
.drop{position:relative}
.drop > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:4px;
  height:38px;padding:0 8px;border-radius:999px;color:var(--muted);transition:.2s
}
.drop > summary::-webkit-details-marker{display:none}
.drop > summary:hover{background:rgba(255,255,255,.07);color:var(--txt)}
.drop[open] > summary{background:rgba(255,255,255,.09);color:var(--txt)}
.drop .flag{border-radius:3px;display:block}

.drop-menu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:70;min-width:198px;
  background:rgba(18,18,18,.97);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid var(--line2);border-radius:14px;padding:6px;
  box-shadow:0 18px 44px -16px rgba(0,0,0,.9)
}
.drop-menu a{
  display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;
  font-size:13px;font-weight:500;color:var(--muted);transition:.15s;white-space:nowrap
}
.drop-menu a:hover{background:rgba(255,255,255,.06);color:var(--txt)}
.drop-menu a.on{color:var(--txt)}
.drop-menu a.on svg:last-child{margin-left:auto;color:var(--primary)}
.drop-menu a.hi{color:var(--primary)}
.drop-head{padding:9px 11px 11px;border-bottom:1px solid var(--line);margin-bottom:5px}
.drop-head b{display:block;font-size:13px}
.drop-head span{display:block;font-size:11px;color:var(--muted2);margin-top:2px}
.brand{display:flex;align-items:center;flex:none}
.brand img{height:34px;width:auto;object-fit:contain;filter:brightness(1.1) drop-shadow(0 0 8px rgba(255,117,168,.35))}
.brand .brand-txt{font-family:'Poppins',sans-serif;font-weight:800;font-size:19px;letter-spacing:-.03em}
.brand .brand-txt b{color:var(--primary)}
@media(min-width:640px){.brand img{height:44px}}

/* Links centralizados entre a logo e os ícones, como no site real. */
.nav-links{display:none;align-items:center;justify-content:center;gap:28px;flex:1}
@media(min-width:768px){.nav-links{display:flex}}
.nav-links a{font-size:14px;font-weight:500;color:var(--muted);transition:color .15s;white-space:nowrap}
.nav-links a:hover{color:var(--txt)}
.nav-links a.on{color:var(--txt);font-weight:600}
.nav-links a.admin{color:var(--primary);display:inline-flex;align-items:center;gap:5px}

.nav-right{margin-left:auto;display:flex;align-items:center;gap:6px}
.iconbtn{
  width:38px;height:38px;border-radius:999px;border:0;background:transparent;
  color:var(--muted);display:grid;place-items:center;cursor:pointer;transition:.15s
}
.iconbtn:hover{color:var(--txt);background:rgba(255,255,255,.06)}
.avatar{
  width:36px;height:36px;border-radius:999px;display:grid;place-items:center;
  background:rgba(255,117,168,.18);border:1px solid rgba(255,117,168,.35);
  color:var(--primary);font-weight:700;font-size:13px;overflow:hidden
}
.avatar img{width:100%;height:100%;object-fit:cover}

/* Seletor de idioma por bandeira. O ativo fica opaco; o outro apagado. */
.langsel{display:flex;gap:2px;background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:3px}
.langsel a{
  display:grid;place-items:center;width:30px;height:26px;border-radius:999px;
  font-size:15px;line-height:1;opacity:.4;transition:.15s
}
.langsel a:hover{opacity:.8}
.langsel a.on{opacity:1;background:var(--surface)}
.langsel .flag{filter:saturate(1.1)}

/* ─────────────── modais (login e paywall) ─────────────── */
/* Abrem por :target — o link é #login / #premium e não precisa de script.
   .is-open força a abertura quando o servidor precisa reexibir (erro de senha). */
.modal{
  position:fixed;inset:0;z-index:100;display:none;
  align-items:center;justify-content:center;padding:18px
}
.modal:target,.modal.is-open{display:flex}
.modal-veil{
  position:absolute;inset:0;background:rgba(0,0,0,.78);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);backdrop-filter:blur(18px) saturate(1.15)
}
.modal-box{
  position:relative;z-index:1;width:100%;max-width:390px;
  background:var(--card);border:1px solid var(--line2);border-radius:20px;
  padding:28px 24px 22px;box-shadow:0 30px 70px -20px rgba(0,0,0,.9);
  max-height:calc(100dvh - 36px);overflow-y:auto
}
.modal-box.wide{max-width:440px}
.modal-box h2{font-family:'Poppins',sans-serif;font-size:20px;font-weight:800;letter-spacing:-.03em}
.modal-sub{font-size:12.5px;color:var(--muted);margin:5px 0 18px;line-height:1.5}
.modal-x{
  position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:999px;
  display:grid;place-items:center;color:var(--muted2);transition:.15s
}
.modal-x:hover{background:rgba(255,255,255,.07);color:var(--txt)}
.modal-crown{
  display:grid;place-items:center;width:48px;height:48px;border-radius:14px;
  background:rgba(240,180,41,.14);color:var(--premium);margin-bottom:12px
}
.modal-foot{font-size:11px;color:var(--muted);margin-top:14px;text-align:center;line-height:1.5}

/* ── modal de entrada ─────────────────────────────────────────────────────
   Escopado em .modal-auth: a .input e usada no admin e no perfil inteiros,
   entao nada aqui pode vazar pra fora do modal. */
/* 42px e centrada: a marca e a primeira coisa que responde "estou no site
   certo pra digitar meu e-mail?". Em 30px, encostada na esquerda, ela lia como
   detalhe de cabecalho. `margin auto` centra sem mexer no fluxo do resto. */
/* 52px e 26px de respiro embaixo: a marca e a primeira coisa que responde
   "e o site certo pra eu digitar meu e-mail?", e apertada contra o titulo ela
   lia como cabecalho de sistema. Com o espaco ela vira assinatura. */
.modal-logo{display:block;height:52px;width:auto;object-fit:contain;margin:2px auto 26px;
  filter:drop-shadow(0 3px 14px rgba(255,117,168,.42))}
.modal-logo-txt{display:block;font-family:'Poppins',sans-serif;font-size:26px;font-weight:800;
  letter-spacing:-.03em;margin:2px 0 26px;color:var(--txt);text-align:center}
.modal-logo-txt b{color:var(--primary);font-weight:800}
/* 16px NAO e capricho: abaixo disso o Safari do iPhone da zoom ao focar o campo
   e joga o modal (position:fixed) pra fora da tela, no passo mais importante. */
.modal-auth .input{font-size:16px}
.modal-auth .input:focus{outline:2px solid var(--primary);outline-offset:1px}
.modal-auth .input.err{border-color:#ff6b6b}
/* o :focus-visible global aplica border-radius:4px e quadrava o botao pilula */
.modal-auth .btn-block:focus-visible{border-radius:999px}
.modal-auth .btn[aria-busy="true"]{opacity:.65;pointer-events:none}
/* campo que o app-login.js revela: entra deslizando, em vez de simplesmente
   aparecer. So transform/opacity — nada que gere reflow. */
.modal-auth .field[data-fld]:not([hidden]){animation:fieldIn .22s var(--ease) both}
@keyframes fieldIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.modal-auth .field[data-fld]:not([hidden]){animation:none}}

/* Divisória com o "ou" no meio, separando e-mail do Google. */
.modal-or{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--muted2);font-size:11px}
.modal-or::before,.modal-or::after{content:"";flex:1;height:1px;background:var(--line2)}

/* Contorno, nao bloco branco. Um botao branco solido do lado de um botao rosa
   solido cria duas chamadas do mesmo peso e a pessoa para pra escolher — o
   caminho principal aqui e o e-mail. Assim ele fica disponivel sem competir. */
.btn-google{
  display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  padding:11px 18px;border-radius:999px;
  background:transparent;border:1px solid var(--line2);color:var(--muted);
  font-size:13px;font-weight:600;transition:.15s
}
.btn-google:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.24);color:var(--txt)}
.btn-google svg{opacity:.95}

.modal-perks{list-style:none;display:flex;flex-direction:column;gap:7px;margin-top:16px}
.modal-perks li{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:var(--muted)}
.modal-perks li svg{flex:none;margin-top:2px;color:var(--primary)}

.planlist{display:flex;flex-direction:column;gap:8px}
.planrow{
  display:flex;align-items:center;gap:10px;padding:13px 15px;border-radius:13px;
  background:var(--card2);border:1px solid var(--line);transition:.15s
}
.planrow:hover{border-color:var(--line2);background:var(--surface)}
.planrow.best{border-color:rgba(255,117,168,.5);background:rgba(255,117,168,.06)}
.planrow b{display:block;font-size:14px}
.planrow span{display:block;font-size:11.5px;color:var(--muted2);margin-top:1px}
.planrow strong{font-family:'Poppins',sans-serif;font-size:16px;font-weight:800;white-space:nowrap}

/* ─────────────── busca ─────────────── */
.searchbar{position:relative;display:flex;align-items:center;width:100%}
.searchbar input{
  width:100%;background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:12px 46px 12px 42px;font-size:14px;color:var(--txt);transition:border-color .15s
}
.searchbar input::placeholder{color:var(--muted2)}
.searchbar input:focus{outline:none;border-color:rgba(255,117,168,.5)}
.searchbar .ico{position:absolute;left:15px;color:var(--muted2);pointer-events:none;display:grid}
.searchbar button{
  position:absolute;right:6px;background:var(--primary);border:0;border-radius:999px;
  color:#fff;padding:7px 15px;font-size:12.5px;font-weight:700;cursor:pointer
}

/* ─────────────── filtros ─────────────── */
/* Faixa de audio: grupo segmentado — pilula dentro de um trilho arredondado,
   a ativa em rosa. Sem contador, como no site. */
.seg{
  display:inline-flex;width:100%;padding:4px;border-radius:999px;
  background:rgba(28,28,28,.4);border:1px solid rgba(36,36,36,.4);
  backdrop-filter:blur(6px);overflow-x:auto;scrollbar-width:none
}
.seg::-webkit-scrollbar{display:none}
@media(min-width:640px){.seg{width:auto}}
.seg a{
  flex:1;white-space:nowrap;text-align:center;padding:8px 16px;border-radius:999px;
  font-size:12px;font-weight:600;color:var(--muted);transition:.2s
}
@media(min-width:640px){.seg a{flex:none;padding:8px 20px;font-size:13px}}
.seg a:hover{color:var(--txt)}
.seg a.on{background:var(--primary);color:#fff;box-shadow:0 2px 12px rgba(255,117,168,.35)}

/* Categorias: pilulas planas; a ativa ganha um leve preenchimento e borda. */
.chips{
  display:flex;gap:6px;justify-content:center;overflow-x:auto;scrollbar-width:none;
  padding-bottom:4px;margin:0 -16px;padding-left:16px;padding-right:16px
}
.chips::-webkit-scrollbar{display:none}
@media(min-width:640px){.chips{margin:0;padding-left:0;padding-right:0}}
.chip{
  flex:none;padding:6px 14px;border-radius:999px;font-size:11.5px;font-weight:500;
  letter-spacing:.01em;color:rgba(160,160,160,.8);border:1px solid transparent;
  white-space:nowrap;cursor:pointer;transition:.2s
}
.chip:hover{color:var(--txt);background:rgba(28,28,28,.4)}
/* :has() faz o destaque seguir o radio marcado NA HORA do clique — o chip do
   PIX era um <label> com radio display:none, o valor salvava certo mas o realce
   nao se movia e parecia quebrado (09/08/2026). */
.chip.on,.chip:has(input:checked){background:rgba(255,255,255,.1);color:var(--txt);border-color:rgba(255,255,255,.2)}

/* ─────────────── secoes ─────────────── */
.section{margin-bottom:32px}
@media(min-width:1024px){.section{margin-bottom:48px}}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.section-head h2{
  display:flex;align-items:center;gap:8px;
  font-size:14px;font-weight:700;letter-spacing:-.01em
}
@media(min-width:640px){.section-head h2{font-size:18px}}
@media(min-width:1024px){.section-head h2{font-size:20px}}
.section-head h2 .mark{color:var(--primary);display:inline-flex}
.section-head p{font-size:11.5px;color:var(--muted2);margin-top:3px}
.section-head a{
  display:inline-flex;align-items:center;gap:2px;
  font-size:12px;font-weight:500;color:var(--muted);white-space:nowrap;transition:.15s
}
.section-head a:hover{color:var(--txt)}

/* carrossel horizontal — scroll nativo com snap, sem JS */
.carousel{
  display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding-bottom:4px;
  scroll-padding-left:16px
}
.carousel::-webkit-scrollbar{display:none}
/* flex-basis (não width) manda no tamanho do item flex — assim o .mcard{width:100%}
   não estufa o card pra largura toda dentro do carrossel. */
.carousel > *{scroll-snap-align:start;flex:0 0 118px;max-width:118px}
@media(min-width:640px){.carousel > *{flex-basis:140px;max-width:140px}.carousel{gap:14px}}
@media(min-width:1024px){.carousel > *{flex-basis:158px;max-width:158px}}

/* 2 por linha no celular; 5 no PC (a pedido) */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:640px){.grid{grid-template-columns:repeat(3,1fr);gap:16px}}
@media(min-width:1024px){.grid{grid-template-columns:repeat(5,1fr)}}

/* ─────────────── card de filme ─────────────── */
.mcard{display:block;position:relative;width:100%}
.mcard .thumb{
  position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:var(--radius);
  background:var(--card);transition:transform .18s ease-out
}
.mcard .thumb img{width:100%;height:100%;object-fit:cover}
@media(hover:hover){.mcard:hover .thumb{transform:scale(1.04)}.mcard:hover .thumb img{filter:brightness(.9)}}
.mcard:active .thumb{transform:scale(.97)}
.mcard h3{
  font-size:11.5px;font-weight:600;line-height:1.25;margin-top:6px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.mcard .badge{
  position:absolute;top:6px;right:6px;z-index:2;
  background:rgba(255,117,168,.92);color:#fff;font-size:8px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;border-radius:4px
}
.mcard .soon{
  position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding-bottom:12px
}
/* "Em breve" precisa ser LIDO de relance no meio de uma grade de capas iguais:
   a pilula preta translucida sumia em capa escura. Com a cor da marca ela conta
   a historia sozinha — a cliente entende que aquilo ainda nao abre. */
.mcard .soon span{
  background:var(--primary);color:var(--accink,#2b0716);border-radius:999px;
  padding:4px 12px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  box-shadow:0 4px 14px -4px rgba(0,0,0,.7)
}
.mcard.dim .thumb img{filter:brightness(.6)}

/* Texto de apoio do carrossel (o "Em Breve" usa). Fica sob o subtitulo, com o
   icone alinhado a PRIMEIRA linha — em telas estreitas a frase quebra em duas e
   um icone centralizado ficaria boiando no meio. */
.sec-info{display:flex;align-items:flex-start;gap:6px;margin-top:6px;max-width:52ch;
  font-size:11.5px;line-height:1.45;color:var(--muted2)}
/* o partial de icone devolve <span class="msym"> (fonte Material), nao <svg> —
   mirar so em svg deixaria o icone sem cor e desalinhado */
.sec-info .msym,.sec-info svg{flex:0 0 auto;margin-top:1px;color:var(--primary)}

/* Drama "em breve": nao ha video, entao some tudo que so faz sentido tocando.
   A barra zerada ("0:00 / 0:00") e o que mais faz parecer defeito — e a cliente
   ja esta lendo que o drama esta sendo preparado. Curtir, comentar, compartilhar
   e reportar FICAM: sao justamente o que ela pode fazer enquanto espera. */
.vplayer.vp-soon .vp-progwrap,
.vplayer.vp-soon .vp-skip,
.vplayer.vp-soon .vp-playbtn,
.vplayer.vp-soon .vp-fs,
.vplayer.vp-soon .vp-cast{display:none}
/* e a coluna nao se recolhe: sem video nao ha gesto que a traga de volta */
.vplayer.vp-soon .vp-side,
.vplayer.vp-soon .vp-info{opacity:1!important;visibility:visible!important;pointer-events:auto!important}
/* Top 10: numerao em italico atras da capa, que fica deslocada pra direita.
   O numero e absoluto e nao entra no fluxo — a altura da linha e a da capa. */
.mcard.ranked{padding-left:32px}
.mcard.ranked .bignum{
  position:absolute;left:0;bottom:0;z-index:0;
  font-family:'Poppins',sans-serif;font-weight:900;font-style:italic;
  font-size:80px;line-height:.8;letter-spacing:-.06em;
  color:var(--bg);-webkit-text-stroke:2px rgba(255,255,255,.22);
  user-select:none;pointer-events:none;white-space:nowrap
}
.mcard.ranked .bignum.two{font-size:64px}
.mcard.ranked .thumb{position:relative;z-index:1}
.mcard.ranked h3{margin-left:0}
/* Selo pequeno com a posicao, no canto da capa. */
.mcard .rank{
  position:absolute;top:6px;left:6px;z-index:3;
  width:20px;height:20px;border-radius:6px;background:rgba(255,117,168,.9);
  display:grid;place-items:center;
  font-size:10px;font-weight:800;line-height:1;color:#fff
}
/* barra de progresso do "continuar assistindo" */
.mcard .prog{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.18)}
.mcard .prog i{display:block;height:100%;background:var(--primary)}

/* ─────────────── banner do topo (estilo iDrama) ───────────────
   Carrossel de cards em RETRATO 3:4 (layout_banner2/3), radius 12dp, com os
   vizinhos espiando; fundo = a capa do card ativo borrada (iv_background,
   alpha .4); dots em LINHA (16/10dp) e legenda sp_14. Medidas do sistema real. */
.hero-wrap{position:relative;margin:4px 0 2px}
/* fundo desfocado ocupa a TELA toda na horizontal (full-bleed), nao so o container central */
.hero-bg{position:absolute;left:50%;width:100vw;margin-left:-50vw;top:calc(-1 * var(--nav-h) - 58px);z-index:0;pointer-events:none;
  height:calc(62% + var(--nav-h) + 58px);
  background-size:cover;background-position:center top;opacity:.4;
  filter:blur(22px) saturate(1.2);transform:translateZ(0);backface-visibility:hidden}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,transparent 40%,var(--bg))}
.hero-track{position:relative;z-index:1;display:flex;gap:12px;overflow-x:auto;
  scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 34px;scroll-padding:0 34px}
.hero-track::-webkit-scrollbar{display:none}
.hero-card{position:relative;flex:0 0 84%;max-width:430px;scroll-snap-align:center;
  aspect-ratio:3/4;border-radius:12px;overflow:hidden;background:var(--card);
  box-shadow:0 16px 38px -18px rgba(0,0,0,.8)}
.hero-card img{width:100%;height:100%;object-fit:cover}
.hero-card::after{content:"";position:absolute;inset:auto 0 0 0;height:32%;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.55),transparent)}
@media(min-width:640px){.hero-card{flex-basis:58%;max-width:460px}}
@media(min-width:1024px){.hero-card{flex-basis:32%;max-width:392px}}
.hero-orb{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:58px;height:58px;border-radius:999px;display:grid;place-items:center;color:#fff;
  background:rgba(0,0,0,.3);border:2px solid rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:transform .2s var(--ease)}
.hero-orb:active{transform:translate(-50%,-50%) scale(.92)}
.hero-orb .msym{margin-left:3px}
.hero-caption{position:relative;z-index:1;text-align:center;font-size:14px;font-weight:600;color:#fff;
  padding:12px 20px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-dots{position:relative;z-index:1;display:flex;justify-content:center;gap:6px;padding:11px 0 2px}
.hero-dots i{width:10px;height:3px;border-radius:2px;background:rgba(255,255,255,.3);transition:.25s}
.hero-dots i.on{width:16px;background:var(--primary)}

/* ─────────────── tabs SPA: painéis instantâneos ─────────────── */
.tab-panel[hidden]{display:none}
.sub-tabs{display:flex;gap:20px;align-items:center;padding:2px 0 6px}
.sub-tab{background:transparent;border:0;color:var(--muted2);font-size:14px;font-weight:700;
  cursor:pointer;padding:4px 0;transition:color .2s}
.sub-tab.on{color:var(--premium)}
/* ornamento dourado dos dois lados da sub-tab ativa (estilo iDrama) */
.sub-tab.on::before,.sub-tab.on::after{content:"";display:inline-block;width:12px;height:20px;
  vertical-align:-5px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='20' viewBox='0 0 12 20'%3E%3Cg fill='%23e9c06a'%3E%3Cpath d='M11 19C6 18 3 14 3 3' stroke='%23e9c06a' stroke-width='1.2' fill='none'/%3E%3Cellipse cx='6.5' cy='4.5' rx='3' ry='1.3' transform='rotate(-52 6.5 4.5)'/%3E%3Cellipse cx='4.6' cy='8.5' rx='3' ry='1.3' transform='rotate(-28 4.6 8.5)'/%3E%3Cellipse cx='4.6' cy='12.5' rx='3' ry='1.3' transform='rotate(-6 4.6 12.5)'/%3E%3Cellipse cx='6.6' cy='16' rx='2.5' ry='1.2' transform='rotate(20 6.6 16)'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
.sub-tab.on::before{margin-right:7px}
.sub-tab.on::after{margin-left:7px;transform:scaleX(-1)}
/* grade de categorias (tab Categoria) — cards com banner de fundo animado.
   Flex (não grid) pro ÚLTIMO item esticar e preencher o resto da linha. */
.cat-grid{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.cat-tile{
  flex:0 0 calc((100% - 12px)/2);            /* mobile: 2 por linha */
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:96px;padding:16px;border-radius:16px;
  font-size:14px;font-weight:800;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.1);
  transition:transform .18s var(--ease),box-shadow .18s}
@media(min-width:640px){.cat-tile{flex-basis:calc((100% - 24px)/3)}}   /* tablet: 3 */
@media(min-width:1024px){.cat-tile{flex-basis:calc((100% - 48px)/5)}}  /* PC: 5 */
.cat-tile:last-child{flex-grow:1}            /* último preenche o restante da linha */

/* banner de fundo: gradiente vibrante que se move devagar */
.cat-tile::before{content:"";position:absolute;inset:0;z-index:-2;
  background-size:180% 180%;animation:catShift 9s ease-in-out infinite}
/* brilho diagonal que atravessa no hover */
.cat-tile::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);
  transform:translateX(-130%);transition:transform .6s}
.cat-tile:hover::after{transform:translateX(130%)}
.cat-tile:hover{transform:translateY(-3px);box-shadow:0 14px 32px -12px rgba(0,0,0,.7)}
.cat-tile:active{transform:scale(.98)}
@keyframes catShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@media(prefers-reduced-motion:reduce){.cat-tile::before{animation:none}}
/* paleta — uma cor por categoria (cicla a cada 8) */
.cat-tile:nth-child(8n+1)::before{background-image:linear-gradient(135deg,#ff5f8f,#c9366b)}
.cat-tile:nth-child(8n+2)::before{background-image:linear-gradient(135deg,#7b6cff,#4b32c3)}
.cat-tile:nth-child(8n+3)::before{background-image:linear-gradient(135deg,#ff9a5a,#e5532b)}
.cat-tile:nth-child(8n+4)::before{background-image:linear-gradient(135deg,#39c6b0,#0f8a76)}
.cat-tile:nth-child(8n+5)::before{background-image:linear-gradient(135deg,#5aa9ff,#2b63e5)}
.cat-tile:nth-child(8n+6)::before{background-image:linear-gradient(135deg,#ff6ad5,#a5329b)}
.cat-tile:nth-child(8n+7)::before{background-image:linear-gradient(135deg,#ffc24b,#e59a1f)}
.cat-tile:nth-child(8n+8)::before{background-image:linear-gradient(135deg,#8ed14b,#3f9b2f)}

/* ─────────────── PC / tablet: sai da coluna mobile e usa a largura ───────────────
   No celular o app é tela cheia com a barra inferior (tabbar). Em telas maiores
   ele deixa de ser a coluna estreita de 500px: o conteúdo passa a ocupar a largura
   (contido em --shell pra não espalhar em telas muito largas), o header volta
   completo (idioma + conta), os grids abrem em várias colunas e a barra inferior
   some — no desktop a navegação fica no header. A página do player (is-player)
   é a exceção: vídeo vertical continua numa coluna central (regra própria). */
@media(min-width:768px){
  body.app-shell main{max-width:var(--shell);margin-left:auto;margin-right:auto}
}

/* ─────────────── ranking (aba Trending), estilo iDrama ─────────────── */
.rank-list{display:flex;flex-direction:column;gap:10px}
.rank-item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.05);transition:.15s}
.rank-item:hover{background:rgba(255,255,255,.08)}
.rank-item:active{transform:scale(.99)}
.rank-thumb{position:relative;flex:none;width:51px;height:68px;border-radius:4px;overflow:hidden;background:var(--card)}
.rank-thumb img{width:100%;height:100%;object-fit:cover}
.rank-num{position:absolute;top:0;left:0;min-width:20px;height:20px;padding:0 4px;line-height:1;
  display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff;
  background:rgba(0,0,0,.6);border-radius:4px 0 6px 0}
.rank-num.r1{background:linear-gradient(135deg,#ff5b5b,#e5352b)}
.rank-num.r2{background:linear-gradient(135deg,#ffa63e,#f97316)}
.rank-num.r3{background:linear-gradient(135deg,#ffd166,#f0b429);color:#3a2600}
.rank-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.rank-info b{font-size:14px;font-weight:600;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rank-info em{font-style:normal;font-size:12px;color:var(--muted2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-heat{flex:none;display:inline-flex;align-items:center;gap:3px;font-size:13px;font-weight:700;color:#ff6a3d}
.rank-heat img{width:15px;height:15px;object-fit:contain}

/* ─────────────── arrastar-para-rolar nos sliders (PC) ─────────────── */
@media(hover:hover){
  .carousel,.hero-track,.chips,.ctabs,.seg{cursor:grab}
  .carousel.dragging,.hero-track.dragging,.chips.dragging,.ctabs.dragging,.seg.dragging{cursor:grabbing}
}
.dragging{user-select:none}
/* durante o arrasto, solta o scroll-snap (senão ele "gruda" e trava o deslize) */
.carousel.dragging,.hero-track.dragging,.chips.dragging,.ctabs.dragging,.seg.dragging{scroll-snap-type:none}
/* mata o "arrastar imagem/link" nativo do navegador nos sliders */
.carousel img,.hero-track img,.carousel a,.hero-track a,.chips a,.seg a{-webkit-user-drag:none;user-drag:none}

/* ═══════════════════════════════════════════════════════════════════
   PLAYER estilo iDrama (vídeo vertical em tela cheia + UI sobreposta)
   ═══════════════════════════════════════════════════════════════════ */
body.is-player{padding-bottom:0;background:#000}
body.is-player .nav,body.is-player .footer,body.is-player .tabbar{display:none}
body.is-player main{padding-top:0;max-width:500px;margin:0 auto}
.vplayer{position:relative;height:100dvh;background:#000;overflow:hidden}
.vp-poster,#video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.vp-poster{filter:brightness(.92);z-index:0}
#video{z-index:1}
/* fallback HEVC (h265web.js): o canvas WebGL ocupa o mesmo lugar do <video> */
.vp-gl{position:absolute;inset:0;z-index:1;background:#000}
.vp-gl canvas{width:100%!important;height:100%!important;display:block;object-fit:contain;margin:0 auto}
/* tela cheia: o alvo (quadro no PC, player no mobile) preenche a viewport */
.vp-frame:fullscreen,.vplayer:fullscreen{width:100vw;height:100vh;max-width:none;border-radius:0;aspect-ratio:auto;background:#000}
.vp-frame:-webkit-full-screen,.vplayer:-webkit-full-screen{width:100vw;height:100vh;border-radius:0}
/* quem tem a forma de "aparelho" e o .vp-stage (no PC o cartao 9:16, abaixo de 1024
   os 74svh do palco): em tela cheia ele solta e ocupa tudo. Duas regras, nunca uma
   lista so — navegador que nao conhece :-webkit-full-screen descartaria as duas. */
.vplayer:fullscreen .vp-stage{width:100%;height:100%;max-height:none;aspect-ratio:auto;border-radius:0;box-shadow:none}
.vplayer:-webkit-full-screen .vp-stage{width:100%;height:100%;max-height:none;aspect-ratio:auto;border-radius:0;box-shadow:none}
/* COVER, nao contain: a referencia que o dono apontou (amodramas.app) usa cover e
   e por isso que la nao ha tarja preta. Contain cabia a imagem inteira e sobrava
   barra; cover preenche e corta ~10% da largura, com o assunto no centro. */
#video{object-fit:cover;background:#000;z-index:1}

.vp-top{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;gap:12px;
  padding:14px 14px 30px;color:#fff;background:linear-gradient(to bottom,rgba(0,0,0,.55),transparent);
  /* MEDIDO (320x568): a faixa tem 320x68 e recebia toque, mas so um filho e botao —
     elementFromPoint no meio dela devolvia div.vp-top e o toque MORRIA. Sao 68px de
     altura em toda a largura, 12% da tela, onde play/pause nao respondia.
     `>a,>button` e NAO `>*`: o <span class="vp-ep"> tem flex:1 e mede 222x24 no
     catalogo ES — com `>*` ele voltaria a ser um bloqueador morto no meio da barra.
     Consequencia conhecida e desejada: a faixa passa a valer play/pause (e arraste
     de busca), igual ao resto do video. */
  pointer-events:none}
.vp-top>a,.vp-top>button{pointer-events:auto}
/* [C3] O `auto` do filho vence o `none` que o .vp-idle herda, e `visibility` tem
   transicao de .28s (linha ~576): sobravam ~300ms com o topo INVISIVEL e CLICAVEL.
   MEDIDO a +150ms do vp-idle: o toque cego no canto do voltar SAIA DO EPISODIO
   (/serie/... -> /). Aqui o ocioso volta a mandar; com a parede de pe a saida
   continua viva (a excecao abaixo acompanha a linha ~1862, que ja existe).
   MEDIDO depois: a +150ms elementFromPoint(26,26) devolve BUTTON.vp-tap e fica no
   episodio; com is-walled devolve o proprio A.vp-back. */
.vplayer.vp-idle .vp-top>a,.vplayer.vp-idle .vp-top>button{pointer-events:none}
.vplayer.is-walled.vp-idle .vp-top>a,.vplayer.is-walled.vp-idle .vp-top>button{pointer-events:auto}
/* Alvo de 44x44 SEM mexer no icone: com place-items:center o glifo fica no centro da
   caixa, entao crescer 20px e recuar 10px devolve o centro ao mesmo pixel. MEDIDO:
   caixa 14,14 24x24 -> 4,4 44x44 e o icone continua em 14,14 24x24; .vp-ep continua
   em x=50 e a .vp-top continua com 68px. Depois do patch os 4 cantos devolvem
   A.vp-back em 320, 390 e 1280. E a UNICA saida com a parede de pe. */
.vp-back{color:#fff;display:grid;place-items:center;width:44px;height:44px;margin:-10px}
.vp-ep{font-size:16px;font-weight:700;flex:1}
/* .vp-more: o "…" saiu do movie.php junto com o #sheet-syn. A regra fica como estava,
   sem uso, pra nao mexer em quem eventualmente reviver o botao. */
.vp-more{background:transparent;border:0;color:#fff;font-size:22px;cursor:pointer;line-height:1}

/* auto-ocultar a interface: some 3s depois da última interação, volta ao toque/movimento.
   O grupo CENTRAL (-5s · play/pause · +5s) entrou nesta MESMA lista: um mecanismo
   só pros três. Antes o play central seguia .playing e sumia no instante do play,
   enquanto os skips só sumiam no ocioso — MEDIDO: 1300ms com os dois skips em
   volta de um buraco no meio da tela, e a UI voltando ao toque sem o botão do meio.
   Única exceção, e é a convenção de todo player: PAUSADO o botão central fica fixo
   mesmo com a interface recolhida — é ele que avisa que o vídeo parou. */
.vp-top,.vp-side,.vp-info,.vp-bottom,.vp-progwrap,
.vp-playbtn,.vp-skip{transition:opacity .28s ease,visibility .28s ease}
.vplayer.vp-idle .vp-top,.vplayer.vp-idle .vp-side,.vplayer.vp-idle .vp-info,
.vplayer.vp-idle .vp-bottom,.vplayer.vp-idle .vp-progwrap,
.vplayer.vp-idle .vp-playbtn,.vplayer.vp-idle .vp-skip{opacity:0;visibility:hidden;pointer-events:none}
.vplayer.vp-idle:not(.playing) .vp-playbtn{opacity:1;visibility:visible}

/* pan-y: deslize VERTICAL sobre o video rola a pagina (pedido de 08/08/2026 —
   no celular so dava pra rolar tocando fora do video). O toque continua toque;
   o arraste de busca no video ja tinha sido removido, entao nada usa o gesto
   horizontal aqui. A barra de progresso (.vp-prog) segue touch-action:none,
   que o arraste dela e proposital. */
.vp-tap{position:absolute;inset:0;z-index:5;border:0;background:transparent;cursor:pointer;touch-action:pan-y}
.vp-playbtn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;
  width:72px;height:72px;border-radius:999px;display:grid;place-items:center;color:#fff;
  background:rgba(0,0,0,.34);pointer-events:none}
/* o glifo do meio conta o estado: ▶ parado, ❚❚ tocando. Os dois vêm no HTML,
   empilhados na MESMA célula do grid; o CSS escolhe. O pointer-events:none acima
   continua ali de propósito — quem recebe o toque é o .vp-tap, o play/pause não muda. */
.vp-playbtn .msym{grid-area:1/1}
.vplayer:not(.playing) .vp-playbtn .vp-gl-pause,
.vplayer.playing .vp-playbtn .vp-gl-play{display:none}

.vp-side{position:absolute;right:12px;bottom:118px;z-index:12;display:flex;flex-direction:column;gap:12px;align-items:center;
  /* moldura nao recebe toque, botao recebe. Abaixo de 1024 a coluna vive no PAINEL
     (nao mais sobre o video), mas em TELA CHEIA ela volta a ser sobreposicao — e la
     o vao entre os icones engolia o toque. O <form class="vp-actf"> tambem fica
     none: quem recebe e o .vp-act de dentro. */
  pointer-events:none}
.vp-side .vp-act{pointer-events:auto}
.vp-actf{margin:0}
.vp-act{display:flex;flex-direction:column;align-items:center;gap:3px;border:0;background:transparent;color:#fff;cursor:pointer;padding:0;
  min-width:44px}
/* Padrao medido no player de referencia do proprio dono (amodramas.app): circulo
   translucido de 40px com desfoque, icone de 20px dentro, 12px da borda, sem
   rotulo de texto. O rotulo ja existia como aria-label no markup, entao esconder
   o <span> nao custa acessibilidade. */
.vp-act-ic{position:relative;width:40px;height:40px;display:grid;place-items:center;
  border-radius:999px;background:rgba(8,8,8,.34);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.vp-act-ic img{width:22px;height:22px;object-fit:contain}
.vp-act-ic svg{width:20px;height:20px}
.vp-act-ic svg{filter:drop-shadow(0 1px 3px rgba(0,0,0,.55))}
.vp-speedval{font-size:15px;font-weight:800;color:var(--premium);text-shadow:0 1px 3px rgba(0,0,0,.55)}
.vp-act-n{font-size:11px;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.6)}
/* Sobre o video o rotulo sai: era ele que "poluia" a coluna. Continua no DOM pra
   contagem (salvar/curtir) e volta inteiro no trilho do PC, onde ha espaco. */
@media(max-width:1023px){
  .vp-side .vp-act-n{display:none}
  /* .vp-like entra na lista porque a versao DESLOGADA do coracao e um <a>, sem
     .fav-btn nem [data-fav-btn]: sem isso a visitante era a unica a nao ver a
     contagem, justamente quem a prova social precisa convencer. */
  .vp-side .vp-act[data-fav-btn] .vp-act-n,
  .vp-side .fav-btn .vp-act-n,
  .vp-side .vp-like .vp-act-n{display:block;font-size:10px}
}
/* O .fav-btn.is-fav pinta fundo e borda — desenho do botao-pilula da pagina de
   detalhe. Na coluna do player o fundo e o circulo do .vp-act-ic, entao aquilo
   virava um retangulo rosa fraco atras do icone redondo. */
.vp-side .fav-btn.is-fav{background:transparent;border-color:transparent}
.vp-cast[hidden]{display:none}
.vp-act:active .vp-act-ic{transform:scale(.86)}
.vp-burst{position:absolute;left:50%;top:50%;width:82px;height:82px;transform:translate(-50%,-50%);pointer-events:none;opacity:0}

.vp-info{position:absolute;left:14px;right:76px;bottom:62px;z-index:11;display:flex;flex-direction:column;gap:8px;align-items:flex-start;
  /* MEDIDO: os 4 cantos do .vp-cat (89x28, raio 999px) caiam em div.vp-info — nada
     acontecia. Aqui `>*` e o certo (ao contrario da .vp-top): o filho nao-botao e o
     <p class="vp-syn-full">, que precisa de pointer-events pra rolar/selecionar. */
  pointer-events:none}
.vp-info>*{pointer-events:auto}
.vp-title{background:transparent;border:0;color:#fff;font-size:17px;font-weight:800;text-align:left;
  display:flex;align-items:center;gap:4px;cursor:pointer;text-shadow:0 2px 6px rgba(0,0,0,.7)}
.vp-cat{background:rgba(255,255,255,.16);border:0;color:#fff;font-size:12px;font-weight:600;
  padding:5px 11px;border-radius:999px;display:inline-flex;align-items:center;gap:3px;cursor:pointer;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.vp-syn{background:transparent;border:0;color:rgba(255,255,255,.82);font-size:13px;text-align:left;
  line-height:1.4;cursor:pointer;text-shadow:0 1px 4px rgba(0,0,0,.7)}
.vp-syn b{color:#fff}

.vp-progwrap{position:absolute;left:12px;right:12px;bottom:44px;z-index:13;display:flex;align-items:center;gap:9px}
.vp-time{font-size:11px;font-weight:600;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7);min-width:36px;flex:none;
  font-variant-numeric:tabular-nums}
.vp-dur{text-align:right}
.vp-prog{position:relative;flex:1;height:24px;display:flex;align-items:center;cursor:pointer;touch-action:none}
.vp-prog::before{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  height:6px;border-radius:999px;background:rgba(255,255,255,.25)}
.vp-prog i{position:relative;display:block;height:6px;width:0;border-radius:999px;background:var(--primary);z-index:1}
.vp-prog i::after{content:"";position:absolute;right:0;top:50%;transform:translate(50%,-50%);
  width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 5px rgba(0,0,0,.6);
  opacity:0;transition:opacity .15s}
.vplayer:not(.vp-idle) .vp-prog i::after,.vp-prog:active i::after{opacity:1}
/* dica de tempo enquanto arrasta o dedo no vídeo */
.vp-seekhint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:16;
  background:rgba(0,0,0,.74);color:#fff;font-size:16px;font-weight:700;padding:10px 16px;border-radius:12px;
  font-variant-numeric:tabular-nums;pointer-events:none;white-space:nowrap}
.vp-seekhint[hidden]{display:none}
/* som: o autoplay entrou mudo (iPhone). O botao vira uma CAMADA sobre o video:
   veu escuro suave + circulo central pulsando + legenda. O primeiro toque em
   QUALQUER lugar ja era "ativar som" (app-vplayer.js) — agora o visual diz isso.
   Topo (z 20) e parede (15) continuam acima e clicaveis; os controles laterais
   ficam sob o veu so ate o som ligar, que dura um toque. */
.vp-mute{position:absolute;inset:0;z-index:14;border:0;cursor:pointer;padding:0;margin:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.26) 0%, rgba(0,0,0,.6) 100%);
  color:#fff;-webkit-tap-highlight-color:transparent}
.vp-mute .msym{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(145deg, var(--primary) 0%, #d1417f 100%);
  box-shadow:0 10px 34px -6px rgba(255,79,163,.6), inset 0 1px 0 rgba(255,255,255,.35);
  animation:vp-mute-pulse 1.8s ease-in-out infinite}
.vp-mute span{font-size:13px;font-weight:700;letter-spacing:.2px;padding:7px 15px;border-radius:999px;
  background:rgba(12,12,14,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.vp-mute[hidden]{display:none}
/* PC (>=1024): o .vplayer vira grid com os paineis do lado — inset:0 cobriria os
   comentarios. La o veu sai e fica so o circulo + legenda, centrados como o
   botao antigo ficava. */
@media(min-width:1024px){
  .vp-mute{inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);background:none}}
@keyframes vp-mute-pulse{
  0%,100%{transform:scale(1);   box-shadow:0 10px 34px -6px rgba(255,79,163,.5),  inset 0 1px 0 rgba(255,255,255,.35)}
  50%    {transform:scale(1.06);box-shadow:0 14px 44px -6px rgba(255,79,163,.85), inset 0 1px 0 rgba(255,255,255,.35)}}

/* voltar/avançar 5s — nas laterais do centro. A transição e o sumiço no ocioso
   moravam aqui; foram pra regra do grupo central, que é quem manda nos três
   botões do meio agora. 54x54 medidos em 320, 360, 390 e 414. */
/* [C2] REGRA FUNDIDA: 54->48 (hierarquia do grupo central, FRENTE 1) + z-index 13 e
   ::before (toques mortos, FRENTE 3). As duas frentes reescreviam ESTA regra com
   conteudos incompativeis; qualquer ordem apagava metade em silencio.
   z-index 13: acima do .vp-side (12) e do .vp-info (11), abaixo do .vp-mute (14), da
   parede (15) e do topo (20). MEDIDO a 320: sem ele o canto TR do +5s devolvia o
   <img> do botao SALVAR — errar a mira abria o #login e tirava a pessoa do video.
   48px continua acima dos 44 minimos de toque. */
.vp-skip{position:absolute;top:50%;width:48px;height:48px;border:0;cursor:pointer;border-radius:999px;
  display:grid;place-items:center;line-height:1;color:#fff;
  background:rgba(0,0,0,.34);z-index:13}
/* Os 4 cantos do quadrado caiam fora do raio 999px e devolviam o .vp-tap: errar a
   quina PAUSAVA em vez de pular (625,8px² = 21,5% da caixa). Este retangulo
   transparente ocupa a MESMA caixa que ja existe — nao cresce um pixel e nao come a
   folga pro botao central. MEDIDO depois do patch: os 4 cantos de -5s e +5s devolvem
   BUTTON.vp-skip em 320 e 390. */
.vp-skip::before{content:"";position:absolute;inset:0}
.vp-skip-back{left:calc(50% - 100px);transform:translateY(-50%)}
.vp-skip-fwd{right:calc(50% - 100px);transform:translateY(-50%)}
/* tela pequena: a 320px o circulo central ocupava 22,5% da largura. So ele encolhe —
   o .vp-skip FICA em 48px de proposito: a pilula "Toque para ativar o som" tem
   233x45 no centro exato e com 44px o botao inteiro cairia dentro dela (o skip e
   z13, a pilula z14). O glifo acompanha o circulo — e o `!important` NAO e enfeite: o
   tamanho do glifo vem de `style="font-size:46px"` INLINE (partials/icon.php:65) e
   estilo inline vence qualquer regra sem !important. MEDIDO a 320 com o patch:
   circulo 64 e glifo 40; skip 48 e glifo 22 (razao 1,33x, a mesma de hoje). */
@media(max-width:359px){
  .vp-playbtn{width:64px;height:64px}
  .vp-playbtn .msym{font-size:40px!important}
}

/* barra de controles (TV/velocidade/qualidade): no TOPO, centralizada */
.vp-bottom{position:absolute;left:0;right:0;top:0;z-index:12;display:flex;align-items:center;justify-content:center;gap:24px;
  padding:calc(12px + env(safe-area-inset-top)) 60px 12px;color:rgba(255,255,255,.9);font-size:12.5px;font-weight:600;
  background:linear-gradient(to bottom,rgba(0,0,0,.55),transparent)}
.vp-b-item{display:inline-flex;align-items:center;gap:4px;background:transparent;border:0;color:inherit;cursor:pointer}
.vp-speed{color:var(--premium)}

.vp-locked,.vp-wall{position:absolute;inset:0;z-index:15;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;padding:24px;text-align:center;background:linear-gradient(to top,rgba(0,0,0,.95),rgba(0,0,0,.75))}
.vp-wall[hidden]{display:none}
.vp-locked h3,.vp-wall h3{font-family:'Poppins',sans-serif;font-size:18px}
.vp-locked p,.vp-wall p{font-size:13px;color:var(--muted);max-width:280px}

/* sheet de sinopse/episódios */
.sheet-box.sheet-tall{max-height:88dvh}
.syn-head{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.syn-cover{width:56px;height:75px;border-radius:8px;object-fit:cover;flex:none}
.syn-meta b{display:block;font-size:15px;font-weight:700;line-height:1.2}
.syn-meta span{display:block;font-size:12px;color:var(--muted2);margin-top:4px}
.syn-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.syn-tag{font-size:12px;font-weight:600;color:var(--muted);background:var(--card2);border:1px solid var(--line);padding:5px 11px;border-radius:999px}
.syn-text{font-size:13.5px;color:var(--muted);line-height:1.6}
.syn-more{font-size:15px;font-weight:800;margin:18px 0 12px}
.ep-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.ep-cell{aspect-ratio:1;display:grid;place-items:center;border-radius:8px;background:var(--card2);
  border:1px solid var(--line);font-size:14px;font-weight:700;color:var(--txt)}
.ep-cell.on{background:rgba(255,117,168,.16);border-color:var(--primary);color:var(--primary)}
@media(min-width:640px){.ep-grid{grid-template-columns:repeat(8,1fr)}}

/* ─────────────── botoes ─────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;border-radius:999px;padding:12px 22px;font-size:13.5px;font-weight:700;
  cursor:pointer;transition:.15s;text-align:center;background:var(--surface);color:var(--txt)
}
.btn:hover{background:var(--line2)}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;
  box-shadow:0 6px 20px -8px rgba(255,117,168,.6)}
.btn-primary:hover{filter:brightness(1.06);background:linear-gradient(135deg,var(--primary),var(--primary-2))}
.btn-ghost{background:transparent;border:1px solid var(--line2);color:var(--muted)}
.btn-ghost:hover{background:var(--card);color:var(--txt)}
.btn-green{background:linear-gradient(135deg,#059669,#10b981);color:#fff}
.btn-block{display:flex;width:100%}
.btn-sm{padding:8px 16px;font-size:12px}
.btn-lg{padding:15px 28px;font-size:15px}

/* ─────────────── cartoes e formularios ─────────────── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px}
.card-pad0{padding:0;overflow:hidden}
.panel{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-lg);padding:18px}

.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:12px;font-weight:600;color:var(--muted)}
.field .hint{font-size:11px;color:var(--muted2)}
.input{
  width:100%;background:var(--card2);border:1px solid var(--line);border-radius:var(--radius);
  padding:12px 14px;font-size:14px;color:var(--txt);transition:border-color .15s
}
.input::placeholder{color:var(--muted2)}
.input:focus{outline:none;border-color:rgba(255,117,168,.55)}
.input.err{border-color:rgba(239,68,68,.6)}
textarea.input{min-height:96px;resize:vertical}

.alert{border-radius:var(--radius);padding:12px 14px;font-size:13px;margin-bottom:14px;border:1px solid}
.alert-ok{background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.35);color:#8ef0c4}
.alert-err{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.35);color:#ffb3b3}
.alert-info{background:rgba(255,117,168,.08);border-color:rgba(255,117,168,.3);color:#ffc4da}

.tag{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;
  padding:3px 10px;border-radius:999px;background:var(--surface);color:var(--muted)}
.tag-ok{background:rgba(16,185,129,.14);color:#5fe0ab}
.tag-warn{background:rgba(240,180,41,.14);color:var(--premium)}
.tag-pink{background:rgba(255,117,168,.14);color:var(--primary)}

/* ─────────────── player ─────────────── */
.player-wrap{display:flex;justify-content:center;background:var(--bg)}
.player{
  position:relative;width:100%;max-width:420px;aspect-ratio:9/16;max-height:85vh;
  background:#000;border-radius:var(--radius-xl);overflow:hidden
}
.player video{width:100%;height:100%;object-fit:contain;background:#000}
.player .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.player .veil{position:absolute;inset:0;background:rgba(0,0,0,.42)}
.player .play-cta{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;border:0;background:transparent;cursor:pointer;color:#fff;z-index:3
}
.play-orb{
  width:78px;height:78px;border-radius:999px;display:grid;place-items:center;
  background:rgba(255,117,168,.92);box-shadow:0 12px 40px -10px rgba(255,117,168,.7)
}
.play-orb svg{margin-left:4px}
.play-cta span{font-size:15px;font-weight:700;text-shadow:0 2px 10px rgba(0,0,0,.6)}

.player .locked{
  position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center;
  background:linear-gradient(to top,rgba(0,0,0,.95),rgba(0,0,0,.75))
}
/* [hidden] e regra do navegador e perde pra .locked{display:flex} — sem este
   !important o paywall aparecia em cima do video desde o segundo 0. */
.player .locked[hidden]{display:none!important}
.player .locked h3{font-family:'Poppins',sans-serif;font-size:17px}
.player .locked p{font-size:12.5px;color:var(--muted);max-width:280px}

.player-side{position:absolute;right:10px;bottom:74px;z-index:4;display:flex;flex-direction:column;gap:10px}
.player-side button,.player-side a{
  width:40px;height:40px;border-radius:999px;border:0;cursor:pointer;
  background:rgba(0,0,0,.35);backdrop-filter:blur(6px);color:#fff;display:grid;place-items:center
}
.player-side .on{color:var(--primary)}

/* ─────────────── info do filme ─────────────── */
.movie-info{max-width:420px;margin:0 auto;padding:16px}
.movie-info h1{font-size:17px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.movie-info .syn{font-size:13px;color:var(--muted);line-height:1.65;margin-top:10px}
.movie-info .syn.clamp{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.movie-info details > summary{list-style:none;cursor:pointer;color:var(--primary);font-size:12px;font-weight:600;margin-top:6px}
.movie-info details > summary::-webkit-details-marker{display:none}

/* faixa de indicacao */
.refcard{border-radius:var(--radius-xl);overflow:hidden;background:var(--card);border:1px solid var(--line)}
.refcard .top{background:linear-gradient(135deg,var(--primary),#e0568c);padding:18px;display:flex;gap:12px;align-items:center}
.refcard .top .ico{width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.18);display:grid;place-items:center;flex:none}
.refcard .top h3{font-family:'Poppins',sans-serif;font-size:16.5px;font-weight:800}
.refcard .top p{font-size:11.5px;color:rgba(255,255,255,.85);margin-top:1px}
.refcard .body{padding:18px;display:flex;flex-direction:column;gap:14px}
.refcard .body p{font-size:13px;color:rgba(255,255,255,.8);line-height:1.6}

/* ─────────────── planos ─────────────── */
.plans{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:700px){.plans{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1050px){.plans{grid-template-columns:repeat(4,1fr)}}
.plan{
  position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-xl);padding:22px;display:flex;flex-direction:column;gap:12px
}
.plan.best{border-color:rgba(255,117,168,.55);box-shadow:0 0 0 1px rgba(255,117,168,.18)}
.plan .flag{
  position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  background:var(--primary);color:#fff;font-size:10px;font-weight:800;
  text-transform:uppercase;letter-spacing:.06em;padding:4px 12px;border-radius:999px;white-space:nowrap
}
.plan h3{font-size:15px;color:var(--muted)}
.plan .price{font-family:'Poppins',sans-serif;font-size:34px;font-weight:800;letter-spacing:-.04em;line-height:1}
.plan .price small{font-size:15px;color:var(--muted2);font-weight:600}
.plan .was{font-size:12px;color:var(--muted2);text-decoration:line-through}
.plan .per{font-size:12px;color:var(--muted)}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:7px;font-size:12.5px;color:var(--muted)}
.plan ul li{display:flex;gap:8px;align-items:flex-start}
.plan ul li svg{flex:none;margin-top:2px;color:var(--primary)}

/* ─────────────── checkout ─────────────── */
.checkout{display:grid;gap:18px;grid-template-columns:1fr;align-items:start}
@media(min-width:900px){.checkout{grid-template-columns:1.4fr .9fr}}
.pix-box{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.pix-box img{width:236px;height:236px;border-radius:var(--radius);background:#fff;padding:10px}
.pix-code{
  width:100%;background:var(--card2);border:1px solid var(--line);border-radius:var(--radius);
  padding:12px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;
  color:var(--muted);word-break:break-all;max-height:96px;overflow:auto
}
.summary-row{display:flex;justify-content:space-between;font-size:13px;padding:7px 0}
.summary-row.total{border-top:1px solid var(--line);margin-top:6px;padding-top:12px;font-size:16px;font-weight:800}

/* ── checkout: forma de pagamento (PIX / cartão) ── */
.pay-methods{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.pay-opt{position:relative;display:flex;align-items:center;gap:10px;padding:12px;cursor:pointer;
  border:1.5px solid var(--line2);border-radius:14px;background:var(--card2);
  transition:border-color .18s,background .18s}
.pay-opt input{position:absolute;opacity:0;pointer-events:none}
.pay-opt .pay-ic{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:rgba(255,255,255,.06);color:var(--txt)}
.pay-opt-txt{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.pay-opt-txt b{font-size:14px}
.pay-opt-txt small{font-size:11px;color:var(--muted2);margin-top:2px}
.pay-check{margin-left:auto;flex:none;width:20px;height:20px;border-radius:999px;display:grid;place-items:center;
  border:1.5px solid var(--line2);color:#fff;opacity:0;transform:scale(.7);transition:.18s}
.pay-opt.on{border-color:var(--primary);background:rgba(255,117,168,.08)}
.pay-opt.on .pay-check{opacity:1;transform:scale(1);background:var(--primary);border-color:var(--primary)}
.pay-opt.on .pay-ic{background:rgba(255,117,168,.16)}
@media(max-width:380px){.pay-methods{grid-template-columns:1fr}}

.pay-panel{margin-bottom:4px}
.pix-note{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:12px;
  background:rgba(50,188,173,.1);border:1px solid rgba(50,188,173,.28)}
.pix-note-ic{flex:none;width:22px;height:22px;border-radius:999px;display:grid;place-items:center;background:#32BCAD;color:#fff}
.pix-note b{font-size:13px;display:block}
.pix-note p{font-size:12px;color:var(--muted);margin-top:2px}

.pay-brands{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.pay-brands-lbl{font-size:11px;color:var(--muted2);width:100%;margin-bottom:1px}
.pay-brand{display:inline-flex;border-radius:5px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.pay-brand svg{display:block}

/* ─────────────── paginacao ─────────────── */
.pager{display:flex;align-items:center;justify-content:center;gap:6px;margin:28px 0;flex-wrap:wrap}
.pager a,.pager span{
  min-width:38px;height:38px;padding:0 12px;border-radius:10px;display:grid;place-items:center;
  background:var(--card);border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--muted)
}
.pager a:hover{color:var(--txt);border-color:var(--line2)}
.pager .on{background:var(--primary);border-color:var(--primary);color:#fff}
.pager .gap{background:transparent;border:0}

/* ─────────────── estados vazios ─────────────── */
.empty{text-align:center;padding:56px 20px;max-width:380px;margin:0 auto}
.empty h3{font-family:'Poppins',sans-serif;font-size:17px;font-weight:800}
.empty p{font-size:13px;color:var(--muted);margin-top:6px}
.empty .btn{margin-top:16px}

/* ─────────────── rodape ─────────────── */
.footer{border-top:1px solid var(--line);margin-top:40px;padding:32px 0 40px;background:#0b0b0b}
.footer-grid{display:grid;gap:26px;grid-template-columns:1fr}
@media(min-width:768px){.footer-grid{grid-template-columns:2fr 1fr 1fr}}
.footer h4{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted2);margin-bottom:10px}
.footer a{display:block;font-size:13px;color:var(--muted);padding:4px 0;transition:color .15s}
.footer a:hover{color:var(--txt)}
.footer .copy{border-top:1px solid var(--line);margin-top:26px;padding-top:18px;font-size:11.5px;color:var(--muted2)}
.socials{display:flex;gap:8px;flex-wrap:wrap}
.socials a{
  width:38px;height:38px;border-radius:999px;background:var(--card);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--muted);padding:0
}
.socials a:hover{color:var(--primary);border-color:rgba(255,117,168,.4)}

/* ─────────────── barra inferior (mobile) ─────────────── */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:#0e0e0e;border-top:1px solid rgba(255,255,255,.07);
  padding-bottom:env(safe-area-inset-bottom)
}
@media(min-width:768px){.tabbar{display:none}}
.tabbar-in{display:flex;align-items:center;justify-content:space-around;height:var(--tab-h)}
.tabbar a{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  font-size:10px;font-weight:600;color:var(--muted);padding:6px 0
}
.tabbar a.on{color:var(--primary)}
.tabbar a.hi .orb{
  width:40px;height:40px;margin-top:-22px;border-radius:999px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;
  box-shadow:0 8px 22px -8px rgba(255,117,168,.75)
}
.tabbar a.hi{color:var(--primary)}

/* ─────────────── faixa VIP ─────────────── */
/* Rosa solida com coroa, texto e botao translucido — igual ao VipBanner. */
.vip{
  /* z-index:1 tira a faixa de baixo do .hero-bg (position:absolute;z-index:0), que
     sobe com top negativo e lavava o rosa no painel Popular. Fica na regra base
     porque no desktop a .vip tambem e static e sofria o mesmo. */
  position:relative;z-index:1;
  display:flex;align-items:center;gap:12px;border-radius:var(--radius);padding:12px 16px;
  background:linear-gradient(135deg,#FF4D94,#FF75A8 42%,#E0568C);
  box-shadow:0 6px 22px -10px rgba(255,77,168,.6)
}
.vip .ico{color:#fff;flex:none;display:grid}
.vip .ico img{width:28px;height:28px;object-fit:contain;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.4))}
.vip .txt{flex:1;min-width:0}
.vip .txt b{display:block;color:#fff;font-size:12px;font-weight:600;line-height:1.35}
.vip .txt span{display:block;color:rgba(255,255,255,.8);font-size:11px;font-weight:500;margin-top:2px}
.vip a{
  /* sem backdrop-filter: o botao fica sobre um gradiente OPACO, nao ha nada atras
     pra desfocar (zero pixel muda) e ele forcava uma camada + blur por frame */
  flex:none;padding:6px 12px;border-radius:8px;background:rgba(255,255,255,.2);
  color:#fff;font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;transition:.2s;white-space:nowrap
}
.vip a:hover{background:rgba(255,255,255,.3)}

/* Slot da faixa VIP: existe um por painel de aba. No Popular ela entra logo abaixo
   do carrossel de destaques; nas outras abas, no topo do painel (mesma altura de
   sempre). Atencao: nas abas sem hero o margin-top ESCAPA do .tab-panel por colapso
   de margem — e por isso que a posicao bate com a de antes. Se um dia o .tab-panel
   ganhar padding-top ou overflow, aparece um degrau de 16px aqui. */
.vip-slot{position:relative;z-index:1;margin:16px 0}
.hero-wrap + .vip-slot{margin-top:14px}   /* colado nas bolinhas do hero, sem buraco */

/* ─────────────── faixas promocionais ─────────────── */
.promo{
  display:flex;align-items:center;gap:12px;border-radius:var(--radius-lg);padding:14px 16px;
  background:linear-gradient(135deg,rgba(255,117,168,.16),rgba(255,117,168,.05));
  border:1px solid rgba(255,117,168,.28);margin:18px 0
}
.promo .ico{width:40px;height:40px;border-radius:12px;background:rgba(255,117,168,.2);
  display:grid;place-items:center;color:var(--primary);flex:none}
.promo h3{font-size:14px}
.promo p{font-size:12px;color:var(--muted);margin-top:1px}
.promo .btn{margin-left:auto;flex:none}
@media(max-width:560px){.promo{flex-wrap:wrap}.promo .btn{margin-left:0;width:100%}}

.banner-img{display:block;border-radius:var(--radius-lg);overflow:hidden;margin:18px 0}
.banner-img img{width:100%;height:auto}

/* ─────────────── abas ─────────────── */
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{
  padding:11px 15px;font-size:13px;font-weight:600;color:var(--muted);
  border-bottom:2px solid transparent;white-space:nowrap
}
.tabs a.on{color:var(--txt);border-bottom-color:var(--primary)}

/* ─────────────── utilidades ─────────────── */
.page-head{padding:22px 0 14px}
.page-head h1{font-family:'Poppins',sans-serif;font-size:24px;font-weight:800;letter-spacing:-.03em}
.page-head p{font-size:13px;color:var(--muted);margin-top:4px}
.divider{height:1px;background:var(--line);margin:20px 0}
/* troca de indicacoes por acesso (Indique & Ganhe) — padrao rosa da casa */
.ref-troca{margin-top:16px;padding:15px 16px;border-radius:16px;
  background:rgba(255,117,168,.07);border:1px solid rgba(255,117,168,.28)}
.ref-troca-hd{display:flex;align-items:center;gap:8px}
.ref-troca-hd .msym{color:var(--primary)}
.ref-troca-hd b{font-size:15px;letter-spacing:-.01em}
.ref-troca-tx{font-size:13px;line-height:1.5;color:#c9c9d1;margin:7px 0 0}
.ref-troca-tx b{color:#fff;font-weight:600}
.ref-troca-hi{color:var(--primary)!important;font-weight:700!important}
.ref-escada{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:13px 0 12px}
.ref-nivel{text-align:center;padding:8px 4px;border-radius:10px;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);opacity:.45;transition:.15s}
.ref-nivel.on{opacity:1;background:rgba(255,117,168,.16);border-color:rgba(255,117,168,.5)}
.ref-nivel-n{display:block;font-weight:800;font-size:15px;color:var(--primary);line-height:1.1}
.ref-nivel-l{display:block;font-size:10px;color:var(--muted2);margin-top:1px}
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}
.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ─────────────── escolha de gostos ─────────────── */
.tastegrid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(158px,1fr))}
.tastechip{position:relative;display:block;cursor:pointer}
.tastechip input{position:absolute;opacity:0;width:0;height:0}
.tastechip .body{
  display:flex;flex-direction:column;gap:3px;padding:16px 15px;border-radius:var(--radius-lg);
  background:var(--card);border:1px solid var(--line);transition:.15s;min-height:82px;justify-content:center
}
.tastechip .body b{font-size:14px}
.tastechip .body em{font-style:normal;font-size:11.5px;color:var(--muted2)}
.tastechip:hover .body{border-color:var(--line2)}
.tastechip .tick{
  position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:999px;
  display:grid;place-items:center;background:var(--primary);color:#fff;
  opacity:0;transform:scale(.6);transition:.15s
}
.tastechip input:checked ~ .body{
  border-color:var(--primary);background:rgba(255,117,168,.09)
}
.tastechip input:checked ~ .tick{opacity:1;transform:scale(1)}
.tastechip input:focus-visible ~ .body{outline:2px solid var(--primary);outline-offset:2px}

/* ═══════════════════ paywall de tela cheia (/assinar) ═══════════════════
   Layout do mockup, cores da marca: onde ele usava lime, aqui entra o rosa
   do tema — lime e a identidade do outro app, nao a nossa. */

body.bare{padding-bottom:0}
body.bare #conteudo{min-height:100vh;display:flex;align-items:center;justify-content:center}
@media(min-width:600px){body.bare #conteudo{padding:24px}}

.pw{
  position:relative;width:100%;max-width:460px;
  min-height:100vh;background:#000;overflow:hidden;
  display:flex;flex-direction:column
}
@media(min-width:600px){
  .pw{
    min-height:min(940px,calc(100vh - 48px));
    border-radius:34px;box-shadow:0 30px 90px -20px rgba(0,0,0,.75)
  }
}

/* fundo: a propria capa central desfocada, pra pagina nao ficar caixa preta no desktop */
.pw-bg{
  position:fixed;inset:0;z-index:-1;
  background-position:center;background-size:cover;background-repeat:no-repeat;
  filter:blur(70px) brightness(.3) saturate(1.15);transform:scale(1.25)
}

/* ── topo ── */
.pw-top{
  position:absolute;top:20px;left:0;right:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;padding:0 20px
}
.pw-x{
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:rgba(0,0,0,.32);color:#fff;backdrop-filter:blur(4px);flex:none
}
.pw-restore{
  color:#fff;font-size:14px;font-weight:500;text-shadow:0 1px 6px rgba(0,0,0,.7)
}

/* ── mosaico de capas ── */
.pw-hero{position:absolute;top:0;left:0;right:0;height:53%;z-index:1}
.pw-grid{display:grid;grid-template-columns:1fr 1.28fr 1fr;gap:6px;height:100%;padding:6px}
.pw-col{display:flex;flex-direction:column;gap:6px;min-height:0}
.pw-col.pw-mid{margin-top:-16px}
.pw-grid img{
  width:100%;height:100%;object-fit:cover;border-radius:11px;
  flex:1;min-height:0;background:var(--card)
}
.pw-grid .pw-big{flex:1.7}
.pw-grid .pw-small{flex:.55}
/* degrade que apaga as capas pro preto, senao o titulo nao le */
.pw-fade{
  position:absolute;left:0;right:0;top:24%;height:34%;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent 0,rgba(0,0,0,.6) 55%,#000 100%)
}

/* ── conteudo ── */
.pw-content{
  position:relative;z-index:10;margin-top:auto;
  display:flex;flex-direction:column;padding:0 22px 24px
}
.pw-title{
  font-family:'Poppins',Montserrat,sans-serif;
  font-size:clamp(27px,8vw,33px);line-height:1.05;font-weight:800;letter-spacing:-.7px
}
.pw-title .hl{color:var(--primary)}
.pw-sub{
  color:var(--muted);font-size:13.5px;line-height:1.5;margin:12px 0 18px;max-width:310px
}

/* ── planos: radio escondido + label, selecao 100% em CSS ── */
.pw-plans{
  display:flex;gap:8px;align-items:stretch;
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding-top:9px
}
.pw-plans::-webkit-scrollbar{display:none}
.pw-radio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.pw-plan{
  position:relative;flex:1 0 auto;min-width:94px;scroll-snap-align:center;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);
  border-radius:18px;padding:30px 7px 14px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  transition:border-color .15s,background .15s
}
.pw-tag{
  position:absolute;top:0;left:50%;transform:translate(-50%,-50%);
  font-size:9.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  padding:5px 9px;border-radius:11px;white-space:nowrap;
  background:#242427;color:#c7c7cc
}
.pw-name{font-size:14.5px;font-weight:700}
.pw-price{font-size:15px;font-weight:800}
.pw-per{
  color:var(--muted);font-size:11.5px;margin-top:7px;width:100%;text-align:center;
  background:rgba(0,0,0,.35);border-radius:9px;padding:6px 2px
}
.pw-off{
  position:absolute;top:-11px;right:-7px;z-index:3;
  background:linear-gradient(135deg,#ff8a1e,#ff4d1c);color:#fff;
  font-size:9.5px;font-weight:800;padding:5px 8px;border-radius:11px;
  transform:rotate(6deg);box-shadow:0 4px 10px rgba(255,80,20,.4)
}
/* estado escolhido */
.pw-radio:checked + .pw-plan{
  border-color:var(--primary);background:rgba(255,117,168,.11)
}
.pw-radio:checked + .pw-plan .pw-tag{background:var(--primary);color:#fff}
.pw-radio:checked + .pw-plan .pw-per{color:#ffd4e4}
.pw-radio:focus-visible + .pw-plan{outline:2px solid var(--primary);outline-offset:2px}

/* ── relogio da promocao ── */
.pw-timerwrap{margin:18px 0 14px;text-align:center}
.pw-timerlab{
  display:block;color:var(--muted2);font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.6px;margin-bottom:8px
}
.pw-timer{display:flex;align-items:center;justify-content:center;gap:7px}
.pw-tbox{
  background:rgba(255,255,255,.08);border-radius:12px;min-width:46px;padding:11px 0;
  text-align:center;font-size:19px;font-weight:700;font-variant-numeric:tabular-nums
}
.pw-colon{font-size:17px;font-weight:700;opacity:.45}

/* ── botao e rodape ── */
.pw-cta{
  width:100%;border:0;cursor:pointer;background:#fff;color:#0a0a0a;
  font-size:15px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;
  padding:18px;border-radius:17px;margin-top:4px;
  box-shadow:0 8px 24px -6px rgba(255,255,255,.22);transition:transform .1s
}
.pw-cta:active{transform:scale(.985)}
.pw-legal{text-align:center;color:var(--muted2);font-size:11.5px;margin-top:13px}
.pw-legal a{color:var(--muted);text-decoration:underline}
.pw-skip{
  display:block;text-align:center;color:var(--muted2);font-size:12.5px;
  margin-top:14px;padding:6px
}
.pw-skip:hover{color:var(--muted)}

/* telas baixas: o mosaico encolhe pro preco nao sair da area visivel */
@media(max-height:680px){
  .pw-hero{height:42%}
  .pw-fade{top:16%}
  .pw-title{font-size:25px}
  .pw-sub{margin:9px 0 14px}
}

/* ═══════════════════════════════════════════════════════════════════
   CARA DE APP (mobile)
   Camada de polish + micro-interacoes pra o tema parecer app nativo:
   ripple no toque, reveal ao rolar, tabbar Material 3, cards com
   profundidade, transicao de pagina. Tudo enhancement — a classe .js
   (marcada no <head>) liga os estados iniciais; sem JS nada some.
   ═══════════════════════════════════════════════════════════════════ */
:root{--ease:cubic-bezier(.2,.7,.2,1)}

/* ---------- icones Material Symbols (mesmo conjunto do site oficial) ---------- */
.msym{
  font-family:'Material Symbols Outlined';font-weight:400;font-style:normal;line-height:1;
  letter-spacing:normal;text-transform:none;display:inline-grid;place-items:center;
  white-space:nowrap;direction:ltr;vertical-align:middle;user-select:none;flex:none;overflow:hidden;
  -webkit-font-smoothing:antialiased;font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24
}
.msym.fill{font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24}

/* ---------- ripple Material ---------- */
.ripple-host{position:relative;overflow:hidden}
.ripple-ink{
  position:absolute;border-radius:50%;pointer-events:none;z-index:5;
  background:radial-gradient(circle,rgba(255,255,255,.5),rgba(255,255,255,0) 68%);
  transform:scale(0);opacity:.55;animation:rippleGo .58s ease-out forwards;
  mix-blend-mode:overlay
}
@keyframes rippleGo{to{transform:scale(2.4);opacity:0}}
/* alvos ganham recorte + relevo pro toque */
.btn,.chip,.seg a,.crownbtn,.iconbtn,.hero-play,.vip a,.tabbar a{position:relative;overflow:hidden}

/* ---------- entrada de pagina + secoes (CSS puro; nao depende de JS/CSP) ---------- */
@media(max-width:900px){
  #conteudo{animation:pageIn .45s ease-out both}
  .anim-reveal{animation:secIn .6s var(--ease) both}
  .anim-reveal .mcard{animation:cardIn .5s var(--ease) both}
  .anim-reveal .mcard:nth-child(2){animation-delay:.05s}
  .anim-reveal .mcard:nth-child(3){animation-delay:.1s}
  .anim-reveal .mcard:nth-child(4){animation-delay:.15s}
  .anim-reveal .mcard:nth-child(n+5){animation-delay:.2s}
}
@keyframes pageIn{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:scale(1)}}
@keyframes secIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes cardIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  #conteudo,.anim-reveal,.anim-reveal .mcard{animation:none!important}
}

/* ---------- feedback tatil universal ---------- */
@media(hover:none){
  .btn:active,.chip:active,.seg a:active,.hero-play:active,.vip a:active,
  .crownbtn:active,.iconbtn:active,.planrow:active{transform:scale(.95)}
  .mcard:active .thumb{transform:scale(.95)}
}

/* ═══════════ bottom nav estilo app (Material 3 + FAB central) ═══════════ */
@media(max-width:767px){
  .tabbar{
    background:rgba(10,10,12,.94);
    -webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4);
    border-top:1px solid rgba(255,255,255,.06);
    box-shadow:0 -12px 36px -16px rgba(0,0,0,.85)
  }
  .tabbar-in{height:64px;padding:7px 2px 5px;align-items:flex-start}
  .tabbar a{gap:2px;padding:0;color:var(--muted2);transition:color .25s var(--ease)}
  .tabbar a .ico-wrap{
    display:grid;place-items:center;width:58px;height:30px;border-radius:999px;
    position:relative;z-index:1;transition:transform .3s var(--ease);color:inherit
  }
  /* pilula rosa que cresce atras do icone ativo */
  .tabbar a .ico-wrap::before{
    content:"";position:absolute;inset:0;border-radius:999px;z-index:-1;
    background:rgba(255,117,168,.18);transform:scale(.4);opacity:0;
    transition:transform .32s var(--ease),opacity .28s var(--ease)
  }
  .tabbar a span{font-size:10px;font-weight:600;letter-spacing:.01em;transition:color .25s;
    white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .tabbar a.on{color:var(--primary)}
  .tabbar a.on .ico-wrap::before{transform:scale(1);opacity:1}
  .tabbar a.on span{font-weight:700}
  .tabbar a:active .ico-wrap{transform:scale(.84)}
}

/* ═══════════ cards com profundidade ═══════════ */
.mcard .thumb{
  border-radius:14px;
  box-shadow:0 6px 18px -10px rgba(0,0,0,.7);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease)
}
@media(hover:hover){
  .mcard:hover .thumb{box-shadow:0 14px 30px -12px rgba(0,0,0,.85)}
}
/* selo de audio: pilula com vidro em vez de retangulo */
.mcard .badge{
  top:8px;right:8px;border-radius:999px;padding:3px 8px;font-size:8.5px;
  background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.14);color:#fff
}
/* rank do Top 10: gradiente da marca */
.mcard .rank{
  border-radius:8px;background:linear-gradient(135deg,var(--primary),var(--primary-2));
  box-shadow:0 3px 10px -3px rgba(255,117,168,.6)
}
/* barra de progresso mais viva */
.mcard .prog{height:4px;background:rgba(255,255,255,.22)}
.mcard .prog i{background:linear-gradient(90deg,var(--primary),var(--primary-2));
  box-shadow:0 0 8px rgba(255,117,168,.7)}

/* ═══════════ header, chips e hero — mais app ═══════════ */
@media(max-width:767px){
  /* header estilo app: logo + busca-lupa que expande + idioma (o presente foi pro tabbar) */
  .nav-actions{gap:6px}
  .nav-search input{padding-top:11px;padding-bottom:11px;font-size:14px}

  /* busca colapsada: SÓ a lupa, sem "box". Ao tocar (.nav.searching) expande e
     ocupa o header ao lado da logo, escondendo os outros ícones (ver app-fx.js). */
  /* colapsada: encostada nos outros ícones à direita (sem vão), lupa como 1º do grupo */
  .nav-search{flex:none;width:44px;max-width:44px;margin-left:auto;
    transition:max-width .34s var(--ease),width .34s var(--ease)}
  .nav-search .ico{display:none}
  .nav-search input{flex:1;min-width:0;opacity:0;transition:opacity .2s ease}
  .nav-search-toggle{display:flex;align-items:center;justify-content:center;width:44px;height:40px;flex:none;color:var(--txt)}
  /* expandida: ocupa do lado da logo até o fim */
  .nav.searching .nav-search{flex:1;width:auto;max-width:100%;margin-left:10px}
  .nav.searching .nav-search-toggle{display:none}
  .nav.searching .nav-search .ico{display:grid}
  .nav.searching .nav-search input{opacity:1}
  .nav.searching .nav-search-close{display:flex;align-items:center;justify-content:center;width:36px;height:40px;font-size:28px;line-height:1;color:var(--muted);flex:none}
  .nav.searching .nav-actions{display:none}
  /* chip ativo com preenchimento da marca */
  .chip.on,.chip:has(input:checked){background:rgba(255,117,168,.16);border-color:rgba(255,117,168,.4);color:var(--txt)}
  /* segmento ativo com brilho */
  .seg a.on{box-shadow:0 3px 14px -2px rgba(255,117,168,.5)}
  /* hero: botao pulsa de leve chamando o toque */
  .hero-play{box-shadow:0 8px 24px -8px rgba(255,117,168,.65);animation:heroPulse 2.6s ease-in-out infinite}
  /* titulo de secao com barrinha rosa a esquerda, cara de app */
  .section-head h2{position:relative;padding-left:12px}
  .section-head h2::before{
    content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
    width:4px;height:16px;border-radius:999px;
    background:linear-gradient(180deg,var(--primary),var(--primary-2))
  }
  .section-head h2 .mark ~ *{padding-left:0}
}
@keyframes heroPulse{0%,100%{box-shadow:0 8px 24px -8px rgba(255,117,168,.55)}
  50%{box-shadow:0 8px 30px -6px rgba(255,117,168,.85)}}
@media(prefers-reduced-motion:reduce){.hero-play{animation:none}}

/* ═══════════ skeleton shimmer (pronto pra uso) ═══════════ */
.skel{position:relative;overflow:hidden;background:var(--card2);border-radius:var(--radius)}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);
  animation:shimmer 1.3s infinite}
@keyframes shimmer{to{transform:translateX(100%)}}

/* faixa VIP: leve brilho deslizante pra chamar atencao (mobile) */
@media(max-width:767px){
  .vip{overflow:hidden;padding:10px 12px;gap:10px}
  /* O titulo NUNCA vira "...": quebra em quantas linhas precisar. Em uma linha ele
     pede 276px (pt) / 310px (es) e a coluna de texto tem 128-222px num telefone —
     nao cabe em largura nenhuma, entao reticencia aqui era corte garantido. */
  .vip .txt b{white-space:normal;overflow:visible;text-overflow:clip;
    overflow-wrap:anywhere;font-size:11.5px;line-height:1.3}
  .vip .txt span{white-space:normal;overflow:visible;text-overflow:clip;
    overflow-wrap:anywhere}
  .vip a{padding:7px 10px;font-size:9.5px}
  /* pointer-events:none: sem isso o brilho passa NA FRENTE do CTA enquanto varre a
     barra, e o toque em "Ver planos" cai na .vip em vez de no link. */
  .vip::after{content:"";position:absolute;top:0;bottom:0;width:40%;pointer-events:none;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.18),transparent);
    transform:translateX(-160%);animation:vipShine 4.5s ease-in-out infinite}
}
/* Telas bem estreitas: o CTA ocupa a linha inteira e devolve ~98px de largura pro
   texto, assim o titulo cabe em 2 linhas e o preco nao quebra. */
@media(max-width:359px){
  .vip{flex-wrap:wrap;row-gap:9px}
  .vip a{flex:1 0 100%;text-align:center;padding:9px 12px}
}
@keyframes vipShine{0%,60%{transform:translateX(-160%)}85%,100%{transform:translateX(320%)}}
@media(prefers-reduced-motion:reduce){.vip::after{display:none}}

/* ═══════════════════════════════════════════════════════════════════
   FASE 1 — MOTION (transicoes portadas do iDrama, cores nossas)
   enter_ios_anim (scale+fade), slide_in_bottom (sheet), push (horizontal).
   ═══════════════════════════════════════════════════════════════════ */
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes veilIn{from{opacity:0}to{opacity:1}}
@keyframes iosPop{from{opacity:0;transform:scale(1.08)}to{opacity:1;transform:scale(1)}}

/* login SEMPRE centralizado no meio da tela (zoom), nunca sobe de baixo */
@media(max-width:640px){
  .modal-box{max-width:400px;width:100%;max-height:90dvh}
  .modal:target .modal-veil,.modal.is-open .modal-veil{animation:veilIn .25s ease both}
  .modal:target .modal-box,.modal.is-open .modal-box{animation:iosPop .28s var(--ease) both}
}
@media(min-width:641px){
  .modal:target .modal-box,.modal.is-open .modal-box{animation:iosPop .28s var(--ease) both}
}
@media(prefers-reduced-motion:reduce){
  .modal-box,.modal-veil{animation:none!important}
}

/* ═══════════ FASE 2 — curtir animado (Lottie) ═══════════ */
.lot{line-height:0}
.fav-btn .fav-heart{position:relative;display:inline-grid;place-items:center;width:18px;height:18px}
.fav-btn .msym{transition:color .2s,transform .2s var(--ease)}
.fav-btn.is-fav{border-color:rgba(255,117,168,.42);background:rgba(255,117,168,.09)}
.fav-btn.is-fav .msym{color:var(--primary)}
.fav-btn:active .fav-heart{transform:scale(.85)}
/* o coração que explode fica maior que o botão e centralizado nele */
.fav-burst{
  position:absolute;left:50%;top:50%;width:78px;height:78px;
  transform:translate(-50%,-50%);pointer-events:none;opacity:0;z-index:5
}
/* mãozinha "assine" no botão do paywall */
.pw-cta{position:relative}
.pw-cta-hand{position:absolute;right:8px;bottom:0;pointer-events:none;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.35))}

/* ═══════════════════════════════════════════════════════════════════
   FASE 3 — feed vertical (curtas): 1 filme por tela, snap, autoplay
   ═══════════════════════════════════════════════════════════════════ */
body.is-feed{padding-bottom:0;background:#000}
body.is-feed .nav,body.is-feed .footer{display:none}
body.is-feed main{padding-top:0}
body.is-feed .tabbar{background:rgba(0,0,0,.5);border-top-color:rgba(255,255,255,.08)}

.feed{height:100dvh;overflow-y:scroll;scroll-snap-type:y mandatory;
  scrollbar-width:none;background:#000;overscroll-behavior-y:contain}
.feed::-webkit-scrollbar{display:none}
.feed-slide{position:relative;height:100dvh;scroll-snap-align:start;scroll-snap-stop:always;
  overflow:hidden;background:#000}
.feed-poster,.feed-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feed-poster{z-index:1}
.feed-vid{z-index:2;opacity:0;transition:opacity .35s}
.feed-slide.is-active .feed-vid{opacity:1}
.feed-shade{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.82),transparent 26%,transparent 60%,rgba(0,0,0,.5))}

.feed-tap{position:absolute;inset:0;z-index:4;border:0;background:transparent;cursor:pointer}

.feed-muted{position:absolute;top:16px;left:50%;transform:translateX(-50%);z-index:6;
  display:inline-flex;align-items:center;gap:6px;color:#fff;font-size:12px;font-weight:600;
  background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  padding:7px 13px;border-radius:999px;transition:opacity .3s}
.feed[data-sound="on"] .feed-muted{opacity:0;pointer-events:none}

.feed-slide.is-paused::after{content:"";position:absolute;left:50%;top:50%;z-index:5;
  width:74px;height:74px;transform:translate(-50%,-50%);pointer-events:none;border-radius:999px;
  background:rgba(0,0,0,.4) center/34px no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5.5v13l11-6.5Z'/%3E%3C/svg%3E")}

.feed-back{position:fixed;top:14px;left:12px;z-index:20;width:40px;height:40px;border-radius:999px;
  display:grid;place-items:center;color:#fff;
  background:rgba(0,0,0,.4);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

.feed-side{position:absolute;right:10px;bottom:calc(var(--tab-h) + 34px);z-index:10;
  display:flex;flex-direction:column;gap:19px;align-items:center}
.feed-act{display:flex;flex-direction:column;align-items:center;gap:5px;border:0;background:transparent;
  color:#fff;cursor:pointer;padding:0}
.feed-act-ic{width:50px;height:50px;border-radius:999px;display:grid;place-items:center;position:relative;
  background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:transform .18s var(--ease),background .2s}
.feed-act:active .feed-act-ic{transform:scale(.86)}
.feed-act-n{font-size:11px;font-weight:600;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.feed-act.is-fav .feed-act-ic{background:rgba(255,117,168,.22)}
.feed-act.is-fav .msym{color:var(--primary)}
.feed-fav{margin:0}
.feed-fav .fav-burst{width:98px;height:98px}

.feed-info{position:absolute;left:16px;right:80px;bottom:calc(var(--tab-h) + 26px);z-index:9;color:#fff}
.feed-info h2{font-size:19px;font-weight:800;letter-spacing:-.02em;display:flex;align-items:center;
  gap:8px;flex-wrap:wrap;text-shadow:0 2px 8px rgba(0,0,0,.65)}
.feed-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  background:rgba(255,117,168,.92);padding:3px 8px;border-radius:999px}
.feed-info p{font-size:13px;color:rgba(255,255,255,.86);margin:8px 0 12px;line-height:1.42;
  text-shadow:0 1px 6px rgba(0,0,0,.7)}
.feed-cta{display:inline-flex;align-items:center;gap:7px;color:#fff;font-size:13.5px;font-weight:700;
  padding:10px 20px;border-radius:999px;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  box-shadow:0 8px 22px -8px rgba(255,117,168,.7)}

.feed-prog{position:absolute;left:0;right:0;bottom:var(--tab-h);height:3px;z-index:11;background:rgba(255,255,255,.16)}
.feed-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--primary),var(--primary-2))}

.feed-wall{position:absolute;inset:0;z-index:15;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center;
  background:linear-gradient(to top,rgba(0,0,0,.96),rgba(0,0,0,.78))}
.feed-wall[hidden]{display:none}
.feed-wall h3{font-family:'Poppins',sans-serif;font-size:18px}

.feed-guide{position:fixed;left:0;right:0;bottom:calc(var(--tab-h) + 70px);z-index:25;
  display:flex;flex-direction:column;align-items:center;gap:2px;pointer-events:none;color:#fff}
.feed-guide[hidden]{display:none}
.feed-guide span{font-size:13px;font-weight:600;text-shadow:0 1px 6px rgba(0,0,0,.85)}

/* ═══════════════════════════════════════════════════════════════════
   FASE 4 — mini-player "continuar", badges de status, bottom-sheet
   ═══════════════════════════════════════════════════════════════════ */

/* mini-player flutuante (só mobile) */
.miniplayer{position:fixed;left:8px;right:8px;bottom:calc(var(--tab-h) + 8px);z-index:55;
  display:flex;align-items:center;overflow:hidden;border-radius:14px;
  background:rgba(20,20,22,.94);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.08);box-shadow:0 14px 34px -14px rgba(0,0,0,.75);
  animation:sheetUp .42s var(--ease) both}
@media(min-width:768px){.miniplayer{display:none}}
.mini-main{display:flex;align-items:center;gap:11px;flex:1;min-width:0;padding:8px 6px 8px 8px}
.mini-cover{width:40px;height:52px;border-radius:8px;object-fit:cover;flex:none}
.mini-txt{flex:1;min-width:0}
.mini-txt b{display:block;font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-txt span{display:block;font-size:11px;color:var(--muted);margin-top:1px}
.mini-play{width:34px;height:34px;flex:none;border-radius:999px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--primary),var(--primary-2))}
.mini-x{width:34px;align-self:stretch;border:0;background:transparent;color:var(--muted2);cursor:pointer;flex:none}
.mini-x:active{transform:scale(.9)}
.mini-prog{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.12)}
.mini-prog i{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--primary-2))}

/* badges de status no card (Novo / Em alta) */
.mcard .flag{position:absolute;top:8px;left:8px;z-index:3;
  font-size:8.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:#fff;
  padding:3px 8px;border-radius:999px;box-shadow:0 3px 10px -3px rgba(0,0,0,.5)}
.mcard .flag.new{background:linear-gradient(135deg,var(--primary),var(--primary-2))}
.mcard .flag.hot{background:linear-gradient(135deg,#ff8a1e,#ff4d1c)}
.mcard.ranked .flag{left:38px}

/* bottom-sheet reutilizável (abre via [data-sheet] -> #id) */
.sheet{position:fixed;inset:0;z-index:90;display:none}
.sheet:target,.sheet.is-open{display:block}
.sheet-veil{position:absolute;inset:0;background:rgba(0,0,0,.6);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.sheet:target .sheet-veil,.sheet.is-open .sheet-veil{animation:veilIn .25s ease both}
.sheet-box{position:absolute;left:0;right:0;bottom:0;
  background:var(--card);border-radius:22px 22px 0 0;padding:26px 18px calc(20px + env(safe-area-inset-bottom));
  max-height:88dvh;overflow-y:auto;box-shadow:0 -20px 50px -20px rgba(0,0,0,.7)}
.sheet:target .sheet-box,.sheet.is-open .sheet-box{animation:sheetUp .34s var(--ease) both}
.sheet-box::before{content:"";position:absolute;top:10px;left:50%;transform:translateX(-50%);
  width:40px;height:4px;border-radius:999px;background:rgba(255,255,255,.22)}
.sheet-box h3{font-family:'Poppins',sans-serif;font-size:17px;margin-bottom:14px}
@media(min-width:768px){
  .sheet{display:none!important}  /* sheet é padrão mobile; no desktop use modal */
}
/* ...menos no player: ali o bottom sheet e a UNICA saida do "Compartilhar" (nao ha
   modal de desktop pra ele) e o botao ficava MORTO de 768px pra cima. Volta so
   quando aberto e so no player; 0,3,1 com !important vence os 0,1,0 da regra acima.
   O #sheet-syn deixou de existir — o unico .sheet do player e o de compartilhar.
   MEDIDO: abre em 820 e em 1280, caixa de 560px centrada e inteira na tela. */
body.is-player .sheet.is-open{display:block!important}
body.is-player .sheet-box{max-width:560px;margin-left:auto;margin-right:auto}
.sheet-x{position:absolute;top:12px;right:12px;width:34px;height:34px;border:0;border-radius:999px;
  background:rgba(255,255,255,.06);color:var(--muted);display:grid;place-items:center;cursor:pointer}
.sheet-x:active{transform:scale(.9)}
.share-grid{display:flex;gap:12px}
.share-opt{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:16px 8px;border-radius:14px;background:var(--card2);border:1px solid var(--line);
  font-size:12px;font-weight:600;color:var(--txt);transition:transform .12s}
.share-opt:active{transform:scale(.95)}
.share-ic{width:46px;height:46px;border-radius:999px;display:grid;place-items:center;color:#fff}
.share-ic.wa{background:#25d366}
.share-ic.tg{background:#2aabee}
.share-ic.fb{background:#1877f2}
.share-ic.ig{background:linear-gradient(45deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5)}
/* o Instagram virou <button>: so neutraliza o estilo nativo, mantendo o visual do card */
button.share-opt{font-family:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}

/* ═══════════════════════════════════════════════════════════════════
   HEADER estilo iDrama: selo VIP dourado, presente, tabs de conteúdo
   ═══════════════════════════════════════════════════════════════════ */
/* selo VIP: a imagem VIP REAL do iDrama (ic_vip_benefit) inteira */
.vip-benefit{display:inline-flex;align-items:center;flex:none;height:32px}
.vip-benefit img{height:32px;width:auto;object-fit:contain;display:block;filter:drop-shadow(0 2px 5px rgba(0,0,0,.4))}
/* presente REAL do iDrama — sem cápsula, o ícone já é colorido */
.gift-btn{width:38px;height:38px;display:grid;place-items:center;flex:none;background:transparent;border:0;
  transition:transform .18s var(--ease)}
.gift-btn:active{transform:scale(.88)}
.gift-ic{width:26px;height:26px;object-fit:contain;filter:drop-shadow(0 1px 3px rgba(0,0,0,.35))}

/* ═══════════ assinatura inline (planos → login → pagamento → PIX → pronto) ═══════════ */
.sub-sheet{position:fixed;inset:0;z-index:120;display:flex;align-items:flex-end;justify-content:center}
.sub-sheet[hidden]{display:none}
.ss-veil{position:absolute;inset:0;background:rgba(0,0,0,.72);animation:veilIn .2s ease both}
.ss-box{position:relative;z-index:1;width:100%;max-width:460px;max-height:92dvh;overflow-y:auto;scrollbar-width:none;
  background:var(--card);border-radius:22px 22px 0 0;
  /* padding-bottom ZERO na caixa: com a barra do botao em position:sticky
     bottom:0, o sticky para no fim do CONTEUDO e o padding-bottom fica DEPOIS
     dele — sobrava uma faixa embaixo da barra onde o formulario aparecia por
     baixo. O respiro passou pra cada passo (.ss-step), e o passo de pagar nao
     precisa dele porque a propria barra ja tem o dela. */
  /* --bleed = o padding lateral da caixa. O cabecalho em sangria devolve
     exatamente este valor em margem negativa; declarar o numero nos dois lugares
     ja deixou 4px de fresta do fundo escuro aparecendo no PC, porque o passo de
     planos usa 32px e os outros 28px. Com a variavel, mudar o padding acerta a
     sangria junto. */
  --bleed:20px;
  padding:24px var(--bleed) 0;
  box-shadow:0 -20px 60px -20px rgba(0,0,0,.9);animation:sheetUp .3s var(--ease) both}
@media(min-width:560px){
  .sub-sheet{align-items:center}
  .ss-box{border-radius:18px;max-height:88dvh;animation:iosPop .24s ease both}
}
/* CELULAR: o modal premium ocupa a tela TODA; como o box cobre o véu, só o X
   fecha. Os passos ficam centralizados na vertical (não "descem" a tela ao trocar). */
@media(max-width:559px){
  .sub-sheet{align-items:stretch}
  /* height:100dvh dentro de um pai position:fixed sao DUAS alturas diferentes:
     no iOS com as barras recolhidas o dvh cresce ate ~75px a mais que o pai, a
     caixa transborda o .sub-sheet (que nao tem overflow) e esses 75px ficam fora
     da tela E fora da rolagem — e o que mora ali embaixo e justamente o botao e
     o "Site seguro". Com align-items:stretch o pai ja da a altura certa.
     E o padding-bottom sai da caixa e vai pro .ss-steps: padding de container de
     rolagem e descartado da regiao rolavel no WebKit. */
  .ss-box{max-width:100%;width:100%;height:auto;max-height:none;border-radius:0;animation:none;
    display:flex;flex-direction:column;padding-bottom:0}   /* --bleed herdado: 20px */
  /* O cabecalho era ESMAGADO. Em flex-column os filhos sao .ss-vhead e
     .ss-steps; .ss-steps tem flex:0 0 auto e o .ss-vhead herda flex:0 1 auto,
     entao TODA a reducao caia nele — sobrava uma tarja com o nome dela cortado
     fora. Era o "cortando" literal. */
  .ss-vhead{flex:none}
  /* UMA ROLAGEM SO, a da caixa inteira.
     Antes o .ss-steps era um segundo scroller com `justify-content:safe center`.
     Dois efeitos ruins: o cartao de plano era CORTADO NO MEIO pela borda
     invisivel do container (o dono viu "cortando o cabecalho do plano"), e num
     passo curto o conteudo era centralizado, deixando um vao enorme embaixo da
     coroa. Com uma rolagem so, a coroa sai de cena naturalmente e nada e
     fatiado. */
  .ss-steps{flex:0 0 auto;display:block;overflow:visible;min-height:0}
  /* O X era absolute DENTRO do proprio scroller, entao rolava junto: assim que
     ela rolava pra digitar o cartao nao existia mais X na tela. O veu nao fecha
     de proposito e Escape nao existe no celular — a saida sumia. Aqui a caixa e
     a tela inteira, entao fixed cai no mesmo lugar que o absolute caia. */
  .ss-x{position:fixed;background:rgba(0,0,0,.55);color:#fff}
}
/* mais horizontal no PC */
/* Coluna do FORMULARIO nao passa de ~520px. Estava 780px com 32px de padding =
   716px de linha util, e o formulario e de UMA coluna: cada campo virava uma
   faixa de 716x47px, o rotulo do resumo ficava num extremo com o preco 716px
   longe, e o botao dourado ia a 716px (.ss-box .vipx-cta{max-width:none} ganha
   de qualquer max-width por especificidade). Era a maior causa do "porco".
   O passo de PLANOS continua largo: la sao cartoes lado a lado. */
@media(min-width:900px){
  .ss-box{max-width:520px;--bleed:28px}
  .ss-box:has(.ss-step[data-step="plans"]:not([hidden])){max-width:780px;--bleed:32px}
}
/* sem a barra branca de rolagem (quebrava a harmonia) */
.ss-box::-webkit-scrollbar{display:none}
/* No PLAYER, o paywall de planos ocupa o LUGAR do vídeo (coluna de 500px, altura
   cheia) em vez de subir como bottom sheet flutuante. */
body.is-player .sub-sheet{align-items:stretch}
body.is-player .ss-veil{display:none}
body.is-player .ss-box{max-width:500px;width:100%;height:100dvh;max-height:100dvh;
  border-radius:0;margin:0 auto;animation:none;box-shadow:0 0 0 100vmax rgba(0,0,0,.82)}
/* títulos e resumo dos passos internos */
.ss-steptitle{font-family:'Poppins',sans-serif;font-size:18px;text-align:center;margin:0 0 4px;color:#fff}
/* O titulo do passo de pagar estava espremido: 4px de margem embaixo, colado no
   cartao dourado, e encostado na tarja do logo em cima. Titulo sem ar nenhum le
   como legenda do que vem depois, nao como titulo da tela. Aqui ele ganha o
   dobro de respiro embaixo do que em cima — a distancia menor amarra ele ao
   logo (mesma unidade de cabecalho) e a maior separa do cartao, que e outro
   assunto. */
/* ABRE a tela, acima do cartao do pedido, centralizado e dourado.
   Ele ja morou entre o cartao e o formulario, alinhado a esquerda: ali ficava
   colado no "1 Seus dados" (dois cabecalhos a 10px um do outro, que leem como
   texto repetido) e, mesmo separado, um titulo no meio da leitura parece mais
   uma linha do formulario, nao o titulo da etapa.
   No topo ele fica no eixo da logo dourada logo acima e os dois viram o
   cabecalho da tela — por isso centro, e por isso a mesma cor da logo.
   O dourado aqui nao briga com o botao de pagar: e texto, sem area preenchida,
   e esta a uma tela inteira de distancia dele. */
.ss-box .ss-step[data-step="pay"] > .ss-steptitle{
  font-size:16px;letter-spacing:-.01em;text-align:center;color:#fff8eb;
  margin:2px 0 14px}
@media(max-height:720px){
  .ss-box .ss-step[data-step="pay"] > .ss-steptitle{font-size:15px;margin:0 0 12px}
}
.ss-stepsub{font-size:13px;color:var(--muted);text-align:center;margin:0 0 16px}
/* Grid, nao flex: com space-between e um rotulo de plano longo o preco era
   empurrado pra segunda linha e a frase pra terceira — resumo de tres linhas com
   o preco no meio. E o -4px do .ss-sumsub brigava com o gap, que valia pras duas
   direcoes. Em grid nada disso depende do tamanho do texto.

   O FUNDO e o mesmo cartao dourado do perfil (.prof-sub, vip-card-bg.webp): a
   cliente ja conhece essa peca de dentro do app, entao ela chega aqui com cara
   de coisa da casa em vez de retangulo generico. Antes era um rgba(230,180,90,.08)
   chapado com borda de 1px — plano, sem material nenhum, e no meio de uma folha
   escura o unico bloco claro e' justamente o que a gente quer que ela olhe: o
   preco. Texto em marrom escuro, como no perfil: dourado sobre creme nao tem
   contraste. */
/* RESUMO DO TOPO: pequeno e escuro. Ele ja foi o cartao creme grande, com os
   cinco beneficios dentro, ocupando meia tela antes de a cliente digitar
   qualquer coisa. Agora carrega so o que ela precisa CONFERIR — plano, preco e
   a saida pra trocar — numa faixa dourada translucida, do peso de um cabecalho.
   O cartao creme com as capas nao morreu: virou o .ss-benescard, no fim da
   tela, com o que ela esta levando. */
/* RESUMO DO TOPO: o MESMO cartao creme com as capas, so que compacto.
   Encolher ele nao era motivo pra trocar o material — quando eu troquei o fundo
   por uma faixa dourada translucida, o cartao perdeu a identidade que ele tinha
   e virou mais uma caixa escura no meio de outras.
   O que saiu daqui foram os cinco beneficios, que desceram pro .ss-benescard no
   fim da tela. Isto aqui carrega so plano, preco e a saida pra trocar.
   Veu HORIZONTAL: creme cheio a esquerda, onde mora o texto, e quase
   transparente a direita, onde as capas aparecem. */
/* SANGRA ATE AS BORDAS DA FOLHA. O cartao deixou de ser mais um bloco na
   coluna e virou a FAIXA de cabecalho do checkout: quem paga confere o pedido
   uma vez, no topo, e desce pro formulario sem voltar.
   As margens do resto da tela ficam "levemente dentro" dele porque o padding
   lateral daqui e' o MESMO --bleed da caixa — entao o texto do cartao cai
   exatamente no eixo dos rotulos, dos campos e das secoes numeradas la embaixo,
   e so o fundo da faixa avanca pros lados. Um eixo so, com a faixa maior.
   Canto de cima arredondado em 11 e o de baixo RETO: reto embaixo ele encosta
   no conteudo em vez de flutuar, que e' o que separa faixa de cabecalho de
   cartao solto. */
.ss-summary{display:grid;grid-template-columns:1fr auto;align-items:start;gap:7px 14px;
  position:relative;overflow:hidden;
  /* --faixa-m: quanto SOBRA de margem entre a faixa e a borda da tela. Encostada
     de vez (margem 0) ela virava parte da moldura do celular em vez de um
     elemento da pagina. Calibrada com o dono olhando: 0 -> 8 -> 13px.
     A margem negativa e' o que falta pra chegar nesses 13.
     O PADDING NAO E' MAIS O COMPLEMENTO. Ele chegou a ser (--bleed menos a
     margem) pra o texto de dentro cair no eixo dos campos la embaixo, mas com a
     faixa recuando pra 13px isso deixava so 7px entre o texto e a borda dela —
     "TRIMESTRAL" e o preco encostados nos cantos.
     Faixa com margem propria e' um cartao, e cartao tem o padding dele: 17px.
     O texto fica 10px pra dentro do eixo da pagina, que e' como todo cartao se
     comporta e nao le como desalinho. */
  --faixa-m:13px;
  margin:0 calc(-1 * (var(--bleed,20px) - var(--faixa-m))) 4px;
  padding:18px 17px 19px;
  border-radius:11px 11px 0 0;border:0;
  background:linear-gradient(100deg,#f6e7c4 0%,rgba(244,227,189,.97) 26%,rgba(240,216,168,.72) 52%,rgba(232,200,140,.42) 78%,rgba(226,192,128,.34) 100%),
             url(../img/ui/vip-covers-bg.webp) right center/cover no-repeat,
             #f0dcb0;
  box-shadow:0 8px 26px -18px rgba(0,0,0,.9)}
/* cada coluna e uma pilha propria: o texto encosta no numero que ele explica */
.ss-sumL{grid-column:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ss-sumR{grid-column:2;justify-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:1px}
/* marrom: o cartao e creme. Ja esteve branco por um momento em que o fundo era
   escuro — se o fundo mudar de novo, esta cor muda junto. */
.ss-summary span[data-ss-sumlabel]{font-size:14px;font-weight:700;color:#5a3a12}
.ss-summary b{font-size:20px;font-weight:800;color:#4e320f;white-space:nowrap;line-height:1.15}
/* O mensal equivalente, encostado embaixo do valor cobrado — os dois se leem
   juntos: "R$ 44,70" e, logo abaixo, "R$ 14,90/mes". Vazio no mensal e no
   vitalicio, e ai o :empty tira ele da pilha. */
/* peso 600, nao 800: em negrito cheio ele competia com o valor cobrado logo
   acima (que e 800/21px) e os dois numeros brigavam pela mesma atencao. Mais
   leve, ele vira apoio — que e o papel dele. */
.ss-sumpm{font-style:normal;font-size:12.5px;font-weight:600;color:#6a4a1e;white-space:nowrap}
.ss-sumpm:empty{display:none}
/* a frase de cobranca fica colada no nome do plano, nao uma linha inteira abaixo */
.ss-sumsub{font-size:12.5px;font-weight:600;color:#6a4a1e;line-height:1.35}
.ss-sumsub:empty{display:none}
/* Os cinco beneficios, dentro do cartao dourado. Coluna unica: "Tudo liberado
   sem limites" mede ~140px a 12px e em duas colunas de 152px ele quebraria — e
   lista de beneficio com linha quebrada no meio le mal. A linha de cima separa
   o "o que custa" do "o que voce leva". */
/* ── FECHO DA TELA, embaixo do botao ─────────────────────────────────────────
   Assinatura de marca, nao mais um bloco de conteudo. Nada aqui tem caixa,
   borda ou fundo proprio: qualquer painel logo abaixo de um CTA dourado vira
   concorrente dele bem na hora em que ela ja decidiu.
   O escalonamento e todo por OPACIDADE, nao por cor: filete .07, selos .30,
   gateway .24, logo .17. Continua tudo na mesma paleta, e a leitura desce
   sozinha ate a marca sem nenhuma virada de contraste. */
/* padding-bottom aqui, e nao so o do .ss-step: a logo estava encostando na
   borda de baixo da folha, sem nenhum ar embaixo, e marca colada em corte le
   como coisa que ficou sobrando na rolagem. */
/* padding-bottom generoso: e' o respiro que fecha a tela. Com 22px a logo
   terminava quase junto do corte da folha e a pagina parecia ter acabado por
   falta de espaco, nao por ter chegado ao fim. 44 e' o dobro do maior vao da
   tela — o que faz o fim ser lido como fim. */
.ss-fim{margin:12px 0 0;padding-bottom:44px;text-align:center}
/* Filete curto e centrado. Uma regra de largura inteira cortaria a tela em duas
   e daria peso de rodape a uma coisa que precisa ser sussurro. */
.ss-fim-fio{display:block;width:44px;height:1px;margin:0 auto 10px;
  background:rgba(255,255,255,.07)}

/* ── SELOS, sem icone ────────────────────────────────────────────────────────
   Caixa alta com entreletra larga em corpo 9.5: e o tratamento que etiqueta de
   marca boa usa pra dizer "isto e nota de rodape, nao anuncio". Cadeadinho e
   escudinho desenhados ao lado fariam o oposto. */
/* CAIXA NORMAL, e nao mais caixa alta espacada. Medido: os tres em maiuscula
   com entreletra somavam 418px de conteudo numa caixa de 350 — "cancele quando
   quiser" caia sozinho numa segunda linha, que le como sobra e nao como
   conjunto. Caixa alta custa ~20% de largura, e mais a entreletra: pra caber
   seria preciso descer pra ~8px, ilegivel num texto a 34% de opacidade.
   Em caixa normal a mesma frase cabe inteira e continua discreta. Sem ponto
   separador entre eles: o proprio icone abre cada selo e ja faz a separacao. */
/* FLEX, e nao linha de inline: com display:block cada quebra de linha do HTML
   entre os <li> virava um espaco de verdade no meio da conta, e o conjunto
   estourava a caixa por 6px — quebrava por causa de espaco em branco do codigo
   fonte, que e o tipo de coisa impossivel de enxergar olhando a tela. No flex o
   respiro e gap, um numero so, e a linha fecha com folga. */
.ss-selos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:2px 10px;margin:0;padding:0;list-style:none;
  font-size:10px;font-weight:600;line-height:2;letter-spacing:0;
  text-transform:none;color:rgba(255,255,255,.34)}
/* nowrap por selo: sem isto "CANCELE QUANDO QUISER" partia no meio e a segunda
   linha comecava com "QUISER", que le como frase cortada em vez de garantia.
   A quebra agora so acontece ENTRE selos.
   E o espaco entre eles e PADDING, nao ponto separador: os tres nao cabem numa
   linha so, e nenhum separador de caractere sobrevive a uma quebra — ou fica um
   "·" pendurado no fim da linha 1, ou um "·" solto abrindo a linha 2. Com o
   respiro fazendo o trabalho, quebrar nao deixa sujeira em lugar nenhum, e em
   caixa alta com entreletra larga a separacao ja fica obvia sem pontuacao. */
.ss-selos li{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
/* O desenho acompanha a letra: mesma cor (currentColor no SVG), tamanho preso a
   altura da maiuscula e nenhuma opacidade propria. Icone com peso proprio ao
   lado de texto apagado e o que faz selo parecer adesivo colado. */
.ss-selos svg{flex:none;width:11.5px;height:11.5px;margin-top:-1px}
/* Nos 360px (Galaxy A, iPhone mini) faltavam 14px pros tres na mesma linha. Meio
   ponto de corpo e 2 de respiro resolvem sem que ninguem note a diferenca — bem
   mais barato que deixar "cancele quando quiser" cair sozinho embaixo. */
@media(max-width:380px){
  .ss-selos{font-size:9.5px;gap:2px 8px}
  .ss-selos svg{width:11px;height:11px}
}
/* Um selo troca com o metodo, pelo mesmo caminho do icone do botao: os dois
   textos nascem no HTML e o CSS mostra o que vale. No PIX nao ha o que cancelar
   — a cobranca e unica — entao ali o selo vira "sem fidelidade". */
.ss-fim[data-metodo="card"] .ss-selo-pix,
.ss-fim[data-metodo="pix"]  .ss-selo-card{display:none}

/* Nome do gateway em caixa normal: "Pagar.me" e nome proprio, e em caixa alta
   com entreletra ele vira grito e ainda perde o ponto do meio. */
.ss-fim-gw{margin:5px 0 0;font-size:10.5px;line-height:1.5;
  color:rgba(255,255,255,.24)}

/* A LOGO fecha a pagina. Apagada de proposito: aqui ela e lastro, o sinal de
   que a cobranca e da mesma casa em que ela esta — nao mais uma chamada. Em
   opacidade cheia competiria com a do topo e a tela ficaria com duas marcas
   brigando na mesma rolagem. Dourada, que e a unica cor de marca deste fluxo. */
.ss-fim-logo{display:block;height:32px;width:auto;margin:24px auto 0;
  opacity:.2;user-select:none;pointer-events:none}

/* ── ICONE DO METODO NO BOTAO ────────────────────────────────────────────────
   Os dois nascem no markup e o CSS acende o que vale, pelo data-metodo. O
   .vipx-cta e display:block, entao o botao vira inline-flex aqui pra o icone
   ficar ao lado do texto e o conjunto continuar centralizado. */
.ss-paybtn{display:inline-flex!important;align-items:center;justify-content:center;gap:9px}
.ss-paybtn-ic{display:none;align-items:center;flex:none}
.ss-paybtn-ic .msym{font-size:19px}
.ss-paybtn[data-metodo="card"] .ss-paybtn-ic[data-ic="card"],
.ss-paybtn[data-metodo="pix"]  .ss-paybtn-ic[data-ic="pix"]{display:inline-flex}

/* ── O QUE ELA ESTA LEVANDO, no fim da tela ─────────────────────────────────
   E o cartao creme com as capas, que antes embrulhava o resumo inteiro. Veu
   HORIZONTAL: creme cheio a esquerda, onde mora o texto, e quase transparente a
   direita, onde as capas aparecem. Sem veu, o `cover` numa caixa alta amplia a
   imagem e as capas ficam legiveis POR BAIXO do texto; com veu uniforme, elas
   somem. O horizontal resolve os dois. */
.ss-benescard{margin:26px 0 0;padding:18px 20px;border-radius:20px;overflow:hidden;
  background:linear-gradient(100deg,#f6e7c4 0%,rgba(244,227,189,.97) 26%,rgba(240,216,168,.72) 52%,rgba(232,200,140,.42) 78%,rgba(226,192,128,.34) 100%),
             url(../img/ui/vip-covers-bg.webp) right center/cover no-repeat,
             #f0dcb0;
  box-shadow:0 10px 34px -20px rgba(0,0,0,.9)}
.ss-sumben{list-style:none;display:flex;flex-direction:column;gap:10px;margin:0;padding:0;border:0}
.ss-sumben li{display:flex;align-items:center;gap:10px;
  font-size:12.5px;font-weight:600;color:#6a4a1e;line-height:1.3}
/* Idem no cartao do checkout: so o glifo, no marrom do proprio cartao. */
.ss-sumben-ic{flex:none;display:grid;place-items:center;width:22px;height:22px;color:#7a5520}
.ss-sumben-ic .msym{font-size:19px}

/* A saida pra trocar de plano fica COLADA no preco, que e onde a duvida
   acontece. A seta .ss-back ficava absolute em cima do cabecalho: ocupava
   x 12..44 enquanto o nome dela comeca em x=36 — a primeira letra ficava ATRAS
   dela —, e era cinza sobre a foto, quase invisivel. */
.ss-sumback{grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;gap:5px;
  border:0;background:none;padding:6px 0 0;margin:0;cursor:pointer;
  font-size:12.5px;font-weight:700;color:#6a4a1e;text-decoration:underline;text-underline-offset:3px}
.ss-sumback .msym{font-size:15px}
.ss-sumback:active{opacity:.65}
.ss-x{position:absolute;top:12px;right:12px;z-index:2;width:32px;height:32px;border:0;border-radius:50%;
  background:rgba(255,255,255,.08);color:var(--muted);display:grid;place-items:center;cursor:pointer}
.ss-back{position:absolute;top:12px;left:12px;z-index:2;width:32px;height:32px;border:0;border-radius:50%;
  background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer}
.ss-x:active,.ss-back:active{transform:scale(.9)}

.ss-crown{display:grid;place-items:center;width:52px;height:52px;margin:6px auto 10px;border-radius:50%;
  background:linear-gradient(135deg,var(--premium),#e0952b);color:var(--vip-ink)}
.ss-title{font-family:'Poppins',sans-serif;font-size:19px;text-align:center;margin:0 0 4px}
.ss-sub{font-size:13px;color:var(--muted);text-align:center;margin:0 0 16px}

.ss-plans{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.ss-plan{position:relative;display:flex;align-items:center;gap:10px;padding:14px;border-radius:14px;
  border:2px solid var(--line);background:rgba(255,255,255,.03);cursor:pointer;transition:border-color .15s,background .15s}
.ss-plan input{position:absolute;opacity:0;pointer-events:none}
.ss-plan.best,.ss-plan:has(input:checked){border-color:var(--primary);background:rgba(255,117,168,.08)}
.ss-plan-main{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.ss-plan-main b{font-size:15px}
.ss-plan-main span{font-size:12px;color:var(--muted)}
.ss-plan-price{font-size:17px;font-weight:800;white-space:nowrap}
.ss-tag{position:absolute;top:-9px;left:14px;background:var(--primary);color:#fff;font-size:10px;font-weight:700;
  padding:2px 8px;border-radius:999px;text-transform:uppercase;letter-spacing:.03em}
.ss-off{background:rgba(52,199,89,.16);color:#34c759;font-size:11px;font-weight:700;padding:2px 7px;border-radius:6px}

.ss-perks{list-style:none;display:flex;flex-direction:column;gap:7px;margin:0 0 16px;padding:0}
.ss-perks li{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}
.ss-perks li .ico,.ss-perks li svg{color:var(--primary);flex:none}

/* flex-wrap e nowrap por padrao, entao o cadeado e o texto ficavam no MESMO
   item e so o texto quebrava por dentro: com duas linhas, o align-items:center
   deixava o cadeado flutuando ENTRE elas, alinhado com nada. Somado ao contraste
   de 3,5:1, era a ultima coisa que ela lia antes de pagar e a pior escrita da
   tela. */
.ss-foot{display:flex;align-items:flex-start;justify-content:center;gap:7px;
  font-size:12px;line-height:1.45;text-align:left;color:#8a8a8a;
  max-width:38ch;margin:12px auto 0}
.ss-foot .msym{margin-top:1px}

.ss-err{background:rgba(255,69,58,.12);color:#ff6b6b;font-size:13px;padding:10px 12px;border-radius:10px;margin-bottom:12px}
.ss-err[hidden]{display:none}

/* LISTA VERTICAL, uma linha por metodo — nao duas pilulas 50/50. Duas pilulas
   iguais comunicam "tanto faz", e o cartao e o metodo principal. Alem disso, em
   320px cada pilula ficava com 116px de conteudo contra os ~126px de "Cartao de
   credito": quebrava em duas linhas e as alturas ficavam diferentes.
   E o mesmo .pay-opt da /pagamento, que ele ja aprovou. Os subtitulos sairam:
   "Da para parcelar" ele mandou tirar, e deixar so o do PIX daria ao PIX duas
   linhas de argumento contra uma do cartao. Quanto parcela quem diz e o select,
   com numero de verdade. */
/* margin-top maior por causa do selo "Mais escolhido": ele sobe 9px acima do
   botao, e com 8px de folga encostava no titulo da secao. */
.ss-methods{display:flex;flex-direction:column;gap:8px;margin:18px 0 14px}
.ss-method{position:relative;width:100%;display:flex;align-items:center;gap:12px;text-align:left;min-height:56px;
  padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--card2);
  color:var(--txt);font-size:14px;font-weight:600;cursor:pointer;
  transition:border-color .15s,background .15s}
.ss-method b{flex:1;min-width:0;display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:700}
.ss-method::after{content:"";flex:none;width:20px;height:20px;border-radius:999px;
  border:2px solid var(--line2);transition:border-color .15s,box-shadow .15s}
/* ── O DOURADO E A UNICA COR DE "ATIVO" NO FLUXO ─────────────────────────────
   O metodo escolhido vinha com borda ROSA e fundo rosado — uma segunda cor de
   estado no meio de uma tela que ja usa dourado pra tudo que esta ativo (o
   cartao de plano escolhido, o botao, o selo). Duas cores de "ligado" na mesma
   tela nao dobram o destaque, dividem ele: o olho passa a procurar dois
   significados onde so existe um.
   Os dois botoes tem exatamente o mesmo tratamento — o que muda e so o estado:
   fundo um tom acima, borda dourada fina e o radio preenchido de dourado. */
.ss-method.on{border-color:rgba(var(--vip-rgb),.55);background:rgba(255,255,255,.04)}
.ss-method.on::after{border-color:var(--vip-a);box-shadow:inset 0 0 0 4px var(--vip-a)}
.ss-method:focus-visible{outline:2px solid var(--vip-a);outline-offset:2px}
/* ── ACORDEAO ────────────────────────────────────────────────────────────────
   O painel do cartao mora DENTRO do seletor, entre a linha do cartao e a do
   PIX, e se funde com a linha que o comanda: mesma borda rosa, sem costura no
   meio. Sem isto ele parecia um bloco solto, sem dono, e o PIX ficava espremido
   entre a escolha e os campos dela.
   O :has() e o mesmo recurso ja usado no arquivo. Onde ele nao existir, o
   painel so fica como um bloco proprio logo abaixo — que continua legivel. */
/* border-top:0 e box-shadow:none, nao "transparente": a borda transparente de
   1px deixava o fundo da pagina passar entre a nota e o painel, e o inset claro
   herdado do .ss-cardbox desenhava um risco por cima disso. Os dois juntos eram
   a emenda que aparecia no meio da caixa. */
/* -9px cancela o gap:8px do .ss-methods e sobrepoe 1px, pra a borda do painel
   e a do botao virarem uma linha so. */
.ss-methods > .ss-cardbox{margin:-9px 0 0;border-radius:0 0 14px 14px;
  border:1px solid rgba(var(--vip-rgb),.55);border-top:0;box-shadow:none;
  background:linear-gradient(to bottom,rgba(255,255,255,.04),transparent 120px),var(--card2)}
/* so o cartao continua na caixa (o painel dos campos vem logo abaixo); o PIX
   fecha no proprio botao */
.ss-method.on:has(+ .ss-cardbox:not([hidden])){
  border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-color:transparent}
/* a linha do cartao e o painel viram uma peca so: o PIX respira longe dela */
.ss-methods > .ss-cardbox:not([hidden]){margin-bottom:9px}

/* O .ss-cardbox nao tinha ESTILO NENHUM: os quatro campos do cartao apareciam
   iguaizinhos aos quatro de "Seus dados" logo acima, sem nenhuma fronteira. Oito
   caixas identicas empilhadas viram uma parede, e e dai que vem o "generico".
   Vira painel; o input inverte o fundo pra nao sumir dentro dele. */
.ss-cardbox{margin:2px 0 4px;padding:16px 14px 4px;border-radius:16px;
  background:var(--card2);border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.ss-cardbox .input{background:var(--card)}
@media(min-width:900px){.ss-cardbox{padding:20px 18px 6px}}

/* Validade e codigo dividem a linha em 50/50. Um campo de 120px sozinho numa
   linha de 420px era o que fazia a tela parecer inacabada, e em 50/50 o codigo
   deixa de parecer opcional.
   minmax(0,1fr) e obrigatorio: 1fr e minmax(auto,1fr), e cai na MESMA armadilha
   de min-content que estourava a linha da validade antiga — input e flex/grid
   item nasce com largura intrinseca de ~180px e a linha pedia 370px em 320px de
   tela, com a barra de rolagem escondida, entao ela via o campo cortado sem
   nenhuma pista de que dava pra rolar. */
.ss-row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:start}
.ss-row2 .field{margin-bottom:0;min-width:0}
.ss-row2 .input{min-width:0;width:100%;max-width:none}

/* Bandeiras na linha do ROTULO do numero. Ficavam no rodape do formulario,
   depois das parcelas: respondiam "meu cartao serve?" trinta segundos depois de
   ela perguntar, e gastavam ~60px. Fora do input de proposito — por dentro
   exigiria padding-right e os 19 digitos de um Elo passariam por baixo do logo,
   que e mais coisa cortando. */
.ss-lblrow{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ss-brandrow{flex:none;flex-wrap:nowrap;gap:3px;margin:0}
.ss-brandrow .pay-brand{box-shadow:none;border-radius:3px;opacity:.85;transition:opacity .18s}
.ss-brandrow .pay-brand svg{width:23px;height:15px}
@media(max-width:359px){.ss-brandrow .pay-brand svg{width:20px;height:13px}}
/* Antes de reconhecer, as cinco acesas dizem "aceitamos estas". A partir do 6o
   digito a dela acende e as outras apagam — a unica confirmacao em tempo real de
   que o site entendeu o cartao, e ela acontece enquanto a cliente digita. */
.ss-brandrow[data-brand] .pay-brand{opacity:.18}
.ss-brandrow[data-brand="visa"]   [data-b="visa"],
.ss-brandrow[data-brand="master"] [data-b="master"],
.ss-brandrow[data-brand="elo"]    [data-b="elo"],
.ss-brandrow[data-brand="amex"]   [data-b="amex"],
.ss-brandrow[data-brand="hiper"]  [data-b="hiper"],
.ss-brandrow[data-brand="diners"] [data-b="diners"]{opacity:1}
@media(prefers-reduced-motion:reduce){.ss-brandrow .pay-brand{transition:none}}
.ss-box .pay-brands-lbl{display:none}

/* Bandeira do pais + DDI dentro da MESMA borda do campo. Nao da pra fazer no
   proprio .field, que e flex-direction:column e empilharia a bandeira ACIMA do
   input. A borda migra pro grupo, entao o .input.err (que so pinta borda)
   pararia de aparecer: dai o :has() no grupo E o fundo avermelhado no proprio
   input, que funciona ate onde o :has() nao chegar. */
.ss-ig{display:flex;align-items:stretch;min-height:48px;
  background:var(--card2);border:1px solid var(--line);border-radius:var(--radius);
  transition:border-color .15s}
.ss-ig:focus-within{outline:2px solid var(--vip-a);outline-offset:1px;border-color:transparent}
.ss-ig:has(.input.err){border-color:#ff6b6b}
.ss-ig-cc{flex:none;display:flex;align-items:center;gap:7px;padding:0 11px 0 13px;
  font-size:14px;font-weight:600;color:var(--muted);
  border-right:1px solid var(--line);user-select:none;white-space:nowrap}
.ss-ig-cc .flag{border-radius:3px;flex:none}
.ss-ig .input{border:0;background:transparent;border-radius:0 var(--radius) var(--radius) 0;padding-left:12px}
.ss-ig .input:focus{outline:none}
.ss-ig .input.err{background:rgba(255,69,58,.06)}
.ss-cardbox .ss-ig{background:var(--card)}

/* Barra do botao presa no rodape. Com o cartao aberto o passo tem ~1000px de
   conteudo e num iPhone SE com o teclado aberto sobram ~300px visiveis: o botao
   dourado nunca aparecia junto com o campo que ela esta preenchendo. Sticky
   funciona sem truque porque quem rola aqui e a propria .ss-box. As margens
   negativas batem com o padding lateral da caixa. O degrade curto e o que da a
   sensacao premium: o conteudo passa POR TRAS da barra em vez de bater numa
   borda dura. rgba(18,18,18,0) e o --card transparente — degrade pra
   "transparent" acinzenta no Safari. */
/* o respiro do fim da caixa mora em cada passo; o de pagar tem a barra */
.ss-step{padding-bottom:calc(22px + env(safe-area-inset-bottom))}
.ss-step[data-step="pay"]{padding-bottom:0}
/* SEM FLUTUAR. Isto ja foi position:sticky bottom:0 pra o botao estar sempre a
   mao. O efeito colateral matava a tela: a barra cobria a FORMA DE PAGAMENTO
   inteira, entao logo depois do CPF a cliente via o botao dourado e nenhum campo
   de cartao — e clicava nele achando que era "proximo passo". Botao de pagar
   visivel antes de existir o que pagar so produz clique errado.
   Agora ele fica no fim do formulario, onde o trabalho termina. */
.ss-paybar{margin:22px 0 0;padding:0}
/* ── O APOIO DO METODO: SO TEXTO ─────────────────────────────────────────────
   Historico, pra ninguem refazer o caminho: ja foi paragrafo no rodape, ja foi
   par de badges com icone dourado, ja foi faixa DENTRO da caixa do metodo com
   filete, e ja foi caixa com borda e icone em capsula. Cada versao acrescentava
   um enfeite, e o enfeite pedia atencao que a frase nao precisa — ela e um
   aviso de duas linhas sobre cobranca, nao um componente.
   Sobrou o que importa: uma linha quieta, alinhada com os campos. */
.ss-renew{margin:2px 0 16px;font-size:12.5px;line-height:1.45;
  color:var(--muted);text-align:left}
.ss-renew:empty,.ss-renew[hidden]{display:none}
/* o campo focado nao pode encostar na borda quando o teclado abre */
.ss-box .input,.ss-box select.input{scroll-margin-bottom:24px;scroll-margin-top:16px}

.ss-pixstep{text-align:center}
/* O titulo tinha 4px ate o cartao da cobranca — herdados do .ss-steptitle, que
   foi calibrado pras telas de "pronto", onde ele fica colado num icone grande.
   Aqui embaixo dele vem uma CAIXA, e titulo colado em caixa le como se o titulo
   fosse parte dela. 18px separam os dois assuntos. */
.ss-pixstep > .ss-steptitle{margin-bottom:18px}

/* ══ CARTAO DA COBRANCA ══════════════════════════════════════════════════════
   Valor, prazo, codigo e botao dentro de UMA caixa. Soltos, cada um era um
   bloco separado por filete, e quatro linhas horizontais num fundo preto leem
   como tela de configuracoes — nada dizia o que andava junto com o que.
   Agrupados, a caixa inteira responde "o que eu pago, ate quando, com qual
   codigo e onde eu toco". Tudo que nao responde isso ficou de fora dela. */
.ss-pixcard{text-align:left;padding:16px;border-radius:18px;
  background:var(--card2);border:1px solid var(--line);
  box-shadow:0 10px 30px -22px rgba(0,0,0,.9)}
.ss-pixcard-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.ss-pixcard-l{font-size:12.5px;color:var(--muted)}
/* O valor grande e sozinho na linha. E' a unica coisa que ela precisa conferir
   antes de pagar, e conferir numero em corpo 20 no meio de uma frase e' o que
   faz gente pagar errado e pedir estorno depois. */
.ss-pixval{display:block;font-size:27px;font-weight:800;color:#fff;
  line-height:1.1;letter-spacing:-.02em;margin:3px 0 15px}

/* PRAZO discreto por padrao: cinza, corpo 11.5, sem caixa e sem cor de alerta.
   Contador vermelho piscando desde o primeiro segundo e' pressao barata, e ela
   ainda tem meia hora. */
.ss-pixtimer{display:inline-flex;align-items:baseline;gap:5px;margin:0;
  font-size:11.5px;color:var(--muted2);white-space:nowrap}
.ss-pixtimer b{font-size:13px;font-weight:700;color:rgba(255,255,255,.75);
  font-variant-numeric:tabular-nums}
/* Urgente so quando de fato e' urgente: nos ultimos 5 minutos acende no rosa e
   pulsa devagar. Urgencia encenada ensina a ignorar a de verdade. */
.ss-pixtimer.perto b{color:var(--vip-a)}
.ss-pixtimer.perto{animation:pixPulso 2s ease-in-out infinite}
@keyframes pixPulso{0%,100%{opacity:1}50%{opacity:.55}}
@media(prefers-reduced-motion:reduce){.ss-pixtimer.perto{animation:none}}

/* ── O CODIGO ────────────────────────────────────────────────────────────────
   Uma faixa so, com a ponta direita APAGANDO em degrade. Cortado a seco — que
   era o que um textarea com overflow escondido fazia — o texto parecia estar
   vazando pra fora da caixa, com cara de layout quebrado. Apagando, o corte
   vira decisao e ela entende que o codigo continua.
   E' visivel, nao guardado numa gaveta: escondido, o botao pedia fe. Ela tocava
   em copiar e nada na tela mudava, entao nao havia como saber se copiou. */
.ss-pixcodewrap{margin:0 0 12px}
.ss-pixcode-l{display:block;font-size:11px;font-weight:600;letter-spacing:.03em;
  text-transform:uppercase;color:var(--muted2);margin:0 0 6px}
.ss-pixcode-in{display:block;width:100%;height:44px;resize:none;overflow:hidden;
  padding:13px 14px;border-radius:12px;border:1px solid var(--line2);
  background:var(--card);color:rgba(255,255,255,.6);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;line-height:18px;white-space:pre;
  -webkit-mask-image:linear-gradient(90deg,#000 68%,transparent 97%);
          mask-image:linear-gradient(90deg,#000 68%,transparent 97%)}
/* ao tocar, abre inteiro e seleciona: plano B de quem nao consegue colar */
.ss-pixcode-in:focus{height:96px;white-space:pre-wrap;overflow:auto;
  color:rgba(255,255,255,.92);outline:2px solid var(--vip-a);outline-offset:2px;
  -webkit-mask-image:none;mask-image:none}

/* ── BOTAO DE COPIAR ─────────────────────────────────────────────────────────
   Dentro do cartao, herdando o .vipx-cta inteiro: nesta tela copiar E' a acao
   principal, e dar a ele cara de botao secundario diria que existe algo mais
   importante pra fazer aqui — nao existe.
   Icone de duas folhas antes do texto: quem le pouco reconhece a forma antes da
   palavra. */
.ss-copybtn{display:inline-flex!important;align-items:center;justify-content:center;
  gap:9px;padding:15px}
.ss-copybtn-ic{display:inline-flex;flex:none}
.ss-copybtn-ic svg{width:18px;height:18px}
/* Confirmacao NO PROPRIO BOTAO: fica verde e o texto vira "Codigo copiado". So
   trocar a palavra nao basta — no instante do toque ela esta olhando pro dedo,
   e a mudanca de cor e' o que ela ve. */
.ss-copybtn.ok{background:linear-gradient(135deg,#12b981,#0e9268)!important;
  box-shadow:0 10px 30px -12px rgba(16,185,129,.5)!important}
.ss-copybtn.ok::after{opacity:0}

/* ══ COMO PAGAR, ANIMADO ═════════════════════════════════════════════════════
   Um celular desenhado em CSS ao lado da lista de passos, os dois andando
   juntos. Quem nunca usou copia e cola nao precisa IMAGINAR onde fica o "Pix
   Copia e Cola" dentro do banco — ela ve a tela mudando.
   Tudo e' caixa e texto: sem video, sem gif, sem imagem. Pesa nada, aparece no
   primeiro paint e continua legivel se a animacao nao rodar. */
.ss-tut{margin:22px 0 0;padding:14px;border-radius:16px;text-align:left;
  background:var(--card2);border:1px solid var(--line)}
.ss-tut-h{display:flex;align-items:center;gap:11px;margin:0 0 14px}
.ss-tut-h-ic{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:rgba(var(--vip-rgb),.14);color:var(--vip-a)}
.ss-tut-h-tx{display:flex;flex-direction:column;gap:1px;min-width:0}
.ss-tut-h-tx b{font-size:13.5px;font-weight:700;color:#fff}
.ss-tut-h-tx i{font-style:normal;font-size:11.5px;color:var(--muted)}
.ss-tut-body{display:flex;align-items:stretch;gap:14px}

/* ── O CELULAR ───────────────────────────────────────────────────────────────
   Largura fixa e baixa (98px): ele e' ilustracao, nao conteudo. Maior que isso
   ele rouba a lista, que e' quem de fato instrui. */
.ss-fone{flex:none;width:98px;border-radius:14px;padding:7px 6px;
  background:#0c0c0c;border:1px solid var(--line2);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)}
.ss-fone-top{display:block;width:26px;height:3px;border-radius:99px;margin:1px auto 7px;
  background:rgba(255,255,255,.16)}
.ss-fone-tela{position:relative;height:132px}
/* as tres telas ocupam o MESMO lugar; so a do passo corrente aparece */
.ss-fone-menu,.ss-fone-pag{position:absolute;inset:0;margin:0;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:5px;opacity:0;visibility:hidden;
  transition:opacity .25s ease}
.ss-fone-menu li{padding:7px 8px;border-radius:7px;font-size:9.5px;font-weight:600;
  color:rgba(255,255,255,.42);background:rgba(255,255,255,.045);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* o item aceso e' o que ela vai tocar na tela de verdade */
.ss-fone-menu li.on{background:var(--vip-a);color:#fff}
/* tela 3: colar, conferir, confirmar */
.ss-fone-pag{gap:3px}
.ss-fone-lb{font-size:8px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:rgba(255,255,255,.3)}
.ss-fone-cod{height:18px;border-radius:5px;background:rgba(255,255,255,.07);margin-bottom:5px}
.ss-fone-val{font-size:13px;font-weight:800;color:#fff;margin-bottom:auto}
.ss-fone-ok{margin-top:6px;padding:7px;border-radius:7px;text-align:center;
  font-size:9.5px;font-weight:700;color:#fff;background:var(--vip-a)}
/* qual tela aparece em cada passo */
.ss-tut[data-passo="1"] [data-tela="1"],
.ss-tut[data-passo="2"] [data-tela="1"],
.ss-tut[data-passo="3"] [data-tela="2"],
.ss-tut[data-passo="4"] [data-tela="3"],
.ss-tut[data-passo="5"] [data-tela="3"]{opacity:1;visibility:visible}
/* no passo 1 o menu esta la, mas nada aceso ainda: ela so abriu o app */
.ss-tut[data-passo="1"] [data-tela="1"] li.on{background:rgba(255,255,255,.045);color:rgba(255,255,255,.42)}

/* ── OS PASSOS ───────────────────────────────────────────────────────────────
   O aceso ganha numero cheio e texto branco; os outros ficam apagados. Cinco, e
   nao tres: entrar na area Pix e achar a opcao Copia e Cola sao dois toques em
   telas diferentes, e era exatamente ai que a lista de tres pulava — bem no
   ponto onde a pessoa trava. */
.ss-tut-passos{flex:1;min-width:0;counter-reset:tut;list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;justify-content:space-between;gap:6px}
.ss-tut-passos li{counter-increment:tut;position:relative;padding-left:26px;
  font-size:12px;line-height:1.35;color:rgba(255,255,255,.38);
  transition:color .25s ease;cursor:default}
.ss-tut-passos li b{font-weight:700;color:rgba(255,255,255,.55);transition:color .25s ease}
.ss-tut-passos li::before{content:counter(tut);position:absolute;left:0;top:-1px;
  width:19px;height:19px;border-radius:50%;display:grid;place-items:center;
  font-size:10px;font-weight:700;line-height:1;
  background:rgba(255,255,255,.07);color:rgba(255,255,255,.4);
  transition:background .25s ease,color .25s ease}
.ss-tut[data-passo="1"] li[data-p="1"],
.ss-tut[data-passo="2"] li[data-p="2"],
.ss-tut[data-passo="3"] li[data-p="3"],
.ss-tut[data-passo="4"] li[data-p="4"],
.ss-tut[data-passo="5"] li[data-p="5"]{color:#fff}
.ss-tut[data-passo="1"] li[data-p="1"] b,
.ss-tut[data-passo="2"] li[data-p="2"] b,
.ss-tut[data-passo="3"] li[data-p="3"] b,
.ss-tut[data-passo="4"] li[data-p="4"] b,
.ss-tut[data-passo="5"] li[data-p="5"] b{color:var(--vip-a)}
.ss-tut[data-passo="1"] li[data-p="1"]::before,
.ss-tut[data-passo="2"] li[data-p="2"]::before,
.ss-tut[data-passo="3"] li[data-p="3"]::before,
.ss-tut[data-passo="4"] li[data-p="4"]::before,
.ss-tut[data-passo="5"] li[data-p="5"]::before{background:var(--vip-a);color:#fff}
/* quem pediu menos movimento ve os cinco passos legiveis de uma vez, parados */
@media(prefers-reduced-motion:reduce){
  .ss-tut-passos li{color:rgba(255,255,255,.8)}
  .ss-fone-menu,.ss-fone-pag{transition:none}
}
@media(max-width:359px){.ss-fone{display:none}}

/* ── AGUARDANDO ──────────────────────────────────────────────────────────────
   No fim, com o UNICO filete da tela acima dele. Enquanto ela nao pagou,
   "aguardando pagamento" nao tem o que informar; no meio da tela ele empurrava
   o tutorial pra fora. A promessa de liberacao automatica fica colada nele, que
   e' onde a duvida "e depois que eu pagar?" acontece. */
.ss-pixwait{margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.ss-pixback{font-size:12.5px;color:var(--muted);margin:8px 0 0;line-height:1.45}
.ss-pixcheck{margin-top:12px}

/* ── QR ──────────────────────────────────────────────────────────────────────
   Uma linha com cara de botao, nao um link boiando entre dois filetes. No
   celular ninguem aponta a camera pra propria tela: isto serve a quem abriu no
   computador, que e' minoria — por isso uma linha, nao meia tela. */
.ss-pixqr{margin-top:14px;text-align:left}
.ss-pixqr summary{display:block;text-align:center;cursor:pointer;list-style:none;
  padding:11px;border-radius:12px;border:1px solid var(--line);
  font-size:12.5px;font-weight:600;color:rgba(255,255,255,.6)}
.ss-pixqr summary::-webkit-details-marker{display:none}
.ss-pixqr-hint{font-size:12px;color:var(--muted2);margin:12px 0 0;text-align:center}
.ss-qr{display:block;margin:6px auto 14px;border-radius:12px;background:#fff;padding:8px}
.ss-qr[hidden]{display:none}
.ss-status{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;color:var(--muted);margin-top:12px}
.ss-spin{width:15px;height:15px;border:2px solid rgba(255,255,255,.25);border-top-color:var(--primary);
  border-radius:50%;animation:ssSpin .8s linear infinite;flex:none}
@keyframes ssSpin{to{transform:rotate(360deg)}}

.ss-done{text-align:center;padding:14px 0}
.ss-check{display:grid;place-items:center;width:66px;height:66px;margin:6px auto 14px;border-radius:50%;
  background:rgba(52,199,89,.15);color:#34c759}
/* cartão em análise: âmbar, não verde — não está aprovado ainda */
.ss-clock{background:rgba(var(--vip-rgb),.15);color:var(--vip-a)}

body.ss-open{overflow:hidden}

/* tabs de conteúdo (Popular · Novos · Categoria · Trending) */
.ctabs{display:flex;gap:22px;align-items:center;justify-content:center;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.ctabs::-webkit-scrollbar{display:none}
.ctab{position:relative;flex:none;font-size:17px;font-weight:700;color:var(--muted2);
  padding:8px 0;letter-spacing:-.01em;transition:color .2s}
.ctab:hover{color:var(--muted)}
.ctab.on{color:var(--txt)}
/* underline curto, centralizado embaixo da palavra ativa (como o iDrama) */
.ctab.on::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:0;
  width:24px;height:3px;border-radius:999px;background:linear-gradient(90deg,var(--primary),var(--primary-2))}
@media(min-width:640px){.ctab{font-size:19px}}
/* no desktop/tablet as tabs centralizam (no celular rolam à esquerda) */
@media(min-width:768px){.ctabs{justify-content:center;gap:40px}}

/* ═══════════ player em 3 colunas no PC (nav | vídeo | info + ações) ═══════════
   No celular os wrappers "somem" (display:contents) e o layout fica idêntico ao
   de antes: vídeo em tela cheia com a UI sobreposta. Só no PC (≥1024) vira o
   layout de 3 colunas: a navegação do site à esquerda, o vídeo no centro e a
   série (título, sinopse) + ações (curtir, salvar, compartilhar) à direita. */
.vp-nav{display:none}
.vp-stage,.vp-frame,.vp-rail{display:contents}
.vp-syn-full{display:none}   /* sinopse completa: so no PC (ver media 1024px abaixo) */

@media(min-width:1024px){
  body.is-player main{max-width:none;margin:0}          /* o player usa a tela toda */
  .vplayer{display:grid;grid-template-columns:230px minmax(0,1fr) 400px;height:100dvh;overflow:hidden;background:#0a0a0c}
  .vp-syn-m{display:none}                                  /* no PC nao usa "ver mais" */
  .vp-syn-full{display:block;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.82);margin-top:10px;max-height:44vh;overflow:auto}

  /* ── coluna 1: nav lateral (o "header" do site em coluna) ── */
  .vp-nav{display:flex;flex-direction:column;padding:22px 14px;overflow-y:auto;border-right:1px solid rgba(255,255,255,.07)}
  .vp-nav-logo{margin:0 6px 22px;font-family:'Poppins',sans-serif;font-weight:800;font-size:18px;color:#fff}
  .vp-nav-logo b{color:var(--primary)}
  .vp-nav-logo img{height:34px;width:auto;display:block;filter:brightness(1.3)}
  .vp-nav-links{display:flex;flex-direction:column;gap:4px}
  .vp-nav-links a{display:flex;align-items:center;gap:13px;padding:12px;border-radius:10px;color:var(--muted);font-size:14px;font-weight:600;transition:background .15s,color .15s}
  .vp-nav-links a:hover{background:rgba(255,255,255,.06);color:#fff}
  .vp-nav-links a .ico,.vp-nav-links a svg{flex:none}

  /* ── coluna 2: palco, centraliza o "aparelho" do vídeo (9:16) ── */
  /* MEDIDO em 1024/1100/1200/1280: o .vp-frame e display:contents (linha ~1625) em
     TODA largura e este bloco nunca devolvia `display` — a regra do "aparelho 9:16"
     que morava aqui NUNCA pintou nada, e o video ficava numa coluna preta de 100dvh
     (650x900 a 1280) com a setinha de voltar boiando na tarja ACIMA da imagem.
     Quem carrega video, controles e parede e o .vp-stage: a forma vai nele. MEDIDO
     depois: palco 315,24 479x852 e a setinha em 323,32 44x44 DENTRO do cartao.
     O par vh/dvh e proposital: navegador sem dvh descarta a 2a linha e fica com a 1a.
     NAO devolver `display` ao .vp-frame: o app-vplayer.js:232 escolhe o alvo da tela
     cheia por frameEl.getBoundingClientRect().width — com largura 0 ele cai no
     .vplayer, que e o comportamento de hoje. Dar caixa a ele trocaria esse alvo. */
  .vp-stage{display:block;position:relative;padding:0;min-width:0;
    justify-self:center;align-self:center;
    width:min(100%,calc(min(90vh,880px) * 9 / 16));
    width:min(100%,calc(min(100dvh - 48px,880px) * 9 / 16));
    height:auto;aspect-ratio:9/16;
    max-height:min(90vh,880px);
    max-height:min(100dvh - 48px,880px);
    border-radius:18px;overflow:hidden;background:#000;
    box-shadow:0 24px 70px -24px rgba(0,0,0,.85)}
  .vp-top{position:absolute;top:18px;left:18px;right:auto;width:auto;padding:0;z-index:30}

  /* ── coluna 3: trilho — info da série + ações, empilhados e roláveis ── */
  .vp-rail{display:flex;flex-direction:column;gap:22px;padding:30px 24px;overflow-y:auto;border-left:1px solid rgba(255,255,255,.07)}
  .vp-info{position:static;inset:auto;padding:0;gap:12px;align-items:flex-start}
  .vp-info .vp-title{font-size:22px;line-height:1.3;white-space:normal}
  .vp-info .vp-syn{font-size:14px;line-height:1.5}
  /* ── ações: coluna DENTRO do cartão, encostada na direita, igual ao celular ──
     Era `position:static` aqui. Só que dentro do .vp-stage tudo o que importa
     (#video, controles, parede) é ABSOLUTO, então a coluna caía no fluxo e ia
     parar no topo do cartão, atrás do vídeo — MEDIDO em 1440x900: x=395 y=24,
     invisível. Na prática o PC não tinha curtir, comentar, compartilhar nem TV;
     sobrava só o botão de favoritos no trilho da direita.
     Absoluta resolve, e de quebra o PC passa a ter a mesma coluna do celular —
     uma tela só pra aprender. O cartão tem overflow:hidden, então nada escapa. */
  .vp-side{position:absolute;right:14px;left:auto;top:auto;bottom:104px;z-index:12;
    flex-direction:column;flex-wrap:nowrap;gap:14px;align-items:center;justify-content:flex-end}
  .vp-side>*{flex:0 0 auto;min-width:44px}
  .vp-side .vp-actf{display:flex}
  .vp-side .vp-act-ic{width:44px;height:44px}
  .vp-side .vp-act-ic img{width:24px;height:24px}
  /* No PC o rótulo FICA: aqui sobra espaço, e ler "Comentários" é melhor que
     adivinhar o ícone. No celular ele sai (bloco de 1023) porque a coluna tapa
     a cena. */
  .vp-side .vp-act-n{font-size:10.5px}
  /* no PC os elementos do trilho não somem com o auto-ocultar (só os do vídeo) */
  .vplayer.vp-idle .vp-side,.vplayer.vp-idle .vp-info{opacity:1;visibility:visible;pointer-events:auto}
}

/* ═══════════ PAINEL FIXO de informacoes (abaixo do video, < 1024px) ═══════════
   O .vp-rail JA e essa coluna no PC (bloco acima). Abaixo de 1024 ele deixava de
   existir (display:contents, linha ~1625) e o .vp-info/.vp-side viravam sobreposicao
   em cima do video — dai o "ver mais" dividindo pixel com a timeline (MEDIDO: .vp-info
   em bottom:62px e .vp-progwrap de 44 a 68 = 6px de sobreposicao). Aqui o trilho vira
   o MESMO painel, empilhado embaixo do palco. Nada e duplicado: um .vp-info, um
   .vp-side, um [data-episodes] — o #sheet-syn saiu do movie.php.

   ORDEM: este bloco entra DEPOIS do @media(min-width:1024px) (sobrescreve 549, 550,
   605, 1625 e 1626, todas anteriores) e ANTES do bloco is-walled (~1855), que tem
   especificidade maior.

   ALTURA, nao so largura: quem encolhe o video e (min-height:560px). Celular DEITADO
   (844x390, 932x430) cai FORA dessa faixa e fica com o palco em 100svh — a geometria
   de hoje, pixel a pixel — com o painel abaixo da dobra, alcancavel rolando. MEDIDO
   em 844x390: palco 500x390 e a parede com os mesmos 6px de rolagem de hoje, com o
   botao do plano em 272,248 300x44 inteiro na tela.
   SEM aspect-ratio aqui: a altura e svh com o vh declarado na linha de cima —
   navegador que nao conhece svh degrada uns pontos percentuais, o player nunca some. */

/* O #conteudo tem `animation:pageIn .45s both` ate 900px (~linha 1175) e o estado final
   deixa `transform:matrix(1,0,0,1,0,0)` grudado no <main> — o que faz o <main> virar
   bloco-conteiner dos position:fixed que moram dentro dele. Enquanto o player media
   100dvh isso era inofensivo; com o painel o <main> passa a ~1045px e o bottom sheet do
   COMPARTILHAR nasce no fim da PAGINA, nao da tela (MEDIDO a 390: caixa em y=859..1045
   com a tela em 844 — 15px visiveis). Desligar a animacao SO no player devolve o sheet a
   viewport (MEDIDO: 658..844, inteiro na tela) e e exatamente o que quem usa
   prefers-reduced-motion ja tem hoje (~linha 1178). O #assinar e o #login ficam FORA do
   <main> (page.php 96 e 100), entao o checkout nunca dependeu disto. */
body.is-player #conteudo{animation:none}
.vp-panel{display:flex;flex-direction:column;gap:14px}
.vp-panel .syn-more{margin-top:0}
.vp-meta{margin:0;font-size:12px;color:var(--muted2)}
.vp-chips{display:flex;gap:8px;flex-wrap:wrap}
/* titulo e categoria deixaram de ser <button> que abria o sheet */
.vp-title{margin:0;cursor:default}
.vp-cat{cursor:default}
/* As grades do painel medem o CONTEINER, nao a janela. Sem isto o .grid herdaria os
   breakpoints de viewport (2/3/5 colunas, linhas ~362-364) dentro de um trilho de
   400px: 5 posteres de ~57px no PC. E a .ep-grid herdaria 8 colunas de 37px, abaixo
   do minimo de toque. MEDIDO com auto-fill: poster 110x182 (1280 e 1024), 111x182
   (820), 114x187 (390) e 141x223 (320); celula de episodio 45 a 52px em todas. */
.vp-panel .grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px}
.vp-panel .ep-grid{grid-template-columns:repeat(auto-fill,minmax(44px,1fr))}
/* [C3] .vp-info e .vp-side moram FORA do video agora e ficam sempre a vista; zerar a
   transicao elimina de vez a janela em que o elemento esta invisivel E clicavel. */
.vp-info,.vp-side{transition:none}

@media(max-width:1023px){
  /* o video deixa de ser 100dvh: vira caixa medida e a PAGINA passa a rolar */
  .vplayer{display:block;height:auto;min-height:100vh;min-height:100svh;overflow:visible}
  /* o palco vira o bloco posicionado: #video, .vp-tap, .vp-playbtn, .vp-skip,
     .vp-mute, .vp-seekhint, .vp-progwrap e a PAREDE passam a se posicionar contra
     ele — a parede cobre o video e SO o video. O .vp-frame continua display:contents
     de proposito (mantem frameW=0 e o alvo da tela cheia no .vplayer). */
  /* overflow-x:clip e a REDE: enfeite sobreposto (o degrade da coluna, a explosao
     de 78px do coracao) nasce mais largo que o icone de proposito, e qualquer um
     deles passando da borda estica a viewport e faz a pagina rolar de lado.
     `clip` e nao `hidden`: hidden obrigaria overflow-y a virar scroll e criaria
     um segundo scroller dentro do palco, quebrando a rolagem da pagina.
     Os sheets (comentario, relato, TV) moram FORA do .vplayer, entao nada que
     precisa escapar da caixa esta aqui dentro. */
  .vp-stage{display:block;position:relative;width:100%;height:100vh;height:100svh;overflow-x:clip}
  .vp-rail{display:flex;flex-direction:column;gap:16px;
    padding:16px 14px calc(24px + env(safe-area-inset-bottom))}
  .vp-info{position:static;inset:auto;z-index:auto;gap:8px}
  .vp-title{font-size:19px;line-height:1.3;white-space:normal}
  .vp-syn-m{display:none}
  .vp-syn-full{display:block;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.82)}
  /* As acoes VOLTAM pra cima do video, como eram antes — o dono pediu. So o
     titulo/sinopse/relacionados moram no painel de baixo. Coluna encostada na
     direita, dentro do palco, com respiro pra barra de progresso. */
  /* gap 13 (era 18): o dono pediu os icones mais proximos. MEDIDO — a coluna cai
     de 353 pra 328px, e como o degrade sobra 70px em cima e embaixo, o primeiro e
     o ultimo botao passam a cair em 15% / 85% da mascara: continuam DENTRO da
     faixa cheia (12%-88%), entao ninguem perde o fundo. */
  .vp-side{position:absolute;right:8px;left:auto;top:auto;bottom:96px;z-index:12;
    flex-direction:column;flex-wrap:nowrap;gap:13px;align-items:center;justify-content:flex-end}
  .vp-side>*{flex:0 0 auto;min-width:44px}
  .vp-side .vp-actf{display:flex}
  /* Tela cheia era o botao que o dono nao achava: some junto com a UI e nao se
     distingue dos outros. Ganha fundo proprio pra ler como CONTROLE do player e
     nao como acao social (salvar/curtir/compartilhar). */
  /* o circulo agora e padrao de TODA acao — a regra propria da tela cheia saiu */
  .vplayer.vp-idle .vp-info,.vplayer.vp-idle .vp-side{opacity:1;visibility:visible;pointer-events:auto}
}
/* retrato de verdade: o palco encolhe e o painel APARECE sem rolar nada.
   MEDIDO — 320x568: palco 320x420, faixa VIP em y=436 (dentro da tela).
            390x844: palco 390x625, faixa VIP em y=641.  820x900: palco 500x666.
            1024x620 e 1280x900 nao entram aqui (sao o cartao do PC). */
@media(max-width:1023px) and (min-height:560px){
  /* O palco assume a PROPORCAO DO VIDEO (9:16): a imagem preenche a largura e as
     tarjas pretas laterais somem. Antes era 74svh fixo — um retrato 9:16 dentro de
     uma caixa que nao e 9:16 sempre sobra barra dos dois lados.
     O teto de 78svh existe pra o painel continuar aparecendo sem rolar em telas
     baixas, e o min() resolve os dois casos sem media query nova. */
  /* 88svh: a referencia usa 100dvh, mas la nao existe o painel com a faixa VIP. Com
     88 o video domina a tela E a borda do painel aparece, convidando a rolar — o CTA
     fica a um gesto, nao escondido. Com cover nao ha tarja em nenhum dos dois casos. */
  .vp-stage{height:88vh;height:88svh;aspect-ratio:auto;max-height:none}
}
/* Rede: navegador que ignora aspect-ratio zeraria a altura e o player SUMIRIA.
   Mesma protecao que o cartao do PC ja leva. */
@supports not (aspect-ratio: 9 / 16){
  @media(max-width:1023px) and (min-height:560px){
    .vp-stage{height:74vh;height:74svh;max-height:none}
  }
}
/* tela cheia abaixo de 1024: o alvo continua sendo o .vplayer inteiro, entao o layout
   volta ao sobreposto — senao a tela cheia mostraria video em 74% e painel embaixo.
   O bloco -webkit esta REPETIDO em vez de vir por virgula: pseudo-classe desconhecida
   na mesma lista derruba a regra inteira, e a saida da tela cheia sumiria. */
@media(max-width:1023px){
  .vplayer:fullscreen .vp-rail{display:contents}
  .vplayer:fullscreen .vp-info,.vplayer:fullscreen .vp-panel,.vplayer:fullscreen .vip{display:none}
  .vplayer:fullscreen .vp-side{position:absolute;right:10px;bottom:118px;z-index:12;
    flex-direction:column;gap:18px;align-items:center;justify-content:flex-start}
  .vplayer:fullscreen .vp-side>*{flex:none}
  .vplayer:-webkit-full-screen .vp-rail{display:contents}
  .vplayer:-webkit-full-screen .vp-info,.vplayer:-webkit-full-screen .vp-panel,.vplayer:-webkit-full-screen .vip{display:none}
  .vplayer:-webkit-full-screen .vp-side{position:absolute;right:10px;bottom:118px;z-index:12;
    flex-direction:column;gap:18px;align-items:center;justify-content:flex-start}
  .vplayer:-webkit-full-screen .vp-side>*{flex:none}
}
/* [C4] rede de seguranca do cartao 9:16 do PC: sem isto, navegador que ignora
   aspect-ratio deixa a altura em 0 e o player SOME. VERIFICADO no ar com a
   propriedade neutralizada: SEM a rede o palco vira 479x0; COM a rede, 479x852.
   Nao muda nada em quem suporta. O par vh/dvh vale aqui tambem: quem nao tem
   aspect-ratio normalmente tambem nao tem dvh. */
@supports not (aspect-ratio: 9 / 16){
  @media(min-width:1024px){
    .vp-stage{height:min(90vh,880px);height:min(100dvh - 48px,880px);max-height:none}
  }
}
/* ═══════════ tela VIP / planos (/assinar) — estilo app, dourado ═══════════ */
.vipx{position:relative;isolation:isolate;min-height:100dvh;width:100%;max-width:520px;margin:0 auto;align-self:stretch;padding:0 18px 34px;
  display:flex;flex-direction:column;color:#fff;overflow:hidden;background:#0b0b0d}
/* papel de parede REAL do iDrama (ic_sub_top_bg — raios dourados) cobrindo o topo INTEIRO */
.vipx::before{content:"";position:absolute;top:0;left:0;right:0;height:420px;z-index:0;pointer-events:none;
  background:url("../img/ui/vip-top-bg.webp") top center/cover no-repeat}
/* O veu escurece MAIS na faixa onde o texto cai (78%), sem apagar o brilho da
   coroa em cima — era ali que o nome e o "voce ainda nao e membro" sumiam. */
.vipx::after{content:"";position:absolute;top:0;left:0;right:0;height:420px;z-index:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(11,11,13,.15),rgba(11,11,13,.5) 48%,rgba(11,11,13,.86) 78%,#0b0b0d)}
/* conteúdo acima do papel de parede */
.vipx-back,.vipx-head,.vipx-form{position:relative;z-index:1}
.vipx-back{width:40px;height:40px;display:grid;place-items:center;margin:14px -8px 0;color:#fff}
.vipx-head{position:relative;padding:104px 4px 20px;min-height:130px}
/* coroa REAL (landscape com anel de luz + glow): cobre o topo, o glow fica atrás do nome */
.vipx-crown{position:absolute;top:-22px;right:-22px;width:min(98%,450px);height:auto;pointer-events:none;z-index:0}
/* O nome e o status ficam POR CIMA da coroa dourada, que e clara e brilhante:
   branco a 72% sumia contra ela. Sombra escura resolve onde o veu nao alcanca. */
.vipx-name{position:relative;z-index:1;font-family:'Poppins',sans-serif;font-size:25px;font-weight:800;margin:0;max-width:72%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-shadow:0 2px 12px rgba(0,0,0,.85),0 1px 3px rgba(0,0,0,.9)}
.vipx-status{position:relative;z-index:1;color:rgba(255,255,255,.86);font-size:14px;margin:6px 0 0;
  text-shadow:0 2px 10px rgba(0,0,0,.9),0 1px 3px rgba(0,0,0,.9)}

/* ── O QUE VEM EM QUALQUER PLANO ─────────────────────────────────────────────
   Uma vez so, acima dos precos. Sem caixa e sem borda: e conteudo de leitura,
   nao um cartao que compete com os cartoes de plano logo abaixo. */
.vipx-inc{position:relative;z-index:1;margin:0 0 20px}
/* Deixou de ser rótulo e virou FRASE ("Assista tudo com apenas uma assinatura"),
   então sai o caixa-alta com letra espaçada — que serve pra etiqueta de duas
   palavras e atrapalha a leitura de uma sentença — e entra tamanho de título. */
/* O titulo alinha a esquerda NA BORDA DO BLOCO, que e a mesma margem dos
   cartoes de plano, do botao e dos icones da lista: x=20 pra tudo na tela.
   Ele chegou a ficar recuado ate a coluna do texto da lista (36px, a calha dos
   icones), o que criava um segundo eixo — os icones dourados sobravam pra fora,
   a esquerda dele, e a secao inteira parecia torta. Um eixo so resolve.
   Os fios dourados dos lados sairam junto: eles existiam pra sustentar um
   titulo centralizado, e centralizado ele nao esta mais. */
.vipx-inc-t{display:block;text-align:left;
  font-size:15.5px;font-weight:800;letter-spacing:-.015em;text-transform:none;
  /* BRANCO, nao na cor de acento. Ele encabeca cinco itens que ja tem icone
     colorido; colorido tambem, a secao inteira ficava de uma cor so, e acento
     que esta em tudo para de significar alguma coisa. Branco devolve a
     hierarquia — o titulo se le primeiro pelo tamanho e pelo peso, e a cor fica
     reservada pros icones. */
  color:#fff;margin:0 0 15px;line-height:1.3;
  /* sem isto a segunda linha ficava so com "historia." — uma palavra orfa
     pendurada embaixo de uma linha cheia. O balance reparte as duas. Onde nao
     existe, a quebra volta a ser a normal, sem quebrar nada. */
  text-wrap:balance}
/* o apoio que morava no cabeçalho, agora colado no título que ele completa */
.vipx-inc-s{font-size:12.5px;line-height:1.4;color:var(--muted);margin:0 0 13px}
@media(max-height:660px){.vipx-inc-t{font-size:13.5px}}
.vipx-inc-l{list-style:none;display:flex;flex-direction:column;gap:10px;margin:0;padding:0}
/* Alinhado pelo TOPO, nao pelo centro: com titulo + apoio o item tem duas
   linhas, e centralizar deixava a medalha boiando entre elas, encostada em
   nenhuma das duas. Encostada na primeira linha, ela e o comeco da frase. */
.vipx-inc-l li{display:flex;align-items:flex-start;gap:12px}
/* SEM CONTAINER. Ja foi quadrado chapado e ja foi bola escura; os dois pesavam
   mais que a frase que vinham anunciar — cinco caixas ou cinco bolas em fila
   viram uma coluna de enfeite ao lado do texto.
   O que resolvia o problema original nunca foi a moldura: era o glifo ser
   DIFERENTE em cada linha (antes eram cinco checks iguais e o olho pulava a
   lista). Com o glifo distinto, dourado e maior, o container so atrapalhava. */
.vipx-inc-ic{flex:none;display:grid;place-items:center;width:24px;height:26px;color:var(--vip-a)}
/* 21px num desenho de traco 1,7 pesa uma fracao do glifo cheio de 22px que
   estava aqui — e o alinhamento e' pela primeira LINHA do titulo ao lado, nao
   pelo meio do item, que tem duas linhas. */
.vipx-inc-ic svg{width:21px;height:21px;display:block}
.vipx-inc-ic .msym{color:var(--vip-a);font-size:22px!important}
/* Esta regra nasceu pro check de 14px que existia direto dentro do <li>. O glifo
   agora mora no .vipx-inc-ic e tem tamanho proprio; mantida so pro caso de
   sobrar algum icone solto, e sem !important pra nao vencer o de la. */
.vipx-inc-l > li > .msym{flex:0 0 auto;color:var(--vip-a);font-size:14px}
.vipx-inc-l b{display:block;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.94);line-height:1.3}
.vipx-inc-l i{display:block;font-style:normal;font-size:11.5px;color:rgba(255,255,255,.52);
  line-height:1.35;margin-top:1px}

/* ── CARTOES DE PLANO: EMPILHADOS ────────────────────────────────────────────
   Eram dois por linha, rolando na horizontal: cabia so o preco e a cliente
   tinha que arrastar pra descobrir que existiam quatro. Empilhado ela ve todos
   e cabe o beneficio dentro de cada um. Paleta dourada mantida. */
.vipx-plans{display:flex;flex-direction:column;gap:11px;padding:2px 0 4px;margin-bottom:22px}
.vipx-radio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.vipx-plan{position:relative;isolation:isolate;display:block;padding:15px 16px 14px;border-radius:16px;cursor:pointer;
  background:rgba(255,255,255,.045);border:2px solid rgba(255,255,255,.1);transition:.18s}
.vipx-off{position:absolute;top:-1px;right:-1px;background:linear-gradient(135deg,#ff5f8f,#c9366b);
  color:#fff;font-size:10px;font-weight:800;padding:3px 9px;border-radius:0 14px 0 12px}
/* ── VITALICIO: bloco de outra natureza ──────────────────────────────────────
   Ele nao pode parecer o quarto cartao — era exatamente isso que o punha na
   mesma decisao dos outros tres e fazia um R$ 299,90 aparecer no meio de uma
   escada que vai de R$ 19,90 a R$ 118,80. Por isso: sem preenchimento solido,
   borda tracejada, altura menor e uma seta no fim. Le-se como "ou entao…", nao
   como "mais uma opcao da lista".
   Fica abaixo do botao dourado, entao herda o respiro dele. */
.vipx-forever{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  margin:14px 0 0;padding:13px 14px;border-radius:14px;cursor:pointer;
  background:rgba(var(--vip-rgb),.05);border:1.5px dashed rgba(var(--vip-rgb),.42);
  color:var(--vip-a);text-decoration:none;transition:border-color .18s,background .18s}
.vipx-forever:hover{background:rgba(var(--vip-rgb),.09);border-color:rgba(var(--vip-rgb),.7)}
.vipx-forever:active{transform:scale(.99)}
.vipx-forever-ic{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:rgba(var(--vip-rgb),.14);color:var(--vip-a)}
.vipx-forever-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.vipx-forever-txt b{font-size:13.5px;font-weight:700;color:var(--vip-a);line-height:1.35}
.vipx-forever-txt i{font-style:normal;font-size:11.5px;font-weight:600;color:var(--muted)}
.vipx-forever-go{flex:none;color:rgba(var(--vip-rgb),.75);display:grid;place-items:center}
/* escolhido: deixa de ser tracejado. Na folha vem do radio; na /assinar vem da
   classe .on, posta pelo controller quando ela chega com ?plan=lifetime. */
.vipx-radio:checked + .vipx-forever,
.vipx-forever.on{border-style:solid;border-color:var(--vip-a);
  background:linear-gradient(160deg,rgba(var(--vip-rgb),.18),rgba(var(--vip-rgb),.05))}
/* no overlay o botao dourado ocupa a largura toda; este acompanha */
.ss-box .vipx-forever{max-width:none}

/* "Mais escolhido" no trimestral: fica na BORDA DE CIMA, nao no canto, pra nao
   brigar com o selo de desconto do mesmo cartao. */
/* A direita, nao a esquerda: na esquerda ela caia em cima do nome do plano
   ("TRIMESTRAL · 3 MESES"), que comeca no mesmo x=16. A direita o canto esta
   livre — o que mora la e o circulo de escolha, mais abaixo.
   JA FOI ROSA e voltou pro dourado. O rosa aqui gritava: pilula rosa saturada
   com texto branco e halo, colada num cartao dourado — as duas cores brigando
   no mesmo centimetro, e o selo roubando a atencao do preco que ele deveria
   estar apoiando. A marca entra na tela pelo LOGO, que ja tem o rosa dentro
   dele; nao por um componente pintado de rosa. */
.vipx-pop{position:absolute;top:-9px;right:16px;left:auto;background:linear-gradient(135deg,var(--vip-a2),var(--vip-a3));
  color:var(--vip-ink);font-size:10px;font-weight:800;letter-spacing:.02em;padding:3px 10px;border-radius:999px;
  box-shadow:0 4px 12px -4px rgba(var(--vip-rgb),.7)}

.vipx-plan-top{display:flex;align-items:center;gap:12px}
.vipx-plan-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
/* BRANCO, nao na cor de acento. Com "ANUAL · 12 MESES" colorido, cada cartao
   tinha duas coisas gritando (o rotulo e o preco) e a cor deixava de significar
   "escolhido" — ela aparecia igual nos tres, inclusive nos nao selecionados.
   Em branco o rotulo vira o que ele e', legenda do preco, e a cor de acento
   volta a marcar so uma coisa na tela: o cartao ativo. */
.vipx-plan-name{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.88)}
/* O NUMERO GRANDE E O MENSAL. O semanal saiu: ele era o destaque e o valor
   cobrado nao aparecia em lugar nenhum da tela. */
.vipx-plan-price{font-size:26px;font-weight:800;line-height:1.1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.vipx-plan-price i{font-style:normal;font-size:13px;font-weight:600;color:rgba(255,255,255,.5);
  margin-left:2px}
.vipx-plan-sub{font-size:11.5px;color:rgba(255,255,255,.55);line-height:1.35;margin-top:2px}

/* Marca de selecao: circulo vazio que vira dourado com o check. */
.vipx-tick{flex:0 0 auto;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  border:2px solid rgba(255,255,255,.22);color:transparent;transition:.18s}
.vipx-radio:checked + .vipx-plan .vipx-tick{border-color:var(--vip-a);background:var(--vip-a);color:var(--vip-ink)}

/* SEM DEGRADE. O fundo era um degrade rosa de .16 pra .04 em 160deg: numa
   caixa de 90px de altura isso e' uma rampa curta demais pra ler como degrade —
   sai como uma mancha mais clara no topo que parece erro de renderizacao, e
   ainda tinge o preco, que precisa ser branco puro.
   Fica o que os apps de assinatura serios usam: MESMO fundo dos outros cartoes,
   um fio a mais de claridade, e a borda na cor de acento fazendo todo o
   trabalho — mais o halo, que descola o cartao escolhido do plano de fundo sem
   pintar nada por dentro. Um sinal so, na borda, e' mais forte que dois fracos. */
.vipx-radio:checked + .vipx-plan{border-color:var(--vip-a);
  background:rgba(255,255,255,.062);
  box-shadow:0 12px 34px -18px rgba(var(--vip-rgb),.75)}
/* ── BRILHO CORRENDO NA BORDA DO PLANO ESCOLHIDO ─────────────────────────────
   Uma luz percorre o CONTORNO do cartao marcado, sem tocar no miolo.
   COMO: um degrade conico gira dentro do pseudo-elemento e um mask de duas
   camadas com xor recorta so a moldura de 2px — o preenchimento e' furado, e
   sobra exatamente o anel. E' assim que se anima uma borda sem repintar o
   cartao inteiro nem empilhar quatro divs de 2px nas laterais.
   POR QUE nao um box-shadow pulsando: shadow pulsante acende e apaga o cartao
   todo, que le como alerta. Aqui a luz ANDA, entao ela chama sem piscar.
   6s e nao 2s: no ciclo curto isso vira letreiro de loja. Nesse ritmo a luz
   passa devagar o bastante pra parecer material, nao animacao.
   z-index negativo e o miolo do cartao por cima: o brilho fica atras do preco,
   nunca por cima do texto. */
/* z-index:-1 com isolation no cartao, e NAO empurrando os filhos pra z-index:1.
   Tentei o contrario primeiro e quebrou: `.vipx-plan > *{position:relative}`
   pegava tambem o selo "Mais escolhido", que e' absolute — o relative venceu, o
   selo saiu do canto de cima e caiu no meio do texto.
   Com z-index negativo dentro de um contexto isolado, o anel pinta acima do
   fundo do cartao e abaixo de TODO o conteudo, sem precisar tocar em um filho
   sequer. */
.vipx-radio:checked + .vipx-plan::after{content:"";position:absolute;inset:-2px;
  border-radius:inherit;padding:2px;pointer-events:none;z-index:-1;
  background:conic-gradient(from var(--ss-ang),
    transparent 0deg,transparent 62deg,
    rgba(var(--vip-rgb),.35) 78deg,#fff 90deg,rgba(var(--vip-rgb),.35) 102deg,
    transparent 118deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:planoBrilho 6s linear infinite}
/* GIRA O DEGRADE, nao o elemento.
   Com transform:rotate quem girava era a CAIXA do pseudo-elemento — e caixa
   retangular girando joga os proprios cantos pra fora do cartao. O resultado no
   ar era um risco rosa diagonal saindo do cartao escolhido e atravessando o
   plano de baixo. A mascara nao segurava porque ela e' recortada no sistema de
   coordenadas do elemento e girava junto.
   Aqui o elemento fica parado e quem anda e' o angulo do conic-gradient,
   declarado com @property justamente porque custom property so anima se tiver
   tipo. Onde @property nao existe, o angulo nao anima e sobra um anel parado —
   que continua marcando o plano escolhido, sem risco nenhum vazando. */
@property --ss-ang{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes planoBrilho{to{--ss-ang:360deg}}
/* quem pediu menos movimento no sistema fica com a borda parada, que ja marca
   o escolhido sozinha */
@media(prefers-reduced-motion:reduce){.vipx-radio:checked + .vipx-plan::after{animation:none;opacity:0}}
.vipx-radio:focus-visible + .vipx-plan{outline:2px solid var(--vip-a);outline-offset:2px}

/* ── beneficios DENTRO do cartao ──
   Fica sempre visivel (o dono pediu em todos os planos). Separado por um filete
   pra ler como "o que vem junto", nao como continuacao do preco. */
/* So os EXTRAS ficam aqui — o que diferencia este plano dos outros. Os comuns
   subiram pro .vipx-inc, uma vez so. */
.vipx-bl{display:flex;flex-direction:column;gap:7px;margin-top:11px;padding-top:11px;
  border-top:1px solid rgba(255,255,255,.09)}
.vipx-bl-h{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(var(--vip-rgb2),.75)}
.vipx-bl-i{display:flex;align-items:flex-start;gap:8px}
.vipx-bl-i .msym{flex:0 0 auto;margin-top:1px;color:rgba(var(--vip-rgb),.85);font-size:13px!important}
.vipx-bl-i b{display:block;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.92);line-height:1.3}
.vipx-bl-i i{display:block;font-style:normal;font-size:11px;color:rgba(255,255,255,.5);line-height:1.35;
  margin-top:1px}
/* os dois exclusivos do anual/vitalicio acendem em dourado */
.vipx-bl-i.hot .msym{color:var(--vip-a2)}
.vipx-bl-i.hot b{color:var(--vip-a2)}

/* ── CTA PRESO NO RODAPE, so no passo dos PLANOS ─────────────────────────────
   Aqui nao existe campo pra preencher — o plano ja vem marcado — entao o botao
   sempre pode ser tocado. E o oposto do passo de PAGAMENTO, onde a barra fixa
   foi tirada porque cobria os campos do cartao e convidava ao clique antes da
   hora (a nota inteira esta em .ss-paybar).
   sticky so age quando ha rolagem: em tela que ja mostra tudo, o bloco fica no
   fluxo e nada muda. As margens negativas usam o mesmo --bleed do cabecalho. */
/* 36px separavam o ultimo cartao do botao (16 do bloco dos planos + 18 de
   margem daqui + 14 de padding). Numa escada de tres precos, um vao desse
   tamanho faz o botao parecer de outra secao, e nao a conclusao do que ela
   acabou de escolher. Agora sao 20, com o padding de cima segurando so o
   necessario pro degrade da barra grudenta ter onde sumir enquanto os cartoes
   passam por baixo. O corte fica na regra do .ss-box la embaixo, que e a que
   vence — uma segunda igual aqui em cima so perderia pra ela em silencio. */
.ss-planbar{position:sticky;bottom:0;z-index:3;
  margin:0 calc(-1 * var(--bleed,20px)) 0;
  padding:10px var(--bleed,20px) calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,var(--card) 82%,rgba(18,18,18,0))}
/* o selo estava colado no botao e as contas coladas nele: tres linhas
   diferentes empilhadas sem respiro nenhum liam como um bloco so */
.ss-planbar .ss-trust{margin-top:16px;padding-top:15px}

/* ── LINHA DE SEGURANCA + PROVA SOCIAL, embaixo do botao ─────────────────────
   Ja foi um paragrafo de tres linhas e ja foi um par de badges com icone
   dourado. O badge dourado era o pior dos dois: o icone gritava e o texto cinza
   sussurrava, e dois pesos na mesma linha e exatamente o que da cara de
   template pronto.
   Agora e UMA linha sobre um filete, com o cadeado do MESMO tom e do MESMO
   tamanho do texto. Selo que se anuncia compete com o botao dourado logo acima;
   selo que sussurra sustenta ele. O filete e quem faz o trabalho de separar. */
.ss-trust{display:flex;align-items:center;justify-content:center;gap:7px;
  margin:18px auto 0;padding:13px 0 0;max-width:280px;
  border-top:1px solid rgba(255,255,255,.07);
  font-size:12px;font-weight:500;letter-spacing:.015em;color:rgba(255,255,255,.46)}
.ss-trust .msym{font-size:13px;color:inherit;flex:none;opacity:.9}
.ss-trust span{white-space:nowrap}
/* A prova social e discreta de proposito: quem esta com o dedo no botao nao
   precisa de um numero grande competindo com ele. O <b> e o unico com peso, e
   e nele que o contador roda. */
/* A prova social passou pra DEPOIS do botao, dentro da barra: acima ela era
   mais uma linha adiando o toque; embaixo ela fecha pra quem leu tudo e ainda
   nao clicou. Margem em cima agora, e um respiro maior do que era embaixo
   porque o halo dourado do botao vaza uns pixels pra fora dele. */
.ss-subs{text-align:center;font-size:11.5px;color:rgba(255,255,255,.34);margin:14px 0 0}
.ss-subs b{color:rgba(255,255,255,.66);font-weight:700;font-variant-numeric:tabular-nums}
/* no cartao claro do checkout a linha acompanha o marrom */
.ss-box .ss-cardbox ~ .ss-paybar .ss-trust{color:rgba(255,255,255,.46)}

/* Depois do botao agora: precisa de folga pro halo do dourado nao encostar
   na linha do titulo. */
/* deixou de ser rotulo ("Beneficios de membro") e virou frase — mesmo motivo do
   .vipx-inc-t: caixa-alta espacada serve pra etiqueta, nao pra sentenca */
.vipx-benes{margin-bottom:22px;margin-top:24px}
.vipx-benes-t{font-size:14px;font-weight:700;text-align:center;color:var(--vip-a);margin:0 0 16px;
  display:flex;align-items:center;justify-content:center;gap:10px}
.vipx-benes-t::before,.vipx-benes-t::after{content:"";height:1px;width:28px;
  background:linear-gradient(90deg,transparent,rgba(var(--vip-rgb),.6))}
.vipx-benes-t::after{transform:scaleX(-1)}
.vipx-benes-row{display:flex;justify-content:space-around;gap:8px}
.vipx-bene{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1;text-align:center}
.vipx-bene-ic{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(circle at 50% 32%,#463a22,#1c1c20);border:1px solid rgba(var(--vip-rgb),.22)}
.vipx-bene-ic img{width:32px;height:32px;object-fit:contain}
.vipx-bene-t{font-size:11px;color:rgba(255,255,255,.75);line-height:1.25}

.vipx-pays{display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
.vipx-pay{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;cursor:pointer;
  background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.1);transition:.15s}
.vipx-pay-ic{order:1;color:var(--vip-a);display:grid;place-items:center;flex:none}
.vipx-pay-t{order:2;margin-right:auto;font-size:14px;font-weight:600}
.vipx-pay-off{order:3;background:rgba(52,199,89,.16);color:#34c759;font-size:11px;font-weight:700;padding:2px 8px;border-radius:6px}
.vipx-pay input{order:4;accent-color:var(--vip-a);width:18px;height:18px;flex:none}
.vipx-pay:has(input:checked){border-color:var(--vip-a);background:rgba(var(--vip-rgb),.08)}
/* mais formas de pagamento — <details> nativo (sem JS) */
.vipx-more{margin-top:2px}
.vipx-more summary{list-style:none;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:12px;cursor:pointer;color:rgba(255,255,255,.6);font-size:13px;font-weight:600}
.vipx-more summary::-webkit-details-marker{display:none}
.vipx-more summary .msym{transition:transform .2s}
.vipx-more[open] summary .msym{transform:rotate(180deg)}
.vipx-more-body{padding:2px 4px 8px}
.vipx-more-body p{font-size:12px;color:rgba(255,255,255,.5);margin:0 0 10px;text-align:center}
.vipx-brands{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.vipx-brands span{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  border-radius:8px;padding:6px 12px;font-size:12px;font-weight:700;color:rgba(255,255,255,.75)}

/* ── CTA ─────────────────────────────────────────────────────────────────────
   ROSA da marca (--primary), preenchido, com texto branco.
   Ele ja foi dourado e ja foi marrom escuro. O marrom nao funcionou por um
   motivo estrutural: cor escura sobre fundo #121212 nao se separa do fundo, e o
   botao passava a depender de borda e brilho pra existir — muleta, nao
   destaque. Preenchido numa cor viva ele volta a se impor sozinho, e o brilho
   passa a ser enfeite em cima de um botao que ja funciona sem ele.
   O rosa e a cor de acao do site (--primary), entao o CTA do funil passa a
   falar a mesma lingua do resto e nao inventa uma sexta cor. */
.vipx-cta{position:relative;overflow:hidden;
  display:block;width:100%;text-align:center;border:0;border-radius:999px;padding:16px;cursor:pointer;
  font-size:16px;font-weight:800;color:var(--vip-cta-ink);
  background:var(--vip-cta-bg);
  box-shadow:0 10px 30px -10px var(--vip-cta-glow), inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .15s}
.vipx-cta:active{transform:scale(.985)}
/* ── SELO DE ECONOMIA, dentro do botao ───────────────────────────────────────
   Pilula translucida SOBRE o proprio botao: branco a 18% deixa a cor do botao
   passar por baixo, entao ela pertence ao botao em vez de parecer um adesivo
   colado nele. Um selo em cor solida ali competiria com o texto do proprio
   botao — dois pesos no mesmo lugar e o olho nao sabe qual ler primeiro.
   Menor e mais leve que o rotulo de proposito: ela e' o argumento, nao a acao.
   O botao vira inline-flex pra os dois ficarem lado a lado e centralizados
   juntos; o rotulo continua sendo o que manda no tamanho. */
.vipx-cta:has([data-ss-off]:not([hidden])){display:inline-flex;align-items:center;justify-content:center;gap:10px}
.vipx-cta-off{flex:none;padding:3px 9px;border-radius:999px;
  background:rgba(255,255,255,.18);
  font-size:11.5px;font-weight:800;letter-spacing:.02em;color:#fff;
  line-height:1.5;white-space:nowrap}
.vipx-cta-off[hidden]{display:none}

/* ── BRILHO ──────────────────────────────────────────────────────────────────
   Uma faixa clara e inclinada atravessa o botao a cada 3,6s. E deliberadamente
   um pulso curto com pausa longa, nao um vaivem continuo: brilho que nao para
   vira ruido de fundo e o olho aprende a ignorar em segundos — que e o oposto
   do que ele existe pra fazer.
   ::after e nao um elemento no HTML: o botao aparece em cinco lugares e nenhum
   deles precisa saber que existe um brilho.
   translate3d pra a animacao rodar na GPU: com `left` ela repinta o botao
   inteiro 60 vezes por segundo, e num Android modesto isso engasga justamente na
   tela do pagamento. */
.vipx-cta::after{content:"";position:absolute;top:0;bottom:0;left:0;width:42%;
  transform:translate3d(-160%,0,0) skewX(-18deg);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,235,200,.24),rgba(255,255,255,.42),rgba(255,235,200,.24),transparent);
  animation:ctaShimmer 3.6s cubic-bezier(.4,0,.2,1) infinite}
@keyframes ctaShimmer{
  0%,62%{transform:translate3d(-160%,0,0) skewX(-18deg)}
  100%  {transform:translate3d(360%,0,0)  skewX(-18deg)}
}
/* Quem pediu menos movimento no sistema nao ve o brilho. A borda e a sombra
   continuam sustentando o botao sozinhas — por isso o destaque nao pode depender
   so da animacao. */
@media(prefers-reduced-motion:reduce){.vipx-cta::after{animation:none;opacity:0}}

/* Enquanto o gateway responde (2-4s) o botão ficava idêntico a si mesmo: dourado,
   com sombra, com o mesmo texto. Do lado dela isso é "não funcionou", e ela toca
   de novo ou fecha. Apaga, some a sombra e para de responder ao toque.
   O brilho para junto: um botao que continua brilhando enquanto nao responde
   parece vivo, e e exatamente a hora em que ele nao esta. */
.vipx-cta:disabled{opacity:.62;box-shadow:none;transform:none;cursor:default}
.vipx-cta:disabled::after{animation:none;opacity:0}
/* a .ss-spin padrão tem o topo rosa, que sumiria sobre o próprio rosa */
.vipx-cta .ss-spin{display:inline-block;vertical-align:-2px;margin-right:2px;
  border-color:color-mix(in srgb,var(--vip-cta-ink) 30%,transparent);border-top-color:var(--vip-cta-ink)}
.vipx-legal{text-align:center;color:rgba(255,255,255,.4);font-size:11.5px;margin:14px 0 0}
.vipx-legal a{color:rgba(255,255,255,.65);text-decoration:underline}
.vipx-skip{display:block;text-align:center;color:rgba(255,255,255,.42);font-size:13px;margin-top:14px}
@media(min-width:768px){
  .vipx{max-width:940px;padding-left:32px;padding-right:32px}
  .vipx-crown{width:180px}
  .vipx-name{font-size:30px}
  /* planos lado a lado, sem scroll (cabem todos na largura) */
  /* empilhado tambem no PC, so que numa coluna estreita: cartao de plano com
     700px de largura fica com o preco de um lado e o beneficio perdido do outro.
     ESCOPADO em .vipx: a folha de assinatura usa o MESMO parcial dentro de uma
     caixa de 716px, e sem o escopo os cartoes ficavam com 560 enquanto o botao
     dourado ia a 716 — sobrando 78px de cada lado do que ele deveria fechar. */
  .vipx .vipx-plans{max-width:560px;margin-left:auto;margin-right:auto}
  /* pagamento e botão numa coluna confortável, centralizados */
  .vipx-pays,.vipx-cta,.vipx-legal,.vipx-skip{max-width:560px;margin-left:auto;margin-right:auto}
  .vipx-pays{width:100%}
}

/* ═══════════ tela Perfil (/profile) — estilo app ═══════════ */
.prof{max-width:720px;margin:0 auto;padding:8px 16px 34px;position:relative;isolation:isolate}
.prof::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  left:0;right:0;top:calc(-1 * var(--nav-h));height:420px;
  background:url(../img/ui/prof-bg.webp) no-repeat top center;background-size:cover}
.prof-head{display:flex;align-items:center;gap:14px;padding:34px 4px 26px}
/* ── MOLDURA VIP NA FOTO ─────────────────────────────────────────────────────
   O anel (coroa + louros) e uma IMAGEM por cima, nao uma borda: ele passa dos
   limites do circulo em cima e nos lados, e o .prof-av precisa manter
   overflow:hidden pra recortar a foto. Por isso a moldura mora num wrapper.
   O brilho por tras e um radial suave — o mesmo tom dourado da casa, baixo o
   bastante pra ler como luz e nao como aro colorido. */
.prof-avwrap{position:relative;flex:none;display:grid;place-items:center;width:76px;height:76px}
.prof-avwrap-on::before{content:"";position:absolute;inset:-26%;border-radius:50%;
  background:radial-gradient(circle,rgba(240,196,110,.42) 0%,rgba(240,196,110,.16) 45%,transparent 70%);
  pointer-events:none}
.prof-ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-52%);
  width:132%;aspect-ratio:256/299;pointer-events:none;
  background:url("../img/ui/vip-ring.png") center/contain no-repeat;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
/* dentro da moldura a foto encolhe um pouco: o anel tem espessura e sem isto a
   imagem encostava nele por dentro */
.prof-avwrap-on .prof-av{width:64px;height:64px;border-color:rgba(240,196,110,.5)}

.prof-av{width:76px;height:76px;border-radius:50%;flex:none;display:grid;place-items:center;overflow:hidden;
  background:rgba(255,255,255,.10);border:2px solid rgba(255,255,255,.22)}
.prof-av img{width:100%;height:100%;object-fit:cover}
.prof-id{min-width:0;flex:1}
.prof-id b{display:flex;align-items:center;gap:6px;min-width:0;font-family:'Poppins',sans-serif;font-size:22px;font-weight:800;color:#fff}
.prof-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.prof-id > span{display:block;font-size:13px;color:rgba(255,255,255,.62)}

/* cartão de assinatura — papel de parede cream do iDrama (vip-card-bg), texto escuro */
.prof-sub{display:block;border-radius:18px;padding:16px 18px;margin-bottom:22px;position:relative;overflow:hidden;
  background:#f0dcb0 url(../img/ui/vip-card-bg.webp) right center/cover no-repeat;color:#6a4a1e;border:0}
.prof-sub-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.prof-sub-top b{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:800;color:#5a3a12}
.prof-sub-top b .msym{color:#5a3a12}
.prof-sub-cta{background:linear-gradient(180deg,#e2b855,#cc9834);color:#432d06;font-size:13px;font-weight:800;
  padding:9px 22px;border-radius:999px;flex:none}
.prof-sub-tag{background:rgba(45,125,51,.16);color:#2d7d33;font-size:12px;font-weight:700;padding:4px 12px;border-radius:999px;flex:none}
.prof-sub-benes{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}
.prof-sub-benes span{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:#6a4a1e}
.prof-sub-benes .msym{color:#6a4a1e;flex:none}
.prof-sub-benes span img{width:18px;height:18px;object-fit:contain;flex:none}
.prof-vflag{width:18px;height:18px;object-fit:contain;flex:none}

/* blocos (histórico) */
.prof-block{margin-bottom:22px}
.prof-block-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.prof-block-h h2{font-family:'Poppins',sans-serif;font-size:17px}
.prof-clear{background:transparent;border:0;color:var(--muted2);font-size:12px;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;gap:4px}

/* menu */
.prof-menu{display:flex;flex-direction:column;background:var(--card2);border-radius:16px;overflow:hidden;margin-bottom:22px}
.prof-menu a{display:flex;align-items:center;gap:14px;padding:15px 16px;color:var(--txt);font-size:14.5px;font-weight:500;
  border-bottom:1px solid rgba(255,255,255,.05);transition:background .15s}
.prof-menu a:last-child{border-bottom:0}
.prof-menu a:active{background:rgba(255,255,255,.05)}
.prof-mi{color:var(--muted);display:grid;place-items:center;flex:none}
.prof-mi-img img{width:24px;height:24px;object-fit:contain;display:block}
.prof-ml{flex:1}
.prof-mv{font-style:normal;font-size:13px;color:var(--muted2)}
.prof-menu a > .msym:last-child{color:var(--muted2)}

/* configurações (dados + senha) */
.prof-cfg-h{font-family:'Poppins',sans-serif;font-size:16px;margin:18px 0 12px}
.prof-config .card{margin-bottom:14px}
.prof-logout{margin-top:10px}
@media(min-width:768px){.prof-sub-benes{grid-template-columns:repeat(4,1fr)}}

/* header do paywall inline (overlay) = topo da tela VIP: papel de parede + coroa real */
/* ── SANGRIA (opção C) ───────────────────────────────────────────────────────
   A arte deixou de ser um retangulo DENTRO da folha e virou o topo da PROPRIA
   folha: encosta nas laterais e herda o arredondado de 22px da .ss-box, que
   recorta sozinha porque tem overflow-y:auto.
   Dois problemas caiam juntos com isso: o "cortado" (a coroa em top/right
   negativos era fatiada pelo overflow:hidden e o brilho terminava numa reta) e
   o "quadradao" (so a base tinha degrade; topo e laterais morriam em aresta viva
   contra o fundo).
   As margens negativas TEM que bater com o padding da .ss-box — 24px em cima,
   20px nas laterais, e 28px nas laterais no PC. Se um dos dois mudar sem o
   outro, sobra uma fresta do fundo escuro na lateral. */
.ss-vhead{position:relative;isolation:isolate;overflow:hidden;border-radius:0;
  margin:-24px calc(-1 * var(--bleed)) 10px;
  padding:104px var(--bleed) 14px;min-height:118px}
.ss-vhead::before{content:"";position:absolute;inset:0;z-index:0;
  background:url("../img/ui/vip-top-bg.webp") top center/cover no-repeat}
/* O degrade estava em z-index:0, ou seja ABAIXO da coroa (z-index:1): ele
   dissolvia o papel de parede e a coroa passava por cima intacta, entao quem
   cortava ela era o overflow:hidden — e o corte era aquela reta horizontal seca
   no fim do bloco. Subindo o degrade pra cima de tudo, a coroa e o fundo somem
   JUNTOS dentro da folha, sem aresta.
   O primeiro trecho fica transparente pra nao lavar o brilho da coroa no topo;
   a partir da metade ele fecha ate a cor da folha. */
.ss-vhead::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(18,18,18,0) 0%, rgba(18,18,18,.06) 34%, rgba(18,18,18,.42) 66%,
    rgba(18,18,18,.82) 87%, var(--card) 100%)}
/* A coroa nao e mais CORTADA na borda: ela se DISSOLVE antes de chegar la. Sem
   a mascara o brilho terminava numa reta diagonal, que e o corte que aparecia
   no canto superior direito. */
.ss-vcrown{position:absolute;top:-12px;right:-12px;width:min(94%,320px);height:auto;z-index:1;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom left,transparent 4%,#000 46%);
          mask-image:linear-gradient(to bottom left,transparent 4%,#000 46%)}
/* o papel de parede tambem desbota nas pontas, senao o canto superior esquerdo
   continua sendo um retangulo com risco diagonal comecando do nada */
.ss-vhead::before{
  -webkit-mask-image:radial-gradient(135% 125% at 72% 4%,#000 46%,transparent 100%);
          mask-image:radial-gradient(135% 125% at 72% 4%,#000 46%,transparent 100%)}
/* ── ÂNCORA DE MARCA ─────────────────────────────────────────────────────────
   O modal nao tinha NADA do AmoDramas: nem logo, nem a tipografia, nem um
   respingo de rosa. Quem toca em "Ver planos" caia numa tela dourada com cara de
   outro produto — e tela de pagamento parecendo de outro produto e desconfianca
   no exato passo em que ela vai digitar o cartao.
   Canto de cima, altura de assinatura (22px), com uma sombra curta pra sustentar
   sobre a parte clara da arte. Discreto de proposito: e assinatura, nao anuncio. */
.ss-vlogo{position:absolute;top:18px;left:var(--bleed,20px);z-index:3;
  height:40px;width:auto;object-fit:contain;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.8))}
/* O rosa da marca entra por AQUI — o coracao do proprio logo. A 22px ele era um
   ponto e nao se lia; a 40px a marca aparece de verdade, e o rosa vem junto sem
   precisar pintar nenhum componente da interface. */
/* Nos passos de pagamento o cabecalho vira uma tarja: la o logo troca de lugar
   com o nome. E no checkout que a ancora de marca vale mais — e "Bem-vindo(a)"
   naquela altura nao informa nada. */
.ss-box:has(.ss-step[data-step="pay"]:not([hidden])) .ss-vlogo,
.ss-box:has(.ss-step[data-step="pix"]:not([hidden])) .ss-vlogo,
.ss-box:has(.ss-step[data-step="pending"]:not([hidden])) .ss-vlogo{
  /* CENTRALIZADO e maior no checkout. No passo dos planos o logo e assinatura
     de canto — la a arte e a coroa mandam. Aqui o cabecalho virou uma tarja e o
     logo e o UNICO elemento de marca que sobrou na tela onde ela vai digitar o
     cartao: centralizado e maior, ele vira o cabecalho, e nao um detalhe do
     canto. margin auto nas laterais e o que centraliza um <img> em bloco. */
  position:static;height:44px;display:block;margin:0 auto}
/* Nos passos de pagamento o cabecalho e' so o logo: nem o nome da cliente nem a
   PROMESSA. A promessa vende no passo dos planos; no checkout ela ja decidiu, e
   "Nunca mais fique sem saber o final da historia" ali em cima do formulario e'
   argumento repetido ocupando a tela onde ela precisa digitar. */
.ss-box:has(.ss-step[data-step="pay"]:not([hidden])) .ss-vname,
.ss-box:has(.ss-step[data-step="pix"]:not([hidden])) .ss-vname,
.ss-box:has(.ss-step[data-step="pending"]:not([hidden])) .ss-vname,
.ss-box:has(.ss-step[data-step="pay"]:not([hidden])) .ss-vhead-t,
.ss-box:has(.ss-step[data-step="pix"]:not([hidden])) .ss-vhead-t,
.ss-box:has(.ss-step[data-step="pending"]:not([hidden])) .ss-vhead-t{display:none}

/* a /assinar e tela cheia (sem navbar), entao o logo dela mora no proprio topo */
.vipx-head{position:relative}
.vipx-head .ss-vlogo{top:0;left:0}

/* A PROMESSA no lugar da identificação. Duas linhas: o argumento e o que ele
   entrega. max-width pra não passar por baixo da coroa nem do X. */
.ss-vhead-t{position:relative;z-index:3;font-family:'Poppins',sans-serif;
  font-size:21px;font-weight:800;line-height:1.2;letter-spacing:-.02em;margin:0;
  max-width:min(80%,300px);color:#fff;text-wrap:balance}
/* .ss-vhead-s saiu: o apoio mudou de lugar (ver .vipx-inc-s) */
/* mantidas: o passo de PIX/pronto ainda usa .ss-vname em alguns estados */
.ss-vname{position:relative;z-index:3;font-family:'Poppins',sans-serif;font-size:22px;font-weight:800;margin:0;
  max-width:72%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff}
.ss-vstatus{position:relative;z-index:3;color:rgba(255,255,255,.72);font-size:13px;margin:5px 0 0}
/* ── o cabeçalho VIP encolhe a partir do passo de pagamento ──────────────────
   Ele vende no passo dos planos. Depois disso são 134px dizendo "Você ainda não
   é membro" bem na hora em que ela está tentando deixar de não ser — e num
   iPhone SE com o teclado aberto sobram ~350px: o botão dourado nunca aparece
   junto com os campos. Onde :has() não existir, fica como está hoje. */
.ss-box:has(.ss-step[data-step="pay"]:not([hidden])) .ss-vhead,
.ss-box:has(.ss-step[data-step="pix"]:not([hidden])) .ss-vhead,
.ss-box:has(.ss-step[data-step="pending"]:not([hidden])) .ss-vhead{
  /* mesma sangria do cheio: senao o encolhido vira um retangulo baixinho */
  padding:14px var(--bleed);min-height:0;margin:-24px calc(-1 * var(--bleed)) 12px}
.ss-box:has(.ss-step[data-step="pay"]:not([hidden])) .ss-vcrown,
.ss-box:has(.ss-step[data-step="pix"]:not([hidden])) .ss-vcrown,
.ss-box:has(.ss-step[data-step="pending"]:not([hidden])) .ss-vcrown,
.ss-box:has(.ss-step[data-step="pay"]:not([hidden])) .ss-vstatus,
.ss-box:has(.ss-step[data-step="pix"]:not([hidden])) .ss-vstatus,
.ss-box:has(.ss-step[data-step="pending"]:not([hidden])) .ss-vstatus{display:none}
/* max-width:100% apagava a reserva de 72% que existe pro canto do .ss-x: em
   360px o nome corria ate x=340 com ellipsis e o circulo do X ocupa 316..348 —
   as ultimas letras passavam POR BAIXO dele. */
.ss-box:has(.ss-step[data-step="pay"]:not([hidden])) .ss-vname,
.ss-box:has(.ss-step[data-step="pix"]:not([hidden])) .ss-vname,
.ss-box:has(.ss-step[data-step="pending"]:not([hidden])) .ss-vname{
  font-size:16px;max-width:calc(100% - 52px)}
/* Tela baixa: no passo de pagar a coroa e enfeite e custa ~90px. Num iPhone SE
   com o teclado aberto ela nao pode gastar um terco da tela com "Voce ainda nao
   e membro" bem na hora em que esta tentando deixar de nao ser. */
@media(max-height:700px){
  .ss-box:has(.ss-step[data-step="pay"]:not([hidden])) .ss-vhead{display:none}
}

/* ── TELA BAIXA, PASSO DOS PLANOS ────────────────────────────────────────────
   ISTO JA FOI MUITO MAIOR. Quando os cinco beneficios ficavam ENTRE o cabecalho
   e os precos, eles comiam ~230px e o cartao Mensal comecava em y=695 numa tela
   de 640 — zero pixel dele aparecia. Pra recuperar esses pixels eu tinha
   encolhido tudo: coroa, titulo, apoio, lista de beneficios e os proprios
   cartoes.
   Com os beneficios agora DEPOIS do botao, o problema deixou de existir: a
   dobra passou a ter so cabecalho + cartoes + barra, que cabem inteiros. Toda
   aquela compactacao virou aperto sem motivo, e foi removida — o que sobrou e o
   cabecalho um pouco menor, que ainda ajuda em tela curta e nao custa leitura. */
@media(max-height:720px){
  .ss-box:has(.ss-step[data-step="plans"]:not([hidden])) .ss-vhead{
    padding-top:72px;padding-bottom:14px;min-height:0}
  .ss-box:has(.ss-step[data-step="plans"]:not([hidden])) .ss-vcrown{width:min(78%,258px)}
  .ss-vhead-t{font-size:19px}
  .ss-vlogo{height:34px;top:15px}
  .ss-planbar{padding-top:10px}
  .ss-planbar .vipx-cta{padding:14px}
}
/* dentro do overlay, os planos empilham (não rolam) pra caber melhor */
/* na folha os cartoes ja nascem empilhados; so o respiro muda */
.ss-box .vipx-plans{gap:9px;margin-bottom:6px}   /* + 4px do padding + 10 da barra = 20 ate o botao */
/* o bloco de beneficios entra mais compacto aqui: a folha e um overlay com
   altura limitada, e o topo dela ja gastou espaco com a coroa */
/* os dois blocos de beneficio vem depois do botao; o de cima ja se separa dele,
   e este so precisa nao encostar no anterior */
.ss-box .vipx-inc{margin:22px 0 16px}
.ss-box .vipx-inc-l{gap:8px}
/* no overlay, botão/pagamento ocupam a largura toda (a coluna de 560 é só da /assinar) */
.ss-box .vipx-cta,.ss-box .vipx-pays{max-width:none;margin-left:0;margin-right:0}


/* ─────────────── parede da amostra: o formulario dentro da parede ───────────────
   Escopado em .vp-wall/.feed-wall porque .field e .input sao usadas no admin e no
   perfil inteiros. Nada aqui muda cor, raio, sombra ou tipografia — o "design
   atual" continua sendo o design. */
.vp-wall .wall-form,.feed-wall .wall-form{width:100%;max-width:300px;text-align:left}
.vp-wall .field,.feed-wall .field{margin-bottom:10px}
.vp-wall .alert,.feed-wall .alert{width:100%;max-width:300px;margin-bottom:0;text-align:left}
/* 16px NAO e capricho: abaixo disso o Safari do iPhone da zoom ao focar e joga o
   overlay (position:absolute) pra fora da tela — mesmo motivo comentado em
   .modal-auth .input (linha 245). */
.vp-wall .input,.feed-wall .input{font-size:16px}
.vp-wall .input:focus,.feed-wall .input:focus{outline:2px solid var(--primary);outline-offset:1px}
.vp-wall .input.err,.feed-wall .input.err{border-color:#ff6b6b}
.vp-wall .btn[aria-busy="true"],.feed-wall .btn[aria-busy="true"]{opacity:.65;pointer-events:none}
.vp-wall .field[data-fld]:not([hidden]),.feed-wall .field[data-fld]:not([hidden]){animation:fieldIn .22s var(--ease) both}
@media(prefers-reduced-motion:reduce){
  .vp-wall .field[data-fld]:not([hidden]),.feed-wall .field[data-fld]:not([hidden]){animation:none}
}
.wall-micro,.wall-legal{max-width:300px;margin:0;font-size:11px;color:var(--muted2);line-height:1.45}
.wall-legal a{color:inherit;text-decoration:underline}
/* Teclado aberto no iPhone SE: o estado A mede 436px de conteudo e sobram ~260px.
   O `safe` impede o classico do flexbox — justify-content:center CORTA o topo
   quando o conteudo estoura, e a caixa fica sem titulo e sem rolagem pra cima.
   Navegador que nao entende `safe` ignora a linha e mantem o center de hoje. */
.vp-wall,.feed-wall{overflow-y:auto;overscroll-behavior:contain;justify-content:safe center}
.vp-wall::-webkit-scrollbar,.feed-wall::-webkit-scrollbar{display:none}

/* Enquanto a parede esta de pe, some o que fica ABAIXO dela no empilhamento e
   aparece pelo veu (que tem so 75% no topo). Medido: .vp-mute cai em y=261,8..306,2
   e o input do e-mail em y=256,2..306,2 (320x568) — a pilula rosa "Toque para ativar
   o som" fica exatamente em cima do rotulo E-mail. Nao sao controles perdidos: a
   parede ja bloqueava o clique deles. O .vp-top (z20) e o .feed-back (z20) FICAM —
   sao a saida. */
.vplayer.is-walled .vp-mute,.vplayer.is-walled .vp-progwrap,
.vplayer.is-walled .vp-side,.vplayer.is-walled .vp-info,
.vplayer.is-walled .vp-skip,.vplayer.is-walled .vp-playbtn{display:none}
/* ...e o ocioso NÃO pode recolher o .vp-top enquanto a parede está de pé. MEDIDO:
   quem está parada digitando o e-mail é justamente quem não toca em nada, então
   1,5s depois entrava .vp-idle, o topo ia a opacity 0 / visibility hidden e o
   elementFromPoint no centro da seta devolvia div.vp-wall — a única saída morria. */
.vplayer.is-walled.vp-idle .vp-top{opacity:1;visibility:visible;pointer-events:auto}
/* CRITICO pego na verificacao final: com o painel embaixo do video a PAGINA passa a
   rolar, e o #paywall e absolute dentro do palco. Quem rolou pra ler a sinopse batia
   nos 40% e a parede aparecia ACIMA do campo de visao — invisivel. showPaywall() nao
   rola a tela (e nao pode: player.js esta na regra de ouro). Prender o palco enquanto
   a parede esta de pe resolve sem encostar em JS. */
@media(max-width:1023px){.vplayer.is-walled .vp-stage{position:sticky;top:0}}
.feed-slide.is-walled .feed-muted,.feed-slide.is-walled .feed-side,
.feed-slide.is-walled .feed-info,.feed-slide.is-walled .feed-prog{display:none}
/* Com o painel FORA do video, a parede cobre so o palco — e o painel, com a faixa VIP
   e o preco, fica de pe embaixo dela. Que e exatamente a hora em que a pessoa esta
   decidindo. As linhas acima escondiam .vp-info/.vp-side porque ali eles ficavam
   DEBAIXO da parede, sobrepostos ao video; agora nao ficam mais. PRECISA vir depois
   delas: mesma especificidade, ganha quem vem por ultimo. MEDIDO com is-walled de pe:
   faixa VIP visivel em 320/390/820/844x390/1024/1280 e elementFromPoint no botao do
   plano devolvendo o proprio link. */
.vplayer.is-walled .vp-info,.vplayer.is-walled .vp-side{display:flex}

/* ─────────────── faixa sem JavaScript ───────────────
   MEDIDO: no mobile .vp-rail e display:contents (linha 1612), entao uma faixa
   ESTATICA ali herda z-index auto e fica debaixo do #video (z1) e do .vp-tap (z5) —
   invisivel, elementFromPoint devolve o .vp-tap. Por isso ela e absolute com
   z-index 18 ate 1023px, voltando pro fluxo do trilho no PC.
   <details> e HTML puro: abre e fecha sem uma linha de JS. Fechado ocupa 53px —
   avisa sem roubar a amostra e sem cobrir a sinopse. */
.wall-nojs{position:absolute;left:12px;right:12px;bottom:calc(14px + env(safe-area-inset-bottom));
  z-index:18;max-height:64dvh;overflow-y:auto;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius-lg);text-align:left}
.wall-nojs>summary{list-style:none;cursor:pointer;padding:12px 16px;font-size:13px;font-weight:700;
  display:flex;align-items:center;justify-content:space-between;gap:10px}
.wall-nojs>summary::-webkit-details-marker{display:none}
.wall-nojs>summary::after{content:"+";font-size:18px;font-weight:700;color:var(--muted)}
.wall-nojs[open]>summary::after{content:"\2212"}
.wall-nojs-body{padding:0 16px 16px}
.wall-nojs-body p{font-size:12.5px;color:var(--muted);line-height:1.5;margin-bottom:12px}
.wall-nojs .input{font-size:16px}
@media(min-width:1024px){.wall-nojs{position:static;max-height:none;bottom:auto}}

/* ── parede: estado "logada e sem plano" ──────────────────────────────────
   Antes era so titulo + botao: uma confirmacao vazia justo no momento de
   decidir. Os beneficios e o preco dao conteudo pra decisao sem tirar o
   destaque do CTA — nenhuma cor, raio ou tipografia nova. */
.wall-sell{display:flex;flex-direction:column;gap:12px;align-items:center;width:100%;max-width:300px}
.wall-benes{display:flex;flex-direction:column;gap:8px;width:100%;margin:0;padding:0;list-style:none;text-align:left}
.wall-benes li{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--txt);line-height:1.35}
.wall-benes .msym{flex:none;color:var(--primary);font-size:16px}
.wall-price{margin:0;font-size:12.5px;font-weight:700;color:var(--premium)}
.wall-sell:not([hidden]){animation:fieldIn .24s var(--ease) both}
@media(prefers-reduced-motion:reduce){.wall-sell:not([hidden]){animation:none}}

/* ---------- aviso flutuante curto (toast) ----------
   Nasceu pro episódio que a ReelShort ainda não liberou: a assinante toca, e em
   vez de tabela de preço (ela já pagou) ou de "erro ao reproduzir" (não é erro
   dela), recebe uma linha de texto que some sozinha. Não tem botão de propósito
   — é recado, não decisão. Fica ACIMA do player em tela cheia, senão no celular
   ele apareceria atrás do vídeo, que é onde a pessoa está olhando. */
.toast{
  position:fixed; left:50%; bottom:calc(22px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  z-index:2147483000;
  max-width:min(90vw,420px);
  padding:11px 16px;
  border-radius:var(--radius-lg);
  background:rgba(24,24,24,.96);
  border:1px solid var(--line2);
  box-shadow:0 8px 28px rgba(0,0,0,.55);
  color:var(--txt); font-size:13.5px; line-height:1.35; text-align:center;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  animation:toastIn .22s var(--ease) both;
  pointer-events:none;
}
.toast[hidden]{display:none}
/* ── AVISO DO FLASH (entrou / saiu / erro) ───────────────────────────────────
   REAPROVEITA o .toast que ja existe no site (o mesmo que o app-episodes.js
   usa) — a primeira versao disto criou um segundo .toast e um segundo
   @keyframes toastIn com o mesmo nome, e o de baixo no arquivo vencia: o aviso
   ficava com a duracao e a posicao do OUTRO componente e nunca sumia.
   Aqui so entra o que e diferente: o fio de cor por tipo e o desaparecer
   sozinho. Substitui a faixa .alert que empurrava a pagina inteira pra baixo
   ("a coluna verde") — este nao ocupa espaco nenhum no fluxo.
   Some por animacao, sem JS: o aviso e impresso pelo servidor, entao funciona
   igual com o JavaScript desligado. */
.flashtoast{
  bottom:calc(64px + env(safe-area-inset-bottom) + 14px);   /* acima da menubar */
  font-weight:600;
  animation:toastIn .22s var(--ease) both, flashOut .32s ease 3.4s forwards;
}
@media(min-width:768px){   /* no PC nao ha menubar */
  .flashtoast{bottom:calc(22px + env(safe-area-inset-bottom))}
}
/* SEM COR NENHUMA no aviso comum: cinza, e so. O fio verde/rosa que existia
   aqui era o ultimo residuo da "coluna verde" — pra dizer "voce saiu da conta"
   nao e' preciso pintar nada. So o ERRO merece cor, porque ai a cor e' a
   informacao, nao enfeite. */
.flashtoast-err{box-shadow:0 8px 28px rgba(0,0,0,.55), inset 3px 0 0 #ff6b6b}
@keyframes flashOut{to{opacity:0;transform:translate(-50%,8px);visibility:hidden}}
@media(prefers-reduced-motion:reduce){
  .flashtoast{animation:flashOut .01s linear 3.4s forwards}
}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
@media(prefers-reduced-motion:reduce){.toast{animation:none}}

/* ---------- "Meus pedidos" no perfil ---------- */
.prof-sug-lead{font-size:12.5px;color:var(--muted);margin:10px 0 8px}
.prof-sug-fila{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.prof-sug-fila li{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 13px;border-radius:10px;background:var(--card2);border:1px solid var(--line)}
.prof-sug-fila span{font-size:13px;color:var(--txt);line-height:1.3}
.prof-sug-fila em{flex:none;font-style:normal;font-size:11px;font-weight:600;color:var(--muted2);
  text-transform:uppercase;letter-spacing:.4px}

/* ---------- comentários do player ----------
   Mesma folha do compartilhar; o que muda é o conteúdo. Altura limitada com
   rolagem própria: a conversa não pode empurrar o campo de escrever pra fora da
   tela do celular, que é onde a pessoa está. */
.sheet-h{display:flex;align-items:baseline;gap:8px;margin:0 0 12px}
.com-n{font-size:13px;font-weight:600;color:var(--muted)}
.com-list{max-height:46vh;overflow-y:auto;display:flex;flex-direction:column;gap:12px;
  margin-bottom:12px;-webkit-overflow-scrolling:touch}
.com-item{display:flex;gap:10px;align-items:flex-start}
.com-av{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:var(--card2);border:1px solid var(--line);font-size:13px;font-weight:700;color:var(--primary)}
.com-body{flex:1;min-width:0}
.com-au{font-size:13px;font-weight:600;color:var(--txt)}
.com-t{font-size:11px;color:var(--muted2);margin-left:7px}
.com-tx{margin:3px 0 0;font-size:13.5px;line-height:1.45;color:var(--txt);
  overflow-wrap:anywhere}
.com-form{display:flex;gap:8px;align-items:center}
.com-form .input{flex:1}
.com-erro{color:var(--red);margin:8px 0 0}

/* ---------- barra lateral some junto com a timeline ----------
   Pedido do dono: quando os controles recolhem, os botões da direita recolhem
   também. Faz sentido de UX — a coluna de seis ícones é o que mais tapa o vídeo
   num celular, e quem está assistindo quer a cena, não a interface.

   SÓ ABAIXO DE 1024. No PC o .vp-side não fica sobre o vídeo: ele mora no
   trilho da direita (position:static), e some-lo esvaziaria a coluna sem motivo
   — tanto que o próprio bloco de 1024 já mantém ele visível no ocioso. Estas
   regras entram no fim do arquivo, então sem o media query elas venceriam
   aquela exceção e quebrariam o desktop. */
@media (max-width: 1023px) {
  .vp-side{transition:opacity .28s ease,visibility .28s ease,transform .28s ease}
  .vplayer.vp-idle .vp-side{opacity:0;visibility:hidden;pointer-events:none;transform:translateX(8px)}

  /* Degradê atrás da coluna: dá contraste pro ícone branco em cena clara sem
     desenhar caixa nenhuma. Sai de cena junto com os botões.

     AS QUATRO BORDAS PRECISAM MORRER EM NADA. A primeira versão era só um
     gradiente horizontal dentro de um retângulo: a esquerda desmanchava, mas o
     topo e a base cortavam reto e apareciam como uma faixa mais clara colada na
     coluna — foi o "corte" que o dono viu na tela.
     A máscara vertical resolve o que o gradiente não alcança: ela apaga o
     próprio elemento nas pontas, então não existe mais aresta pra enxergar.
     Sobra bem além dos botões (-70px) pra que o desmanche aconteça fora da área
     onde o olho está. */
  /* ATENCAO AO INSET DA DIREITA. Ele era -40px, e a coluna fica a 8px da borda:
     sobravam 32px de caixa PRA FORA DA TELA. O navegador nao corta isso — ele
     ESTICA a viewport (medido: 390 virava 429), e a pagina inteira passava a
     rolar de lado, com a faixa escura do degrade aparecendo solta na direita.
     Foi assim que o dono viu, e o meu proprio teste nao pegou porque eu comparava
     a largura da pagina com innerWidth, que ja vinha esticado — 429 = 429, "ok".
     -8px encosta exatamente na borda: a ponta escura do degrade morre no fim da
     tela, que e onde ela ja ia sumir de qualquer jeito. */
  .vp-side::before{
    content:"";position:absolute;inset:-70px -8px -70px -78px;z-index:-1;pointer-events:none;
    background:linear-gradient(to left,
      rgba(0,0,0,.58) 0%,
      rgba(0,0,0,.42) 26%,
      rgba(0,0,0,.20) 58%,
      rgba(0,0,0,0)   100%);
    /* MEDIDO: a coluna tem 362px e o degradê 502px (os -70px de sobra em cima e
       embaixo), então os botões começam a 14% e terminam a 86% da altura dele.
       Com o desmanche indo até 22% o PRIMEIRO e o ÚLTIMO botão caíam dentro da
       zona que apaga e ficavam sem fundo — justamente o "Curtir" e o "Tela
       cheia". Parar em 12% / 88% deixa a parte cheia cobrindo os seis e ainda
       sobra folga pra dissolver fora do alcance do olho. */
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 88%,transparent 100%);
            mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 88%,transparent 100%);
    opacity:1;transition:opacity .28s ease;
  }
  .vplayer.vp-idle .vp-side::before{opacity:0}

  /* Tela cheia por último. A folga separa "ações" de "modo de ver", mas 14px em
     cima do gap de 12 dava 26 — o dobro do resto, e o botão parecia solto do
     grupo. 5px chega a 17: dá pra perceber a divisão sem descolar. */
  .vp-side .vp-fs{margin-top:5px}
}

/* curtido: o número acompanha o coração */
/* is-fav (nao mais is-on): o coracao passou a ser o proprio botao de salvar, e
   quem marca o estado ligado e a classe do favorito. */
.vp-act.is-fav .vp-act-n{color:var(--primary)}

/* ---------- tutorial da TV ---------- */
.cast-lead{font-size:13.5px;color:var(--muted);margin:0 0 14px;line-height:1.45}
.cast-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.cast-steps li{display:flex;gap:12px;align-items:flex-start}
.cast-num{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--primary);color:var(--primary-ink);font-size:12.5px;font-weight:700}
.cast-steps b{display:block;font-size:13.5px;color:var(--txt);margin-bottom:2px}
.cast-steps em{font-style:normal;font-size:12.5px;color:var(--muted);line-height:1.45}
.cast-foot{margin:16px 0 0;font-size:12px;color:var(--muted2);text-align:center}

/* ---------- título ao lado da seta de voltar ----------
   Discreto de propósito: o protagonista é o vídeo. Duas linhas no máximo, com
   corte por reticências — título de dorama passa de 60 caracteres com
   frequência e não pode empurrar nada. Some junto com o resto da interface,
   pelas regras de .vp-top que já existem. */
.vp-head{display:flex;flex-direction:column;justify-content:center;min-width:0;flex:1;
  margin-left:2px;padding-right:12px;pointer-events:none}
.vp-head-t{font-size:15px;font-weight:700;color:#fff;line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-shadow:0 1px 6px rgba(0,0,0,.55)}
.vp-head-s{font-size:11.5px;font-weight:500;color:rgba(255,255,255,.72);line-height:1.3;margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-shadow:0 1px 5px rgba(0,0,0,.5)}
@media (min-width:1024px){ .vp-head{display:none} }   /* no PC o título já está no trilho */

/* ---------- relatar problema ----------
   Botão de saída de emergência: existe, mas não disputa atenção com nada. Sem
   fundo, texto pequeno, cor apagada — quem não está com problema não vê. */
.vp-report{display:inline-flex;align-items:center;gap:6px;margin:4px 0 2px;padding:8px 0;
  background:none;border:0;cursor:pointer;font-size:12.5px;color:var(--muted2);
  transition:color .15s}
.vp-report:hover{color:var(--muted)}
.vp-report .msym{font-size:15px}
.rep-lead{font-size:13px;color:var(--muted);margin:0 0 14px;line-height:1.45}
.rep-tipos{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.rep-tipo{padding:9px 13px;border-radius:999px;cursor:pointer;font-size:12.5px;
  background:var(--card2);border:1px solid var(--line);color:var(--txt);transition:.15s}
.rep-tipo:hover{border-color:var(--line2)}
.rep-tipo.on{background:var(--primary);border-color:var(--primary);color:var(--primary-ink);font-weight:600}
.rep-detalhe{width:100%;resize:vertical;font-size:13px}
.rep-ok{margin:12px 0 0;text-align:center;font-size:13.5px;color:var(--green);font-weight:600}

/* ═══════════════════════════════════════════════════════════════════════════
   BARRA DE BAIXO FLUTUANTE + MENU DE CONTA NO TOPO
   ═══════════════════════════════════════════════════════════════════════════
   Entra no FIM do arquivo de proposito: sobrescreve o bloco de ~1013 e o de
   ~1330 sem precisar caçar e reescrever aquelas regras (que continuam sendo a
   base — cores, pilula do ativo, rotulo). */
@media(max-width:767px){
  /* Descolada das bordas: a barra vira um objeto sobre a pagina, nao uma
     tarja colada no fim dela. É o que faz parecer app e nao site. */
  .tabbar{
    left:10px;right:10px;
    bottom:calc(10px + env(safe-area-inset-bottom));
    padding-bottom:0;
    border:1px solid rgba(255,255,255,.09);
    border-radius:26px;
    /* .82 e nao .72: com o vidro mais fino, o texto das capas que passam por
       tras ("EM BREVE") competia com os rotulos da propria barra. */
    background:rgba(14,14,18,.82);
    -webkit-backdrop-filter:blur(22px) saturate(1.7);backdrop-filter:blur(22px) saturate(1.7);
    box-shadow:0 18px 40px -14px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.35),
               inset 0 1px 0 rgba(255,255,255,.07);
  }
  /* o corpo precisa render o quanto a barra subiu, senao o ultimo card fica
     por baixo dela */
  body{padding-bottom:calc(var(--tab-h) + 26px + env(safe-area-inset-bottom))}
  .tabbar-in{height:62px;padding:7px 4px 5px;align-items:center;justify-content:space-between}
  .tabbar a{justify-content:center}
  .tabbar a .ico-wrap{width:52px;height:30px}

  /* ── item central: Indique e Ganhe ──────────────────────────────────────
     Cresce mais que os vizinhos e ganha um halo rosa fraco. O ponto e ser
     achado sem gritar: nada de fundo solido nem de botao flutuante gigante,
     que roubariam a atencao de quem so quer assistir. */
  .tabbar a.tb-ganhe{flex:1.25;color:var(--primary)}
  /* `a.tb-ganhe` e nao so `.tb-ganhe`: a regra generica `.tabbar a .ico-wrap`
     tem um seletor de TIPO no meio e por isso vence uma feita so de classes.
     Resultado: o wrap continuava 52x30 com um presente de 32px dentro e
     `overflow:hidden` — o presente saia CORTADO na base. */
  .tabbar a.tb-ganhe .ico-wrap{
    width:58px;height:42px;margin-top:-6px;border-radius:16px;
    background:radial-gradient(60% 70% at 50% 45%,rgba(255,117,168,.26),transparent 72%);
    overflow:hidden
  }
  .tb-ganhe .ico-wrap::before{display:none}   /* o halo substitui a pilula do ativo */
  /* 30px numa caixa de 42: sobra folga em cima e embaixo pra nenhuma sombra ou
     borda do desenho encostar na aresta que corta o brilho. */
  .tb-gift{width:30px;height:30px;object-fit:contain;
    filter:drop-shadow(0 3px 8px rgba(255,117,168,.55))}
  .tb-ganhe span:last-child{font-weight:800;font-size:10.5px;color:var(--primary)}
  .tb-ganhe:active .ico-wrap{transform:scale(.9)}

  /* BRILHO SO NO PRESENTE.
     Antes o .tb-shine ocupava a caixa inteira (58x42) e a faixa de luz varria o
     halo e o vazio dos lados junto — parecia um retangulo claro passando pela
     barra, nao um reflexo no laco do presente.
     Agora ele tem o TAMANHO DO DESENHO (30x30, centralizado no mesmo ponto) e a
     luz e recortada pela silhueta do proprio presente com mask-image: o que
     brilha e so o que esta pintado no PNG.
     Varre rapido e depois fica parado ~2,5s — brilho continuo vira ruido de
     fundo e a pessoa para de ver. */
  .tb-shine{
    position:absolute;top:50%;left:50%;width:30px;height:30px;
    transform:translate(-50%,-50%);pointer-events:none;overflow:hidden;
    /* caminho relativo ao proprio .css: nao depende de style inline (CSP) nem
       de o PHP passar a URL */
    -webkit-mask-image:url("../img/ui/gift.webp");mask-image:url("../img/ui/gift.webp");
    -webkit-mask-size:contain;mask-size:contain;
    -webkit-mask-position:center;mask-position:center;
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat
  }
  .tb-shine::after{
    content:"";position:absolute;top:-60%;left:-90%;width:55%;height:220%;
    transform:rotate(18deg);
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);
    animation:tbShine 3.6s ease-in-out infinite
  }
  @keyframes tbShine{0%,68%{left:-90%}100%{left:150%}}

  /* Quem pede menos animacao no sistema nao ganha brilho nenhum — o item
     continua maior e rosa, que ja e o destaque. */
  @media (prefers-reduced-motion:reduce){
    .tb-shine::after{animation:none;opacity:0}
  }
}

/* ── menu de conta do topo (agora tambem no celular) ────────────────────── */
.drop-conta > summary{gap:3px;padding:0 6px 0 4px}
.drop-conta .avatar{width:30px;height:30px}
/* No celular a seta so ocupa espaco ao lado do avatar, que ja diz "sou eu".
   `> summary > .msym` e nao `summary .msym:last-child`: o icone DENTRO do
   .avatar tambem e um .msym e tambem e ultimo filho do pai dele — a regra
   frouxa apagava o bonequinho e sobrava um circulo vazio no topo. */
@media(max-width:767px){
  .drop-conta > summary > .msym{display:none}
  .drop-menu{min-width:236px}
}

/* "Minha conta" e um CARTAO, nao mais um item de lista: e o destino mais
   pedido do menu e serve de confirmacao de qual conta esta logada. */
.drop-conta-card{
  display:flex;align-items:center;gap:10px;padding:10px 11px;margin-bottom:6px;
  border-radius:12px;background:linear-gradient(135deg,rgba(255,117,168,.16),rgba(255,117,168,.05));
  border:1px solid rgba(255,117,168,.24);color:var(--txt)!important
}
.drop-conta-card:hover{background:linear-gradient(135deg,rgba(255,117,168,.24),rgba(255,117,168,.09))}
.drop-conta-card .avatar{width:34px;height:34px;flex:0 0 auto}
.drop-conta-card .dc-txt{display:flex;flex-direction:column;min-width:0;flex:1}
.drop-conta-card .dc-txt b{font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drop-conta-card .dc-txt span{font-size:10.5px;color:var(--muted2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drop-conta-card .msym:last-child{margin-left:auto;color:var(--primary);opacity:.8}
/* Indique e Ganhe tambem se destaca aqui, na mesma cor da aba do menubar */
.drop-menu a.drop-ganhe{color:var(--primary);font-weight:600}

/* ── "Em breve": botao de salvar dentro da propria caixa ──────────────────
   O coracao da coluna lateral continua funcionando, mas ali nao serve: a tela
   nao esta tocando nada, entao a cliente nao tem motivo pra olhar pro lado.
   Este e o unico gesto util da tela e precisa estar no caminho dos olhos. */
.soon-fav{margin-top:6px}
.soon-fav .btn{display:inline-flex;align-items:center;gap:8px;padding:0 20px;height:42px}
/* Salvo: sai do rosa cheio e vira contorno — a acao ja foi feita, e continuar
   gritando faria a pessoa achar que nao pegou. */
.soon-fav .fav-btn.is-fav{
  background:transparent;border:1px solid rgba(255,117,168,.5);color:var(--primary)
}
.soon-fav .fav-btn.is-fav .msym{color:var(--primary)}

/* ── bolinha de novidade (estilo WhatsApp) ────────────────────────────────
   Vermelho e nao rosa da marca: a barra inteira ja e rosa, e um selo cor de
   marca em cima de fundo cor de marca deixa de ser selo. Aqui ele precisa
   gritar "tem coisa nova", nao combinar. */
.dot-novo{
  position:absolute;top:-3px;right:6px;z-index:3;
  min-width:16px;height:16px;padding:0 4px;border-radius:999px;
  background:#ff3b30;color:#fff;font-size:9.5px;font-weight:800;line-height:16px;
  text-align:center;letter-spacing:0;
  border:2px solid #101014;   /* recorte escuro: separa do icone atras */
  box-shadow:0 2px 8px -2px rgba(255,59,48,.8);
  animation:dotPulse 2.4s ease-in-out infinite
}
/* No avatar do topo e so um ponto — nao ha espaco pra numero num circulo de 30px */
.dot-mini{min-width:9px;width:9px;height:9px;padding:0;top:-1px;right:-1px;font-size:0;border-width:2px}
@keyframes dotPulse{0%,70%,100%{transform:scale(1)}80%{transform:scale(1.18)}}
@media (prefers-reduced-motion:reduce){.dot-novo{animation:none}}
/* o .ico-wrap da barra e o .avatar do topo precisam ancorar a bolinha */
.tabbar a .ico-wrap,.drop-conta .avatar{position:relative}
/* .avatar tem overflow escondido pra recortar a foto; a bolinha fica na borda */
.drop-conta > summary .avatar{overflow:visible}

/* frase do perfil quando ela chega pela bolinha */
.prof-sug-lead.novo{color:var(--primary);font-weight:700}

/* ═══════ prova social do modal de entrada ═══════════════════════════════════
   UMA LINHA. Aqui teve numero de 28px + linha do catalogo + tres vantagens com
   icone; virou um paredao de seis linhas que a pessoa pula, e os pictogramas
   davam cara de material generico. Sobrou o numero, que e a unica prova que
   fala da MESMA acao pedida no campo logo abaixo.

   Sem regra, sem caixa, sem fundo: a hierarquia vem do peso do numero. Qualquer
   moldura aqui dentro faz o bloco ler como anuncio encaixado no modal. */
/* UM EIXO SO: tudo pela esquerda, menos a logo.
   Tentei centralizar o cabecalho inteiro pra acompanhar a logo e ficou pior —
   titulo, subtitulo e numero no centro, mas rotulo, campo e a lista de check na
   esquerda: dois eixos brigando no mesmo cartao, e o olho nao sabe onde comeca
   a linha. A logo sozinha no centro le como MARCA (tem tamanho e respiro
   proprios), nao como texto desalinhado. */
/* Centralizada porque agora e do BLOCO DA MARCA: logo + prova, os dois com o
   mesmo eixo. Dai pra baixo (titulo, subtitulo, campo, checks) tudo corre
   pela esquerda. Um eixo pra identidade, um eixo pra leitura. */
/* nowrap nas carinhas: elas tem que ficar NA MESMA LINHA do numero. Com wrap,
   os tres circulos pulavam pra cima e viravam enfeite solto em vez de sujeito
   da frase. O texto e que quebra, se precisar.
   CENTRALIZADA, mesmo com o resto a esquerda. Parece contradizer o que a gente
   fez no cabecalho, mas e outro caso: la eram titulo e subtitulo centrados com
   rotulo e campo a esquerda — dois blocos de TEXTO CORRIDO em eixos diferentes,
   e o olho se perdia. Aqui e uma peca unica, curta, sozinha entre o botao
   largura-cheia e a lista de checks; centrada ela fica com o mesmo centro do
   botao logo acima, e encostada a esquerda ficava pendurada num canto. */
.lg-social{display:flex;align-items:center;justify-content:center;gap:9px;
  margin:16px 0 2px;font-size:12.5px;color:var(--muted);line-height:1.4}
.lg-social > span:last-child{min-width:0}

/* CARINHAS EMPILHADAS. O numero sozinho e placar; tres circulos com a inicial
   de quem assina viram gente. A borda da cor do cartao e o que cria o recorte
   entre eles — sem ela viram uma mancha rosa unica.
   Matizes levemente diferentes pelo mesmo motivo: tres circulos identicos leem
   como enfeite repetido, tres parecidos leem como tres pessoas. */
.lg-faces{display:flex;flex:none}
.lg-faces span{
  width:25px;height:25px;border-radius:50%;display:grid;place-items:center;
  font-family:'Poppins',sans-serif;font-size:10.5px;font-weight:800;color:#fff;
  border:2px solid var(--card);margin-left:-9px;
  background:linear-gradient(135deg,var(--primary),var(--primary-2))
}
.lg-faces span:first-child{margin-left:0}
.lg-faces span:nth-child(2){background:linear-gradient(135deg,#c86bd6,var(--primary))}
.lg-faces span:nth-child(3){background:linear-gradient(135deg,#ff9d6b,var(--primary))}

/* VOLTAR PRO E-MAIL. Discreto de proposito: e uma saida de emergencia pra quem
   errou uma letra, nao um caminho concorrente com o botao rosa. */
/* Colado no botao (10px) porque explica o clique que acabou de acontecer; no
   fim da caixa ele chegava depois da prova social e dos checks, tarde demais
   pra tranquilizar quem hesita. */
.lg-foot{margin:10px 0 0}
.lg-foot[hidden]{display:none}
.lg-volta{margin:6px 0 0;text-align:center}
.lg-perks{margin-top:15px}
.lg-volta[hidden]{display:none}
.lg-volta a{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--muted2);
  padding:5px 10px;border-radius:999px;transition:.15s}
.lg-volta a:hover{color:var(--txt);background:rgba(255,255,255,.06)}
.lg-volta .msym{color:inherit}
/* 17px e nao 28: o titulo "Entrar" tem 20px, e numero maior que o titulo cria
   dois destaques e nenhum vence. var(--txt) e nunca var(--primary) — o rosa e
   do botao. tabular-nums pra o numero nao dancar quando muda de faixa. */
/* margin-right de 4px: o numero em 17px semibold colado num texto de 12.5px
   ficava grudado, sem a pausa que a leitura pede entre valor e rotulo.
   tabular-nums e obrigatorio por causa do contador: com largura variavel o
   texto ao lado dança a cada quadro da contagem. */
.lg-social b{font-family:'Poppins',sans-serif;font-size:17px;font-weight:800;
  color:var(--txt);letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-right:4px}

/* Linha do "aqui agora". O ponto pulsa SO nela: pulsar ao lado de numero
   historico e mentir com CSS — sugere tempo real onde nao ha. */
.lg-online{display:flex;align-items:center;justify-content:center;gap:7px;margin:7px 0 0;
  font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.lg-online i{flex:none;width:6px;height:6px;border-radius:50%;background:var(--primary);
  animation:lgPulse 2s ease-out infinite}
@keyframes lgPulse{
  0%{box-shadow:0 0 0 0 rgba(255,117,168,.55)}
  70%{box-shadow:0 0 0 7px rgba(255,117,168,0)}
  100%{box-shadow:0 0 0 0 rgba(255,117,168,0)}
}
@media (prefers-reduced-motion:reduce){.lg-online i{animation:none}}

/* O partial de icone devolve <span class="msym">, nao <svg> — a regra antiga
   (.modal-perks li svg) nunca pintou nada. Vale pro modal de planos, que e quem
   usa .modal-perks agora. */
.modal-perks li .msym{flex:none;margin-top:1px;color:var(--primary);opacity:.85}
/* No login sao frases de UMA linha: alinhar pelo centro em vez do topo, e um
   respiro maior porque aqui elas vem logo abaixo do botao rosa. */
.lg-perks{margin-top:15px;gap:9px}
.lg-perks li{align-items:center}
.lg-perks li .msym{margin-top:0}

/* Tela baixa (iPhone SE com teclado aberto): o campo de e-mail nao pode exigir
   rolagem pra ser alcancado. Some o que e reforco, fica o que e prova. */
@media (max-height:660px){
  .lg-social{margin:8px 0 12px}
  .lg-online{margin:-8px 0 12px}
}

/* titulo das secoes do passo de pagamento da folha — mesmo papel do <h2> da
   pagina /pagamento, so que menor porque aqui e overlay */
/* RITMO. Estava .ss-fieldsh{margin:14px 0 8px} contra .ss-box .field{margin-bottom:10px}
   = 1,4x. A regra que Stripe, Shopify e Material seguem e gap-de-grupo >= 2x o
   gap-de-campo; abaixo disso o olho nao enxerga grupo nenhum e a tela vira uma
   pilha de caixas iguais — e por isso que "Seus dados" e "Forma de pagamento"
   nao pareciam duas coisas diferentes.
   ALTURA: .input{padding:12px 14px;font-size:14px} com o line-height herdado da
   47px no PC e 50px no iOS (que forca 16px). Altura diferente por plataforma e a
   definicao de porco. 48px travado, line-height 1.25 pra a fonte parar de mandar
   na caixa. 16px tambem fora do iOS porque o Samsung Internet da zoom ao focar
   campo menor que isso e joga o overlay fixed pra fora da tela.
   FOCO: esta era a UNICA tela de formulario do site sem outline — justo a tela
   onde dinheiro troca de mao, com 1px de rosa a 55% que num celular ao sol nao
   se distingue da borda normal.
   PLACEHOLDER: #6b6b6b sobre #181818 = 3,4:1. E por isso que o dono jurou que o
   campo do numero estava "sem placeholder" — ele esta la desde sempre, so nao
   dava pra ver. #8a8a8a da 5,1:1 e continua bem mais fraco que o texto digitado
   (#fff), entao nao passa a impressao de campo ja preenchido. */
/* SECAO NUMERADA. Era 11.5px em cinza, do mesmo tamanho do apoio dos campos —
   nao lia como cabecalho, lia como mais uma linha de texto. Agora tem numero
   dourado num circulo e texto claro no tamanho de titulo: a cliente ve QUANTAS
   etapas existem e em qual esta, que e o que falta pra quem nunca comprou
   online. O contador e do CSS, entao nao ha numero escrito no markup pra
   dessincronizar se uma secao entrar ou sair. */
.ss-payform{counter-reset:sec}
.ss-fieldsh{counter-increment:sec;display:flex;align-items:center;gap:9px;
  font-size:15px;font-weight:800;letter-spacing:-.01em;text-transform:none;
  color:var(--txt);margin:26px 0 14px;padding-top:20px;border-top:1px solid var(--line);text-align:left}
.ss-fieldsh::before{content:counter(sec);flex:none;display:grid;place-items:center;
  width:23px;height:23px;border-radius:50%;
  font-size:12px;font-weight:800;color:var(--vip-ink);
  background:linear-gradient(135deg,var(--vip-a2),var(--vip-a3))}
/* Sem borda em cima (a primeira secao nao separa nada) mas COM folga: o titulo
   da tela subiu pro topo, entao quem fica logo acima do "1 Seus dados" agora e o
   cartao do pedido — e sem margem os dois encostavam com 4px, o cartao dourado
   colado no numero da secao. */
.ss-fieldsh:first-of-type{margin-top:20px;padding-top:0;border-top:0}
.ss-box .field{margin-bottom:14px}
.ss-box .field label{font-size:13px;font-weight:600;color:var(--txt)}
.ss-box .field .hint{font-size:12.5px;color:var(--muted);margin-top:2px}
/* Busca ao digitar do painel: enquanto a resposta nao chega, a lista atual fica
   um pouco apagada. Sem nenhum sinal, digitar parecia nao ter efeito ate a tela
   trocar de uma vez. */
.adm-filters.buscando ~ .adm-tablewrap,
.adm-filters.buscando ~ .pager{opacity:.55;transition:opacity .12s}
/* O RECADO DO CAMPO ERRADO, embaixo dele. Ate aqui o erro so aparecia na tarja
   do topo do passo: com nove campos na tela, a cliente lia "esse CPF nao
   confere" a 400px de distancia do CPF e nao ligava as duas coisas — quando
   chegava a ver, porque a tarja podia estar fora da area visivel.
   Vermelho e com um "!" redondo, no tamanho do apoio: nao e alarme, e
   instrucao — ela precisa LER o que consertar. */
.ss-box .ss-fielderr{display:flex;align-items:flex-start;gap:6px;
  font-size:12.5px;font-weight:600;line-height:1.35;color:#ff8080;margin:6px 0 0}
.ss-box .ss-fielderr[hidden]{display:none}
.ss-box .ss-fielderr::before{content:"!";flex:none;display:grid;place-items:center;
  width:15px;height:15px;margin-top:1px;border-radius:50%;
  font-size:10px;font-weight:800;color:#2a0d0d;background:#ff8080}
.ss-box .input{min-height:48px;padding:13px 14px;line-height:1.25;font-size:16px;min-width:0}
/* foco tambem dourado: dentro desta folha, rosa deixou de significar "ativo" */
.ss-box .input:focus{outline:2px solid var(--vip-a);outline-offset:1px;border-color:transparent}
.ss-box .input.err{border-color:#ff6b6b;background:rgba(255,69,58,.06)}
.ss-box .input::placeholder{color:#8a8a8a;opacity:1}   /* opacity:1 e obrigatorio no Firefox */
/* o <select> de parcelas vinha com o widget nativo do sistema por cima do tema
   escuro: cinza claro no Android, azul no iOS. Seta em gradiente, sem SVG. */
.ss-box select.input{height:48px;appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}

/* ══════════════════════════════════════════════════════════════════════════
   TEMA ROSA DA FOLHA (planos + checkout)                    2026-08-05
   ══════════════════════════════════════════════════════════════════════════
   PRA DESLIGAR: apague deste comentario ate o "fim do TEMA ROSA" la embaixo.
   Nada mais precisa ser tocado — as regras da folha leem as variaveis --vip-*,
   que nascem douradas em :root. Sem este bloco, o dourado volta inteiro.
   (A logo do topo e' a unica excecao: e' troca de ARQUIVO, nao de cor, e mora
   no subscribe-sheet.php. Ver rollback/tema-dourado/LEIAME.md.)

   O que muda: o acento da tela, de dourado pra rosa da marca — a mesma cor de
   acao do resto do site. E o cartao do pedido, que era creme e virou escuro,
   porque um painel claro no meio de uma tela preta era o unico lugar onde o
   dourado nao era so um detalhe: era uma superficie inteira.

   O que NAO muda: a arte do topo (a coroa dourada em vip-top-bg.webp). E imagem
   renderizada, nao cor de CSS — trocar exige gerar outra arte. */
:root{
  --vip-a:#ff75a8;            /* = --primary, a cor de acao do site */
  --vip-a2:#ff6ba0;
  /* o fim do degrade e' bem mais fechado que o inicio de proposito: e' nele que
     o texto branco dos chips pequenos ("Mais escolhido", o numero da secao)
     precisa se apoiar. No rosa claro puro o branco cai pra 2,6:1 e some. */
  --vip-a3:#d6427f;
  --vip-ink:#ffffff;
  --vip-rgb:255,117,168;
  --vip-rgb2:255,143,187;
  /* Segundo tom do degrade, na especificacao do dono: hsl(330 80% 55%) = #e8308c.
     Fica em variavel porque o MESMO par pinta o botao e o cartao do pedido — em
     dois lugares escritos na mao eles ja teriam divergido na primeira mexida. */
  --vip-pink-2:#e8308c;
  /* o botao vai junto: rosa cheio com texto branco e halo rosa. Assim apagar
     este bloco devolve a tela INTEIRA ao dourado, sem sobrar um botao rosa
     orfao no meio de uma tela dourada. */
  --vip-cta-bg:linear-gradient(135deg,var(--primary),var(--vip-pink-2));
  --vip-cta-ink:#fff;
  --vip-cta-glow:rgba(255,117,168,.55);
}

/* ── CARTAO DO PEDIDO ────────────────────────────────────────────────────────
   Rosa cheio, na mesma familia do botao. Era creme com texto marrom.

   O par e' o mesmo do botao, por especificacao do dono:
   linear-gradient(135deg, hsl(var(--primary)), hsl(330 80% 55%)) — ou seja
   #ff75a8 -> #e8308c. Card e botao passam a ser a mesma familia, que e' o ponto.

   RESSALVA DE LEITURA, pra ficar registrada: a 135deg o tom CLARO cai no canto
   de cima a esquerda, que e' onde mora o texto pequeno (nome do plano 14px e a
   frase de cobranca 12,5px). Branco sobre #ff75a8 da 2,6:1 — abaixo do minimo
   pra texto pequeno; o valor a direita, 20px/800, aguenta.
   Se um dia a frase de cobranca parecer apagada num celular ao sol, o conserto
   e' de uma linha: trocar 135deg por 100deg leva o tom fechado pra debaixo do
   texto pequeno e sobe pra 5,4:1, sem mudar as duas cores.

   As capas do catalogo seguem la, agora em multiply e bem apagadas: sobre rosa
   cheio elas nao podem competir, mas sem nenhuma textura o cartao vira um
   retangulo de cor chapada. */
.ss-summary{
  background:linear-gradient(135deg,var(--primary),var(--vip-pink-2));
  border:0;
  /* isolation: sem isto o multiply das capas procura o que estiver ATRAS do
     cartao pra misturar (position:relative sozinho nao abre contexto de
     empilhamento) e o efeito muda conforme o que passa por baixo na rolagem. */
  isolation:isolate;
  box-shadow:0 10px 30px -16px rgba(var(--vip-rgb),.55)}
/* ── AS CAPAS ────────────────────────────────────────────────────────────────
   ARQUIVO NOVO (vip-covers-bg2.webp). O antigo nao aparecia por um motivo que
   nao dava pra ver mexendo em CSS: ele tinha alpha MAXIMO de 0,04 — nasceu pra
   viver embaixo de um veu creme, e sobre o rosa cheio era o mesmo que nao
   existir. Nenhum ajuste de opacidade ia resolver: nao havia pixel pra mostrar.
   Este e' opaco, montado das mesmas capas reais do catalogo, e quem controla a
   presenca passa a ser o CSS aqui embaixo — da pra calibrar sem gerar arquivo.
   Elas cobrem o CARTAO INTEIRO, sem mascara. Ja estiveram so na metade direita,
   com o texto protegido a esquerda; cheias ficam mais bonitas e o cartao deixa
   de parecer meio vazio.
   E isso e' seguro por causa do MULTIPLY, nao por sorte: multiply so escurece,
   nunca clareia. Como o texto e' branco, o contraste dele so pode SUBIR onde as
   capas passam — o rosa claro de 2,6:1 vira ameixa e melhora. Com screen ou
   overlay, que clareiam, o texto pequeno teria sumido e ai a mascara seria
   obrigatoria.
   As capas sao PEQUENAS no arquivo (74x111) de proposito: com elas grandes
   apareciam so umas tres no cartao, tres posteres cortados em vez de um mural.
   O tamanho de cada capa se resolve gerando o arquivo, nao no background-size —
   aqui o 135% define o enquadramento, e o numero de capas visiveis vem de
   quantas cabem no mosaico.
   OPACIDADE .08, calibrada descendo com o dono olhando: .58 -> .3 -> .16 -> .08.
   Elas sao FUNDO — quem tem que ser lido ali e' o plano e o preco, e o rosa e'
   que precisa mandar na cor. Neste ponto nao se reconhece mais capa nenhuma:
   sobra uma marca d'agua, o suficiente pra o cartao nao ser cor chapada.
   Se um dia parecer que "sumiram", e' este numero — nao o arquivo. O arquivo
   ANTIGO (vip-covers-bg.webp) e' que era invisivel por natureza, com alpha
   maximo de 0,04; o de agora e' opaco e obedece so a esta linha. */
.ss-summary::before{content:"";position:absolute;inset:0;pointer-events:none;
  /* ?v=2: o CSS referencia imagem por caminho cru, sem o cache-bust do asset().
     Sem a versao, quem ja tinha o arquivo antigo em cache continuaria vendo as
     capas grandes depois do arquivo ser trocado. */
  background:url(../img/ui/vip-covers-bg2.webp?v=2) center/135% no-repeat;
  mix-blend-mode:multiply;opacity:.08}
/* o conteudo fica ACIMA da textura; sem isto as capas passariam por cima do
   texto e o cartao viraria uma sopa */
.ss-summary > *{position:relative;z-index:1}
/* CAIXA ALTA no nome do plano, com entreletra — o mesmo tratamento que o
   rotulo tem no cartao de plano da tela anterior, entao "TRIMESTRAL" ali e
   "TRIMESTRAL" aqui sao visivelmente a mesma coisa.
   Feito por CSS e nao trocando o texto: o rotulo vem do idioma (Trimestral /
   Trimestral / Mensual) e passa pelo JS a cada troca de plano. Em maiuscula na
   string, os tres idiomas e os quatro planos teriam que ser mantidos a mao. */
.ss-summary span[data-ss-sumlabel]{color:#fff;text-transform:uppercase;letter-spacing:.05em}
.ss-summary b{color:#fff}
/* .9, nao .6: sobre rosa claro, apoio apagado some. Continua claramente
   secundario pelo peso e pelo corpo, que e' onde a hierarquia deve morar
   quando a cor de fundo nao deixa espaco pra graduar por opacidade. */
.ss-sumsub,.ss-sumpm{color:rgba(255,255,255,.9)}
/* dentro de um cartao rosa a saida nao pode ser rosa: branco sublinhado, que e'
   como link se comporta em cima de cor cheia */
.ss-sumback{color:#fff;opacity:.92}

/* ── MEDALHAS DOS BENEFICIOS ────────────────────────────────────────────────
   O miolo era um marrom-dourado (#463a22). Em rosa ele fica ameixa, mas o
   MESMO desenho: circulo com luz vinda de cima e aro fino. */
.vipx-bene-ic{background:radial-gradient(circle at 50% 32%,#3d2130,#1c1c20)}

/* a coroa do topo do /assinar segue a mesma cor de acento */
.ss-crown{background:linear-gradient(135deg,var(--vip-a2),var(--vip-a3))}
/* ══ fim do TEMA ROSA ══════════════════════════════════════════════════════ */

/* ANEXAR PRINT NA SUGESTAO. Caixa grande e obvia, aviso do que o print precisa
   mostrar, e miniatura no lugar depois de escolher. Desenhada pra quem nunca
   anexou um arquivo na vida: um toque, uma confirmacao visual. */
.sgp-caixa{display:block;border:2px dashed var(--line, #3a3a40);border-radius:14px;padding:0;cursor:pointer;overflow:hidden}
.sgp-caixa:active{transform:scale(.995)}
.sgp-vazio{display:flex;flex-direction:column;align-items:center;gap:4px;padding:18px 14px;text-align:center}
.sgp-ico{opacity:.8}
.sgp-tit{font-size:14px;font-weight:600}
.sgp-sub{font-size:12px;color:var(--amber, #ffc457);font-weight:600}
.sgp-cheio{display:flex;align-items:center;gap:12px;padding:10px 12px}
.sgp-cheio img{width:74px;height:74px;object-fit:cover;border-radius:10px;flex:none}
.sgp-troca{font-size:12.5px;color:var(--muted, #8b8b93)}

/* ═ CONVITE DE INSTALACAO DO WEBAPP ═
   Banner flutuante acima da tabbar; tutorial em folha com passos que acendem
   um por vez (a "animacao" e a classe .on que o JS circula). */
.instb{position:fixed;left:12px;right:12px;bottom:calc(76px + env(safe-area-inset-bottom, 0px));z-index:1500;
  display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:16px;
  background:rgba(18,18,20,.97);border:1px solid rgba(255,79,163,.45);
  box-shadow:0 12px 40px -8px rgba(0,0,0,.85), 0 0 24px -10px rgba(255,79,163,.5);
  opacity:0;transform:translateY(14px);transition:opacity .35s ease,transform .35s ease}
.instb.sobe{opacity:1;transform:none}
.instb-ic{border-radius:11px;flex:none}
.instb-tx{flex:1 1 auto;min-width:0}
.instb-tx b{display:block;font-size:13.5px;line-height:1.25}
.instb-tx span{display:block;font-size:11px;color:#9a9aa2;line-height:1.3}
.instb-go{flex:none;white-space:nowrap}
.instb-x{flex:none;width:26px;height:26px;border-radius:50%;border:0;background:rgba(255,255,255,.07);
  color:#8b8b93;font-size:12px;cursor:pointer}
/* pagina sem tabbar (serie): sem barra pra respeitar, cola no rodape */
.instb.instb-solo{bottom:calc(14px + env(safe-area-inset-bottom, 0px))}
@media (min-width:760px){.instb{display:none}}   /* celular e' o alvo; desktop nunca */

.instm{position:fixed;inset:0;z-index:2100;display:grid;place-items:end center}
/* seta que aponta o botao REAL do navegador (compartilhar/menu), por canto */
.instm-seta{position:fixed;z-index:2200;pointer-events:none}
.instm-seta[hidden]{display:none}
.instm-seta-gl{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:var(--primary);color:#fff;font-size:25px;line-height:1;
  box-shadow:0 6px 22px rgba(255,79,163,.6)}
.instm-seta.seta-baixo{bottom:calc(10px + env(safe-area-inset-bottom, 0px));animation:instm-bob-b 1s ease-in-out infinite}
.instm-seta.seta-cima{top:10px;animation:instm-bob-c 1s ease-in-out infinite}
.instm-seta.seta-centro{left:50%;margin-left:-23px}
.instm-seta.seta-direita{right:14px}
@keyframes instm-bob-b{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
@keyframes instm-bob-c{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
/* seta apontando pra baixo: a caixa sobe e deixa o alvo a vista */
.instm.instm-sobe .instm-caixa{margin-bottom:66px}
.instm-bg{position:absolute;inset:0;background:rgba(0,0,0,.66);backdrop-filter:blur(2px)}
.instm-caixa{position:relative;width:100%;max-width:430px;background:#141416;border-radius:22px 22px 0 0;
  padding:26px 20px calc(22px + env(safe-area-inset-bottom, 0px));text-align:center;
  animation:instm-sobe .3s ease-out}
@keyframes instm-sobe{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
.instm-x{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;border:0;
  background:rgba(255,255,255,.08);color:#9a9aa2;cursor:pointer}
.instm-ic{border-radius:14px;margin-bottom:8px}
.instm-caixa h3{margin:0;font-size:18px}
.instm-sub{margin:4px 0 16px;font-size:13px;color:#9a9aa2}
.instm-passos{display:flex;flex-direction:column;gap:10px;text-align:left}
.instm-passo{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:14px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
  opacity:.45;transform:scale(.985);transition:opacity .35s,transform .35s,border-color .35s}
.instm-passo.on{opacity:1;transform:scale(1);border-color:rgba(255,79,163,.55);
  background:rgba(255,79,163,.08)}
.instm-n{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-style:normal;font-size:13px;font-weight:700;background:linear-gradient(135deg,#FF4FA3,#FF6FB7);color:#fff}
.instm-gl{flex:none;color:#FF7DB4;display:grid;place-items:center}
.instm-passo.on .instm-gl{animation:instm-pulsa 1.2s ease-in-out infinite}
@keyframes instm-pulsa{0%,100%{transform:scale(1)}50%{transform:scale(1.28)}}
.instm-passo p{margin:0;font-size:13.5px;line-height:1.4}
.instm-ja{margin-top:16px}

.instm-alt{display:flex;gap:6px;justify-content:center;margin:0 0 14px}
.instm-alt button{border:1px solid rgba(255,255,255,.14);background:transparent;color:#9a9aa2;
  padding:7px 16px;border-radius:99px;font-size:12.5px;font-weight:600;cursor:pointer}
.instm-alt button.on{background:linear-gradient(135deg,#FF4FA3,#FF6FB7);border-color:transparent;color:#fff}
.instm-video{width:100%;max-height:52vh;border-radius:14px;background:#000;margin-bottom:4px}
.instm-ajuda{margin:14px 0 0;font-size:11.5px;color:#8b8b93}
.instm-ajuda a{color:#FF7DB4;text-decoration:underline;font-weight:600}
@media (min-width:760px){.prof-instalar{display:none}}   /* instalar app e' assunto de celular */

/* "voce quis dizer x@gmail.com?" — uma linha sutil sob o campo de e-mail */
.lg-dica{display:block;margin-top:6px;padding:0;background:none;border:0;cursor:pointer;
  font-size:12px;color:var(--muted2);text-align:left}
.lg-dica b{color:var(--primary);font-weight:600}
.lg-dica:hover b{text-decoration:underline}

/* seletor de DDI do checkout hispano — mesmo chip do +55 brasileiro, com seta */
.ss-ddi{appearance:none;-webkit-appearance:none;border:0;cursor:pointer;
  flex:none;align-self:stretch;max-width:118px;
  font:inherit;font-size:13.5px;font-weight:600;color:var(--muted);
  background:transparent;border-right:1px solid var(--line);
  padding:0 26px 0 13px;margin:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center}
.ss-ddi:focus{outline:none;color:var(--txt)}
.ss-ddi option{background:var(--surface);color:var(--txt);font-weight:400}
.ss-hosted-note{font-size:12.5px;color:var(--muted2);line-height:1.5;margin:0;
  padding:10px 12px;background:var(--surface);border-radius:10px}

/* trava de scroll a prova de iOS quando a folha de assinatura abre */
body.ss-open{position:fixed;width:100%}
/* Payment Element embutido (checkout hispano) — altura LIVRE: o iframe do
   Stripe dita o tamanho (encolheu quando pais e termos sairam; min-height
   fixa deixava um vao morto embaixo do CVC). O esqueleto so segura o lugar
   enquanto o iframe carrega. */
.ss-payel{margin:4px 0 10px}
.ss-payel:empty::before{content:'';display:block;height:170px;border-radius:12px;
  background:var(--surface);animation:sspulse 1.2s ease-in-out infinite}
@keyframes sspulse{0%,100%{opacity:.55}50%{opacity:.9}}

/* bandeiras aceitas acima do Payment Element */
.ss-payel-brands{display:flex;gap:6px;margin:0 0 10px}

/* nome do titular dentro do bloco do cartao (checkout hispano) */
.ss-payel-nome{margin:0 0 10px}
.ss-payel-nome label{font-size:13px;font-weight:600;color:var(--muted)}

/* carteira: so o botao oficial, pelado — arredondado como os cards da folha */
.ss-express{margin:0 0 2px}
.ss-express > div{border-radius:14px;overflow:hidden}
.ss-express-ou{display:flex;align-items:center;gap:10px;margin:8px 0;color:var(--muted2);font-size:12px}
.ss-express-ou::before,.ss-express-ou::after{content:'';flex:1;height:1px;background:var(--line)}

/* juntar contas (ficha da cliente) */
.cli-junta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:10px 0 0}
.cli-junta .input{max-width:280px;font-size:13px;padding:8px 12px}

/* LEGENDA DO PLAYER (11/08/2026): sem isto o navegador usa o padrão dele —
   fonte pequena demais no celular e caixa preta opaca no desktop. O
   posicionamento (subir acima dos controles) é feito no JS via cue.line;
   aqui é só a aparência: texto branco com sombra, legível em cena clara. */
video::cue {
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 1.05em;
  line-height: 1.35;
  text-shadow: 0 1px 3px rgba(0,0,0,.95), 0 0 6px rgba(0,0,0,.75);
  white-space: pre-line;
}
@media (max-width: 640px) {
  video::cue { font-size: 1em; }
}

/* seletor de público das campanhas: nome, explicação e tamanho em uma linha */
.em-segs{display:grid;gap:8px}
.em-seg{display:flex;align-items:flex-start;gap:11px;padding:11px 13px;border-radius:12px;
  border:1px solid var(--line);background:var(--card2);cursor:pointer;transition:border-color .15s,background .15s}
.em-seg:hover{border-color:var(--line2)}
.em-seg:has(input:checked){border-color:var(--primary);background:rgba(255,117,168,.07)}
.em-seg input{margin-top:3px;flex:none;accent-color:var(--primary)}
.em-seg-txt{flex:1;min-width:0;display:block}
.em-seg-nome{display:block;font-size:13.5px;font-weight:600;color:var(--txt);line-height:1.3}
.em-seg-ajuda{display:block;margin-top:2px;font-style:normal;font-size:11.5px;color:var(--muted2);line-height:1.4}
.em-seg-n{flex:none;align-self:center;font-size:13px;font-weight:700;color:var(--primary);
  background:rgba(255,117,168,.12);padding:3px 10px;border-radius:999px;white-space:nowrap}
.em-seg-vazio{opacity:.5}
.em-seg-vazio .em-seg-n{color:var(--muted2);background:var(--surface)}
.em-seg-total{margin:10px 0 0;font-size:12.5px;color:var(--muted);font-weight:600}

/* Chave de acesso na tela de "tudo pronto" (13/08/2026): a conta nasce sem
   senha, entao o e-mail e' como a cliente volta. Destaque discreto, sem
   virar caixa de aviso. */
.ss-done-key{margin-top:14px;padding:12px 14px;border:1px solid var(--line);
  border-radius:12px;background:var(--card2);font-size:13px;line-height:1.6}
.ss-done-key strong{display:inline-block;margin-top:2px;color:var(--txt);
  font-size:14px;word-break:break-all}