/* =============================================================================
   BASE · Reinicio, tipografía y superficies del navegador
   -----------------------------------------------------------------------------
   Lo último de la lista es lo que más se nota y lo que casi nadie hace: la
   selección de texto, el cursor, la barra de desplazamiento, el anillo de foco
   y las cifras tabulares vienen con valores por defecto que no pertenecen a
   ningún sistema de diseño. Acá se les da los del corredor.
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Ningún desborde lateral puede hacer que la página entera se desplace a lo
     ancho: en un teléfono al costado de la ruta eso convierte cada toque en un
     arrastre accidental. `clip` y no `hidden` porque `hidden` crearía un
     contenedor de desplazamiento y rompería el `position: sticky` de la
     cabecera. */
  overflow-x: clip;
  /* La cabecera es pegajosa: un ancla no debe quedar debajo de ella. */
  scroll-padding-top: calc(var(--header-h) + var(--sp-4));
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--color-canvas);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: proportional-nums;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* --- Títulos ---------------------------------------------------------------
   Un solo salto de escala por nivel, y siempre más aire arriba que abajo: el
   título pertenece a lo que viene después, no a lo que quedó atrás.

   SEMI-BOLD, NO BOLD (ajuste de septiembre de 2026, punto repetido ocho veces
   en el pedido del cliente: «los títulos si están en negritas ponerlos en
   semi-bold»). Ésta es la palanca: TODOS los títulos del sitio cuelgan de acá,
   así que el peso se corrige en un solo lugar y no en cada componente.

   La Overpass ya trae el corte 600 —`layouts/default.htm` lo pide en el `link` de
   la fundición—, así que no hay síntesis del navegador: es un peso real
   dibujado, no un bold falsificado.

   Los pesos que NO bajaron a 600 y por qué: pastilla, escudo, etiqueta, celda
   de tabla, importe y rótulo de dato. A cuerpo chico y en mayúsculas, 600 se
   lee delgado y esos elementos existen justamente para destacar de un vistazo.
   No son títulos, son señales. */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tk-snug);
  text-wrap: balance;
  color: var(--color-text);
}

h1 { font-size: var(--fs-3xl); line-height: var(--lh-tight); letter-spacing: var(--tk-tight); }
h2 { font-size: var(--fs-2xl); letter-spacing: var(--tk-tight); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-md); }
h6 { font-size: var(--fs-base); }

p {
  margin: 0 0 var(--sp-4);
  max-width: var(--w-prose);
  text-wrap: pretty;
  /* El PETG prohíbe justificar. Alineación a la izquierda, siempre. */
  text-align: left;
}

p:last-child { margin-bottom: 0; }

/* --- Enlaces ---------------------------------------------------------------
   El pliego pide que sean claramente identificables. Subrayado real, con el
   desplazamiento y el grosor ajustados a la Asap, no el subrayado del
   navegador pegado a la línea de base. */
a {
  color: var(--color-link);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in oklab, currentColor 42%, transparent);
  transition: color var(--dur-1) var(--ease-out),
              text-decoration-color var(--dur-1) var(--ease-out);
}

a:hover {
  color: var(--color-link-hover);
  text-decoration-color: currentColor;
}

/* --- Listas ---------------------------------------------------------------- */
ul, ol {
  margin: 0 0 var(--sp-4);
  padding-left: var(--sp-5);
  max-width: var(--w-prose);
}

li { margin-bottom: var(--sp-2); }
li:last-child { margin-bottom: 0; }

ul.limpia,
ol.limpia {
  list-style: none;
  padding-left: 0;
  max-width: none;
}

/* --- Elementos de medio ---------------------------------------------------- */
img, svg, video, canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

figure { margin: 0; }

figcaption {
  font-size: var(--fs-3xs);
  line-height: var(--lh-normal);
  color: var(--color-text-faint);
  margin-top: var(--sp-2);
}

/* --- Controles de formulario ----------------------------------------------- */
button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}

button { cursor: pointer; background: none; border: none; padding: 0; }
button:disabled { cursor: not-allowed; }

/* --- Tablas ----------------------------------------------------------------
   Las tarifas y las progresivas son cifras que se comparan en columna. Cifras
   tabulares por defecto en toda tabla: sin esto los números bailan. */
table {
  border-collapse: collapse;
  width: 100%;
  font-variant-numeric: tabular-nums;
}

th { text-align: left; font-weight: var(--fw-semibold); }

/* --- Registro técnico ------------------------------------------------------
   Kilómetro, progresiva, coordenada, número de gestión, importe. La Chivo Mono
   sólo aparece donde hay una medida o un código: nunca como disfraz técnico. */
