/* ═══════════════════════════════════════════════════════════════════════
   LANDING v2 — o site de vendas no mundo do portal canalraprj.com.br
   Carrega só com ?visual=novo (pages/landing.php, $novoVisual) e só age
   dentro de body.v2. Não substitui landing.css: corrige por cima.

   Gramática (ver DESIGN.md):
   · fundo #080808, superfícies #111 / #161616, borda rgba(255,255,255,.08)
   · Poppins em tudo; títulos 800 com tracking negativo, sem caixa-alta
   · dourado #f0c000 só em etiqueta, preço, botão principal e link
   · cantos: 12px cards e fotos, 8px botões e campos, 999px só etiqueta
   · botão principal = dourado sólido; secundário = contorno neutro
   · zero glow, zero text-shadow, zero gradiente decorativo

   !important aparece só em três casos: (1) a regra base já usa !important
   no mesmo alvo; (2) vencer style="" inline do HTML; (3) vencer o
   style.transform que o landing.js grava inline (parallax, "magnético",
   tilt 3D) — são efeitos que o v2 desliga.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 0. Tokens ──────────────────────────────────────────────────────────── */
.v2 {
    --bg: #080808;
    --bg-raised: #0d0d0d;
    --bg-card: #111111;
    --bg-card-hover: #161616;
    --border: rgba(255, 255, 255, 0.08);
    --border-hover: rgba(255, 255, 255, 0.16);

    --text-primary: #e8e8e8;
    --text-secondary: #bdbdbd;   /* 10,9:1 sobre #111 */
    --text-tertiary: #9a9a9a;    /* 6,7:1 sobre #111 */
    --text-quaternary: #8a8a8a;  /* 5,5:1 sobre #111 */

    --gold: #f0c000;
    --gold-bright: #f0c000;
    --gold-dark: #c9a000;
    --gold-muted: #bdbdbd;
    --gold-surface: rgba(240, 192, 0, 0.05);
    --gold-glow: transparent;
    --gold-glow-md: transparent;
    --gold-glow-lg: transparent;

    --font-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --radius-sm: 8px;
    --radius-md: 12px;
    --container: 1140px;

    --v2-ouro-hover: #d6ab00;    /* hover do dourado: escurece, não brilha */
    --v2-foco: #ffd800;
    --v2-borda-btn: rgba(255, 255, 255, 0.2);
    --v2-sup: #111111;
    --v2-sup-2: #161616;

    /* fundo chapado: sem os 3 radiais dourados e sem attachment:fixed */
    background: #080808;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
}
.v2::after { content: none; }                 /* textura de ruído em tela cheia */
.v2 ::selection { background: var(--gold); color: #0a0a0a; }

.v2 .container { padding: 0 24px; }
.v2 .section > .container,
.v2 .escolha-rapida > .container { max-width: 928px; }

/* Foco visível único (a base tinha 3 versões e 2 anuladas) */
.v2 a:focus-visible,
.v2 button:focus-visible,
.v2 input:focus-visible,
.v2 select:focus-visible,
.v2 summary:focus-visible {
    outline: 2px solid var(--v2-foco);
    outline-offset: 2px;
}

/* ── 1. Etiqueta (a pílula "NOTÍCIAS" do portal) ───────────────────────── */
.v2 .v2-etiqueta,
.v2 .plan-tag,
.v2 .combo-badge,
.v2 .playlist-package-badge,
.v2 .showcase-tag,
.v2 .er-plano-tag {
    display: inline-flex;
    align-items: center;
    width: auto;
    background: var(--gold);
    color: #0a0a0a;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 5px 10px;
    border: 0;
    border-radius: 999px;
    box-shadow: none;
}
.v2 .v2-etiqueta { margin-bottom: 14px; }

/* ── 2. Títulos e ritmo de seção ───────────────────────────────────────── */
.v2 .section { padding: 88px 0 72px; }
.v2 .section.section-alt { background: #0d0d0d; }
.v2 .section.section-alt::before,
.v2 section + section::before { content: none; }

.v2 .section-head { margin-bottom: 32px; }
.v2 .section-head.center { text-align: left; }
.v2 .section-head.center .section-subtitle { margin: 0; }

.v2 .section-title,
.v2 .incluso-titulo,
.v2 .er-titulo {
    font-family: var(--font-display);
    font-size: clamp(1.625rem, 2.6vw, 2.125rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-transform: none;
    text-shadow: none;
    text-align: left;
    text-wrap: balance;
    color: #fff;
    margin: 0 0 10px;
}
.v2 .section-subtitle {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-secondary);
    max-width: 560px;
}
/* style="margin:0 auto" inline no subtítulo do #exemplos */
.v2 #exemplos .section-subtitle { margin: 0 !important; }

/* ── 3. Botões: principal dourado, secundário contornado neutro ────────── */
.v2 .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 22px;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    border-radius: 8px;
    animation: none;
}
.v2 .btn:hover { transform: none; box-shadow: none; }

/* Principal = compra. Mesma cara em qualquer seção. */
.v2 .btn-primary,
.v2 .plan-cta,
.v2 .combo-cta,
.v2 .playlist-package-cta,
.v2 .showcase-cta,
.v2 .nav-buy {
    --green: #0a0a0a;   /* o "✓ Adicionado" do carrinho pinta com var(--green): legível no dourado */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 22px;
    background: var(--gold);
    color: #0a0a0a;
    border: 1px solid var(--gold);
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    box-shadow: none;
    animation: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.v2 .btn-primary,
.v2 .plan-cta.btn-secondary {
    background: var(--gold) !important;        /* base: gradiente !important */
    box-shadow: none !important;               /* base: glow !important */
    color: #0a0a0a;
    border: 1px solid var(--gold);
    transform: none !important;                /* landing.js: efeito "magnético" inline */
}
.v2 .btn-primary:hover,
.v2 .plan-cta.btn-secondary:hover { background: var(--v2-ouro-hover) !important; border-color: var(--v2-ouro-hover); }
.v2 .plan-cta:hover,
.v2 .combo-cta:hover,
.v2 .playlist-package-cta:hover,
.v2 .showcase-cta:hover,
.v2 .showcase-cta:active,
.v2 .nav-buy:hover {
    background: var(--v2-ouro-hover);
    border-color: var(--v2-ouro-hover);
    color: #0a0a0a;
    transform: none;
    box-shadow: none;
}
.v2 .shine-fx { display: none; }              /* brilho que o landing.js injeta */

/* Secundário = suporte / navegação. Nunca verde cheio. */
.v2 .btn-whatsapp,
.v2 .nav-cta,
.v2 .showcase-cta.showcase-cta-solid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 18px;
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--v2-borda-btn);
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    box-shadow: none;
}
.v2 .btn-whatsapp {
    background: transparent !important;        /* base: gradiente verde !important */
    box-shadow: none !important;               /* base: glow verde !important */
}
.v2 .btn-whatsapp svg,
.v2 .nav-cta svg { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; }
.v2 .btn-whatsapp:hover,
.v2 .nav-cta:hover,
.v2 .showcase-cta.showcase-cta-solid:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
    box-shadow: none !important;
    transform: none;
}
.v2 a[href*='wa.me']:hover { box-shadow: none; }  /* anel dourado genérico da base */

