/* ======= Variables & Reset ======= */
:root{
  --bg:#0b0b0f;           /* fondo principal (dark) */
  --panel:#11131a;        /* panel/section */
  --card:#151827;         /* tarjetas */
  --text:#e6e8ef;         /* texto principal */
  --muted:#a7aec4;        /* texto secundario */
  --brand:#b600ff;        /* púrpura BGSC */
  --brand-2:#6a00ff;
  --white:#ffffff;
  --ok:#22c55e;
  --border:rgba(255,255,255,.08);
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#e6e8ef;
  background:#0b0b0f;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}

/* Containers */
.container{
  width:min(1120px, 92%);
  margin-inline:auto;
}

/* Topbar */
.topbar{
  background:linear-gradient(90deg, rgba(182,0,255,.15), rgba(106,0,255,.15));
  color:#e6e8ef;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.topbar .container{
  display:flex;gap:16px;align-items:center;justify-content:space-between;
  padding:10px 0;
}
.topbar__note{font-size:.9rem;color:#a7aec4}
.topbar__cta{
  font-weight:600;text-decoration:none;color:#ffffff;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  padding:8px 14px;border-radius:999px;
}

/* Header / Nav */
.header{
  position:sticky;top:0;z-index:40;
  backdrop-filter: blur(8px);
  background:rgba(11,11,15,.7);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.header__inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand__logo{width:40px;height:40px;object-fit:contain}
.brand__name{font-weight:800;letter-spacing:.12em;color:#ffffff}
.nav{display:flex;gap:18px;align-items:center}
.nav__link{
  color:#a7aec4;text-decoration:none;font-weight:500;
  padding:8px 10px;border-radius:10px;transition:.2s;
}
.nav__link:hover{background:rgba(255,255,255,.06);color:#ffffff}
.nav__link.is-active{color:#ffffff}
.nav__toggle{
  display:none;flex-direction:column;gap:4px;background:none;border:0;cursor:pointer
}
.nav__toggle span{width:24px;height:2px;background:#ffffff;display:block}

/* Hero */
.hero{
  padding:64px 0 24px;
  background:
    radial-gradient(1000px 500px at 20% 10%, rgba(182,0,255,.28), transparent 60%),
    radial-gradient(800px 400px at 80% 0%, rgba(106,0,255,.25), transparent 60%);
}
.hero__content{
  display:grid;gap:36px;grid-template-columns: 1.1fr .9fr;align-items:center;
}
.hero__title{
  font-family:"Playfair Display", serif;
  font-size:clamp(32px, 4vw, 48px);
  line-height:1.15;margin:0 0 12px;
}
.grad{
  background:linear-gradient(90deg, var(--brand), var(--brand-2));
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.hero__subtitle{color:#a7aec4;margin:0 0 18px;max-width:60ch}
.hero__actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.hero__bullets{display:flex;gap:16px;list-style:none;padding:0;margin:10px 0 0;color:#a7aec4;flex-wrap:wrap}
.hero__logo{width:min(420px,100%);filter:drop-shadow(0 10px 30px rgba(0,0,0,.35))}

/* Buttons */
.btn{
  display:inline-block;border:1px solid transparent;border-radius:12px;
  padding:10px 16px;text-decoration:none;font-weight:600;transition:.2s;
}
.btn--primary{
  background:linear-gradient(90deg,#b600ff,#6a00ff);color:#ffffff;
  box-shadow:0 6px 20px rgba(182,0,255,.25);
}
.btn--primary:hover{transform:translateY(-1px)}
.btn--ghost{background:transparent;border-color:rgba(255,255,255,.08);color:#e6e8ef}
.btn--ghost:hover{border-color:#ffffff}
.btn--sm{padding:8px 12px;font-size:.92rem}
.btn--white{background:#ffffff;color:#151515}

/* Sections */
.section{padding:56px 0}
.section--alt{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0))}
.section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px}
.section__title{margin:0;font-size:clamp(22px, 3vw, 32px)}
.section__desc{margin:0;color:#a7aec4}
.prose{color:#e6e8ef}
.prose p{margin:0 0 12px}

/* Grid & Cards */
.grid{
  display:grid;gap:18px;
  grid-template-columns:repeat(1, minmax(0,1fr));
}
@media (min-width:640px){ .grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .grid{grid-template-columns:repeat(3,1fr)} }

.card{
  background:#151827;border:1px solid rgba(255,255,255,.08);
  padding:18px;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:10px
}
.card__title{margin:0 0 4px;font-size:1.1rem}
.card__text{margin:0 0 10px;color:#a7aec4}
.badge{
  align-self:flex-start;border:1px dashed rgba(255,255,255,.08);
  padding:6px 10px;border-radius:999px;color:#a7aec4;font-size:.85rem
}

/* CTA */
.cta{
  padding:56px 0;background:
    radial-gradient(800px 400px at 10% 0%, rgba(182,0,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);
}
.cta__inner{
  text-align:center;max-width:760px;margin:0 auto
}
.cta h3{margin:0 0 6px;font-size:clamp(22px,3vw,28px)}
.cta p{margin:0 0 14px;color:#a7aec4}

/* Footer */
.footer{margin-top:40px}
.footer__grid{
  display:grid;gap:24px;padding:28px 0;border-top:1px solid rgba(255,255,255,.08)
}
@media (min-width:800px){ .footer__grid{grid-template-columns:2fr 1fr 1fr} }
.brand--footer .brand__logo{width:36px;height:36px}
.footer__title{margin:0 0 8px}
.footer__list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.footer__list a{color:#a7aec4;text-decoration:none}
.footer__list a:hover{color:#ffffff}
.footer__txt{color:#a7aec4;max-width:46ch}
.footer__bottom{border-top:1px solid rgba(255,255,255,.08);padding:14px 0;color:#a7aec4;font-size:.9rem}

/* Responsive Nav */
@media (max-width:880px){
  .nav{display:none;position:absolute;right:4%;top:60px;background:var(--panel);
       border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:10px;flex-direction:column;gap:8px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
  .nav.open{display:flex}
  .nav__toggle{display:flex}
  .hero__content{grid-template-columns:1fr}
  .hero__media{order:-1;display:flex;justify-content:center}
}