code, kbd, samp, pre, .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'zero' 1;   /* cero barrado: 0 nunca se lee como O */
}

.mono {
  /* La Chivo Mono tiene la altura de x más grande que la Asap y a igual cuerpo
     se ve mayor, de ahí el 0,92. Pero el ajuste óptico no puede empujar el
     texto por debajo de los 12 px que fija el Art. 61.7: `max` pone el piso. */
  font-size: max(0.92em, var(--fs-3xs));
  letter-spacing: -0.01em;
}

hr {
  border: none;
  border-top: 1px solid var(--color-line);
  margin: var(--sp-8) 0;
}

/* =============================================================================
   SUPERFICIES DEL NAVEGADOR
   Las partes que no dibujamos también son del sistema.
   ========================================================================== */

::selection {
  background: var(--color-selection);
  color: var(--color-text);
}

.on-dark ::selection,
.on-verde ::selection {
  background: var(--color-selection);
  color: #ffffff;
}

/* Cursor de escritura del color de la marca, no del texto. */
input, textarea, [contenteditable] {
  caret-color: var(--color-brand);
}

.on-dark input,
.on-dark textarea,
.on-verde input,
.on-verde textarea {
  caret-color: var(--color-accent);
}

/* Barra de desplazamiento. Delgada y del mundo del corredor: el pulgar es la
   cinta. Firefox por `scrollbar-*`, WebKit por pseudoelemento. */
html {
  scrollbar-color: var(--n-300) transparent;
  scrollbar-width: thin;
}

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--color-surface-sunk); }
::-webkit-scrollbar-thumb {
  background: var(--n-300);
  border: 3px solid var(--color-surface-sunk);
  border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--azul-400); }

.on-dark { scrollbar-color: rgb(156 193 232 / 0.32) transparent; }
.on-dark ::-webkit-scrollbar-track { background: var(--azul-990); }
.on-dark ::-webkit-scrollbar-thumb {
  background: rgb(156 193 232 / 0.32);
  border-color: var(--azul-990);
}

/* El campo verde lleva su propio pulgar: reusar el azul deja una barra fría
   flotando sobre una superficie cálida y se ve como un pedazo de otra página. */
.on-verde { scrollbar-color: rgb(131 210 176 / 0.32) transparent; }
.on-verde ::-webkit-scrollbar-track { background: #021710; }
.on-verde ::-webkit-scrollbar-thumb {
  background: rgb(131 210 176 / 0.32);
  border-color: #021710;
}

/* --- Foco -----------------------------------------------------------------
   Obligatorio por pliego (navegación por teclado) y por WCAG. El anillo es
   naranja de obra en los dos contextos: es el único color que se lee tanto
   sobre el papel frío como sobre el campo profundo. */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

/* Sin anillo por click de ratón donde ya hay otra señal de estado. */
:focus:not(:focus-visible) { outline: none; }

/* --- Salto al contenido ---------------------------------------------------- */
.saltar {
  position: absolute;
  left: var(--sp-4);
  top: var(--sp-2);
  z-index: 200;
  transform: translateY(-160%);
  background: var(--emergencia);
  color: #ffffff;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tk-label);
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-2);
  transition: transform var(--dur-2) var(--ease-out);
}

.saltar:focus-visible {
  transform: translateY(0);
  color: #ffffff;
}

/* --- Sólo para lectores de pantalla ---------------------------------------- */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* =============================================================================
   COMPENSACIÓN DE TEXTO CLARO SOBRE FONDO OSCURO
   Los tres ejes perceptuales: un poco más de interlineado, un poco más de
   tracking, y un escalón más de peso donde la Asap lo pide. Sin esto el texto
   sobre el campo profundo se "cierra" y se lee peor a brillo bajo, que es
   exactamente la situación del usuario varado de noche.
   ========================================================================== */
.on-dark p,
.on-dark li,
.on-dark dd,
.on-verde p,
.on-verde li,
.on-verde dd {
  line-height: calc(var(--lh-body) + 0.06);
  letter-spacing: 0.004em;
}

.on-dark,
.on-verde {
  font-weight: 450;
}

/* =============================================================================
   MOVIMIENTO REDUCIDO
   Menos y más suave, no apagado: la retroalimentación que confirma una acción
   tiene que seguir siendo legible.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Se conserva el cambio de color y de opacidad, que llevan significado. */
  a, button, [data-estado] {
    transition-property: color, background-color, border-color, opacity !important;
    transition-duration: 90ms !important;
  }
}