/* eCORS — eSurvey MX
   Paleta oficial del kit de marca eCors: azul infraestructura (#062B5C),
   turquesa señal (#20C7B5) y rojo coordenada (#E52629) como acento de
   precisión — de uso puntual, no como color de fondo/superficie grande. */

:root {
  --negro: #062B5C;       /* azul infraestructura — reemplaza el negro puro */
  --gris-950: #0A3563;
  --gris-900: #123B63;
  --gris-700: #3D5872;
  --gris-500: #6B7F93;
  --gris-200: #DCE3EA;
  --gris-100: #F3F6F9;
  --blanco: #FFFFFF;
  --teal: #20C7B5;         /* turquesa señal */
  --teal-oscuro: #168B7F;
  --teal-claro: #E3F9F6;
  --navy: #062B5C;

  /* Rojo coordenada — acento de precisión del kit oficial. Úsalo puntual
     (una insignia, un punto, un indicador), nunca como fondo grande. */
  --rojo: #E52629;
  --rojo-oscuro: #B01D20;
  --rojo-claro: #FCE8E8;
  --error: var(--rojo);
  --error-oscuro: var(--rojo-oscuro);

  --radio: 14px;
  --sombra: 0 10px 30px rgba(11, 11, 12, .08);
  --sombra-grande: 0 24px 48px -12px rgba(16, 16, 16, .18);
  --font: "Inter", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

@keyframes eco-fade-up {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes eco-pulso-anillo {
  0% { box-shadow: 0 0 0 0 rgba(32,199,181,.5); }
  100% { box-shadow: 0 0 0 12px rgba(32,199,181,0); }
}
/* Igual que eco-pulso-anillo pero con menos alcance — para el mapa
   decorativo del hero, donde varias estaciones caen muy juntas (zona de
   Jalisco/Nayarit) y el pulso grande hacía que los aros se encimaran
   entre sí formando un borlote que a simple vista parecía texto. */
@keyframes eco-pulso-anillo-chico {
  0% { box-shadow: 0 0 0 0 rgba(32,199,181,.5); }
  100% { box-shadow: 0 0 0 7px rgba(32,199,181,0); }
}
@keyframes eco-flotar {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes eco-guion { to { background-position: -24px 0; } }
@keyframes eco-orbita { to { transform: rotate(360deg); } }
@keyframes eco-onda {
  0% { width: 40px; height: 40px; opacity: .7; }
  100% { width: 160px; height: 160px; opacity: 0; }
}

/* Animaciones al hacer scroll — se apagan solas si el usuario pidió
   menos movimiento en su sistema (accesibilidad, no es opcional). */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s ease, transform .6s ease;
}
[data-reveal].visible { opacity: 1; transform: translateY(0); }
[data-reveal-grupo].visible [data-reveal-item] {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal-item] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s ease, transform .5s ease;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal-item] { opacity: 1; transform: none; transition: none; }
  .hero__panel,
  .hero__panel-receptor-imagen,
  .hero__panel-fix,
  .hero__panel-enlace,
  .hero__panel-onda,
  .hero__panel-orbita,
  .punto-estado::after { animation: none !important; }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--gris-900);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0; line-height: 1.65; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }

