/* ==========================================================================
   ADR Transport 2026 — Tokens y base

   Paleta contando píxeles del logotipo (LOGO 2.png, 1130×661): rojo #A00000
   (23.5 %) y blanco/negro (76.5 %). El rojo de marca da 8.4:1 con texto
   blanco encima, pero solo 2.3:1 como texto sobre negro: por eso hay DOS
   rojos de texto. Ver herramientas/auditar-contraste.py.
   ========================================================================== */

:root {
  /* marca */
  --rojo: #A00000;          /* relleno de marca · texto blanco encima 8.43:1 · texto sobre blanco 8.43:1 */
  --rojo-hondo: #6E0000;    /* hover del botón */
  --rojo-vivo: #E0141B;     /* acentos, degradados, iconos · NO para texto chico sobre oscuro */
  --rojo-luz: #FF5A52;      /* texto rojo SOBRE OSCURO · 6.4:1 sobre --negro */

  /* superficies oscuras */
  --negro: #0A0A0C;
  --grafito: #131317;
  --carbon: #1B1B21;
  --acero: #26262E;
  --linea-o: rgba(255, 255, 255, .12);
  --texto-o: #FFFFFF;
  --texto-o2: #B8B8C2;      /* 9.9:1 sobre --negro */

  /* superficies claras */
  --blanco: #FFFFFF;
  --hueso: #F4F2EE;
  --niebla: #E7E4DF;
  --linea-c: #DAD6CF;
  --tinta: #111114;
  --texto-c2: #4B4B54;      /* 8.4:1 sobre blanco, 7.6:1 sobre hueso */

  /* tipografía */
  --f-display: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --f-texto: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ancho-display: 116%;

  --t-xs: .78rem;
  --t-sm: .9rem;
  --t-base: 1.0625rem;
  --t-md: clamp(1.12rem, 1.05rem + .3vw, 1.3rem);
  --t-lg: clamp(1.35rem, 1.2rem + .7vw, 1.75rem);
  --t-xl: clamp(1.7rem, 1.35rem + 1.5vw, 2.6rem);
  --t-2xl: clamp(2.1rem, 1.5rem + 2.6vw, 3.6rem);
  --t-3xl: clamp(2.5rem, 1.6rem + 4vw, 5rem);
  --t-mega: clamp(3.4rem, 1.4rem + 9vw, 10.5rem);

  /* espacio */
  --e-1: .25rem; --e-2: .5rem; --e-3: .75rem; --e-4: 1rem; --e-5: 1.5rem;
  --e-6: 2rem; --e-7: 3rem; --e-8: 4rem; --e-9: 6rem;
  --seccion: clamp(4.5rem, 3rem + 6vw, 8.5rem);

  --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-xl: 28px; --r-full: 999px;

  --sombra: 0 24px 60px -24px rgba(0, 0, 0, .45);
  --sombra-roja: 0 18px 50px -18px rgba(224, 20, 27, .55);

  --curva: cubic-bezier(.2, .7, .2, 1);
  --curva-salida: cubic-bezier(.55, 0, .75, .2);
  --curva-resorte: cubic-bezier(.34, 1.4, .5, 1);

  --cabecera-alto: 84px;

  /* Textura del metal perforado de las piezas gráficas del cliente:
     ranuras ovaladas en retícula de 22×34 px. */
  --perforado-claro: radial-gradient(closest-side, rgba(255,255,255,.085) 62%, transparent 66%) 0 0 / 22px 34px;
  --perforado-oscuro: radial-gradient(closest-side, rgba(0,0,0,.22) 62%, transparent 66%) 0 0 / 22px 34px;
}

/* ---------------------------------------------------------------- reset corto */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--f-texto);
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--tinta);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, h5 {
  font-family: var(--f-display);
  font-stretch: var(--ancho-display);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.02em;
  margin: 0 0 var(--e-4);
  text-wrap: balance;
}
h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-lg); line-height: 1.15; }
h4 { font-size: var(--t-md); }
p { margin: 0 0 var(--e-4); text-wrap: pretty; }
::selection { background: var(--rojo); color: #fff; }
:focus-visible { outline: 3px solid var(--rojo-vivo); outline-offset: 3px; border-radius: 4px; }

.contenedor {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}
.contenedor--ancho { max-width: 1480px; }
.contenedor--angosto { max-width: 860px; }

.visualmente-oculto {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.saltar {
  position: fixed; top: -100px; left: 1rem; z-index: 999;
  background: var(--rojo); color: #fff; padding: .7rem 1.1rem; border-radius: var(--r-sm);
  font-weight: 600; text-decoration: none;
}
.saltar:focus { top: 1rem; }

/* ---------------------------------------------------------------- tonos de sección
   REGLA APRENDIDA: una superficie oscura declara SIEMPRE su `color`, aunque
   cada texto lo lleve explícito; los componentes que heredan currentColor
   (botón fantasma, SVG, ::marker) se rompen si no. */
.tono-oscuro { background: var(--negro); color: var(--texto-o); }
.tono-grafito { background: var(--grafito); color: var(--texto-o); }
.tono-claro { background: var(--blanco); color: var(--tinta); }
.tono-hueso { background: var(--hueso); color: var(--tinta); }
.tono-rojo { background: var(--rojo); color: #fff; }

.seccion { padding-block: var(--seccion); position: relative; overflow-x: clip; }
.seccion--corta { padding-block: calc(var(--seccion) * .6); }
.seccion--sin-arriba { padding-top: 0; }

/* ---------------------------------------------------------------- aparición
   Solo se oculta si el JS arrancó (html sin .sin-js). */
html:not(.sin-js) .aparece {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .9s var(--curva), transform .9s var(--curva);
  transition-delay: calc(var(--i, 0) * 90ms);
}
html:not(.sin-js) .aparece.es-visible { opacity: 1; transform: none; }
html:not(.sin-js) .aparece--izq { transform: translateX(-40px); }
html:not(.sin-js) .aparece--der { transform: translateX(40px); }
html:not(.sin-js) .aparece--escala { transform: scale(.94); }
/* Un translateX en estado oculto cuenta como desbordamiento: en móvil
   ensanchaba el viewport a 404 px. Ahí la entrada es vertical. */
@media (max-width: 960px) {
  html:not(.sin-js) .aparece--izq, html:not(.sin-js) .aparece--der { transform: translateY(34px); }
}

/* Titulares partidos palabra por palabra (app.js). Cada palabra sube desde
   una máscara: el efecto de «texto magnífico» del hero y los encabezados. */
.partido .palabra { display: inline-block; overflow: clip; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.partido .palabra > span { display: inline-block; transform: translateY(105%); transition: transform 1s var(--curva); transition-delay: calc(var(--p, 0) * 55ms + var(--retraso, 0ms)); }
.partido.es-visible .palabra > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html:not(.sin-js) .aparece { opacity: 1; transform: none; transition: none; }
  .partido .palabra > span { transform: none; transition: none; }
}

/* ---------------------------------------------------------------- barra de progreso de lectura */
.progreso {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200;
  transform-origin: left; transform: scaleX(var(--avance, 0));
  background: linear-gradient(90deg, var(--rojo), var(--rojo-vivo));
  pointer-events: none;
}