/* ============================
   VARIABLES BASE
============================ */
:root{
  --bg1:#140b2b;
  --bg2:#0b163b;
  --pri:#6a5cff;
  --sec:#5cd5ff;
  --accent:#a7ff6a;
  --text:#e9ecf4;
  --muted:#a9b1c7;
  --card:#1b1c34;
  --shadow:0 10px 30px rgba(0,0,0,.25);
}

/* ============================
   BASE
============================ */
* { box-sizing:border-box; }
body{
  margin:0;
  background:linear-gradient(180deg,var(--bg1),var(--bg2));
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  line-height:1.5;
}
a{ color:inherit; text-decoration:none; }
.container{ max-width:1100px; margin:0 auto; padding:32px; }

/* ============================
   TITULOS Y LABELS
============================ */
.section-label{
  font-weight:900;
  text-transform:uppercase;
  margin-bottom:12px;
  color:#cfd5ee;
  letter-spacing:.03em;
}
.title{ font-weight:800; line-height:1.05; letter-spacing:-.02em; }
.subtitle{ color:var(--muted); }

.ingreso{
  display: flex;
}

#acceder {
  margin-left: 30px;
  width: 250px;
  height: 60px;
}
.iconos {
  width:150px;
  display:block;          /* para que respete los márgenes */
  margin-inline:auto; 
}

/* ============================
   HERO Y GRID
============================ */
.hero{ display:grid; gap:24px; align-items:center; padding:48px 0; }
.grid{ display:grid; gap:20px; }
@media (min-width:900px){
  .hero{ grid-template-columns:1.1fr .9fr; }
  .grid.cols-3{ grid-template-columns:repeat(3,1fr); }
  .grid.cols-2{ grid-template-columns:repeat(2,1fr); }
}

/* ============================
   CHIPS, BOTONES
============================ */
.badge{
  background:linear-gradient(90deg,var(--pri),var(--sec));
  padding:8px 12px;
  border-radius:999px;
  color:#0b0f1e;
  font-weight:700;
  display:inline-block;
}
.kpis{ display:flex; gap:12px; flex-wrap:wrap; margin-top:10px; }
.pill{
  padding:6px 12px;
  border-radius:999px;
  background:#1f2141;
  border:1px solid #2b2e58;
  color:var(--muted);
}
.cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 18px;
  border-radius:14px;
  background:linear-gradient(90deg,var(--pri),var(--sec));
  color:#fff;
  font-weight:800;
  box-shadow:var(--shadow);
  margin-top:12px;
}
.cta.secondary{
  background:#1f2141;
  color:var(--text);
  border:1px solid #2b2e58;
}

/* ============================
   TARJETAS
============================ */
.card{
  background:linear-gradient(180deg,#1b1c34,#12142a);
  border:1px solid #2b2e58;
  border-radius:18px;
  padding:22px;
  box-shadow:var(--shadow);
  position:relative;
}
.ribbon{
  position:absolute;
  top:18px;
  right:18px;
  background:linear-gradient(90deg,var(--pri),var(--sec));
  padding:6px 12px;
  border-radius:10px;
  color:#fff;
  font-weight:900;
}
.price{
  font-size:40px;
  font-weight:900;
  margin:12px 0;
}
.list{ list-style:none; margin:0; padding:0; }
.list li{ display:flex; gap:10px; margin:8px 0; align-items:flex-start; }
.check{ color:var(--accent); font-weight:900; line-height:1; margin-top:4px; }
.notice{ font-size:.9rem; color:var(--muted); }
.footer{ border-top:1px solid #2b2e58; color:var(--muted); padding:24px 0; margin-top:32px; }
.divider{ height:1px; background:#2b2e58; margin:36px 0; }

/* ============================
   TARJETA DESTACADA (Más popular)
============================ */
.card.popular{ transform:scale(1.02); border-color:#3a3fa3; }
.card.popular .ribbon{ z-index:2; top:14px; right:14px; }
.card.popular h3{ padding-right:120px; } /* evita que el título quede debajo de la cinta */

/* ============================
   LOGOS Y VIDEO
============================ */
.site-logo{
 position: absolute;   /* Lo coloca sobre la página */
    top: 20px;            /* Ajusta la distancia desde arriba */
    right: 250px;          /* Ajusta la distancia desde la derecha */
    z-index: 1200;         /* Para que quede encima del resto */
    filter:drop-shadow(0 4px 14px rgba(0,0,0,.35));
}
.site-logo img{ width:clamp(80px,10vw,130px); height:auto; display:block; }

.video-wrap{
  position:relative;
  width:100%;
  max-width:800px;
  aspect-ratio:16/9;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 8px 30px rgba(0,0,0,.25);
  margin:24px auto;
  display:block;
}
.video-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; }

/* ============================
   COUNTDOWN
============================ */
.countdown{ font-variant-numeric:tabular-nums; display:flex; gap:12px; align-items:center; }
.timebox{
  background:#10112a;
  border:1px solid #2b2e58;
  border-radius:12px;
  padding:10px 12px;
  text-align:center;
}
.timebox b{ display:block; font-size:26px; }

/* ============================
   COLORES AUX
============================ */
.blue{ color:var(--sec); }

/* ============================
   RESPONSIVE
============================ */
@media (max-width:768px){
  .container{ padding-top:56px; } /* deja aire bajo el logo fijo */
  .card.popular h3{ padding-right:0; }
  .card.popular .ribbon{ transform:scale(.9); top:10px; right:10px; }
}