/* ── 4. Header ─────────────────────────────────────────────────────────── */
.v2 .nav {
    padding: 10px max(24px, calc((100vw - 1140px) / 2 + 24px));
    background: rgba(8, 8, 8, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.v2 .nav.scrolled {
    padding-top: 8px;
    padding-bottom: 8px;
    background: rgba(8, 8, 8, 0.97);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}
.v2 .nav-links { gap: 2px; }
.v2 .nav-links a {
    min-height: 44px;
    padding: 0 12px;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-primary);
}
.v2 .nav-links a:hover { color: var(--gold); }
.v2 .nav-links a::after { bottom: 8px; left: 12px; }
.v2 .nav-links a:hover::after { left: 12px; width: calc(100% - 24px); }
.v2 .nav-right { gap: 8px; }
.v2 .nav-login-link { min-height: 44px; font-size: 0.8125rem; color: var(--text-tertiary); white-space: nowrap; }
.v2 .nav-login-link-action { color: var(--text-primary); }
.v2 .nav-buy { min-height: 44px; padding: 0 16px; font-size: 0.875rem; white-space: nowrap; }
.v2 .nav-cta { min-height: 44px; padding: 0 14px; font-size: 0.875rem; white-space: nowrap; }
/* acima do véu do menu (z 998 dentro da .nav): o X fica visível e clicável */
.v2 .nav-hamburger { position: relative; z-index: 1000; width: 44px; min-width: 44px; height: 44px; flex-shrink: 0; }
.v2 .nav-brand { flex-shrink: 1; min-width: 0; }
.v2 .nav-logo { max-width: 100%; width: auto; }

/* Notebook (1280 com zoom 125% = 1024): some o "Já é cliente?", fica "Entrar" */
@media (max-width: 1180px) {
    .v2 .nav-login-link { font-size: 0; gap: 0; }
    .v2 .nav-login-link-action { font-size: 0.8125rem; }
    .v2 .nav-links a { padding: 0 10px; }
}
.v2 .nav-hamburger span { background: var(--text-primary); width: 20px; }

.v2 .nav-mobile {
    background: #0b0b0b;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 4px 0;
}
.v2 .nav-mobile a {
    min-height: 52px;
    padding: 0 24px;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.v2 .nav-mobile a:last-child { border-bottom: 0; }
.v2 .nav-mobile a.text-muted { color: var(--text-tertiary); }
.v2 .nav-mobile a:hover,
.v2 .nav-mobile a:focus-visible { background: rgba(255, 255, 255, 0.04); color: #fff; }
.v2 .nav-mobile a:focus-visible { outline: 2px solid var(--v2-foco); outline-offset: -2px; }

/* Entre celular e notebook o menu cheio não cabe ao lado dos 2 botões:
   usa o hambúrguer (o menu tem todos os links, inclusive o login). */
@media (max-width: 960px) {
    .v2 .nav-links,
    .v2 .nav-login-link { display: none; }
    .v2 .nav-hamburger { display: flex; }
}

/* ── 5. Hero ───────────────────────────────────────────────────────────── */
.v2 .hero {
    min-height: 0;
    padding: 112px 24px 56px;
    background: none;
    text-align: left;
}
.v2 .hero::before,
.v2 .hero::after { content: none; }
.v2 .hero-inner { gap: 56px; }
.v2 .hero-text { max-width: 600px; }

.v2 .hero h1 {
    font-family: var(--font-display);
    font-size: clamp(2.125rem, 3.6vw, 3.25rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
    text-transform: none;
    text-wrap: balance;
    color: #fff;
    margin: 0 0 18px;
    animation: none;
}
.v2 .hero-num { color: var(--gold); white-space: nowrap; }
.v2 .hero-desc {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--text-secondary);
    max-width: 500px;
    margin-bottom: 24px;
    animation: none;
}
.v2 .hero-desc strong { color: #fff; font-weight: 600; }
.v2 .hero .btn,
.v2 .hero button,
.v2 .hero-actions,
.v2 .hero-phone { animation: none; }

/* landing.js grava transform inline (parallax no texto e na 1ª img do hero) */
.v2 .hero-text,
.v2 .hero h1,
.v2 .hero-desc,
.v2 .hero-mosaico img { transform: none !important; }

/* Faixa de preço */
.v2 .v2-faixa {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 10px;
    row-gap: 2px;
    margin: 0 0 24px;
    padding: 12px 16px;
    background: var(--v2-sup);
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 0.9375rem;
    color: var(--text-secondary);
}
.v2 .v2-faixa-preco {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    color: var(--gold);
}
.v2 .v2-faixa-nota { font-size: 0.875rem; color: var(--text-tertiary); }

.v2 .hero-actions { gap: 12px; }
.v2 .hero-prova-link { margin-top: 12px; font-size: 0.9375rem; }
.v2 .hero-prova-link a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--text-secondary);
}
.v2 .hero-prova-link a:hover { color: var(--gold); }

.v2 .hero-trust {
    gap: 4px 18px;
    margin-top: 12px;
    font-size: 0.8125rem;
    color: var(--text-tertiary);
}
.v2 .hero-trust b { display: none; }
.v2 .hero-trust span { display: inline-flex; align-items: center; gap: 8px; }
.v2 .hero-trust span::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 1px;
    background: var(--text-quaternary);
}
.v2 .hero-stats-inline { display: none; }

/* Mosaico "capa do portal": 1 grande + 2 menores + 1 faixa */
.v2 .hero-mosaico {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-rows: 206px 206px 144px;
    grid-template-areas:
        "g a"
        "g b"
        "l l";
    gap: 12px;
}
.v2 .hm-grande { grid-area: g; }
.v2 .hm-a { grid-area: a; }
.v2 .hm-b { grid-area: b; }
.v2 .hm-larga { grid-area: l; }
.v2 .hm-card {
    position: relative;
    display: block;
    overflow: hidden;
    isolation: isolate;
    border-radius: 12px;
    background: var(--v2-sup);
    border: 1px solid var(--border);
    color: #fff;
    text-decoration: none;
    transition: border-color 0.2s ease;
}
.v2 .hm-card picture {
    position: absolute;
    inset: 0;
    display: block;
    transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.v2 .hm-card img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}
.v2 .hm-grande img { object-position: 50% 28%; }
.v2 .hm-a img { object-position: 50% 18%; }
.v2 .hm-b img { object-position: 45% 30%; }
.v2 .hm-larga img { object-position: 50% 26%; }
/* Véu de leitura (o mesmo do portal): escurece só o pé da foto */
.v2 .hm-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.62) 36%, rgba(0, 0, 0, 0.08) 64%, rgba(0, 0, 0, 0) 80%);
    pointer-events: none;
}
.v2 .hm-larga::after {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0) 75%);
}
.v2 .hm-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 16px;
}
.v2 .hm-larga .hm-info { right: 40%; }
.v2 .hm-titulo {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
}
.v2 .hm-grande .hm-titulo { font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.01em; }
.v2 .hm-num {
    font-size: 0.8125rem;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.78);
    font-variant-numeric: tabular-nums;
}
.v2 .hm-num b { color: #fff; font-weight: 700; }
.v2 .hm-card:hover { border-color: rgba(240, 192, 0, 0.55); }
.v2 .hm-card:hover picture { transform: scale(1.03); }

@media (min-width: 900px) {
    .v2 .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
    .v2 .hero-text { max-width: 540px; }
}
@media (min-width: 900px) and (max-width: 1140px) {
    .v2 .hero-inner { gap: 36px; }
    .v2 .hero-mosaico { grid-template-rows: 184px 184px 128px; gap: 10px; }
    .v2 .hm-titulo { font-size: 0.875rem; }
    .v2 .hm-grande .hm-titulo { font-size: 1.0625rem; }
    .v2 .hm-info { padding: 12px; }
}
@media (max-width: 899px) {
    .v2 .hero-inner { grid-template-columns: minmax(0, 1fr); }
    .v2 .hero-mosaico { display: none; }
}

/* ── 6. Escolha rápida (avulsos + playlists + plano) ───────────────────── */
.v2 .escolha-rapida { padding: 40px 0 24px; }
.v2 .er-titulo { margin-bottom: 20px; }
.v2 .er-grade { max-width: none; gap: 12px; }
.v2 .er-card {
    gap: 4px;
    min-height: 124px;
    padding: 16px;
    background: var(--v2-sup);
    border: 1px solid var(--border);
    border-radius: 12px;
    font-family: var(--font-body);
    color: var(--text-primary);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.v2 .er-card:hover { border-color: rgba(240, 192, 0, 0.55); background: #141414; }
.v2 .er-nome { font-size: 0.9375rem; font-weight: 600; line-height: 1.3; color: #fff; }
.v2 .er-preco {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    color: var(--gold);
}
/* "Adicionar": parece botão (a base era texto cinza em caixa-alta) */
.v2 .er-add {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    margin-top: auto;
    padding: 0 12px;
    border: 1px solid rgba(240, 192, 0, 0.45);
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--gold);
    white-space: nowrap;
}
.v2 .er-card:hover .er-add { border-color: var(--gold); }
.v2 .er-card-larga {
    max-width: none;
    min-height: 88px;
    margin: 12px 0 0;
    padding: 16px 20px;
}
.v2 .er-card-larga .er-add { margin-top: 0; }
.v2 .er-sub { font-size: 0.8125rem; line-height: 1.4; color: var(--text-tertiary); }
.v2 .er-larga-preco { gap: 4px; }

.v2 .er-plano-cab {
    max-width: none;
    margin: 32px 0 12px;
    padding-top: 28px;
    border-top: 1px solid var(--border);
    align-items: flex-start;
    text-align: left;
    gap: 4px;
}
.v2 .er-plano-titulo {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: #fff;
}
.v2 .er-plano-ancora { max-width: none; font-size: 0.875rem; color: var(--text-secondary); }
.v2 .er-plano-ancora b { font-family: var(--font-display); font-variant-numeric: tabular-nums; color: var(--gold); }
.v2 .er-plano-lista { max-width: none; gap: 12px; }
.v2 .er-card.er-plano { margin: 0; min-height: 128px; border: 1px solid var(--border); }
.v2 .er-card.er-plano-destaque { background: var(--v2-sup); border-color: rgba(240, 192, 0, 0.5); }
.v2 .er-card.er-plano-destaque:hover { border-color: var(--gold); }
.v2 .er-plano-freq {
    gap: 8px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
}
.v2 .er-plano-tag { font-size: 10px; padding: 4px 8px; }
.v2 .er-plano .er-nome { font-size: 1.0625rem; font-weight: 700; }
.v2 .er-plano .er-sub { color: var(--text-secondary); }
.v2 .er-plano-unidade { font-size: 0.8125rem; font-weight: 500; color: var(--text-primary); }
.v2 .er-plano-periodo { font-size: 0.75rem; line-height: 1.3; color: var(--text-tertiary); }
.v2 .er-plano .er-add { margin-top: 6px; }
.v2 .er-rodape { text-align: left; font-size: 0.875rem; line-height: 1.55; color: var(--text-tertiary); }
.v2 .er-rodape a {
    padding: 10px 2px;
    margin: -10px 0;
    color: var(--gold);
    border-bottom: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── 7. Números (#resultados): faixa densa de 4 colunas ────────────────── */
.v2 .fatos {
    max-width: none;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--border);
}
.v2 .fato {
    grid-template-columns: 1fr;
    align-items: start;
    align-content: start;
    gap: 8px;
    padding: 24px 20px 0 0;
    border-bottom: 0;
}
.v2 .fato + .fato { padding-left: 20px; border-left: 1px solid var(--border); }
.v2 .fato-n {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    white-space: normal;
    color: #fff;
}
.v2 .fato-t { font-size: 0.875rem; line-height: 1.55; color: var(--text-secondary); }
@media (max-width: 760px) {
    .v2 .fatos { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 8px; }
    .v2 .fato:nth-child(3) { padding-left: 0; border-left: 0; }
    .v2 .fato-n { font-size: 1.375rem; }
}
@media (max-width: 380px) {
    .v2 .fatos { grid-template-columns: 1fr; }
    .v2 .fato + .fato { padding-left: 0; border-left: 0; }
}

/* ── 8. Exemplos (#exemplos): carrossel de posts reais ─────────────────── */
.v2 .showcase-track { gap: 16px; padding: 4px max(16px, calc((100vw - 880px) / 2)) 16px; }
.v2 .showcase-phone {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--v2-sup);
    box-shadow: none;
}
.v2 .showcase-tag { top: 10px; left: 10px; font-size: 10.5px; }
.v2 .showcase-materia-mock .showcase-tag { top: 6px; left: auto; right: 8px; }
.v2 .showcase-views {
    left: 10px;
    bottom: 10px;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.v2 .smm-bar { background: var(--v2-sup-2); border-bottom-color: var(--border); min-height: 34px; }
.v2 .smm-dot { display: none; }      /* abre espaço pra etiqueta não cobrir o endereço */
.v2 .smm-url { margin-left: 0; font-family: var(--font-body); font-size: 0.625rem; }
.v2 .showcase-cta { width: 100%; font-size: 0.875rem; padding: 0 14px; }
.v2 .showcase-bridge { background: var(--v2-sup); border-color: var(--border); padding: 24px 20px; }
.v2 .showcase-bridge-text {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
    text-transform: none;
    text-align: left;
    color: var(--text-tertiary);
}
.v2 .showcase-bridge-text em { color: #fff; }
.v2 .showcase-dots span { width: 6px; height: 6px; border-radius: 999px; transition: background-color 0.2s ease; }  /* sem animar largura: evita recalcular layout a cada troca */
.v2 .showcase-dots span.active { width: 18px; transform: none; background: var(--gold); }

/* ── 9. Painel (#painel): um bloco-superfície, texto em 2 colunas ──────── */
.v2 .incluso { padding-top: 72px; padding-bottom: 32px; }
.v2 .incluso-titulo { margin-bottom: 24px; }
.v2 .incluso-grade {
    max-width: none;
    gap: 28px;
    padding: 28px;
    background: var(--v2-sup);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.v2 .incluso-bloco h3 {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
    margin-bottom: 8px;
}
.v2 .incluso-bloco p { font-size: 0.9375rem; line-height: 1.65; color: var(--text-secondary); }
.v2 .incluso-nota { margin-top: 16px; text-align: left; font-size: 0.875rem; color: var(--text-tertiary); }

/* ── 10. Planos (#planos) ──────────────────────────────────────────────── */
.v2 .plan-segment { justify-content: flex-start; gap: 8px; margin-bottom: 24px; font-size: 0.9375rem; }
.v2 .seg-chip {
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--v2-borda-btn);
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    background: transparent;
}
.v2 .seg-chip:hover { border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.v2 .seg-chip.active { background: var(--text-primary); border-color: var(--text-primary); color: #0a0a0a; }
.v2 .seg-chip:focus-visible { outline: 2px solid var(--v2-foco); outline-offset: 2px; }

.v2 .plans { max-width: none; gap: 16px; align-items: stretch; }
.v2 .plan {
    display: flex;
    flex-direction: column;
    padding: 32px 28px 28px;
    background: var(--v2-sup);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: none;
    transform: none !important;              /* landing.js: tilt 3D inline */
}
.v2 .plan.highlight { background: var(--v2-sup); border-color: rgba(240, 192, 0, 0.55); box-shadow: none; }
.v2 .plan.highlight::before { content: none; }
.v2 .plan:hover { border-color: var(--border-hover) !important; box-shadow: none; }   /* base: !important */
.v2 .plan.highlight:hover { border-color: var(--gold) !important; }
.v2 .plan-tag { top: -11px; right: auto; left: 28px; }
.v2 .plan-freq {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
    margin-bottom: 8px;
}
.v2 .plan-name {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
    text-transform: none;
    color: #fff;
    margin-bottom: 4px;
}
.v2 .plan-desc { font-size: 0.9375rem; color: var(--text-secondary); margin-bottom: 24px; }
.v2 .plan-pricing { margin-bottom: 20px; padding-bottom: 20px; border-bottom-color: var(--border); }
.v2 .plan-price {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--gold);
}
.v2 .plan:hover .plan-price { transform: none; }
.v2 .plan-price span {
    margin-left: 4px;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--text-tertiary);
}
.v2 .plan-per-unit { margin-top: 8px; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); }
.v2 .plan-items { margin-bottom: auto; padding-bottom: 20px; }   /* "Inclui…" e botão alinhados no pé */
.v2 .plan-items li { gap: 10px; padding: 6px 0; font-size: 0.9375rem; color: var(--text-secondary); }
.v2 .plan-items li::before { font-size: 0.8125rem; color: var(--gold); }

/* DEFEITO 1: a regra base .plan-includes fica depois de 45 "}" sobrando no
   landing.css e o navegador a descarta. Aqui ela é redeclarada inteira. */
.v2 .plan-includes,
.v2 .plan:hover .plan-includes,
.v2 .plan.highlight .plan-includes {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 20px;
    padding: 12px 14px;
    background: var(--gold-surface);
    border: 1px solid rgba(240, 192, 0, 0.22);
    border-radius: 8px;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-secondary);
}
.v2 .plan-includes svg { flex-shrink: 0; margin-top: 3px; }
.v2 .plan-includes-link {
    display: inline-block;
    padding: 10px 0;
    margin: -10px 0;
    color: var(--gold);
    font-weight: 600;
    border-bottom: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.v2 .plan-cta { width: 100%; margin-top: 0; }
.v2 .plan-note { margin-top: 20px; text-align: left; font-size: 0.875rem; line-height: 1.6; color: var(--text-tertiary); }
/* style="text-align:center" inline no bloco do link pros avulsos */
.v2 #planos > .container > .reveal:last-child { text-align: left !important; }

/* ── 11. Combos (#avulso) ──────────────────────────────────────────────── */
.v2 .combos-wrap { max-width: none; padding-top: 0; border-top: 0; }
.v2 .combos { gap: 16px; padding-top: 12px; }
.v2 .combo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    background: var(--v2-sup) !important;          /* base: gradiente !important */
    border: 1px solid var(--border) !important;    /* base: !important */
    border-radius: 12px !important;                /* base: 16px !important */
    padding: 28px 24px 24px !important;            /* base: !important */
    box-shadow: none;
    transform: none !important;                    /* landing.js: tilt 3D inline */
}
.v2 .combo.featured,
.v2 .combo:has(.combo-badge) { border-color: rgba(240, 192, 0, 0.55) !important; box-shadow: none; }
.v2 .combo.featured::before { content: none; }
.v2 .combo:hover { border-color: var(--border-hover) !important; box-shadow: none; }
.v2 .combo.featured:hover { border-color: var(--gold) !important; }
.v2 .combo-badge { top: -11px; left: 24px; right: auto; translate: none; }
.v2 .combo-name {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700 !important;                   /* base: 800 !important */
    letter-spacing: -0.01em;
    text-transform: none;
    color: #fff !important;                        /* base: !important */
    background: none;
    -webkit-text-fill-color: currentColor;
    margin-bottom: 4px;
}
/* margin-bottom:auto empurra preço e botão pro pé: os 3 cards alinham
   mesmo quando a composição de um quebra em 2 linhas */
.v2 .combo-desc { font-size: 0.9375rem; font-weight: 400; color: var(--text-secondary) !important; margin-bottom: auto; padding-bottom: 16px; }
.v2 .combo-was {
    font-size: 0.875rem !important;                /* base: !important */
    opacity: 1;
    color: var(--text-quaternary);
    font-variant-numeric: tabular-nums;
}
.v2 .combo-price {
    font-family: var(--font-display);
    font-size: 2rem !important;                    /* base: !important */
    font-weight: 700 !important;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--gold);
    margin-bottom: 20px;
}
.v2 .combo:hover .combo-price { transform: none; }
.v2 .combo-cta { width: 100%; margin-top: 0; }

/* ── 12. Playlists (#playlists) ────────────────────────────────────────── */
.v2 .playlists-gallery { max-width: none; gap: 12px; margin-bottom: 24px; }
.v2 .playlist-card {
    background: var(--v2-sup);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}
.v2 .playlist-card:hover { transform: none; border-color: var(--border-hover); }
.v2 .playlist-name {
    padding: 12px 14px 2px;
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: #fff;
}
.v2 .playlist-saves { padding: 0 14px; font-size: 0.8125rem; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.v2 .playlist-link {
    padding: 8px 14px 14px;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    opacity: 1;
    color: var(--gold);
}
.v2 .playlist-package {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 24px;
    align-items: center;
    max-width: none;
    margin: 0;
    padding: 28px 24px 24px;
    text-align: left;
    background: var(--v2-sup);
    border: 1px solid rgba(240, 192, 0, 0.55);
    border-radius: 12px;
}
.v2 .playlist-package::before { content: none; }
.v2 .playlist-package-badge { top: -11px; right: auto; left: 24px; }
.v2 .playlist-package-name {
    grid-column: 1;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: none;
    color: #fff;
    margin-bottom: 4px;
}
.v2 .playlist-package-desc { grid-column: 1; margin: 0; font-size: 0.9375rem; color: var(--text-secondary); }
.v2 .playlist-package-price {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--gold);
}
.v2 .playlist-package-cta { grid-column: 2; grid-row: 2; width: auto; margin: 0; }
@media (max-width: 640px) {
    .v2 .playlist-package { grid-template-columns: 1fr; padding: 28px 20px 20px; }
    .v2 .playlist-package-price,
    .v2 .playlist-package-cta { grid-column: 1; grid-row: auto; justify-self: stretch; }
    .v2 .playlist-package-price { margin: 16px 0 12px; }
    .v2 .playlist-package-cta { width: 100%; }
}

/* ── 13. FAQ: uma superfície só, perguntas separadas por filete ────────── */
.v2 .faq {
    max-width: none;
    padding: 0 4px;
    background: var(--v2-sup);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.v2 .faq-item,
.v2 .faq-item:hover {
    background: transparent !important;            /* base: !important */
    border: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
}
.v2 .faq-item:last-child { border-bottom: 0 !important; }
.v2 .faq-q {
    min-height: 60px;
    gap: 16px;
    padding: 16px 20px !important;                 /* base: !important */
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600 !important;                   /* base: 700 !important */
    line-height: 1.4;
    color: #fff;
}
.v2 .faq-item:hover .faq-q,
.v2 .faq-q:hover { color: var(--gold); }
.v2 .faq-toggle {
    width: 32px;
    height: 32px;
    margin-left: 0;
    border: 1px solid var(--v2-borda-btn);
    border-radius: 8px;
    font-size: 18px;
    font-weight: 500;
    color: var(--text-primary) !important;         /* base: !important */
}
.v2 .faq-item.active .faq-toggle {
    background: transparent;
    border-color: rgba(240, 192, 0, 0.55);
    color: var(--gold) !important;
}
.v2 .faq-a-inner { padding: 0 20px 20px; font-size: 0.9375rem; line-height: 1.7; color: var(--text-secondary); max-width: 68ch; }

/* ── 14. Contato ───────────────────────────────────────────────────────── */
.v2 .lead-form { max-width: 640px; margin: 0; }
.v2 .lead-form-grid { gap: 12px; }
.v2 .lead-input {
    min-height: 52px;
    padding: 0 16px;
    background-color: var(--v2-sup);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 16px;
    color: #fff;
}
.v2 .lead-select { padding-right: 44px; color: var(--text-quaternary); }
.v2 .lead-select.has-value { color: #fff; }
.v2 .lead-input::placeholder { color: var(--text-quaternary); opacity: 1; }
.v2 .lead-input:hover { border-color: rgba(255, 255, 255, 0.22); }
.v2 .lead-input:focus { border-color: var(--gold); box-shadow: none; }

/* ── 15. Rodapé ────────────────────────────────────────────────────────── */
.v2 .footer {
    padding: 40px 24px 48px;
    background: #050505;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.8125rem;
    letter-spacing: 0;
    color: var(--text-tertiary);
}
.v2 .footer-links { column-gap: 24px; row-gap: 8px; margin-bottom: 14px; }
.v2 .footer a { padding: 12px 4px; margin: -12px -4px; color: var(--text-secondary); }
.v2 .footer-copy { color: var(--text-quaternary); }

/* ── 16. Cookies: barra compacta ───────────────────────────────────────── */
.v2 .cookie-banner {
    padding: 12px max(16px, calc((100vw - 1140px) / 2 + 24px));
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    background: #0d0d0d;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.v2 .cookie-inner { max-width: none; gap: 16px; }
.v2 .cookie-text {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--text-secondary);
}
.v2 .cookie-text a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
.v2 .cookie-actions { gap: 8px; }
.v2 .cookie-btn {
    min-height: 44px;
    padding: 0 16px;
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--v2-borda-btn);
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}
.v2 .cookie-accept { background: #1c1c1c; color: #fff; }
.v2 .cookie-btn:hover { border-color: rgba(255, 255, 255, 0.45); background: #222; color: #fff; transform: none; box-shadow: none; }

/* ── 17. Flutuantes ────────────────────────────────────────────────────── */
.v2 .wa-float {
    width: auto !important;                         /* base mobile: 44px !important */
    height: 44px !important;
    right: 24px;
    gap: 8px;
    padding: 0 14px 0 12px;
    background: #141414;
    color: var(--text-primary);
    border: 1px solid var(--v2-borda-btn);
    border-radius: 8px;
    box-shadow: none;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
}
.v2 .wa-float svg { width: 16px; height: 16px; fill: currentColor; }
.v2 .wa-float:hover { transform: none; box-shadow: none; background: #1c1c1c; border-color: rgba(255, 255, 255, 0.4); }

.v2 .cart-float {
    width: 52px;
    height: 52px;
    right: 24px;
    background: var(--gold);
    border-radius: 12px;
    box-shadow: none;
}
.v2 .cart-float:hover { transform: none; background: var(--v2-ouro-hover); }
.v2 .cart-float svg { stroke: #0a0a0a; }
.v2 .cart-float #cartCount {
    top: -7px;
    right: -7px;
    width: 22px;
    height: 22px;
    background: #fff;
    color: #0a0a0a;
    border: 2px solid #080808;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
}

/* Barra de cookies aberta: os flutuantes sobem em vez de ficar por baixo. */
.v2:has(#cookieBanner[style*="block"]) .wa-float { bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; }
.v2:has(#cookieBanner[style*="block"]) .cart-float { bottom: calc(140px + env(safe-area-inset-bottom, 0px)) !important; }

/* ── 18. Carrinho lateral (só pele: JS e fluxo intactos) ───────────────── */
.v2 .cart-sidebar { background: #0d0d0d; border-left: 1px solid var(--border); }
.v2 .cart-header h3 { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; }
.v2 .cart-close { border-radius: 8px; border-color: var(--border-hover); color: var(--text-secondary); }
.v2 .cart-item-name { font-size: 0.9375rem; }
.v2 .cart-item-type { font-size: 0.6875rem; color: var(--text-tertiary); }
.v2 .cart-item-desc { font-size: 0.8125rem; color: var(--text-tertiary); }
.v2 .cart-item-price { font-family: var(--font-display); font-size: 1rem; font-variant-numeric: tabular-nums; }
.v2 .cart-item-remove,
.v2 .cart-qty button { border-radius: 8px; }
.v2 .cart-qty output { font-family: var(--font-body); font-variant-numeric: tabular-nums; }
.v2 .cart-total { font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.v2 .cart-checkout-title { font-size: 0.8125rem; letter-spacing: 0.04em; color: var(--text-secondary); }
.v2 .cart-input {
    min-height: 48px;
    padding: 0 14px;
    background-color: var(--v2-sup);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    color: #fff;
}
.v2 .cart-input:focus { border-color: var(--gold); }
.v2 .cart-checkout-btn {
    border-radius: 8px;
    background: #1a1a1a;
    color: var(--text-primary);
    border: 1px solid var(--v2-borda-btn);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}
.v2 .cart-checkout-btn:hover { background: #222; }
.v2 .cart-checkout-btn-pay {
    --green: #0a0a0a;
    background: var(--gold);
    color: #0a0a0a;
    border-color: var(--gold);
}
.v2 .cart-checkout-btn-pay:hover { background: var(--v2-ouro-hover); transform: none; box-shadow: none; }
.v2 .cart-checkout-link { font-size: 0.875rem; color: var(--text-secondary); }
.v2 .ck-fone-btn { border-radius: 8px; }
.v2 .ck-pix-recheck { min-height: 44px; padding: 0 16px; border-radius: 8px; font-size: 0.875rem; }
.v2 .cart-limite { border-radius: 8px; }

/* Barra de acesso pós-compra: sai o verde, entra a gramática da página. */
.v2 .raprj-acesso-barra {
    background: var(--v2-sup);
    border-top: 1px solid rgba(240, 192, 0, 0.5);
    box-shadow: none;
    font-family: var(--font-body);
}
.v2 .raprj-acesso-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    background: var(--gold);
    color: #0a0a0a;
    border-radius: 8px;
}
.v2 .raprj-acesso-btn:hover { filter: none; background: var(--v2-ouro-hover); }
.v2 .raprj-acesso-x { min-width: 44px; min-height: 44px; color: var(--text-secondary); }

/* ═══ CELULAR ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .v2 .container { padding: 0 20px; }

    /* Header: logo + "Ver preços" + menu. Suporte vai pro menu. */
    .v2 .nav { padding: 8px 16px; }
    .v2 .nav-cta { display: none; }
    .v2 .nav-buy { min-height: 44px; padding: 0 14px; font-size: 0.8125rem; }

    /* Seções: a base força 38px/30px com !important */
    .v2 .section { padding: 56px 0 48px !important; }
    .v2 .section-head { margin-bottom: 24px; }
    .v2 .section-title {
        font-size: clamp(1.5rem, 6.4vw, 1.75rem) !important;
        line-height: 1.18 !important;
        margin-bottom: 8px !important;
    }
    .v2 .incluso-titulo,
    .v2 .er-titulo { font-size: clamp(1.375rem, 6vw, 1.625rem); }

    /* Hero curto: a escolha rápida começa na primeira rolagem */
    .v2 .hero {
        text-align: left;
        padding: 88px 20px 24px !important;        /* base: !important */
    }
    .v2 .hero-text { text-align: left !important; }  /* base: center !important */
    .v2 .hero h1 {
        font-size: clamp(1.75rem, 7.4vw, 2.25rem) !important;
        line-height: 1.12 !important;
        margin: 0 0 12px !important;
    }
    .v2 .hero-desc {
        font-size: 0.9375rem !important;
        line-height: 1.55 !important;
        color: var(--text-secondary) !important;
        margin: 0 0 16px !important;
        max-width: none;
    }
    .v2 .v2-etiqueta { margin-bottom: 12px; }
    .v2 .v2-faixa { display: flex; margin-bottom: 16px; padding: 10px 14px; }
    .v2 .v2-faixa-preco { font-size: 1.375rem; }
    .v2 .hero-actions {
        flex-direction: row;
        align-items: stretch;
        max-width: none;
        margin: 0 !important;                      /* base: !important */
        gap: 8px;
    }
    .v2 .hero-actions .btn { width: auto; }
    .v2 .hero-actions .btn-primary { flex: 1 1 auto; }
    .v2 .hero-actions .btn-whatsapp { flex: 0 0 auto; padding: 0 14px; }
    .v2 .hero-prova-link { margin-top: 4px; font-size: 0.875rem; }

    .v2 .escolha-rapida { padding: 16px 0 8px; }

    /* Base mobile força dourado/uppercase com !important nos CTAs de card */
    .v2 .plan-cta.btn-secondary,
    .v2 .plan-cta.btn,
    .v2 .combo-cta {
        background: var(--gold) !important;
        color: #0a0a0a !important;
        border: 1px solid var(--gold) !important;
        font-weight: 700 !important;
        padding: 0 22px !important;
        font-size: 0.9375rem !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
    }
    .v2 .plan-cta.btn-secondary:hover,
    .v2 .plan-cta.btn:hover { background: var(--v2-ouro-hover) !important; border-color: var(--v2-ouro-hover) !important; }
    .v2 .plan.highlight .plan-cta { box-shadow: none; }
    .v2 .plan { padding: 28px 20px 20px; }
    .v2 .plan-price { font-size: 2.125rem; }
    .v2 .plan-segment { padding: 0; }
    .v2 .plan-segment > span:first-child { text-align: left; }

    .v2 .incluso-grade { padding: 20px; gap: 20px; }
    .v2 .faq-q { padding: 14px 16px !important; font-size: 0.9375rem !important; }
    .v2 .faq-a-inner { padding: 0 16px 16px; }

    .v2 .footer { padding-bottom: 96px; }

    /* Cookies: texto em cima (2 linhas), dois botões lado a lado embaixo */
    .v2 .cookie-inner { flex-direction: column; align-items: stretch; gap: 10px; text-align: left; }
    .v2 .cookie-actions { width: 100%; }
    .v2 .cookie-btn { flex: 1 1 0; padding: 0 10px; }
    .v2:has(#cookieBanner[style*="block"]) .wa-float { bottom: calc(128px + env(safe-area-inset-bottom, 0px)) !important; }
    .v2:has(#cookieBanner[style*="block"]) .cart-float { bottom: calc(184px + env(safe-area-inset-bottom, 0px)) !important; }

    /* Flutuantes: a base fixa 44px e .85rem com !important */
    .v2 .wa-float { right: 16px !important; }
    .v2 .cart-float { width: 48px !important; height: 48px !important; right: 16px !important; }
    .v2 .cart-float svg { width: 20px !important; height: 20px !important; }
    .v2 .cart-float #cartCount { width: 20px !important; height: 20px !important; font-size: 0.6875rem !important; }
}

@media (max-width: 480px) {
    .v2 .container { padding: 0 16px; }
    .v2 .section { padding: 48px 0 40px !important; }
    .v2 .hero { padding: 84px 16px 20px !important; }
    .v2 .hero h1 { font-size: clamp(1.75rem, 7.6vw, 2rem) !important; }
    .v2 .hero-desc { font-size: 0.9375rem !important; }
    .v2 .plan,
    .v2 .combo { padding: 28px 18px 18px !important; }
    .v2 .playlist-card { padding: 0 !important; }
    .v2 .er-grade { gap: 10px; }
    .v2 .er-card { padding: 14px; min-height: 116px; }
    .v2 .er-card-larga { padding: 14px 16px; gap: 12px; }
    .v2 .er-preco { font-size: 1.375rem; }
}

@media (max-width: 360px) {
    .v2 .nav-logo { height: 24px; }
    .v2 .nav-verified { display: none; }
    .v2 .nav-buy { padding: 0 12px; }
    .v2 .hero-actions { flex-wrap: wrap; }
    .v2 .hero-actions .btn { flex: 1 1 100%; }
    .v2 .er-card-larga .er-larga-preco { gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
    .v2 .hm-card picture { transition: none; }
    .v2 .hm-card:hover picture { transform: none; }
}

/* ═══ RODADA 2 (24/09/2026) ══════════════════════════════════════════════
   1) Prova no celular: faixa com 3 publicações reais logo abaixo dos botões
      (o mosaico do hero só existe >= 900px). Substitui o link "ou veja
      primeiro os posts", então o hero cresce só ~40px e a escolha rápida
      continua na primeira tela.
   2) Página mais curta no celular: números em 2 colunas, combos em linha,
      listas dos planos mais justas.
   3) "Adicionar" dos avulsos ocupa a largura do card (alvo maior, mais claro). */
.v2 .hero-provas { display: none; }
@media (max-width: 899px) {
    .v2 .hero-provas {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        margin-top: 14px;
    }
    .v2 .hero-prova-link { display: none; }
}
.v2 .hp-card {
    position: relative;
    display: block;
    height: 92px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--v2-sup);
    text-decoration: none;
}
.v2 .hp-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.v2 .hp-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0.88) 100%);
}
.v2 .hp-fmt {
    position: absolute;
    z-index: 1;
    top: 6px;
    left: 6px;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--gold);
    color: #0a0a0a;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.v2 .hp-num {
    position: absolute;
    z-index: 1;
    left: 8px;
    right: 6px;
    bottom: 6px;
    font-size: 0.6875rem;
    line-height: 1.2;
    color: #e8e8e8;
}
.v2 .hp-num b { display: block; font-size: 0.9375rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }

/* Números: 2 colunas até 330px (antes caía pra 1 coluna já em 380px,
   ou seja, em quase todo celular) */
@media (max-width: 380px) {
    .v2 .fatos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .v2 .fato + .fato { padding-left: 16px; border-left: 1px solid var(--border); }
    .v2 .fato:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 330px) {
    .v2 .fatos { grid-template-columns: 1fr; }
    .v2 .fato + .fato { padding-left: 0; border-left: 0; }
}

@media (max-width: 640px) {
    /* Combos em linha: nome e composição à esquerda, preço à direita,
       botão embaixo. Cada card cai de ~330px pra ~190px. */
    .v2 .combos { gap: 12px; }
    .v2 .combo {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "nome was" "desc preco" "cta cta";
        column-gap: 12px;
        row-gap: 2px;
        align-items: end;
        padding: 20px 18px 18px !important;
        text-align: left !important;
    }
    .v2 .combo-name { grid-area: nome; align-self: start; margin: 0 !important; }
    .v2 .combo-desc { grid-area: desc; align-self: start; margin: 0 !important; padding-bottom: 0; }
    .v2 .combo-was { grid-area: was; justify-self: end; margin: 0 !important; }
    .v2 .combo-price { grid-area: preco; justify-self: end; margin: 0 !important; font-size: 1.625rem !important; }
    .v2 .combo-cta { grid-area: cta; margin-top: 14px !important; }

    /* Planos: listas mais justas */
    .v2 .plan-items { margin: 16px 0 !important; }
    .v2 .plan-items li { padding: 5px 0 !important; font-size: 0.9375rem; }
    .v2 .plan-price { font-size: 2rem; }

    /* Linha de plano da escolha rápida: a conta "por aparição" quebra
       melhor em duas linhas equilibradas */
    .v2 .er-plano-unidade { text-wrap: balance; }

    /* Avulsos: "Adicionar" na largura do card */
    .v2 .er-grade .er-add {
        width: 100%;
        justify-content: center;
        min-height: 36px;
    }
}

/* ═══ RODADA 3 — CELULAR NOTA 10 (24/09/2026) ═══════════════════════════
   80% das visitas são no celular. Cada regra abaixo corrige um defeito
   visto em 375px: texto longo, conta quebrando, plano repetido e enorme,
   playlists ocupando 700px, barra de cookies na primeira tela. */
@media (max-width: 640px) {
    .v2 .v2-so-desk { display: none; }

    /* Linha de plano da escolha rápida: texto em cima, preço + botão numa
       faixa embaixo. Acaba a conta "menos / de R$90 cada" espremida. */
    .v2 .er-card.er-plano {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        min-height: 0;
    }
    .v2 .er-plano .er-larga-texto { width: 100%; }
    .v2 .er-plano .er-larga-preco {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        width: 100%;
        padding-top: 12px;
        border-top: 1px solid var(--border);
        white-space: normal;
    }
    .v2 .er-plano-periodo { text-align: left; }
    .v2 .er-plano .er-add { margin: 0 0 0 auto; min-height: 40px; padding: 0 18px; }

    /* Planos de 4 semanas (seção grande): o mesmo plano já está na escolha
       rápida. Aqui fica o detalhe, sem ocupar duas telas por card. */
    .v2 .plan-segment { display: none !important; }
    .v2 .plan { padding: 22px 18px 18px !important; }
    .v2 .plan-desc { margin-bottom: 10px; }
    .v2 .plan-pricing { padding-bottom: 12px; margin-bottom: 12px; }
    .v2 .plan-items {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 14px;
        margin: 0 0 14px !important;
        padding-bottom: 0;
    }
    .v2 .plan-items li { padding: 0 !important; font-size: 0.875rem; }
    .v2 .plan-includes,
    .v2 .plan:hover .plan-includes,
    .v2 .plan.highlight .plan-includes { padding: 10px 12px !important; margin-bottom: 12px !important; font-size: 0.8125rem !important; }
    .v2 .plan-note { font-size: 0.8125rem; }

    /* Playlists: lista compacta (capa 64px à esquerda) em vez de 2×2 */
    .v2 .playlists-gallery { grid-template-columns: 1fr !important; gap: 8px; }
    .v2 .playlist-card {
        display: grid !important;
        grid-template-columns: 64px minmax(0, 1fr) auto;
        grid-template-areas: "capa nome link" "capa saves link";
        align-items: center;
        column-gap: 12px;
        padding: 8px !important;
    }
    .v2 .playlist-cover { grid-area: capa; width: 64px; height: 64px; border-radius: 8px; }
    .v2 .playlist-name { grid-area: nome; align-self: end; padding: 0; }
    .v2 .playlist-saves { grid-area: saves; align-self: start; padding: 0; }
    .v2 .playlist-link {
        grid-area: link;
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0 6px;
        white-space: nowrap;
    }

    /* Cookies: mais baixa (texto 2 linhas + botões) */
    .v2 .cookie-banner { padding-top: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
    .v2 .cookie-inner { gap: 8px; }
    .v2 .cookie-text { font-size: 0.75rem; }
}
@media (max-width: 640px) {
    /* 320px: a linha de plano passava 6px da tela (conteúdo sem min-width:0) */
    .v2 .er-card.er-plano { width: 100%; min-width: 0; max-width: 100%; }
    .v2 .er-plano .er-larga-texto,
    .v2 .er-plano .er-nome,
    .v2 .er-plano .er-sub,
    .v2 .er-plano-unidade { min-width: 0; overflow-wrap: anywhere; white-space: normal; }

    /* Playlists: nome numa linha; salvamentos e "Ouvir" na linha de baixo.
       O card inteiro já é o link, então o rótulo pode ser pequeno. */
    .v2 .playlist-card {
        grid-template-columns: 64px minmax(0, 1fr) auto;
        grid-template-areas: "capa nome nome" "capa saves link";
        row-gap: 4px;
        min-height: 80px;
    }
    .v2 .playlist-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.9375rem; }
    .v2 .playlist-saves { font-size: 0.75rem; }
    .v2 .playlist-link { min-height: 0; padding: 0; font-size: 0.75rem; align-self: start; }
}
@media (max-width: 640px) {
    /* "Inclui Painel Exclusivo" repete a seção logo acima (#painel, que diz
       exatamente o que vem no plano). No celular sai do card. */
    .v2 .plan .plan-includes { display: none !important; }
}
@media (max-width: 640px) {
    /* Faixa de preço da linha de plano: valor em cima do período, botão à
       direita. Em 320px o "Adicionar" do Premium passava da borda do card. */
    .v2 .er-plano .er-larga-preco {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "preco add" "periodo add";
        column-gap: 12px;
        row-gap: 2px;
        align-items: center;
    }
    .v2 .er-plano .er-preco { grid-area: preco; }
    .v2 .er-plano-periodo { grid-area: periodo; white-space: nowrap; }
    .v2 .er-plano .er-add { grid-area: add; margin: 0; }
}
@media (max-width: 360px) {
    .v2 .er-plano-periodo { white-space: normal; }
    .v2 .er-plano .er-add { padding: 0 14px; }
}
@media (max-width: 640px) {
    /* Suporte flutuante: só o ícone no celular (o rótulo cobria texto
       durante a rolagem). aria-label "Suporte no WhatsApp" continua. */
    .v2 .wa-float { width: 48px !important; height: 48px !important; padding: 0 !important; justify-content: center; border-radius: 999px !important; }
    .v2 .wa-float-rotulo { display: none; }
}