/* ==========================================================
   Academia Gauss — Simuladores EXANI 2026
   Estilos compartidos
   ========================================================== */

:root {
  --azul-profundo: #0B3B6F;
  --azul-medio: #1E5BA8;
  --azul-claro: #E8F0FB;
  --naranja-urgente: #FF6B35;
  --naranja-claro: #FFE5D9;
  --dorado: #FFB800;
  --grafito: #1A1A2E;
  --gris-suave: #F7F9FC;
  --gris-medio: #6B7280;
  --gris-borde: #E5E7EB;
  --verde-ok: #10B981;
  --rojo-cupo: #DC2626;
  --sombra-card: 0 4px 14px rgba(11, 59, 111, 0.08);
  --sombra-hover: 0 12px 28px rgba(11, 59, 111, 0.16);
  --radio: 14px;
  --radio-chico: 8px;
  --transicion: all .25s ease;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--grafito);
  background: var(--gris-suave);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--azul-medio); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ====== Banner de urgencia ====== */
.urgencia {
  background: linear-gradient(90deg, var(--naranja-urgente) 0%, #FF8E53 100%);
  color: #fff;
  text-align: center;
  padding: 10px 16px;
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .2px;
}
.urgencia strong { background: rgba(255,255,255,.18); padding: 2px 10px; border-radius: 6px; margin: 0 4px; }

/* ====== Header ====== */
header.principal {
  background: #fff;
  border-bottom: 1px solid var(--gris-borde);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky; top: 0; z-index: 50;
}
.logo {
  display: flex; align-items: center; gap: 12px;
  font-weight: 800; color: var(--azul-profundo); font-size: 1.15rem;
}
.logo-icon {
  width: 42px; height: 42px;
  background: linear-gradient(135deg, var(--azul-profundo), var(--azul-medio));
  color: #fff; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.2rem;
  box-shadow: var(--sombra-card);
}
.logo small { display: block; font-weight: 500; color: var(--gris-medio); font-size: .75rem; }
nav.principal a {
  color: var(--grafito); font-weight: 500; margin-left: 18px; font-size: .95rem;
}
@media (max-width: 600px) { nav.principal { display: none; } }

/* ====== Hero ====== */
.hero {
  background:
    radial-gradient(circle at 80% 0%, rgba(255,184,0,.15), transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(255,107,53,.18), transparent 50%),
    linear-gradient(135deg, var(--azul-profundo) 0%, var(--azul-medio) 100%);
  color: #fff;
  padding: 64px 24px 80px;
  text-align: center;
}
.hero h1 {
  font-size: clamp(1.8rem, 4.2vw, 3.2rem);
  font-weight: 800;
  margin-bottom: 14px;
  letter-spacing: -0.5px;
}
.hero .sub {
  font-size: clamp(1rem, 2vw, 1.2rem);
  opacity: .92;
  max-width: 720px;
  margin: 0 auto 28px;
}
.hero .badges { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.badge {
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3);
  padding: 6px 14px; border-radius: 999px; font-size: .85rem; font-weight: 600;
  backdrop-filter: blur(6px);
}
.badge.dorado { background: var(--dorado); border-color: var(--dorado); color: var(--grafito); }

/* ====== Contenedores ====== */
.contenedor { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
section { padding: 56px 0; }
section h2 {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  color: var(--azul-profundo);
  font-weight: 800;
  margin-bottom: 8px;
  text-align: center;
}
section .lead { text-align: center; color: var(--gris-medio); max-width: 640px; margin: 0 auto 36px; }

/* ====== Grid de opciones ====== */
.opciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}
.opcion {
  background: #fff;
  border-radius: var(--radio);
  box-shadow: var(--sombra-card);
  border: 1px solid var(--gris-borde);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: var(--transicion);
}
.opcion:hover { transform: translateY(-4px); box-shadow: var(--sombra-hover); }
.opcion .top {
  padding: 18px 22px;
  background: linear-gradient(135deg, var(--azul-profundo), var(--azul-medio));
  color: #fff;
}
.opcion.naranja .top { background: linear-gradient(135deg, var(--naranja-urgente), #FF8E53); }
.opcion.dorado .top { background: linear-gradient(135deg, var(--dorado), #FFCB42); color: var(--grafito); }
.opcion .top .etiqueta {
  font-size: .8rem; font-weight: 600; opacity: .85; text-transform: uppercase; letter-spacing: 1px;
}
.opcion .top h3 { font-size: 1.25rem; margin-top: 4px; font-weight: 800; }
.opcion .body { padding: 22px; flex: 1; }
.opcion .precio {
  font-size: 2rem; font-weight: 800; color: var(--azul-profundo); margin-bottom: 4px;
}
.opcion .precio small { font-size: .9rem; color: var(--gris-medio); font-weight: 500; }
.opcion ul.detalles { list-style: none; margin: 14px 0 18px; }
.opcion ul.detalles li {
  padding: 6px 0; padding-left: 26px; position: relative; font-size: .92rem; color: var(--grafito);
}
.opcion ul.detalles li::before {
  content: "✓"; position: absolute; left: 0; top: 6px;
  color: var(--verde-ok); font-weight: 800;
}
.opcion .descuento {
  background: var(--naranja-claro); color: var(--naranja-urgente);
  padding: 8px 12px; border-radius: var(--radio-chico);
  font-weight: 700; font-size: .88rem; margin-bottom: 14px;
  display: inline-block;
}
.opcion .footer-card { padding: 0 22px 22px; }

/* ====== Botones ====== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: var(--radio-chico);
  font-weight: 700; font-size: .98rem; cursor: pointer;
  border: none; text-align: center; transition: var(--transicion);
}
.btn-primario { background: var(--naranja-urgente); color: #fff; }
.btn-primario:hover { background: #E55A28; transform: translateY(-1px); text-decoration: none; }
.btn-secundario { background: var(--azul-profundo); color: #fff; }
.btn-secundario:hover { background: #082b52; text-decoration: none; }
.btn-fantasma { background: transparent; color: var(--azul-profundo); border: 2px solid var(--azul-profundo); }
.btn-fantasma:hover { background: var(--azul-profundo); color: #fff; text-decoration: none; }
.btn-bloque { width: 100%; }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* ====== Indicador de cupos ====== */
.cupos-bar {
  background: var(--azul-claro);
  border-radius: var(--radio-chico);
  padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
  margin: 14px 0;
}
.cupos-icono { font-size: 1.5rem; }
.cupos-num { font-weight: 800; color: var(--azul-profundo); font-size: 1.1rem; }
.cupos-num.bajo { color: var(--rojo-cupo); }
.cupos-num.medio { color: var(--naranja-urgente); }
.cupos-progress {
  flex: 1; height: 8px; background: #fff; border-radius: 4px; overflow: hidden;
}
.cupos-progress > span {
  display: block; height: 100%; background: var(--verde-ok); transition: width .4s;
}
.cupos-progress > span.bajo { background: var(--rojo-cupo); }
.cupos-progress > span.medio { background: var(--naranja-urgente); }

/* ====== Calendario / fechas ====== */
.fechas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin: 18px 0;
}
.fecha-tarjeta {
  background: #fff; border: 2px solid var(--gris-borde);
  border-radius: var(--radio-chico); padding: 14px;
  cursor: pointer; transition: var(--transicion);
  display: flex; flex-direction: column; gap: 4px;
  position: relative;
}
.fecha-tarjeta:hover:not(.agotada) { border-color: var(--azul-medio); transform: translateY(-2px); }
.fecha-tarjeta.seleccionada {
  border-color: var(--naranja-urgente); background: var(--naranja-claro);
}
.fecha-tarjeta.agotada {
  background: #F3F4F6; cursor: not-allowed; opacity: .6;
}
.fecha-tarjeta.agotada::after {
  content: "AGOTADO"; font-size: .68rem; color: var(--rojo-cupo); font-weight: 800;
  position: absolute; top: 8px; right: 8px;
  background: #fff; padding: 2px 6px; border-radius: 4px;
}
.fecha-dia { font-size: .8rem; color: var(--gris-medio); text-transform: uppercase; font-weight: 600; }
.fecha-num { font-size: 1.4rem; font-weight: 800; color: var(--azul-profundo); }
.fecha-mes { font-size: .85rem; color: var(--grafito); font-weight: 500; }
.fecha-cupo {
  font-size: .78rem; color: var(--verde-ok); font-weight: 600; margin-top: 4px;
}
.fecha-cupo.bajo { color: var(--rojo-cupo); }
.fecha-cupo.medio { color: var(--naranja-urgente); }

/* ====== Selector de horario ====== */
.horarios { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.horario {
  padding: 10px 16px; border: 2px solid var(--gris-borde); border-radius: var(--radio-chico);
  background: #fff; cursor: pointer; font-size: .92rem; font-weight: 600;
  transition: var(--transicion);
  font-family: inherit;
}
.horario:hover:not(:disabled) { border-color: var(--azul-medio); }
.horario.seleccionado { background: var(--azul-profundo); color: #fff; border-color: var(--azul-profundo); }
.horario:disabled, .horario.agotado { background: #F3F4F6; color: var(--gris-medio); cursor: not-allowed; opacity: .55; }

/* ====== Formulario ====== */
.form-card {
  background: #fff;
  border-radius: var(--radio);
  box-shadow: var(--sombra-card);
  padding: 28px;
  margin-top: 24px;
}
.form-card h3 { color: var(--azul-profundo); margin-bottom: 18px; font-size: 1.3rem; }
.campo { margin-bottom: 16px; }
.campo label { display: block; font-weight: 600; margin-bottom: 6px; font-size: .92rem; }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 11px 14px;
  border: 2px solid var(--gris-borde); border-radius: var(--radio-chico);
  font-size: 1rem; font-family: inherit;
  transition: var(--transicion);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--azul-medio);
  box-shadow: 0 0 0 3px rgba(30, 91, 168, .15);
}
.campo .ayuda { font-size: .82rem; color: var(--gris-medio); margin-top: 4px; }
.fila { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .fila { grid-template-columns: 1fr; } }

/* ====== Mensajes ====== */
.alerta {
  padding: 14px 18px; border-radius: var(--radio-chico);
  margin: 14px 0; font-weight: 600;
}
.alerta-info { background: var(--azul-claro); color: var(--azul-profundo); }
.alerta-error { background: #FEE2E2; color: var(--rojo-cupo); }
.alerta-ok { background: #D1FAE5; color: #065F46; }

/* ====== Tabla de paquetes ====== */
.paquetes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 14px;
}
@media (max-width: 600px) { .paquetes { grid-template-columns: 1fr; } }
.paquete {
  border: 2px solid var(--gris-borde); border-radius: var(--radio-chico);
  padding: 14px; text-align: center;
  cursor: pointer; transition: var(--transicion);
}
.paquete:hover { border-color: var(--azul-medio); }
.paquete.seleccionado { border-color: var(--naranja-urgente); background: var(--naranja-claro); }
.paquete .label { font-weight: 600; color: var(--gris-medio); font-size: .85rem; }
.paquete .precio-pq { font-size: 1.3rem; font-weight: 800; color: var(--azul-profundo); margin-top: 4px; }
.paquete .ahorro { font-size: .75rem; color: var(--verde-ok); margin-top: 2px; }

/* ====== Footer ====== */
footer.principal {
  background: var(--grafito); color: #fff;
  padding: 40px 24px;
  margin-top: 40px;
}
footer .cont {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px;
}
@media (max-width: 700px) { footer .cont { grid-template-columns: 1fr; } }
footer h4 { color: var(--dorado); margin-bottom: 14px; }
footer a { color: rgba(255,255,255,.85); display: block; padding: 4px 0; }
footer .copy {
  border-top: 1px solid rgba(255,255,255,.12); padding-top: 20px; margin-top: 24px;
  text-align: center; font-size: .85rem; opacity: .7;
}
.wa-flotante {
  position: fixed; bottom: 24px; right: 24px;
  background: #25D366; color: #fff; padding: 14px 20px;
  border-radius: 999px; font-weight: 700;
  box-shadow: 0 8px 22px rgba(37, 211, 102, .4);
  display: flex; align-items: center; gap: 8px;
  z-index: 100; transition: var(--transicion);
}
.wa-flotante:hover { transform: scale(1.05); text-decoration: none; }

/* ====== Página de gracias ====== */
.gracias {
  text-align: center; padding: 80px 24px;
  max-width: 720px; margin: 0 auto;
}
.gracias .check {
  width: 88px; height: 88px; border-radius: 50%;
  background: var(--verde-ok); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 3rem; margin-bottom: 24px;
}
.gracias h1 { color: var(--azul-profundo); margin-bottom: 12px; }
.gracias p { color: var(--gris-medio); margin-bottom: 12px; font-size: 1.05rem; }
.gracias .resumen {
  background: var(--azul-claro); padding: 20px;
  border-radius: var(--radio); margin: 24px 0;
  text-align: left;
}
.gracias .resumen dt { font-weight: 700; color: var(--azul-profundo); margin-top: 6px; }
.gracias .resumen dd { color: var(--grafito); margin-bottom: 6px; }

/* Loader */
.loader {
  display: inline-block; width: 18px; height: 18px;
  border: 3px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }