/* ==========================================================================
   Seção de Planos (#planos) — frente N3, 2026-10-16
   Identidade da casa: tema escuro, cantos chanfrados por clip-path, vidro,
   Orbitron nos títulos, Bootstrap Icons. Referência de acabamento: a seção
   Outubro Rosa (components/section_outubro_rosa/).
   Carregado SÓ pela home (index.html), antes do home-sections.css e do
   gamer-tech-v5.css — por isso alguns seletores pedem 2 classes.

   Removido nesta versão (sem uso em template/JS da home): hero antigo
   (.hero-offer, .hero-rocket-*, .hero-chip*), .super-plan-*, construtor
   "Monte seu plano" (.builder-*), skeleton, .plan-addon-trigger, dica
   "Arraste para o lado" e as regras body.light-theme (o site não tem mais
   tema claro público).
   ========================================================================== */

:root {
    --planos-text: #e8f1ff;
    --planos-muted: rgba(232, 241, 255, 0.78);
    --planos-soft: rgba(232, 241, 255, 0.62);
    --planos-cyan: var(--vn-neon-blue, #00ffea);
    --planos-cyan-soft: #7ff0ff;
    --planos-orange: var(--vn-neon-orange, #ff4d1d);
    --planos-green: #3ff0b0;
    --planos-bg: #04080e;
    --planos-card-bg: rgba(7, 14, 24, 0.82);
    --planos-card-border: rgba(0, 255, 234, 0.22);
    --planos-card-border-hover: rgba(0, 255, 234, 0.55);
    --planos-line: rgba(255, 255, 255, 0.09);
    --planos-chip-bg: rgba(255, 255, 255, 0.035);
    --planos-chip-border: rgba(255, 255, 255, 0.12);
    --planos-chamfer-card: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
    --planos-chamfer-md: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    --planos-chamfer-sm: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    --planos-chamfer-xs: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
}

/* --------------------------------------------------------------------------
   Seção e fundo
   O fundo do body é background-attachment: fixed (tema/site-dark.css): na tela
   ele acompanha a janela, mas em print de página inteira só a 1ª tela recebe a
   vinheta e o resto vira #050b14 chapado — a "emenda" preta/azul atravessando os
   cards. A seção tem a própria camada, opaca no miolo e com bordas em degradê,
   para ficar igual na tela e em qualquer captura. (2 classes: o gamer-tech-v5,
   carregado depois, zera o fundo de .section-unified-bg.)
   -------------------------------------------------------------------------- */
.planos-section.section-unified-bg {
    color: var(--planos-text);
    /* Sem brilho colorido no topo: qualquer cor que comece na borda da seção vira
       uma linha visível entre o carrossel e os planos. */
    background-image:
        linear-gradient(180deg, rgba(4, 8, 14, 0) 0, var(--planos-bg) 6rem, var(--planos-bg) calc(100% - 6rem), rgba(4, 8, 14, 0) 100%);
    scroll-margin-top: 80px;
}

.planos-section--after-hero {
    margin-top: 0 !important;
}

.planos-head {
    max-width: 680px;
    margin: 0 auto;
}

.planos-head .lead {
    color: var(--planos-muted);
}

/* --------------------------------------------------------------------------
   Abas — vidro escuro; ativa em vidro laranja com texto branco (mesma receita do
   seletor de velocidade do hero de streaming). O site-dark.css força cor ciano em
   todo .nav-link com !important, daí o body.dark-theme e o !important aqui.
   -------------------------------------------------------------------------- */
.planos-tabs-shell {
    margin: clamp(1.5rem, 3vw, 2.25rem) 0 clamp(1.5rem, 3vw, 2.5rem);
}

.planos-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.planos-tabs .nav-item {
    display: flex;
}

.planos-tabs .nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    min-width: 150px;
    min-height: 48px;
    padding: .6rem 1.2rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0;
    clip-path: var(--planos-chamfer-md);
    background: rgba(255, 255, 255, 0.045);
    font-size: .98rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

body.dark-theme .planos-section .planos-tabs .nav-link {
    color: #c9d6e6 !important;
}

.planos-tabs .tab-icon {
    font-size: 1.05rem;
    line-height: 1;
}

.planos-tabs .nav-link:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(0, 255, 234, 0.45);
}

body.dark-theme .planos-section .planos-tabs .nav-link:hover {
    color: #ffffff !important;
}

.planos-tabs .nav-link.active {
    background: var(--vn-glass-orange-bg, linear-gradient(135deg, rgba(255, 77, 29, 0.2), rgba(255, 140, 0, 0.2)));
    border-color: var(--planos-orange);
    box-shadow: var(--vn-glass-orange-glow, 0 0 20px rgba(255, 77, 29, 0.2));
}

body.dark-theme .planos-section .planos-tabs .nav-link.active {
    color: #ffffff !important;
}

.planos-tabs .nav-link.active .tab-icon {
    color: #ffb08a;
}

.planos-tabs .nav-link:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px #ffffff, 0 0 0 4px rgba(0, 255, 234, 0.45);
}

/* Tablet: as 5 abas numa linha só (sem a "Upgrades" órfã na 2ª linha). */
@media (min-width: 768px) and (max-width: 991.98px) {
    .planos-tabs {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: .5rem;
    }

    .planos-tabs .nav-link {
        min-width: 0;
        padding: .6rem .45rem;
        font-size: .92rem;
    }
}

/* Entre 576 e 767 px: 3 + 2, como no celular. */
@media (min-width: 576px) and (max-width: 767.98px) {
    .planos-tabs {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .planos-tabs .nav-item {
        grid-column: span 2;
    }

    .planos-tabs .nav-item:nth-child(4):nth-last-child(2),
    .planos-tabs .nav-item:nth-child(5):last-child {
        grid-column: span 3;
    }

    .planos-tabs .nav-link {
        min-width: 0;
    }
}

/* Nota curta acima dos cards de uma aba (Telemedicina: A-026). */
.planos-aba-nota {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: .55rem;
    max-width: 760px;
    margin: 0 auto 1.25rem;
    padding: .7rem 1rem;
    border: 1px solid rgba(0, 255, 234, 0.25);
    background: rgba(0, 255, 234, 0.05);
    clip-path: var(--planos-chamfer-sm);
    font-size: 1rem;
    line-height: 1.45;
    text-align: left;
    color: var(--planos-text);
}

.planos-aba-nota i {
    flex: 0 0 auto;
    margin-top: .15rem;
    color: var(--planos-cyan-soft);
}

/* --------------------------------------------------------------------------
   Grade de cards (tablet e desktop). Colunas explícitas pela contagem
   (data-count no template): 4 planos nunca deixam um órfão numa 2ª linha.
   -------------------------------------------------------------------------- */
.plan-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 1.25rem;
    align-items: stretch;
}

