/* ==========================================================================
   ChatISP: Seção de planos (#08)

   Sem cor, espaço, raio, peso, tamanho de fonte, duração ou easing escritos a
   mão: tudo vem de css/tokens.css. Sem padding vertical próprio: o ritmo vem
   de `.secao`. Sem sangria de borda: a divisa entre capítulos é deduzida por
   `:has()` em css/site.css e mora inteira na faixa escura.

   A seção tem DOIS artefatos, nesta ordem:
     1. Cinco cartões de plano: a hierarquia (o destaque cresce, os outros
        recuam) e todos os CTA. É o que responde no celular.
     2. A tabela recurso por recurso: só os limites, cabeçalho enxuto, e
        rolagem horizontal com indicação quando não couber.

   GEOMETRIA TRAVADA (js/planos.js depende dela):
   - `--precos-largura-recurso` precisa ser o MESMO valor em
     `.precos-recurso-coluna { width }` e em
     `.precos-moldura { scroll-padding-inline-start }`.
   - `th.precos-resumo` e `tbody th[scope=row]` são `position: sticky; left: 0`
     e precisam de fundo OPACO, senão o conteúdo passa por baixo.
   - `.precos-grupo th { padding-inline }` tem de casar com
     `.precos-grupo th > span { left }`, senão o rótulo do grupo desalinha
     durante a rolagem horizontal.
   O passo de rolagem do JS é a largura medida de `[data-coluna-plano]`: não há
   mais conta de largura escrita em dois lugares.
   ========================================================================== */

.precos {
    /* Estrutura da tabela (px literais: são medidas de layout, não de estilo). */
    --precos-largura-recurso: 260px;
    /* Superfícies da grade, derivadas da escada sup-0..sup-3. */
    --precos-celula: var(--sup-2);
    --precos-trilho: var(--sup-1);
    /* Clarão de ambiente no miolo da seção. Fica longe das duas bordas para
       não disputar com a divisa de capítulo, que é sombra e vem do sistema. */
    background-image: radial-gradient(ellipse 78% 46% at 50% 44%, var(--verde-vidro), transparent 72%);
}

/* --------------------------------------------------------------------------
   Alternador mensal / anual
   Dois botões de largura igual e um cursor que desliza por baixo deles. O
   estado mora em `data-periodo-ativo` na casca (escrito por js/planos.js), e
   é só ele que move o cursor: o CSS não precisa saber de mais nada.
   -------------------------------------------------------------------------- */

.precos-topo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--e4) var(--e6);
    margin-top: var(--esp-bloco);
}

.precos-alternador {
    position: relative;
    flex: none;
    padding: var(--e1);
    border: 1px solid var(--borda);
    border-radius: var(--r-full);
    background: var(--sup-2);
    box-shadow: var(--sombra-1);
}

.precos-cursor {
    position: absolute;
    top: var(--e1);
    bottom: var(--e1);
    left: var(--e1);
    z-index: 0;
    width: calc(50% - var(--e1));
    border-radius: var(--r-full);
    background: var(--verde);
    box-shadow: var(--brilho-verde);
    transition: translate var(--dur-2) var(--ease-firme);
}

.precos-alternador[data-periodo-ativo="anual"] .precos-cursor {
    translate: 100% 0;
}

