/* =============================================================================
   Radariza — site público
   =============================================================================

   ⚠️ Carregado DEPOIS do `main.css` do Creativo: mesmo seletor, quem vem depois
   vence. Este arquivo é uma PELE fina, não um framework — o template continua
   sendo a fonte da estrutura.

   ⚠️ Bootstrap 5.3 aqui. O painel é BS4 + Font Awesome 5; NÃO copie regra de um
   para o outro. Ícones aqui são `bi bi-*` (Bootstrap Icons).

   O acento do Creativo já é verde (#379c0c), próximo da identidade da Radariza —
   por isso o template foi mantido fiel, como pedido.
   ========================================================================== */

/* ── Cabeçalho: botões de ação ────────────────────────────────────────────── */

.header-actions {
    gap: .75rem;
}

.btn-entrar {
    color: var(--nav-color, #3d3d3d);
    font-family: var(--nav-font);
    font-size: .95rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: color .3s;
}

.btn-entrar:hover {
    color: var(--accent-color);
}

.btn-comecar {
    background: var(--accent-color);
    color: var(--contrast-color);
    font-family: var(--nav-font);
    font-size: .9rem;
    font-weight: 500;
    padding: 9px 22px;
    border-radius: 50px;
    text-decoration: none;
    white-space: nowrap;
    transition: background .3s, transform .2s;
}

.btn-comecar:hover {
    background: color-mix(in srgb, var(--accent-color), #000 18%);
    color: var(--contrast-color);
    transform: translateY(-1px);
}

/* ── Números do acervo ────────────────────────────────────────────────────── */
/*
 * ⚠️ `tabular-nums` porque estes números mudam a cada importação: sem largura
 * fixa de dígito, o bloco "dança" e passa sensação de instabilidade num dado
 * que precisa transmitir solidez.
 */
.acervo-numeros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 2rem 1rem;
    text-align: center;
}

.acervo-numeros .valor {
    display: block;
    font-family: var(--heading-font);
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--accent-color);
    font-variant-numeric: tabular-nums;
}

.acervo-numeros .rotulo {
    display: block;
    margin-top: .35rem;
    font-size: .82rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--default-color), transparent 35%);
}

/* ── Passos do "como funciona" ────────────────────────────────────────────── */

.passo {
    position: relative;
    padding: 2rem 1.5rem 1.5rem;
    height: 100%;
    background: var(--surface-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
    border-radius: 12px;
    transition: border-color .3s, transform .3s;
}

.passo:hover {
    border-color: var(--accent-color);
    transform: translateY(-4px);
}

.passo .numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent-color), transparent 88%);
    color: var(--accent-color);
    font-family: var(--heading-font);
    font-weight: 700;
}

.passo h4 {
    font-size: 1.1rem;
    margin-bottom: .5rem;
}

.passo p {
    font-size: .95rem;
    margin-bottom: 0;
    color: color-mix(in srgb, var(--default-color), transparent 25%);
}

/* ── Preço ────────────────────────────────────────────────────────────────── */

.cartao-preco {
    background: var(--surface-color);
    border: 2px solid var(--accent-color);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    text-align: center;
    height: 100%;
}

.cartao-preco .valor {
    font-family: var(--heading-font);
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--accent-color);
    font-variant-numeric: tabular-nums;
}

.cartao-preco .unidade {
    display: block;
    margin-top: .4rem;
    color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.lista-conferida {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.lista-conferida li {
    position: relative;
    padding: .55rem 0 .55rem 2rem;
    border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
}

.lista-conferida li:last-child {
    border-bottom: 0;
}

.lista-conferida li::before {
    content: "\F26E";                 /* bi-check-lg */
    font-family: "bootstrap-icons";
    position: absolute;
    left: 0;
    top: .5rem;
    color: var(--accent-color);
    font-size: 1.1rem;
}

/* Item que é ausência de custo, não recurso: risco visual seria exagero, mas
   precisa se distinguir do que está incluído. */
.lista-conferida li.sem::before {
    content: "\F62A";                 /* bi-x-lg */
    color: color-mix(in srgb, var(--default-color), transparent 55%);
}

/* ── Simulador de saldo ───────────────────────────────────────────────────── */

.simulador {
    background: color-mix(in srgb, var(--accent-color), transparent 94%);
    border-radius: 14px;
    padding: 1.75rem;
}

.simulador output {
    display: block;
    font-family: var(--heading-font);
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent-color);
    font-variant-numeric: tabular-nums;
}

/* ── WhatsApp flutuante ───────────────────────────────────────────────────── */

.whatsapp-flutuante {
    position: fixed;
    right: 20px;
    bottom: 88px;              /* acima do botão de topo, sem cobri-lo */
    z-index: 996;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    font-size: 1.4rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    transition: transform .25s;
}

.whatsapp-flutuante:hover {
    color: #fff;
    transform: scale(1.08);
}

/* ── Páginas de texto legal ───────────────────────────────────────────────── */
/*
 * Medida de leitura limitada: linha longa demais faz o olho perder a próxima —
 * e ninguém lê termos de uso que cansam.
 */
.texto-legal {
    max-width: 46rem;
}

.texto-legal h3 {
    margin-top: 2.5rem;
    margin-bottom: .9rem;
    font-size: 1.25rem;
}

.texto-legal h3:first-of-type {
    margin-top: 0;
}

.texto-legal p,
.texto-legal li {
    color: color-mix(in srgb, var(--default-color), transparent 15%);
    line-height: 1.75;
}

.texto-legal ul {
    padding-left: 1.25rem;
}

.texto-legal .atualizado {
    font-size: .9rem;
    color: color-mix(in srgb, var(--default-color), transparent 40%);
}

/* ── Formulário de contato ────────────────────────────────────────────────── */

.form-contato .form-control,
.form-contato .form-select {
    padding: .75rem 1rem;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
}

.form-contato .form-control:focus,
.form-contato .form-select:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--accent-color), transparent 85%);
}