.envoltura { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.seccion { padding: 88px 0; }
@media (max-width: 900px) { .seccion { padding: 56px 0; } }
.seccion--gris { background: linear-gradient(180deg, var(--gris-100), #E7F7F5 60%, var(--gris-100)); }
.seccion--oscura { background: var(--negro); color: var(--blanco); position: relative; overflow: hidden; }
.seccion--oscura::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(700px 400px at 90% 0%, rgba(32,199,181,.14), transparent 60%);
  pointer-events: none;
}
.seccion--oscura > .envoltura { position: relative; }

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--teal-oscuro);
  background: var(--teal-claro);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.seccion--oscura .etiqueta { background: rgba(32,199,181,.18); color: #8FE3DA; }

.titulo-seccion {
  font-size: clamp(28px, 4vw, 42px);
  max-width: 640px;
}
.subtitulo-seccion {
  margin-top: 16px;
  max-width: 620px;
  color: var(--gris-500);
  font-size: 17px;
}
.seccion--oscura .subtitulo-seccion { color: rgba(255,255,255,.65); }

.encabezado-seccion { margin-bottom: 48px; }
.encabezado-seccion--centrado { text-align: center; margin-left: auto; margin-right: auto; }
.encabezado-seccion--centrado .titulo-seccion,
.encabezado-seccion--centrado .subtitulo-seccion { margin-left: auto; margin-right: auto; }

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  border: 2px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  white-space: nowrap;
}
.boton:hover { transform: translateY(-1px); }
.boton--teal { background: var(--teal); color: var(--negro); font-weight: 700; }
.boton--teal:hover { background: var(--teal-oscuro); color: var(--blanco); }
.boton--fantasma { border-color: rgba(255,255,255,.35); color: var(--blanco); }
.boton--fantasma:hover { border-color: var(--blanco); background: rgba(255,255,255,.08); }
.boton--contorno { border-color: var(--teal); color: var(--teal-oscuro); }
.boton--contorno:hover { background: var(--teal-claro); }
.boton--oscuro { border-color: var(--gris-900); color: var(--gris-900); }
.boton--oscuro:hover { background: var(--gris-900); color: var(--blanco); }
.boton--bloque { width: 100%; }
.boton[disabled] { opacity: .6; pointer-events: none; }

/* ---------- Header ---------- */
.encabezado {
  position: sticky;
  top: 0;
  /* Por encima de los controles de Leaflet (.leaflet-top/.leaflet-bottom
     usan z-index:1000) — si no, el mapa tapa el header sticky al hacer
     scroll dentro de la sección de cobertura. */
  z-index: 1500;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--gris-200);
}
.encabezado__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 14px;
  padding-bottom: 14px;
}

/* Logo oficial eCors — imagen (PNG del kit de marca aprobado, los .svg
   del kit son texto en fuente DejaVu Sans que casi nadie tiene instalada,
   así que no son seguros para <img> en el navegador). Con el renglón
   "● | Respaldado por eSurvey" debajo. .marca--oscuro usa la versión
   invertida del logo para fondos oscuros (footer). */
.marca {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  line-height: 1;
}
.marca__logo { height: 30px; width: auto; }
.marca__tagline {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--gris-500);
  white-space: nowrap;
}
.marca__tagline b { color: var(--gris-900); font-weight: 600; }
.marca__punto { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); flex-shrink: 0; }
.marca__divisor { width: 1px; height: 10px; background: var(--gris-200); flex-shrink: 0; }
.marca--oscuro .marca__tagline { color: rgba(255,255,255,.5); }
.marca--oscuro .marca__tagline b { color: var(--blanco); }
.marca--oscuro .marca__divisor { background: rgba(255,255,255,.2); }

