/* =========================================================================
   Telas abertas (entrada, diagnóstico, cadastro).
   Primeira impressão do produto: escura, ampla e com UMA decisão por tela.
   ========================================================================= */

.va-pub {
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    font-family: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
    color: #f3f2fa;
    background: radial-gradient(1200px 600px at 15% -10%, #183050 0%, transparent 60%),
                linear-gradient(160deg, #0B1220 0%, #101B2B 55%, #0B1220 100%);
    background-attachment: fixed;
}

.va-pub-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem clamp(1rem, 5vw, 3rem);
}

.va-pub-brand {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #fff;
    text-decoration: none;
}

.va-pub-brand span { color: #34BF33; }

.va-pub-brand img {
    height: 38px;
    width: auto;
    display: block;
}

@media (max-width: 575.98px) {
    .va-pub-brand img { height: 32px; }
}

.va-pub-entrar {
    color: #D3DCE6;
    text-decoration: none;
    font-size: .92rem;
    font-weight: 500;
    padding: .55rem .9rem;
    border-radius: .6rem;
    border: 1px solid rgba(255, 255, 255, .16);
    /* Alvo de toque confortável no celular. */
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.va-pub-entrar:hover { background: rgba(255, 255, 255, .08); color: #fff; }

.va-pub-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 4vw, 3rem) clamp(1rem, 5vw, 3rem) 3rem;
}

.va-pub-rodape {
    text-align: center;
    padding: 1.25rem;
    font-size: .82rem;
    color: #7d78a3;
}

/* ---- Bloco central ---- */
.va-pub-wrap { width: 100%; max-width: 940px; }
.va-pub-wrap-narrow { max-width: 620px; }

.va-pub-titulo {
    font-size: clamp(1.75rem, 5.2vw, 2.9rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.12;
    margin-bottom: .85rem;
}

.va-pub-sub {
    font-size: clamp(1rem, 2.4vw, 1.12rem);
    color: #AEBAC9;
    line-height: 1.6;
    margin-bottom: 2rem;
}

/* ---- Campo do endereço: o único elemento da tela 1 ---- */
.va-pub-campo {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: .9rem;
    padding: .5rem;
}

.va-pub-campo input {
    flex: 1 1 240px;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: 0;
    color: #fff;
    /* 16px reais: abaixo disso o iPhone dá zoom sozinho ao focar. */
    font-size: 1rem;
    padding: .85rem .9rem;
    min-height: 48px;
}

.va-pub-campo input::placeholder { color: #8A97A8; }

.va-pub-botao {
    border: 0;
    border-radius: .7rem;
    background: linear-gradient(135deg, #34BF33, #2CA82B);
    border: 1px solid #238C22;
    color: #0B1220;
    font-weight: 700;
    font-size: 1rem;
    padding: .85rem 1.5rem;
    min-height: 48px;
    flex: 1 1 auto;
    cursor: pointer;
    transition: transform .12s ease, filter .12s ease;
}

.va-pub-botao:hover { filter: brightness(1.08); }
.va-pub-botao:active { transform: translateY(1px); }
.va-pub-botao[disabled] { opacity: .6; cursor: progress; }

@media (min-width: 576px) {
    .va-pub-botao { flex: 0 0 auto; }
}

.va-pub-nota { color: #8A97A8; font-size: .86rem; margin-top: .9rem; }
.va-pub-erro {
    background: rgba(220, 53, 69, .14);
    border: 1px solid rgba(220, 53, 69, .4);
    color: #ffb3bc;
    border-radius: .7rem;
    padding: .85rem 1rem;
    font-size: .92rem;
}

/* ---- Cartões do diagnóstico ---- */
.va-pub-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .85rem;
    margin-bottom: 1.5rem;
}

.va-pub-card {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: .9rem;
    padding: 1.1rem;
}

.va-pub-card-num {
    font-size: clamp(1.6rem, 4.5vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.va-pub-card-rot { color: #AEBAC9; font-size: .86rem; margin-top: .15rem; line-height: 1.35; }
.va-pub-card-alerta { border-color: rgba(251, 191, 36, .45); background: rgba(251, 191, 36, .10); }
.va-pub-card-alerta .va-pub-card-num { color: #fbbf24; }

/* ---- Painel branco do cadastro ---- */
.va-pub-form {
    background: #fff;
    color: #0E1726;
    border-radius: 1.1rem;
    padding: clamp(1.25rem, 3vw, 1.9rem);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
}

.va-pub-form .form-control {
    /* 16px evita o zoom automático do iOS ao focar o campo. */
    font-size: 1rem;
    padding: .7rem .85rem;
    min-height: 46px;
}

.va-pub-form .form-label { font-weight: 600; font-size: .9rem; }

.va-pub-lista { list-style: none; padding: 0; margin: 0; }
.va-pub-lista li {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    color: #D3DCE6;
    font-size: .95rem;
    line-height: 1.5;
    margin-bottom: .55rem;
}
.va-pub-lista .ok { color: #34d399; flex-shrink: 0; }

.va-pub-exemplos {
    background: rgba(0, 0, 0, .22);
    border-radius: .7rem;
    padding: .85rem 1rem;
    font-size: .88rem;
    color: #D3DCE6;
}
.va-pub-exemplos div { padding: .18rem 0; }

/* ---- Trilha de etapas do assistente ---- */
.va-passos {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.1rem;
    padding: 0;
    margin: 0 0 1.5rem;
    font-size: .84rem;
    color: #8A97A8;
}

.va-passos li { display: flex; align-items: center; gap: .45rem; }
.va-passos .bola {
    width: 22px; height: 22px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .72rem; font-weight: 700;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    flex-shrink: 0;
}
.va-passos .atual { color: #fff; font-weight: 600; }
.va-passos .atual .bola { background: #34BF33; border-color: #238C22; color: #0B1220; }
.va-passos .feito { color: #a7f3d0; }
.va-passos .feito .bola { background: rgba(52, 211, 153, .18); border-color: rgba(52, 211, 153, .5); color: #34d399; }

.va-pub-ok {
    background: rgba(52, 211, 153, .14);
    border: 1px solid rgba(52, 211, 153, .4);
    color: #065f46;
    border-radius: .7rem;
    padding: .8rem 1rem;
    font-size: .92rem;
}

/* Dentro do painel branco o verde precisa de contraste com fundo claro. */
.va-pub-form .va-pub-ok { background: #e8f8f1; color: #065f46; }

/* ---- Guia passo a passo (instalação do plugin) ---- */
.va-guia { padding-left: 1.15rem; margin: 0; color: #3B4557; font-size: .93rem; line-height: 1.6; }
.va-guia li { margin-bottom: .7rem; }

/* ---- Cartões de escolha (ritmo) ---- */
.va-opcoes { display: flex; flex-direction: column; gap: .6rem; }
.va-opcoes label {
    display: flex; align-items: flex-start; gap: .7rem;
    border: 1px solid #E4E9E6;
    border-radius: .8rem;
    padding: .9rem 1rem;
    cursor: pointer;
    /* Alvo de toque generoso: o cartão inteiro seleciona. */
    min-height: 56px;
}
.va-opcoes label:hover { border-color: #8FD08E; background: #F3FBF3; }
.va-opcoes input { margin-top: .2rem; flex-shrink: 0; width: 18px; height: 18px; }
.va-opcoes input:checked + span strong { color: #2CA82B; }
.va-opcoes label:has(input:checked) { border-color: #34BF33; background: #EAF8EA; }
.va-opcoes span { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.va-opcoes strong { font-size: .98rem; }
.va-opcoes em { font-style: normal; color: #6B7688; font-size: .87rem; line-height: 1.4; }

/* ---- Conferência final ---- */
.va-checklist { list-style: none; padding: 0; margin: 0; font-size: .93rem; color: #3B4557; }
.va-checklist li { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .45rem; }
.va-checklist .ok { color: #10b981; font-weight: 700; flex-shrink: 0; }
.va-checklist .neutro { color: #b0adc4; flex-shrink: 0; }

.va-aviso-teste {
    background: #EAF8EA;
    border: 1px solid #A8DCA7;
    border-radius: .8rem;
    padding: .85rem 1rem;
    font-size: .9rem;
    color: #3B4557;
    line-height: 1.5;
}

/* =========================================================================
   Página de planos — é a tela que converte, então respira e hierarquiza.
   ========================================================================= */

/* Âncora de preço: o cliente precisa comparar com o custo REAL da alternativa. */
.va-ancora {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: .9rem;
    padding: 1.1rem 1.3rem;
    text-align: center;
    color: #AEBAC9;
    font-size: .95rem;
    line-height: 1.7;
}
.va-ancora strong { color: #fff; }
.va-ancora .destaque {
    color: #34d399;
    font-weight: 600;
    margin-top: .35rem;
    font-size: 1.02rem;
}

/* Alternador mensal × anual */
.va-ciclo {
    display: flex;
    justify-content: center;
    gap: .35rem;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: .8rem;
    padding: .35rem;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    flex-wrap: wrap;
}
.va-ciclo a {
    flex: 1 1 auto;
    text-align: center;
    padding: .7rem 1rem;
    border-radius: .6rem;
    color: #AEBAC9;
    text-decoration: none;
    font-weight: 600;
    font-size: .95rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
}
.va-ciclo a.on { background: #fff; color: #0E1726; }
.va-ciclo .selo {
    background: #34d399;
    color: #06301f;
    border-radius: 999px;
    padding: .1rem .45rem;
    font-size: .72rem;
    font-weight: 700;
}

/* Cartões dos planos */
.va-planos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    align-items: start;
}

.va-plano {
    position: relative;
    background: #fff;
    color: #0E1726;
    border-radius: 1.1rem;
    padding: 1.6rem 1.4rem 1.4rem;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
    display: flex;
    flex-direction: column;
}

/* O plano recomendado precisa saltar aos olhos sem gritar. */
.va-plano.destaque {
    border: 2px solid #34BF33;
    box-shadow: 0 24px 70px rgba(52, 191, 51, .45);
}

.va-plano .fita {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #34BF33;
    color: #fff;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .02em;
    padding: .3rem .8rem;
    border-radius: 999px;
    white-space: nowrap;
}

.va-plano h2 { font-size: 1.2rem; font-weight: 800; margin: .2rem 0 .3rem; }
.va-plano .chamada { color: #6B7688; font-size: .9rem; line-height: 1.45; min-height: 2.6em; margin-bottom: 1rem; }

.va-plano .preco { border-top: 1px solid #E4E9E6; border-bottom: 1px solid #E4E9E6; padding: 1rem 0; margin-bottom: 1rem; }
.va-plano .parcela { display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap; }
.va-plano .parcela .x { color: #6B7688; font-size: .9rem; }
.va-plano .parcela .valor {
    font-size: 1.95rem;
    font-weight: 800;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}
.va-plano .avista { color: #6B7688; font-size: .84rem; margin-top: .2rem; }
.va-plano .economia { color: #0f9d63; font-weight: 700; font-size: .88rem; margin-top: .45rem; }

.va-plano .itens { list-style: none; padding: 0; margin: 0 0 1.3rem; flex: 1; }
.va-plano .itens li {
    display: flex;
    gap: .55rem;
    align-items: flex-start;
    font-size: .9rem;
    line-height: 1.45;
    color: #3d3a58;
    margin-bottom: .55rem;
}
.va-plano .itens .ok { color: #10b981; font-weight: 700; flex-shrink: 0; }
.va-plano .itens .no { color: #B6BEC9; flex-shrink: 0; }

.btn-plano {
    display: block;
    text-align: center;
    text-decoration: none;
    border-radius: .7rem;
    padding: .9rem 1rem;
    min-height: 50px;
    font-weight: 700;
    font-size: 1rem;
    border: 1.5px solid #34BF33;
    color: #2CA82B;
    background: #fff;
    transition: filter .12s ease, transform .12s ease;
}
.btn-plano:hover { background: #EAF8EA; color: #238C22; }
.btn-plano.primario { background: linear-gradient(135deg, #34BF33, #2CA82B); color: #0B1220; border-color: #238C22; }
.btn-plano.primario:hover { filter: brightness(1.06); color: #0B1220; }
.btn-plano:active { transform: translateY(1px); }

.va-garantias {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem 1.6rem;
    margin-top: 1.8rem;
    color: #8A97A8;
    font-size: .88rem;
}

/* Checkout */
.va-resumo {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: .9rem;
    padding: 1.2rem 1.3rem;
    color: #D3DCE6;
}
.va-resumo .linha { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; font-size: .93rem; }
.va-resumo .total { border-top: 1px solid rgba(255, 255, 255, .16); margin-top: .5rem; padding-top: .8rem; }
.va-resumo .total .valor { font-size: 1.5rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }

/* ---- Páginas legais (privacidade, termos) ---- */
.va-legal .va-pub-form { color: #3B4557; line-height: 1.7; font-size: .96rem; }
.va-legal h2 {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0E1726;
    margin: 1.6rem 0 .5rem;
    letter-spacing: -.01em;
}
.va-legal h2:first-child { margin-top: 0; }
.va-legal p { margin-bottom: .75rem; }
.va-legal ul { padding-left: 1.15rem; margin-bottom: .9rem; }
.va-legal li { margin-bottom: .35rem; }
.va-legal code {
    background: #EAF8EA;
    color: #238C22;
    padding: .1rem .35rem;
    border-radius: .3rem;
    font-size: .88em;
    word-break: break-all;
}
.va-legal a { color: #2CA82B; }