/*
 * ⚠️ Armadilha (honeypot): fica FORA da tela para o humano e visível para o
 * robô que preenche tudo. `display:none` seria detectado por robô melhor; esta
 * técnica esconde sem sumir do DOM.
 *
 * `aria-hidden` + `tabindex=-1` no HTML impedem que leitor de tela e navegação
 * por teclado caiam nela — acessibilidade não pode ser vítima do anti-spam.
 */
.campo-armadilha {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ── Responsivo ───────────────────────────────────────────────────────────── */

@media (max-width: 575px) {
    .btn-comecar {
        padding: 8px 16px;
        font-size: .85rem;
    }

    .acervo-numeros .valor {
        font-size: 1.9rem;
    }

    .cartao-preco .valor {
        font-size: 2.6rem;
    }
}

/* =============================================================================
   Prévia pública — o cartão do hero
   =============================================================================

   ⚠️ REESCRITO. A primeira versão saía SEM ESTILO NENHUM na tela porque
   `.btn-radariza` não existia no CSS — o botão virava texto sublinhado solto, e
   os campos ficavam com a borda crua do navegador. Classe inexistente não dá
   erro: some.

   Segue a linguagem do tema (Creativo Pro): raio de 50px nos botões, fonte de
   título `--heading-font`, acento `--accent-color`. Um cartão que parece de
   outro site quebra a confiança justamente onde ela mais importa.
   ========================================================================== */

/* ── o botão que faltava ───────────────────────────────────────────────── */

.btn-radariza {
    background: var(--accent-color);
    color: var(--contrast-color, #fff);
    font-family: var(--nav-font, var(--default-font));
    font-size: .96rem;
    font-weight: 600;
    padding: 13px 26px;
    border: 0;
    border-radius: 50px;
    text-decoration: none;
    white-space: nowrap;
    transition: background .25s, transform .2s, box-shadow .25s;
}

.btn-radariza:hover,
.btn-radariza:focus {
    background: color-mix(in srgb, var(--accent-color), #000 18%);
    color: var(--contrast-color, #fff);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--accent-color), transparent 72%);
}

.btn-radariza:disabled,
.btn-radariza[disabled] {
    opacity: .62;
    transform: none;
    box-shadow: none;
    cursor: not-allowed;
}

/* ── o cartão ──────────────────────────────────────────────────────────── */

.previa-caixa {
    background: var(--surface-color, #fff);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px color-mix(in srgb, var(--default-color), transparent 88%);
}

.previa-cabecalho {
    padding: 28px 30px 20px;
    /* Faixa de acento suave: separa o cabeçalho sem precisar de borda dura. */
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--accent-color), transparent 95%),
        transparent
    );
}

.previa-etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color), transparent 90%);
    padding: 5px 12px;
    border-radius: 50px;
    margin-bottom: 14px;
}

.previa-titulo {
    font-family: var(--heading-font, inherit);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.24;
    color: var(--heading-color);
    margin-bottom: 6px;
}

.previa-sub {
    font-size: .94rem;
    line-height: 1.5;
    color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.previa-corpo { padding: 8px 30px 30px; }

.previa-corpo .form-label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--heading-color);
    margin-bottom: 6px;
}

/* ⚠️ Campo com ícone embutido: o `bi` fica absoluto sobre o input, e o padding
   à esquerda abre espaço. Sem o padding o texto digitado passa por cima. */
.previa-campo { margin-bottom: 18px; }