.plan-grid--compact {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

/* Número ímpar de cards em 2 colunas: o último fica centralizado, não órfão à esquerda. */
.plan-grid > .plano-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - .625rem);
}

.plan-grid--compact > .plano-card:last-child:nth-child(odd) {
    width: min(100%, 400px);
}

@media (min-width: 992px) {
    .plan-grid[data-count="3"],
    .plan-grid[data-count="5"],
    .plan-grid[data-count="6"] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .plan-grid[data-count="3"] > .plano-card:last-child:nth-child(odd),
    .plan-grid[data-count="5"] > .plano-card:last-child:nth-child(odd) {
        grid-column: auto;
        justify-self: stretch;
        width: auto;
    }
}

@media (min-width: 1200px) {
    .plan-grid[data-count="4"] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1rem;
    }

    .plan-grid[data-count="5"] {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 1rem;
    }

    .plan-grid[data-count="4"] > .plano-card:last-child:nth-child(odd),
    .plan-grid[data-count="5"] > .plano-card:last-child:nth-child(odd) {
        grid-column: auto;
        justify-self: stretch;
        width: auto;
    }
}

/* Alinhamento entre vizinhos: com subgrid, cabeçalho, corpo e rodapé de TODOS os
   cards da mesma linha têm a mesma altura — nome, preço e botão caem na mesma
   linha mesmo quando um título quebra. Sem suporte, fica o flex em coluna.
   (Abaixo de 768 px a grade vira slider e cada card tem a própria altura.) */
@supports (grid-template-rows: subgrid) {
    @media (min-width: 768px) {
        .plan-grid {
            grid-auto-rows: auto;
            row-gap: 1.25rem;
        }

        .plan-grid > .plano-card {
            display: grid;
            grid-row: span 3;
            grid-template-rows: subgrid;
            row-gap: 0;
        }

        /* Com subgrid o cabeçalho já tem a altura do vizinho mais alto da MESMA linha:
           o conteúdo desce para o pé do cabeçalho (nome e velocidade alinhados) e a
           faixa de selo vazia some — uma linha sem selo (ex.: a 1ª linha do tablet)
           não fica com um vão no topo. */
        .plan-grid > .plano-card .card-header {
            justify-content: flex-end;
        }

        .plan-grid .plan-highlight-slot:empty {
            display: none;
        }
    }
}

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */
.plano-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    background: var(--planos-card-bg);
    border: 1px solid var(--planos-card-border);
    border-radius: 0;
    clip-path: var(--planos-chamfer-card);
    box-shadow: 0 22px 45px rgba(5, 11, 20, 0.45);
    color: var(--planos-text);
    transition: border-color .3s ease, box-shadow .3s ease;
}

/* Filete de luz no topo, como nos cards da vitrine. */
.plano-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, rgba(0, 240, 255, 0), rgba(0, 240, 255, 0.85), rgba(0, 162, 255, 0));
    pointer-events: none;
}

.plano-card:hover,
.plano-card:focus-within {
    border-color: var(--planos-card-border-hover);
    box-shadow: 0 30px 60px rgba(0, 255, 234, 0.14);
}

/* Destaque (is_featured no admin): borda laranja, sem deslocar nada no fluxo. */
.plano-card.featured-plan {
    border-color: var(--planos-orange);
    filter: drop-shadow(0 0 14px rgba(255, 77, 29, 0.32));
}

.plano-card .card-header,
.plano-card .card-body,
.plano-card .card-footer {
    position: relative;
    padding: 1.1rem 1.25rem;
    background: transparent;
    border: 0;
}

.plano-card .card-header {
    display: flex;
    background: linear-gradient(180deg, rgba(0, 255, 234, 0.045), rgba(0, 255, 234, 0) 85%);
    flex-direction: column;
    align-items: center;
    gap: .55rem;
    padding-top: .85rem;
    padding-bottom: 1rem;
    text-align: center;
    border-bottom: 1px solid var(--planos-line);
}

.plano-card .card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: .9rem;
}

.plano-card .card-footer {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    margin-top: auto;
    padding-top: 1rem;
    padding-bottom: 1.35rem;
    border-top: 1px solid var(--planos-line);
    /* Contêiner do botão: no card estreito ele ajusta o próprio texto (ver .assine-agora). */
    container: plan-footer / inline-size;
}

/* Faixa de selo: mesma altura em todo card; some quando nenhum card da grade tem selo. */
.plan-highlight-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    width: 100%;
}

.plan-grid:not(:has(.plan-tag)) .plan-highlight-slot {
    display: none;
}

.plan-tag {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    max-width: 100%;
    padding: .28rem .65rem;
    border: 1px solid rgba(255, 77, 29, 0.6);
    background: rgba(255, 77, 29, 0.12);
    color: #ff9a76;
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .07em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
}

.plan-logo-wrap {
    display: flex;
    justify-content: center;
}

.plan-logo-text,
.plan-logo-img {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: 1px solid rgba(0, 255, 234, 0.35);
    background: rgba(0, 255, 234, 0.08);
    clip-path: var(--planos-chamfer-md);
    color: var(--planos-cyan-soft);
    font-size: 1.75rem;
    text-shadow: 0 0 14px rgba(0, 225, 255, 0.45);
}

.plan-logo-img {
    padding: .4rem;
}