.nav-principal { display: flex; align-items: center; gap: 6px; }
.nav-principal a {
  color: var(--gris-700);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 8px;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.nav-principal a:hover { background: var(--gris-100); color: var(--negro); }

.encabezado__acciones { display: flex; align-items: center; gap: 12px; }
.encabezado__login { color: var(--gris-700); font-size: 14px; font-weight: 500; padding: 8px 10px; border-radius: 8px; white-space: nowrap; }
.encabezado__login:hover { background: var(--gris-100); color: var(--negro); }
.boton-menu {
  display: none;
  background: none;
  border: none;
  color: var(--negro);
  padding: 8px;
}

/* El nav completo (6 enlaces) + logo con tagline + "Iniciar sesión" +
   botón no caben en anchos intermedios entre "escritorio amplio" y el
   punto donde el resto del sitio pasa a una columna (900px) — se
   resolvía partiendo "Respaldado por" e "Iniciar sesión" a la mitad.
   El nav pasa a hamburguesa antes de llegar a esa franja, en vez de
   intentar angostarlo a punta de padding. */
@media (max-width: 1180px) {
  .nav-principal { display: none; }
  .boton-menu { display: inline-flex; }
  /* El botón de CTA se va al menú desplegable (.menu-movil__cta) — dejarlo
     también aquí, junto al logo con su leyenda y el botón de hamburguesa,
     no cabe en una pantalla angosta y provoca overflow horizontal. */
  .encabezado__acciones > a { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background:
    radial-gradient(900px 500px at 8% -15%, rgba(32,199,181,.16), transparent 60%),
    radial-gradient(700px 420px at 96% 10%, rgba(6,43,92,.10), transparent 55%),
    var(--gris-100);
  padding: 64px 0 0;
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 40px;
  align-items: center;
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 700;
  color: var(--teal-oscuro);
  background: var(--teal-claro);
  padding: 8px 16px 8px 12px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.hero__titulo {
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.08;
  color: var(--negro);
}
.hero__descripcion {
  margin-top: 20px;
  font-size: 17px;
  color: var(--gris-500);
  max-width: 480px;
}
.hero__acciones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.hero__confianza {
  display: flex; align-items: center; gap: 9px;
  margin-top: 26px;
  font-size: 13.5px;
  color: var(--gris-700);
}
.hero__confianza svg { color: var(--teal); flex-shrink: 0; }

.hero__stats {
  margin-top: 52px;
  padding: 26px 0;
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 28px;
  border-top: 1px solid var(--gris-200);
}
.hero__stat-valor { font-family: var(--font-mono); font-size: 26px; font-weight: 500; color: var(--teal-oscuro); }
.hero__stat-etiqueta { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--gris-500); margin-top: 4px; }

.hero__ilustracion { position: relative; padding: 20px 0 26px; }

/* Panel de conectividad — sustituye al mapa de cobertura como ilustración
   del hero: muestra el flujo satélites → estación fija → NTRIP y un
   receptor real recibiendo la corrección, en vez de puntos sobre un mapa. */
.hero__panel {
  position: relative;
  background: linear-gradient(160deg, var(--teal-claro), var(--blanco) 55%);
  border: 1px solid var(--gris-200);
  border-radius: 24px;
  padding: 26px 26px 20px;
  box-shadow: var(--sombra-grande);
  animation: eco-flotar 6s ease-in-out infinite;
  overflow: hidden;
}
.hero__panel-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.hero__panel-estado {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--negro);
}
.hero__panel-protocolo { font-family: var(--font-mono); font-size: 11.5px; color: var(--gris-500); }

.hero__panel-flujo {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  margin: 30px 0 6px;
}
.hero__panel-nodo {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600; color: var(--gris-700);
  white-space: nowrap;
}
.hero__panel-nodo-icono {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--blanco);
  border: 1px solid var(--gris-200);
  color: var(--teal-oscuro);
  box-shadow: 0 4px 10px rgba(6,43,92,.08);
}
/* Dos satélites orbitando el nodo "Satélites" — el punto grueso es el
   satélite, el fino su reflejo/estela; giran juntos porque comparten el
   mismo wrapper en rotación (quedan siempre en extremos opuestos). */
.hero__panel-orbita {
  position: absolute;
  inset: -7px;
  animation: eco-orbita 7s linear infinite;
}
.hero__panel-orbita-punto {
  position: absolute;
  left: 50%; top: -2px;
  width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 2px;
  background: var(--teal);
}
.hero__panel-orbita-punto--2 {
  top: auto; bottom: -2px;
  width: 4px; height: 4px; margin-left: -2px;
  background: var(--teal-claro);
}
.hero__panel-nodo--activo .hero__panel-nodo-icono {
  background: var(--negro); color: var(--blanco); border-color: var(--negro);
}
.hero__panel-enlace {
  flex: 1;
  max-width: 44px;
  height: 2px;
  margin-top: 19px;
  background-image: repeating-linear-gradient(90deg, var(--teal) 0 6px, transparent 6px 12px);
  background-size: 24px 2px;
  animation: eco-guion 1s linear infinite;
}

.hero__panel-receptor { position: relative; display: flex; justify-content: center; margin-top: 6px; }
.hero__panel-receptor-imagen {
  width: auto;
  height: 250px;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
  animation: eco-flotar 5s ease-in-out infinite;
}
.hero__panel-onda {
  position: absolute;
  top: 48px; left: 50%;
  width: 40px; height: 40px;
  border: 1px solid rgba(32,199,181,.5);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: eco-onda 2.6s ease-out infinite;
}
.hero__panel-onda--2 { animation-delay: 1.3s; }
.hero__panel-fix {
  position: absolute; top: 4px; right: 0;
  background: var(--blanco);
  border-radius: 14px;
  padding: 10px 16px;
  box-shadow: var(--sombra-grande);
  animation: eco-flotar 5.5s ease-in-out infinite;
  animation-delay: .4s;
}
.hero__panel-fix-valor { display: block; font-family: var(--font-mono); font-size: 14.5px; font-weight: 600; color: var(--negro); }
.hero__panel-fix-detalle { display: block; font-size: 11px; color: var(--gris-500); margin-top: 2px; }
.hero__panel-conectado {
  position: absolute; left: 0; bottom: 10px;
  display: flex; align-items: center; gap: 8px;
  background: var(--negro); color: var(--blanco); border-radius: 999px;
  padding: 8px 16px; font-size: 12px; font-weight: 600;
  box-shadow: var(--sombra);
  white-space: nowrap;
}
.hero__panel-conectado .punto-estado { background: var(--teal); }