.precos-alternador-botoes {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.precos-periodo {
    display: grid;
    justify-items: center;
    gap: var(--e1);
    padding: var(--e3) var(--e6);
    border: 0;
    border-radius: var(--r-full);
    background: transparent;
    color: var(--suave);
    cursor: pointer;
    transition: color var(--dur-2) var(--ease);
}

.precos-periodo:hover {
    color: var(--texto);
}

.precos-periodo-nome {
    display: inline-flex;
    align-items: center;
    gap: var(--e2);
    font-family: var(--titulo);
    font-size: var(--c3);
    font-weight: var(--p-forte);
    letter-spacing: var(--tk3);
    line-height: 1.3;
}

.precos-periodo-apoio {
    white-space: nowrap;
    font-size: var(--c5);
    font-weight: var(--p-medio);
    letter-spacing: var(--tk-largo);
    line-height: 1.4;
    text-transform: uppercase;
}

.precos-etiqueta {
    padding: 0 var(--e2);
    border: 1px solid var(--verde-linha);
    border-radius: var(--r-full);
    color: var(--verde);
    font-size: var(--c5);
    font-style: normal;
    font-weight: var(--p-max);
    letter-spacing: var(--tk3);
    transition:
        background var(--dur-2) var(--ease),
        border-color var(--dur-2) var(--ease),
        color var(--dur-2) var(--ease);
}

.precos-periodo[aria-pressed="true"] {
    color: var(--sup-0);
}

.precos-periodo[aria-pressed="true"] .precos-periodo-apoio {
    color: color-mix(in srgb, var(--sup-0) 72%, transparent);
}

.precos-periodo[aria-pressed="true"] .precos-etiqueta {
    border-color: color-mix(in srgb, var(--sup-0) 38%, transparent);
    background: color-mix(in srgb, var(--sup-0) 12%, transparent);
    color: var(--sup-0);
}

.precos-condicao {
    max-width: 44ch;
    color: var(--suave);
    font-size: var(--c3);
    line-height: 1.7;
}

/* --------------------------------------------------------------------------
   Condição de lançamento (componentes/promocao.php)

   Temporária, e por isso desenhada para ser a peça mais chamativa da seção
   sem virar anúncio: a moldura é um fio de luz que dá a volta no cartão
   devagar, os dois percentuais são o único texto grande, e o resto usa as
   mesmas superfícies da tabela. Sem movimento permitido, o fio para onde
   estiver e o pulso do marcador some: nada aqui depende de animação para
   ser lido.

   O giro anima um ângulo registrado por @property. Onde @property não
   existe, o navegador desenha o fio parado no ângulo inicial, que é o mesmo
   desenho sem o movimento.
   -------------------------------------------------------------------------- */

@property --lancamento-giro {
    syntax: "<angle>";
    inherits: false;
    initial-value: 210deg;
}

.lancamento {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    grid-template-areas:
        "texto numeros"
        "acao  numeros";
    align-items: center;
    gap: var(--e5) var(--e7);
    margin-top: var(--esp-bloco);
    padding: var(--e7) var(--e7);
    border: 1px solid transparent;
    border-radius: var(--r-xl);
    background:
        radial-gradient(ellipse 60% 90% at 100% 0%, var(--verde-vidro), transparent 70%) padding-box,
        radial-gradient(ellipse 50% 70% at 0% 100%, var(--verde-vidro), transparent 70%) padding-box,
        linear-gradient(var(--sup-2), var(--sup-2)) padding-box,
        conic-gradient(from var(--lancamento-giro),
            var(--verde-linha) 0deg,
            var(--verde-linha) 200deg,
            var(--verde) 250deg,
            var(--verde-claro) 270deg,
            var(--verde-linha) 320deg) border-box;
    box-shadow: var(--brilho-verde), var(--sombra-3);
    isolation: isolate;
    overflow: hidden;
}

/* Trama fina no fundo, a mesma quadrícula de engenharia do resto do site,
   apagada para a direita, onde ficam os números. */
.lancamento::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(var(--verde-vidro) 1px, transparent 1px),
        linear-gradient(90deg, var(--verde-vidro) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(100deg, black, transparent 62%);
    opacity: .6;
    pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
    .lancamento {
        animation: lancamento-girar 9s linear infinite;
    }

    .lancamento-pulso::after {
        animation: lancamento-pulsar 2.4s var(--ease-saida) infinite;
    }
}

@keyframes lancamento-girar {
    to { --lancamento-giro: 570deg; }
}

@keyframes lancamento-pulsar {
    from { transform: scale(1); opacity: .7; }
    to { transform: scale(3.2); opacity: 0; }
}

.lancamento-texto {
    grid-area: texto;
    display: grid;
    gap: var(--e4);
}

.lancamento-sobre {
    display: inline-flex;
    align-items: center;
    gap: var(--e3);
    justify-self: start;
    padding: var(--e1) var(--e4) var(--e1) var(--e3);
    border: 1px solid var(--verde-linha);
    border-radius: var(--r-full);
    background: var(--verde-vidro);
    color: var(--verde);
    font-size: var(--c5);
    font-weight: var(--p-max);
    letter-spacing: var(--tk-largo);
    line-height: 2;
    text-transform: uppercase;
}

.lancamento-pulso {
    position: relative;
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: var(--r-full);
    background: var(--verde);
    box-shadow: 0 0 12px var(--verde);
}

.lancamento-pulso::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--verde);
    opacity: 0;
}

.lancamento-titulo {
    max-width: 24ch;
    margin: 0;
    color: var(--texto);
    font-family: var(--titulo);
    font-size: var(--t3);
    font-weight: var(--p-max);
    letter-spacing: var(--tk2);
    line-height: 1.15;
    text-wrap: balance;
}

