:root{
  --bg:#0b0b0f;
  --card:#12121a;
  --muted:#9aa0a6;
  --text:#f2f4f8;
  --brand:#e11d48; /* red-600 vibe */
  --brand-2:#10b981; /* green accent */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:'Inter',system-ui,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}

.container{max-width:1120px;margin:0 auto;padding:0 20px}
header.container{display:flex;align-items:center;justify-content:space-between;padding:20px 20px}
.logo{font-weight:800;font-size:28px;letter-spacing:0.5px}
.logo span{color:var(--brand)}
.slogan{margin:4px 0 0 0;color:var(--muted);font-size:12px}
.nav a{color:var(--text);opacity:.8;margin-left:18px;text-decoration:none;font-weight:600}
.nav a:hover{opacity:1}

.hero{padding:32px 0 12px;background: radial-gradient(1200px 500px at 50% -10%, rgba(225,29,72,.25), transparent), linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 20%)}
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center}
.hero-copy h1{font-size:40px;line-height:1.1;margin:8px 0 12px}
.hero-copy p{color:var(--muted)}
.price{display:flex;gap:12px;align-items:flex-end;margin:18px 0}
.price .de{text-decoration:line-through;color:var(--muted)}
.price .por{font-size:28px;font-weight:800;color:var(--brand-2)}

.btn{display:inline-block;padding:12px 18px;border-radius:12px;background:#222;color:var(--text);text-decoration:none;border:1px solid #333;font-weight:700}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--brand);border-color:transparent}
.btn-primary:hover{filter:brightness(1.1)}

.lote{display:block;margin-top:8px;color:var(--muted)}
.hero-img img{width:100%;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.5)}

.benefits{padding:56px 0}
.benefits h2{font-size:28px;margin-bottom:18px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:var(--card);border:1px solid #222;border-radius:16px;padding:18px}

.builder{padding:56px 0;background:linear-gradient(180deg, rgba(255,255,255,.03), transparent)}
.builder-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:start}
.form{display:grid;gap:12px;background:var(--card);border:1px solid #222;padding:18px;border-radius:16px}
.form input,.form select{width:100%;padding:12px;border-radius:12px;border:1px solid #2a2a35;background:#0f0f15;color:var(--text)}
.choices{display:flex;gap:16px}
.choice{display:flex;gap:8px;align-items:center}
.summary{margin:8px 0 4px;color:var(--muted)}
.gallery{display:grid;gap:12px}
.gallery figure{margin:0;background:var(--card);border:1px solid #222;border-radius:16px;padding:8px}
.gallery img{width:100%;display:block;border-radius:12px}

.faq{padding:56px 0}
.faq h2{font-size:28px;margin-bottom:18px}
details{background:var(--card);border:1px solid #222;border-radius:14px;padding:12px 14px;margin:10px 0}
summary{cursor:pointer;font-weight:700}
details p{color:var(--muted)}

.cta{padding:40px 0 80px}
.cta-card{background:linear-gradient(135deg, rgba(225,29,72,.18), rgba(16,185,129,.12));border:1px solid #333;border-radius:18px;padding:24px;display:grid;gap:12px;align-items:center;justify-items:start}

.footer{border-top:1px solid #222;padding:18px 0;background:#0a0a0e}
.foot-inner{display:flex;align-items:center;justify-content:space-between}
.foot-links a{color:var(--muted);text-decoration:none;margin-left:16px}
.foot-links a:hover{color:var(--text)}

dialog{border:1px solid #333;border-radius:16px;background:#0f0f15;color:var(--text);padding:20px;max-width:680px}
dialog::backdrop{background:rgba(0,0,0,.6)}

@media (max-width: 960px){
  .hero-inner,.builder-inner{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .hero-copy h1{font-size:32px}
}


/* Improved branding and mobile responsiveness */
.logo{font-weight:800;font-size:28px;letter-spacing:0.5px}
.logo span{color:var(--brand);font-family:Inter, sans-serif}

/* Use Poppins for slogan to be more legible and stylish */
.slogan{font-family:'Poppins', Inter, system-ui, sans-serif;font-weight:600;font-size:14px;color:var(--muted);margin-top:6px}

/* Make CTAs more prominent on mobile */
.btn{padding:14px 18px;border-radius:14px;font-size:15px}
@media (max-width:640px){
  .btn, .btn-primary{display:block;width:100%;text-align:center;padding:16px;border-radius:14px;font-size:16px}
  header.container{flex-direction:column;align-items:flex-start;gap:10px}
  .nav{width:100%;display:flex;gap:12px;overflow:auto}
  .hero-inner{grid-template-columns:1fr;gap:18px}
  .hero-copy h1{font-size:26px}
  .hero-img img{max-height:260px;object-fit:cover}
  .builder-inner{grid-template-columns:1fr;gap:18px}
  .gallery{grid-template-columns:1fr 1fr}
  .price .por{font-size:22px}
  .slogan{font-size:15px}
  .logo{font-size:24px}
  .card{padding:14px}
  details{padding:12px}
}

/* Slight shadow and accent for slogan on large screens */
@media (min-width:961px){
  .slogan{font-size:15px;letter-spacing:0.2px}
}