/* ==========================================================================
   CAAP — Sistema de diseño del sitio público
   --------------------------------------------------------------------------
   Dirección: "hora dorada". El azul marino de la marca hace de cielo al
   anochecer y un dorado de atardecer es el único acento. Se comprometió a un
   solo mundo visual (oscuro y cinematográfico) en vez de tema claro/oscuro,
   porque el sitio vende una emoción concreta: volar al atardecer.

   Tipografía:
     Archivo        → títulos. Grotesca con ADN de señalética aeroportuaria.
     Instrument Sans→ texto corrido.
     IBM Plex Mono  → precios, horas y datos técnicos (tabular).
   ========================================================================== */

/* --- Tipografías --------------------------------------------------------- */

/*
 * Servidas desde el propio dominio en vez de fonts.googleapis.com. Traerlas de
 * fuera obligaba a resolver y abrir conexión con dos dominios más antes de
 * poder pintar una sola letra, y el navegador no descubre esa hoja hasta haber
 * leído la nuestra: dos viajes encadenados delante del primer texto.
 *
 * Archivo e Instrument Sans son variables, así que un archivo cubre todo su
 * rango de grosores; se declaran con el rango en vez de repetir un bloque por
 * peso. IBM Plex Mono no lo es y necesita uno por grosor.
 *
 * Solo se guardan latin y latin-ext: el original traía además cirílico y
 * vietnamita, que este sitio no usa.
 */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('assets/fuentes/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('assets/fuentes/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('assets/fuentes/instrument-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('assets/fuentes/instrument-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fuentes/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fuentes/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fuentes/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fuentes/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Cielo */
  --noche:      #06121c;
  --navy:       #0d2438;   /* marca */
  --navy-alto:  #13314a;
  --navy-suave: #1c3a56;   /* marca */

  /* Hora dorada: único acento */
  --oro:        #e0a13c;
  --oro-claro:  #f3c87c;
  --oro-tenue:  rgba(224, 161, 60, .14);

  /* Menta de marca, usada con cuentagotas */
  --menta:      #cfe8d6;

  /* Tinta sobre oscuro */
  --texto:      #eef3f7;
  --texto-2:    #a9bccb;
  --texto-3:    #6d8598;

  /* Superficies claras (temario, tablas) */
  --hueso:      #f6f4ef;
  --hueso-2:    #eae6dd;
  --tinta:      #0b1a26;
  --tinta-2:    #47606f;

  --linea:      rgba(255,255,255,.10);
  --linea-solida: rgba(255,255,255,.18);

  --radio:      4px;
  --ancho:      1180px;
  --paso:       clamp(56px, 9vw, 120px);

  --sombra: 0 18px 50px rgba(0,0,0,.45);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--noche);
  color: var(--texto);
  font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: var(--oro-claro); text-decoration: none; }
a:hover { color: var(--oro); }

:focus-visible {
  outline: 2px solid var(--oro);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- Tipografía ---------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(44px, 7.5vw, 86px); }
h2 { font-size: clamp(30px, 4.4vw, 50px); }
h3 { font-size: clamp(20px, 2.4vw, 27px); letter-spacing: -.01em; }

p { margin: 0; }

.plomo {
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--oro);
}

.entrada { font-size: clamp(17px, 1.9vw, 21px); color: var(--texto-2); max-width: 62ch; }

.dato {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

/* --- Estructura ---------------------------------------------------------- */

.contenedor { width: min(100% - 44px, var(--ancho)); margin-inline: auto; }

.bloque { padding-block: var(--paso); }
.bloque--claro { background: var(--hueso); color: var(--tinta); }
.bloque--claro .entrada { color: var(--tinta-2); }
.bloque--navy { background: var(--navy); }

.encabezado-bloque {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: clamp(34px, 5vw, 60px);
}

/* --- Barra superior ------------------------------------------------------ */

.barra {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px max(22px, calc((100vw - var(--ancho)) / 2));
  background: rgba(6, 18, 28, 0);
  backdrop-filter: blur(0px);
  transition: background .35s ease, backdrop-filter .35s ease, padding .35s ease;
  border-bottom: 1px solid transparent;
}
.barra.fija {
  background: rgba(6, 18, 28, .88);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--linea);
  padding-block: 10px;
}

