/* Vitrine — a página pública de planos (29/10/2026).
 *
 * Arquivo separado do app.css de propósito: 930 linhas de cromo de aplicativo
 * logado não servem a uma página de venda, e misturar os dois faria qualquer
 * ajuste na vitrine arriscar a tela que a equipe usa todo dia. Os TOKENS
 * (cores, fontes) vêm do app.css — é o que mantém a marca igual nos dois.
 *
 * Tudo prefixado `vt-` para não colidir com nenhuma classe do app.
 */

/* ─────────────────────────────────────────────── laranja de TEXTO
 *
 * O #FA5916 da marca REPROVA o contraste AA quando usado como texto: 2,93:1
 * contra o bege do fundo e 3,23:1 contra o branco dos cartões, onde o mínimo
 * para texto normal é 4,5:1. Numa página pública de venda isso atinge quem
 * mais precisa de contraste — e os links do corpo, o asterisco de campo
 * obrigatório e o rótulo do botão principal estavam todos nele.
 *
 * ⚠️ A cor da marca NÃO muda. #FA5916 continua em preenchimento, borda e no
 * logo, onde contraste de texto não se aplica. Este token existe só para onde
 * a cor carrega letra: 22% mais escuro, 4,55:1 no bege e 5,02:1 no branco, e
 * ainda lido como o laranja da casa.
 *
 * Medido e escolhido em 29/10/2026, a partir de achado da revisão adversarial.
 * A mesma questão existe no app logado (app.css), e trocar lá muda o produto
 * inteiro — é decisão do Rodrigo, não minha, e está na lista dele. */
:root {
    --laranja-texto: #C34511;
}

.vt {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--body-font);
    font-size: 16px;
    line-height: 1.6;
}

.vt h1, .vt h2, .vt h3 {
    font-family: var(--head-font);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0;
}

.vt a { color: var(--laranja-texto); }

/* ───────────────────────────────────────────────────────────────── topo */

.vt-topo {
    background: var(--head-bg);
    color: var(--head-fg);
    padding: 14px 0;
}

.vt-topo-in {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 20px;
}

.vt-topo .logo-convergente { --logo-h: 30px; height: var(--logo-h); width: auto; }

.vt-topo-divisor {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, .25);
}

.vt-topo-titulo {
    font-family: var(--head-font);
    font-weight: 600;
    font-size: 15px;
}

.vt-entrar {
    margin-left: auto;
    color: var(--head-fg) !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .4);
}

.vt-entrar:hover { border-bottom-color: var(--laranja); }

/* ──────────────────────────────────────────────────────────── recados */

.vt-flash {
    max-width: 1040px;
    margin: 20px auto 0;
    padding: 13px 17px;
    border: 1px solid #A7D8B4;
    border-left: 4px solid var(--verde);
    border-radius: 8px;
    background: #F0FAF3;
    color: #14532D;
    font-weight: 600;
}

.vt-erros {
    margin: 0 0 22px;
    padding: 14px 18px;
    border: 1px solid #F0A8A8;
    border-left: 4px solid var(--vermelho);
    border-radius: 8px;
    background: #FEF2F2;
    color: #7F1D1D;
}

.vt-erros ul { margin: 6px 0 0; padding-left: 20px; }

/* ───────────────────────────────────────────────────────────── seções */

.vt main { max-width: 1080px; margin: 0 auto; padding: 0 20px 70px; }

.vt-hero { padding: 64px 0 52px; max-width: 760px; }

.vt-hero h1 { font-size: clamp(32px, 5.5vw, 50px); line-height: 1.1; }
.vt-hero h1 em { color: var(--laranja-texto); font-style: normal; }

.vt-lead { font-size: 19px; color: var(--fg2); margin: 20px 0 30px; }

.vt-secao-titulo { font-size: clamp(24px, 3.5vw, 32px); }
.vt-secao-sub { color: var(--fg2); margin: 10px 0 30px; max-width: 680px; }

.vt-tres {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 22px;
    padding: 10px 0 60px;
    border-top: 1px solid var(--linha);
    padding-top: 46px;
}

.vt-tres article {
    padding: 24px;
    border: 1px solid var(--linha);
    border-radius: 12px;
    background: var(--card);
}

.vt-tres h2 { font-size: 19px; margin-bottom: 9px; }
.vt-tres p { margin: 0; color: var(--fg2); font-size: 15px; }
.vt-tres em { color: var(--fg); font-style: normal; font-weight: 600; }

/* ─────────────────────────────────────────────────────── os cartões */

.vt-planos { padding-top: 46px; border-top: 1px solid var(--linha); }

.vt-cartoes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
    gap: 22px;
    align-items: start;
}