/*
 * ⚠️ O ícone ancora AQUI, não no `.previa-campo`: aquele inclui o label, e
 * `top: 50%` centraria no conjunto label+input — o ícone subia para fora do
 * campo. Este envolve só o input.
 */
.previa-controle { position: relative; display: block; }

.previa-controle .bi {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    /* Sem `line-height: 1` a métrica da fonte desloca o glifo alguns pixels. */
    line-height: 1;
    font-size: 1.05rem;
    color: color-mix(in srgb, var(--default-color), transparent 52%);
    pointer-events: none;
    transition: color .18s;
}

/* O ícone acompanha o foco: reforça onde o cursor está. */
.previa-controle:focus-within .bi { color: var(--accent-color); }



/*
 * ⚠️ O SELECT PRECISA DO MESMO ESPAÇO À ESQUERDA que o input: os 42px abrem
 * lugar para o ícone. Sem isto o texto começa na margem normal e fica POR
 * BAIXO do ícone — foi o que o usuário viu ("RJ" atrás do mapinha).
 *
 * ⚠️ E 40px à DIREITA: o `.form-select` do Bootstrap desenha a própria seta
 * ali, e um nome longo passaria por baixo dela.
 */
.previa-corpo .form-select {
    border-radius: 12px;
    padding: 13px 40px 13px 42px;
    font-size: .97rem;
    background-color: #fff;
    border: 1.5px solid color-mix(in srgb, var(--default-color), transparent 78%);
    transition: border-color .18s, box-shadow .18s;
    /* A seta do Bootstrap é uma imagem de fundo: mantê-la à direita. */
    background-position: right 14px center;
}

.previa-corpo .form-select:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color), transparent 84%);
}

/*
 * ⚠️ Select desabilitado tem de PARECER desabilitado: o de cidade nasce assim,
 * e sem contraste diferente o visitante clica e acha que a página travou.
 */
.previa-corpo .form-select:disabled {
    background-color: color-mix(in srgb, var(--default-color), transparent 95%);
    color: color-mix(in srgb, var(--default-color), transparent 45%);
    cursor: not-allowed;
}

/*
 * ⚠️ ESTADO E CIDADE LADO A LADO — mas só a partir de 576px. Em telefone, dois
 * selects na mesma linha ficariam com ~150px cada, estreito demais para
 * "SAO JOSE DO RIO PRETO". Empilhado no telefone, lado a lado no resto.
 */
/*
 * ⚠️ A DUPLA PRECISA DA MARGEM QUE OS CAMPOS DENTRO DELA PERDERAM.
 *
 * Para os dois selects ficarem lado a lado sem um empurrar o outro, zerei
 * `margin-bottom` em `.previa-dupla .previa-campo`. Sem devolvê-la ao bloco, a
 * dupla termina colada no que vem depois — o botão.
 *
 * ⚠️ 18px são os mesmos de `.previa-campo`: o respiro entre a dupla e o botão
 * tem de ser igual ao dos outros campos, ou o formulário fica com ritmo
 * irregular.
 *
 * ⚠️ FORA da media query de propósito: no telefone a dupla não vira grid, mas
 * continua sendo um bloco que precisa de espaço embaixo.
 */
.previa-dupla { margin-bottom: 18px; }


/* ═══════════════════════════════════════════════════════════════════════
 * A AJUDA: que segmentos existem.
 *
 * ⚠️ O botão fica JUNTO DO RÓTULO do campo, não no rodapé: a dúvida nasce na
 * hora de digitar, e ajuda longe do problema é ajuda que ninguém acha.
 * ═══════════════════════════════════════════════════════════════════════ */
.previa-ajuda {
    /* ⚠️ Discreto: é apoio, não concorre com o botão de buscar. */
    background: none;
    border: 0;
    padding: 0 0 0 8px;
    font-size: .82rem;
    color: var(--acento);
    cursor: pointer;
}

.previa-ajuda:hover { text-decoration: underline; }

.ajuda-intro {
    margin-bottom: 16px;
    font-size: .92rem;
    color: var(--texto-suave);
}

/*
 * ⚠️ Grade estática, sem carrossel: 25 itens cabem numa tela e se leem de uma
 * vez. Carrossel esconde o que a pessoa veio procurar.
 */
.ajuda-lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
}

.ajuda-item {
    position: relative;
    padding: 10px 12px;
    text-align: left;
    font-size: .9rem;
    background: var(--superficie-2, var(--superficie));
    border: 1px solid var(--borda);
    border-radius: 8px;
    color: var(--texto);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.ajuda-item:hover {
    border-color: var(--acento);
    background: color-mix(in srgb, var(--acento), transparent 92%);
}

/*
 * ⚠️ A marca de popular é discreta e SEM número: "72 buscas" numa plataforma
 * nova diz ao visitante que quase ninguém usa isto.
 */
.ajuda-marca {
    display: block;
    margin-top: 2px;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--acento);
}