.hero__panel-pie { text-align: center; font-size: 12px; color: var(--gris-500); margin-top: 24px; }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__stats { grid-template-columns: repeat(2, auto); }
  .hero__ilustracion { max-width: 360px; margin: 0 auto; }
  .hero__panel-receptor-imagen { height: 210px; }
}

/* ---------- Qué es eCORS ---------- */
.que-es {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 900px) { .que-es { grid-template-columns: 1fr; gap: 40px; } }
.que-es__intro .titulo-seccion { max-width: none; }
.que-es__intro .subtitulo-seccion { max-width: none; }
.que-es__uso {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--gris-200);
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--gris-500);
  letter-spacing: .01em;
}

.que-es__specs { display: flex; flex-direction: column; }
.que-es__spec {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 20px;
  padding: 22px 14px;
  margin: 0 -14px;
  border-bottom: 1px solid var(--gris-200);
  border-radius: 10px;
  transition: background .2s ease;
}
.que-es__spec:hover { background: var(--gris-100); }
.que-es__specs[data-reveal-grupo] [data-reveal-item]:nth-child(1) { transition-delay: 0s; }
.que-es__specs[data-reveal-grupo] [data-reveal-item]:nth-child(2) { transition-delay: .08s; }
.que-es__specs[data-reveal-grupo] [data-reveal-item]:nth-child(3) { transition-delay: .16s; }
.que-es__specs[data-reveal-grupo] [data-reveal-item]:nth-child(4) { transition-delay: .24s; }
.que-es__specs[data-reveal-grupo] [data-reveal-item]:nth-child(5) { transition-delay: .32s; }
.que-es__spec:first-child { padding-top: 0; }
.que-es__spec dt {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gris-500);
  padding-top: 2px;
}
.que-es__spec dd {
  margin: 0;
  min-width: 0;
  font-size: 15.5px;
  color: var(--gris-900);
  line-height: 1.6;
}
.dato-en-linea {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--teal-oscuro);
  background: var(--teal-claro);
  padding: 1px 7px;
  border-radius: 5px;
  font-size: 14px;
  /* Sin nowrap a propósito — un valor técnico largo (o un badge mal
     usado con una frase completa, como pasó aquí una vez) no debe poder
     forzar overflow horizontal de toda la página en móvil. */
}

/* ---------- Cómo funciona ---------- */
.pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: paso; }
@media (max-width: 900px) { .pasos { grid-template-columns: 1fr; } }
.paso { position: relative; padding-top: 8px; transition: transform .25s ease; }
.paso:hover { transform: translateY(-4px); }
.paso__numero {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--teal); color: var(--negro);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-family: var(--font-mono); margin-bottom: 18px;
  box-shadow: 0 6px 16px -4px rgba(32,199,181,.5);
}
.paso__titulo { font-size: 16px; margin-bottom: 8px; }
.paso__texto { color: var(--gris-500); font-size: 14px; }
.pasos[data-reveal-grupo] [data-reveal-item]:nth-child(1) { transition-delay: 0s; }
.pasos[data-reveal-grupo] [data-reveal-item]:nth-child(2) { transition-delay: .1s; }
.pasos[data-reveal-grupo] [data-reveal-item]:nth-child(3) { transition-delay: .2s; }
.pasos[data-reveal-grupo] [data-reveal-item]:nth-child(4) { transition-delay: .3s; }

/* ---------- Mapa ---------- */
.mapa-panel {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 0;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--gris-200);
  background: var(--blanco);
}
#mapa { height: 560px; width: 100%; background: var(--gris-100); }
.mapa-lateral { padding: 24px; display: flex; flex-direction: column; }