.lancamento-realce {
    color: var(--verde);
}

.lancamento-apoio {
    max-width: 52ch;
    margin: 0;
    color: var(--suave);
    font-size: var(--c3);
    line-height: 1.7;
}

.lancamento-acao {
    grid-area: acao;
    justify-self: start;
}

/* Os dois números. O anual é o maior desconto e ganha a moldura cheia: é a
   leitura que a condição quer provocar, sem esconder a do mensal. */
.lancamento-lado {
    grid-area: numeros;
    display: grid;
    gap: var(--e4);
}

.lancamento-exemplo {
    margin: 0;
    padding-inline: var(--e1);
    color: var(--suave);
    font-size: var(--c4);
    font-variant-numeric: tabular-nums;
    line-height: 1.6;
}

.lancamento-exemplo s {
    color: var(--tenue);
}

.lancamento-exemplo strong {
    color: var(--texto);
    font-weight: var(--p-forte);
}

.lancamento-numeros {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--e3);
    margin: 0;
}

.lancamento-numero {
    display: grid;
    align-content: start;
    gap: var(--e2);
    padding: var(--e5) var(--e5) var(--e5);
    border: 1px solid var(--borda-forte);
    border-radius: var(--r-lg);
    background: color-mix(in srgb, var(--sup-0) 55%, transparent);
    backdrop-filter: blur(6px);
}

.lancamento-numero--forte {
    border-color: var(--verde-linha);
    background: linear-gradient(160deg, var(--verde-vidro), color-mix(in srgb, var(--sup-0) 55%, transparent) 70%);
    box-shadow: var(--brilho-verde);
}

.lancamento-numero dt {
    color: var(--suave);
    font-size: var(--c5);
    font-weight: var(--p-forte);
    letter-spacing: var(--tk-largo);
    text-transform: uppercase;
}

.lancamento-numero dd {
    display: grid;
    gap: var(--e2);
    margin: 0;
}

.lancamento-numero strong {
    display: flex;
    align-items: flex-start;
    background: linear-gradient(150deg, var(--verde-claro), var(--verde) 60%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-family: var(--titulo);
    font-size: var(--t1);
    font-weight: var(--p-max);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--tk1);
    line-height: .95;
}

.lancamento-numero strong span {
    margin-top: .12em;
    margin-left: .04em;
    font-size: calc(var(--t1) * .45);
    letter-spacing: 0;
}

.lancamento-numero small {
    color: var(--suave);
    font-size: var(--c4);
    line-height: 1.5;
}

@media (max-width: 1080px) {
    .lancamento {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "texto"
            "numeros"
            "acao";
        padding: var(--e6);
    }

    .lancamento-titulo {
        max-width: 28ch;
    }
}

@media (max-width: 520px) {
    .lancamento {
        gap: var(--e5);
        padding: var(--e5);
        border-radius: var(--r-lg);
    }

    .lancamento-numero {
        padding: var(--e4);
    }

    .lancamento-acao {
        justify-self: stretch;
    }

    /* O rótulo de apoio do alternador ("pagamento único") não cabe numa
       linha com o recuo de desktop em 390px, e quebrava só de um lado. */
    .precos-periodo {
        padding-inline: var(--e3);
    }
}

/* --- Preço de tabela riscado, nos cartões e na tabela -------------------- */

.precos-de {
    display: flex;
    align-items: center;
    gap: var(--e2);
    margin: 0 0 calc(var(--e3) * -1);
    font-variant-numeric: tabular-nums;
}

.precos-de s {
    color: var(--tenue);
    font-size: var(--c3);
    font-weight: var(--p-medio);
    text-decoration-color: color-mix(in srgb, var(--tenue) 80%, transparent);
    text-decoration-thickness: 1px;
}

.precos-corte {
    padding: 0 var(--e2);
    border-radius: var(--r-full);
    background: var(--verde);
    color: var(--sup-0);
    font-size: var(--c5);
    font-weight: var(--p-max);
    letter-spacing: var(--tk-micro);
    line-height: 1.7;
}

/* Classe propria, e nao "p:first-child": nas paginas internas a regra
   .pagina-interna .cartao p:not([class]) pinta de cinza todo paragrafo sem
   classe e vence por especificidade. Na home a linha saia verde, em /planos
   nao. */
.precos-economia {
    color: var(--verde);
    font-weight: var(--p-forte);
}

