/* ═══════════════════════════════════════════════════════════════════════════
   BASE · lo que le faltaba a todas las páginas
   ─────────────────────────────────────────────────────────────────────────
   Nada de esto cambia cómo se ve el sitio. Cambia si se puede usar:
   con teclado, con lector de pantalla, en un iPhone, o con la preferencia
   del sistema de "menos animación" activada.

   Va en su propia hoja y no dentro de nav.css porque no es del menú, y
   porque así se puede cargar también en las 5 páginas que no traen nav.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Saltar al contenido ──────────────────────────────────────────────────
   Cada página abre con el menú: 66 enlaces antes del contenido. Quien navega
   con teclado o lector de pantalla tenía que pasar por los 66 en CADA página.
   Este enlace es el primero del documento y se ve sólo al enfocarlo. */
.nl-skip {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 10000;
  display: inline-block;
  padding: 12px 20px;
  background: #0F2940;
  color: #fff;
  font: 700 14px/1 'DM Sans', system-ui, sans-serif;
  text-decoration: none;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 6px 24px rgba(15, 41, 64, .35);
  transition: top .18s ease;
}
.nl-skip:focus {
  top: 0;
  color: #fff;
}

/* El destino del salto: sin tabindex el foco no se mueve de verdad y el
   lector de pantalla sigue leyendo desde el menú. */
#contenido:focus {
  outline: none;
}

/* ── Foco visible ─────────────────────────────────────────────────────────
   14 de 17 páginas no tenían ninguno: el navegador dibuja el suyo y muchas
   reglas del sitio lo pisaban. Sin esto, con teclado no sabes dónde estás.
   :focus-visible sólo aparece con teclado, nunca al hacer clic con el mouse. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 3px solid #4AB8C8;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Scroll suave para las anclas del pie ────────────────────────────────
   /soporte#instalacion saltaba de golpe. Con `scroll-padding-top` el título
   no queda escondido debajo del encabezado fijo. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
}

/* ── Alto de pantalla real en móvil ──────────────────────────────────────
   100vh en Safari de iPhone mide la pantalla SIN la barra de direcciones,
   así que al aparecer/desaparecer la barra el layout brinca. 100dvh es la
   medida dinámica. Se declara después para que los navegadores viejos, que
   no entienden dvh, se queden con la regla anterior. */
.hero,
.page-hero,
[class*="hero"] {
  --nl-alto-pantalla: 100dvh;
}

/* ── Respetar "menos animación" ──────────────────────────────────────────
   Quien activa esa preferencia del sistema suele hacerlo por mareo o
   migraña. Ignorarla no es un detalle de estilo. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Cifras alineadas ────────────────────────────────────────────────────
   Los números de las tarjetas de estadísticas bailaban de ancho entre
   dígitos. `tabular-nums` los deja del mismo ancho. */
.stat-number,
.cn-stat-n,
.hero-stat-num,
[class*="stat"] strong {
  font-variant-numeric: tabular-nums;
}