.vt-cartao {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 28px 24px;
    border: 1px solid var(--linha);
    border-radius: 14px;
    background: var(--card);
}

/* O destaque sobe 1px e ganha a borda laranja. Nada de escala: cartão
   aumentado desalinha a leitura dos preços, que é o que a pessoa compara. */
.vt-cartao-destaque {
    border: 2px solid var(--laranja);
    box-shadow: 0 10px 28px rgba(250, 89, 22, .12);
}

.vt-selo {
    position: absolute;
    top: -11px;
    left: 24px;
    padding: 3px 11px;
    border-radius: 999px;
    background: var(--laranja-texto);
    color: #fff;
    font-family: var(--head-font);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.vt-cartao h3 { font-size: 23px; }
.vt-chamada { margin: 5px 0 18px; color: var(--fg3); font-size: 14px; }

.vt-preco { margin: 0; display: flex; align-items: baseline; gap: 5px; }
.vt-preco-valor { font-family: var(--head-font); font-size: 33px; font-weight: 800; }
.vt-preco-unidade { color: var(--fg3); font-size: 15px; }
.vt-preco-ano { margin: 4px 0 20px; color: var(--fg3); font-size: 13px; }

.vt-itens { list-style: none; margin: 0 0 24px; padding: 0; flex: 1; }

.vt-itens li {
    position: relative;
    padding: 7px 0 7px 23px;
    border-bottom: 1px solid var(--linha);
    font-size: 15px;
    color: var(--fg2);
}

.vt-itens li:last-child { border-bottom: 0; }

.vt-itens li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--laranja-texto);
    font-weight: 700;
}

.vt-itens strong { color: var(--fg); }

.vt-nota { margin: 30px 0 0; color: var(--fg2); font-size: 15px; }
.vt-vazio { padding: 24px; border: 1px dashed var(--linha); border-radius: 12px; color: var(--fg2); }

/* ───────────────────────────────────────────────────── o que não faz */

.vt-honesto { padding-top: 46px; margin-top: 60px; border-top: 1px solid var(--linha); }
.vt-honesto ul { margin: 0; padding-left: 22px; max-width: 760px; }
.vt-honesto li { margin-bottom: 11px; color: var(--fg2); }
.vt-honesto strong { color: var(--fg); }

/* ─────────────────────────────────────────────────────── formulário */

.vt-form-secao { padding-top: 46px; margin-top: 60px; border-top: 1px solid var(--linha); }

.vt-form {
    max-width: 720px;
    padding: 28px;
    border: 1px solid var(--linha);
    border-radius: 14px;
    background: var(--card);
}

.vt-campos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.vt-campo { margin: 0; display: flex; flex-direction: column; gap: 5px; }
.vt-campo-largo { grid-column: 1 / -1; }

.vt-campo label {
    font-family: var(--head-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--fg2);
}

.vt-obr { color: var(--laranja-texto); }

.vt-campo input, .vt-campo select {
    padding: 10px 12px;
    border: 1px solid var(--linha);
    border-radius: 8px;
    background: #fff;
    font-family: var(--body-font);
    font-size: 15px;
    color: var(--fg);
}

.vt-campo input:focus, .vt-campo select:focus {
    outline: 2px solid var(--laranja);
    outline-offset: 1px;
    border-color: var(--laranja);
}

/* A armadilha. `display:none` é o que robô melhor detecta, então ela sai da
   tela pela posição e continua no documento. */
.vt-armadilha {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.vt-miudo { margin: 14px 0 0; color: var(--fg3); font-size: 13px; }

/* ──────────────────────────────────────────────────────────── botões */

.vt-btn {
    display: inline-block;
    padding: 12px 22px;
    border: 0;
    border-radius: 9px;
    font-family: var(--head-font);
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.vt-btn-primario { background: var(--laranja-texto); color: #fff !important; }
.vt-btn-primario:hover { background: #A33A0E; }

.vt-btn-suave {
    background: var(--card2);
    color: var(--fg) !important;
    box-shadow: inset 0 0 0 1px var(--linha);
}

.vt-btn-suave:hover { background: var(--cinza-claro); }

/* ──────────────────────────────────────────────────────────── rodapé */

.vt-rodape {
    padding: 28px 20px;
    border-top: 1px solid var(--linha);
    background: var(--card);
    text-align: center;
}

.vt-rodape p { margin: 0 0 6px; color: var(--fg2); font-size: 14px; }

/* ───────────────────────────────────────────────────────────── telas */

@media (max-width: 620px) {
    .vt-campos { grid-template-columns: 1fr; }
    .vt-hero { padding: 42px 0 36px; }
    .vt-form { padding: 20px; }
}