/* ==========================================================================
   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");
}
/* En telefono se sirve la mitad de pixeles: una pantalla de 390 CSS px con DPR 3
   no puede mostrar mas de ~1170 px de ancho, y estabamos mandando 2400. */
@media (max-width: 900px) {
  .portada { --portada-img: url("assets/portada-1200.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);
}
/* --- Rotación del hero ----------------------------------------------------
   La portada alterna entre los dos programas: el XB-JNK —el primer avión de la
   escuela— para Privado, y el XB-MYD, el bimotor, para Comercial. Cambian la
   foto, las cuatro cifras y el botón, porque si alguien ve el bimotor y el CTA
   lo manda a Privado, aterriza en la página equivocada.

   La segunda foto NO se precarga ni se declara aquí: la pide el JavaScript
   después del `load`, para no competir con el LCP. */
.portada-fondo--alt { opacity: 0; transition: opacity 1.1s ease; }
.portada[data-vista="comercial"] .portada-fondo--alt { opacity: 1; }

.portada [data-vista] { display: none; }
.portada[data-vista="privado"]  [data-vista="privado"],
.portada[data-vista="comercial"] [data-vista="comercial"] { display: flex; }
.bento-hud[data-vista] { display: none; }
.portada[data-vista="privado"]  .bento-hud[data-vista="privado"],
.portada[data-vista="comercial"] .bento-hud[data-vista="comercial"] { display: grid; }

.portada-vistas {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 22px;
}
.portada-vista {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 16px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: rgba(6, 18, 28, .42);
  backdrop-filter: blur(8px);
  color: var(--texto-2);
  font-family: "Archivo", sans-serif;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease;
}
.portada-vista-punto {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--linea-solida);
  transition: background .25s ease;
}
.portada-vista.activa { color: var(--texto); border-color: var(--oro); }
.portada-vista.activa .portada-vista-punto { background: var(--oro); }
.portada-vista:hover { color: var(--texto); }
.portada-vista:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .portada-fondo--alt { transition: none; }
}

/* La base de Cuernavaca tiene su propia foto de portada: la plataforma del
   hangar a la hora dorada. Misma mecanica que la portada principal —la imagen
   vive en una custom property— asi que basta con redefinirla. */
.portada--cuernavaca { --portada-img: url("assets/base-cuernavaca.webp"); }
@media (max-width: 900px) {
  .portada--cuernavaca { --portada-img: url("assets/base-cuernavaca-1200.webp"); }
}
/* Tarjeta que solo lleva foto: la imagen manda y el recuadro desaparece. */
.sede--foto { padding: 0; overflow: hidden; display: flex; }
.sede--foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.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); }
/* El nombre de la escuela y las dos sedes viven DENTRO del h1: un encabezado
   principal que solo dice un eslogan no le comunica a Google quién es CAAP ni
   dónde está. Visualmente queda como antetítulo —más chico y en color de
   apoyo— para que el eslogan siga mandando en la página. Reemplaza al "plomo"
   que estaba antes como párrafo suelto, así que no se agrega ruido. */
.portada h1 .portada-marca {
  color: var(--texto-2);
  font-size: .38em;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.4;
  margin-bottom: .5em;
}
.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: 16px; }
.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: 44px;
  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);
  /* Aviso visual de que la tabla se desliza. Las capas `local` viajan con el
     contenido y tapan la sombra al llegar al borde; las `scroll` se quedan
     fijas y la muestran mientras quede algo por ver. Sin JavaScript. */
  background:
    linear-gradient(to right, var(--hueso) 30%, rgba(246,244,239,0)) left center,
    linear-gradient(to left,  var(--hueso) 30%, rgba(246,244,239,0)) right center,
    radial-gradient(farthest-side at 0 50%,   rgba(11,26,38,.22), rgba(11,26,38,0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(11,26,38,.22), rgba(11,26,38,0)) right center;
  background-repeat: no-repeat;
  background-size: 42px 100%, 42px 100%, 15px 100%, 15px 100%;
  background-attachment: local, local, scroll, scroll;
}
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); }
/* Los enlaces de contacto viven dentro de estas notas a 13px, lo que dejaba un
   blanco tactil de ~19px de alto. El padding vertical los lleva a 44px sin
   mover el texto de sitio, porque el inline-block no rompe el renglon. */
.campo-nota a {
  display: inline-block;
  padding-block: 12px;
  margin-block: -12px;
}

