/* =========================
   SICAP – CSS producción
   Autor: Darwin + asistente
   ========================= */

/* ---------- Variables & Reset ---------- */
:root{
  --bg:#ffffff;
  --card:#f7f9fc;
  --brand:#0A84C6;
  --brand-2:#FDB813;
  --txt:#0e2233;
  --muted:#5c6b7a;
  --warn:#e6a500;
  --shadow:0 8px 22px rgba(0,0,0,.06);
  --radius:14px;
  --radius-lg:16px;
  --max:1100px;

  --gap:22px;
  --gap-sm:14px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:linear-gradient(180deg,#f6f9fc 0%, #ffffff 60%, #f3f7fb 100%);
  color:var(--txt);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:28px 20px}

/* Transiciones sutiles globales (no afecta layout) */
button,a,.btn,.heroMedia{transition:all .25s ease}

/* ---------- Utilidades ---------- */
.subtitle{color:var(--muted);margin:6px 0}
.badge{display:inline-flex;align-items:center;gap:8px;background:rgba(10,132,198,.12);color:var(--brand);padding:6px 10px;border-radius:999px;font-weight:600;font-size:14px}
.title{font-size:clamp(28px,4vw,44px);line-height:1.05;margin:8px 0;font-weight:800}

/* ---------- Header ---------- */
.header{
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  box-shadow:var(--shadow)
}
.header img{height:48px;width:auto;border-radius:8px;background:#fff;padding:4px;border:1px solid rgba(0,0,0,.06)}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 18px;border-radius:14px;font-weight:700;border:1px solid transparent;cursor:pointer}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.12)}
.btn:focus-visible{outline:3px solid var(--brand);outline-offset:2px;box-shadow:0 0 0 2px #fff,0 0 0 6px rgba(10,132,198,.25)}

.btnPrimary{background:linear-gradient(180deg,var(--brand),#0f6fe0);color:#fff}
.btnWA{background:linear-gradient(180deg,#25D366,#1ebe5a);color:#fff}
.btnGhost{background:#fff;border:1px solid #e5e7eb}
.btnSecondary{background:#fff;border:1.5px solid var(--brand);color:var(--brand)}
.btnSecondary:hover{background:rgba(10,132,198,.06)}

/* ---------- HERO (izq: texto | der: imagen+fechas) ---------- */
.hero{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:var(--gap);
  align-items:start;
}
.heroRight{
  display:flex;flex-direction:column;gap:var(--gap-sm);align-items:stretch
}

/* Imagen */
.heroMedia{
  position:relative;width:100%;
  border-radius:var(--radius-lg);overflow:hidden;background:#fff;
  border:1.5px solid rgba(10,132,198,.18);box-shadow:var(--shadow)
}
.heroMedia picture{display:block;width:100%;aspect-ratio:16/9}
.heroMedia img{width:100%;height:100%;object-fit:cover;display:block}
.heroMedia:hover{transform:scale(1.01)}

/* Badge “Clases en vivo” */
.heroBadge{
  position:absolute;top:12px;left:12px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#fff;font-weight:700;font-size:13px;padding:6px 12px;border-radius:999px;
  box-shadow:0 4px 10px rgba(0,0,0,.18);z-index:2
}

/* Fechas & Horario (fila única en desktop) */
.heroCard{
  background:var(--card);border:1px solid #e9eef5;border-radius:var(--radius-lg);
  padding:16px;box-shadow:var(--shadow)
}
.heroCard h3{margin:0 0 10px}

.kvRow{display:grid;gap:10px;grid-template-columns:repeat(4,minmax(0,1fr))}
.kvRow div{
  background:#fff;border:1px solid #edf2f7;border-radius:12px;
  padding:10px 12px;font-size:14px;line-height:1.25;text-align:left
}
.heroCard .ctaRow{margin-top:12px;display:flex;gap:10px;align-items:center}

/* ---------- Grillas reutilizables ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.card{background:var(--card);border:1px solid #eaeef3;border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}

/* ---------- Precios ---------- */
.pricing{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:20px}
.pCard{background:var(--card);border-radius:16px;padding:16px;box-shadow:var(--shadow);border:1px solid #eee}
.pill{font-size:12px;font-weight:700;padding:6px 10px;border-radius:999px;border:1px solid #e5e7eb;background:#fff}
.price{font-size:28px;font-weight:800}
#cuposRestantes{color:var(--warn);font-weight:900}

/* ---------- FAQ ---------- */
.faq details{background:#fff;border:1px solid #eaeef3;border-radius:14px;padding:14px;margin-bottom:10px}
.faq summary{cursor:pointer;font-weight:700}

/* ---------- Sticky CTA ---------- */
.sticky{position:sticky;bottom:0;z-index:40;background:#ffffffe6;backdrop-filter:blur(6px);border-top:1px solid #e5e7eb}
.stickyInner{max-width:var(--max);margin:0 auto;display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 20px}
.count{font-variant-numeric:tabular-nums;font-weight:800}

/* ---------- Breakpoints ---------- */
/* Tablet */
@media (max-width:1100px){
  .kvRow{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Móvil */
@media (max-width:700px){
  .hero{grid-template-columns:1fr}
  .kvRow{grid-template-columns:1fr}
  .heroMedia{border-radius:12px}
  .heroBadge{display:none} /* opcional: evita tapar contenido en pantallas muy pequeñas */
}
/* Micro-ajustes móviles pequeños */
@media (max-width:500px){
  .title{font-size:24px}
  .heroCard{padding:12px}
  .kvRow div{font-size:13px;padding:8px}
  .btn{padding:10px 14px;font-size:14px}
}
/* === FIX DE ALINEACIÓN HERO DERECHA === */
.hero{
  display:grid;
  grid-template-columns: 1fr 1fr;   /* columnas simétricas y limpias */
  gap: 24px;
  align-items:start;
}

/* Columna derecha: que estire a 100% (no centrar) */
.heroRight{
  display:flex;
  flex-direction:column;
  gap:16px;
  align-items:stretch;   /* <<< clave: ocupa todo el ancho */
}

/* La figura tenía margen por defecto → quítalo */
.heroMedia{ margin:0 }

/* Asegura 100% de ancho en ambos bloques */
.heroMedia,
.heroCard{ width:100% }

/* Imagen estable y con marco pro */
.heroMedia{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  border:1.5px solid rgba(10,132,198,.18);
  box-shadow:0 10px 22px rgba(0,0,0,.06);
}
.heroMedia picture{display:block;width:100%;aspect-ratio:16/9}
.heroMedia img{display:block;width:100%;height:100%;object-fit:cover}

/* Badge “Clases en vivo” */
.heroBadge{
  position:absolute;top:12px;left:12px;z-index:2;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#fff;font-weight:700;font-size:13px;
  padding:6px 12px;border-radius:999px;
  box-shadow:0 4px 10px rgba(0,0,0,.18);
}

/* Card de fechas en una sola fila (desktop) */
.heroCard{
  background:var(--card);
  border:1px solid #e9eef5;
  border-radius:16px;
  padding:16px;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
}
.heroCard h3{margin:0 0 10px}
.kvRow{display:grid;gap:10px;grid-template-columns:repeat(4,minmax(0,1fr))}
.kvRow div{
  background:#fff;border:1px solid #edf2f7;border-radius:12px;
  padding:10px 12px;font-size:14px;line-height:1.25;text-align:left
}

/* Responsivo */
@media (max-width:1100px){ .kvRow{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:700px){
  .hero{grid-template-columns:1fr}
  .kvRow{grid-template-columns:1fr}
  .heroBadge{display:none}
}
/* ===== Botones de precios ===== */
.pCard .btn {
  display: block;
  width: 100%;
  text-align: center;
  justify-content: center;
  padding: 12px 16px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 12px;
}

/* Ajuste responsivo para mantener proporción */
@media (max-width: 768px) {
  .pricing {
    grid-template-columns: 1fr; /* Una columna en móvil */
  }
}