.localizador {
  background: var(--gris-100);
  border: 1px solid var(--gris-200);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 22px;
}
.localizador__titulo { font-size: 13.5px; font-weight: 700; margin-bottom: 12px; }
.localizador__campos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.localizador__campos input {
  border: 1px solid var(--gris-200);
  border-radius: 8px;
  padding: 9px 10px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  background: var(--blanco);
  width: 100%;
}
.localizador__campos input:focus { outline: none; border-color: var(--teal); }
.localizador__botones { display: flex; gap: 8px; flex-wrap: wrap; }
.localizador__botones .boton { padding: 9px 16px; font-size: 13px; }
.localizador__ubicacion {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 1px solid var(--gris-200); border-radius: 999px;
  padding: 9px 14px; font-size: 12.5px; font-weight: 600; color: var(--gris-700);
}
.localizador__ubicacion:hover { border-color: var(--teal); color: var(--teal-oscuro); }
.localizador__ubicacion[disabled] { opacity: .6; }
.localizador__aviso { font-size: 12px; color: var(--error); margin: 8px 0 0; }

.mapa-lateral__estado {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--gris-500); margin-bottom: 18px;
}
.punto-estado { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); flex-shrink: 0; }
.punto-estado::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  animation: eco-pulso-anillo 2s ease-out infinite;
}
.punto-estado--alerta { background: var(--rojo); }
.punto-estado--alerta::after { animation: none; }
.mapa-lateral__contador-fila { display: flex; align-items: baseline; gap: 10px; margin-bottom: 18px; }
.mapa-lateral__contador { font-family: var(--font-mono); font-size: 30px; font-weight: 500; }
.mapa-lateral__contador-label { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--gris-500); }