.precos-depois {
    margin-top: var(--e1);
    color: var(--tenue);
    font-variant-numeric: tabular-nums;
}

.precos-coluna-de {
    display: block;
    color: var(--tenue);
    font-size: var(--c5);
    font-weight: var(--p-medio);
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Faixa do teste de 10 dias
   -------------------------------------------------------------------------- */

.precos-garantia {
    display: flex;
    align-items: flex-start;
    gap: var(--e3);
    margin-top: var(--e5);
    padding: var(--e3) var(--e5);
    border: 1px solid var(--verde-linha);
    border-radius: var(--r-md);
    background: var(--verde-vidro);
    color: var(--suave);
    font-size: var(--c3);
    line-height: 1.7;
}

.precos-garantia strong {
    color: var(--verde);
    font-weight: var(--p-forte);
}

.precos-garantia .icone {
    flex: none;
    width: var(--e4);
    height: var(--e4);
    margin-top: var(--e1);
    color: var(--verde);
    stroke-width: 2;
}

/* --------------------------------------------------------------------------
   Cartões de plano: a hierarquia da seção

   Três degraus: Basic/Normal/Gold recuam (fundo transparente, borda fina),
   Enterprise sobe neutro, Premium sobe com acento e cresce para fora da linha
   (margem negativa, e o `padding-block` da grade abre a folga).
   -------------------------------------------------------------------------- */

.precos-cartoes {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--e4);
    margin-top: var(--e6);
    padding-block: var(--e5);
}

.precos-cartao {
    display: flex;
    flex-direction: column;
    gap: var(--e3);
    padding: var(--e5) var(--e4);
    border-color: var(--borda);
    background: transparent;
    transition:
        border-color var(--dur-2) var(--ease),
        background var(--dur-2) var(--ease);
}

/* Em /planos a secao entra numa pagina interna, e a regra generica
   .pagina-interna .cartao (grid com justify-items: start) vencia esta por
   especificidade: o cartao virava grade e cada filho encolhia ao proprio
   conteudo, com a lista de medidas em metade da largura. Visto no QA de
   24/09/2026; na home, sem .pagina-interna, nunca aconteceu. */
.precos .precos-cartao {
    display: flex;
}

.precos-cartao:hover {
    border-color: var(--borda-forte);
    background: var(--sup-2);
}

.precos-cartao--enterprise {
    border-color: var(--borda-forte);
    background: var(--sup-2);
    box-shadow: var(--sombra-2);
}

.precos-cartao--enterprise:hover {
    background: var(--sup-3);
}

.precos-cartao--destaque {
    /* Cresce para fora da linha; a folga vem do padding-block da grade. O
       padding compensa a margem negativa, para que o topo do conteúdo fique
       na mesma altura do topo do conteúdo dos vizinhos. */
    margin-block: calc(var(--e5) * -1);
    padding-block: calc(var(--e5) * 2);
    border-color: var(--verde-linha);
    background: var(--sup-2);
    box-shadow: var(--brilho-verde);
}

.precos-cartao--destaque:hover {
    border-color: var(--verde);
    background: var(--sup-3);
}

/* O selo reserva sempre a mesma altura, caiba em uma linha ou em duas: é o
   que mantém o nome dos cinco planos na mesma altura na grade. */
.precos-selo-slot {
    display: flex;
    align-items: flex-start;
    min-height: var(--e7);
    margin: 0;
}

.precos-selo {
    white-space: normal;
    text-align: left;
}

.precos-cartao--destaque .precos-selo {
    border-color: var(--verde-linha);
    background: var(--verde-vidro);
    color: var(--verde);
}

.precos-cartao--enterprise .precos-selo {
    border-color: var(--borda-forte);
    color: var(--texto);
}

.precos-nome {
    margin: 0;
    color: var(--texto);
    font-family: var(--titulo);
    font-size: var(--t4);
    font-weight: var(--p-max);
    letter-spacing: var(--tk2);
    line-height: 1.2;
}

.precos-cartao--destaque .precos-nome {
    color: var(--verde);
}

/* --- Valor ---------------------------------------------------------------
   `strong` é reescrito por js/planos.js (nó de texto real, nunca pseudo-
   elemento) e conta de um valor ao outro na troca de período. */

.precos-valor {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    column-gap: var(--e1);
    color: var(--texto);
    font-variant-numeric: tabular-nums;
}

.precos-moeda {
    font-size: var(--c3);
    font-weight: var(--p-forte);
    letter-spacing: var(--tk3);
}

