/* fix-plan — ajustes de 26/09. Carregado depois do styles.css, então vence por ordem. */

/* ==========================================================================
   1 · O FUNDO DA HERO NÃO PARA NA HERO
   O canvas do hero.js passou a ser mais alto que a seção (ele mesmo escreve a
   altura em px) e morre num degradê. Pra isso aparecer, a hero não pode mais
   cortar o que sobra, e o scrim não pode terminar num degrau escuro.
   ========================================================================== */
.hero { overflow: visible; }

/* TODAS as camadas do fundo descem junto com o canvas. Se uma só parar no pé
   da hero, é ELA que vira a linha reta. O hero.js escreve --bg-hero (altura da
   hero) e --bg-sobra (o quanto desce), e cada degradê passa a ser medido em px
   da hero, não em porcentagem da caixa (que agora é maior). */
.hero-bg-wash,
.hero-bg-scrim,
.hero-bg-noise {
    bottom: calc(-1 * var(--bg-sobra, 0px));
    height: auto;
}

/* a luz ambiente continua nascendo no pé da HERO e se derrama pra baixo */
.hero-bg-wash {
    background:
        radial-gradient(46% calc(var(--bg-hero, 100%) * .38) at 50% calc(var(--bg-hero, 100%) * 1.04),
            rgba(60,230,160,.14), transparent 72%),
        radial-gradient(60% calc(var(--bg-hero, 100%) * .40) at 88% calc(var(--bg-hero, 100%) * -.06),
            rgba(60,230,160,.05), transparent 70%);
}

/* o scrim protege o texto em cima (regra 24 do dono) e simplesmente deixa de
   existir antes do pé: nada de degrau escuro na emenda */
.hero-bg-scrim {
    background:
        linear-gradient(to bottom,
            rgba(11,11,14,.96) 0,
            rgba(11,11,14,.80) calc(var(--bg-hero, 100%) * .26),
            rgba(11,11,14,.46) calc(var(--bg-hero, 100%) * .50),
            rgba(11,11,14,.10) calc(var(--bg-hero, 100%) * .72),
            rgba(11,11,14,0)   calc(var(--bg-hero, 100%) * .90)),
        radial-gradient(52% calc(var(--bg-hero, 100%) * .44) at 50% calc(var(--bg-hero, 100%) * .40),
            rgba(11,11,14,.55), transparent 100%);
}

/* o grão desce junto e morre em degradê */
.hero-bg-noise {
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 var(--bg-hero, 60%), rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, #000 0, #000 var(--bg-hero, 60%), rgba(0,0,0,0) 100%);
}

/* Sombra de emenda: uma faixa larga e suave descendo da hero para o vídeo.
   É o que apaga qualquer vestígio de corte reto entre as duas seções, e ela
   mora atrás da janela inclinada do painel. */
@media (min-width: 901px) {
.scrolly::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: clamp(150px, 15vw, 230px);   /* a seção começa acima da hero (margem negativa): só vale do pé dela pra baixo */
    height: clamp(260px, 34vh, 480px);
    pointer-events: none;
    z-index: 0;              /* acima do canvas da hero, abaixo da janela do painel */
    background:
        linear-gradient(to bottom,
            rgba(11,11,14,0) 0%,
            rgba(11,11,14,.22) 44%,
            rgba(11,11,14,.58) 74%,
            rgba(11,11,14,.86) 100%),
        radial-gradient(70% 62% at 50% 0%, rgba(60,230,160,.045), transparent 72%);
}
/* a janela do painel vem sempre por cima da sombra */
.scrolly-sticky { position: sticky; z-index: 1; }
}

/* ==========================================================================
   2 · PLANOS
   O defeito era de hierarquia: quanto mais caro, menor o card, porque a altura
   vinha do número de linhas da lista. Agora os três têm a mesma base (mesma
   altura, mesma quantidade de linhas, tudo alinhado na mesma régua) e a
   presença cresce com o preço. O Pro segue sendo o recomendado.
   ========================================================================== */
.plans { align-items: stretch; }
.plan { height: 100%; position: relative; }

/* a lista encosta no pé do card, então o que sobra vira respiro em cima dela */
.plan-list { margin-top: 14px; padding-top: 0; border-top: 0; }

/* a linha de herança ("Tudo do Start, mais:") carrega o filete que era da lista */
.plan-from {
    margin: 22px 0 0;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .06);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--text-3);
}
.plan-from b { color: var(--text-2); font-weight: 700; }