.marca { display: flex; align-items: center; gap: 12px; color: var(--texto); }
.marca img { width: 42px; height: 42px; object-fit: contain; }
.marca-texto { display: flex; flex-direction: column; line-height: 1.1; }
.marca-nombre {
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.01em;
}
.marca-lema {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--oro);
}

.menu { margin-left: auto; display: flex; align-items: center; gap: 28px; }
/* Los botones quedan fuera: `.menu a` pesa más que `.btn--oro` en la cascada, y
   sin excluirlos le imponía el gris de navegación al texto sobre el dorado. El
   contraste caía a 1.15:1 —ilegible— justo en «Acceso alumnos». */
.menu a:not(.btn) { color: var(--texto-2); font-size: 15px; font-weight: 500; }
.menu a:not(.btn):hover { color: var(--texto); }

.abrir-menu {
  display: none;
  background: none;
  border: 0;
  color: var(--texto);
  font-size: 26px;
  cursor: pointer;
  padding: 6px 10px;
  margin-left: auto;
}

/* --- Botones ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 13px 26px;
  border: 0;
  border-radius: var(--radio);
  font-family: "Archivo", sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
}
.btn--oro { background: var(--oro); color: #241505; }
.btn--oro:hover { background: var(--oro-claro); color: #241505; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(224,161,60,.3); }
.btn--linea { background: transparent; color: var(--texto); box-shadow: inset 0 0 0 1px var(--linea-solida); }
.btn--linea:hover { color: var(--texto); background: rgba(255,255,255,.06); transform: translateY(-2px); }
.btn--oscuro { background: var(--navy); color: var(--texto); }
.btn--oscuro:hover { background: var(--navy-alto); color: var(--texto); transform: translateY(-2px); }

/* --- Portada ------------------------------------------------------------- */

.portada {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  padding-block: 140px 64px;
  overflow: hidden;
  /* Foto real de la flota en el aeropuerto. Si el archivo faltara, el fondo cae
     en el degradado de atardecer declarado más abajo y la portada sigue en pie. */
  --portada-img: url("assets/portada.webp");
}
.portada-fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(6,18,28,.72) 0%, rgba(6,18,28,.28) 38%, rgba(6,18,28,.92) 88%, var(--noche) 100%),
    var(--portada-img, linear-gradient(150deg, #10293d 0%, #1d4463 45%, #b4762c 100%));
  background-size: cover;
  background-position: center 58%;
  transform: scale(1.06);
  will-change: transform;
}
.portada .contenedor { position: relative; z-index: 1; }

/* El ancho se limita en cada elemento, no en el contenedor: puesto arriba, las
   20ch pensadas para el título aplastaban también al párrafo, que pedía 48ch y
   se quedaba en 226 px —doce renglones— en una pantalla de escritorio. */
.portada-texto { display: flex; flex-direction: column; gap: 22px; }
.portada h1 { max-width: 20ch; }
.portada h1 span { display: block; color: var(--oro); }
.portada .entrada { max-width: 48ch; }
.portada-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }

.cifras {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 46px;
  margin-top: clamp(36px, 6vw, 64px);
  padding-top: 26px;
  border-top: 1px solid var(--linea);
}
.cifra { display: flex; flex-direction: column; gap: 2px; }
.cifra b {
  font-family: "Archivo", sans-serif;
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 700;
  line-height: 1;
  color: var(--texto);
}
.cifra span { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3); }