.plan-logo-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Cores por família (telefonia, móvel, telemedicina, upgrades). */
.plan-logo-text--tel-basic { color: #00e1ff; }
.plan-logo-text--tel-intermediate { color: #ffb347; border-color: rgba(255, 140, 0, 0.45); background: rgba(255, 140, 0, 0.1); }
.plan-logo-text--tel-advanced { color: #ff7ad9; border-color: rgba(255, 0, 161, 0.45); background: rgba(255, 0, 161, 0.1); }
.plan-logo-text--mov-basic { color: #00ffad; border-color: rgba(0, 255, 173, 0.45); background: rgba(0, 255, 173, 0.08); }
.plan-logo-text--mov-turbo { color: #4fd1ff; border-color: rgba(0, 153, 255, 0.45); background: rgba(0, 153, 255, 0.1); }
.plan-logo-text--mov-power { color: #ffae73; border-color: rgba(255, 94, 0, 0.5); background: rgba(255, 94, 0, 0.1); }
.plan-logo-text--med-individual { color: #4dd7ff; }
.plan-logo-text--med-familiar { color: #e9c6ff; border-color: rgba(146, 70, 255, 0.5); background: rgba(146, 70, 255, 0.14); }
.plan-logo-text--up-router { color: #ffd66b; border-color: rgba(255, 184, 0, 0.5); background: rgba(255, 184, 0, 0.1); }
.plan-logo-text--up-ip { color: #64f7ff; }

.plan-title-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    line-height: 1.2;
}

.plan-eyebrow {
    margin: 0;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--planos-soft);
}

.plan-name {
    margin: 0;
    font-family: var(--vn-font-heading, "Orbitron", sans-serif);
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: #ffffff;
    overflow-wrap: anywhere;
}

.plan-mbps {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--planos-cyan-soft);
}

.plan-speed {
    margin: .1rem 0 0;
    font-size: .92rem;
    color: var(--planos-muted);
}

/* Preço */
.plano-card .price-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: .35rem;
    margin: 0;
    text-align: center;
}

.plano-card .price-line .currency,
.plano-card .price-line .term {
    font-size: 1rem;
    font-weight: 600;
    opacity: 1;
    color: var(--planos-muted);
}

.plano-card .price {
    font-size: clamp(2.35rem, 2.6vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.05;
    background: linear-gradient(180deg, #ffffff 20%, #ffd699 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-variant-numeric: tabular-nums;
}

/* Checklist */
.plan-features {
    display: grid;
    gap: .45rem;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.plan-feature {
    display: grid;
    grid-template-columns: 1.15rem minmax(0, 1fr);
    align-items: start;
    gap: .5rem;
    font-size: .98rem;
    line-height: 1.35;
    color: var(--planos-text);
}

.plan-feature i {
    font-size: 1rem;
    line-height: 1.35;
    color: var(--planos-cyan);
}

.plan-feature--off {
    color: var(--planos-soft);
}

.plan-feature--off span:first-of-type {
    text-decoration: line-through;
    text-decoration-color: rgba(232, 241, 255, 0.35);
}

.plan-feature--off i {
    color: currentColor;
}

/* Benefícios das abas sem configurador */
.plan-benefits {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.plan-benefit {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin: 0;
    padding: .65rem .8rem;
    border: 1px solid rgba(0, 255, 234, 0.22);
    background: rgba(0, 255, 234, 0.05);
    clip-path: var(--planos-chamfer-sm);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    color: var(--planos-text);
}

.plan-benefit i {
    flex: 0 0 auto;
    margin-top: .1rem;
    color: var(--planos-cyan-soft);
}

.plan-badge-media {
    display: flex;
    justify-content: center;
    padding: .5rem 0;
}

.plan-badge-media img {
    max-width: 120px;
}

/* --------------------------------------------------------------------------
   Configurador (cards de internet)
   -------------------------------------------------------------------------- */
.plan-addons {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding-top: .9rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.12);
}

.plan-addons__details {
    min-width: 0;
}

.plan-addons__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
    min-height: 48px;
    padding: .7rem;
    border: 1px solid var(--planos-chip-border);
    background: var(--planos-chip-bg);
    clip-path: var(--planos-chamfer-sm);
    color: var(--planos-text);
    font-size: .95rem;
    line-height: 1.35;
    list-style: none;
    cursor: pointer;
}

.plan-addons__toggle::-webkit-details-marker {
    display: none;
}

.plan-addons__toggle::marker {
    content: "";
}

.plan-addons__toggle:hover,
.plan-addons__details[open] > .plan-addons__toggle {
    border-color: rgba(0, 255, 234, .6);
    background: rgba(0, 255, 234, .08);
}

.plan-addons__toggle:focus-visible {
    box-shadow: inset 0 0 0 2px #fff;
    outline: none;
}

.plan-addons__toggle-text {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
}

.plan-addons__selection {
    color: var(--planos-cyan-soft);
    font-size: .875rem;
}

.plan-addons__selection[hidden] {
    display: none;
}

.plan-addons__toggle > i {
    flex: 0 0 auto;
    color: var(--planos-cyan-soft);
    transition: transform .2s ease;
}

.plan-addons__details[open] > .plan-addons__toggle > i {
    transform: rotate(180deg);
}

.plan-addons__details > .plan-addon-panel {
    padding-top: .55rem;
}

/* A regra do brinde, ANTES de qualquer escolha (A-008). */
.plan-addons__rule {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    min-height: 3.35em;
    margin: 0;
    padding: .55rem .7rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.035);
    clip-path: var(--planos-chamfer-sm);
    font-size: .92rem;
    line-height: 1.35;
    color: var(--planos-muted);
}

.plan-addons__rule i {
    flex: 0 0 auto;
    margin-top: .1rem;
}

.plan-addons__rule--free {
    border-color: rgba(63, 240, 176, 0.45);
    background: rgba(63, 240, 176, 0.08);
    color: #d9fff0;
    font-weight: 600;
}

.plan-addons__rule--free i {
    color: var(--planos-green);
}

.plan-addon-panel {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    container-type: inline-size;
}

/* Card estreito (4 colunas entre 1200 e 1399 px, 5 colunas): o preço desce para
   baixo do nome em TODAS as linhas — nada de uma linha quebrar e as outras não. */
@container (max-width: 265px) {
    .plan-addon-row {
        grid-template-columns: 22px minmax(0, 1fr);
    }

    .plan-addon-row__price {
        grid-column: 2;
    }
}

.plan-addon-panel[hidden] {
    display: none;
}

.plan-addon-row {
    position: relative;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: .6rem;
    row-gap: .1rem;
    min-height: 48px;
    margin: 0;
    padding: .5rem .7rem;
    border: 1px solid var(--planos-chip-border);
    background: var(--planos-chip-bg);
    clip-path: var(--planos-chamfer-sm);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.plan-addon-row:hover {
    border-color: rgba(0, 255, 234, 0.45);
    background: rgba(0, 255, 234, 0.05);
}

.plan-addon-row:has(input:checked) {
    border-color: rgba(0, 255, 234, 0.6);
    background: rgba(0, 255, 234, 0.08);
}

.plan-addon-row:has(input:focus-visible) {
    box-shadow: inset 0 0 0 2px #ffffff;
}

.plan-addon-row__name {
    min-width: 0;
    font-size: .95rem;
    line-height: 1.3;
    color: var(--planos-text);
    overflow-wrap: anywhere;
}

.plan-addon-row__price {
    font-size: .9rem;
    font-weight: 700;
    color: var(--planos-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* O adicional que saiu grátis: preço riscado + etiqueta verde. */
.plan-addon-row--free:has(input:checked) {
    border-color: rgba(63, 240, 176, 0.75);
    background: rgba(63, 240, 176, 0.1);
}

.plan-addon-row--free .plan-addon-row__price {
    text-decoration: line-through;
    color: var(--planos-soft);
}

.plan-addon-row__free {
    grid-column: 2 / -1;
    justify-self: start;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--planos-green);
}

.plan-addon-row__free[hidden] {
    display: none;
}

/* Caixa de seleção da casa: quadrada com chanfro (cards e modal). O site-dark.css
   pinta todo input com !important, daí o body.dark-theme. */
body.dark-theme .plan-addon-row input[type="checkbox"],
body.dark-theme .sv-app input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    display: inline-grid;
    place-content: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin: 0;
    border: 1.5px solid rgba(0, 255, 234, 0.6) !important;
    border-radius: 0;
    background-color: rgba(5, 11, 20, 0.7) !important;
    clip-path: var(--planos-chamfer-xs);
    cursor: pointer;
}

body.dark-theme .plan-addon-row input[type="checkbox"]:checked,
body.dark-theme .sv-app input[type="checkbox"]:checked {
    border-color: var(--planos-orange) !important;
    background-color: var(--planos-orange) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23111827' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.4' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px;
}

body.dark-theme .plan-addon-row input[type="checkbox"]:focus-visible,
body.dark-theme .sv-app input[type="checkbox"]:focus-visible {
    outline: none;
}

/* Gatilho do modal de streaming: mesma família das linhas, com destaque ciano. */
.sv-trigger {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 32px;
    align-items: center;
    column-gap: .6rem;
    width: 100%;
    min-height: 52px;
    padding: .5rem .7rem;
    border: 1px solid rgba(0, 255, 234, 0.5);
    background: linear-gradient(135deg, rgba(0, 255, 234, 0.1), rgba(0, 120, 255, 0.08));
    clip-path: var(--planos-chamfer-sm);
    color: var(--planos-text);
    text-align: left;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.sv-trigger:hover {
    background: linear-gradient(135deg, rgba(0, 255, 234, 0.16), rgba(0, 120, 255, 0.12));
    border-color: var(--planos-cyan);
}

.sv-trigger:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px #ffffff;
}

.sv-trigger__icon {
    font-size: 1.2rem;
    line-height: 1;
    color: var(--planos-cyan-soft);
}

.sv-trigger__label {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

.sv-trigger__label strong {
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.25;
    color: #ffffff;
}

.sv-trigger__label small {
    font-size: .85rem;
    line-height: 1.25;
    color: var(--planos-muted);
    overflow-wrap: anywhere;
}

.sv-trigger__label small[hidden] {
    display: none;
}

/* Apps escolhidos (planos.js): um por linha, nome à esquerda e preço à direita; o
   grátis com o preço riscado e a etiqueta embaixo, como as linhas de TV Box e Wi-Fi. */
.sv-trigger__apps {
    display: grid;
    gap: .2rem;
    margin-top: .15rem;
}

.sv-trigger__apps[hidden] {
    display: none;
}

.sv-trigger__app {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: .5rem;
    font-size: .9rem;
    line-height: 1.3;
}

.sv-trigger__app-name {
    min-width: 0;
    color: var(--planos-text);
    overflow-wrap: anywhere;
}

.sv-trigger__app-price {
    font-weight: 700;
    color: var(--planos-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.sv-trigger__app--free .sv-trigger__app-price {
    text-decoration: line-through;
    color: var(--planos-soft);
}

.sv-trigger__app--included .sv-trigger__app-price {
    font-weight: 600;
    color: var(--planos-soft);
}

.sv-trigger__app-tag {
    grid-column: 1 / -1;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--planos-green);
}

.sv-trigger__plus {
    display: inline-grid;
    place-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(0, 255, 234, 0.5);
    clip-path: var(--planos-chamfer-xs);
    color: var(--planos-cyan);
    font-size: 1rem;
}

.sv-trigger.is-chosen {
    border-color: rgba(0, 255, 234, 0.75);
}

.sv-trigger.is-free {
    border-color: rgba(63, 240, 176, 0.75);
    background: linear-gradient(135deg, rgba(63, 240, 176, 0.12), rgba(0, 255, 234, 0.06));
}

/* Card estreito (4 colunas de 1200 a 1399 px): o "+" e os respiros encolhem para
   "A partir de R$ 8,00/app" caber numa linha (gatilho com 2 linhas, não 3 ou 4).
   Depois das regras base, para vencer na cascata. */
@container (max-width: 265px) {
    .sv-trigger {
        grid-template-columns: 22px minmax(0, 1fr) 26px;
        column-gap: .4rem;
        padding-left: .5rem;
        padding-right: .5rem;
    }

    .sv-trigger__plus {
        width: 26px;
        height: 26px;
    }
}

/* Resumo do pedido (antes do botão). É um <details>: fechado, mostra só "Total por
   mês" e "Ver resumo do pedido" (2 linhas de altura fixa); aberto, os itens, o
   subtotal e o desconto. Na grade (768 px ou mais) o rodapé é uma linha COMPARTILHADA
   pelos 4 cards (subgrid): o resumo inteiro aberto esticava os vizinhos em ~220 px a
   cada clique; fechado, a linha cresce uma vez só (no 1º adicional) e não muda mais.
   No celular (slider, cada card com a sua altura) o planos.js já o abre. */
.plan-summary {
    border: 1px solid rgba(0, 255, 234, 0.3);
    background: rgba(0, 255, 234, 0.045);
    clip-path: var(--planos-chamfer-md);
    font-variant-numeric: tabular-nums;
}

.plan-summary[hidden] {
    display: none;
}

.plan-summary__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: .2rem .75rem;
    min-height: 44px;
    padding: .65rem .95rem .7rem;
    list-style: none;
    cursor: pointer;
}

.plan-summary__head::-webkit-details-marker {
    display: none;
}

.plan-summary__head::marker {
    content: "";
}

.plan-summary__head:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px #ffffff;
}

/* Desconto do 1º adicional à vista com o resumo FECHADO (grade): fica antes do total,
   na ordem do resumo aberto (subtotal, desconto, total). Aberto, a linha "Desconto"
   de dentro já mostra o valor e esta some. */
.plan-summary__desconto {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    font-size: .95rem;
    font-weight: 700;
    color: var(--planos-green);
}

.plan-summary__desconto[hidden],
.plan-summary[open] .plan-summary__desconto {
    display: none;
}

.plan-summary__desconto-valor {
    white-space: nowrap;
}

.plan-summary__total-label {
    font-size: 1rem;
    font-weight: 800;
    color: #ffffff;
}

.plan-summary__total-value {
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffffff;
    white-space: nowrap;
}

.plan-summary__toggle {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .9rem;
    font-weight: 700;
    color: var(--planos-cyan-soft);
}

.plan-summary__head:hover .plan-summary__toggle-texto {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.plan-summary__toggle i {
    font-size: .85em;
    transition: transform .2s ease;
}

.plan-summary[open] .plan-summary__toggle i {
    transform: rotate(180deg);
}

.plan-summary__toggle-texto--fechar,
.plan-summary[open] .plan-summary__toggle-texto--abrir {
    display: none;
}

.plan-summary[open] .plan-summary__toggle-texto--fechar {
    display: inline;
}

.plan-summary__body {
    padding: .6rem .95rem .85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.plan-summary__lines {
    display: grid;
    gap: .3rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.plan-summary__line,
.plan-summary__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    font-size: .9rem;
    line-height: 1.3;
    color: var(--planos-muted);
}

.plan-summary__label {
    min-width: 0;
    overflow-wrap: anywhere;
}

.plan-summary__value {
    flex: 0 0 auto;
    white-space: nowrap;
    color: var(--planos-text);
}

.plan-summary__tag {
    font-size: .8rem;
    font-weight: 700;
    color: var(--planos-soft);
}

.plan-summary__tag--free {
    color: var(--planos-green);
}

.plan-summary__totals {
    display: grid;
    gap: .25rem;
    margin: .6rem 0 0;
    padding-top: .55rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.plan-summary__totals[hidden] {
    display: none;
}

.plan-summary__row dt,
.plan-summary__row dd {
    margin: 0;
    font-weight: 600;
}

.plan-summary__row dd {
    white-space: nowrap;
    color: var(--planos-text);
}

.plan-summary__row--desconto dd {
    color: var(--planos-green);
}

/* --------------------------------------------------------------------------
   Botão do card (.assine-agora, vocabulário global da casa — ver o fim do arquivo)
   -------------------------------------------------------------------------- */
.plano-card .assine-agora {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 50px;
    padding: .85rem 1rem;
    font-size: .95rem;
    letter-spacing: .06em;
    line-height: 1.2;
}

.plano-card .assine-agora i {
    font-size: 1.1rem;
}

/* Card estreito (4 colunas entre 1200 e 1399 px: ~230 px de rodapé): "Assinar no
   WhatsApp" numa linha só, com o ícone colado ao texto, em vez de 2 linhas. */
@container plan-footer (max-width: 260px) {
    .plano-card .assine-agora {
        gap: .45rem;
        padding-left: .6rem;
        padding-right: .6rem;
        font-size: .9rem;
        letter-spacing: .02em;
        white-space: nowrap;
    }
}

/* --------------------------------------------------------------------------
   Plano de entrada (Essencial): faixa sob a grade da aba Internet (A-024)
   -------------------------------------------------------------------------- */
.plano-entrada {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
        "icone texto preco cta"
        "icone desc  preco cta";
    align-items: center;
    gap: .2rem 1.5rem;
    margin-top: 1.5rem;
    padding: 1.1rem 1.5rem;
    border: 1px solid rgba(0, 255, 234, 0.22);
    background: rgba(7, 14, 24, 0.82);
    clip-path: var(--planos-chamfer-card);
    scroll-margin-top: 96px;
}

.plano-entrada__icone {
    grid-area: icone;
    display: inline-grid;
    place-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(0, 255, 234, 0.35);
    background: rgba(0, 255, 234, 0.08);
    clip-path: var(--planos-chamfer-sm);
    color: var(--planos-cyan-soft);
    font-size: 1.4rem;
}

.plano-entrada__texto {
    grid-area: texto;
    min-width: 0;
}

.plano-entrada__velocidade {
    font-family: var(--vn-font-body, "Barlow", sans-serif);
    font-size: 1rem;
    font-weight: 700;
    color: var(--planos-cyan-soft);
    white-space: nowrap;
}

.plano-entrada__eyebrow {
    margin: 0;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--planos-cyan-soft);
}

.plano-entrada__nome {
    margin: .15rem 0 0;
    font-family: var(--vn-font-heading, "Orbitron", sans-serif);
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
}

.plano-entrada__desc {
    grid-area: desc;
    margin: 0;
    font-size: .95rem;
    line-height: 1.4;
    color: var(--planos-muted);
}

.plano-entrada__preco {
    grid-area: preco;
    display: flex;
    align-items: baseline;
    gap: .3rem;
    margin: 0;
    white-space: nowrap;
}

.plano-entrada__preco .currency,
.plano-entrada__preco .term {
    font-size: .95rem;
    font-weight: 600;
    opacity: 1;
    color: var(--planos-muted);
}

.plano-entrada__preco strong {
    font-size: 2rem;
    font-weight: 800;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
}

/* Compra do Essencial: o MESMO botão dos cards (.assine-agora, vidro laranja), com
   largura do texto no desktop. O contorno ciano (.plano-entrada__cta, abaixo) fica
   só para ação secundária, como o "Falar com especialista" do estado vazio. */
.plano-entrada .assine-agora {
    grid-area: cta;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    width: auto;
    min-height: 50px;
    margin: 0;
    padding: .8rem 1.4rem;
    font-size: .95rem;
    letter-spacing: .06em;
    line-height: 1.2;
    white-space: nowrap;
}

.plano-entrada .assine-agora i {
    font-size: 1.1rem;
}

.plano-entrada__cta {
    grid-area: cta;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 48px;
    padding: .7rem 1.25rem;
    border: 1px solid rgba(0, 255, 234, 0.5);
    background: rgba(0, 255, 234, 0.06);
    clip-path: var(--planos-chamfer-md);
    color: #ffffff !important;
    font-size: .9rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s ease, border-color .2s ease;
}

.plano-entrada__cta:hover {
    background: rgba(0, 255, 234, 0.14);
    border-color: var(--planos-cyan);
}

.plano-entrada__cta:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px #ffffff;
}

.planos-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem 1.25rem;
    border: 1px dashed rgba(255, 255, 255, 0.25);
    text-align: center;
    color: var(--planos-muted);
}

.planos-empty-state p {
    margin: 0;
}

/* --------------------------------------------------------------------------
   Navegação do slider (só existe no celular; criada pelo planos.js)
   -------------------------------------------------------------------------- */
.plan-slider-nav {
    display: none;
}

/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .plano-entrada {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "icone texto texto"
            "desc  desc  desc"
            "preco preco cta";
        gap: .75rem 1rem;
    }
}

/* --------------------------------------------------------------------------
   Celular e tablet de toque (até 991 px; 768 é o iPad em pé): texto de conteúdo
   com 16 px (regra 3 do contrato), inclusive os preços dos adicionais, o "a partir
   de" do streaming, os apps escolhidos e a regra do brinde (A-008). Só a tipografia:
   o slider continua só até 767 px (abaixo).
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .plan-speed,
    .plan-feature,
    .plan-addon-row__name,
    .plan-addon-row__price,
    .plan-addons__toggle,
    .plan-addons__rule,
    .plan-benefit,
    .sv-trigger__label strong,
    .sv-trigger__label small,
    .sv-trigger__app,
    .plan-summary__desconto,
    .plan-summary__line,
    .plan-summary__row,
    .plan-summary__tag,
    .plan-summary__toggle,
    .plano-entrada__desc {
        font-size: 1rem;
    }

    /* Etiquetas "grátis" em caixa alta: são a informação central do brinde (A-008).
       Menores que o texto corrido, mas com 14 px e espaçamento curto. */
    .plan-addon-row__free,
    .sv-trigger__app-tag {
        font-size: .875rem;
        letter-spacing: .03em;
    }
}

/* --------------------------------------------------------------------------
   Celular, em pé e deitado (até 767 px): slider com peek do próximo card +
   setas e pontos de 44 px. Entre 576 e 767 px (celular deitado) a grade de 2
   colunas num contêiner de 540 px deixava cards de ~250 px, com o botão em 2
   linhas e o gatilho do streaming em 3 ou 4; o slider dá a cada card a largura
   do celular em pé e o peek do vizinho.
   A ordem visual é a do DOM (preço crescente); nada reposiciona card via CSS
   (A-025: o reposicionamento do card em destaque foi removido).
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .plan-grid,
    .plan-grid--compact {
        display: flex;
        gap: .75rem;
        max-width: none;
        margin: 0 calc(var(--bs-gutter-x, 1.5rem) * -.5);
        padding: .25rem 1rem .5rem;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 1rem;
        scrollbar-width: none;
        /* Cada card na altura do próprio conteúdo: esticar pelo mais alto deixava
           um buraco acima do botão dos outros. */
        align-items: flex-start;
        -webkit-overflow-scrolling: touch;
    }

    .plan-grid::-webkit-scrollbar {
        display: none;
    }

    /* Card um pouco mais estreito que a tela: a borda do próximo aparece (peek). */
    .plan-grid > .plano-card,
    .plan-grid > .plano-card:last-child:nth-child(odd),
    .plan-grid--compact > .plano-card:last-child:nth-child(odd) {
        flex: 0 0 calc(100% - 2rem);
        width: auto;
        max-width: 360px;
        height: auto;
        scroll-snap-align: start;
    }

    /* Um card só: ocupa a largura, sem peek nem controles. */
    .plan-grid > .plano-card:only-child {
        flex-basis: 100%;
        max-width: none;
    }

    .plano-card {
        border-color: rgba(0, 255, 234, 0.4);
    }

    .plan-highlight-slot:empty {
        display: none;
    }

    .plano-card .card-header,
    .plano-card .card-body,
    .plano-card .card-footer {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .plan-slider-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .25rem;
        margin: 0 0 .35rem;
    }

    .plan-slider-nav[hidden] {
        display: none;
    }

    .plan-slider-nav__arrow {
        display: inline-grid;
        place-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 1px solid rgba(0, 255, 234, 0.45);
        background: rgba(5, 11, 20, 0.7);
        clip-path: var(--planos-chamfer-sm);
        color: var(--planos-cyan);
        font-size: 1.1rem;
        cursor: pointer;
    }

    .plan-slider-nav__arrow:disabled {
        border-color: rgba(255, 255, 255, 0.12);
        color: rgba(232, 241, 255, 0.3);
        cursor: default;
    }

    .plan-slider-nav__arrow:focus-visible,
    .plan-slider-nav__dot:focus-visible {
        outline: none;
        box-shadow: inset 0 0 0 2px #ffffff;
    }

    .plan-slider-nav__dots {
        display: flex;
        align-items: center;
    }

    .plan-slider-nav__dot {
        display: inline-grid;
        place-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        background: transparent;
        cursor: pointer;
    }

    .plan-slider-nav__dot span {
        display: block;
        width: 10px;
        height: 10px;
        border: 1px solid rgba(0, 255, 234, 0.6);
        transform: rotate(45deg);
        transition: background .2s ease, width .2s ease;
    }

    .plan-slider-nav__dot.is-active span {
        background: var(--planos-cyan);
        box-shadow: 0 0 10px rgba(0, 255, 234, 0.6);
    }
}

/* Celular em pé: abas 3 + 2 e a faixa do Essencial numa coluna. */
@media (max-width: 575.98px) {
    .planos-tabs {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: .45rem;
    }

    .planos-tabs .nav-item {
        grid-column: span 2;
    }

    /* 5 abas: 3 na 1ª linha, 2 na 2ª — quebra previsível, todas visíveis. */
    .planos-tabs .nav-item:nth-child(4):nth-last-child(2),
    .planos-tabs .nav-item:nth-child(5):last-child {
        grid-column: span 3;
    }

    .planos-tabs .nav-link {
        min-width: 0;
        padding: .55rem .4rem;
        gap: .35rem;
        font-size: .9rem;
    }

    .plano-entrada {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "icone texto"
            "desc  desc"
            "preco preco"
            "cta   cta";
        gap: .7rem .85rem;
        padding: 1rem;
    }

    .plano-entrada .assine-agora {
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   Modal de streaming (#streaming-modal) — fica FORA da <section>, daí os
   seletores próprios. Chanfrado como o resto da casa.
   -------------------------------------------------------------------------- */
/* Os botões flutuantes do chat (#n8n-chat-toggle, #public-chat-toggle) ficam em
   z-index 10000 e, no celular, cobriam a ponta do "Adicionar ao plano". Com o modal
   aberto, ele e o fundo escuro dele sobem acima do chat. */
#streaming-modal {
    z-index: 10020;
}

body:has(#streaming-modal.show) .modal-backdrop {
    z-index: 10010;
}

.sv-modal .modal-content.sv-modal__content {
    border: 1px solid rgba(0, 255, 234, 0.35);
    border-radius: 0;
    background: #07101b;
    clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
    color: var(--planos-text);
}

.sv-modal__header {
    align-items: flex-start;
    gap: .75rem;
    padding: 1.1rem 1.15rem .9rem;
    border-bottom: 1px solid var(--planos-line);
}

.sv-modal__heading {
    min-width: 0;
}

.sv-modal__eyebrow {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0 0 .3rem;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--planos-cyan);
}

.sv-modal__title {
    margin: 0;
    font-family: var(--vn-font-heading, "Orbitron", sans-serif);
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.3;
    color: #ffffff;
}

.sv-modal__subtitle {
    margin: .35rem 0 0;
    font-size: .95rem;
    line-height: 1.4;
    color: var(--planos-muted);
}

.sv-modal__close {
    display: inline-grid;
    place-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    margin: -.25rem -.25rem 0 auto;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.04);
    clip-path: var(--planos-chamfer-sm);
    color: #ffffff;
    font-size: 1.05rem;
    cursor: pointer;
}

.sv-modal__close:hover {
    border-color: var(--planos-cyan);
    color: var(--planos-cyan);
}

.sv-modal__close:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px #ffffff;
}

.sv-modal__body {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: 1rem 1.15rem;
}

.sv-plans {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.sv-included {
    padding: .7rem .85rem;
    border: 1px solid rgba(63, 240, 176, 0.4);
    background: rgba(63, 240, 176, 0.06);
    clip-path: var(--planos-chamfer-sm);
}

.sv-included[hidden] {
    display: none;
}

.sv-included__title {
    margin: 0 0 .45rem;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--planos-green);
}

.sv-included__list {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sv-included__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    font-size: .95rem;
    color: var(--planos-text);
}

.sv-included__tag {
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--planos-green);
    white-space: nowrap;
}

.sv-plan {
    border: 1px solid var(--planos-chip-border);
    background: rgba(255, 255, 255, 0.025);
    clip-path: var(--planos-chamfer-md);
    transition: border-color .18s ease, background .18s ease;
}

.sv-plan.is-open {
    border-color: rgba(0, 255, 234, 0.55);
    background: rgba(0, 255, 234, 0.05);
}

.sv-plan__head {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    min-height: 60px;
    padding: .7rem .9rem;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.sv-plan__head:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px #ffffff;
}

.sv-plan__emoji {
    display: inline-grid;
    place-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(0, 255, 234, 0.35);
    background: rgba(0, 255, 234, 0.08);
    clip-path: var(--planos-chamfer-xs);
    color: var(--planos-cyan-soft);
    font-size: 1.15rem;
    line-height: 1;
}

.sv-plan__info {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.sv-plan__name {
    font-size: 1rem;
    font-weight: 800;
    color: #ffffff;
}

.sv-plan__price {
    font-size: .9rem;
    color: var(--planos-muted);
}

.sv-plan__chevron {
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--planos-cyan);
    transition: transform .2s ease;
}

.sv-plan.is-open .sv-plan__chevron {
    transform: rotate(180deg);
}

.sv-plan__apps {
    padding: 0 .9rem .9rem;
}

.sv-plan__apps[hidden] {
    display: none;
}

.sv-plan__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 96px;
    gap: .45rem;
}

.sv-app {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 48px;
    margin: 0;
    padding: .5rem .65rem;
    border: 1px solid var(--planos-chip-border);
    background: rgba(255, 255, 255, 0.03);
    clip-path: var(--planos-chamfer-sm);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.sv-app:hover {
    border-color: rgba(0, 255, 234, 0.45);
}

.sv-app.is-checked {
    border-color: rgba(0, 255, 234, 0.7);
    background: rgba(0, 255, 234, 0.08);
}

.sv-app:has(input:focus-visible) {
    box-shadow: inset 0 0 0 2px #ffffff;
}

.sv-app__name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .95rem;
    line-height: 1.25;
    color: var(--planos-text);
    overflow-wrap: anywhere;
}

.sv-app__ads {
    flex: 0 0 auto;
    padding: .1rem .35rem;
    border: 1px solid rgba(255, 179, 71, 0.6);
    color: #ffc27a;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Apps de texto e de imagem ocupam células idênticas. A arte oficial mantém
   sua proporção dentro do mesmo espaço, sem linha exclusiva nem destaque adicional. */
.sv-app--logo {
    grid-column: auto;
}

.sv-app__logo {
    display: block;
    flex: 0 1 auto;
    width: 100%;
    max-width: 320px;
    min-width: 0;
    height: auto;
    max-height: 68px;
    object-fit: contain;
}

/* Em "Já incluso no seu plano": arte à esquerda, "sem custo" à direita. */
.sv-included__logo {
    max-width: 300px;
}

.sv-modal__footer {
    flex-direction: column;
    align-items: stretch;
    gap: .75rem;
    padding: .9rem 1.15rem 1.1rem;
    border-top: 1px solid var(--planos-line);
}

.sv-modal__summary {
    margin: 0;
    font-size: .95rem;
    line-height: 1.4;
    color: var(--planos-muted);
}

.sv-modal__summary p {
    margin: 0;
}

.sv-modal__summary strong {
    color: #ffffff;
}

/* 2 classes para vencer o ".sv-modal__summary p { margin: 0 }" acima, sem !important. */
.sv-modal__summary .sv-modal__summary-meta {
    margin-top: .2rem;
    font-size: .9rem;
}

.sv-modal__summary-total {
    font-weight: 800;
    color: #ffffff;
    /* "Total do plano: R$ 97,90/mês" quebra inteiro para a linha de baixo, nunca no meio. */
    white-space: nowrap;
}

.sv-modal__summary-tag {
    font-size: .8rem;
    font-weight: 700;
    color: var(--planos-soft);
}

.sv-modal__summary-tag--free {
    color: var(--planos-green);
}

.sv-modal__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .55rem;
}

.sv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: .6rem 1.2rem;
    border: 1px solid transparent;
    border-radius: 0;
    clip-path: var(--planos-chamfer-md);
    font-size: .9rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}