.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); }
/* "Cómo llegar" en la sección de sedes. En móvil el gesto natural sobre una
   dirección es tocarla para trazar ruta; antes había que seleccionar y copiar.
   El padding vertical lo lleva a 44px de alto táctil, el mínimo recomendado. */
/* Horario de cada sede. Es de lo que más se consulta en búsqueda local móvil,
   así que va visible y no solo en el marcado. */
.sede-horario { font-size: 14.5px; color: var(--texto-2); margin-top: 8px; }
.sede-horario strong { color: var(--texto); }

/* Preguntas frecuentes con <details> nativo: sin una línea de JavaScript, ya
   funciona con teclado y lector de pantalla, y el texto vive en el HTML —que es
   justo lo que Google necesita ver para que el FAQPage sea legítimo. */
.faq { display: grid; gap: 12px; }
.faq-item {
  background: var(--navy-suave);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 52px 18px 22px;
  position: relative;
  font-weight: 600;
  color: var(--texto);
  font-size: 16.5px;
  line-height: 1.45;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 22px; top: 50%;
  transform: translateY(-50%);
  font-size: 22px; font-weight: 400; line-height: 1;
  color: var(--oro);
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item summary:hover { color: var(--oro); }
.faq-item summary:focus-visible { outline: 2px solid var(--oro); outline-offset: -2px; }
.faq-respuesta { padding: 0 22px 20px; color: var(--texto-2); line-height: 1.7; }
.faq-respuesta p { margin: 0; }
.faq-cierre { margin-top: 26px; text-align: center; font-size: 15px; color: var(--texto-2); }
.faq-cierre a { color: var(--oro); }

@media (max-width: 640px) {
  .faq-item summary { font-size: 16px; padding: 16px 46px 16px 18px; }
  .faq-respuesta { padding: 0 18px 18px; }
}

/* --- Acceso a alumnos -----------------------------------------------------
   Una página con tres estados: comprobando sesión, formulario, y contenido.
   El contenido no vive en el HTML —llega de Firestore ya con sesión— así que
   estos estilos solo visten lo que el JavaScript inserta. */
[hidden] { display: none !important; }

.acceso-pagina { min-height: 62vh; }
.acceso-estado { padding: 40px 0; color: var(--texto-3); }

.acceso-tarjeta {
  background: var(--navy-suave);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 30px;
  max-width: 460px;
}
.acceso-tarjeta h2 { font-size: 21px; margin-bottom: 8px; }
.acceso-nota { font-size: 14px; color: var(--texto-3); line-height: 1.6; margin-bottom: 18px; }
.acceso-nota a { color: var(--oro); }
.acceso-etiqueta {
  display: block; font-size: 12.5px; font-weight: 600;
  color: var(--texto-2); margin-bottom: -4px;
}
.acceso-bienvenida { font-size: 14px; color: var(--texto-3); margin-bottom: 30px; }
.acceso-bloque { margin-bottom: 44px; }
.acceso-bloque h2 { font-size: 22px; margin-bottom: 8px; }

.acceso-lista { display: grid; gap: 10px; }
.acceso-item {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 17px 20px;
  background: var(--navy-suave);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease;
}
.acceso-item:hover { border-color: var(--oro); transform: translateX(3px); }
.acceso-item:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }
.acceso-item-texto { display: flex; flex-direction: column; gap: 3px; }
.acceso-item-texto strong { color: var(--texto); font-size: 16px; }
.acceso-item-texto span { color: var(--texto-3); font-size: 13.5px; }
.acceso-item-accion { color: var(--oro); font-size: 14px; font-weight: 600; white-space: nowrap; }

.descargas-nota { max-width: 42ch; margin-top: 12px; }

@media (max-width: 640px) {
  .acceso-tarjeta { padding: 22px; }
  .acceso-item { padding: 15px 16px; }
  .acceso-item-accion { font-size: 13px; }
}

.sede-mapa {
  display: inline-block;
  margin-top: 10px;
  padding-block: 11px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--oro);
  text-decoration: none;
}
.sede-mapa:hover { text-decoration: underline; }

.form-ok { display: none; font-size: 14.5px; color: var(--menta); }
.form-ok.visible { display: block; }
/* El mismo elemento comunica el fracaso: si el envío falla, el color deja
   de ser el de confirmación para que nadie lo lea como un "listo". */
.form-ok.form-error { color: #f2b8a2; }

.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; }