.ajuda-carregando,
.ajuda-vazio {
    margin: 0;
    padding: 18px 0;
    text-align: center;
    color: var(--texto-suave);
}

.ajuda-rodape {
    margin: 18px 0 0;
    font-size: .82rem;
    color: var(--texto-suave);
}

@media (min-width: 576px) {
    .previa-dupla {
        display: grid;
        /* ⚠️ Estado é curto (2 letras), cidade é longa: 1fr / 2fr dá à cidade
           o dobro do espaço em vez de dividir meio a meio. */
        grid-template-columns: 1fr 2fr;
        gap: 12px;
    }

    /* A margem de baixo passa a ser da dupla, não de cada campo. */
    .previa-dupla .previa-campo { margin-bottom: 0; }
}

.previa-corpo .form-control {
    border-radius: 12px;
    padding: 13px 16px 13px 42px;
    font-size: .97rem;
    /*
     * ⚠️ Fundo BRANCO, não cinza: campo com fundo acinzentado e borda apagada
     * parece desabilitado, e o visitante não tenta digitar. Editável tem de
     * parecer editável.
     */
    background: #fff;
    border: 1.5px solid color-mix(in srgb, var(--default-color), transparent 78%);
    transition: border-color .18s, box-shadow .18s;
}

.previa-corpo .form-control:hover {
    border-color: color-mix(in srgb, var(--default-color), transparent 62%);
}

.previa-corpo .form-control:focus {
    border-color: var(--accent-color);
    background: var(--surface-color, #fff);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--accent-color), transparent 86%);
}

.previa-corpo .form-control::placeholder {
    color: color-mix(in srgb, var(--default-color), transparent 62%);
}

.previa-nota {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: .8rem;
    text-align: center;
    margin-top: 14px;
    color: color-mix(in srgb, var(--default-color), transparent 42%);
}

/* ── resultado ─────────────────────────────────────────────────────────── */

.previa-resultado {
    border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    padding: 26px 30px 30px;
    background: color-mix(in srgb, var(--accent-color), transparent 97%);
}

.previa-numero {
    font-family: var(--heading-font, inherit);
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    color: var(--accent-color);
    letter-spacing: -.02em;
}

.previa-numero-rotulo {
    font-size: .95rem;
    font-weight: 500;
    color: color-mix(in srgb, var(--default-color), transparent 25%);
    margin: 6px 0 20px;
}

.previa-lista {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    background: var(--surface-color, #fff);
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 91%);
}

.previa-lista li {
    padding: 12px 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 93%);
    font-size: .89rem;
}

.previa-lista li:last-child { border-bottom: 0; }

.previa-nome {
    font-weight: 600;
    color: var(--heading-color);
}

.previa-detalhe {
    display: block;
    font-size: .79rem;
    line-height: 1.45;
    margin-top: 3px;
    color: color-mix(in srgb, var(--default-color), transparent 45%);
}

/* Indicador de contato: é o argumento de venda — o número, não. */
.previa-sinal {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: .72rem;
    font-weight: 600;
    color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color), transparent 91%);
    padding: 2px 8px;
    border-radius: 50px;
    margin-left: 6px;
}