/* --- HUD Bento Glassmorphism --- */
.bento-hud {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  margin-top: clamp(36px, 6vw, 64px);
  padding-top: 26px;
  border-top: 1px solid var(--linea);
}
.hud-card {
  position: relative;
  background: rgba(13, 36, 56, 0.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(224, 161, 60, 0.2);
  border-radius: var(--radio);
  padding: 18px 20px;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
}
.hud-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--oro), transparent);
  opacity: 0.3;
  transition: opacity 0.3s ease;
}
.hud-card:hover {
  transform: translateY(-4px);
  border-color: rgba(224, 161, 60, 0.6);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(224, 161, 60, 0.15);
}
.hud-card:hover::before { opacity: 1; }
.hud-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--texto-3);
  display: flex;
  align-items: center;
  gap: 6px;
}
.hud-dot {
  width: 6px; height: 6px;
  background-color: var(--oro);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--oro);
  display: inline-block;
}
.hud-val {
  font-family: 'Archivo', sans-serif;
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 800;
  color: var(--texto);
  line-height: 1.1;
  margin-top: 6px;
}
.hud-sub {
  font-size: 13px;
  color: var(--texto-2);
  margin-top: 4px;
}

/* --- Rejillas ------------------------------------------------------------ */

.rejilla { display: grid; gap: 22px; }
.rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.rejilla--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* --- Tarjeta de carrera -------------------------------------------------- */

.carrera {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 30px;
  background: linear-gradient(165deg, var(--navy-suave) 0%, var(--navy) 70%);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.carrera::after {
  content: "";
  position: absolute;
  inset: auto -30% -60% auto;
  width: 260px; height: 260px;
  background: radial-gradient(circle, var(--oro-tenue) 0%, transparent 68%);
  pointer-events: none;
}
.carrera:hover { transform: translateY(-5px); border-color: rgba(224,161,60,.4); box-shadow: var(--sombra); }

.carrera-cima { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.carrera-precio { text-align: right; }
.carrera-precio b {
  display: block;
  font-family: "IBM Plex Mono", monospace;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 500;
  color: var(--oro);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.carrera-precio span { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3); }

.especificaciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 16px; padding-block: 6px; }
.especificacion { display: flex; flex-direction: column; gap: 1px; }
.especificacion b { font-family: "IBM Plex Mono", monospace; font-size: 19px; font-weight: 500; color: var(--texto); }
.especificacion span { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); }

.lista-limpia { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.lista-limpia li { position: relative; padding-left: 22px; color: var(--texto-2); font-size: 15.5px; }
.lista-limpia li::before {
  content: "";
  position: absolute; left: 2px; top: .62em;
  width: 7px; height: 7px;
  border-top: 1.5px solid var(--oro);
  border-right: 1.5px solid var(--oro);
  transform: rotate(45deg);
}

/* --- Sedes --------------------------------------------------------------- */

.sede {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: rgba(255,255,255,.025);
  transition: border-color .3s ease, background .3s ease;
}
.sede:hover { border-color: rgba(224,161,60,.35); background: rgba(255,255,255,.05); }
.sede-etiqueta {
  align-self: flex-start;
  font-family: "Archivo", sans-serif;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--oro);
  padding: 4px 10px;
  background: var(--oro-tenue);
  border-radius: 2px;
}
.sede p { color: var(--texto-2); font-size: 15.5px; }
.sede-direccion { font-family: "IBM Plex Mono", monospace; font-size: 13.5px; color: var(--texto-3); }

/* --- App ----------------------------------------------------------------- */

.app-caja { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.app-funciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 20px; margin-block: 26px; }
.app-funcion { display: flex; flex-direction: column; gap: 5px; padding-left: 15px; border-left: 2px solid var(--oro); }
.app-funcion b { font-family: "Archivo", sans-serif; font-size: 16.5px; }
.app-funcion span { font-size: 14.5px; color: var(--texto-2); }

.descargas { display: flex; flex-wrap: wrap; gap: 12px; }

.telefono {
  width: 100%;
  aspect-ratio: 9 / 19;
  background: linear-gradient(168deg, var(--navy-suave), var(--noche));
  border: 8px solid #101f2c;
  border-radius: 34px;
  box-shadow: var(--sombra);
  display: grid;
  place-items: center;
  padding: 22px;
  text-align: center;
  overflow: hidden;
  position: relative;
}

/* --- Carrusel de la app --------------------------------------------------
   El marco pierde el relleno para que la captura ocupe la pantalla completa,
   como se vería en el teléfono de verdad. */
.telefono { padding: 0; }
/* El ancho vive aquí, no en .telefono: si el marco se mide con `100%` respecto
   de un contenedor que a su vez se ajusta a su contenido, la cuenta es circular
   y el teléfono colapsa a unos pocos píxeles. */
