/* =========================================================
   Landing page do Qualymind — CSS PRÓPRIO, de propósito.

   ⛔ NÃO "conserte" isto trocando por `assets/css/tema.css`.

   Esta página é servida ESTATICAMENTE, do S3, por uma distribuição CloudFront
   própria — ela não passa pelo CodeIgniter e não compartilha origem com o
   sistema. Importar `public/assets/css/` daqui criaria dependência da EC2, e a
   EC2 é desligada às 18h todo dia (`infra/modules/scheduler/main.tf`). A
   landing ficaria SEM ESTILO exatamente no horário em que ela é a única coisa
   no ar — que é o motivo pelo qual ela é estática.

   É a mesma decisão que `public/assets/css/index.css` (a tela de login) já
   tomou, pelo motivo dela; ver o comentário no topo daquele arquivo.

   ── Os tokens da marca são os MESMOS, com os MESMOS nomes ─────────────────

   `--marca-navy`, `--marca-azul`, `--marca-ciano` e `--marca-ciano-claro`
   repetem, byte a byte, `tema.css:54-58`. O nome é igual de propósito: quem
   mudar a marca um dia vai procurar por `--marca-azul`, e precisa encontrar os
   TRÊS lugares — `tema.css`, `index.css` e este arquivo.

   ── Seções claras e escuras — e NENHUM tema ───────────────────────────────

   Redesenho de 10/09/2026, na linguagem visual pedida pelo Lucas: cabeçalho e
   rodapé escuros, herói centralizado, faixas escuras intercaladas com seções
   brancas. Continua SEM alternador e sem `data-bs-theme`: claro e escuro aqui
   são decisão de LAYOUT, por seção — não preferência do visitante.

   ⚠️ Cada seção declara o próprio contexto (`.secao-clara`, `.secao-escura`,
   `.secao-media`, e o `.topo`/`.heroi`/`.rodape`), e o contexto define as
   variáveis `--t1`, `--t2`, `--t3`, `--cartao`, `--borda`, `--acento-texto`,
   `--foco`… Componente NUNCA usa cor literal de texto: usa essas variáveis. É
   isso que deixa o mesmo cartão legível numa faixa branca e numa navy.

   ⚠️ Destaque em TEXTO sobre fundo claro é `--claro-acento` (azul escuro,
   6,7:1). O ciano só é texto sobre fundo escuro — sobre branco ele dá 1,8:1 e
   some. Como FUNDO de botão, com texto navy, o ciano vale nos dois (9,9:1).

   ── Tipografia ────────────────────────────────────────────────────────────

   ⚠️ Montserrat é a fonte da marca, mas aqui ela é OPCIONAL: entra só se o
   visitante já a tiver instalada, e o resto cai na pilha do sistema. Não há
   `<link>` para o Google Fonts, ao contrário de `auth/login.php:8` — a landing
   é a primeira impressão do produto e não pode depender de um terceiro para
   renderizar, nem entregar o IP de todo visitante ao Google antes de existir
   política de privacidade publicada.

   Para ter Montserrat de verdade: ponha os `.woff2` em `site/assets/fonts/` e
   declare os `@font-face` aqui. Enquanto não houver os arquivos, NÃO declare —
   `@font-face` apontando para arquivo inexistente é FOIT (texto invisível) até
   o navegador desistir.
   ========================================================= */

