/* ═══ v3 "CANAL" (24/09/2026, prévia em ?visual=canal) ══════════════════
   O v2 trouxe o mundo do portal, mas o dono achou que ainda parecia
   template: pílula dourada + título Poppins + bloco, 10 vezes; stat row;
   cards arredondados iguais. A identidade própria do Canal RapRJ já existe
   nas capas das playlists (assets/img/playlists/cover_*.webp):

     - título numa caixa AMARELA com letra preta pesada, caixa-alta
     - selo BRANCO acima, texto preto espaçado ("AS MELHORES")
     - número de canal "CH 04" em caixa preta, fonte de máquina
     - faixa de TV na base: vermelho #e6212d, rosa #e8008d, azul #0069c7,
       verde #009e54 (cores medidas nas capas)
     - fotos em duotone, cantos retos

   Esta folha aplica essa linguagem por cima do v2. Toda regra começa com
   .v3 (body tem "v2 v3") e vem depois do landing-v2.css, então vence por
   ordem; !important só onde o v2/base já usa. */

.v3 {
    --tv: linear-gradient(90deg, #e6212d 0 25%, #e8008d 25% 50%, #0069c7 50% 75%, #009e54 75% 100%);
    --v3-amarelo: #f5c400;
    --v3-titulo: 'Archivo', 'Poppins', system-ui, sans-serif;
    --v3-selo: 'Barlow Semi Condensed', 'Poppins', system-ui, sans-serif;
    --v3-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* ── Faixa de TV: embaixo do topo e em cima do rodapé ─────────────────── */
.v3 .nav { border-bottom: 0 !important; }
.v3 .nav::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: var(--tv);
}
.v3 .footer { position: relative; border-top: 0 !important; }
.v3 .footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 4px;
    background: var(--tv);
}

