/* =========================================================
   NATURAL ENGLISH AI — CSS ACTUALIZADO 2026
   ========================================================= */

/* ============================
   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;
  overflow-x: hidden;
}
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;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
  margin-top: 40px;
}

#acceder {
  margin-left: 30px;
  width: 250px;
  height: 60px;
}

@media (max-width: 768px) {
  #acceder { margin-left: 0; margin-top: 20px; width: 100%; }
}

.iconos {
  width:150px;
  display:block;
  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); }
}

/* ============================
   COUNTDOWN (ACTUALIZADO)
   ============================ */
.countdown-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Alineado a la izquierda en desktop hero */
  margin: 24px 0;
  width: 100%;
}

.countdown-label {
  font-size: 13px;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: 1px;
  margin-bottom: 10px;
  font-weight: 700;
}

.countdown{ 
  font-variant-numeric:tabular-nums; 
  display:flex; 
  gap:10px; 
  align-items:center; 
}

.timebox{
  background:#10112a;
  border:1px solid #2b2e58;
  border-radius:12px;
  padding:8px 12px;
  text-align:center;
  min-width: 65px;
  box-shadow: var(--shadow);
}

.timebox b{ 
  display:block; 
  font-size:24px; 
  color: var(--sec);
  line-height: 1;
}

.timebox span {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .countdown-wrapper { align-items: center; }
}

/* ============================
   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 22px;
  border-radius:14px;
  background:linear-gradient(90deg,var(--pri),var(--sec));
  color:#fff;
  font-weight:800;
  box-shadow:var(--shadow);
  margin-top:12px;
  transition: transform 0.2s ease;
}
.cta:hover { transform: translateY(-2px); opacity: 0.9; }

.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-wrapper { margin: 15px 0; }
.old-price { font-size: 14px; color: var(--muted); text-decoration: line-through; margin-right: 8px; }
.current-price { font-size: 32px; font-weight: 800; color: var(--text); }
.price-period { font-size: 14px; color: var(--muted); }

.list{ list-style:none; margin:15px 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; text-align: center; }
.divider{ height:1px; background:#2b2e58; margin:36px 0; }

/* ============================
   TARJETA DESTACADA
   ============================ */
.card.popular{ border: 2px solid var(--pri); }
.card.popular .ribbon{ z-index:2; top:14px; right:14px; }

/* ============================
   LOGOS Y VIDEO
   ============================ */
.site-logo{
    position: absolute;
    top: 20px;
    right: 5%;
    z-index: 1200;
    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:40px auto;
  display:block;
}
.video-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; border: none; }

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

/* ============================
   RESPONSIVE
   ============================ */
@media (max-width:768px){
  .container{ padding-top:80px; text-align: center; }
  .site-logo { right: 50%; transform: translateX(50%); top: 15px; }
  .hero { padding: 20px 0; }
  .kpis { justify-content: center; }
  .cta { width: 100%; }
}

/* ===========================
   BLOQUE PROMO / BLACK FRIDAY STYLE
   =========================== */
.badge-black {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  background: linear-gradient(90deg,#ff3800,#ffb800);
  color: #0b0f1a;
}

.save-tag {
  font-size: 14px;
  color: var(--accent);
  font-weight: 700;
  margin-top: 5px;
}

/* ===========================
   POPUP DEMO TUTOR IA
   =========================== */
.popup-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex; align-items: center; justify-content: center;
  z-index: 3000; opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.popup-overlay.show { opacity: 1; pointer-events: auto; }
.popup-content {
  position: relative; width: 90%; max-width: 450px;
  border-radius: 24px; overflow: hidden;
  background: #120b3a; box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.popup-content img { display: block; width: 100%; height: auto; }
.popup-close {
  position: absolute; top: 12px; right: 12px;
  background: rgba(0,0,0,0.5); color: #fff; border: none;
  width: 35px; height: 35px; border-radius: 50%; cursor: pointer;
}
/* Corporate logo: preserve the original artwork and provide contrast on the dark page. */
.site-logo { background:#fff; border-radius:12px; padding:10px; }
.site-logo img { width:100px; height:auto; }
@media (max-width:768px) {
  #landing-2026-promo { padding-top:154px; }
  .site-logo img { width:104px; }
}

/* Center the corporate logo above the page content on every screen size. */
.site-logo {
  position:relative; top:auto; right:auto; transform:none;
  display:block; width:max-content; margin:24px auto 0;
}
#landing-2026-promo { padding-top:12px; }