:root {
    /* Marca — idênticos a tema.css:54-58 */
    --marca-navy: #0F172A;
    --marca-azul: #3B82F6;
    --marca-ciano: #06B6D4;
    --marca-ciano-claro: #22D3EE;
    --marca-degrade: linear-gradient(135deg, #3B82F6, #06B6D4);

    /* Superfícies escuras */
    --escuro-0: #0B1220;   /* cabeçalho e rodapé — pareado com o --bg-dark do login */
    --escuro-1: #0F172A;   /* seções escuras */
    --escuro-2: #16213A;   /* faixa intermediária */

    /* Superfícies claras */
    --claro-0: #FFFFFF;
    --claro-1: #F4F7FB;
    --claro-2: #EAF0F7;
    --claro-acento: #1D4ED8;

    /* Ação — fundo saturado, texto navy por cima */
    --acao: #22D3EE;
    --acao-hover: #67E8F9;
    --acao-texto: #0F172A;

    --fonte-principal: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    --raio: 14px;
    --raio-botao: 8px;
    --largura: 1200px;
    --topo-altura: 72px;
}

/* ── Contextos ─────────────────────────────────────────────────────────────
   Todo componente lê estas variáveis. O padrão (body) é o contexto claro. */

body,
.secao-clara {
    --t1: #0F172A;
    --t2: #334155;
    --t3: #5B6B80;
    --fundo-secao: var(--claro-0);
    --cartao: var(--claro-1);
    --cartao-borda: #E3E9F1;
    --borda: #E2E8F0;
    --borda-botao: #CBD5E1;
    --acento-texto: var(--claro-acento);
    --icone-fundo: #E0ECFF;
    --icone-cor: var(--claro-acento);
    --chip-fundo: var(--claro-0);
    --erro: #B91C1C;
    --foco: var(--claro-acento);
}

.secao-escura,
.secao-media,
.topo,
.heroi,
.rodape,
.plano-destacado {
    --t1: #F8FAFC;
    --t2: #CBD5E1;
    --t3: #94A3B8;
    --fundo-secao: var(--escuro-1);
    --cartao: rgba(255, 255, 255, .05);
    --cartao-borda: rgba(255, 255, 255, .10);
    --borda: rgba(255, 255, 255, .10);
    --borda-botao: rgba(255, 255, 255, .34);
    --acento-texto: var(--marca-ciano-claro);
    --icone-fundo: rgba(34, 211, 238, .14);
    --icone-cor: var(--marca-ciano-claro);
    --chip-fundo: rgba(255, 255, 255, .06);
    --erro: #FCA5A5;
    --foco: var(--marca-ciano-claro);
}

.secao-media { --fundo-secao: var(--escuro-2); }
.secao-cinza { --fundo-secao: var(--claro-1); --cartao: var(--claro-0); }

/* ── Reset mínimo ───────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--topo-altura) + 12px);
    /* O corpo NUNCA rola horizontalmente (add-landing-page02 §3). ⚠️ E isso
       ESCONDE o que estoura: rolagem zero não prova que cabe. Ver `.acesso`. */
    overflow-x: hidden;
}

body {
    margin: 0;
    font-family: var(--fonte-principal);
    font-size: 17px;
    line-height: 1.6;
    color: var(--t2);
    background: var(--claro-0);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; }

a { color: var(--acento-texto); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { color: var(--t1); line-height: 1.15; margin: 0 0 .55em; font-weight: 800; }
h1, h2, .split-titulo { text-wrap: balance; }
.sem-quebra { white-space: nowrap; }
h1 { font-size: clamp(2.3rem, 5.6vw, 3.75rem); letter-spacing: -.025em; }
h2 { font-size: clamp(1.8rem, 3.8vw, 2.85rem); letter-spacing: -.02em; }
h3 { font-size: 1.14rem; font-weight: 700; letter-spacing: -.005em; }
p { margin: 0 0 1em; }
strong { color: var(--t1); }

code {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .9em;
    color: var(--t1);
}

.container {
    width: 100%;
    max-width: var(--largura);
    margin: 0 auto;
    padding: 0 24px;
}

.centro { text-align: center; }

/* ── Seções ─────────────────────────────────────────────────────────────── */

.secao {
    padding: clamp(64px, 9vw, 112px) 0;
    background: var(--fundo-secao);
    color: var(--t2);
}

.secao-titulo { max-width: 760px; margin-bottom: 48px; }
.secao-titulo.centro { margin-inline: auto; }
.secao-titulo p { color: var(--t3); font-size: 1.08rem; margin: 0; }

.titulo-acento { color: var(--acento-texto); }

.olho {
    display: inline-block;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--acento-texto);
    margin-bottom: 14px;
}

/* ── Botões ─────────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 24px;
    border-radius: var(--raio-botao);
    border: 1.5px solid transparent;
    font: inherit;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }

.btn-principal {
    /* CHAPADO: fundo saturado com texto navy — 9,9:1 nos dois contextos. */
    background: var(--acao);
    color: var(--acao-texto);
    box-shadow: 0 8px 22px rgba(6, 182, 212, .22);
}
.btn-principal:hover { background: var(--acao-hover); }

.btn-secundario {
    background: transparent;
    color: var(--t1);
    border-color: var(--borda-botao);
}
.btn-secundario:hover { border-color: var(--t1); }

/* ── Cabeçalho ──────────────────────────────────────────────────────────── */

.topo {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--escuro-0);
    border-bottom: 1px solid var(--borda);
}
.topo-barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: var(--topo-altura);
}
.topo-marca { display: flex; align-items: center; flex: none; }
.topo-marca img { height: 30px; width: auto; display: block; }