.telefono-bloque {
  justify-self: center;
  width: min(290px, 100%);
  display: grid; gap: 16px; justify-items: center;
}

.carrusel { position: relative; width: 100%; height: 100%; }
.carrusel img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  opacity: 0;
  transition: opacity .55s ease;
}
.carrusel img.activa { opacity: 1; }

.carrusel-puntos { display: flex; gap: 9px; }
.carrusel-punto {
  width: 9px; height: 9px; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--linea-solida);
  cursor: pointer;
  transition: background .25s ease, transform .25s ease;
}
.carrusel-punto:hover { background: var(--texto-2); }
.carrusel-punto.activo { background: var(--oro); transform: scale(1.35); }
.carrusel-punto:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }

/* El área táctil real es de 24px aunque el punto se vea de 9: en celular un
   blanco de 9px es imposible de atinar. */
.carrusel-punto::before {
  content: ""; position: absolute;
  width: 24px; height: 24px;
  transform: translate(-50%, -50%);
  left: 50%; top: 50%;
}
.carrusel-punto { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .carrusel img { transition: none; }
  .carrusel-punto { transition: none; }
}

/* --- Instrucciones PWA / tienda ------------------------------------------ */

.pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; }
.pasos-columna {
  padding: 24px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: rgba(255,255,255,.025);
}
.pasos-columna h4 { font-size: 17px; margin-bottom: 14px; display: flex; align-items: center; gap: 9px; }
.pasos-columna ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.pasos-columna li { color: var(--texto-2); font-size: 15px; }

/* --- Temario ------------------------------------------------------------- */

.tabla-envoltura { overflow-x: auto; border: 1px solid var(--hueso-2); border-radius: var(--radio); }
table { width: 100%; border-collapse: collapse; font-size: 15.5px; min-width: 460px; }
thead th {
  text-align: left;
  font-family: "Archivo", sans-serif;
  font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta-2);
  padding: 13px 18px;
  background: var(--hueso-2);
  white-space: nowrap;
}
tbody td { padding: 11px 18px; border-top: 1px solid var(--hueso-2); }
tbody tr:hover { background: rgba(224,161,60,.07); }
td.num, th.num { text-align: right; font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }
tfoot td {
  padding: 14px 18px;
  border-top: 2px solid var(--tinta);
  font-weight: 700;
  font-family: "Archivo", sans-serif;
}

/* --- Simulador de pagos -------------------------------------------------- */

.simulador { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }

.panel-control {
  display: flex; flex-direction: column; gap: 26px;
  padding: 28px;
  background: linear-gradient(165deg, var(--navy-suave), var(--navy));
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}
.campo { display: flex; flex-direction: column; gap: 11px; }
.campo > label {
  font-family: "Archivo", sans-serif;
  font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--oro);
}
.campo-nota { font-size: 13px; color: var(--texto-3); }

.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opcion {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 15px;
  min-height: 44px;
  border: 1px solid var(--linea-solida);
  border-radius: var(--radio);
  font-size: 14.5px;
  color: var(--texto-2);
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
  user-select: none;
}
.opcion input { position: absolute; opacity: 0; pointer-events: none; }
.opcion:hover { border-color: rgba(224,161,60,.5); color: var(--texto); }
.opcion:has(input:checked) { background: var(--oro-tenue); border-color: var(--oro); color: var(--texto); }
.opcion:has(input:focus-visible) { outline: 2px solid var(--oro); outline-offset: 2px; }
.opcion:has(input:disabled) { opacity: .38; cursor: not-allowed; }

input[type="range"] { accent-color: var(--oro); width: 100%; height: 44px; }

