/* =========================================================
   Página VSL — complementa estilos.css (tokens e componentes base).
   Cores e fontes vêm dos tokens de estilos.css; aqui só layout.
   ========================================================= */

.secao--compacta { padding-block: 2.75rem; }
.vsl-titulo { text-align: center; margin-bottom: var(--esp-5); }

/* ---------- Bloco 01 — Hero com VSL ---------- */
.vsl-hero { padding-block: 1.25rem 2.5rem; }
.vsl-hero__topo { text-align: center; max-width: 46rem; }
.vsl-hero__produto { font-size: .8125rem; font-weight: 700; letter-spacing: .03em; color: var(--cor-texto-suave); margin-bottom: var(--esp-2); }
.vsl-hero__titulo { font-size: clamp(1.6rem, 1.05rem + 2.8vw, 2.75rem); }
.vsl-hero__sub { margin-top: var(--esp-3); font-size: 1.0625rem; color: var(--cor-texto-suave); }
.vsl-hero__acao { display: grid; justify-items: center; gap: var(--esp-3); margin-top: var(--esp-5); }
.vsl-hero__acao .microtexto { text-align: center; }

/* Destaque seletivo de palavras (nunca a headline inteira) */
mark.destaque { background: none; color: var(--cor-acento); padding: 0; }

/* ---------- Player ---------- */
.vsl { margin: var(--esp-5) auto 0; width: 100%; }
.vsl__player {
  position: relative; width: 100%; aspect-ratio: var(--vsl-ar, 16/9);
  background: #000; overflow: hidden;
}
/* Iframes e <video> do embed preenchem o espaço reservado */
.vsl__player > iframe, .vsl__player > video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Embeds que se dimensionam sozinhos: sem caixa reservada extra */
.vsl[data-vsl-proporcao="livre"] .vsl__player { aspect-ratio: auto; background: transparent; }
.vsl[data-vsl-proporcao="livre"] .vsl__player > iframe, .vsl[data-vsl-proporcao="livre"] .vsl__player > video { position: static; height: auto; }

/* Horizontal: largura total no celular, contêiner com raio a partir de 560px */
.vsl[data-vsl-orientacao="horizontal"] { max-width: 860px; }

/* Vertical: limitado pela altura da tela para caber inteiro, centralizado */
.vsl[data-vsl-orientacao="vertical"] {
  width: min(100% - 2 * var(--gutter), 400px, calc((100svh - 10rem) * var(--vsl-ar, 9/16)));
}
.vsl[data-vsl-orientacao="vertical"] .vsl__player { border-radius: var(--raio); box-shadow: var(--sombra); }

