/* ===========================
   VARIABLES / BASE
=========================== */
:root{
  --bg:#0b1020;
  --card:#0f1530;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --brand:#60a5fa;
  --brand-2:#34d399;
  --radius:14px;
  --shadow:0 10px 30px rgba(2,6,23,.35);
}
*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0;
  background:linear-gradient(160deg,var(--bg),#070a16); /* 100% del fondo */
  color:var(--text);
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  overflow-x:hidden;
}
img,svg,video{ max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }

/* Contenido al 75% SIEMPRE (tu pedido) */
.container{
  width:75%;
  max-width:1120px;
  margin:0 auto;
  padding:0;
}

/* ===========================
   HEADER sin hamburguesa
=========================== */
.header{
  position:sticky; top:0;
  background:rgba(7,10,22,.65);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(148,163,184,.1);
  z-index:50;
}
.header .inner{
  display:flex; align-items:center; justify-content:space-between;
  height:80px;
}
.brand img{ height:60px; display:block; }

/* Nav desktop alineado a la derecha */
.nav{ display:flex; align-items:center; gap:14px; }
.nav a{ color:var(--muted); }
.nav a:hover{ color:#fff; }
.cta{
  display:inline-block; padding:12px 18px; border-radius:12px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  box-shadow:var(--shadow); font-weight:600;
}
.cta-outline{
  display:inline-block; padding:12px 18px; border-radius:12px;
  border:1px solid rgba(148,163,184,.35); font-weight:600;
}
.nav-cta {
  color:#ffffff; /* texto blanco solo en ese botón */
}

/* ===== Responsive: centrar logo y menú (móvil + tablet) */
@media (max-width:1024px){
  .header .inner{
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    height:auto; padding:12px 0;
  }
  .brand img{ height:48px; }
  .nav{
    width:100%;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px 14px;
  }
}

/* ===========================
   HERO
=========================== */
.hero{
  padding:88px 0 48px;
  border-bottom:1px solid rgba(148,163,184,.1);
  background:radial-gradient(1000px 400px at 70% -10%,rgba(96,165,250,.25),transparent 60%);
}
.hero .container{ text-align:left; }
.hero h1{ font-size:40px; line-height:1.15; margin:0 0 12px; }
.hero p{ color:var(--muted); font-size:18px; max-width:780px; }
.hero .actions{ margin-top:24px; display:flex; gap:12px; flex-wrap:wrap; }
.grad{ background:linear-gradient(135deg,var(--brand),var(--brand-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* KPIs */
.kpi{ display:flex; gap:18px; flex-wrap:wrap; margin-top:16px; }
.kpi .item{
  padding:10px 14px; border:1px solid rgba(148,163,184,.22);
  border-radius:14px; background:rgba(96,165,250,.08);
}

/* ===========================
   SECCIONES / GRIDS / CARDS
=========================== */
.section{ padding:64px 0; border-bottom:1px solid rgba(148,163,184,.08); }
.section h2{ font-size:28px; margin:0 0 18px; }

.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }

.card{
  background:linear-gradient(180deg,var(--card),#0b1022);
  border:1px solid rgba(148,163,184,.15);
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--shadow);
}
.card h3{ margin:4px 0 10px; }
.card p{ color:var(--muted); }

.list{ list-style:disc inside; padding:0; margin:0; display:grid; gap:10px; }

/* ===========================
   PRICING
=========================== */
.pricing{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.price{ font-size:32px; font-weight:800; margin:8px 0; }
.price .old{ color:var(--muted); text-decoration:line-through; font-weight:500; font-size:16px; margin-left:8px; }
.plan .list li{ padding:2px 0; }

/* ===========================
   FOOTER
=========================== */
.footer{ padding:40px 0; color:var(--muted); border-top:1px solid rgba(148,163,184,.08); }

/* ===========================
   RESPONSIVE FINO
=========================== */

/* Tablet: una sola columna en todas las grillas */
@media (max-width:1024px){
  .section{ padding:54px 0; }
  .section h2{ font-size:26px; }

  .grid-3{ grid-template-columns:1fr; gap:16px; } /* ✅ apiladas */
  .grid-2{ grid-template-columns:1fr; gap:16px; } /* ✅ apiladas */
  .pricing{ grid-template-columns:1fr; gap:16px; } /* ✅ apiladas */

  /* Tipografía un poco más chica */
  .hero h1{ font-size:32px; }
  .hero p{ font-size:16px; }
  .card h3{ font-size:18px; }
  .card p, .list{ font-size:15px; line-height:1.5; }

  /* CTAs cómodas en fila o salto si no entran */
  .hero .actions{ gap:10px; }
}

/* Mobile (<=640px) */
@media (max-width:640px){
  .hero{ padding:56px 0 32px; }
  .hero .container{ text-align:center; }
  .hero h1{ font-size:28px; }
  .hero p{ font-size:15px; margin:0 auto 14px; }
  .hero .actions{ flex-direction:column; align-items:stretch; }
  .cta, .cta-outline{ width:100%; text-align:center; }

  .card{ padding:16px; }
  .price{ font-size:24px; }
}