/* ═══════════════════════════════════════════════════════════
   DoramaFLIX /es/ — OS PLANOS: SÓ O VIP, EM TRÊS PERÍODOS (27/09)

   Pedido do Kauã: sai o Básico, fica UM pacote (o VIP) vendido em mensal ·
   trimestral · anual, "bem chamativo, com elementos de conversão, mas nada
   brega", e diferente do layout de sempre.

   A PEÇA MEMORÁVEL é a fita de 12 quadros — um por mês. O anual acende os 12,
   o trimestral 3, o mensal 1: a duração vira uma coisa que se VÊ, e o preço
   por mês cai à medida que a fita enche. Não é enfeite, é a informação.
   Todo o resto fica quieto: uma escolha por linha, um botão verde só.

   ⚠️ O verde de compra (.btn da landing) é o ÚNICO verde de ação — as opções
   usam o ouro da marca pra "selecionado", nunca verde.
   ⚠️ Prefixo `pz-`: não colide com nada da landing-es.css.
   ═══════════════════════════════════════════════════════════ */

.pz [hidden]{ display:none !important }

.pz-sub{
  margin:-8px auto 22px; max-width:34ch; text-align:center;
  color:var(--tx-2); font-size:.95rem; line-height:1.5; text-wrap:balance;
}

/* ── o cartão do VIP ───────────────────────────────────── */
.pz-vip{
  position:relative;
  padding:22px 18px 20px; border-radius:var(--r-lg);
  background:linear-gradient(180deg, var(--card-1) 0%, var(--card-2) 100%);
  border:1px solid rgba(243,200,123,.28);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.06);
  scroll-margin-top:70px;
}
.pz-vip .appsbox{ margin-top:14px }

/* ── a escolha do período ─────────────────────────────── */
.pz-opcoes{ margin-top:20px; border:0; padding:0; display:grid; gap:10px }
.pz-opcoes legend{ margin-bottom:10px; font-weight:800; font-size:1.02rem; text-align:center; width:100% }

.pz-op{
  position:relative; display:grid; gap:10px;
  grid-template-columns:auto 1fr auto; grid-template-areas:
    "radio nome  selo"
    "fita  fita  fita"
    "conta conta preco";
  align-items:center;
  padding:14px 14px 13px; border-radius:18px; cursor:pointer;
  background:rgba(10,7,20,.42); border:1.5px solid rgba(255,255,255,.12);
  transition:border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.pz-op input{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none }
.pz-op:has(input:focus-visible){ outline:2px solid var(--gold); outline-offset:3px }
.pz-op.is-on{
  border-color:var(--gold);
  background:linear-gradient(180deg, rgba(243,200,123,.10) 0%, rgba(10,7,20,.42) 70%);
  box-shadow:0 0 0 4px rgba(243,200,123,.10), 0 18px 40px -22px rgba(243,200,123,.55);
}

/* o "rádio" desenhado: anel que vira ouro cheio */
.pz-op__radio{
  grid-area:radio; width:22px; height:22px; border-radius:50%;
  border:2px solid rgba(255,255,255,.35); display:grid; place-items:center;
  transition:border-color .2s var(--ease);
}
.pz-op__radio::after{
  content:""; width:10px; height:10px; border-radius:50%; background:var(--gold);
  transform:scale(0); transition:transform .2s var(--ease);
}
.pz-op.is-on .pz-op__radio{ border-color:var(--gold) }
.pz-op.is-on .pz-op__radio::after{ transform:scale(1) }

.pz-op__nome{ grid-area:nome; font-weight:800; font-size:1.08rem; letter-spacing:-.01em }
.pz-op__selo{
  grid-area:selo; justify-self:end; white-space:nowrap;
  padding:4px 10px; border-radius:999px; font-size:.74rem; font-weight:800;
}
.pz-op__selo--ouro{ background:rgba(243,200,123,.16); color:var(--gold); border:1px solid rgba(243,200,123,.4) }
.pz-op__selo--rosa{ background:rgba(255,111,216,.16); color:#FF9BE4; border:1px solid rgba(255,111,216,.4) }

/* ── a fita: 12 quadros, um por mês ───────────────────────
   Acesos = os meses que a opção cobre. O `--i` de cada quadro escalona a
   luz quando ela ESCOLHE a opção (movimento que responde a um toque dela,
   não enfeite solto). */
.pz-fita{ grid-area:fita; display:grid; grid-template-columns:repeat(12, 1fr); gap:4px }
.pz-fita i{
  display:block; height:12px; border-radius:4px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.06);
}
.pz-fita i.on{
  background:linear-gradient(135deg, #FF7FE0 0%, #8B6BFF 100%); border-color:transparent;
  opacity:.55; transition:opacity .25s var(--ease) calc(var(--i) * 28ms), box-shadow .25s var(--ease) calc(var(--i) * 28ms);
}
.pz-op.is-on .pz-fita i.on{ opacity:1; box-shadow:0 0 12px -2px rgba(255,111,216,.55) }

.pz-op__conta{ grid-area:conta; font-size:.8rem; color:var(--tx-3); line-height:1.45 }
.pz-op__conta b{ color:var(--tx-2); font-weight:700 }
.pz-op__conta s{ text-decoration-color:rgba(255,111,216,.8) }
.pz-op__conta .pz-ahorro{ color:#7BEAA8; font-weight:800; white-space:nowrap }

.pz-op__preco{ grid-area:preco; text-align:right; white-space:nowrap; line-height:1 }
.pz-op__preco b{ font-size:1.7rem; font-weight:900; letter-spacing:-.03em; font-variant-numeric:tabular-nums }
.pz-op__preco small{ display:block; margin-top:3px; font-size:.74rem; color:var(--tx-3); font-weight:600 }
.pz-op.is-on .pz-op__preco b{ color:#fff }

/* ── o botão e o "hoy pagas" ──────────────────────────── */
.pz-cta{ margin-top:16px }
.pz-hoy{ margin-top:10px; text-align:center; font-size:.84rem; color:var(--tx-2); line-height:1.45 }
.pz-hoy b{ color:var(--tx) }
.pz-confia{
  margin-top:12px; display:flex; flex-wrap:wrap; justify-content:center; gap:6px 14px;
  font-size:.76rem; color:var(--tx-3);
}

/* ── o que entra (depois do preço) ───────────────────── */
.pz-inclui{ margin-top:22px; padding-top:18px; border-top:1px solid var(--line) }
.pz-inclui__t{ text-align:center; font-weight:800; font-size:1rem }

@media (max-width: 359px){
  .pz-op{ padding:12px 11px }
  .pz-op__preco b{ font-size:1.45rem }
  .pz-op__selo{ font-size:.68rem; padding:3px 8px }
}
@media (prefers-reduced-motion: reduce){
  .pz-op, .pz-op__radio, .pz-op__radio::after, .pz-fita i.on{ transition:none }
}