.topo-links { display: flex; align-items: center; gap: 26px; }
.topo-links a { color: var(--t2); font-size: .95rem; font-weight: 600; }
.topo-links a:hover { color: var(--t1); text-decoration: none; }
.topo-links .topo-cliente { color: var(--acento-texto); }
.topo-links .btn { color: var(--acao-texto); padding: 11px 20px; }

.topo-menu-botao {
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--borda);
    border-radius: var(--raio-botao);
    background: transparent;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.topo-menu-botao span {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: var(--t1);
    transition: transform .2s ease, opacity .2s ease;
}
.topo-menu-botao[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.topo-menu-botao[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.topo-menu-botao[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 960px) {
    .topo-menu-botao { display: inline-flex; }
    .topo-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding: 12px 24px 22px;
        background: var(--escuro-0);
        border-bottom: 1px solid var(--borda);
        box-shadow: 0 18px 40px rgba(2, 6, 23, .45);
    }
    .topo-links.aberto { display: flex; }
    .topo-links a { padding: 12px 4px; font-size: 1.02rem; }
    .topo-links .btn { margin-top: 10px; padding: 14px 20px; }
}

/* ── Herói ──────────────────────────────────────────────────────────────── */

.heroi {
    position: relative;
    overflow: hidden;
    padding: clamp(72px, 11vw, 136px) 0 clamp(64px, 9vw, 112px);
    background-color: var(--escuro-0);
    color: var(--t2);
    text-align: center;
}

/* O print do produto ao fundo faz o papel da fotografia da referência — só que
   é o sistema de verdade. Apagado e desfocado: é textura, não conteúdo (por
   isso `alt=""` e `aria-hidden`). */
.heroi-fundo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    opacity: .12;
    filter: blur(7px) saturate(.4);
    transform: scale(1.06);
    pointer-events: none;
}
.heroi::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(70% 80% at 50% 45%, rgba(11, 18, 32, .86) 0%, rgba(11, 18, 32, .62) 100%),
        linear-gradient(180deg, rgba(11, 18, 32, .3) 0%, rgba(11, 18, 32, .9) 100%);
    pointer-events: none;
}

/* Os anéis do símbolo, ampliados e cortados pela borda — só CONTORNO, como no
   login. Preenchidos, virariam mancha. */
.heroi-anel {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .10);
    pointer-events: none;
}
.heroi-anel-1 { width: 760px; height: 760px; top: -300px; right: -260px; }
.heroi-anel-2 { width: 520px; height: 520px; top: -180px; right: -140px; border-color: rgba(255, 255, 255, .14); }

