/* ═══════════════════════════════════════════════════════════════
   MELHORIAS — folha aditiva
   Carregada depois de design-system.css. Não sobrescreve nada do
   existente: só adiciona a dobra da comparação (#comparacao).
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────── COMPARAÇÃO ───────────────────────── */

/* mesmo fundo das demais seções claras da página (#solucao, #beneficios,
   #nichos, #planos usam --bg-base). Antes estava --bg-surface e destoava. */
.cmp-section {
    background: var(--bg-base);
    padding: clamp(56px, 7vw, 96px) 0;
}
.cmp-inner { max-width: 1160px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px); }

.cmp-label {
    font-family: var(--font-poppins);
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--green-text);
    text-align: center; margin: 0 0 14px;
}
.cmp-h2 {
    font-family: var(--font-poppins);
    font-size: clamp(2rem, 4.2vw, 3.1rem); font-weight: 600;
    color: var(--ink); text-align: center;
    letter-spacing: -0.03em; line-height: 1.12; margin: 0 0 14px;
}
.cmp-sub {
    font-family: var(--font-poppins);
    font-size: 0.95rem; font-weight: 300; line-height: 1.65;
    color: rgba(18, 33, 26, 0.55); text-align: center;
    max-width: 620px; margin: 0 auto clamp(38px, 5vw, 56px);
}

/* tabela ------------------------------------------------------- */
.cmp-table {
    display: grid;
    grid-template-columns: minmax(150px, 0.85fr) 1fr 1fr;
    gap: 0;
    border: 1px solid var(--border-sub);
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 12px 32px rgba(25, 45, 33, 0.06);
}