/* Resultado */
.plan {
  position: sticky; top: 92px;
  display: flex; flex-direction: column; gap: 0;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: rgba(255,255,255,.03);
  overflow: hidden;
}
.plan-cima { padding: 24px 26px; background: var(--oro-tenue); border-bottom: 1px solid var(--linea); }
.plan-cima .plomo { color: var(--oro); }
.plan-total {
  font-family: "IBM Plex Mono", monospace;
  font-size: clamp(30px, 4.4vw, 42px);
  font-weight: 500;
  color: var(--oro-claro);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin-top: 6px;
}
.plan-renglones { display: flex; flex-direction: column; }
.plan-renglon {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 14px 26px;
  border-bottom: 1px solid var(--linea);
  font-size: 15px;
}
.plan-renglon:last-child { border-bottom: 0; }
.plan-renglon b { font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; color: var(--texto); font-weight: 500; white-space: nowrap; }
.plan-renglon i { display: block; font-style: normal; font-size: 12.5px; color: var(--texto-3); margin-top: 2px; }
.plan-renglon--fuerte { background: rgba(255,255,255,.04); }

.aviso {
  display: flex; gap: 12px;
  padding: 18px 26px;
  background: rgba(255,255,255,.04);
  border-top: 1px solid var(--linea);
  font-size: 13.5px;
  color: var(--texto-2);
  line-height: 1.55;
}
.aviso strong { color: var(--texto); }

/* --- Ruta de dos fases --------------------------------------------------- */

/* Privado y Comercial no son dos opciones a elegir sino dos etapas en orden, y
   el sitio lo decía al revés. La flecha lo dice antes de que nadie lea. */
.ruta {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 14px 20px;
  margin: 6px 0 22px;
}
.ruta-fase {
  display: flex; align-items: center; gap: 14px;
  flex: 1 1 280px;
  padding: 18px 22px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: rgba(255,255,255,.025);
}
.ruta-numero {
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--oro-tenue);
  color: var(--oro);
  font-family: "Archivo", sans-serif; font-weight: 700;
}
.ruta-fase b { display: block; color: var(--texto); font-weight: 600; }
.ruta-fase span:not(.ruta-numero) { font-size: 14px; color: var(--texto-2); }
.ruta-flecha { color: var(--oro); font-size: 26px; line-height: 1; flex: none; }

.ruta-nota {
  max-width: 78ch;
  margin: 0 0 26px;
  padding-left: 18px;
  border-left: 2px solid var(--oro);
  color: var(--texto-2);
  font-size: 15px; line-height: 1.65;
}

@media (max-width: 720px) {
  /* En columna, la flecha apunta hacia abajo para no leerse como un guion. */
  .ruta { flex-direction: column; align-items: stretch; }
  .ruta-flecha { align-self: center; transform: rotate(90deg); }
}

/* --- Flota --------------------------------------------------------------- */

.nave {
  display: flex; flex-direction: column; gap: 8px;
  padding: 26px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: rgba(255,255,255,.025);
  transition: border-color .3s ease, background .3s ease;
}
.nave:hover { border-color: var(--linea-solida); background: rgba(255,255,255,.045); }
.nave-matricula {
  /* Monoespaciada porque es una matrícula: se lee carácter por carácter. */
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px; letter-spacing: .12em;
  color: var(--oro);
}
.nave h3 { margin: 0; }
.nave-uso { font-size: 14px; color: var(--texto-3); margin: 0; }
.nave p { color: var(--texto-2); font-size: 15px; margin: 0; }

/* --- Herramientas -------------------------------------------------------- */

.herramienta {
  display: flex; flex-direction: column; gap: 12px;
  padding: 28px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: rgba(255,255,255,.025);
  transition: border-color .3s ease, background .3s ease;
}
.herramienta:hover { border-color: var(--linea-solida); background: rgba(255,255,255,.045); }
.herramienta-cima { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.herramienta h3 { margin: 0; }
.herramienta p { color: var(--texto-2); font-size: 15px; margin: 0; flex: 1; }
/* El botón se pega abajo para que las tarjetas de una fila lo alineen entre sí,
   aunque el texto de cada una tenga distinto largo. */
.herramienta .btn { align-self: flex-start; margin-top: 6px; }

.etiqueta {
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 600;
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--linea-solida);
  color: var(--texto-3);
}
.etiqueta--viva { border-color: rgba(224,161,60,.45); background: var(--oro-tenue); color: var(--oro); }

/* --- Galería ------------------------------------------------------------- */