.sv-btn--ghost {
    border-color: rgba(0, 255, 234, 0.45);
    background: transparent;
    color: var(--planos-text);
}

.sv-btn--ghost:hover {
    background: rgba(0, 255, 234, 0.08);
}

/* Primário sólido (token --vn-btn-primary-*): contraste AA do texto escuro. */
.sv-btn--primary {
    background: var(--vn-btn-primary-bg, #ff4d1d);
    color: var(--vn-btn-primary-fg, #111827);
}

.sv-btn--primary:hover:not(:disabled) {
    background: var(--vn-btn-primary-bg-hover, #ff6a3d);
}

.sv-btn:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px #ffffff;
}

.sv-btn--primary:focus-visible {
    box-shadow: inset 0 0 0 3px #111827;
}

.sv-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* Celular e tablet de toque (até 991 px): texto de conteúdo do modal com 16 px — a
   regra do brinde no subtítulo, os preços dos pacotes, os nomes dos apps e o resumo
   com o total do plano. Só as etiquetas em caixa alta ficam menores (14 px). */
@media (max-width: 991.98px) {
    .sv-modal__subtitle,
    .sv-plan__price,
    .sv-app__name,
    .sv-included__item,
    .sv-modal__summary,
    .sv-modal__summary .sv-modal__summary-meta,
    .sv-modal__summary-tag {
        font-size: 1rem;
    }

    .sv-included__tag {
        font-size: .875rem;
        letter-spacing: .03em;
    }
}

@media (max-width: 575.98px) {
    .sv-modal__actions .sv-btn {
        flex: 1 1 auto;
    }


    /* Idem em "Já incluso": arte na linha toda e o "sem custo" embaixo, à direita. */
    .sv-included__item--logo {
        flex-wrap: wrap;
        row-gap: .2rem;
    }

    .sv-included__item--logo .sv-included__logo {
        flex-basis: 100%;
    }

    .sv-included__item--logo .sv-included__tag {
        margin-left: auto;
    }
}

@media (max-width: 400px) {
    .sv-plan__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Celular estreito: menos margem dos lados (cabeçalho, corpo, rodapé e pacotes) para a
       arte do SKY+ passar de 280px em 360 (antes 253px, com a frase a ~7px de altura). O
       cabeçalho e o rodapé acompanham o corpo, para o texto seguir alinhado na mesma margem. */
    .sv-modal__header,
    .sv-modal__body,
    .sv-modal__footer {
        padding-left: .75rem;
        padding-right: .75rem;
    }

    .sv-plan__head {
        padding-left: .6rem;
        padding-right: .6rem;
    }

    .sv-plan__apps {
        padding: 0 .6rem .7rem;
    }
}

/* --------------------------------------------------------------------------
   Movimento e alto contraste
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .plano-card,
    .planos-tabs .nav-link,
    .plan-addon-row,
    .sv-trigger,
    .sv-plan,
    .sv-plan__chevron,
    .sv-app,
    .sv-btn,
    .plano-entrada__cta,
    .plan-summary__toggle i,
    .plan-addons__toggle > i,
    .plan-slider-nav__dot span {
        transition: none;
    }
}

@media (forced-colors: active) {
    body.dark-theme .plan-addon-row input[type="checkbox"],
    body.dark-theme .sv-app input[type="checkbox"] {
        -webkit-appearance: auto;
        appearance: auto;
        clip-path: none;
    }

    /* O fundo do modal vira a cor do sistema (branca nos temas claros) e a arte branca
       do SKY+ sumiria: a linha dela fica com o fundo escuro da casa. */
    .sv-app--logo,
    .sv-included__item--logo {
        forced-color-adjust: none;
        background: #07101b;
    }

    .planos-tabs .nav-link.active {
        border: 2px solid Highlight;
    }

    .plano-card .assine-agora,
    .plano-entrada .assine-agora,
    .sv-btn,
    .plano-entrada__cta {
        border: 2px solid ButtonText;
    }
}

/* ==========================================================================
   LEGADO GLOBAL — continua sem escopo de propósito:
   - .currency / .term: o preço do slide de streaming do carrossel usa as duas
     classes e herda daqui a opacidade (não mexer sem combinar com a frente do
     carrossel).
   - .assine-agora: vocabulário global da casa (botão de vidro laranja).
   ========================================================================== */
.currency {
    font-size: 1rem;
    opacity: .7;
}

.term {
    font-size: 1rem;
    opacity: .7;
}

.assine-agora {
    display: inline-block;
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 1rem 2rem;
    overflow: hidden;
    border-radius: 0;
    clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
    background: linear-gradient(90deg, #ff8c02, #ffb347);
    box-shadow: 0 10px 25px rgba(255, 140, 2, 0.25);
    color: #0f120f !important;
    font-weight: 800;
    letter-spacing: .08em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: background .3s ease, box-shadow .3s ease;
}

.assine-agora:hover,
.assine-agora:focus-visible {
    background: linear-gradient(90deg, #ffa63d, #ffcf87);
    box-shadow: 0 15px 35px rgba(255, 140, 2, 0.4);
    color: #0f120f !important;
}

/* Laranja vidro no tema escuro (o único tema público). */
body.dark-theme .assine-agora,
body.dark-theme .assine-agora:link,
body.dark-theme .assine-agora:visited {
    background: var(--vn-glass-orange-bg);
    border: 1px solid var(--vn-glass-orange-border);
    box-shadow: var(--vn-glass-orange-glow);
    color: #ffffff !important;
    text-shadow: var(--vn-glass-text-shadow);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

body.dark-theme .assine-agora:hover,
body.dark-theme .assine-agora:focus-visible {
    background: var(--vn-glass-orange-bg-hover);
    box-shadow: var(--vn-glass-orange-glow-hover);
    color: #ffffff !important;
}

.assine-agora:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: -5px;
}