.precos-valor strong {
    font-family: var(--titulo);
    font-size: var(--t3);
    font-weight: var(--p-max);
    letter-spacing: var(--tk2);
    line-height: 1.1;
}

.precos-valor small {
    color: var(--suave);
    font-size: var(--c4);
    font-weight: var(--p-normal);
    line-height: 1.5;
}

.precos-cobranca {
    min-height: var(--e8);
    color: var(--suave);
    font-size: var(--c4);
    line-height: 1.6;
}

.precos-so-anual {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--e1) var(--e2);
    margin-top: var(--e1);
}

/* O período mensal não tem o que comparar: a linha riscada só existe no anual. */
.precos[data-periodo="mensal"] .precos-so-anual {
    visibility: hidden;
}

.precos-so-anual s {
    color: var(--tenue);
    font-variant-numeric: tabular-nums;
}

.precos-so-anual span {
    color: var(--verde);
    font-weight: var(--p-forte);
    font-variant-numeric: tabular-nums;
}

/* Altura fixa maior que a do primitivo: com cinco colunas estreitas o rótulo
   de um plano cabe em uma linha e o de outro em duas, e os cartões só ficam
   alinhados se o botão reservar as duas. */
/* As duas saídas do cartão, na ordem pedida pelo Rodrigo em 24/09/2026:
   registrar em cima, botão cheio; falar com a equipe embaixo, de contorno.
   Altura fixa maior que a do primitivo: com cinco colunas estreitas o rótulo
   de um plano cabe em uma linha e o de outro em duas, e os cartões só ficam
   alinhados se o botão reservar as duas. */
.precos-registrar,
.precos-cta {
    width: 100%;
    min-height: var(--e8);
    padding-inline: var(--e3);
    text-align: center;
    white-space: normal;
}

/* A folga entre os dois. O gap do cartão sozinho (--e3) deixava os botões
   praticamente encostados; somado a esta margem, ficam a --e5 um do outro. */
.precos-cta {
    margin-top: var(--e3);
}

/* --- Medidas e marcos do cartão ------------------------------------------ */

.precos-medidas {
    display: grid;
    gap: var(--e2);
    margin: var(--e2) 0 0;
    padding: var(--e4) 0 0;
    border-top: 1px solid var(--borda);
    list-style: none;
}

.precos-medidas li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--e3);
    color: var(--suave);
    font-size: var(--c4);
    line-height: 1.5;
}