.lista-estaciones__encabezado {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--gris-500);
  padding-bottom: 8px; border-bottom: 1px solid var(--gris-200); margin-bottom: 4px;
}
.lista-estaciones__reset { display: none; background: none; border: none; color: var(--teal-oscuro); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.lista-estaciones__reset.visible { display: inline; }

.lista-estaciones { flex: 1; overflow-y: auto; max-height: 280px; margin: 0 -4px; padding-right: 6px; }
.lista-estaciones li {
  padding: 10px 4px;
  border-bottom: 1px solid var(--gris-200);
  font-size: 13.5px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  transition: background .12s ease;
}
.lista-estaciones li:hover { background: var(--gris-100); }
.lista-estaciones li:last-child { border-bottom: none; }
.lista-estaciones .ciudad { font-weight: 600; }
.lista-estaciones .formatos { color: var(--gris-500); font-size: 12px; font-family: var(--font-mono); }

@media (max-width: 900px) {
  .mapa-panel { grid-template-columns: 1fr; }
  #mapa { height: 380px; }
}

.leaflet-popup-content b { display: block; margin-bottom: 4px; }
.leaflet-popup-content .mount-tag {
  display: inline-block; font-size: 11px; background: var(--teal-claro);
  color: var(--teal-oscuro); padding: 2px 7px; border-radius: 999px; margin: 2px 3px 0 0;
}

/* ---------- Expansión ---------- */
.expansion {
  background: var(--navy);
  color: var(--blanco);
  border-radius: 20px;
  padding: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.expansion__texto { max-width: 480px; }
.expansion__botones { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Precios ---------- */
.aviso-gratis {
  background: linear-gradient(120deg, var(--teal-claro), #fff 60%);
  border: 1px solid rgba(32,199,181,.3);
  border-radius: var(--radio);
  padding: 22px 26px;
  margin-bottom: 40px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.aviso-gratis__icono { color: var(--teal-oscuro); flex-shrink: 0; margin-top: 2px; }
.aviso-gratis b { color: var(--teal-oscuro); }

.rejilla-precios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .rejilla-precios { grid-template-columns: 1fr; } }
.rejilla-precios[data-reveal-grupo] [data-reveal-item]:nth-child(1) { transition-delay: 0s; }
.rejilla-precios[data-reveal-grupo] [data-reveal-item]:nth-child(2) { transition-delay: .12s; }
.rejilla-precios[data-reveal-grupo] [data-reveal-item]:nth-child(3) { transition-delay: .24s; }

.plan {
  background: var(--blanco);
  border: 1px solid var(--gris-200);
  border-radius: var(--radio);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.plan:hover { transform: translateY(-6px); box-shadow: var(--sombra-grande); border-color: var(--gris-200); }
.plan--recomendado { border-color: var(--rojo); position: relative; }
.plan--recomendado:hover { border-color: var(--rojo); }
.plan--seleccionado { border-color: var(--teal); }
.plan--recomendado::before {
  content: "Recomendado";
  position: absolute; top: -13px; left: 28px;
  background: var(--rojo); color: var(--blanco);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  padding: 5px 12px; border-radius: 999px;
}
.plan__nombre { font-family: var(--font-mono); font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--gris-500); font-weight: 500; }
.plan__precio { font-size: 40px; font-weight: 700; margin: 14px 0 2px; }

/* Selector de plan de renovar.php/crear-cuenta.php: al elegir uno, las
   tarjetas se encogen en vez de esconder las otras — "1 año" siempre se
   destaca como mejor valor, y "5 días" se atenúa cuando no es la elegida. */
#rejilla-planes { transition: gap .25s ease; scroll-margin-top: 28px; }
#rejilla-planes.compacta .plan { padding: 18px 20px; }
#rejilla-planes.compacta .plan__periodo { display: none; }
#rejilla-planes.compacta .plan__precio { font-size: 26px; margin: 8px 0 2px; }
#rejilla-planes.compacta .boton-elegir-plan { padding: 9px 14px !important; font-size: 12.5px; }
#rejilla-planes.compacta .plan,
#rejilla-planes.compacta .plan__precio,
#rejilla-planes.compacta .boton-elegir-plan { transition: all .25s ease; }
.plan--mejor-valor { border-color: var(--teal); position: relative; }
.plan--mejor-valor::before {
  content: "Mejor valor";
  position: absolute; top: -12px; left: 20px;
  background: var(--teal); color: var(--negro);
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  padding: 4px 10px; border-radius: 999px;
}
#rejilla-planes.compacta .plan--atenuado:not(.plan--seleccionado) {
  opacity: .55;
  filter: blur(.3px);
}
.plan__precio span { font-size: 16px; font-weight: 500; color: var(--gris-500); }
.plan__periodo { color: var(--gris-500); font-size: 13.5px; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--gris-200); }
.plan__ficha { margin-bottom: 26px; flex: 1; }
.plan__ficha > div { padding: 9px 0; }
.plan__ficha dt { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--gris-500); margin-bottom: 3px; }
.plan__ficha dd { margin: 0; font-size: 14px; }

.nota-precios { margin-top: 22px; font-size: 12.5px; color: var(--gris-500); }

/* ---------- Datos crudos ---------- */
.datos-crudos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
@media (max-width: 900px) { .datos-crudos { grid-template-columns: 1fr; } }
.datos-crudos__panel {
  background: var(--gris-950);
  color: var(--blanco);
  border-radius: 20px;
  padding: 32px;
}
.datos-crudos__fila { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 13.5px; }
.datos-crudos__fila:last-child { border-bottom: none; }
.datos-crudos__fila code { background: rgba(255,255,255,.08); padding: 2px 8px; border-radius: 6px; font-size: 12.5px; }

/* ---------- FAQ ---------- */
.faq { max-width: 760px; margin: 0 auto; }
.faq[data-reveal-grupo] [data-reveal-item]:nth-child(1) { transition-delay: 0s; }
.faq[data-reveal-grupo] [data-reveal-item]:nth-child(2) { transition-delay: .06s; }
.faq[data-reveal-grupo] [data-reveal-item]:nth-child(3) { transition-delay: .12s; }
.faq[data-reveal-grupo] [data-reveal-item]:nth-child(4) { transition-delay: .18s; }
.faq[data-reveal-grupo] [data-reveal-item]:nth-child(5) { transition-delay: .24s; }
.faq[data-reveal-grupo] [data-reveal-item]:nth-child(6) { transition-delay: .3s; }
.faq-item { border-bottom: 1px solid var(--gris-200); }
.faq-item__pregunta {
  width: 100%;
  background: none; border: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 4px;
  text-align: left;
  font-size: 16px; font-weight: 600;
  color: var(--gris-900);
}
.faq-item__icono { flex-shrink: 0; transition: transform .2s ease; color: var(--gris-500); }
.faq-item.abierto .faq-item__icono { transform: rotate(45deg); }
.faq-item__respuesta {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
}
.faq-item__respuesta-interior { padding: 0 4px 20px; color: var(--gris-500); font-size: 14.5px; }
.faq-item__respuesta-interior p + p { margin-top: 10px; }

/* ---------- Contacto ---------- */
.contacto-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; }
@media (max-width: 900px) { .contacto-grid { grid-template-columns: 1fr; } }
.contacto-info__item { display: flex; gap: 14px; margin-bottom: 26px; }
.contacto-info__icono {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  background: rgba(255,255,255,.08); color: var(--teal);
  display: flex; align-items: center; justify-content: center;
}
.contacto-info__titulo { font-weight: 600; margin-bottom: 3px; }
.contacto-info__texto { color: rgba(255,255,255,.6); font-size: 14px; }