/* Os três têm que começar na mesma linha: sem isso, quem tem selo ou número
   maior empurra tudo pra baixo e a fileira fica torta. */
.plan-top { min-height: 30px; }
.price { min-height: 52px; }

/* a frase de público tem alturas diferentes nos três: trava na maior */
@media (min-width: 900px) {
    .plan-for { min-height: 58px; }
}

/* --- degrau 1 · Start: o mais sóbrio. Botão de contorno --- */

/* --- degrau 2 · Pro: o recomendado. Matéria verde, selo e botão cheio
   (a superfície dele mora no bloco 3, "vidro dos planos") --- */

/* --- degrau 3 · Agência: mesmo acabamento do Start. O destaque da fileira é
   e continua sendo o Pro; o Agência só não pode mais parecer menor ou mais
   pobre, e isso já está resolvido pela altura igual e pela lista completa. --- */

/* ==========================================================================
   3 · VIDRO DOS PLANOS — 26/09 (tarde)
   Superfície trocada de plástico opaco para vidro (tokens do fix-base).
   Layout do bloco 2 intacto. O Pro vira MATÉRIA de marca (--brand-grad-deep)
   e o botão dele carrega o ÚNICO glow da seção.
   ========================================================================== */
#planos { --text-3: #8C8C96; }   /* legenda sobre vidro: de ~4,1 para ~5,5:1 */

/* luz atrás da fileira: nasce no Pro, morre em transparente, sem aresta */
#planos .plans { position: relative; isolation: isolate; }
#planos .plans::before {
    content: "";
    position: absolute;
    inset: -80px -8% -60px;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(30% 42% at 50% 34%, rgba(60, 230, 160, .15), transparent 70%),
        radial-gradient(26% 32% at 14% 70%, rgba(47, 214, 147, .05), transparent 72%),
        radial-gradient(26% 32% at 86% 70%, rgba(47, 214, 147, .05), transparent 72%);
    filter: blur(10px);
}

/* card: vidro com anel + molde + véu */
#planos .plan {
    border: 0;
    border-radius: var(--r-box);
    background-color: var(--surface);
    background-image: var(--veil), var(--glass-grad);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--ring), var(--mold), var(--drop);
}

/* o recomendado: o verde vira matéria, não tinta */
#planos .plan.hi {
    --text-3: #A3B8AE;    /* sobre o verde-fundo: ~5:1 */
    --text-2: #C4D3CC;
    background-color: transparent;
    background-image:
        var(--veil),
        radial-gradient(90% 55% at 50% 0%, rgba(60, 230, 160, .16), transparent 70%),
        var(--brand-grad-deep);
    box-shadow: var(--ring-brand), var(--mold), 0 34px 70px -34px rgba(0, 0, 0, .95);
}
#planos .plan.hi .plan-from { border-top-color: rgba(60, 230, 160, .14); }

/* selo: pill com anel de marca */
#planos .plan-tag {
    border: 0;
    border-radius: var(--r-pill);
    background: rgba(60, 230, 160, .12);
    box-shadow: var(--ring-brand), var(--mold-soft);
}

/* botões: raio 12, contorno vira anel */
#planos .plan .btn { border-radius: var(--r-pill); border: 0; }
#planos .plan .btn-ghost {
    background-color: rgba(255, 255, 255, .025);
    background-image: linear-gradient(267deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
    -webkit-backdrop-filter: var(--glass-blur-2);
    backdrop-filter: var(--glass-blur-2);
    box-shadow: var(--ring-strong), var(--mold-soft);
}
#planos .plan .btn-ghost:hover {
    background-color: var(--surface-hover);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), var(--mold-soft);
}
/* O ÚNICO GLOW DA SEÇÃO: o botão do plano recomendado */
#planos .plan.hi .btn-primary {
    background: linear-gradient(180deg, #3BE3A0, #1FAE76);
    box-shadow: 0 0 0 1px rgba(60, 230, 160, .6), var(--glow);
}
#planos .plan.hi .btn-primary:hover {
    box-shadow: 0 0 0 1px rgba(60, 230, 160, .75), var(--glow);
}

/* rodapé de condições: vidro secundário */
#planos .plan-foot {
    border: 0;
    border-radius: var(--r-box);
    background-color: var(--surface);
    background-image: var(--veil), var(--glass-grad);
    -webkit-backdrop-filter: var(--glass-blur-2);
    backdrop-filter: var(--glass-blur-2);
    box-shadow: var(--ring), var(--mold-soft);
}