.precos-medidas strong {
    flex: none;
    color: var(--texto);
    font-size: var(--c3);
    font-weight: var(--p-forte);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.precos-marco {
    margin-top: var(--e3);
    color: var(--tenue);
    font-size: var(--c5);
    font-weight: var(--p-forte);
    letter-spacing: var(--tk-largo);
    line-height: 1.6;
    text-transform: uppercase;
}

.precos-cartao-lista {
    display: grid;
    gap: var(--e2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.precos-cartao-lista li {
    display: flex;
    align-items: flex-start;
    gap: var(--e2);
    color: var(--suave);
    font-size: var(--c4);
    line-height: 1.6;
}

.precos-cartao-lista .icone {
    flex: none;
    width: var(--e3);
    height: var(--e3);
    margin-top: var(--e1);
    color: var(--verde);
    stroke-width: 2.5;
}

/* --------------------------------------------------------------------------
   Comparação recurso por recurso
   -------------------------------------------------------------------------- */

.precos-comparacao {
    margin-top: var(--esp-bloco);
}

.precos-comparacao-topo {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--e3) var(--e5);
    margin-bottom: var(--e4);
}

.precos-comparacao-titulo {
    margin: 0;
    color: var(--texto);
    font-family: var(--titulo);
    font-size: var(--t4);
    font-weight: var(--p-forte);
    letter-spacing: var(--tk3);
    line-height: 1.3;
}

.precos-deslizar {
    display: flex;
    align-items: center;
    gap: var(--e3);
    color: var(--suave);
    font-size: var(--c3);
    line-height: 1.6;
}

.precos-deslizar[hidden] {
    display: none;
}

.precos-deslizar > div {
    display: flex;
    flex: none;
    gap: var(--e2);
}

.precos-deslizar .botao {
    min-width: 44px;
    padding-inline: var(--e3);
    color: var(--texto);
    font-size: var(--c2);
}

.precos-deslizar .botao:hover:not(:disabled) {
    border-color: var(--verde-linha);
    background: var(--sup-3);
    color: var(--verde);
}

.precos-deslizar .botao:disabled {
    border-color: var(--borda);
    color: var(--tenue);
    cursor: default;
}

/* --- Moldura rolável ------------------------------------------------------ */

.precos-moldura {
    position: relative;
    isolation: isolate;
    overflow-x: auto;
    border: 1px solid var(--borda);
    border-radius: var(--r-lg);
    background: var(--precos-celula);
    box-shadow: var(--sombra-2);
    scrollbar-width: thin;
    scrollbar-color: var(--borda-forte) var(--sup-1);
    /* TRAVADO: precisa ser igual à largura de `.precos-recurso-coluna`. */
    scroll-padding-inline-start: var(--precos-largura-recurso);
    overscroll-behavior-x: contain;
}

.precos-moldura:focus-visible {
    outline: 2px solid var(--verde);
    outline-offset: 4px;
}

.precos-moldura::-webkit-scrollbar {
    height: var(--e2);
}

.precos-moldura::-webkit-scrollbar-track {
    background: var(--sup-1);
}

.precos-moldura::-webkit-scrollbar-thumb {
    border: 2px solid var(--sup-1);
    border-radius: var(--r-full);
    background: var(--borda-forte);
}

/* --- Grade ---------------------------------------------------------------- */

.precos-tabela {
    width: 100%;
    min-width: 1060px;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    text-align: center;
    font-size: var(--c3);
    line-height: 1.6;
}

.precos-recurso-coluna {
    /* TRAVADO: casa com `scroll-padding-inline-start` da moldura. */
    width: var(--precos-largura-recurso);
}

.precos-tabela th,
.precos-tabela td {
    position: relative;
    padding: var(--e4) var(--e3);
    border-bottom: 1px solid var(--borda);
    background: var(--precos-celula);
    font-weight: var(--p-medio);
}

.precos-tabela tbody tr:last-child > * {
    border-bottom: 0;
}

/* Premium: acentuado em verde. Enterprise: elevado e neutro. Nenhuma cor
   nova, só a escada de superfície e as linhas do sistema. */
.precos-tabela .precos-destaque {
    --precos-celula: var(--sup-3);
    box-shadow: inset 1px 0 0 var(--verde-linha), inset -1px 0 0 var(--verde-linha);
}

.precos-tabela .precos-enterprise {
    --precos-celula: var(--sup-3);
    box-shadow: inset 1px 0 0 var(--borda-forte), inset -1px 0 0 var(--borda-forte);
}

.precos-tabela thead th {
    padding: var(--e5) var(--e3);
    vertical-align: middle;
    border-bottom-color: var(--borda-forte);
}

.precos-tabela thead th.precos-destaque {
    box-shadow: inset 0 3px 0 var(--verde), inset 1px 0 0 var(--verde-linha), inset -1px 0 0 var(--verde-linha);
}

.precos-tabela thead th.precos-enterprise {
    box-shadow: inset 0 3px 0 var(--borda-forte), inset 1px 0 0 var(--borda-forte), inset -1px 0 0 var(--borda-forte);
}

.precos-coluna-nome {
    display: block;
    color: var(--texto);
    font-family: var(--titulo);
    font-size: var(--t5);
    font-weight: var(--p-forte);
    letter-spacing: var(--tk3);
    line-height: 1.3;
}

.precos-destaque .precos-coluna-nome {
    color: var(--verde);
}

.precos-coluna-valor {
    display: block;
    margin-top: var(--e1);
    color: var(--suave);
    font-size: var(--c4);
    font-weight: var(--p-normal);
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.precos-coluna-valor strong {
    color: var(--texto);
    font-weight: var(--p-forte);
}

/* Enquanto js/planos.js conta de um valor ao outro, o número acende. Vale
   para o cartão e para o cabeçalho da tabela: os dois mostram o mesmo preço. */
.precos-valor strong,
.precos-coluna-valor strong {
    transition: color var(--dur-3) var(--ease);
}

.precos-contando strong {
    color: var(--verde);
}

/* --- Coluna fixa de recursos --------------------------------------------- */

/* O fio de 1px à direita marca a borda do trilho fixo: é ele que avisa que o
   conteúdo passa por baixo durante a rolagem horizontal. */
.precos-tabela th.precos-resumo,
.precos-tabela tbody th[scope="row"] {
    box-shadow: 1px 0 0 var(--borda-forte);
}

.precos-tabela th.precos-resumo {
    /* TRAVADO: sticky + fundo opaco. */
    position: sticky;
    left: 0;
    z-index: 3;
    padding: var(--e5) var(--e6);
    background: var(--precos-trilho);
    text-align: left;
}

.precos-resumo > span {
    display: block;
    max-width: 10em;
    color: var(--texto);
    font-family: var(--titulo);
    font-size: var(--t5);
    font-weight: var(--p-forte);
    letter-spacing: var(--tk3);
    line-height: 1.3;
}

.precos-tabela tbody th[scope="row"] {
    /* TRAVADO: sticky + fundo opaco. */
    position: sticky;
    left: 0;
    z-index: 2;
    padding: var(--e4) var(--e6);
    background: var(--precos-trilho);
    color: var(--texto);
    text-align: left;
    font-size: var(--c3);
    font-weight: var(--p-forte);
    line-height: 1.5;
}

.precos-tabela tbody th[scope="row"] small {
    display: block;
    margin-top: var(--e1);
    color: var(--suave);
    font-size: var(--c5);
    font-weight: var(--p-normal);
    line-height: 1.7;
}

/* --- Faixa de grupo ------------------------------------------------------- */

.precos-tabela .precos-grupo th {
    /* TRAVADO: este padding-inline tem de ser igual ao `left` do span abaixo. */
    padding: var(--e3) var(--e6);
    background: var(--precos-trilho);
    border-bottom-color: var(--borda);
    color: var(--suave);
    text-align: left;
    font-size: var(--c5);
    font-weight: var(--p-max);
    letter-spacing: var(--tk-largo);
    line-height: 1.6;
    text-transform: uppercase;
}

.precos-grupo th > span {
    /* TRAVADO: igual ao padding-inline da faixa de grupo. */
    position: sticky;
    left: var(--e6);
    display: inline-block;
}

/* --- Células de valor ----------------------------------------------------- */

.precos-tabela tbody td {
    color: var(--texto);
    font-size: var(--c3);
    line-height: 1.6;
}

.precos-numero {
    font-size: var(--c2);
    font-weight: var(--p-forte);
    font-variant-numeric: tabular-nums;
}

.precos-sim,
.precos-nao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--e5);
    height: var(--e5);
    vertical-align: middle;
}

.precos-sim {
    color: var(--verde);
}

.precos-sim .icone {
    width: var(--e5);
    height: var(--e5);
    stroke-width: 2;
}

.precos-nao {
    color: var(--suave);
    font-size: var(--c2);
    font-weight: var(--p-normal);
}

/* --- Notas e contrato ----------------------------------------------------- */

.precos-notas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: var(--e3) var(--e7);
    margin-top: var(--e5);
}