.formulario { background: var(--blanco); color: var(--gris-900); border-radius: 20px; padding: 32px; }
.campo { margin-bottom: 18px; }
.campo label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.campo input, .campo select, .campo textarea {
  width: 100%;
  border: 1px solid var(--gris-200);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 14.5px;
  background: var(--gris-100);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--teal); background: var(--blanco);
}
.campo-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .campo-fila { grid-template-columns: 1fr; } }
.campo-honeypot { position: absolute; left: -9999px; }
.formulario__mensaje { font-size: 13.5px; margin-top: 14px; padding: 10px 14px; border-radius: 10px; display: none; }
.formulario__mensaje--ok { display: block; background: var(--teal-claro); color: var(--teal-oscuro); }
.formulario__mensaje--error { display: block; background: var(--rojo-claro); color: var(--error-oscuro); }

/* ---------- Footer ---------- */
.pie {
  background: var(--negro);
  color: rgba(255,255,255,.6);
  padding: 64px 0 28px;
}
.pie__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
@media (max-width: 900px) { .pie__grid { grid-template-columns: 1fr 1fr; } }
.pie__titulo { color: var(--blanco); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 16px; }
.pie__lista li { margin-bottom: 10px; font-size: 14px; }
.pie__lista a:hover { color: var(--blanco); }
.pie__marca-texto { margin-top: 14px; font-size: 14px; max-width: 320px; color: rgba(255,255,255,.5); }
.pie__abajo {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 12.5px; color: rgba(255,255,255,.4);
}
.pie__abajo a:hover { color: rgba(255,255,255,.7); }

/* ---------- Utilidades ---------- */
.visible-movil { display: none; }
@media (max-width: 900px) { .visible-movil { display: block; } }
.menu-movil {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 12px 0 20px;
}
.menu-movil.abierto { display: flex; border-top: 1px solid var(--gris-200); }
.menu-movil a { color: var(--gris-700); padding: 10px 4px; font-size: 15px; }
.menu-movil a.menu-movil__cta { margin-top: 8px; padding: 14px 26px; color: var(--negro); }

/* ---------- Portal de descargas (login) ---------- */
.portal-descargas {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.portal-descargas__tarjeta {
  background: var(--blanco);
  border: 1px solid var(--gris-200);
  border-radius: 20px;
  padding: 40px;
  width: 100%;
  max-width: 400px;
  box-shadow: var(--sombra);
}
.portal-descargas__titulo { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.portal-descargas__subtitulo { font-size: 14px; color: var(--gris-500); margin-bottom: 24px; }
.portal-descargas__form .campo:last-of-type { margin-bottom: 22px; }
.portal-descargas__volver { display: block; text-align: center; margin-top: 22px; font-size: 13px; color: var(--teal-oscuro); font-weight: 600; }

/* ---------- Portal de descargas (explorador) ---------- */
.explorador { max-width: 900px; margin: 0 auto; padding: 32px 24px 80px; }
.explorador__barra { display: flex; align-items: center; justify-content: space-between; padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid var(--gris-200); }
.explorador__titulo { font-size: 26px; margin-bottom: 18px; }

.menu-desplegable { position: relative; display: inline-block; }
.menu-desplegable__panel {
  display: none;
  position: absolute; top: calc(100% + 6px); right: 0;
  background: var(--blanco); border: 1px solid var(--gris-200); border-radius: 12px;
  box-shadow: var(--sombra-grande); padding: 8px; min-width: 210px; z-index: 60;
}
.menu-desplegable__panel.abierto { display: block; }
.menu-desplegable__panel a {
  display: block; padding: 10px 14px; border-radius: 8px;
  color: var(--gris-700); font-size: 13.5px; font-weight: 500;
}
.menu-desplegable__panel a:hover { background: var(--gris-100); color: var(--negro); }

.migas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--gris-500); margin-bottom: 24px; }
.migas a { color: var(--teal-oscuro); font-weight: 600; }
.migas a:hover { text-decoration: underline; }