.previa-conta {
    background: var(--surface-color, #fff);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 91%);
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 18px;
    font-size: .9rem;
    line-height: 1.5;
}

.previa-conta strong {
    font-size: 1.15rem;
    color: var(--heading-color);
}

.previa-erro {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: .88rem;
    line-height: 1.5;
    /* Âmbar, não vermelho: é configuração/entrada, não falha do sistema. */
    color: #7a4b00;
    background: #fff8ea;
    border: 1px solid #ffe0a3;
    border-radius: 12px;
    padding: 13px 15px;
    margin: 0;
}

.previa-erro .bi { flex-shrink: 0; margin-top: 1px; font-size: 1rem; }

/* ── responsivo ────────────────────────────────────────────────────────── */

@media (max-width: 991.98px) {
    .previa-caixa { margin-bottom: 30px; }
}

@media (max-width: 575.98px) {
    .previa-cabecalho { padding: 22px 20px 16px; }
    .previa-corpo     { padding: 6px 20px 24px; }
    .previa-resultado { padding: 22px 20px 24px; }
    .previa-titulo    { font-size: 1.3rem; }
    .previa-numero    { font-size: 2.4rem; }
}


/* =============================================================================
   Coluna direita do hero
   =============================================================================

   ⚠️ `.content-block` é usada na view e NUNCA foi definida — nem no tema, nem
   aqui. A coluna saía crua e desalinhada do cartão ao lado. Classe inexistente
   não dá erro: some.
   ========================================================================== */

.content-block {
    /* Respiro no topo para alinhar com o cabeçalho do cartão da prévia. */
    padding-top: 6px;
}

.content-block .lead {
    font-size: 1.08rem;
    line-height: 1.65;
    color: color-mix(in srgb, var(--default-color), transparent 18%);
    margin-bottom: 24px;
}

.content-block .d-flex.gap-2 { margin-bottom: 18px; }

/* Nota do bônus: fica ao pé dos botões, discreta e legível. */
/*
 * ⚠️ NADA DE FLEX AQUI. Num parágrafo com conteúdo inline (texto + <strong> +
 * texto), o flex transforma cada nó em item de coluna e o `gap` separa todos —
 * a frase vira uma tabela. Ícone dentro de frase se alinha com
 * `vertical-align`, não com flex.
 */
.content-block .text-muted.small,
.content-block > p.small {
    font-size: .86rem;
    line-height: 1.6;
    color: color-mix(in srgb, var(--default-color), transparent 38%);
}

.content-block > p.small .bi,
.content-block .text-muted.small .bi {
    vertical-align: -.08em;
    margin-right: 3px;
    color: var(--accent-color);
}

@media (max-width: 991.98px) {
    .content-block { padding-top: 0; }
}


/* =============================================================================
   Rodapé
   =============================================================================

   ⚠️ O tema define `.footer .footer-content`; o nosso HTML usa `.footer-top` e
   `.footer-about` — nomes de outra variante do Creativo. Sem estas regras o
   rodapé sai sem espaçamento e com a marca do tamanho do texto comum.
   ========================================================================== */

.footer-top {
    display: flex;
    flex-wrap: wrap;
    gap: 32px 24px;
    padding: 12px 0 8px;
}

.footer-about { padding-right: 12px; }

.footer-about p {
    font-size: .92rem;
    line-height: 1.65;
    color: color-mix(in srgb, var(--default-color), transparent 32%);
    margin-bottom: 14px;
}

/* A marca no rodapé e no topo: mesmo peso, tamanho proporcional ao contexto. */
.sitename {
    font-family: var(--heading-font, inherit);
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--heading-color);
}

.footer-about .sitename { font-size: 1.35rem; }

.footer-contact p {
    font-size: .9rem;
    line-height: 1.6;
    margin-bottom: 6px;
    color: color-mix(in srgb, var(--default-color), transparent 32%);
}

.footer .footer-links h4,
.footer-about h4 {
    font-family: var(--heading-font, inherit);
    font-size: .92rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--heading-color);
    padding-bottom: 12px;
    margin-bottom: 14px;
}

.copyright {
    border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    padding-top: 22px;
    font-size: .88rem;
    color: color-mix(in srgb, var(--default-color), transparent 38%);
}

.copyright .sitename { font-size: inherit; }

.credits {
    font-size: .82rem;
    line-height: 1.55;
    margin-top: 8px;
    color: color-mix(in srgb, var(--default-color), transparent 48%);
}

@media (max-width: 767.98px) {
    .footer-top { gap: 26px 0; }
    .footer-about { padding-right: 0; }
}

/* =============================================================================
   Hero — respiro, título e alinhamento das colunas
   =============================================================================

   ⚠️ O tema traz `padding: 140px 0 100px` e `max-width: 800px` no título. Em
   notebook isso empurra o formulário — a coisa principal da página — para baixo
   da dobra, e força o título a quebrar em 3 linhas com a última só com uma
   palavra.
   ========================================================================== */