/* Placeholder do modelo (antes de colar o embed) */
.vsl__player--vazio { display: grid; place-items: center; background: repeating-linear-gradient(45deg, #1d1d1d 0 14px, #262626 14px 28px); }
.vsl__rotulo { display: none; }
.is-previa .vsl__rotulo { display: block; padding: .4rem .75rem; border-radius: 6px; background: rgb(255 255 255 / .94); color: #7f1d1d; font: 700 .75rem/1.3 ui-monospace, monospace; text-align: center; max-width: 80%; }

/* ---------- Bloco 02 — Ideal para ---------- */
.vsl-ideal { display: grid; gap: var(--esp-3); }
.vsl-ideal__item { display: flex; align-items: center; gap: var(--esp-4); padding: var(--esp-4); }
.vsl-ideal__item p { margin: 0; color: var(--cor-texto); font-weight: 600; line-height: 1.4; }
.vsl-ideal .icone--card { width: 2.25rem; height: 2.25rem; padding: .5rem; }

/* ---------- Bloco 03 — Entregáveis ---------- */
.vsl-entrega { display: grid; gap: var(--esp-5); background: var(--cor-superficie); border-radius: calc(var(--raio) * 1.25); padding: var(--esp-4); box-shadow: var(--sombra); }
.vsl-entrega__mockup { width: min(100%, 420px); margin-inline: auto; }
.vsl-entrega__texto { display: grid; gap: var(--esp-4); padding: 0 var(--esp-2) var(--esp-2); }
.vsl-entrega__nome { font-size: 1.375rem; }
.vsl-entrega__formato { display: flex; gap: var(--esp-2); align-items: center; font-size: .875rem; font-weight: 600; color: var(--cor-texto-suave); }
.vsl-entrega__formato .icone { color: var(--cor-acento); }
.vsl-transicao { margin-top: var(--esp-5); text-align: center; font-weight: 700; color: var(--cor-texto); }

/* ---------- Bloco 04 — 4 bônus ---------- */
.vsl-cabecalho { text-align: center; margin-bottom: var(--esp-5); }
.vsl-cabecalho__sub { display: inline-flex; align-items: center; gap: var(--esp-2); margin-top: var(--esp-3); padding: .35rem .9rem; border-radius: 999px; background: var(--cor-destaque); color: var(--cor-texto); font-size: .875rem; font-weight: 700; }
.vsl-cabecalho__sub .icone { color: var(--cor-acento); }
.vsl-bonus { display: grid; gap: var(--esp-3); }
.vsl-bonus .bonus { grid-template-columns: 6rem minmax(0, 1fr); align-items: center; }
.vsl-bonus .bonus h3 { font-size: 1.0625rem; }
.vsl-bonus .bonus__texto p:last-child { font-size: .9375rem; }

/* ---------- Bloco 05 — Planos ---------- */
.vsl-planos { margin-top: var(--esp-6); }
.vsl-reforco { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--esp-2) var(--esp-5); margin-top: var(--esp-6); font-size: .875rem; color: var(--cor-texto-suave); }
.vsl-reforco li { display: inline-flex; align-items: center; gap: var(--esp-2); }
.vsl-reforco .icone { color: var(--cor-acento); }

/* ---------- Bloco 06 — Rodapé ---------- */
.rodape--compacto { padding-block: var(--esp-6); }

/* ---------- A partir de 560px ---------- */
@media (min-width: 560px) {
  .vsl[data-vsl-orientacao="horizontal"] { width: min(100% - 2 * var(--gutter), 860px); }
  .vsl[data-vsl-orientacao="horizontal"] .vsl__player { border-radius: var(--raio); box-shadow: var(--sombra); }
  .vsl-ideal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Tablet ---------- */
@media (min-width: 768px) {
  .secao--compacta { padding-block: 3.75rem; }
  .vsl-hero { padding-block: 2rem 3.25rem; }
  .vsl-bonus { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-4); }
  .vsl-bonus .bonus { grid-template-columns: 7.5rem minmax(0, 1fr); padding: var(--esp-4); }
  .vsl-bonus .bonus__imagem { width: 100%; }
  .rodape--compacto { padding-block: var(--esp-6); }
}

/* ---------- Desktop ---------- */
@media (min-width: 1100px) {
  .vsl-ideal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vsl-ideal:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; margin-inline: auto; }
  .vsl-entrega { grid-template-columns: 1fr 1fr; align-items: center; padding: var(--esp-6); max-width: 980px; margin-inline: auto; }
  .vsl-bonus { max-width: 980px; margin-inline: auto; }
}

/* =========================================================
   Identidade do produto — "Papel de festa"
   ========================================================= */
body { background: var(--cor-fundo); }

/* Hero: papel creme com confetes discretos */
.vsl-hero {
  background:
    radial-gradient(circle at 8% 18%, rgb(255 217 106 / .55) 0 5px, transparent 6px),
    radial-gradient(circle at 92% 12%, rgb(176 47 102 / .22) 0 6px, transparent 7px),
    radial-gradient(circle at 85% 46%, rgb(18 121 90 / .18) 0 4px, transparent 5px),
    radial-gradient(circle at 12% 62%, rgb(176 47 102 / .16) 0 4px, transparent 5px),
    linear-gradient(180deg, #ffeef4 0%, var(--cor-fundo) 72%);
}
.vsl-hero__produto { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .8rem; border: 1.5px dashed var(--cor-borda); border-radius: 999px; background: rgb(255 255 255 / .7); color: var(--cor-marca); letter-spacing: .01em; }
.vsl-hero__produto .icone { width: 1rem; height: 1rem; color: var(--cor-acento); }
.vsl-hero__titulo { color: var(--cor-marca); }
mark.destaque { color: var(--cor-acento); background: linear-gradient(transparent 64%, var(--cor-papel) 64%, var(--cor-papel) 92%, transparent 92%); padding-inline: .05em; }

/* Botões "sombra dura" com o tom da marca, como papel recortado */
[data-botao="sombra-dura"] .btn { border-color: var(--cor-texto); }
.btn--cta .icone { width: 1.15em; height: 1.15em; stroke-width: 2.25; }

/* Títulos de seção com uma "linha de corte" tracejada */
.vsl-titulo::after, .vsl-cabecalho h2::after {
  content: ""; display: block; width: 4.5rem; margin: .7rem auto 0;
  border-top: 3px dashed var(--cor-acento); opacity: .55;
}

/* Cards com borda de recorte */
[data-card="borda"] .card { border: 1.5px dashed var(--cor-borda); }
[data-card="borda"] .plano { border: 1.5px solid var(--cor-borda); }
.icone--card { background: var(--cor-destaque); color: var(--cor-acento); }

/* Exemplos de peças (bloco 03) */
.vsl-exemplos { display: grid; gap: var(--esp-4); margin-top: var(--esp-6); }
.vsl-exemplos li { background: var(--cor-superficie); border-radius: var(--raio); padding: var(--esp-3); box-shadow: var(--sombra); }
.vsl-exemplos .slot { border-radius: var(--raio-pequeno); background: #fff; }
.vsl-exemplos li:first-child .slot img { object-fit: cover; }
.vsl-exemplos__legenda { margin-top: var(--esp-2); font-size: .875rem; font-weight: 700; text-align: center; color: var(--cor-texto-suave); }
.vsl-transicao { display: table; margin: var(--esp-6) auto 0; padding: .55rem 1.1rem; border-radius: 999px; background: var(--cor-destaque); color: var(--cor-marca); font-size: .9375rem; }

/* Bônus: imagem em cima, texto embaixo (as artes são horizontais) */
.vsl-bonus .bonus { grid-template-columns: minmax(0, 1fr); gap: var(--esp-3); align-items: start; padding: var(--esp-3) var(--esp-3) var(--esp-4); }
.vsl-bonus .bonus__imagem { width: 100%; max-height: 13rem; background: var(--cor-suave); border-radius: var(--raio-pequeno); }
.vsl-bonus .bonus__texto { padding-inline: var(--esp-2); }
.bonus__numero { display: inline-block; justify-self: start; padding: .15rem .6rem; border-radius: 999px; background: var(--cor-marca); color: #fff !important; letter-spacing: .05em; }

/* Planos */
.plano__nome { color: var(--cor-marca); }
.plano--destaque { background: #fff; }
.plano__valor { color: var(--cor-texto); }
.plano--destaque .plano__valor { font-size: 2.75rem; color: var(--cor-cta); }
.plano__mockup { background: transparent; }

/* Rodapé */
.rodape--compacto { background: var(--cor-marca); color: #fff; }
.rodape--compacto a { color: #fff; font-weight: 700; }
.rodape__aviso { opacity: .8; font-size: .75rem; max-width: 40rem; margin-inline: auto; }

@media (min-width: 560px) {
  .vsl-exemplos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .vsl-bonus .bonus { grid-template-columns: minmax(0, 1fr); padding: var(--esp-4); }
  .vsl-exemplos { max-width: 980px; margin-inline: auto; }
}
.plano__valor--pendente { font-size: 1.25rem; color: var(--cor-texto-suave); }

/* v2 — oferta única */
.vsl-oferta { max-width: 440px; margin: var(--esp-6) auto 0; }
.vsl-oferta .plano { padding-top: var(--esp-6); }
.vsl-oferta .plano__valor { font-size: 3rem; }
.vsl-oferta .plano__mockup { width: min(100%, 300px); }
.plano__moedas { margin-top: .5rem; text-align: center; font-size: .9375rem; font-weight: 700; color: var(--cor-texto-suave); }
@media (min-width: 768px) { .vsl-oferta .btn--largo { width: 100%; min-width: 0; } }