.heroi .container { position: relative; z-index: 1; }
.heroi-conteudo { max-width: 860px; margin: 0 auto; }
.heroi h1 { color: #FFFFFF; }
.heroi-linha-fina { color: var(--marca-ciano-claro); }
.heroi-sub {
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    color: #DBE7F5;
    max-width: 700px;
    margin: 0 auto 36px;
}
.heroi-acoes { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center; }
.heroi-nota { margin: 26px auto 0; font-size: .92rem; color: #A9BCD4; max-width: 620px; }

/* Selo em pílula acima do título. */
.selo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 5px 5px 5px 16px;
    margin-bottom: 28px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 999px;
    background: rgba(255, 255, 255, .05);
    color: #E2E8F0;
    font-size: .9rem;
    font-weight: 600;
}
.selo:hover { text-decoration: none; border-color: rgba(34, 211, 238, .6); }
.selo-texto { display: inline-flex; align-items: center; gap: 8px; }
.selo-texto svg { color: var(--marca-ciano-claro); flex: none; }
.selo-acao {
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(34, 211, 238, .16);
    color: var(--marca-ciano-claro);
}
@media (max-width: 480px) {
    .selo { padding: 8px 16px; font-size: .84rem; }
    .selo-texto { white-space: nowrap; }
    .selo-acao { display: none; }
}

/* Faixa de números — CONTAGEM do código, travada em LandingPrecoTest. */
.fatos {
    display: flex;
    justify-content: center;
    margin: 0 auto 38px;
    padding: 0;
    list-style: none;
    max-width: 640px;
}
.fatos li {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 14px;
}
.fatos li + li { border-left: 1px solid rgba(255, 255, 255, .18); }
.fatos strong {
    color: var(--marca-ciano-claro);
    font-size: clamp(1.9rem, 4.4vw, 2.6rem);
    font-weight: 800;
    line-height: 1.1;
}
.fatos span { color: #C7D3E3; font-size: .92rem; line-height: 1.35; }

/* ── Grades e cartões ───────────────────────────────────────────────────── */

.grade { display: grid; gap: 20px; }
.grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .grade-3 { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .grade-2 { grid-template-columns: 1fr; } }

.cartao {
    background: var(--cartao);
    border: 1px solid var(--cartao-borda);
    border-radius: var(--raio);
    padding: 28px;
}
.cartao h3 { margin-bottom: .5em; }
.cartao p { margin: 0; color: var(--t3); font-size: .98rem; }

.cartao-icone {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    margin-bottom: 18px;
    background: var(--icone-fundo);
    color: var(--icone-cor);
    font-weight: 800;
    font-size: 1.05rem;
}

/* ── Vitrine: texto ao lado de uma tela do produto ──────────────────────── */

.vitrine,
.split {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(28px, 5vw, 64px);
    align-items: center;
}
.split { margin-top: clamp(48px, 7vw, 88px); }
.split-invertido { margin-top: 0; margin-bottom: 48px; }
.split-invertido .secao-titulo { margin-bottom: 0; }
.split-dados { margin-top: 0; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.split-dados .secao-titulo { margin-bottom: 0; }
@media (max-width: 980px) {
    .vitrine, .split, .split-dados { grid-template-columns: 1fr; }
}

.split-titulo { font-size: clamp(1.45rem, 2.8vw, 2rem); font-weight: 800; }
.split-texto p { color: var(--t3); font-size: 1.04rem; margin: 0; }

.ciclo { display: grid; gap: 30px; }
.ciclo-etapa { display: grid; grid-template-columns: 40px 1fr; gap: 18px; align-items: start; }
.ciclo-num {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    /* CHAPADO — texto navy sobre o ciano. */
    background: var(--acao);
    color: var(--acao-texto);
    font-size: 1rem;
    font-weight: 800;
}
.ciclo-etapa h3 { color: var(--acento-texto); font-size: 1.28rem; margin-bottom: .35em; }
.ciclo-etapa p { margin: 0; color: var(--t2); font-size: .98rem; }

.tela { margin: 0; }
.tela-moldura {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--borda);
    background: #FFFFFF;
    box-shadow: 0 28px 70px rgba(2, 6, 23, .32);
}
.tela-barra {
    display: flex;
    gap: 6px;
    align-items: center;
    height: 30px;
    padding: 0 14px;
    background: #E9EEF5;
    border-bottom: 1px solid #DCE3EC;
}
.tela-barra span { width: 10px; height: 10px; border-radius: 50%; background: #C5CFDC; }
.tela img { display: block; width: 100%; height: auto; }
.tela figcaption { margin-top: 12px; font-size: .85rem; color: var(--t3); text-align: center; }

.destaque {
    margin-top: clamp(40px, 6vw, 72px);
    border-left: 3px solid var(--marca-ciano);
    background: rgba(6, 182, 212, .08);
    border-radius: 0 var(--raio) var(--raio) 0;
    padding: 24px 28px;
}
.destaque p { margin: 0; color: var(--t2); font-size: 1.04rem; }

/* Saída do ciclo para a página de detalhes, alinhada ao texto das etapas
   (40px do número + 18px de vão). */
.ciclo-mais { justify-self: start; margin-left: 58px; }
@media (max-width: 480px) { .ciclo-mais { margin-left: 0; } }

/* ── Página "Como funciona" ─────────────────────────────────────────────────
   Um bloco por módulo, cada um na própria seção, alternando o lado da tela.
   ⚠️ No HTML a ordem é SEMPRE texto → tela, que é a ordem de leitura no
   celular; só a grade de desktop espelha. A regra de 980px repete a de
   `.split` porque `.split-espelho` vem depois no arquivo e a venceria. */

.bloco { margin-top: 0; }
.split-espelho { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split-espelho > .split-texto { order: 2; }
@media (max-width: 980px) {
    .split-espelho { grid-template-columns: 1fr; }
    .split-espelho > .split-texto { order: 0; }
}
.split-texto .split-titulo { margin-bottom: .6em; }
.secao-titulo.isolado { margin-bottom: 0; }

.telas-pilha { display: grid; gap: 32px; }

.lista-etapas { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.lista-etapas li { position: relative; padding-left: 22px; color: var(--t2); font-size: 1rem; }
.lista-etapas li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .62em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--acao);
}

/* ── IA — cartões no ritmo escuro / destaque / claro ────────────────────── */

.ia-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
@media (max-width: 980px) { .ia-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ia-lista { grid-template-columns: 1fr; } }

.ia-lista li {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 26px;
    border-radius: var(--raio);
    background: var(--escuro-1);
    border: 1px solid rgba(255, 255, 255, .08);
}
.ia-lista b { color: #F8FAFC; font-weight: 700; font-size: 1.08rem; line-height: 1.3; }
.ia-lista li > span:last-child { color: #B6C4D6; font-size: .96rem; }

/* O destaque: fundo ciano chapado, texto navy. */
.ia-lista li:nth-child(3n + 2) { background: var(--acao); border-color: transparent; }
.ia-lista li:nth-child(3n + 2) b { color: var(--acao-texto); }
.ia-lista li:nth-child(3n + 2) > span:last-child { color: #1E293B; }

/* O claro: fundo quase branco, texto navy. */
.ia-lista li:nth-child(3n) { background: #F8FAFC; border-color: transparent; }
.ia-lista li:nth-child(3n) b { color: var(--marca-navy); }
.ia-lista li:nth-child(3n) > span:last-child { color: #475569; }

.ia-marca {
    align-self: flex-start;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .08em;
    background: rgba(34, 211, 238, .16);
    color: var(--marca-ciano-claro);
}
.ia-lista li:nth-child(3n + 2) .ia-marca { background: rgba(15, 23, 42, .14); color: var(--acao-texto); }
.ia-lista li:nth-child(3n) .ia-marca { background: #E0ECFF; color: var(--claro-acento); }

/* ── Módulos ────────────────────────────────────────────────────────────── */

.modulos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
@media (max-width: 820px) { .modulos { grid-template-columns: 1fr; } }

.modulos-grupo {
    background: var(--cartao);
    border: 1px solid var(--cartao-borda);
    border-radius: var(--raio);
    padding: 26px;
}
.modulos-grupo h3 {
    font-size: .8rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--acento-texto);
    margin-bottom: 14px;
    font-weight: 800;
}
.chips { display: flex; flex-wrap: wrap; gap: 9px; margin: 0; padding: 0; list-style: none; }
.chips li {
    padding: 8px 15px;
    border-radius: 999px;
    background: var(--claro-1);
    border: 1px solid var(--borda);
    color: var(--t1);
    font-size: .93rem;
    font-weight: 600;
}

.planos-nota { margin: 30px 0 0; font-size: .92rem; color: var(--t3); }
.planos-nota.centro { max-width: 820px; margin-inline: auto; }
.secao-media .planos-nota,
.secao-escura .planos-nota { color: var(--t3); }

/* ── Planos ─────────────────────────────────────────────────────────────── */

.planos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
@media (max-width: 980px) { .planos { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; } }

.plano {
    display: flex;
    flex-direction: column;
    background: var(--claro-0);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 30px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .06);
    color: var(--t2);
}
.plano-destacado {
    background: var(--escuro-1);
    border-color: var(--escuro-1);
    box-shadow: 0 22px 50px rgba(15, 23, 42, .28);
}
.plano-nome { font-size: 1.26rem; margin-bottom: .25em; }
.plano-publico { color: var(--t3); font-size: .92rem; min-height: 3.2em; margin-bottom: 20px; }
.plano-preco { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.plano-preco .valor { font-size: 2.2rem; font-weight: 800; color: var(--t1); letter-spacing: -.02em; }
.plano-preco .periodo { color: var(--t3); font-size: .95rem; }
.plano-anual { font-size: .9rem; color: var(--t3); margin-bottom: 22px; }
.plano ul { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 11px; flex: 1; align-content: start; }
.plano li { display: flex; gap: 10px; font-size: .96rem; color: var(--t2); }
.plano li::before { content: "✓"; color: var(--acento-texto); font-weight: 800; flex: none; }
.plano li.sem::before { content: "—"; color: var(--t3); }
.plano .btn { width: 100%; }

/* ── Origem ─────────────────────────────────────────────────────────────── */

.origem {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: clamp(28px, 5vw, 64px);
    align-items: center;
}
@media (max-width: 820px) { .origem { grid-template-columns: 1fr; } }

.origem-marca {
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1;
    max-width: 100%;
    border-radius: var(--raio);
    background:
        radial-gradient(80% 80% at 20% 15%, rgba(59, 130, 246, .55) 0%, transparent 60%),
        radial-gradient(70% 70% at 85% 90%, rgba(6, 182, 212, .45) 0%, transparent 62%),
        linear-gradient(150deg, #0F172A 0%, #16294B 50%, #1D3A6B 100%);
    border: 1px solid var(--borda);
}
@media (max-width: 820px) { .origem-marca { aspect-ratio: 16 / 7; } }
.origem-marca img { width: clamp(84px, 12vw, 128px); height: auto; }
.origem-texto p { color: var(--t2); font-size: 1.04rem; }
.origem-texto p:last-child { margin-bottom: 0; }

/* ── Conversão ──────────────────────────────────────────────────────────── */

.conversao { text-align: center; }
.conversao h2 { max-width: 780px; margin-inline: auto; font-size: clamp(2rem, 4.4vw, 3.2rem); }
.conversao .acento { color: var(--acento-texto); }
.conversao > .container > p { max-width: 640px; margin: 0 auto 34px; color: var(--t3); font-size: 1.06rem; }

/* ── Acesso do cliente ──────────────────────────────────────────────────── */

.acesso {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: center;
    margin-top: 44px;
    padding-top: 36px;
    border-top: 1px solid var(--borda);
}
.acesso label { font-size: .95rem; color: var(--t2); width: 100%; margin-bottom: 4px; font-weight: 600; }
.acesso-campo {
    display: flex;
    align-items: center;
    background: var(--claro-1);
    border: 1px solid var(--borda-botao);
    border-radius: 12px;
    padding: 5px 5px 5px 18px;
    gap: 6px;
}
.acesso input {
    font: inherit;
    font-size: .98rem;
    background: transparent;
    border: 0;
    color: var(--t1);
    padding: 10px 0;
    width: 170px;
    min-width: 120px;
}
.acesso input:focus { outline: none; }
.acesso-campo:focus-within { border-color: var(--foco); box-shadow: 0 0 0 3px rgba(29, 78, 216, .18); }
.acesso input::placeholder { color: var(--t3); }
.acesso .sufixo { color: var(--t3); font-size: .98rem; }
.acesso .btn { padding: 11px 22px; }
.acesso-erro { width: 100%; color: var(--erro); font-size: .9rem; min-height: 1.2em; margin: 0; }

/* ⚠️ Celular: campo + sufixo + botão pedem ~384px contra ~312px úteis em 360px.
   Sem esta regra o `overflow-x: hidden` do body CORTAVA o excesso em silêncio —
   a página não rolava, mas o texto do campo saía amputado e o botão Entrar ficava
   fora da tela, de 320 a 390px (validação de 10/09/2026). Rolagem zero não prova
   que cabe: prova só que o corte está escondido. O botão desce para uma linha
   própria; de 521px para cima nada muda. */
@media (max-width: 520px) {
    .acesso-campo { width: 100%; flex-wrap: wrap; border-radius: 14px; padding: 6px 6px 6px 16px; }
    .acesso input { flex: 1 1 0; width: auto; min-width: 0; }
    .acesso .btn { flex: 1 0 100%; }
}

/* ── Rodapé ─────────────────────────────────────────────────────────────── */

.rodape {
    background: var(--escuro-0);
    padding: 64px 0 34px;
    font-size: .95rem;
    color: var(--t3);
}
.rodape-grade {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 36px;
    margin-bottom: 40px;
}
@media (max-width: 820px) { .rodape-grade { grid-template-columns: 1fr; } }
.rodape-marca p { max-width: 360px; margin: 16px 0 0; }
.rodape img { height: 28px; width: auto; display: block; }
.rodape h3 { font-size: .95rem; letter-spacing: 0; text-transform: none; color: var(--t3); font-weight: 600; margin-bottom: 14px; }
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.rodape a { color: var(--t1); font-weight: 600; }
.rodape a:hover { color: var(--acento-texto); text-decoration: none; }
.rodape-fim {
    border-top: 1px solid var(--borda);
    padding-top: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    font-size: .88rem;
}

/* ── Acessibilidade ─────────────────────────────────────────────────────── */

:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 4px; }

.pular {
    position: absolute;
    left: -9999px;
    background: var(--acao);
    color: var(--acao-texto);
    font-weight: 700;
    padding: 10px 18px;
    border-radius: 0 0 8px 0;
    z-index: 50;
}
.pular:focus { left: 0; top: 0; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .btn, .topo-menu-botao span { transition: none; }
}