@media (max-width: 560px) {
    #planos .plans::before { inset: -40px -12% -30px; }
}

/* ==========================================================================
   4 · QUATRO PLANOS — 30/10: Grátis + Launch, Boost e Growth, e a faixa Sob consulta embaixo. Sem seletor
   anual. Quatro colunas só onde a lista ainda lê bem; abaixo disso empilha.
   ========================================================================== */
#planos .plans { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
#planos .plan { padding: 26px 22px; }
#planos .plan-for { min-height: 62px; font-size: 13.5px; line-height: 1.45; text-wrap: pretty; }
#planos .price { margin-top: 18px; }
#planos .price .amt { font-size: clamp(36px, 3.2vw, 44px); }
#planos .plan .btn { margin-top: 20px; }
#planos .plan-from { margin-top: 24px; padding-top: 22px; }
#planos .plan-list { margin-top: 16px; gap: 13px; }
#planos .plan-list li { font-size: 13.5px; line-height: 1.45; }
/* limites em cima, recursos embaixo: a lista longa do Boost lê em dois blocos */
#planos .plan-list li.sep { margin-top: 5px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .07); }
#planos .plan.hi .plan-list li.sep { border-top-color: rgba(60, 230, 160, .16); }

/* O vidro aqui não desfocava nada que aparecesse, e em card alto o Chrome
   emendava a camada numa linha reta que cortava os cards. */
#planos .plan,
#planos .plan .btn-ghost { -webkit-backdrop-filter: none; backdrop-filter: none; }
#planos .plans::before { filter: none; }

/* Sob consulta: faixa larga embaixo dos cards, com o verde do plano em destaque */
#planos .plan-consulta {
    --text-2: #C4D3CC;
    display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto; align-items: center; gap: 36px;
    margin-top: 16px; padding: 38px 40px; border-radius: var(--r-box);
    background-image:
        var(--veil),
        radial-gradient(60% 130% at 0% 50%, rgba(60, 230, 160, .16), transparent 70%),
        var(--brand-grad-deep);
    box-shadow: var(--ring-brand), var(--mold), 0 34px 70px -34px rgba(0, 0, 0, .95);
}
#planos .plan-consulta-n { margin: 0; font-size: clamp(26px, 2.4vw, 34px); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; color: var(--text); }
#planos .plan-consulta-t p { margin: 10px 0 0; font-size: 16px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
#planos .plan-consulta-t p b { font-weight: 600; color: var(--text); }
#planos .plan-consulta-l { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
#planos .plan-consulta-l li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; line-height: 1.4; color: var(--text); }
#planos .plan-consulta-l svg { flex: none; width: 18px; height: 18px; color: #3ce6a0; }
#planos .plan-consulta .btn { min-height: 54px; margin: 0; padding-inline: 30px; border: 0; border-radius: var(--r-pill); font-size: 15.5px; white-space: nowrap; }
@media (max-width: 1100px) {
    #planos .plan-consulta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px 32px; }
    #planos .plan-consulta .btn { grid-column: 1 / -1; width: 100%; }
}
@media (max-width: 699px) {
    #planos .plan-consulta { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 28px 22px; }
}

@media (min-width: 1281px) {
    #planos > .wrap { max-width: 1600px; padding-inline: 32px; }
}
@media (max-width: 1280px) {
    #planos .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
    #planos .plans { grid-template-columns: minmax(0, 1fr); }
    #planos .plan { padding: 24px 20px; }
    #planos .plan-for { min-height: 0; }
}

/* ==========================================================================
   5 · COMPARAR PLANOS — 30/10. A tabela fica guardada num botão embaixo dos cards.
   No celular, um plano por vez, sem rolar de lado.
   ========================================================================== */