/* Fotos reales de la escuela. Se declara la proporción en el CSS y las medidas
   en el HTML para que el hueco quede reservado antes de que la imagen llegue:
   sin eso el texto de abajo salta cuando cada foto termina de cargar. */
.galeria { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.foto {
  margin: 0;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  background: rgba(255,255,255,.025);
}
.foto img {
  display: block;
  width: 100%;
  /* Sin `height: auto` el alto del atributo HTML (933) se toma al pie de la
     letra y la proporción de abajo no llega a aplicarse: las fotos salían
     estiradas a lo alto. Los atributos siguen ahí porque son los que reservan
     el hueco mientras la imagen carga. */
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  /* La foto entra en calma; al pasar el cursor se acerca apenas, lo justo para
     que se sienta viva sin convertirse en un carrusel. */
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.foto:hover img { transform: scale(1.04); }
.foto figcaption {
  padding: 14px 18px 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--texto-2);
  border-top: 1px solid var(--linea);
}
.foto figcaption b { color: var(--texto); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .foto img, .foto:hover img { transition: none; transform: none; }
}

/* --- Contacto ------------------------------------------------------------ */

.contacto { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.formulario { display: flex; flex-direction: column; gap: 13px; }
.formulario input, .formulario textarea {
  width: 100%;
  min-height: 48px;
  padding: 13px 15px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--linea-solida);
  border-radius: var(--radio);
  color: var(--texto);
  font: inherit;
  font-size: 15.5px;
  transition: border-color .2s, background .2s;
}
.formulario textarea { min-height: 116px; resize: vertical; }
.formulario input::placeholder, .formulario textarea::placeholder { color: var(--texto-3); }
.formulario input:focus, .formulario textarea:focus { outline: none; border-color: var(--oro); background: rgba(255,255,255,.08); }
.form-ok { display: none; font-size: 14.5px; color: var(--menta); }
.form-ok.visible { display: block; }

.mapa { border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; min-height: 300px; }
.mapa iframe { width: 100%; height: 100%; min-height: 300px; border: 0; display: block; filter: grayscale(.35) contrast(1.05); }

/* --- Pie ----------------------------------------------------------------- */

.pie { padding-block: 54px 34px; border-top: 1px solid var(--linea); background: var(--noche); }
.pie-rejilla { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 34px; margin-bottom: 34px; }
.pie h4 { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3); margin-bottom: 14px; font-weight: 600; }
.pie a, .pie p { color: var(--texto-2); font-size: 15px; }
.pie ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
/* Las redes son de lo poco del pie en lo que sí se quiere que la gente haga
   clic —TikTok es donde hay más público que aquí—, así que el icono ocupa más
   dentro del mismo botón y el contorno se ve desde el principio, no solo al
   pasar el cursor. */
.redes { display: flex; gap: 12px; margin-top: 18px; }
.redes a {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border: 1px solid var(--linea-solida);
  border-radius: var(--radio);
  color: var(--texto);
  background: rgba(255,255,255,.04);
  transition: border-color .2s, color .2s, background .2s, transform .2s;
}
.redes a:hover,
.redes a:focus-visible {
  border-color: var(--oro); color: var(--oro);
  background: var(--oro-tenue);
  transform: translateY(-2px);
}
.redes svg { width: 26px; height: 26px; fill: currentColor; }
.pie-legal { padding-top: 22px; border-top: 1px solid var(--linea); font-size: 13.5px; color: var(--texto-3); display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between; }

/* --- Animaciones --------------------------------------------------------- */

/* El contenido se oculta SOLO si el navegador ejecuta JavaScript (la clase .js la
   pone un script en línea del <head>). Así, si el JS falla o está bloqueado, la
   página se ve completa en vez de quedarse en blanco. */