.precos-notas p {
    color: var(--suave);
    font-size: var(--c4);
    line-height: 1.8;
}

.precos-contrato {
    margin-top: var(--esp-bloco);
}

.precos-contrato-chamada {
    max-width: 62ch;
    margin-bottom: var(--e5);
    color: var(--texto);
    font-size: var(--c1);
    font-weight: var(--p-medio);
    line-height: 1.6;
    letter-spacing: var(--tk3);
}

.precos-contrato-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: var(--e5);
}

.precos-contrato-bloco h3 {
    margin: 0 0 var(--e4);
    color: var(--texto);
    font-family: var(--titulo);
    font-size: var(--t5);
    font-weight: var(--p-forte);
    letter-spacing: var(--tk3);
    line-height: 1.4;
}

.precos-contrato-lista {
    display: grid;
    gap: var(--e3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.precos-contrato-lista li {
    display: flex;
    align-items: flex-start;
    gap: var(--e3);
    color: var(--suave);
    font-size: var(--c3);
    line-height: 1.7;
}

.precos-contrato-lista .icone {
    width: var(--e4);
    height: var(--e4);
    margin-top: var(--e1);
    color: var(--verde);
    stroke-width: 2;
}

.precos-contrato-bloco--parte .precos-contrato-lista .icone {
    color: var(--tenue);
}

/* --- Orientação final ----------------------------------------------------- */

.precos-orientacao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--e5);
    margin-top: var(--esp-bloco);
    padding-top: var(--e6);
    border-top: 1px solid var(--borda);
}

.precos-orientacao p {
    max-width: 54ch;
    color: var(--suave);
    font-size: var(--c2);
    line-height: 1.7;
}

.precos-orientacao strong {
    display: block;
    color: var(--texto);
    font-weight: var(--p-forte);
}

.precos-orientacao-acao {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--e5);
}

/* --- Plano Custom: a faixa depois dos cinco cartoes ----------------------- */

