/* Página de vendas (/comece-agora) — complementa landing.css. Sem PHP aqui. */
.vd-nav-acoes { margin-left: auto; }
.vd .ld-nav-in { justify-content: space-between; }

/* topo */
.vd-hero { padding-bottom: 4.5rem; }
.vd-hero-in { position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; align-items: center; }
.vd-hero h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); line-height: 1.06; font-weight: 800; max-width: 900px; }
.vd-hero h1 em { white-space: normal; }
.vd-hero .ld-lead { max-width: 680px; margin: 1.3rem auto 2.2rem; }
.vd-video { width: 100%; }
.vd-cta { margin-top: 2.2rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.vd-btn-grande { padding: 1.1rem 2rem; font-size: 1.08rem; border-radius: 14px; }
.vd-garantias { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.4rem; font-size: .88rem; color: var(--texto-dim); }
.vd-garantias li { display: inline-flex; align-items: center; gap: .4rem; }
.vd-garantias svg { width: 16px; height: 16px; color: var(--acento); }
.vd-garantias b { color: var(--texto); }
.vd-lojas { margin-top: 2.6rem; display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.vd-lojas > span { font-size: .78rem; color: var(--texto-faint); letter-spacing: .06em; text-transform: uppercase; }
.vd-lojas > div { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; }
.vd-lojas .ld-loja { height: 44px; padding: .5rem .9rem; }
.vd-lojas .ld-loja img { height: 24px; }

.vd-centro { margin-inline: auto; text-align: center; }

/* antes x depois */
.vd-antes-depois { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; max-width: 980px; margin-inline: auto; }
.vd-coluna { padding: 1.8rem 1.7rem; border-radius: 22px; border: 1px solid var(--borda); background: var(--superficie); }
.vd-coluna h3 { font-size: 1.3rem; margin-bottom: 1.2rem; }
.vd-coluna ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
.vd-coluna li { display: flex; gap: .7rem; align-items: flex-start; line-height: 1.5; font-size: .95rem; }
.vd-coluna li svg { flex: 0 0 auto; width: 20px; height: 20px; margin-top: .1rem; }
.vd-antes h3 { color: var(--texto-dim); }
.vd-antes li { color: var(--texto-faint); }
.vd-antes li svg { color: #f87171; }
.vd-depois { border-color: rgba(34,230,160,.45); background: linear-gradient(180deg, rgba(34,230,160,.08), var(--superficie) 55%); box-shadow: 0 30px 70px -45px rgba(34,230,160,.6); }
.vd-depois h3 { color: var(--acento); }
.vd-depois li svg { color: var(--acento); }

/* benefícios */
.vd-beneficios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.vd-beneficio { padding: 1.6rem 1.5rem; border-radius: var(--raio); background: var(--superficie); border: 1px solid var(--borda); transition: border-color .25s, transform .25s; }
.vd-beneficio:hover { border-color: rgba(34,230,160,.45); transform: translateY(-4px); }
.vd-beneficio h3 { font-size: 1.15rem; margin: 1rem 0 .45rem; }
.vd-beneficio p { margin: 0; color: var(--texto-dim); line-height: 1.6; font-size: .93rem; }

/* cuidado com o número */
.vd-cuidado { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 3rem; align-items: center; }
.vd-cuidado h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); line-height: 1.1; font-weight: 800; }
.vd-cuidado-lista { list-style: none; margin: 0; padding: 1.6rem; border-radius: 22px; background: var(--superficie); border: 1px solid var(--borda); display: flex; flex-direction: column; gap: .95rem; }
.vd-cuidado-lista li { display: flex; gap: .7rem; align-items: flex-start; color: var(--texto-dim); line-height: 1.5; }
.vd-cuidado-lista svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--acento); margin-top: .1rem; }
.vd-cuidado-lista .vd-nota { padding-top: .95rem; border-top: 1px solid var(--borda); font-size: .9rem; }

/* planos: a lista de ferramentas do card fica menor */
.vd .ld-plano-lista li { font-size: .88rem; }
.vd .ld-plano-lista li svg { width: 16px; height: 16px; }

.vd-rever { margin: 1.4rem 0 0 !important; }
.vd-rever a { display: inline-flex; align-items: center; gap: .45rem; color: var(--texto-dim); font-size: .92rem; }
.vd-rever a:hover { color: var(--acento); }
.vd-rever svg { width: 14px; height: 14px; }

/* botão fixo no celular */
.vd-fixo { display: none; }

@media (max-width: 960px) {
    .vd-beneficios { grid-template-columns: 1fr 1fr; }
    .vd-cuidado { grid-template-columns: 1fr; gap: 1.5rem; }
}
@media (max-width: 760px) {
    .vd .ld-nav-acoes .ld-btn-sm { display: none; }
    .vd .vd-entrar { display: inline-flex; }
    .vd-hero { padding-bottom: 3.5rem; }
    .vd-antes-depois, .vd-beneficios { grid-template-columns: 1fr; }
    .vd-coluna { padding: 1.4rem 1.2rem; }
    .vd-btn-grande { width: 100%; justify-content: center; padding: 1rem 1.2rem; font-size: 1rem; }
    .vd-cta { width: 100%; }
    .vd-fixo { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom, 0px)); background: rgba(5,16,12,.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--borda); transform: translateY(110%); transition: transform .3s cubic-bezier(.2,.7,.2,1); }
    .vd-fixo.vis { transform: none; }
    .vd-fixo .ld-btn { width: 100%; justify-content: center; }
    .vd .ld-foot { padding-bottom: 5.5rem; }
}