.hero {
    /*
     * ⚠️ Conferido: o `.header` NÃO é fixo, então este padding é espaço real.
     */
    /*
     * ⚠️ Respiro entre a barra do cabeçalho e o título. O conteúdo do hero é
     * mais alto que `min-height`, então o `justify-content: center` não muda
     * nada na prática — é ESTE padding que cria o espaço.
     */
    /*
     * ⚠️ Com o conteúdo centralizado o padding entra na conta da altura: 120
     * em cima contra 80 embaixo empurraria o bloco abaixo do centro real.
     * Os 96px continuam maiores que o cabeçalho fixo (~78px), então o título
     * nunca passa por baixo dele.
     */
    padding: 96px 0 80px;

    /*
     * ⚠️ O hero ocupa a tela para que a seção seguinte NÃO espie no rodapé da
     * primeira visão — meia seção aparecendo parece bug de layout, não
     * conteúdo proposital. O `-78px` desconta o cabeçalho, que está acima no
     * fluxo (ele não é fixo).
     *
     * ⚠️ `dvh` depois de `vh`: no celular a barra de endereço some ao rolar e
     * `vh` calcula pela tela SEM ela — a seção seguinte voltaria a espiar.
     * Navegador que não conhece `dvh` ignora a segunda linha e fica com `vh`.
     */
    /*
     * ⚠️ `100vh` CHEIO, sem descontar o cabeçalho.
     *
     * O cabeçalho tem `fixed-top` (position: fixed) — ele SAI DO FLUXO e não
     * ocupa altura nenhuma. O `calc(100vh - 78px)` anterior descontava um
     * espaço que nunca existiu, e por isso sobravam ~78px no pé da tela: era
     * ali que a seção branca seguinte espiava.
     *
     * Quem impede o título de passar por baixo da barra fixa é o
     * `padding-top`, não a altura.
     */
    min-height: 100vh;
    /* No celular a barra de endereço some ao rolar; `vh` mede a tela sem ela. */
    min-height: 100dvh;

    display: flex;
    flex-direction: column;
    /*
     * ⚠️ `center` com rede de segurança.
     *
     * O conteúdo (~854px) cabe nos 100vh com folga; ancorado no topo, toda a
     * sobra ia para baixo e deixava um vazio no pé da tela.
     *
     * `safe center`: se em alguma tela o conteúdo passar de 100vh, o alinhamento
     * cai para `flex-start` — sem isso o topo do título sumiria atrás da barra
     * fixa, e não há rolagem que alcance conteúdo empurrado para fora por um
     * container centralizado.
     */
    justify-content: center;
    justify-content: safe center;
}

/* Dentro do flex o container perde a largura automática. */
.hero > .container { width: 100%; }

.hero .hero-header {
    /* 800px era estreito demais para o título em 52px. */
    max-width: 1040px;
    /* ⚠️ 8px deixava o título quase encostando no cartão. */
    margin-bottom: 34px;
}

.hero .hero-header h1 {
    /* Fluido: acompanha a largura em vez de quebrar mal em cada tela. */
    font-size: clamp(2rem, 3.6vw, 3.15rem);
    line-height: 1.14;
    letter-spacing: -.02em;
}

/*
 * As duas colunas do hero comecam na mesma altura.
 * ⚠️ Mira em QUALQUER .row dentro do hero: a home usa `row g-4 mt-2`, e
 * depender da combinacao exata de utilitarios quebra ao mexer no HTML.
 */
.hero .row { align-items: start; }

@media (max-width: 991.98px) {
    .hero {
        padding: 80px 0 48px;
        /*
         * ⚠️ Em tela baixa o conteúdo já passa da altura disponível: manter
         * `min-height: 100vh` empurraria o formulário para fora da vista.
         */
        min-height: 0;
        display: block;
    }
    .hero .hero-header h1 { font-size: clamp(1.75rem, 6vw, 2.4rem); }
}

/* =============================================================================
   Refino do hero: hierarquia entre o cartão e a coluna de texto
   ========================================================================== */

/*
 * ⚠️ O cartão é o elemento principal da página — é onde o visitante age. Ganha
 * peso com sombra e leve elevação; a coluna de texto apoia, não compete.
 */
.previa-caixa {
    box-shadow: 0 24px 70px color-mix(in srgb, var(--default-color), transparent 85%);
}

.previa-titulo { font-size: 1.58rem; }

.previa-cabecalho { padding-bottom: 4px; }

.previa-corpo { padding-top: 18px; }

/*
 * ⚠️ O botão da prévia e o "Criar conta grátis" do topo eram verdes iguais e do
 * mesmo tamanho — dois botões idênticos disputando a atenção. Este ganha
 * altura e um degradê sutil para ser claramente o principal DESTA tela.
 */
.previa-corpo .btn-radariza {
    padding: 15px 26px;
    font-size: 1rem;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--accent-color), #fff 6%),
        var(--accent-color)
    );
    box-shadow: 0 6px 16px color-mix(in srgb, var(--accent-color), transparent 76%);
}

.previa-corpo .btn-radariza:hover {
    background: linear-gradient(
        180deg,
        var(--accent-color),
        color-mix(in srgb, var(--accent-color), #000 14%)
    );
}

/* Lista de argumentos: benefícios, não tabela de dados. */
.lista-conferida li {
    border-bottom: 0;
    padding: 7px 0 7px 30px;
}

.content-block .lead {
    font-size: 1.06rem;
    margin-bottom: 20px;
}

/* Botão secundário: presente, sem competir com o principal. */
.content-block .btn-outline-secondary {
    border-color: color-mix(in srgb, var(--default-color), transparent 78%);
    color: var(--default-color);
}

.content-block .btn-outline-secondary:hover {
    background: color-mix(in srgb, var(--default-color), transparent 94%);
    border-color: color-mix(in srgb, var(--default-color), transparent 62%);
    color: var(--heading-color);
}
/* =============================================================================
   Cadastro e login — mesma casca do site público
   =============================================================================

   ⚠️ Estas telas usavam `radariza.css` (tema escuro do painel). Ao migrarem
   para o `site/layout`, as classes antigas (`campo`, `formulario`, `ajuda`)
   deixaram de existir — classe inexistente não dá erro, o formulário só sai
   cru. Aqui está a casca equivalente em Bootstrap 5.
   ========================================================================== */

.cadastro-secao {
    /* O cabeçalho é `fixed-top`: sem folga o título entra por baixo dele. */
    padding-top: 128px;
    padding-bottom: 72px;
    background: var(--background-color);
}

.cadastro-caixa {
    background: var(--surface-color, #fff);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px color-mix(in srgb, var(--default-color), transparent 88%);
}

.cadastro-cabecalho {
    padding: 30px 32px 22px;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--accent-color), transparent 95%),
        transparent
    );
    border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
}

.cadastro-titulo {
    font-family: var(--heading-font, inherit);
    font-size: 1.72rem;
    font-weight: 700;
    color: var(--heading-color);
    /* Sem subtitulo abaixo, qualquer margem vira vao no cabecalho. */
    margin-bottom: 0;
}

/* Volta a margem so quando existe subtitulo (login, escolha de conta). */
.cadastro-titulo:not(:last-child) { margin-bottom: 8px; }

.cadastro-sub {
    font-size: .95rem;
    line-height: 1.55;
    color: color-mix(in srgb, var(--default-color), transparent 28%);
}

.cadastro-corpo { padding: 26px 32px 30px; }

/* Separador de seção dentro do formulário ("Sua empresa", "Seu acesso"). */
.cadastro-grupo {
    font-family: var(--heading-font, inherit);
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: color-mix(in srgb, var(--default-color), transparent 45%);
    padding-bottom: 10px;
    margin-bottom: 18px;
    border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
}

.cadastro-corpo .form-label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--heading-color);
    margin-bottom: 6px;
}

.cadastro-corpo .form-control {
    border-radius: 12px;
    padding: 12px 15px;
    font-size: .96rem;
    /* Fundo branco: campo acinzentado parece desabilitado. */
    background: #fff;
    border: 1.5px solid color-mix(in srgb, var(--default-color), transparent 78%);
    transition: border-color .18s, box-shadow .18s;
}

.cadastro-corpo .form-control:hover {
    border-color: color-mix(in srgb, var(--default-color), transparent 62%);
}

.cadastro-corpo .form-control:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--accent-color), transparent 86%);
}

/* ⚠️ Vermelho aqui é correto: campo recusado é falha real da entrada. */
.cadastro-corpo .form-control.is-invalid {
    border-color: #d9534f;
}

.cadastro-corpo .form-control.is-invalid:focus {
    box-shadow: 0 0 0 .2rem rgba(217, 83, 79, .16);
}

.cadastro-corpo .invalid-feedback {
    font-size: .82rem;
    margin-top: 5px;
}

.cadastro-corpo .form-text {
    font-size: .8rem;
    color: color-mix(in srgb, var(--default-color), transparent 48%);
}

.cadastro-opcional {
    font-weight: 400;
    font-size: .82rem;
    color: color-mix(in srgb, var(--default-color), transparent 52%);
}

.cadastro-corpo .btn-radariza {
    padding: 14px 26px;
    font-size: 1rem;
}

.cadastro-termos {
    font-size: .8rem;
    line-height: 1.55;
    text-align: center;
    margin: 14px 0 0;
    color: color-mix(in srgb, var(--default-color), transparent 45%);
}

.cadastro-termos a { color: var(--accent-color); }

.cadastro-rodape {
    padding: 16px 32px;
    text-align: center;
    font-size: .9rem;
    background: color-mix(in srgb, var(--default-color), transparent 97%);
    border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
}

.cadastro-rodape a {
    color: var(--accent-color);
    font-weight: 600;
}

@media (max-width: 575.98px) {
    .cadastro-secao   { padding-top: 104px; padding-bottom: 48px; }
    .cadastro-cabecalho { padding: 24px 22px 18px; }
    .cadastro-corpo   { padding: 22px 22px 26px; }
    .cadastro-rodape  { padding: 14px 22px; }
    .cadastro-titulo  { font-size: 1.5rem; }
}

/* Botão de escolha de conta (login com mais de um cliente). */
.conta-opcao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 14px 18px;
    font-size: .96rem;
    font-weight: 600;
    text-align: left;
    color: var(--heading-color);
    background: #fff;
    border: 1.5px solid color-mix(in srgb, var(--default-color), transparent 84%);
    border-radius: 12px;
    transition: border-color .18s, background .18s, transform .15s;
}

