/* Reset breve + tipografía */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Arial, sans-serif;
  line-height:1.6;
}
img{max-width:100%; display:block}
a{color:inherit}
.container{max-width:1200px; margin:0 auto; padding:0 20px}

.btn{
  display:inline-block; padding:0.9rem 1.2rem; border-radius:14px;
  background:var(--brand); color:#fff; text-decoration:none; font-weight:700;
  transition: transform .12s ease, filter .12s ease;
}
.btn:hover{ filter:brightness(1.08); transform: translateY(-1px) }
.btn--ghost{ background:transparent; border:2px solid var(--brand) }

.section{padding: clamp(56px, 8vw, 110px) 0; position:relative}
.section--alt{ background: var(--panel) }
.section-title{
  font-size: clamp(28px, 5.2vw, 44px);
  line-height:1.1; margin: 0 0 12px;
}
.section-lead{ color: var(--muted); max-width: 780px }

.grid{ display:grid; gap: clamp(16px, 2vw, 28px) }
.grid--2{ grid-template-columns: repeat(2, minmax(0,1fr)) }
.grid--3{ grid-template-columns: repeat(3, minmax(0,1fr)) }
@media (max-width: 900px){
  .grid--2, .grid--3{ grid-template-columns: 1fr }
}

/* Header / Navbar */
.header{
  position:sticky; top:0; z-index:50; background: rgba(17,24,39,.75); backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:12px 20px }
.brand{ font-weight:900; letter-spacing:.4px; text-decoration:none }
.brand .dot{ color: var(--brand) }
.nav__links{ display:flex; gap:18px }
.nav__links a{ text-decoration:none; opacity:.9 }
.nav__links a:hover{ opacity:1 }
.burger{ display:none; background:transparent; border:0; color:var(--text); font-size:26px }
@media (max-width: 900px){
  .burger{ display:block }
  .nav__links{
    position:absolute; left:0; right:0; top:64px; background: rgba(17,24,39,.98);
    display:none; flex-direction:column; padding:14px 20px; border-bottom:1px solid rgba(255,255,255,.08)
  }
  .nav__links.open{ display:flex }
}

/* Hero */
.hero{
  position:relative; min-height: 78vh; display:grid; place-items:center;
  overflow:hidden;
}
.hero__bg{
  position:absolute; inset:0; z-index:0; background:
    linear-gradient(to bottom, rgba(15,17,21,.6), rgba(15,17,21,.6)),
    url('../img/hero-placeholder.jpg') center/cover no-repeat;
}
.hero__pattern{
  position:absolute; inset:0; z-index:1; opacity:.18; pointer-events:none;
  background-image: url('../svg/pattern.svg');
  background-size: 600px;
}
.hero__content{
  position:relative; z-index:2; text-align:center; padding: clamp(24px,6vw,96px);
}
.hero__title{
  font-size: clamp(36px, 7vw, 72px); line-height:1.05; margin:.1em 0;
}
.hero__lead{ color: var(--muted); margin:.75rem auto 1.25rem; max-width: 820px }

/* Cards */
.card{
  background: rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.08);
  border-radius: var(--radius); padding: clamp(16px,2.2vw,22px); box-shadow: var(--shadow);
}
.card h3{ margin-top:0 }

/* Feature list */
.feat{
  display:flex; align-items:flex-start; gap:12px;
  background: rgba(255,255,255,.03); padding:14px; border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
}
.feat__icon{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background: linear-gradient(135deg, var(--brand), var(--brand-2)) }
.feat__text{ flex:1 }

/* Gallery */
.gallery{ display:grid; gap:12px; grid-template-columns: repeat(4, 1fr) }
.gallery img{ border-radius:14px }
@media (max-width: 1024px){ .gallery{ grid-template-columns: repeat(3, 1fr) } }
@media (max-width: 640px){ .gallery{ grid-template-columns: repeat(2, 1fr) } }

/* Pricing */
.pricing{ display:grid; gap:24px; grid-template-columns: repeat(3, minmax(0,1fr)) }
@media (max-width: 1024px){ .pricing{ grid-template-columns: 1fr } }
.tier{ padding:24px; border-radius:16px; border:1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03) }
.tier__price{ font-size: 36px; font-weight:900; margin:.3em 0 }
.tier ul{ padding-left:18px; margin: 0 0 1rem }
.tier li{ margin:.35rem 0 }

/* FAQ */
.faq details{ background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); padding:14px 16px; border-radius:14px }
.faq summary{ cursor:pointer; font-weight:700 }
.faq p{ margin:.6rem 0 0; color: var(--muted) }

/* Footer */
.footer{ padding: 28px 0; color: var(--muted); font-size: 14px; border-top:1px solid rgba(255,255,255,.08) }
.footer a{ text-decoration:none }