.js .revelar { opacity: 0; transform: translateY(26px); transition: opacity .75s cubic-bezier(.22,.8,.3,1), transform .75s cubic-bezier(.22,.8,.3,1); }
.js .revelar.visible { opacity: 1; transform: none; }
.revelar[data-retraso="1"] { transition-delay: .09s; }
.revelar[data-retraso="2"] { transition-delay: .18s; }
.revelar[data-retraso="3"] { transition-delay: .27s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .revelar { opacity: 1; transform: none; transition: none; }
  .portada-fondo { transform: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --- Adaptable ----------------------------------------------------------- */

@media (max-width: 940px) {
  .simulador, .app-caja, .contacto { grid-template-columns: 1fr; }
  .plan { position: static; }
  .pie-rejilla { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }

  /* En celular el texto que se LEE sube a 16 px como mínimo. Las etiquetas
     cortas (plomos, unidades, direcciones) se quedan chicas a propósito:
     son rótulos, no lectura corrida. */
  .lista-limpia li,
  .sede p,
  .pasos-columna li,
  .app-funcion span,
  .plan-renglon,
  .campo-nota,
  .pie a, .pie p, .pie li,
  .formulario input, .formulario textarea { font-size: 16px; }

  /* Área tocable cómoda en enlaces de lista y de pie de página. */
  .pie li a, .lista-limpia li a { display: inline-block; padding-block: 7px; }
  .pie ul { gap: 2px; }
  .abrir-menu { display: block; }
  .menu {
    position: fixed;
    inset: 64px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px 22px 22px;
    background: rgba(6,18,28,.97);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--linea);
    display: none;
  }
  .menu.abierto { display: flex; }
  .menu a { padding: 14px 0; border-bottom: 1px solid var(--linea); font-size: 16px; }
  .menu .btn { margin-top: 14px; }
  .portada { padding-block: 118px 52px; }
  /* En pantalla estrecha el ancho ya lo marca el dispositivo: el título suelta
     su límite para no partirse en columnas de dos palabras. */
  .portada h1 { max-width: none; }
  .pie-rejilla { grid-template-columns: 1fr; }
}

/* ==========================================================================
   BOTÓN FLOTANTE DE WHATSAPP
   --------------------------------------------------------------------------
   En México es el canal por el que de verdad llega la gente, y hasta ahora el
   sitio solo ofrecía `mailto:` — que en celular, de donde viene la mayoría del
   tráfico, muchas veces no abre nada y el prospecto se pierde sin dejar rastro.
   Va fijo y visible durante todo el recorrido, no escondido hasta el pie.
   ========================================================================== */
.wa-flotante {
  position: fixed;
  right: clamp(14px, 3vw, 26px);
  bottom: clamp(14px, 3vw, 26px);
  z-index: 120;                     /* por encima de la barra fija, que va en 100 */
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25d366;              /* verde de marca de WhatsApp */
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
  transition: transform .18s ease, box-shadow .18s ease;
}
.wa-flotante:hover {
  color: #fff;
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 12px 30px rgba(37, 211, 102, .45);
}
.wa-flotante:focus-visible {
  outline: 3px solid var(--oro);
  outline-offset: 3px;
}
.wa-flotante svg { width: 32px; height: 32px; fill: currentColor; }

/* El rótulo solo aparece en pantalla ancha: en celular robaría ancho de lectura
   y el ícono ya se entiende solo. */
.wa-flotante span { display: none; }
@media (min-width: 900px) {
  .wa-flotante {
    width: auto;
    height: 54px;
    padding: 0 20px;
    gap: 10px;
    grid-auto-flow: column;
    border-radius: 999px;
    font-weight: 600;
    font-size: .95rem;
  }
  .wa-flotante span { display: inline; }
  .wa-flotante svg { width: 26px; height: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-flotante, .wa-flotante:hover { transition: none; transform: none; }
}

/* --- Tarjetas centradas -------------------------------------------------
   Flota y herramientas son bloques cortos y simétricos —matrícula, título,
   un rótulo y dos renglones—, así que centrarlos ordena la retícula sin
   estorbar la lectura. No se justifican: en columnas de este ancho el texto
   justificado abre huecos entre palabras y forma ríos blancos, porque el
   navegador no parte palabras en español sin pedírselo. */
.nave, .herramienta { text-align: center; align-items: center; }
.herramienta-cima { justify-content: center; }
/* El botón traía `align-self: flex-start` de cuando la tarjeta iba alineada a la
   izquierda; con el resto centrado se quedaba solo, corrido hacia un lado. */
.herramienta .btn { align-self: center; }