/* ── Selo das seções: [CH 01][PREÇOS] ─────────────────────────────────── */
.v3 { counter-reset: canal; }
.v3 .v2-etiqueta {
    display: inline-flex;
    align-items: stretch;
    padding: 0;
    border-radius: 0 !important;
    background: #fff;
    color: #0a0a0a;
    font-family: var(--v3-selo);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
}
.v3 .v2-etiqueta { padding: 6px 9px 5px; }
.v3 section[id] .v2-etiqueta { counter-increment: canal; padding-left: 0; }
.v3 section[id] .v2-etiqueta::before {
    content: "CH " counter(canal, decimal-leading-zero);
    display: inline-flex;
    align-items: center;
    margin: -6px 9px -5px 0;
    padding: 0 8px;
    background: #0a0a0a;
    color: #fff;
    font-family: var(--v3-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    border: 1px solid #fff;
}

/* ── Títulos: caixa amarela, letra preta pesada (igual às capas) ──────── */
.v3 .section-title,
.v3 .er-titulo,
.v3 .incluso-titulo {
    display: inline !important;
    padding: 0.08em 0.3em 0.02em !important;
    background: var(--v3-amarelo);
    color: #0a0a0a !important;
    font-family: var(--v3-titulo) !important;
    font-weight: 900 !important;
    font-size: clamp(1.5rem, 3.2vw, 2.25rem) !important;
    line-height: 1.32 !important;
    letter-spacing: -0.01em !important;
    text-transform: uppercase !important;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
/* O título é inline (a caixa acompanha as linhas); o espaço que ele tinha
   embaixo passa para o elemento seguinte. */
.v3 .section-head .section-subtitle,
.v3 .section-head p { margin-top: 18px !important; }
.v3 .er-titulo + *,
.v3 .incluso-titulo + * { margin-top: 20px; }
.v3 .section-head { margin-bottom: 28px; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.v3 .hero h1 {
    font-family: var(--v3-titulo) !important;
    font-weight: 900 !important;
    text-transform: uppercase;
    letter-spacing: -0.015em !important;
    line-height: 1.08 !important;
}
.v3 .hero-num {
    display: inline;
    padding: 0 0.18em;
    background: var(--v3-amarelo);
    color: #0a0a0a !important;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.v3 .v2-faixa { border-radius: 0 !important; border-left: 4px solid var(--v3-amarelo); }
.v3 .v2-faixa-preco { font-family: var(--v3-titulo); font-weight: 900; }

/* ── Botões: caixa reta, letra pesada ─────────────────────────────────── */
.v3 .btn,
.v3 .btn-primary,
.v3 .nav-buy,
.v3 .nav-cta,
.v3 .plan-cta,
.v3 .combo-cta,
.v3 .playlist-package-cta,
.v3 .showcase-cta,
.v3 .cart-checkout-btn,
.v3 .cookie-btn,
.v3 .er-add {
    border-radius: 0 !important;
}
.v3 .btn-primary,
.v3 .nav-buy,
.v3 .plan-cta,
.v3 .combo-cta,
.v3 .playlist-package-cta,
.v3 .cart-checkout-btn {
    font-family: var(--v3-titulo) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
}
.v3 .btn-primary,
.v3 .nav-buy { background: var(--v3-amarelo) !important; color: #0a0a0a !important; }

/* ── Cards: cantos retos + faixa de TV na base (como as capas) ────────── */
.v3 .er-card,
.v3 .hm-card,
.v3 .hp-card,
.v3 .plan,
.v3 .combo,
.v3 .playlist-card,
.v3 .playlist-package,
.v3 .incluso-grade,
.v3 .v2-faixa,
.v3 .faq-list,
.v3 .faq-item,
.v3 .showcase-phone,
.v3 .cart-item,
.v3 input,
.v3 select,
.v3 textarea {
    border-radius: 0 !important;
}
.v3 .er-card,
.v3 .plan,
.v3 .combo,
.v3 .playlist-card,
.v3 .playlist-package { position: relative; }
.v3 .er-card::after,
.v3 .plan::after,
.v3 .combo::after,
.v3 .playlist-card::after,
.v3 .playlist-package::after {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    bottom: -1px;
    height: 3px;
    background: var(--tv);
    pointer-events: none;
}
.v3 .er-card:hover,
.v3 .plan:hover,
.v3 .combo:hover { border-color: var(--v3-amarelo) !important; }

/* Selos dentro dos cards (MAIS VENDIDO, MELHOR CUSTO, PACOTE): brancos,
   retos, como "AS MELHORES" das capas. */
.v3 .er-plano-tag,
.v3 .plan-tag,
.v3 .combo-badge,
.v3 .playlist-package-badge {
    border-radius: 0 !important;
    background: #fff !important;
    color: #0a0a0a !important;
    font-family: var(--v3-selo) !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
}

/* Preços: letra das capas */
.v3 .er-preco,
.v3 .plan-price,
.v3 .combo-price,
.v3 .playlist-package-price,
.v3 .cart-total span:last-child,
.v3 #cartTotal {
    font-family: var(--v3-titulo) !important;
    font-weight: 900 !important;
    letter-spacing: -0.01em !important;
}
.v3 .plan-name,
.v3 .combo-name { font-family: var(--v3-titulo) !important; font-weight: 900 !important; text-transform: uppercase; letter-spacing: 0 !important; }
.v3 .er-plano .er-nome { font-family: var(--v3-titulo); font-weight: 900; text-transform: uppercase; letter-spacing: 0; }

/* ── Duotone nas fotos das publicações (mosaico e faixa do celular) ───── */
.v3 .hm-card picture,
.v3 .hp-card picture { position: absolute; inset: 0; display: block; }
.v3 .hm-card img,
.v3 .hp-card img { filter: grayscale(1) contrast(1.15) brightness(1.05); }
.v3 .hm-card picture::after,
.v3 .hp-card picture::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--v3-amarelo);
    mix-blend-mode: multiply;
    pointer-events: none;
}
.v3 .hm-a picture::after,
.v3 .hp-card:nth-child(2) picture::after { background: #8a3ffc; }
.v3 .hm-b picture::after,
.v3 .hp-card:nth-child(3) picture::after { background: #e6212d; }
.v3 .hm-card .v2-etiqueta,
.v3 .hp-fmt {
    border-radius: 0 !important;
    background: #fff;
    color: #0a0a0a;
    font-family: var(--v3-selo);
    font-weight: 700;
    letter-spacing: 0.12em;
}
.v3 .hm-titulo {
    font-family: var(--v3-titulo);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0;
    line-height: 1.12;
}
.v3 .hm-card,
.v3 .hp-card { border: 0 !important; }
.v3 .hm-card { box-shadow: inset 0 -4px 0 0 transparent; }
.v3 .hm-card::before,
.v3 .hp-card::before {
    content: "";
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: var(--tv);
}

/* ── Números: de "stat row" de template para tarja de TV ─────────────── */
.v3 .fatos { border-top: 0 !important; gap: 10px !important; }
.v3 .fato,
.v3 .fato + .fato {
    display: flex !important;
    align-items: stretch;
    gap: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--border) !important;
    background: var(--v2-sup, #111);
}
.v3 .fato-n {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    min-width: 7.2em;
    padding: 12px 14px;
    background: var(--v3-amarelo);
    color: #0a0a0a !important;
    font-family: var(--v3-titulo) !important;
    font-weight: 900 !important;
    font-size: 1.25rem !important;
}
.v3 .fato-t { display: flex; align-items: center; padding: 10px 14px; font-size: 0.875rem; }
@media (min-width: 761px) {
    .v3 .fatos { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 760px) {
    .v3 .fatos { grid-template-columns: 1fr !important; }
    .v3 .fato-n { min-width: 6.4em; font-size: 1.0625rem !important; }
}

/* ── FAQ, formulário, cookies ─────────────────────────────────────────── */
.v3 .faq-toggle { border-radius: 0 !important; }
.v3 .faq-q { font-family: var(--v3-titulo) !important; font-weight: 800 !important; }
.v3 .cookie-banner { border-top: 0; }
.v3 .cookie-banner::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: var(--tv);
}

/* ── Carrinho: faixa de TV no topo do painel ──────────────────────────── */
.v3 .cart-sidebar { border-left: 0 !important; }
.v3 .cart-sidebar::before {
    content: "";
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    top: 0;
    height: 4px;
    background: var(--tv);
}

/* ── Celular ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .v3 .hero h1 { font-size: clamp(1.625rem, 7.2vw, 2rem) !important; }
    .v3 .section-title,
    .v3 .er-titulo,
    .v3 .incluso-titulo { font-size: clamp(1.3125rem, 6vw, 1.625rem) !important; }
    .v3 .v2-etiqueta { font-size: 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
    .v3 * { transition: none !important; }
}

/* ═══ Ajustes da 1ª olhada (375px) ══════════════════════════════════════ */
/* Selo sempre na própria linha, acima do título (título é inline). */
.v3 .v2-etiqueta { display: flex; width: -moz-fit-content; width: fit-content; margin-bottom: 14px; }

/* Todos os botões amarelos iguais (o v2 tinha regra mais específica pros
   CTAs de plano no celular). */
.v3 .plan-cta.btn,
.v3 .plan-cta.btn-secondary,
.v3 .combo-cta,
.v3 .playlist-package-cta {
    font-family: var(--v3-titulo) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    border-radius: 0 !important;
}
/* "Adicionar" dos avulsos: letra dos selos */
.v3 .er-add {
    font-family: var(--v3-selo);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Faixa de TV só onde é "capa": mosaico, faixa do celular, linhas e cards
   de plano, combos e o pacote. Nos avulsos pequenos e na lista de
   playlists (que já têm a faixa nas capas) ela virava ruído. */
.v3 .er-grade .er-card::after,
.v3 .playlist-card::after { content: none; }

/* FAQ e painel: cantos retos também no contêiner */
.v3 .faq,
.v3 .faq-item,
.v3 .incluso-grade { border-radius: 0 !important; }

/* Hero no celular: botão de preço e Suporte na mesma linha */
@media (min-width: 361px) and (max-width: 768px) {
    .v3 .hero-actions { flex-wrap: nowrap !important; }
    .v3 .hero-actions .btn-primary { flex: 1 1 auto; min-width: 0; padding: 0 12px !important; font-size: 0.8125rem !important; letter-spacing: 0 !important; }
    .v3 .hero-actions .btn-whatsapp { flex: 0 0 auto; padding: 0 12px !important; font-size: 0.8125rem !important; }
}

/* ═══ Ajustes da olhada no desktop ═════════════════════════════════════ */
/* Etiquetas do carrossel de exemplos e botões "Quero um…": mesma gramática */
.v3 .showcase-tag,
.v3 .showcase-views {
    border-radius: 0 !important;
}
.v3 .showcase-tag {
    background: #fff !important;
    color: #0a0a0a !important;
    font-family: var(--v3-selo) !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
}
.v3 .showcase-cta {
    font-family: var(--v3-titulo) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.01em !important;
}
.v3 .plan-includes,
.v3 .plan:hover .plan-includes,
.v3 .plan.highlight .plan-includes,
.v3 .seg-chip,
.v3 .faq-toggle,
.v3 .showcase-phone { border-radius: 0 !important; }

/* Subtítulo logo depois de um título em caixa: respiro garantido */
.v3 .section-title + p,
.v3 .section-title + .section-subtitle,
.v3 .section-head .section-subtitle { margin-top: 18px !important; }

/* Carrinho: mesma gramática da página (cantos retos, botão das capas) */
.v3 #cartSidebar button,
.v3 #cartSidebar input,
.v3 #cartSidebar .cart-item,
.v3 #cartSidebar .ck-result-area { border-radius: 0 !important; }
.v3 #ckPayBtn {
    font-family: var(--v3-titulo) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    background: var(--v3-amarelo) !important;
}