.precos-custom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--e5) var(--e7);
    margin-top: var(--e5);
    padding: var(--e5) var(--e6);
    border: 1px solid var(--borda-forte);
    border-radius: var(--r-lg);
    background: var(--sup-2);
    box-shadow: var(--sombra-2);
}

.precos-custom-texto {
    flex: 1 1 36ch;
    max-width: 64ch;
}

.precos-custom-sobre {
    display: inline-block;
    margin-bottom: var(--e2);
    color: var(--verde);
    font-size: var(--c4);
    font-weight: var(--p-forte);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.precos-custom-titulo {
    margin: 0 0 var(--e2);
    color: var(--texto);
    font-family: var(--titulo);
    font-size: var(--c1);
    font-weight: var(--p-max);
    letter-spacing: var(--tk2);
}

.precos-custom-texto p {
    color: var(--suave);
    font-size: var(--c3);
    line-height: 1.7;
}

.precos-custom-acao {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--e2);
}

.precos-custom-acao small {
    color: var(--suave);
    font-size: var(--c4);
}

/* --- Utilitário de leitor de tela ---------------------------------------- */

.precos-texto-acessivel {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --- Foco visível em todos os controles ---------------------------------- */

.precos :is(a, button):focus-visible {
    outline: 2px solid var(--verde);
    outline-offset: 3px;
}

/* ==========================================================================
   Breakpoints: 1200 · 980 · 680 · 380

   Cinco colunas de cartão só cabem acima de 1200. Abaixo disso a grade vira
   3 + 2 centrado, depois 2 + 2 + 1 centrado, e no celular uma pilha.
   ========================================================================== */

@media (max-width: 1200px) {
    .precos-cartoes {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .precos-cartao {
        grid-column: span 2;
    }

    .precos-cartao:nth-child(4) {
        grid-column: 2 / span 2;
    }

    .precos-cartao:nth-child(5) {
        grid-column: 4 / span 2;
    }
}

@media (max-width: 980px) {
    .precos-topo {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--e4);
    }

    .precos-cartoes {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .precos-cartao:nth-child(4) {
        grid-column: span 2;
    }

    .precos-cartao:nth-child(5) {
        grid-column: 2 / span 2;
    }

    .precos-notas {
        gap: var(--e3);
    }

    .precos-orientacao {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 680px) {
    .precos {
        --precos-largura-recurso: 132px;
    }

    .precos-cartoes {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--e5);
        padding-block: 0;
    }

    /* Empilhado, ninguém precisa crescer para fora da linha. */
    .precos-cartao,
    .precos-cartao:nth-child(4),
    .precos-cartao:nth-child(5) {
        grid-column: auto;
    }

    .precos-cartao--destaque {
        margin-block: 0;
        padding-block: var(--e5);
    }

    .precos-selo-slot {
        min-height: 0;
    }

    .precos-cobranca {
        min-height: var(--e6);
    }

    .precos-comparacao-topo {
        align-items: flex-start;
        flex-direction: column;
    }

    .precos-deslizar {
        justify-content: space-between;
        width: 100%;
    }

    .precos-deslizar > span {
        max-width: 22ch;
    }

    .precos-moldura {
        border-radius: var(--r-md);
    }

    .precos-tabela {
        width: 712px;
        min-width: 712px;
    }

    .precos-tabela th,
    .precos-tabela td {
        padding: var(--e3) var(--e2);
    }

    .precos-tabela thead th {
        padding: var(--e4) var(--e2);
    }

    .precos-tabela th.precos-resumo {
        padding: var(--e4);
    }

    .precos-tabela tbody th[scope="row"] {
        padding: var(--e3) var(--e4);
        overflow-wrap: break-word;
    }

    .precos-tabela .precos-grupo th {
        /* TRAVADO: igual ao `left` do span logo abaixo. */
        padding: var(--e3) var(--e4);
    }

    .precos-grupo th > span {
        /* TRAVADO: igual ao padding-inline acima. */
        left: var(--e4);
    }

    .precos-contrato-grade {
        grid-template-columns: 1fr;
        gap: var(--e4);
    }

    .precos-orientacao-acao {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--e4);
    }
}

@media (max-width: 380px) {
    .precos-alternador {
        width: 100%;
    }

    .precos-periodo {
        padding-inline: var(--e3);
    }

    .precos-garantia {
        padding: var(--e3) var(--e4);
    }

    .precos-cartao {
        padding-inline: var(--e3);
    }
}