:root{
  --vv-primary:#6b2bb7;
  --vv-secondary:#ff5a5f;
  --vv-accent:#ffb36b;
  --vv-nav-h:64px;
}

html, body { overflow-x: hidden; }

/* ===== HERO ===== */
#hero{
  min-height:70vh;
  display:flex; align-items:center; position:relative;
  padding-top:clamp(20px,4.2vw,64px);
  padding-bottom:clamp(36px,6vw,88px);
  margin-top:0;
}
.hero-bg{position:absolute; inset:0; z-index:0; overflow:hidden;}
/* 1 única imagem cobrindo tudo */
.hero-photo{
  position:absolute; inset:0; width:100%; height:100%;
  display:block;
  object-fit:cover;
  object-position:center 45%;
  max-width:none;
  filter:saturate(1.05) contrast(1.02) brightness(.98);
}
.hero-overlay{position:absolute; inset:0; pointer-events:none; mix-blend-mode:multiply;}
.hero-overlay.overlay-30{
  background:
    linear-gradient(90deg, rgba(12,8,30,.55) 0%, rgba(12,8,30,.38) 42%, rgba(12,8,30,.12) 100%),
    linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.18));
}

/* legibilidade */
#hero h1{color:#fff !important;text-shadow:0 2px 14px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.35);}
#hero .lead{color:rgba(255,255,255,.93) !important;text-shadow:0 1px 10px rgba(0,0,0,.30);}
.hero-copy{position:relative; isolation:isolate;}
.hero-copy::before{
  content:""; position:absolute; inset:-6px 42% -6px -16px; border-radius:24px;
  background:radial-gradient(120% 100% at 20% 50%, rgba(0,0,0,.42) 0%, rgba(0,0,0,.18) 55%, transparent 75%);
  filter:blur(5px); z-index:-1;
}

/* card hero */
.hero-card{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));}
.hero-card .thumb{width:84px;height:84px;background:linear-gradient(135deg,var(--vv-primary),var(--vv-secondary));}
#heroEq .eqb{width:6px;height:8px;display:inline-block;border-radius:3px;background:linear-gradient(180deg,var(--vv-accent),var(--vv-secondary));transition:height .12s linear;}

/* CTA */
.btn-cta{
  background:linear-gradient(90deg,#ff5a5f,#ffb36b);
  border:0; color:#fff; font-weight:700; border-radius:999px;
  padding:.6rem 1.2rem; box-shadow:0 10px 26px rgba(0,0,0,.12);
}

/* *** NOVO: manter botões sempre lado a lado *** */
.hero-cta{
  gap:.5rem;
  flex-wrap:nowrap;           /* não quebra */
}
.hero-cta .btn{
  white-space:nowrap;         /* evita quebrar o texto */
  min-width:0;
}

/* ===== CALCULADORA ===== */
.vv-card-calc{ background:#fff; border:1px solid rgba(0,0,0,.06); }
.vv-inc{ background:#f8f9ff; border:1px dashed rgba(107,43,183,.25); }
.vv-ads{ background:#fff; border:1px solid rgba(0,0,0,.06); }
.vv-ad-row strong{ min-width: 90px; text-align: right; }
.form-select, .form-control, .input-group-text { height: 44px; }

.vv-price-box{
  background:#fff; border:1px solid rgba(0,0,0,.06);
  box-shadow:0 2px 6px rgba(0,0,0,.04);
}

/* ===== DIFERENCIAIS ===== */
.diff-card{ border:1px solid rgba(255,255,255,.2); }
.diff-card .card-body{ background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border-radius:1rem; }

/* ===== Responsivo ===== */
@media (max-width: 991.98px){
  .display-5{font-size:2rem;}
  #hero{min-height:64vh;padding-top:28px;padding-bottom:44px;}
  .hero-copy{ text-align:center; }                 /* título + textos centralizados */
  .hero-copy::before{ inset:-8px -8px -8px -8px; border-radius:16px; }
  .hero-photo{ object-position:center 30%; }

  /* Preço + botões abaixo de tudo no mobile */
  #calc .display-6{ font-size:1.8rem; }
  .vv-ad-row strong{ min-width:auto; }
  .vv-actions { width:100%; justify-content:center !important; }
  .vv-actions .btn { width:100%; max-width:260px; }
  .vv-price-box { text-align:center; }
}

/* xs: duas colunas de botões obrigatórias, sem quebrar */
@media (max-width: 575.98px){
  .hero-cta{
    display:grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;   /* dois botões lado a lado */
    column-gap:.5rem;
  }
  .hero-cta .btn{
    padding:.55rem .9rem;
    font-size:.95rem;
  }
}

/* Âncoras com header fixo */
[id]{ scroll-margin-top: calc(var(--vv-nav-h) + 12px); }