#planos .pt-det { max-width: 1320px; margin: 28px auto 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
#planos .pt-det summary {
    display: block; width: fit-content; margin: 0 auto; padding: 12px 26px; border-radius: 999px; cursor: pointer; list-style: none;
    font-size: 14px; font-weight: 600; color: var(--text); background: rgba(255, 255, 255, .04); box-shadow: var(--ring-strong);
    transition: background .2s var(--ease);
}
#planos .pt-det summary::-webkit-details-marker { display: none; }
#planos .pt-det summary:hover { background: rgba(255, 255, 255, .08); }
#planos .pt-det summary .f, #planos .pt-det[open] summary .a { display: none; }
#planos .pt-det[open] summary .f { display: inline; }
#planos .pt-abas { display: none; }
#planos .pt-caixa { margin-top: 34px; }
#planos .pt { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
#planos .pt-v { width: 26%; }
#planos .pt thead th {
    position: sticky; top: 74px; z-index: 3; padding: 18px 14px 16px; vertical-align: top; text-align: left;
    background: rgb(8, 10, 9); border-bottom: 1px solid rgba(255, 255, 255, .1); font-weight: 400;
}
#planos .pt thead .pt-v { background: transparent; border: 0; }
#planos .pt thead th.hi { border-radius: 14px 14px 0 0; background: #0e2a1f; box-shadow: inset 0 1px 0 rgba(60, 230, 160, .45); }
#planos .pt-nome { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 22px; font-size: 15px; font-weight: 600; color: var(--text); }
#planos .pt-nome em { padding: 1px 7px; border-radius: 999px; font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; color: #3ce6a0; box-shadow: 0 0 0 1px rgba(60, 230, 160, .45); }
#planos .pt-preco { display: flex; align-items: baseline; gap: 4px; margin-top: 8px; }
#planos .pt-preco i { font-style: normal; font-size: 13px; color: var(--text-2); }
#planos .pt-preco b { font-size: clamp(28px, 2.7vw, 36px); font-weight: 600; letter-spacing: -.04em; line-height: 1; color: var(--text); }
#planos .pt-preco small { font-size: 12px; color: var(--text-3); white-space: nowrap; }
#planos .pt .btn { width: 100%; min-height: 40px; margin-top: 12px; padding: 8px 10px; font-size: 13px; white-space: nowrap; }
#planos .pt tbody th, #planos .pt tbody td { padding: 12px 14px; border-bottom: 1px solid rgba(255, 255, 255, .06); font-size: 13.5px; }
#planos .pt tbody th { font-weight: 500; text-align: left; color: var(--text); }
#planos .pt tbody th small { display: block; margin-top: 1px; font-size: 12px; font-weight: 400; color: var(--text-3); }
#planos .pt tbody td { font-weight: 600; color: var(--text); }
#planos .pt tbody td.hi { background: rgba(60, 230, 160, .06); }
#planos .pt tr.pt-g th { padding: 26px 14px 10px; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); }
#planos .pt-s, #planos .pt-n { display: block; width: 18px; height: 18px; }
#planos .pt-s { color: #3ce6a0; }
#planos .pt-n { color: rgba(255, 255, 255, .22); }

@media (max-width: 899px) {
    #planos .pt-abas { position: sticky; top: 70px; z-index: 4; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: 24px; padding: 4px; border-radius: 12px; background: rgb(18, 20, 20); box-shadow: var(--ring); }
    #planos .pt-abas button { min-width: 0; padding: 9px 0; border: 0; border-radius: 9px; background: transparent; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-3); cursor: pointer; }
    #planos .pt-abas button.on { background: #1f8f62; color: #fff; }
    #planos .pt-caixa { margin-top: 12px; }
    /* um plano por vez: cada linha vira rótulo à esquerda e valor à direita */
    #planos .pt, #planos .pt thead, #planos .pt tbody, #planos .pt thead tr { display: block; width: 100%; }
    #planos .pt [data-c]:not(.sel) { display: none; }
    #planos .pt thead .pt-v { display: none; }
    #planos .pt thead th { display: block; position: static; width: auto; border-radius: 14px 14px 0 0; }
    #planos .pt tbody tr { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
    #planos .pt tbody tr.pt-g { display: block; border-bottom-color: rgba(255, 255, 255, .1); }
    #planos .pt tbody th, #planos .pt tbody td { padding: 11px 4px; border-bottom: 0; }
    #planos .pt tbody th { flex: 1 1 auto; min-width: 0; }
    #planos .pt tbody td { flex: 0 0 auto; text-align: right; white-space: nowrap; }
    #planos .pt tbody td.hi { background: transparent; }
    #planos .pt-s, #planos .pt-n { margin-left: auto; }
}

/* cards compactos: rótulo de grupo no lugar de repetir "no WhatsApp" em cada linha */
#planos .plan-list li.gr { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); }
#planos .plan-list li small { display: block; font-size: 12px; font-weight: 400; color: var(--text-3); }