/* Conta de teste (rota pública /trial).

   Identidade da landing page do Venda ERP (vendaerp.com.br/lp-google), não do Painel:
   fundo carvão, amarelo e ciano como acentos, e os dois degradês que assinam o site —
   45deg #4DD8F7 → #FAE556 (faixa diagonal do hero) e 90deg #98ECFF → #FFF193 (CTA).
   O azul #000CD2 existe nos tokens do Elementor mas é a cor do produto Painel, não do site:
   usá-lo aqui é o que deixava a lateral com cara errada.

   Página isolada, sem o page.Master — por isso o reset e as variáveis moram aqui. */

:root {
    --vp-carvao: #292929;
    --vp-carvao-fundo: #222222;
    --vp-carvao-claro: #3a3a3a;
    --vp-amarelo: #FAE556;
    --vp-amarelo-claro: #FFF193;
    --vp-ciano: #4DD8F7;
    --vp-ciano-claro: #98ECFF;
    --vp-verde: #00C853;
    --vp-vermelho: #CF2E2E;
    --vp-texto: #414040;
    --vp-texto-suave: #6b6b6b;
    --vp-cinza: #D8D8D8;
    --vp-cinza-claro: #F4F4F5;
    --vp-branco: #FFFFFF;

    --vp-gradiente-faixa: linear-gradient(45deg, #4DD8F7 0%, #FAE556 100%);
    --vp-gradiente-cta: linear-gradient(90deg, #98ECFF 0%, #FFF193 100%);

    --vp-raio: 10px;
    --vp-sombra: 0 20px 50px rgba(0, 0, 0, .10);
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    font-family: 'Asap', 'Segoe UI', Arial, sans-serif;
    color: var(--vp-texto);
    background: var(--vp-cinza-claro);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: 'Ubuntu', 'Segoe UI', Arial, sans-serif;
    margin: 0 0 12px;
    line-height: 1.15;
}

a {
    color: inherit;
}

/* ---------- Estrutura ---------- */

.vp-pagina {
    display: flex;
    min-height: 100vh;
    align-items: stretch;
}

/* ---------- Lateral escura ---------- */

.vp-lateral {
    position: relative;
    overflow: hidden;
    width: 44%;
    max-width: 600px;
    padding: 44px 56px;
    color: var(--vp-branco);
    background: var(--vp-carvao-fundo);
    display: flex;
    flex-direction: column;
}

/* align-self porque a lateral é um flex em coluna: sem isso o stretch padrão dá à img a
   largura inteira da coluna e a marca sai deslocada. */
.vp-logo {
    align-self: flex-start;
    height: 38px;
    width: auto;
}

/* Fio amarelo sob a marca: o site usa exatamente isso abaixo do header. */
.vp-fio {
    height: 1px;
    margin: 22px 0 0;
    background: var(--vp-amarelo);
    opacity: .85;
}

.vp-lateral-corpo {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 0;
    position: relative;
    z-index: 1;
}

.vp-lateral h1 {
    color: var(--vp-branco);
    font-size: 2.5rem;
    font-weight: 700;
    max-width: 15ch;
}

.vp-lateral h1 .vp-destaque {
    color: var(--vp-amarelo);
}

.vp-lateral .vp-chamada {
    margin: 18px 0 0;
    color: #d6d6d6;
    font-size: 1.02rem;
    max-width: 44ch;
}

.vp-beneficios {
    list-style: none;
    margin: 34px 0 0;
    padding: 0;
}

.vp-beneficios li {
    position: relative;
    padding: 0 0 0 34px;
    margin-bottom: 15px;
    color: #ededed;
    font-size: .98rem;
}

.vp-beneficios li b {
    color: var(--vp-branco);
}

/* Check ciano no lugar de bolinha: é o marcador da lista do site. */
.vp-beneficios li::before,
.vp-beneficios li::after {
    content: '';
    position: absolute;
    background: var(--vp-ciano);
    border-radius: 1px;
}

.vp-beneficios li::before {
    left: 4px;
    top: .72em;
    width: 6px;
    height: 2px;
    transform: rotate(45deg);
}

.vp-beneficios li::after {
    left: 7px;
    top: .62em;
    width: 11px;
    height: 2px;
    transform: rotate(-50deg);
}

/* Pastilha carvão porque o rodapé passa por cima da faixa: texto claro sobre o degradê
   claro seria ilegível. */
.vp-rodape-lateral {
    position: relative;
    z-index: 1;
    align-self: flex-start;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(34, 34, 34, .92);
    font-size: .9rem;
    color: #d4d4d4;
}

.vp-rodape-lateral a {
    color: var(--vp-amarelo);
    text-decoration: none;
    border-bottom: 1px solid rgba(250, 229, 86, .5);
}

.vp-rodape-lateral a:hover {
    border-bottom-color: var(--vp-amarelo);
}

/* Faixa diagonal do hero, presa no canto inferior esquerdo. Fica atrás de tudo (z-index 0
   contra o z-index 1 do conteúdo) e baixa o suficiente para não cruzar a lista nem o rodapé. */
.vp-faixa {
    position: absolute;
    left: -12%;
    right: -12%;
    bottom: -34%;
    height: 46%;
    z-index: 0;
    background: var(--vp-gradiente-faixa);
    transform: rotate(-9deg);
    transform-origin: left bottom;
    pointer-events: none;
}

/* ---------- Coluna do formulário ---------- */

.vp-conteudo {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
}

.vp-cartao {
    width: 100%;
    max-width: 540px;
    background: var(--vp-branco);
    border-radius: var(--vp-raio);
    box-shadow: var(--vp-sombra);
    padding: 38px 36px 32px;
}

.vp-cartao h2 {
    color: var(--vp-carvao);
    font-size: 1.6rem;
    font-weight: 700;
}

.vp-cartao .vp-sub {
    margin: 0 0 26px;
    color: var(--vp-texto-suave);
    font-size: .95rem;
}

/* ---------- Passos ---------- */

.vp-passos {
    display: flex;
    gap: 6px;
    margin-bottom: 26px;
}

.vp-passos span {
    flex: 1;
    height: 4px;
    border-radius: 99px;
    background: var(--vp-cinza);
    transition: background .25s ease;
}

.vp-passos span.ativo {
    background: var(--vp-amarelo);
}

.vp-passos span.concluido {
    background: var(--vp-ciano);
}

/* ---------- Formulário ---------- */

.vp-campo {
    margin-bottom: 18px;
}

/* Dois campos por linha: o formulário precisa caber sem rolagem no card. */
.vp-linha {
    display: flex;
    gap: 14px;
}

.vp-linha .vp-campo {
    flex: 1 1 0;
    min-width: 0;
}

.vp-outro {
    margin-top: 8px;
}

@media (max-width: 560px) {
    .vp-linha {
        display: block;
    }
}

.vp-campo label {
    display: block;
    font-size: .92rem;
    font-weight: 700;
    color: var(--vp-carvao);
    margin-bottom: 7px;
}

.vp-campo input,
.vp-campo select {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    font-family: inherit;
    font-size: 1rem;
    color: var(--vp-carvao);
    background: var(--vp-branco);
    border: 1.5px solid var(--vp-cinza);
    border-radius: 8px;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.vp-campo input::placeholder {
    color: #a9a9a9;
}

.vp-campo input:focus,
.vp-campo select:focus {
    outline: none;
    border-color: var(--vp-ciano);
    box-shadow: 0 0 0 3px rgba(77, 216, 247, .25);
}

.vp-campo .vp-dica {
    display: block;
    margin-top: 6px;
    font-size: .82rem;
    color: var(--vp-texto-suave);
}

.vp-codigo input {
    height: 64px;
    text-align: center;
    font-family: 'Ubuntu', monospace;
    font-size: 1.9rem;
    letter-spacing: .5em;
    text-indent: .5em;
    font-weight: 700;
}

/* CTA idêntico ao do hero: degradê ciano→amarelo, borda amarela, texto carvão, pílula. */
.vp-botao {
    width: 100%;
    height: 54px;
    margin-top: 10px;
    font-family: 'Ubuntu', 'Segoe UI', Arial, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--vp-carvao);
    background: var(--vp-gradiente-cta);
    border: 2px solid var(--vp-amarelo);
    border-radius: 999px;
    cursor: pointer;
    transition: filter .18s ease, transform .12s ease;
}

.vp-botao:hover:not(:disabled) {
    filter: brightness(1.05);
}

.vp-botao:active:not(:disabled) {
    transform: translateY(1px);
}

.vp-botao:disabled {
    color: #8d8d8d;
    background: var(--vp-cinza);
    border-color: var(--vp-cinza);
    cursor: not-allowed;
}

.vp-botao-link {
    display: block;
    width: 100%;
    margin-top: 16px;
    padding: 8px;
    font-family: inherit;
    font-size: .92rem;
    color: var(--vp-texto-suave);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
}

.vp-botao-link:hover:not(:disabled) {
    color: var(--vp-carvao);
}

.vp-botao-link:disabled {
    color: #b0b0b0;
    cursor: not-allowed;
    text-decoration: none;
}

/* ---------- Avisos ---------- */

.vp-alerta {
    padding: 12px 14px;
    margin-bottom: 18px;
    border-radius: 8px;
    font-size: .92rem;
    border-left: 4px solid;
}

.vp-alerta-erro {
    color: #7d1414;
    background: #fdecec;
    border-color: var(--vp-vermelho);
}

.vp-alerta-aviso {
    color: #6b5600;
    background: #fffbe2;
    border-color: var(--vp-amarelo);
}

.vp-recaptcha {
    margin: 4px 0 16px;
}

.vp-sucesso {
    text-align: center;
}

.vp-sucesso .vp-selo {
    width: 68px;
    height: 68px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--vp-gradiente-cta);
    border: 2px solid var(--vp-amarelo);
    color: var(--vp-carvao);
    font-size: 2rem;
    line-height: 64px;
    font-weight: 700;
}

.vp-termos {
    margin-top: 18px;
    font-size: .8rem;
    color: var(--vp-texto-suave);
    text-align: center;
}

.vp-termos a {
    color: var(--vp-texto-suave);
}

[hidden] {
    display: none !important;
}

/* ---------- Responsivo ---------- */

@media (max-width: 960px) {
    .vp-pagina {
        flex-direction: column;
    }

    .vp-lateral {
        width: 100%;
        max-width: none;
        padding: 28px 24px 36px;
    }

    .vp-lateral-corpo {
        padding: 26px 0 0;
    }

    .vp-lateral h1 {
        font-size: 1.85rem;
        max-width: none;
    }

    .vp-beneficios {
        margin-top: 22px;
    }

    .vp-beneficios li:nth-child(n + 3) {
        display: none;
    }

    /* Empilhado a faixa vira um fio no rodapé, então o texto não a atravessa e a pastilha
       de contraste perde a razão de existir. */
    .vp-rodape-lateral {
        margin-top: 24px;
        padding: 0;
        background: none;
    }

    /* No empilhado a faixa vira um rodapé fino, senão cobre o texto. */
    .vp-faixa {
        left: 0;
        right: 0;
        bottom: 0;
        height: 8px;
        transform: none;
    }

    .vp-conteudo {
        padding: 28px 20px 48px;
    }
}

@media (max-width: 420px) {
    .vp-cartao {
        padding: 26px 20px;
    }

    .vp-codigo input {
        font-size: 1.5rem;
        letter-spacing: .35em;
        text-indent: .35em;
    }
}