.tabla-archivos { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla-archivos th {
  text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--gris-500); font-weight: 600; padding: 0 12px 10px; border-bottom: 1px solid var(--gris-200);
}
.tabla-archivos td { padding: 12px; border-bottom: 1px solid var(--gris-200); vertical-align: middle; }
.tabla-archivos tr:hover td { background: var(--gris-100); }
.tabla-archivos__nombre { display: flex; align-items: center; gap: 10px; color: var(--gris-900); font-weight: 500; }
.tabla-archivos__nombre svg { color: var(--gris-500); flex-shrink: 0; }
.tabla-archivos__descargar { color: var(--teal-oscuro); font-weight: 700; font-size: 13px; }
.tabla-archivos__descargar:hover { text-decoration: underline; }

/* ---------- Rejilla de estaciones (raíz del explorador) ---------- */
.estaciones-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.estaciones-grid__tarjeta {
  display: flex; align-items: center; gap: 14px; background: var(--blanco); border: 1px solid var(--gris-200);
  border-radius: 14px; padding: 16px 18px; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.estaciones-grid__tarjeta:hover { border-color: var(--teal); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(6,43,92,.06); }
.estaciones-grid__icono {
  width: 42px; height: 42px; border-radius: 10px; background: var(--teal-claro); color: var(--teal-oscuro);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.estaciones-grid__nombre { display: block; font-weight: 700; color: var(--gris-900); font-size: 15px; }
.estaciones-grid__codigo { display: block; font-size: 12px; color: var(--gris-500); font-family: var(--font-mono); margin-top: 2px; }

/* ---------- Calendario de datos disponibles (explorador) ---------- */
.calendario-envoltura { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.calendario { width: 280px; flex-shrink: 0; user-select: none; }
.calendario__cabecera-mes { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.calendario__mes-nombre { font-weight: 700; font-size: 15px; text-transform: capitalize; }
.calendario__nav {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--gris-200); background: var(--blanco);
  display: flex; align-items: center; justify-content: center; color: var(--gris-700);
}
.calendario__nav:hover { background: var(--gris-100); }
.calendario__nav--deshabilitado { opacity: .3; pointer-events: none; }
.calendario__dias-semana, .calendario__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calendario__dias-semana span { text-align: center; font-size: 11px; color: var(--gris-500); font-weight: 600; padding-bottom: 4px; }
.calendario__celda {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 8px;
  font-size: 13px; color: var(--gris-500);
}
.calendario__celda--vacia { visibility: hidden; }
.calendario__celda--datos {
  background: var(--teal-claro); color: var(--teal-oscuro); font-weight: 700; cursor: pointer;
  transition: transform .12s ease, background .12s ease;
}
.calendario__celda--datos:hover { background: var(--teal); color: var(--blanco); transform: scale(1.08); }
.calendario__celda--activa, .calendario__celda--activa:hover { background: var(--teal-oscuro); color: var(--blanco); }
.calendario__leyenda { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--gris-500); margin-top: 14px; }
.calendario__leyenda span { width: 12px; height: 12px; border-radius: 4px; background: var(--teal-claro); display: inline-block; }

.calendario-dia { flex: 1; min-width: 260px; }
.calendario-dia__encabezado { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 4px; }
.calendario-dia__titulo { font-size: 15px; font-weight: 700; text-transform: capitalize; }
.calendario-dia__toggle { display: flex; gap: 4px; background: var(--gris-100); border-radius: 999px; padding: 3px; }
.calendario-dia__toggle-btn {
  border: none; background: none; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600;
  color: var(--gris-500); cursor: pointer; font-family: var(--font);
}
.calendario-dia__toggle-btn.is-activo { background: var(--blanco); color: var(--teal-oscuro); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.calendario-dia__aviso { font-size: 12.5px; color: var(--gris-500); margin-bottom: 18px; max-width: 440px; }
.calendario-dia__lista { display: flex; flex-direction: column; gap: 8px; }
.calendario-dia__hoja {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--gris-100); border-radius: 10px; padding: 12px 16px;
}
.calendario-dia__rango { font-weight: 600; font-size: 14px; color: var(--gris-900); font-family: var(--font-mono); }
.calendario-dia__detalle { font-size: 12px; color: var(--gris-500); margin-top: 2px; }
.calendario-dia__nada { color: var(--gris-500); font-size: 14px; padding: 24px 0; }