.conta-opcao:hover {
    border-color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color), transparent 96%);
    transform: translateY(-1px);
}

.conta-opcao .bi { color: var(--accent-color); }


/* ==========================================================================
   De onde vem as empresas — as duas fontes de busca
   ==========================================================================
   A pagina falava quase so da Receita Federal e o Google Maps aparecia solto
   no meio do texto. Estes cartoes existem para que a segunda fonte seja vista
   por quem so passa os olhos.

   Sem cor fixa: tudo sai de var(--*) + color-mix, como o resto do arquivo.
   ========================================================================== */

/* Linha logo abaixo do H1: a primeira coisa lida depois do titulo. */
.hero-fontes {
    margin: 14px 0 0;
    font-size: 1.05rem;
    color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.hero-fontes strong {
    color: var(--heading-color, var(--default-color));
}

.fonte-cartao {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 28px 30px;
    background: var(--surface-color, #fff);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
    border-radius: 20px;
    box-shadow: 0 20px 60px color-mix(in srgb, var(--default-color), transparent 90%);
    transition: transform .25s ease, box-shadow .25s ease;
}

.fonte-cartao:hover {
    transform: translateY(-4px);
    box-shadow: 0 26px 70px color-mix(in srgb, var(--default-color), transparent 85%);
}

.fonte-cabecalho {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

/* O icone distingue as duas fontes de relance: predio x alfinete de mapa. */
.fonte-cabecalho i {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    font-size: 1.5rem;
    color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color), transparent 90%);
    border-radius: 14px;
}

.fonte-cabecalho h3 {
    margin: 0;
    font-size: 1.3rem;
    font-family: var(--heading-font);
    color: var(--heading-color, var(--default-color));
}

.fonte-etiqueta {
    display: block;
    margin-top: 2px;
    font-size: .85rem;
    color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.fonte-cartao > p {
    margin-bottom: 16px;
    color: color-mix(in srgb, var(--default-color), transparent 15%);
}

.fonte-lista {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
    /* Empurra o rodape para baixo: os dois cartoes terminam alinhados mesmo
       com quantidade diferente de itens. */
    flex: 1 1 auto;
}

.fonte-lista li {
    position: relative;
    padding: 5px 0 5px 26px;
    font-size: .95rem;
    color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.fonte-lista li::before {
    content: "\2713";           /* visto */
    position: absolute;
    left: 0;
    top: 5px;
    font-weight: 700;
    color: var(--accent-color);
}

.fonte-rodape {
    margin: 0;
    padding-top: 14px;
    border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    font-size: .875rem;
    color: color-mix(in srgb, var(--default-color), transparent 45%);
}

/* Preco igual nas duas fontes: a duvida que vem logo depois de comparar. */
.fontes-nota {
    max-width: 760px;
    margin: 32px auto 0;
    padding: 16px 22px;
    text-align: center;
    background: color-mix(in srgb, var(--accent-color), transparent 94%);
    border: 1px solid color-mix(in srgb, var(--accent-color), transparent 82%);
    border-radius: 14px;
    color: color-mix(in srgb, var(--default-color), transparent 12%);
}

.fontes-nota i {
    margin-right: 8px;
    color: var(--accent-color);
}

@media (max-width: 991.98px) {
    .fonte-cartao { padding: 24px 22px; }
    .hero-fontes  { font-size: 1rem; }
}

/* Segunda metade da nota da prévia: presente, mas sem competir com a primeira. */
.previa-nota-extra {
    color: color-mix(in srgb, var(--default-color), transparent 45%);
}

/* ==========================================================================
   Hierarquia do herói: promessa x contexto
   ==========================================================================
   A promessa (o que o cliente ganha) tem peso de subtítulo. A origem dos
   dados vem abaixo, menor e mais apagada: é contexto que tranquiliza, não
   argumento que vende.
   ========================================================================== */
.hero-promessa {
    margin: 16px 0 0;
    font-size: 1.25rem;
    line-height: 1.55;
    color: color-mix(in srgb, var(--default-color), transparent 12%);
}

.hero-promessa strong {
    color: var(--heading-color, var(--default-color));
}

.hero-fontes {
    /* Redefine o que estava aqui antes: agora é linha de apoio, não a mensagem. */
    margin: 8px 0 0;
    font-size: .92rem;
    letter-spacing: .02em;
    color: color-mix(in srgb, var(--default-color), transparent 52%);
}

.hero-fontes strong { color: inherit; font-weight: 600; }

@media (max-width: 991.98px) {
    .hero-promessa { font-size: 1.1rem; }
    .hero-fontes   { font-size: .86rem; }
}