.cmp-head {
    font-family: var(--font-poppins);
    font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border-sub);
}
.cmp-head-spacer { background: #fff; }
.cmp-head-trad { background: #FAFBFA; color: rgba(18, 33, 26, 0.5); }
.cmp-head-us { background: #1B7A40; color: #fff; }

.cmp-axis,
.cmp-cell {
    font-family: var(--font-poppins);
    /* itens de grid nao encolhem abaixo do min-content sem isto */
    min-width: 0;
    padding: 17px 22px;
    border-bottom: 1px solid var(--border-sub);
    font-size: 0.9rem; line-height: 1.5;
    display: flex; align-items: flex-start; gap: 9px;
}
.cmp-axis {
    font-weight: 600; color: rgba(18, 33, 26, 0.78);
    background: #fff;
}
.cmp-trad { background: #FAFBFA; color: rgba(18, 33, 26, 0.55); font-weight: 300; }
.cmp-us { background: rgba(27, 122, 64, 0.045); color: rgba(18, 33, 26, 0.85); font-weight: 400; }
.cmp-us strong { font-weight: 600; color: var(--green-text); }

/* o wrapper de linha só existe pro layout de cartão no mobile; aqui ele
   some do fluxo e as 3 células voltam a ser filhas diretas do grid */
.cmp-row { display: contents; }
.cmp-row:last-child > * { border-bottom: none; }

/* o texto precisa poder encolher dentro do flex, senao estoura a coluna */
.cmp-cell > span { min-width: 0; flex: 1 1 0; overflow-wrap: anywhere; }

.cmp-ico { flex-shrink: 0; margin-top: 3px; }
.cmp-ico-x { color: rgba(18, 33, 26, 0.25); }
.cmp-ico-v { color: var(--green-primary); }

/* fecho -------------------------------------------------------- */
/* mesma escala dos demais paragrafos de secao (.cmp-sub, .inc-sub,
   .how-sub): 0.95rem / peso 300. Antes era clamp(1.05, 1.9vw, 1.35rem),
   um tamanho que nao existia em nenhum outro ponto do site — ficava
   maior ate que o subtitulo do hero. O destaque fica por conta do
   <strong>, nao do corpo do texto. */
.cmp-kicker {
    font-family: var(--font-poppins);
    font-size: 0.95rem;
    font-weight: 300; line-height: 1.65; text-align: center;
    color: rgba(18, 33, 26, 0.6);
    max-width: 620px; margin: clamp(34px, 4.5vw, 50px) auto 0;
}
.cmp-kicker strong { font-weight: 600; color: var(--ink); }

.cmp-cta-wrap { text-align: center; margin-top: clamp(24px, 3vw, 32px); }

/* CTA da dobra na mesma escala dos outros CTAs de secao
   (.how-btn-primary, .cta-final-btn, .ft2-cta): 0.9rem / 13px 26px /
   raio 10px. Antes reaproveitava .hero-ds-btn-primary, que e maior de
   proposito por ser o CTA do hero. O gradiente verde e mantido. */
.cmp-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 26px; border-radius: 10px; text-decoration: none;
    font-family: var(--font-poppins); font-size: 0.9rem; font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, var(--green-primary) 0%, var(--green-light) 100%);
    box-shadow: 0 6px 24px rgba(47, 163, 85, 0.35);
    border: 1px solid rgba(18, 33, 26, 0.13);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.cmp-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 28px rgba(31, 138, 70, 0.45); }

/* ─────── timeline "Como funciona": rótulo em texto no lugar de "48h" ───────
   A coluna do marcador tem 80px fixos, então "Poucos dias" precisa de corpo
   menor e quebra em duas linhas. É a última linha da timeline, então não há
   conector saindo dela para colidir com a segunda linha do texto.        */
.how-day.how-day-sm {
    display: block;
    font-size: 0.82rem;
    line-height: 1.25;
}

/* ─────── card "Site profissional": celular no lugar da foto de banco ───────
   A foto de um homem no notebook não dizia nada sobre o produto. O celular
   mostra o argumento que o texto promete ("bonito em qualquer tela") e é o
   aparelho em que o cliente do lead realmente vai abrir o site.            */

.inc-phone {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.inc-phone-bezel {
    position: relative;
    width: 78px; height: 152px;
    background: #fff;
    border: 3px solid #16241C;
    border-radius: 14px;
    box-shadow: 0 12px 26px rgba(25, 45, 33, 0.18);
    padding: 9px 6px 7px;
    overflow: hidden;
}
.inc-phone-notch {
    position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
    width: 22px; height: 3px; border-radius: 999px;
    background: rgba(18, 33, 26, 0.35);
}
.inc-phone-screen { display: flex; flex-direction: column; gap: 5px; height: 100%; }

.ph-head { display: flex; align-items: center; gap: 4px; }
.ph-mark { width: 7px; height: 7px; border-radius: 2px; background: var(--green-primary); }
.ph-name { flex: 1; height: 4px; border-radius: 2px; background: rgba(18, 33, 26, 0.5); }

.ph-hero {
    height: 42px; border-radius: 5px;
    background: linear-gradient(135deg, var(--green-primary), var(--green-light));
}
.ph-l { height: 4px; border-radius: 2px; background: rgba(18, 33, 26, 0.14); }
.ph-l.s { width: 62%; }

.ph-cta {
    margin-top: auto;
    display: flex; align-items: center; justify-content: center;
    height: 17px; border-radius: 5px;
    background: var(--green-primary); color: #fff;
    font-size: 7.5px; font-weight: 600; letter-spacing: 0.01em;
}
.inc-phone-cap {
    font-family: var(--font-poppins);
    font-size: 0.62rem; font-weight: 400;
    color: rgba(18, 33, 26, 0.42);
}

/* ───── banner final: variações de profundidade dos balões de fundo ─────
   .cta-ghost já existe no design-system; aqui só duas intensidades a mais,
   pra que os balões novos não fiquem todos no mesmo plano.              */
.cta-ghost-soft { background: rgba(255, 255, 255, 0.07); filter: blur(2px); }
.cta-ghost-strong { background: rgba(255, 255, 255, 0.17); filter: blur(0.5px); }

@media (max-width: 860px) {
    /* As 3 colunas nao cabem no celular. A tabela vira uma pilha de cartoes,
       um por criterio, e o pareamento tradicional-vs-Sincerum passa a
       acontecer DENTRO de cada cartao, na vertical. Antes isso virava uma
       fileira de 15 faixas de mesmo peso e a comparacao se perdia. */
    .cmp-table {
        display: flex;
        flex-direction: column;
        gap: 14px;
        border: none;
        border-radius: 0;
        background: none;
        box-shadow: none;
        overflow: visible;
    }
    .cmp-head { display: none; }

    .cmp-row {
        display: block;
        background: #fff;
        border: 1px solid var(--border-sub);
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 6px 18px rgba(25, 45, 33, 0.05);
    }

    /* topo do cartao: o criterio, em eyebrow — nao compete com as respostas */
    .cmp-axis {
        display: block;
        background: #F2F6F3;
        font-size: 0.7rem; font-weight: 600;
        letter-spacing: 0.08em; text-transform: uppercase;
        color: rgba(18, 33, 26, 0.6);
        padding: 11px 16px;
        border-bottom: 1px solid var(--border-sub);
    }

    .cmp-cell {
        padding: 13px 16px;
        font-size: 0.9rem;
        flex-wrap: wrap; row-gap: 3px;
        border-bottom: none;
    }
    /* o rotulo ocupa a linha inteira e o texto desce — sem estourar */
    .cmp-cell::before {
        font-size: 0.62rem; font-weight: 600; letter-spacing: 0.09em;
        text-transform: uppercase;
        flex: 0 0 100%; width: 100%;
    }

    .cmp-trad {
        background: #FAFBFA;
        border-bottom: 1px solid var(--border-sub);
    }
    .cmp-trad::before { content: "Do jeito tradicional"; color: rgba(18, 33, 26, 0.34); }

    /* no desktop o lado que ganha se destaca pela posicao (coluna da direita,
       cabecalho verde). Aqui isso nao existe, entao o destaque tem que vir da
       cor: fundo verde de verdade + barra na lateral. */
    .cmp-us {
        background: rgba(47, 163, 85, 0.07);
        box-shadow: inset 3px 0 0 var(--green-primary);
        padding-left: 19px;
    }
    .cmp-us::before { content: "Com a Sincerum"; color: var(--green-text); }
}

/* ───────────────────────── HERO ─────────────────────────
   Linha de redução de risco abaixo dos botões. Existe porque o CTA
   principal pede uma conversa com um vendedor e não dizia o que
   acontece depois de clicar. É a única promessa da página que o
   visitante pode cobrar antes de pagar qualquer coisa, então ela
   fica colada no botão, e não a seis dobras de distância.
   ───────────────────────────────────────────────────────── */
.hero-ds-reassure {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    margin: 18px auto 0; max-width: 520px;
    font-family: var(--font-poppins);
    font-size: 0.875rem; font-weight: 300; line-height: 1.5;
    color: rgba(18,33,26,0.58);
    text-align: center;
}
.hero-ds-reassure svg { flex-shrink: 0; color: var(--green-primary); }

@media (max-width: 768px) {
    .hero-ds-reassure { font-size: 0.8rem; }
}

/* ═══════════════════════ DOBRA "O PAINEL" (#painel) ═══════════════════════
   Componente próprio, e não o .ladder de paginas.css, de propósito: na home
   esta dobra é chamada, e na /painel.html é o argumento inteiro. Mexer aqui
   não pode mexer lá.

   A forma é o argumento. Três cards iguais lado a lado é a gramática de
   tabela de preço, e por isso a versão anterior lia como prévia da seção
   de Planos, que vem três dobras depois. Aqui vira degrau: coluna única,
   recuo crescente, borda que esquenta de cinza para verde, e o marcador de
   nível mostrando que o plano de cima CONTÉM o de baixo.
   ═══════════════════════════════════════════════════════════════════════ */

.pnl-section {
    position: relative;
    background: var(--bg-base);
    padding: clamp(64px, 8vw, 104px) 0;
    overflow: hidden;
}
.pnl-inner { max-width: 1160px; margin: 0 auto; padding: 0 clamp(20px,5vw,64px); }

.pnl-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: clamp(32px, 5vw, 76px);
    align-items: start;
}

/* ── Coluna esquerda ──────────────────────────────────────────────
   Alinhada à esquerda de propósito: as dobras de cima e de baixo são
   todas centralizadas, e a quebra de eixo é o que separa esta aqui. */
.pnl-intro { align-self: center; }

.pnl-h2 {
    font-family: var(--font-poppins);
    font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 600;
    color: var(--ink); letter-spacing: -0.03em; line-height: 1.12;
    margin: 0 0 18px; text-wrap: balance;
}
.pnl-h2 em { font-style: normal; color: var(--green-text); }

.pnl-sub {
    font-family: var(--font-poppins);
    font-size: 1rem; font-weight: 300; line-height: 1.68;
    color: rgba(18,33,26,0.66); margin: 0 0 26px; max-width: 46ch;
}
.pnl-sub strong { font-weight: 600; color: rgba(18,33,26,0.88); }

.pnl-cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 24px; border-radius: 100px;
    font-family: var(--font-poppins); font-size: 0.92rem; font-weight: 600;
    color: var(--ink); text-decoration: none;
    background: var(--bg-surface); border: 1px solid var(--border-mid);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.pnl-cta:hover {
    transform: translateY(-1px); border-color: rgba(47,163,85,0.4);
    box-shadow: 0 8px 22px -10px rgba(18,33,26,0.3);
}
.pnl-cta svg { transition: transform 0.3s ease; }
.pnl-cta:hover svg { transform: translateX(3px); }

/* ── A escada ─────────────────────────────────────────────────── */

.pnl-stair { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.pnl-step {
    position: relative;
    padding: 22px 26px 22px 24px;
    border-radius: 16px;
    background: var(--bg-surface);
    border: 1px solid var(--border-sub);
    border-left: 3px solid rgba(18,33,26,0.16);
    transition: transform 0.28s ease, box-shadow 0.28s ease;
}
/* O recuo é o degrau. Some no mobile, onde não há largura para gastar. */
.pnl-step:nth-child(2) { margin-left: clamp(0px, 4vw, 44px); }
.pnl-step:nth-child(3) { margin-left: clamp(0px, 8vw, 88px); }

/* A borda esquenta conforme sobe, e a sombra cresce junto. */
.pnl-step:nth-child(2) { border-left-color: var(--green-mid);     box-shadow: 0 10px 26px -18px rgba(18,33,26,0.34); }
.pnl-step:nth-child(3) { border-left-color: var(--green-primary); box-shadow: 0 16px 34px -20px rgba(18,33,26,0.4); }

.pnl-step:hover { transform: translateY(-2px); }

.pnl-step-top {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 10px;
}
.pnl-step-plan {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.66rem; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: rgba(18,33,26,0.57); margin: 0;
}

/* Marcador de nível: o plano de cima contém o de baixo, e três bolinhas
   dizem isso sem uma linha de texto. */
.pnl-dots { display: inline-flex; gap: 5px; flex-shrink: 0; }
.pnl-dots i {
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(18,33,26,0.14);
}
.pnl-dots i.on { background: var(--green-primary); }

.pnl-step-q {
    font-family: var(--font-poppins);
    font-size: clamp(1.15rem, 1.9vw, 1.4rem); font-weight: 600;
    color: var(--ink); letter-spacing: -0.02em; line-height: 1.2;
    margin: 0 0 8px;
}
.pnl-step-d {
    font-family: var(--font-poppins);
    font-size: 0.9rem; font-weight: 300; line-height: 1.6;
    color: rgba(18,33,26,0.62); margin: 0;
}

@media (max-width: 900px) {
    .pnl-grid  { grid-template-columns: 1fr; gap: 32px; }
    .pnl-intro { align-self: start; }
    .pnl-sub   { max-width: none; }
    .pnl-step:nth-child(2),
    .pnl-step:nth-child(3) { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .pnl-step, .pnl-cta, .pnl-cta svg { transition: none; }
    .pnl-step:hover, .pnl-cta:hover { transform: none; }
}

/* ─────────────── BENEFÍCIOS: alinhamento dos cards pequenos ───────────────
   design-system.css:1288 usa `margin-top: auto` no .inc-desc, o que joga o
   parágrafo para o rodapé do card. Com os três textos de tamanho parecido
   isso passava despercebido; quando um cresce, os começos de texto ficam em
   alturas diferentes e a fileira lê como desalinhada.

   Aqui o texto passa a começar logo abaixo do título, como na fileira de
   cima. A sobra fica no rodapé, que é onde sobra não incomoda.

   NÃO vale para .inc-card-photo: lá o `margin-top: auto` da legenda é
   proposital, para o texto assentar sobre o degradê escuro da foto.
   ───────────────────────────────────────────────────────────────────────── */
.inc-card-sm .inc-desc {
    margin-top: 0;
    padding-top: 14px;
}

/* ─────────────── PLANOS: cards de altura igual ───────────────
   design-system.css:1543 usa `align-items: start` na grade, então cada
   card fica só da altura do próprio conteúdo. Enquanto os três textos
   tinham tamanho parecido isso não aparecia; com o Completo mais longo,
   os três botões param em alturas diferentes e a fileira desmonta.

   Com `stretch` os cards igualam pelo mais alto, e o `flex: 1` que já
   existe no .plan2-list empurra cada CTA para o rodapé do seu card.

   O card destacado continua subindo 16px pelo transform: ele fica da
   mesma altura dos outros e sobressai, que é o efeito pretendido.
   ───────────────────────────────────────────────────────────── */
.plan2-grid {
    align-items: stretch;
    /* Coluna do meio mais larga: o plano recomendado precisa ser maior nos
       dois eixos, senão "recomendado" fica sendo só um selo. */
    grid-template-columns: 1fr 1.14fr 1fr;
}

/* O destaque era um translateY(-16px): subia o card inteiro, mas ele
   continuava do mesmo tamanho dos outros, só deslocado. Margem negativa
   em cima e embaixo faz o card ESTICAR além da linha da grade, crescendo
   para os dois lados. Os das pontas continuam iguais entre si, porque
   quem define a altura da linha são eles. */
.plan2-card-hi {
    transform: none;
    margin-top: -26px;
    margin-bottom: -26px;
}

/* O .plan2-list tem flex:1, entao toda a folga do card sobra num vao unico
   entre o ultimo item e o botao. No card do meio, que e o mais alto, esse
   vao fica grande. space-between reparte a folga entre os itens: o card
   enche por inteiro em vez de acumular vazio no pe. */
.plan2-card-hi .plan2-list { justify-content: space-between; }

/* Abaixo de 980px a grade vira coluna única. design-system.css já zera o
   transform ali, mas melhorias.css carrega depois, então as margens
   negativas precisam ser zeradas aqui ou os cards se sobrepõem. */
@media (max-width: 980px) {
    .plan2-grid { grid-template-columns: 1fr; }
    .plan2-card-hi { margin-top: 0; margin-bottom: 0; }
}

/* ─────────────── CTA FINAL: linha de expectativa ───────────────
   O último botão da página pedia uma conversa com um vendedor sem dizer
   o que acontece depois de clicar. O hero já ganhou essa linha; aqui ela
   importa mais, porque é a última chance de converter e o visitante já
   leu tudo o que tinha para ler.
   ─────────────────────────────────────────────────────────────── */
.cta-final-note {
    display: flex; align-items: center; gap: 7px;
    margin: 16px 0 0; max-width: 330px;
    font-family: var(--font-poppins);
    font-size: 0.8rem; font-weight: 300; line-height: 1.5;
    color: rgba(255,255,255,0.66);
}
.cta-final-note svg { flex-shrink: 0; color: rgba(255,255,255,0.8); }

/* ═══════════════ REVISÃO DE ACESSIBILIDADE ═══════════════
   Achados da passada de web-interface-guidelines. Tudo aqui é aditivo:
   nenhuma regra existente foi sobrescrita.
   ═══════════════════════════════════════════════════════════ */

/* ── Âncoras atrás do header fixo ─────────────────────────────────────
   O .site-header é position:fixed em top:16px com 64px de altura, então
   ocupa os primeiros 80px da janela. Sem isto, clicar em "Planos" no
   menu rola a seção para y=0 e o título fica ESCONDIDO atrás do header.
   Vale para todo alvo de âncora, e por isso está no seletor universal
   de id em vez de repetido seção a seção. */
:target,
[id] { scroll-margin-top: 104px; }

/* Rolagem suave, mas só para quem não pediu menos movimento. */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* ── Link de pular para o conteúdo ───────────────────────────────────
   Primeiro elemento focável da página. Fica fora da tela até receber
   foco pelo teclado, e aí aparece por cima de tudo. Sem ele, quem
   navega por Tab atravessa os 9 itens do menu em toda página. */
.pular-para-conteudo {
    position: absolute; top: 0; left: 50%;
    transform: translate(-50%, -140%);
    z-index: 1200;
    padding: 12px 22px; border-radius: 0 0 12px 12px;
    background: var(--ink); color: #fff;
    font-family: var(--font-poppins); font-size: 0.9rem; font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s ease;
}
.pular-para-conteudo:focus {
    transform: translate(-50%, 0);
    outline: 3px solid var(--green-light); outline-offset: 2px;
}

/* ── Alvos de toque ──────────────────────────────────────────────────
   Remove o atraso de 300ms do duplo toque em celular e desliga o flash
   cinza padrão do Android, que aparecia por cima dos botões verdes. */
a, button, .faq-btn, [role="button"] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* ── Transições genéricas ────────────────────────────────────────────
   Quatro regras do design-system pedem ao navegador para animar TODA
   propriedade que mudar, layout incluído. Aqui as duas que estão em uso
   passam a listar só o que de fato muda no hover.

   As outras duas (.pf-pill e .plan-toggle-btn) não aparecem em nenhuma
   página: são CSS morto no design-system, e sobrescrever não adianta.
   Ficam anotadas para a próxima limpeza daquele arquivo. */
.ds-hamburger span   { transition: transform 0.3s ease, opacity 0.3s ease; }
.hero-ds-btn-primary { transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; }


/* ═══════════════════════════════════════════════════════════════
   PLANOS POR PRAZO (2026-09-04)

   O modelo saiu de "mensalidade única" para "plano × prazo
   contratado", e isso muda o que o card precisa mostrar: o valor
   por mês, de onde ele saiu (preço cheio riscado + desconto) e o
   total do período. Valor por mês sozinho, num plano pago
   adiantado, é meia informação.

   O card ficaria longo demais se cada recurso trouxesse o
   parágrafo explicando o que é. Então o rótulo fica curto e o
   detalhe abre no hover, no foco do teclado e no toque.
   ═══════════════════════════════════════════════════════════════ */

/* O seletor de prazo saiu da home em 2026-09-04: a escolha do prazo virou
   a Tela 2 de /contratar.html, e os precos aqui sao os do plano de 5 anos.
   As regras .prazo-* foram removidas junto. */

/* ── Preço dentro do card ── */

/* A tag de desconto anda junto do preco riscado, e nao no canto do card:
   e a leitura que o mercado de hospedagem consolidou, e faz o "de/por"
   ser lido de uma vez so. */
.plan2-price-topo { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; min-height: 22px; }
.plan2-off {
    background: rgba(30,122,66,0.1); color: #1B6E3C;
    font-family: var(--font-poppins); font-size: 0.7rem; font-weight: 700;
    letter-spacing: 0.02em; padding: 4px 9px; border-radius: 6px; white-space: nowrap;
}
.plan2-card-hi .plan2-off { background: rgba(255,255,255,0.18); color: #fff; }
.plan2-price { display: block; margin: 0 0 18px; font-family: var(--font-poppins); }
.plan2-price-old {
    font-size: 0.92rem; font-weight: 400;
    color: rgba(18,33,26,0.4); text-decoration: line-through;
}
.plan2-price-linha { display: flex; align-items: baseline; gap: 5px; }
.plan2-price-num { font-size: 2.5rem; font-weight: 700; color: var(--ink); letter-spacing: -0.03em; line-height: 1; }
.plan2-price-per { font-size: 0.9rem; font-weight: 400; color: rgba(18,33,26,0.5); }
.plan2-card-hi .plan2-price-old { color: rgba(255,255,255,0.5); }

.plan2-price-detail {
    font-family: var(--font-poppins); font-size: 0.78rem; font-weight: 400;
    color: rgba(18,33,26,0.66); line-height: 1.6;
    margin: 0 0 12px;
}
.plan2-price-detail strong { font-weight: 600; color: rgba(18,33,26,0.8); }
.plan2-card-hi .plan2-price-detail { color: rgba(255,255,255,0.64); }
.plan2-card-hi .plan2-price-detail strong { color: #fff; }

/* O CTA sobe para logo abaixo do preço: a decisão é o preço, e o botão
   precisa estar onde ela é tomada, não no fim de uma lista de 9 itens. */
.plan2-cta { margin: 0 0 26px; }
.plan2-feats { padding-top: 24px; border-top: 1px solid var(--border-sub); }
.plan2-card-hi .plan2-feats { border-top-color: rgba(255,255,255,0.16); }

/* ── Recursos agrupados ── */

.plan2-feats { display: flex; flex-direction: column; }
.feat-group { margin: 0 0 10px; }
.feat-group-t {
    display: block;
    font-family: var(--font-poppins); font-size: 0.7rem; font-weight: 700;
    letter-spacing: 0.07em; text-transform: uppercase;
    color: rgba(18,33,26,0.53);
}
.plan2-card-hi .feat-group-t { color: rgba(255,255,255,0.5); }
.feat-list { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.feat-list:last-child { margin-bottom: 0; }

.feat { position: relative; }
.feat-btn {
    width: 100%; display: flex; align-items: flex-start; gap: 10px;
    appearance: none; background: none; border: 0; padding: 0; cursor: help;
    text-align: left;
    font-family: var(--font-poppins); font-size: 0.85rem; font-weight: 400;
    color: rgba(18,33,26,0.75); line-height: 1.45;
}
.feat-btn:focus-visible { outline: 2px solid var(--green-light); outline-offset: 3px; border-radius: 4px; }
.plan2-card-hi .feat-btn { color: rgba(255,255,255,0.9); }
.feat-check {
    width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
    background: #1E7A42; color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
}
.plan2-card-hi .feat-check { background: #fff; color: #1B7A40; }
.feat-label {
    border-bottom: 1px dashed rgba(18,33,26,0.28);
    transition: border-color 0.2s ease;
}
.plan2-card-hi .feat-label { border-bottom-color: rgba(255,255,255,0.35); }
.feat-btn:hover .feat-label { border-bottom-color: var(--green-primary); }

/* O detalhe: some por padrão, aparece no hover, no foco e no toque.
   Fica posicionado sobre o que vem abaixo, e não empurrando o layout,
   pra que passar o mouse pela lista não faça o card pular. */
.feat-tip {
    position: absolute; top: calc(100% + 6px); left: -8px; right: -8px; z-index: 30;
    background: #12211A; color: rgba(255,255,255,0.9);
    border-radius: 10px; padding: 11px 13px;
    font-family: var(--font-poppins); font-size: 0.75rem; font-weight: 400; line-height: 1.55;
    box-shadow: 0 14px 34px rgba(10,25,16,0.28);
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    pointer-events: none;
}
.feat:hover .feat-tip,
.feat:focus-within .feat-tip,
.feat.open .feat-tip {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.plan2-card-hi .feat-tip { background: #F6F9F7; color: rgba(18,33,26,0.78); }

@media (hover: none) {
    .feat-btn { cursor: pointer; }
    .feat:hover .feat-tip { opacity: 0; visibility: hidden; }
    .feat.open .feat-tip { opacity: 1; visibility: visible; }
}

/* ── Tabela comparativa ── */

.recursos-wrap { display: flex; justify-content: center; margin-top: clamp(34px, 4vw, 48px); }
.recursos-btn {
    display: inline-flex; align-items: center; gap: 8px;
    appearance: none; cursor: pointer;
    background: transparent; border: 1.5px solid var(--border-mid); border-radius: 999px;
    padding: 12px 22px;
    font-family: var(--font-poppins); font-size: 0.88rem; font-weight: 600; color: var(--green-text);
    transition: border-color 0.2s ease, background 0.2s ease;
}
.recursos-btn:hover { border-color: var(--green-primary); background: rgba(47,163,85,0.06); }
.recursos-btn:focus-visible { outline: 3px solid var(--green-light); outline-offset: 2px; }
.recursos-chevron { transition: transform 0.25s ease; }
.recursos-btn[aria-expanded="true"] .recursos-chevron { transform: rotate(180deg); }

.recursos-tabela { margin-top: 26px; }
.recursos-scroll {
    overflow-x: auto;
    background: #fff; border: 1px solid var(--border-sub); border-radius: 18px;
    box-shadow: 0 12px 32px rgba(25,45,33,0.06);
}
.rec-tab {
    width: 100%; min-width: 640px; border-collapse: collapse;
    font-family: var(--font-poppins);
}
.rec-tab thead th {
    position: sticky; top: 0; z-index: 2;
    background: #fff;
    font-size: 0.85rem; font-weight: 700; color: var(--ink);
    text-align: center; padding: 18px 14px;
    border-bottom: 1px solid var(--border-mid);
}
.rec-tab thead th:first-child { text-align: left; }
.rec-grupo th {
    background: var(--bg-base);
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
    color: rgba(18,33,26,0.61); text-align: left;
    padding: 11px 16px;
}
.rec-tab tbody td, .rec-tab tbody > tr > th {
    padding: 13px 14px; border-bottom: 1px solid var(--border-sub);
    font-size: 0.82rem; line-height: 1.4;
}
.rec-tab tbody > tr > th {
    text-align: left; font-weight: 400; color: rgba(18,33,26,0.72);
}
.rec-tab tbody td { text-align: center; }
.rec-tab tbody tr:last-child td, .rec-tab tbody tr:last-child > th { border-bottom: 0; }
.tr-sim {
    width: 20px; height: 20px; border-radius: 50%;
    background: #1E7A42; color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
}
.tr-nao { color: rgba(18,33,26,0.28); font-size: 1rem; }
.tr-txt { font-weight: 600; color: rgba(18,33,26,0.8); }


.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Formatos de site no card de benefícios ── */

/* Os três formatos entram como card dentro do card: o leitor da dobra de
   benefícios quer saber o que existe, não ler a explicação de cada um. */
.inc-formatos {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
    margin: 16px 0 0; padding: 0; list-style: none;
}
.fmt-card {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    text-align: center;
    background: #fff; border: 1px solid var(--border-sub); border-radius: 12px;
    padding: 14px 8px;
}
.fmt-icon {
    width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
    background: rgba(30,122,66,0.09); color: #1B6E3C;
    display: inline-flex; align-items: center; justify-content: center;
}
.fmt-nome {
    font-family: var(--font-poppins); font-size: 0.74rem; font-weight: 600;
    color: rgba(18,33,26,0.8); line-height: 1.3;
}

/* Total do período, preço normal e economia: o valor por mês sozinho não
   deixa ver o tamanho do desconto, que é justamente o argumento do prazo. */
.plan2-economia {
    display: inline-block; align-self: flex-start;
    background: rgba(30,122,66,0.1); color: #1B6E3C;
    font-family: var(--font-poppins); font-size: 0.76rem; font-weight: 700;
    padding: 6px 12px; border-radius: 999px;
    margin: 0 0 10px;
}
.plan2-card-hi .plan2-economia { background: rgba(255,255,255,0.18); color: #fff; }
.plan2-card-hi @media (max-width: 560px) {
    .plan2-off { position: static; align-self: flex-start; margin-bottom: 12px; }
    .plan2-card-hi .plan2-off { position: static; }
    .feat-tip { left: 0; right: 0; }
}