/* La portada NO se anima: su h1 es el elemento LCP y la transicion de .84 s lo
   mantenia en opacity:0 justo durante la medicion, empujando el LCP por encima
   del umbral de 2.5 s de Core Web Vitals. Animar la entrada de algo que ya esta
   arriba del pliegue no aporta nada —nadie lo ve aparecer— y costaba una
   metrica de posicionamiento. El resto del sitio conserva el efecto. */
.js .portada .revelar { opacity: 1; transform: none; transition: none; }

@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; }
  .pie-rejilla { grid-template-columns: 1fr 1fr; }

  .simulador { display: flex; flex-direction: column; }
  .plan {
    order: -1;
    position: sticky;
    top: 72px;
    z-index: 3;
    max-height: 45vh;
    overflow-y: auto;
    box-shadow: 0 12px 26px rgba(6, 18, 28, .45);
  }
}

/* Quien pide menos movimiento tambien pide menos elementos flotando: ahi el
   plan se queda quieto en su lugar. */
@media (max-width: 940px) and (prefers-reduced-motion: reduce) {
  .plan { position: static; max-height: none; box-shadow: none; }
}

@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; }


/* --- Páginas legales ------------------------------------------------------
   El aviso de privacidad es un documento largo que la gente no lee de corrido:
   entra a buscar UNA cosa (cómo borro mis datos, a quién se los dan). Por eso
   la columna es angosta —unas 68 letras por renglón, el ancho cómodo de
   lectura— y arriba hay un índice con anclas para saltar directo. El texto va
   más grande que en el resto del sitio porque aquí leer es la única tarea. */

.contenedor--angosto { max-width: 760px; }

.legal-pagina .encabezado-bloque { text-align: left; margin-bottom: 30px; }
.legal-fecha { font-size: 14px; color: var(--texto-3); margin-top: 10px; }

.legal-indice {
  background: var(--navy-suave);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 22px 26px;
  margin-bottom: 44px;
}
.legal-indice-titulo {
  font-size: 12.5px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--texto-3); margin-bottom: 12px;
}
.legal-indice ol { margin: 0; padding-left: 20px; display: grid; gap: 7px; }
.legal-indice li { font-size: 15px; }
.legal-indice a { color: var(--texto-2); text-decoration: none; }
.legal-indice a:hover { color: var(--oro); text-decoration: underline; }

.legal { font-size: 16.5px; line-height: 1.75; color: var(--texto-2); }
.legal section { margin-bottom: 42px; scroll-margin-top: 90px; }
.legal h2 {
  font-size: 22px; color: var(--texto); margin-bottom: 14px;
  padding-bottom: 10px; border-bottom: 1px solid var(--linea);
}
.legal h3 { font-size: 17px; color: var(--texto); margin: 24px 0 10px; }
.legal p { margin-bottom: 14px; }
.legal ul { margin: 0 0 16px; padding-left: 22px; display: grid; gap: 8px; }
.legal li { padding-left: 2px; }
.legal strong { color: var(--texto); font-weight: 600; }
.legal a { color: var(--oro); }

/* Lo que la gente necesita ver aunque venga leyendo en diagonal: que no
   vendemos sus datos, y que la medición no arma publicidad dirigida. */
.legal-destacado {
  background: var(--navy-suave);
  border-left: 3px solid var(--oro);
  border-radius: 0 var(--radio) var(--radio) 0;
  padding: 14px 18px;
  margin: 20px 0;
}

.legal-cierre {
  margin-top: 52px; padding-top: 28px; border-top: 1px solid var(--linea);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
}
.legal-cierre p { font-size: 15px; color: var(--texto-2); margin: 0; }

@media (max-width: 640px) {
  .legal { font-size: 16px; }
  .legal h2 { font-size: 20px; }
  .legal-indice { padding: 18px 20px; }
}

/* ---- Telefono en la barra ----
   Un numero visible convierte mejor que uno enterrado al final de la pagina:
   buena parte de quien pide informes prefiere llamar antes que escribir. En
   movil se oculta, porque ahi ya esta el boton flotante de WhatsApp y la barra
   no da para mas. */
.menu-tel {
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .menu-tel { display: none; }
}

/* ---- Selector de programa en el formulario ----
   Hereda del mismo molde que los inputs para que la fila no se rompa. */
.formulario select {
  width: 100%;
  font: inherit;
  color: inherit;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c9a227'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 22px;
  padding-right: 42px;
}
.formulario select:focus {
  outline: 2px solid var(--oro, #c9a227);
  outline-offset: 2px;
}
.formulario select option { color: #10202c; }