/* =========================================================================
   Info Trail Uruguay — sistema visual.

   Concepto: ANUARIO DEPORTIVO. Un medio especializado que publica calendario y
   resultados. La información es el gráfico: tipografía fuerte, datos densos,
   reglas horizontales y un solo color de señal usado con avaricia.

   Tres decisiones que explican casi todo el archivo:

   1. REGLA ANTES QUE CAJA. Una lista de carreras es una lista, no una grilla de
      tarjetas. El separador es un hairline. Sobrevive la caja solo donde agrupa
      cosas heterogéneas que hay que leer como una unidad.
   2. EL AZUL PETRÓLEO ES SEÑAL, NO DECORACIÓN. Solo: acción primaria, estado
      "próxima" y la sección activa del nav. Los enlaces de cuerpo son texto
      subrayado. Cuando todo es acento, no hay acento.
   3. DOS FAMILIAS CON TRABAJOS DISTINTOS. Archivo (display) para nombres y
      numerales grandes; Inter para texto y datos, con numerales tabulares para
      que tiempos y fechas alineen en columna.

   Mobile primero: todo se escribe para pantalla angosta y se ensancha después.

   ---------------------------------------------------------------------------
   IDENTIDAD — MINERAL (2026-08-14). El sitio usaba naranja #ff5a00 sobre negro
   azulado #14161a, que es exactamente el par de Trail Running Uruguay (#ff6300
   sobre #1b1b1b): siendo un sitio independiente, se leía como una extensión de
   un organizador.

   Se probaron cinco direcciones con un selector temporal (tierra, bosque,
   carmín, noche, mineral) y quedó MINERAL: papel de piedra cálida #f5f3ed,
   tinta azul mineral #18262b y azul petróleo #176b78 de marca, con bronce para
   las categorías y oro para el único estado especial. Las otras cuatro y el
   selector se borraron; el historial las conserva.

   Por qué esta y no las otras: tierra conservaba la estructura conceptual de
   TRU (oscuro + claro cálido + acento naranja) aunque el naranja ya no fuera el
   mismo; bosque caía en un outdoor genérico; carmín arrastraba la carga
   semántica de alerta; noche se iba a una identidad tecnológica y soltaba lo
   deportivo. El objetivo es leerse como un medio deportivo moderno, no como una
   marca de carrera.

   Lo que NO cambió en todo el proceso: la estructura, la tipografía, la
   navegación, el espaciado y el patrón de lista.
   ========================================================================= */

:root{
  /* --- tinta y papel --- */
  --ink:#18262b;          /* header, footer, bloques destacados */
  --ink-2:#22343a;        /* superficie oscura secundaria */
  --paper:#f5f3ed;        /* fondo del sitio */
  --paper-2:#e8e4d9;      /* fondo secundario: recuadros embutidos en el papel */
  --surface:#fff;         /* superficie clara, usada con moderación */
  --text:#182428;
  --text-2:#5e6a6d;       /* metadata                                    5,0:1 */
  --text-3:#666f70;       /* dorsal, conteos, notas al pie               4,7:1 */
  /* Los dos grises pasan AA (4,5:1) sobre --paper, y check_golive.py lo verifica
     (A-11). El tercero estuvo en #8b9099 = 3,0:1 y no llevaba adorno: llevaba
     dorsales, cantidad de finishers, el tiempo debajo de cada puntaje y la
     diferencia con los rivales. */

  /* --- reglas: el separador que reemplaza a la tarjeta --- */
  --rule:#d9d3c5;
  --rule-2:#c4bda9;       /* regla que cierra un bloque o encabeza una tabla */

  /* --- señal: se usa poco, a propósito ---
     El azul petróleo es la firma, y es el único color de marca que se probó que
     hace TODOS los trabajos con un solo valor: texto chico sobre papel (5,5:1),
     relleno bajo texto blanco (6,2:1), borde y línea de altimetría. Por eso
     --signal y --signal-ink son el mismo hex: no hacen falta dos. Se conservan
     los dos nombres porque cada uno dice qué trabajo hace en la regla que lo usa.
       --signal       marcas, bordes, iconos, altimetría, foco
       --signal-ink   texto chico sobre papel Y relleno bajo texto blanco
       --signal-lite  la señal sobre tinta: la fuerte da 2,5:1 contra --ink
       --signal-deep  hover del relleno                                          */
  --signal:#176b78;
  --signal-ink:#176b78;
  --signal-lite:#78aeb5;
  --signal-deep:#0f5059;
  --signal-wash:#e6f0f1;
  /* La señal cuando va SOBRE tinta y tiene que SIGNIFICAR algo: la pestaña
     activa, la sección activa de la barra y la marca del header. Un azul de
     marca oscuro no llega a 3:1 contra la tinta y ahí el indicador de "dónde
     estoy" deja de verse; la variante clara da 6,3:1. Es un token aparte y no
     --signal-lite a secas porque son dos ideas distintas: una es "la señal
     aclarada", la otra es "el indicador de estado sobre fondo oscuro". */
  --signal-on-ink:var(--signal-lite);
  --olive:#7c6a4a;        /* secundario: categoría y contexto. Bronce y no el
                             azul claro de la paleta, que sobre papel da 2,2:1
                             y no puede llevar texto                    4,7:1 */
  --accent:#d5a63a;       /* oro: SOLO relleno con texto tinta encima.
                             Como texto sobre papel da 2,3:1 — no se usa así. */
  /* Los tres semánticos se eligieron por DISTANCIA DE MATIZ contra la marca
     (188°) y no por gusto: con un verde azulado, "hay resultados" se habría
     leído como un enlace de marca. */
  --live:#3d7a33;         /* hay resultados. 111°                        4,7:1 */
  --live-wash:#ecf1e8;
  --alerta:#b02733;       /* avisos: suspensiones y cambios. 355°        5,9:1 */
  --alerta-wash:#f8eaea;

  /* --- texto SOBRE los bloques de tinta ---
     Eran ocho grises escritos a mano en el header, el hero, el pie y la barra
     inferior. Ahora son cuatro escalones con nombre: sin esto, cambiar de paleta
     dejaba grises fríos flotando sobre una tinta cálida (y al revés). */
  --on-ink-hi:#e3e8e7;    /* lo más claro después del blanco: fechas, enlaces del pie */
  --on-ink:#bcc7c8;       /* enlaces de la barra, texto secundario */
  --on-ink-lo:#93a1a3;    /* cuerpo del pie, lugar del hero, pestañas en reposo */
  --on-ink-dim:#717f81;   /* la línea de "actualizado el …" */
  --on-ink-sep:#3a4a4e;   /* separadores sobre tinta */

  /* --- velos: los únicos colores con alfa que dependen de la paleta --- */
  --scrim:rgba(24,38,43,.55);        /* fondo del panel de la ficha */
  --paper-veil:rgba(245,243,237,.97);/* barra de inscripción anclada en mobile */
  --signal-veil:rgba(23,107,120,.14);/* realces de señal muy tenues */

  /* --- tipografía --- */
  --f-display:"Archivo","Archivo Black",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --f-text:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  /* --- medidas --- */
  --w:1120px;             /* índices */
  --w-prose:68ch;         /* texto corrido */
  --pad:20px;

  /* --- radio: casi cero. 2px en controles, 4px en superficies --- */
  --r-ctl:2px;
  --r-box:4px;

  /* CURVAS DE NIVEL. El único elemento gráfico de la marca, y aparece en un solo
     lugar: la franja de tinta del hero. No son sierras dibujadas ni una textura
     decorativa — son las curvas de una carta topográfica, al 6 % de opacidad,
     donde ya hay tinta plana. Si alguna vez molesta, se saca de .hero y no queda
     nada suelto en el resto del archivo. */
  --topo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='144' viewBox='0 0 240 144'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.06' stroke-width='1'%3E%3Cpath d='M0 12C40 -6 80 30 120 12C160 -6 200 30 240 12'/%3E%3Cpath d='M0 36C40 22 80 50 120 36C160 22 200 50 240 36'/%3E%3Cpath d='M0 60C40 40 80 80 120 60C160 40 200 80 240 60'/%3E%3Cpath d='M0 84C40 72 80 96 120 84C160 72 200 96 240 84'/%3E%3Cpath d='M0 108C40 91 80 125 120 108C160 91 200 125 240 108'/%3E%3Cpath d='M0 132C40 117 80 147 120 132C160 117 200 147 240 132'/%3E%3C/g%3E%3C/svg%3E");
}

*{box-sizing:border-box}

/* La barra superior es sticky: sin reservar su alto, al saltar a un ancla —o al
   desplazar hasta una fila de la tabla— el destino queda TAPADO por la barra, y
   el clic se lo come el header en vez del enlace. */
html{-webkit-text-size-adjust:100%;scroll-padding-top:76px}
[id]{scroll-margin-top:76px}
/* en las tablas se descuenta además el alto del encabezado de la propia tabla */
.rtable tr{scroll-margin-top:110px}

/* El pie se apoya abajo cuando la página no llena la pantalla. Sin esto, en
   /buscar/, /avisos/ vacío o el 404 el bloque oscuro terminaba a media altura y
   dejaba 260 px de fondo claro debajo: la página parecía cortada. */
body{
  margin:0;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  font-family:var(--f-text);
  font-size:1rem;
  line-height:1.55;
  background:var(--paper);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
main{flex:1 0 auto}
.site-footer{flex-shrink:0}

/* Los datos deportivos alinean en columna: numerales de ancho fijo en todo lo
   que sea número. Sin esto un "1:23:45" y un "1:11:11" no alinean nunca. */
table,time,.num,.tnum,.ev-d,.hero-fecha{font-variant-numeric:tabular-nums}

.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--pad)}
.wrap-prose{max-width:var(--w-prose);margin:0 auto;padding:0 var(--pad)}

h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;letter-spacing:-.02em;
  line-height:1.12;margin:0}

p{margin:0 0 1em}
.muted{color:var(--text-2)}
.small{font-size:.82rem}
.na{color:var(--text-3)}

/* Enlaces de cuerpo: son texto, no acento. El naranja se guarda para actuar. */
a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.18em;text-decoration-color:var(--rule-2)}
/* La firma de marca en el enlace de cuerpo: al pasar por encima el subrayado se
   vuelve terracota. Es la única licencia que el sistema le da a la señal acá —
   en reposo el enlace sigue siendo texto, no acento. */
a:hover{text-decoration-color:var(--signal)}

.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:99;background:#fff;padding:10px 16px;
  border:2px solid var(--ink);text-decoration:none;font-weight:600}

:focus-visible{outline:2px solid var(--signal);outline-offset:2px}

/* -------------------------------------------------------------------------
   EYEBROW — micro-mayúsculas. NUNCA por debajo de .73rem (11.7px): es el piso
   de legibilidad en la mano que exige tools/check_responsive.js. Es el recurso que reemplaza a la mayoría de los
   badges: comunica la categoría del dato sin dibujar una cápsula alrededor.
   ------------------------------------------------------------------------- */
.eyebrow{font-family:var(--f-text);font-size:.73rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;color:var(--text-2);
  display:block;margin:0 0 6px}
.eyebrow.sig{color:var(--signal-ink)}
.eyebrow.live{color:var(--live)}
/* la categoría de una pieza: oliva, que es el color de lo contextual */
.eyebrow.cat{color:var(--olive)}

/* =========================================================================
   BARRA SUPERIOR
   El negro del header y el del hero son el mismo: en la portada se leen como
   un solo bloque de tinta, que es de donde sale la identidad del sitio.
   ========================================================================= */
.topbar{background:var(--ink);color:#fff;position:sticky;top:0;z-index:40}
.topbar-in{display:flex;align-items:stretch;gap:24px;min-height:60px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;
  flex:0 0 auto;padding:6px 0}
.brand-mark{color:var(--signal-on-ink);display:flex}
.brand-txt{font-family:var(--f-display);font-size:1.12rem;font-weight:700;
  letter-spacing:-.025em;white-space:nowrap;text-transform:uppercase}
.brand-txt b{font-weight:800}
.brand-txt span{font-weight:500;color:var(--on-ink-lo)}

.topnav{display:flex;gap:0;margin-left:auto;align-items:stretch}
.topnav a{display:flex;align-items:center;color:var(--on-ink);text-decoration:none;
  font-size:.83rem;font-weight:600;text-transform:uppercase;letter-spacing:.09em;
  padding:0 16px;white-space:nowrap;border-bottom:3px solid transparent}
.topnav a:hover{color:#fff}
.topnav a.on{color:#fff;border-bottom-color:var(--signal-on-ink)}
.nav-buscar{display:inline-flex;align-items:center;gap:7px}
/* la lupa pegada a la marca existe solo en mobile, donde .topnav no se muestra */
.brand-buscar{display:none}

/* =========================================================================
   BOTONES — rectangulares, con peso. Un solo primario por pantalla.
   ========================================================================= */
.btn-h,.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-family:var(--f-text);font-size:.85rem;font-weight:600;letter-spacing:.02em;
  padding:12px 20px;min-height:44px;border-radius:var(--r-ctl);cursor:pointer;
  text-decoration:none;border:1px solid var(--rule-2);color:var(--text);
  background:var(--surface);
  /* El cambio de estado se acompaña, no se anuncia: 180 ms sobre las tres
     propiedades que efectivamente cambian. Nada de transform ni de sombra —el
     botón no se levanta de la página. Con prefers-reduced-motion el bloque del
     final lo reduce a cero y el estado igual se ve. */
  transition:background-color .18s ease,border-color .18s ease,color .18s ease}
.btn-h:hover,.btn:hover{border-color:var(--ink);background:var(--surface)}
/* El primario del hero es LA acción de la portada y tenía el mismo cuerpo que un
   secundario de ficha. `lg` le da peso sin cambiar la forma: mismo radio de 2 px,
   mismo relleno de señal, más área de toque. A 420 px o menos ocupa el ancho:
   con una mano, un objetivo de borde a borde no se falla. */
.btn-h.lg,.btn.lg{font-size:.95rem;padding:15px 30px;min-height:52px}
@media (max-width:420px){.btn-h.lg,.btn.lg{width:100%}}
/* El relleno usa --signal-ink y no --signal: con la terracota fuerte el texto
   blanco de 13,6 px daba 3,8:1 y AA pide 4,5. Sigue siendo inconfundiblemente
   terracota, y de paso el CTA pesa un poco más que las marcas de la página. */
.btn-h.primary,.btn.primary{background:var(--signal-ink);border-color:var(--signal-ink);
  color:#fff;font-weight:700}
.btn-h.primary:hover,.btn.primary:hover{background:var(--signal-deep);
  border-color:var(--signal-deep)}
.btn-h.off{color:var(--text-3);background:transparent;border-style:dashed;cursor:default}
/* sobre fondo tinta */
.on-ink .btn-h{border-color:rgba(255,255,255,.3);color:#fff;background:transparent}
.on-ink .btn-h:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.on-ink .btn-h.primary{background:var(--signal-ink);border-color:var(--signal-ink)}
.hero-cta,.racts{display:flex;flex-wrap:wrap;gap:10px}

/* =========================================================================
   CABECERAS DE PÁGINA Y DE BLOQUE
   El encabezado de sección es una regla con una etiqueta encima: separa sin
   dibujar una caja y da el ritmo editorial de toda la home.
   ========================================================================= */
.crumbs{padding:14px 0 0;font-size:.78rem;color:var(--text-2)}
.crumbs a{display:inline-block;padding:5px 2px;text-decoration:none}
.crumbs a:hover{text-decoration:underline}

.phead{padding:28px 0 20px;border-bottom:2px solid var(--ink);margin-bottom:4px}
.phead h1{font-size:2.1rem;font-weight:800;letter-spacing:-.03em}
.phead-sub{margin:8px 0 0;color:var(--text-2);font-size:.95rem}

.block{margin:40px 0}
.block-head{display:flex;align-items:baseline;gap:14px;padding-bottom:10px;
  border-bottom:2px solid var(--ink);margin-bottom:2px}
.block-head h2{font-size:1.05rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em}
.block-head .cuenta{color:var(--text-2);font-size:.8rem;font-variant-numeric:tabular-nums}
.more{margin-left:auto;font-size:.78rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;color:var(--signal-ink);text-decoration:none;white-space:nowrap;
  padding:6px 0;position:relative}
/* El subrayado se dibuja de izquierda a derecha en vez de aparecer de golpe. Es
   la única animación de la portada y sigue siendo una regla de 1 px: el gesto es
   el mismo del sistema, nada más que se mueve. Va como pseudo-elemento y no como
   text-decoration porque esa propiedad no se anima. */
.more::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left center;
  transition:transform .18s ease}
.more:hover::after,.more:focus-visible::after{transform:scaleX(1)}

.empty{color:var(--text-2);font-size:.92rem;padding:22px 0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
/* Una acción dentro de un texto: es un <button> porque no navega a ningún lado,
   pero se lee como el enlace de cuerpo que el usuario espera. */
.linkish{font:inherit;color:inherit;background:none;border:0;padding:2px 0;
  min-height:24px;cursor:pointer;text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:.18em;
  text-decoration-color:var(--rule-2)}
.linkish:hover{text-decoration-color:currentColor}

/* =========================================================================
   HERO — la próxima carrera.
   No es "una card más grande": es un bloque de tinta a todo el ancho, pegado
   al header, con el nombre a tamaño de portada. Es la única pieza del sitio
   que se permite ese tamaño tipográfico, y por eso funciona como jerarquía.
   ========================================================================= */
.hero{background-color:var(--ink);background-image:var(--topo);color:#fff;
  padding:34px 0 32px;border-bottom:3px solid var(--signal)}
.hero-in{display:grid;gap:22px}
/* la terracota clara y no la fuerte: en micro-mayúsculas de 11,5 px sobre tinta,
   la fuerte queda al filo y esta da 6,9:1 */
.hero .eyebrow{color:var(--signal-lite);letter-spacing:.16em;font-size:.72rem;
  margin-bottom:10px}
.hero h1,.hero h2{font-family:var(--f-display);font-size:clamp(2.3rem,8.5vw,4rem);
  font-weight:800;letter-spacing:-.035em;line-height:.97;margin:0 0 14px;color:#fff}
.hero-fecha{font-size:1rem;font-weight:500;color:var(--on-ink-hi);margin:0 0 4px}
.hero-lugar{font-size:.92rem;color:var(--on-ink-lo);margin:0}
/* las distancias son el dato deportivo del hero: numerales grandes, sin cápsulas */
.hero-dists{font-family:var(--f-display);font-size:1.5rem;font-weight:700;
  letter-spacing:-.01em;color:#fff;margin:18px 0 0;display:flex;flex-wrap:wrap;
  gap:6px 18px;font-variant-numeric:tabular-nums}
.hero-dists span{position:relative}
.hero-dists span+span::before{content:"";position:absolute;left:-10px;top:.28em;
  bottom:.28em;width:1px;background:rgba(255,255,255,.28)}
.hero .hero-cta{margin-top:24px}
.hero-nota{margin:18px 0 0;font-size:.8rem;color:var(--on-ink-lo)}
.hero-nota a{color:var(--on-ink)}
/* Modificador de la portada: cuando la nota es el ESTADO DE LA INSCRIPCIÓN, deja
   de ser una nota al pie. «Agotada» es justo el dato que evita abrir la
   plataforma de venta para nada, y en el gris más tenue del sistema se perdía.
   Habla el mismo vocabulario que el estado de la lista (.ev-estado): versalita
   chica, peso 600, sin caja. No entra ningún color nuevo — la señal es solo para
   «abierta», que es la única de las tres que se puede accionar; las otras dos
   informan y por eso van en el neutro alto. (En El Cruce .hero-nota sigue siendo
   una línea de metadata en prosa y no lleva este modificador.) */
.hero-nota.estado{font-size:.75rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;color:var(--on-ink-hi)}
.hero-nota.estado.abierta{color:var(--signal-lite)}

/* =========================================================================
   PORTADA — identidad y próxima carrera.

   El problema que resuelve este bloque: con el hero anterior la portada se leía
   como la web oficial de la carrera de turno. Tres causas, y ninguna era el
   tamaño (achicarlo no habría arreglado nada):

     1. el <h1> de la página ERA el nombre de la carrera;
     2. la barra del sitio y el hero son los dos `--ink`, así que pegados se
        leían como una sola masa negra: la marca parecía el header del evento;
     3. la volanta decía un dato de la carrera («ESTE DOMINGO»), no qué era ese
        bloque.

   La franja de identidad va sobre papel entre las dos zonas oscuras y hace de
   costura. Es la cabecera de un diario: siempre igual arriba, y abajo la nota
   principal enorme que cambia todos los días.
   ========================================================================= */
.portada-id{padding:26px 0 22px;border-bottom:1px solid var(--rule)}
.portada-id h1{font-family:var(--f-display);font-size:clamp(1.35rem,4.4vw,1.75rem);
  font-weight:700;letter-spacing:-.025em;line-height:1.1;margin:0}
.portada-id p{margin:6px 0 0;color:var(--text-2);font-size:.92rem;
  line-height:1.5;max-width:52ch}

/* Modificador de la portada. `.hero` lo comparte El Cruce, que sigue igual. */
.hero-agenda .hero-rotulo{display:flex;flex-wrap:wrap;align-items:baseline;
  gap:6px 10px;margin:0 0 10px;font-size:.72rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.16em}
/* la sección es contexto y va en blanco; el naranja queda para lo inminente,
   que es el único uso de señal que corresponde acá */
.hero-agenda .hero-seccion{color:#fff}
.hero-agenda .hero-seccion::after{content:"·";margin-left:10px;color:var(--on-ink-sep)}
.hero-agenda .hero-cuando{color:var(--signal-lite)}
/* El nombre sigue siendo el mayor cuerpo del sitio: el protagonismo no se toca.
   El tope baja de 4 a 3.4rem para que un nombre de tres palabras no se coma la
   pantalla en la mano — «Trail Valizas Cabo Polonio» es la próxima de verdad. */
.hero-agenda h2{font-size:clamp(2rem,7.4vw,3.4rem)}

/* -------------------------------------------------------------------------
   LAS CIFRAS — la franja de tinta que parte la portada al medio.

   El problema que resuelve NO es de detalle. Después del hero la portada era la
   misma unidad cuatro veces (versalita + regla de 2 px + lista) sobre ~1500 px
   de papel sin cortar: eso es lo que se leía como boletín. Ajustar tipografía y
   hover adentro de esa unidad no se notaba, porque el que cansa es el patrón.

   Va en tinta plana y SIN las curvas de nivel: el `--topo` es del hero y de
   ningún otro lado. Si esta franja lo repitiera, la marca dejaría de tener un
   único lugar donde aparece.

   En mano son tres FILAS —numeral a la izquierda, rótulo a la derecha—, que es
   el mismo gesto de la fila de carrera. Recién a 720 px pasan a tres columnas:
   apiladas como columnas angostas, "3.145" se partía en dos líneas.
   ------------------------------------------------------------------------- */
.cifras{background:var(--ink);color:#fff;padding:30px 0;margin:44px 0}
.cifras-t{font-size:.72rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.16em;color:var(--signal-lite);margin:0 0 18px}
.cifra{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 18px;
  align-items:baseline;margin:0;padding:13px 0;
  border-bottom:1px solid var(--on-ink-sep)}
.cifra:last-child{border-bottom:0;padding-bottom:0}
.cifra b{font-family:var(--f-display);font-size:2.5rem;font-weight:800;
  letter-spacing:-.04em;line-height:.9;color:#fff;font-variant-numeric:tabular-nums}
.cifra span{font-size:.78rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;color:var(--on-ink-lo);line-height:1.35}
@media (min-width:720px){
  .cifras{padding:38px 0;margin:56px 0}
  .cifras-in{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
  /* en columnas el numeral vuelve arriba y el rótulo debajo: la regla que los
     separaba en mano acá la hace la propia columna */
  .cifra{display:block;padding:0;border-bottom:0}
  .cifra b{display:block;font-size:clamp(2.8rem,4.6vw,3.6rem)}
  .cifra span{display:block;margin-top:12px}
}


/* =========================================================================
   LISTA EDITORIAL DE CARRERAS
   Es EL patrón del sitio: reemplaza la grilla de tarjetas en home, calendario,
   organizador y resultados. Columnas: numeral de fecha · contenido · estado.
   ========================================================================= */
.agenda{margin:0;padding:0;list-style:none}
.mes{font-family:var(--f-display);font-size:.85rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;color:var(--text-2);
  padding:26px 0 8px;border-bottom:1px solid var(--rule-2);margin:0}
.mes:first-child{padding-top:8px}

.ev{position:relative;display:grid;grid-template-columns:58px minmax(0,1fr);
  gap:2px 16px;padding:16px 0;border-bottom:1px solid var(--rule);align-items:start}
/* Los filtros del calendario y de resultados ocultan filas con el atributo
   [hidden], y `display:grid` le gana al `display:none` del navegador. Sin esta
   línea el contador decía "1 carrera" y las 17 seguían en pantalla: en el índice
   de resultados el filtro no descartaba nada, y en el calendario solo funcionaba
   de casualidad, porque se ocultaba el mes entero. Mismo caso que .rtable tr y
   .modal, que ya lo reponían cada uno por su lado. */
.ev[hidden]{display:none}
.ev:hover{background:linear-gradient(90deg,var(--signal-wash),transparent 70%)}
/* toda la fila es tocable; el enlace real es invisible y cubre la fila.
   .hit hace lo mismo en cualquier bloque con position:relative (avisos,
   campeonatos, resultados del buscador): un solo objetivo grande en vez de
   obligar a apuntarle al título. */
.ev-hit,.hit{position:absolute;inset:0;z-index:1}
.ev-hit:focus-visible,.hit:focus-visible{outline:2px solid var(--signal);
  outline-offset:-2px}
.ev-fecha{grid-row:span 2;text-align:left;padding-top:2px}
.ev-d{display:block;font-family:var(--f-display);font-size:1.85rem;font-weight:700;
  line-height:.9;letter-spacing:-.04em;color:var(--ink)}
.ev-dow{display:block;font-size:.73rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.11em;color:var(--text-2);margin-top:5px}
.ev-cuerpo{min-width:0}
.ev-n{font-family:var(--f-display);font-size:1.22rem;font-weight:700;
  letter-spacing:-.022em;line-height:1.2;margin:0 0 3px;color:var(--ink)}
.ev-n .yr{color:var(--text-3);font-weight:600}
.ev-meta{margin:0;font-size:.85rem;color:var(--text-2);line-height:1.4}
.ev-meta .org{color:var(--text-2)}
.ev-meta .sep{color:var(--rule-2);padding:0 5px}
/* distancias como TEXTO: eran nueve píldoras por pantalla */
.ev-dists{margin:6px 0 0;font-size:.85rem;font-weight:600;color:var(--text);
  letter-spacing:.01em;font-variant-numeric:tabular-nums}
.ev-dists .sep{color:var(--rule-2);padding:0 4px;font-weight:400}
.ev-dists.pend{font-weight:400;color:var(--text-3);font-style:italic}
.ev-estado{grid-column:2;justify-self:start;margin-top:8px;font-size:.72rem;
  font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--text-2)}
.ev-estado.pronto{color:var(--signal-ink)}
/* "Es hoy" es el único estado especial del sitio y se lleva la mostaza, que es
   el único trabajo que la paleta le da. Antes era blanco sobre terracota: 3,8:1
   a 11,5 px. Con tinta encima da 8:1, y de paso la terracota queda reservada a
   la acción y a la sección activa, que es lo que la hace reconocible. */
.ev-estado.hoy{background:var(--accent);color:var(--ink);padding:3px 9px}
.ev-estado.res{color:var(--live)}
/* "Resultados pendientes" no es una llamada a la acción: informa y se aparta */
.ev-estado.pend{color:var(--text-3);font-weight:500}
.ev.past .ev-d,.ev.past .ev-n{color:var(--text-2)}
/* enlaces reales dentro de la fila (las distancias con resultados): tienen que
   quedar por encima del área tocable general */
.ev a:not(.ev-hit){position:relative;z-index:2}

/* enlace de distancia con resultados, en el índice de resultados */
.dlink-res{text-decoration:none;font-weight:600;border-bottom:1px solid var(--rule-2);
  padding-bottom:1px}
.dlink-res:hover{border-bottom-color:var(--signal);color:var(--signal-ink)}
.dlink-res .n{color:var(--text-3);font-weight:500;font-size:.78rem}

/* =========================================================================
   FILTROS — controles rectangulares, sin cápsulas.
   ========================================================================= */
.filtros,.rfilt{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:18px 0 6px}
.fbtn{font-family:var(--f-text);font-size:.82rem;font-weight:600;padding:9px 15px;
  min-height:38px;border:1px solid var(--rule-2);background:var(--surface);
  color:var(--text-2);cursor:pointer;border-radius:var(--r-ctl);letter-spacing:.02em}
.fbtn:hover{border-color:var(--ink);color:var(--text)}
.fbtn.on{background:var(--ink);border-color:var(--ink);color:#fff}
/* segmento: un solo bloque, divisiones internas */
.fseg{display:flex;border:1px solid var(--rule-2);border-radius:var(--r-ctl);
  overflow:hidden;background:var(--surface)}
.fseg .fbtn{border:0;border-radius:0;border-right:1px solid var(--rule-2)}
.fseg .fbtn:last-child{border-right:0}
.rfilt select,.rfilt input:not([type=checkbox]),.filtros select{font-family:var(--f-text);font-size:.85rem;
  padding:9px 12px;min-height:38px;border:1px solid var(--rule-2);
  border-radius:var(--r-ctl);background:var(--surface);color:var(--text)}
.rfilt input:focus,.rfilt select:focus{outline:2px solid var(--signal);outline-offset:-1px}
.fcount{color:var(--text-2);font-size:.8rem;font-variant-numeric:tabular-nums}

/* =========================================================================
   FICHA DE CARRERA
   ========================================================================= */
.rhead{padding:26px 0 22px;border-bottom:2px solid var(--ink)}
.state{display:inline-block;font-size:.72rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.13em;margin-bottom:12px;color:var(--text-2)}
.state.next{color:var(--signal-ink)}
.state.hoy{background:var(--accent);color:var(--ink);padding:4px 10px;letter-spacing:.1em}
.state.past{color:var(--text-2)}
.rhead h1{font-size:clamp(2rem,6.5vw,3.1rem);font-weight:800;letter-spacing:-.035em;
  line-height:1.02;margin:0 0 12px}
.rhead h1 .yr{color:var(--text-3);font-weight:600}
.rhead-date{margin:0 0 10px;font-size:1.02rem;font-weight:500;color:var(--text)}
/* metadata en columnas etiquetadas: reemplaza la fila de emoji */
.rmeta{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:14px 24px;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--rule)}
.rmeta dt{font-size:.73rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;color:var(--text-2);margin-bottom:3px}
.rmeta dd{margin:0;font-size:.94rem;font-weight:500;line-height:1.35}
.rdesc{margin:26px 0;font-size:1.02rem;line-height:1.65;color:var(--text);
  max-width:var(--w-prose)}

/* DISTANCIAS. Una fila por distancia: el nombre a la izquierda, y a la derecha
   solo los datos que EXISTEN. Nada de columnas fijas: el caso común es saber el
   nombre y poco más, y una tabla con seis columnas de guiones no informa, estorba. */
.dists{list-style:none;margin:0;padding:0}
.dist{display:grid;grid-template-columns:minmax(0,1fr);gap:4px 24px;
  padding:16px 0;border-bottom:1px solid var(--rule)}
.dist-n{font-family:var(--f-display);font-size:1.4rem;font-weight:700;
  letter-spacing:-.02em;margin:0;font-variant-numeric:tabular-nums}
.dist-cuerpo{min-width:0}
.dist-datos{margin:0;font-size:.94rem;font-weight:500;color:var(--text);
  font-variant-numeric:tabular-nums}
.dist-datos .sep{color:var(--rule-2);padding:0 7px;font-weight:400}
.dist-acts{margin:10px 0 0;display:flex;flex-wrap:wrap;gap:8px}

/* RECORRIDO: perfil + mapa + abastecimientos. Ocupa el ancho entero de la fila,
   debajo del nombre y los datos de esa distancia. */
.recorrido{grid-column:1/-1;margin:14px 0 2px}
.perfil-grande{display:block;width:100%;height:auto;
  background:var(--surface);border:1px solid var(--rule)}
/* el mismo perfil en dos tamanos: ver el comentario en carrera.html */
.perfil-grande.solo-mano{display:none}
@media (max-width:719px){
  .perfil-grande.solo-ancho{display:none}
  .perfil-grande.solo-mano{display:block}
}
.recorrido .chartbox{margin:0;position:relative}
.recorrido .chartbox figcaption{margin-top:6px;font-size:.73rem;color:var(--text-2)}
.recorrido .band{cursor:crosshair;outline:none}
.recorrido .band:focus-visible{fill:var(--signal-veil)}
.recorrido .cross[hidden]{display:none}

/* el mapa necesita alto explícito: Leaflet no lo deduce solo */
/* `isolation:isolate` no es cosmetico: Leaflet le pone z-index propios a sus
   capas y controles (400 los paneles, 800 los botones, 1000 las esquinas) y la
   barra del sitio esta en 40. Sin un contexto de apilado que los encierre, esos
   numeros compiten en la raiz y el mapa se dibuja ENCIMA del header al
   scrollear -- y tambien taparia la barra inferior (50) y el CTA fijo (45) en
   mobile. Con esto los z-index de Leaflet quedan puertas adentro del mapa. */
.mapa{height:340px;margin-top:14px;border:1px solid var(--rule);background:var(--ink-2);
  isolation:isolate}
.mapa .leaflet-container{font-family:var(--f-text)}
/* los controles de Leaflet vienen con radio y sombra propios: se alinean al sitio */
.mapa .leaflet-bar,.mapa .leaflet-control-layers{border-radius:var(--r-ctl);
  border:1px solid var(--rule-2);box-shadow:none}
.mapa .leaflet-control-layers-list{font-size:.82rem}

/* abastecimientos: se listan aunque no haya GPX ni mapa */
.pas{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px}
.pas li{display:flex;align-items:baseline;gap:8px;font-size:.88rem}
.pas b{font-weight:600}
.pa-km{font-variant-numeric:tabular-nums;color:var(--text)}
.pa-tipo,.pa-corte{font-size:.73rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:var(--olive)}
/* el corte horario no es una categoría: es lo que te deja afuera */
.pa-corte{color:var(--signal-ink)}

@media (max-width:719px){
  .mapa{height:300px}
}

.dlink{display:inline-block;font-size:.8rem;font-weight:600;text-decoration:none;
  padding:9px 14px;min-height:38px;border:1px solid var(--rule-2);
  border-radius:var(--r-ctl);white-space:nowrap}
.dlink:hover{border-color:var(--ink)}
.dlink.primary{background:var(--signal-ink);border-color:var(--signal-ink);color:#fff}
.dlink.primary:hover{background:var(--signal-deep);border-color:var(--signal-deep)}

/* "A tener en cuenta": el texto libre de la edición. Se lee como una nota de
   redacción, no como una alerta: son datos útiles (cortes, elementos
   obligatorios, restricciones), no advertencias. */
.notas{margin:26px 0;padding-left:16px;border-left:2px solid var(--rule-2);
  max-width:var(--w-prose)}
.notas ul{margin:0;padding:0;list-style:none}
.notas li{position:relative;padding:6px 0 6px 16px;font-size:.94rem;line-height:1.5;
  color:var(--text)}
.notas li::before{content:"";position:absolute;left:0;top:.95em;width:5px;height:5px;
  background:var(--signal)}

/* Flyer oficial. Los flyers vienen verticales, cuadrados o apaisados según el
   organizador: se respeta su proporción y se le pone un techo de alto para que uno
   vertical no se coma tres pantallas en el celular. */
/* LO QUE PUBLICO EL ORGANIZADOR. Sin titulo y sin marco: son documentos, no una
   galeria. Al ancho de la prosa y no a sangre -- los flyers son verticales y a
   1120 px uno solo se come media pantalla y empuja los datos fuera de la vista.
   Varias apiladas y no un carrusel: sin JavaScript un carrusel no existe, y
   apilar deja ver de un scroll que hay mas de una. */
.imgs-org{max-width:var(--w-prose)}
.imgs-org img{display:block;width:100%;height:auto;max-height:80vh;object-fit:contain;
  border:1px solid var(--rule);background:var(--surface)}
.imgs-org img + img{margin-top:10px}
.imgs-cred{margin:8px 0 0;font-size:.8rem;color:var(--text-2);line-height:1.6}
.imgs-cred a{color:var(--text)}

.eds{margin:0;padding:0;list-style:none}
.eds li{padding:12px 0;border-bottom:1px solid var(--rule);font-size:.95rem}

/* banda de campeonato en la ficha: bloque tinta, no tarjeta */
.camp-banda{position:relative;background:var(--ink-2);color:#fff;padding:22px 24px;
  border-radius:var(--r-box);display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;
  transition:background-color .18s ease}
/* La banda entera es clicable (.hit la cubre) y no lo decía: el puntero cambiaba
   y nada más. Se oscurece un escalón, que es la misma respuesta que da la fila de
   la lista. No se levanta ni proyecta sombra: no es una tarjeta. */
.camp-banda:hover{background:var(--ink)}
.camp-banda .eyebrow{color:var(--signal-lite);margin-bottom:4px}
.camp-banda h3{font-size:1.25rem;font-weight:700;color:#fff;margin:0}
.camp-banda p{margin:2px 0 0;font-size:.88rem;color:var(--on-ink-lo)}
.camp-banda .more{color:#fff;position:relative;z-index:2}
/* Dos bandas seguidas se pegaban y se leian como UN bloque negro con una linea
   adentro, no como dos campeonatos distintos con dos destinos distintos. */
.camp-banda + .camp-banda{margin-top:10px}

/* -------------------------------------------------------------------------
   CAMPEONATO EN LA PORTADA — la banda y, colgando de ella, quién va ganando.

   La banda sola decía que el campeonato existe. Debajo van los punteros, que es
   el mismo componente de la página del campeonato: la portada muestra MENOS
   gente, no una tabla distinta.

   El radio de abajo se apaga y el margen entre banda y punteros es cero: las
   dos piezas tienen que leerse como una sola cosa colgando de su título. Si
   quedaran separadas, la tabla parecería de otro campeonato — que es
   exactamente el error que hay que evitar habiendo dos en la misma portada.
   ------------------------------------------------------------------------- */
.camp-home + .camp-home{margin-top:38px}
.camp-home .camp-banda{border-radius:var(--r-box) var(--r-box) 0 0}
.camp-home .punteros{margin-top:0}
/* la columna arranca pegada a la banda: su borde superior ya es la separación */
.camp-home .puntero{border-top-width:3px}

/* =========================================================================
   RESULTADOS — la identidad de esta sección son los datos, no la decoración.
   ========================================================================= */
.dtabs{display:flex;flex-wrap:wrap;gap:0;margin:20px 0 0;
  border-bottom:1px solid var(--rule-2)}
.dtab{padding:11px 18px;font-size:.88rem;font-weight:600;text-decoration:none;
  color:var(--text-2);border-bottom:3px solid transparent;margin-bottom:-1px;
  font-variant-numeric:tabular-nums}
.dtab:hover{color:var(--text)}
.dtab.on{color:var(--ink);border-bottom-color:var(--signal);font-weight:700}

/* podio: tres filas de datos, sin medallas emoji ni tarjetas.
   Son DOS —caballeros y damas—, porque toda clasificación de carrera los separa
   y un podio único por tiempo dejaba a la ganadora fuera de la única sección
   destacada de la página. En pantalla ancha van uno al lado del otro. */
.podios{display:grid;gap:0 32px;margin:24px 0 4px}
.podios .podio{margin:0}
.podios .podio+.podio{margin-top:20px}
.podio>.eyebrow{margin:0 0 8px}
.podio{margin:24px 0 4px;border-top:2px solid var(--ink);border-bottom:1px solid var(--rule-2)}
.podio>.eyebrow{padding-top:10px}
.pod{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:baseline;
  gap:14px;padding:11px 0;border-bottom:1px solid var(--rule)}
.pod:last-child{border-bottom:0}
.pod-p{font-family:var(--f-display);font-size:1.35rem;font-weight:800;
  color:var(--text-3);line-height:1;font-variant-numeric:tabular-nums}
.pod1 .pod-p{color:var(--signal)}
.pod-n{font-weight:600;font-size:1.02rem;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.pod-t{font-family:var(--f-display);font-size:1.15rem;font-weight:700;
  font-variant-numeric:tabular-nums}

/* OJO CON EL STICKY DEL ENCABEZADO — SE PAGÓ DOS VECES.
   1) Con `overflow-x:auto` acá, `.tablewrap` era contenedor de scroll (el valor
      calculado de overflow-y pasa a `auto`), así que el `position:sticky` del
      <th> se posicionaba respecto de ESA caja. Y esa caja nunca scrollea en
      vertical: el encabezado no se pegaba nunca. En una tabla de 423 finishers
      —27.000 px de alto— a partir de la quinta fila ya no se sabía cuál columna
      era el tiempo y cuál los puntos.
      El overflow no hacía falta: ninguna tabla del sitio desborda a lo ancho
      (en mobile cada fila pasa a bloque). Sin él, el contenedor de scroll vuelve
      a ser la ventana y el sticky funciona.
   2) Por eso `top` tiene que descontar la barra del sitio, que también es sticky.
      Con `top:0` el encabezado quedaría escondido detrás de ella. */
.tablewrap{border-top:2px solid var(--ink);margin-top:6px}
.rtable{border-collapse:collapse;width:100%;font-size:.9rem}
.rtable th{color:var(--text-2);font-size:.73rem;
  text-transform:uppercase;letter-spacing:.12em;font-weight:700;padding:10px 12px;
  text-align:left;white-space:nowrap;position:sticky;top:52px;z-index:2;
  background:var(--paper);border-bottom:1px solid var(--rule-2)}
@media (min-width:900px){ .rtable th{top:60px} }
.rtable td{padding:10px 12px;border-bottom:1px solid var(--rule);white-space:nowrap}
.rtable th.num,.rtable td.num{text-align:right;font-variant-numeric:tabular-nums}
.rtable .pos{width:56px;text-align:right;font-family:var(--f-display);font-weight:700;
  font-size:1rem;color:var(--text-2);padding-left:0}
.rtable tbody tr:nth-child(-n+3) .pos{color:var(--ink)}
.rtable .name{white-space:normal}
.rtable .rn{display:block;font-weight:600}
.rtable .rsub{display:block;font-size:.72rem;color:var(--text-2);margin-top:1px}
.rtable td.t{font-weight:600;font-size:.95rem}
.rtable .c-pts{font-weight:700}
.rtable .c-dorsal{color:var(--text-3)}
.rtable tbody tr:hover{background:var(--signal-wash)}
/* sin cebra: la regla ya separa, y el rayado gris es ruido en tablas largas */

/* procedencia: nota al pie, no tarjeta. Es contenido de credibilidad y tiene
   que leerse como una nota de redacción. */
.fuente{margin:44px 0 40px;padding:16px 0 0;border-top:1px solid var(--rule-2);
  max-width:var(--w-prose)}
.fuente h2{font-size:.73rem;font-weight:600;color:var(--text-2);
  text-transform:uppercase;letter-spacing:.13em;font-family:var(--f-text);
  margin:0 0 8px}
.fuente p{margin:0;font-size:.85rem;color:var(--text-2);line-height:1.65;
  overflow-wrap:anywhere}
.fuente a{color:var(--text)}

/* =========================================================================
   CAMPEONATOS
   ========================================================================= */
.camp-lista{list-style:none;margin:0;padding:0}
.camp-item{position:relative;padding:26px 0;border-bottom:1px solid var(--rule)}
.camp-item h2,.camp-item h3{font-size:1.5rem;font-weight:700;letter-spacing:-.025em;
  margin:0 0 4px}
.camp-item .lema{color:var(--text-2);font-size:.92rem;margin:0 0 14px}

/* punteros por distancia: tres columnas de datos */
.punteros{display:grid;gap:20px;grid-template-columns:minmax(0,1fr);margin:6px 0 0}
.puntero{border-top:2px solid var(--ink);padding-top:12px;position:relative}
/* `.puntero-t` es el mismo título de grupo con otra etiqueta: en la portada el
   h3 ya se lo lleva el nombre del campeonato, así que el grupo baja a h4 y el
   estilo se comparte en vez de duplicarse. */
.puntero h3,.puntero-t{font-family:var(--f-display);font-size:1.15rem;
  font-weight:700;margin:0 0 2px}
.puntero .km{font-size:.75rem;color:var(--text-2);font-weight:500;
  font-family:var(--f-text);letter-spacing:0}
.top3{list-style:none;margin:10px 0 12px;padding:0}
.top3 li{display:flex;align-items:baseline;gap:10px;
  font-size:.88rem;padding:6px 0;border-bottom:1px solid var(--rule)}
/* El puesto lo escribe la plantilla, no un contador: los empatados comparten
   puesto y un contador de CSS los volvía a numerar 1, 2, 3. */
.t3-r{color:var(--text-3);font-size:.75rem;
  font-weight:700;min-width:12px;font-variant-numeric:tabular-nums}
.t3-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t3-p{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums}

/* El nombre del campeonato es el enlace principal: se ve como el título que ya era,
   no como un link de cuerpo. */
.camp-item h2 a{text-decoration:none;color:inherit}
.camp-item h2 a:hover{text-decoration:underline;text-decoration-thickness:2px;
  text-underline-offset:.12em}

/* Los accesos a las tablas, arriba y a tamaño de dedo: es a lo que se viene. */
.camp-clasif{margin:12px 0 4px}
.camp-tablas{display:flex;flex-wrap:wrap;gap:8px;margin:0}
/* todas las distancias valen lo mismo: ninguna se destaca sobre las otras */
.camp-tablas .btn{padding:10px 18px;font-weight:700}

/* Las fechas pasan a segundo plano: informan, pero no son a lo que se entra. */
.camp-mas{margin:14px 0 0;border-top:1px solid var(--rule)}
.camp-mas>summary{cursor:pointer;padding:12px 0 10px;min-height:44px;display:flex;
  align-items:center;gap:10px;font-size:.85rem;font-weight:600;color:var(--text-2);
  list-style:none}
.camp-mas>summary::-webkit-details-marker{display:none}
.camp-mas>summary::before{content:"+";font-family:var(--f-display);font-weight:700;
  color:var(--signal-ink)}
.camp-mas[open]>summary::before{content:"−"}
.camp-mas>summary:hover{color:var(--text)}

.camp-fechas{list-style:none;margin:6px 0 0;padding:0}
.camp-fechas li{position:relative;display:flex;align-items:baseline;gap:10px;
  flex-wrap:wrap;font-size:.92rem;padding:12px 0;border-bottom:1px solid var(--rule)}
.camp-fechas a{text-decoration:none;font-weight:600}
.camp-fechas a:hover{text-decoration:underline}
.camp-fechas .cf-meta{color:var(--text-2);font-size:.82rem}
.camp-fechas .cf-est{margin-left:auto;font-size:.73rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;color:var(--text-2)}
.camp-fechas .cf-est.res{color:var(--live)}
.camp-fechas .cf-est.pronto{color:var(--signal-ink)}

/* enlaces a las páginas de texto del campeonato */
.camp-paginas{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 0;padding:0;list-style:none}
.camp-paginas a{display:inline-block;text-decoration:none;font-size:.85rem;
  font-weight:600;padding:10px 16px;min-height:40px;border:1px solid var(--rule-2);
  border-radius:var(--r-ctl)}
.camp-paginas a:hover{border-color:var(--ink)}

/* =========================================================================
   CLASIFICACIÓN
   Es la mejor pantalla del sitio y se conserva su estructura: solo cambia el
   vestido. Las clases de las que depende campeonato.js no se tocan.
   ========================================================================= */
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}
.banner{border-left:3px solid var(--signal);background:var(--signal-wash);
  padding:14px 18px;margin:20px 0;font-size:.88rem;line-height:1.55;
  border-radius:0 var(--r-box) var(--r-box) 0}
.banner-note{border-left:3px solid var(--rule-2);padding:11px 16px;margin:0 0 16px;
  font-size:.85rem;color:var(--text-2)}

/* AVANCE DEL CAMPEONATO. Reemplaza al parrafo que encabezaba la clasificacion.
   Cuadrados y no una barra redondeada: cuenta fechas, no porcentaje de carga.
   El dato va en texto ademas de en los segmentos — la barra sola no se lee. */
.avance{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:16px 0 14px;font-size:.88rem;color:var(--text)}
.avance-barra{display:inline-flex;gap:3px}
.avance-barra span{width:16px;height:8px;border-radius:1px;background:var(--rule-2)}
.avance-barra span.ok{background:var(--ink)}
.footnote{margin:20px 0 34px;line-height:1.65;font-size:.8rem;color:var(--text-2);
  max-width:var(--w-prose)}
.showall{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  white-space:nowrap;padding:8px 2px;font-size:.82rem}
/* 18px y no 24: a 13px de texto, una casilla de 24 pesaba mas que su propia
   etiqueta. El objetivo tactil no baja -- lo que se toca es el <label>, que con
   su padding mide 34px de alto. */
.showall input{margin:0;cursor:pointer;width:18px;height:18px;
  accent-color:var(--signal-ink);flex:0 0 auto}

.ctabla .pts{color:var(--text-2);font-variant-numeric:tabular-nums;font-weight:500}
.ctabla .pts .t{display:block;font-size:.73rem;color:var(--text-3);font-weight:400}
.ctabla .pts.empty{color:var(--rule-2)}
.ctabla .c-pts{font-family:var(--f-display);font-size:1rem;font-weight:700}
.badge{display:inline-block;font-size:.73rem;font-weight:600;color:var(--live)}
.badge.q{color:var(--live)}
/* El nombre abre la ficha del corredor: es la interacción más valiosa de la
   tabla y estaba sin ninguna marca, con el subrayado solo en :hover. En un
   teléfono no hay hover, así que 1.303 fichas quedaban invisibles. Lleva el
   mismo subrayado tenue que cualquier enlace de cuerpo del sitio, y se afirma
   al pasar por encima. */
.ctabla .rn-link{color:var(--ink);display:inline-block;
  padding:2px 0;min-height:24px;font-weight:600;
  text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.18em;text-decoration-color:var(--rule-2)}
.ctabla .rn-link:hover{text-decoration-color:currentColor}

/* =========================================================================
   TEXTO CORRIDO (reglamento, premios, avisos, "qué es esto")
   ========================================================================= */
.prose{margin:8px auto 48px;max-width:var(--w-prose)}
.prose h1{font-size:2.1rem;font-weight:800;letter-spacing:-.03em;margin:20px 0 18px;
  padding-bottom:14px;border-bottom:2px solid var(--ink)}
.prose h3{font-size:1.25rem;font-weight:700;margin:32px 0 10px}
.prose h4{font-size:1rem;font-weight:700;margin:0 0 8px}
.prose p{margin:0 0 14px;line-height:1.7}
.prose ul,.prose ol{margin:0 0 14px;padding-left:22px;line-height:1.7}
.prose li{margin:6px 0}
.prose .formula{border-left:3px solid var(--signal);padding:14px 18px;
  font-weight:600;font-size:1rem;font-variant-numeric:tabular-nums;
  background:var(--signal-wash);margin:0 0 14px}
.prose .ej{border-left:3px solid var(--rule-2);padding:12px 18px;font-size:.9rem;
  color:var(--text-2);margin:0 0 14px}
.prose .fechas-list li{font-weight:500}
.premio-card{border-top:2px solid var(--ink);padding:16px 0 4px;margin:20px 0}
.premio-card ol{margin:0;padding-left:22px}
.volver{margin-top:32px;font-size:.85rem;font-weight:600}

/* =========================================================================
   AVISOS — se leen distinto del resto a propósito: no son una carrera más del
   calendario, son algo que pasó.
   ========================================================================= */
.aviso-meta{display:flex;align-items:baseline;gap:12px;margin:0 0 8px;flex-wrap:wrap}
.aviso-etq{font-size:.73rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.13em;color:var(--alerta)}
.aviso-bajada{font-size:1.08rem;color:var(--text);font-weight:500;margin:0 0 18px;
  line-height:1.5;max-width:var(--w-prose)}
.avisos{list-style:none;margin:0;padding:0}
.aviso-item{position:relative;padding:22px 0 22px 18px;border-bottom:1px solid var(--rule);
  border-left:3px solid var(--alerta)}
.aviso-item h2{font-size:1.3rem;font-weight:700;margin:0 0 4px}
.aviso-item p{margin:0 0 10px;color:var(--text-2);font-size:.92rem}
/* banda del aviso en la ficha de la carrera afectada */
.aviso-banda{margin:22px 0;padding:16px 20px;border-left:3px solid var(--alerta);
  background:var(--alerta-wash);font-size:.94rem;line-height:1.5}
.aviso-banda b{display:block;margin:2px 0 2px}
.aviso-banda a{font-weight:600;white-space:nowrap}

/* =========================================================================
   BUSCADOR
   ========================================================================= */
.bform{margin:20px 0 8px}
.bform input{width:100%;font-family:var(--f-text);font-size:1.15rem;font-weight:500;
  padding:16px 18px;border:1px solid var(--rule-2);border-radius:var(--r-ctl);
  background:var(--surface)}
.bform input:focus{outline:2px solid var(--signal);outline-offset:-1px}
.bres{list-style:none;margin:16px 0 0;padding:0}
.bhit{position:relative;padding:16px 0;border-bottom:1px solid var(--rule)}
/* qué clase de cosa es cada resultado (carrera, corredor, campeonato): es una
   categoría, y las categorías van en oliva */
.bhit .nkind,.nkind{display:block;font-size:.73rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;color:var(--olive);margin-bottom:3px}
.bhit h2{font-size:1.12rem;font-weight:700;margin:0 0 2px}
.bhit p,.bnb{margin:0;font-size:.85rem;color:var(--text-2)}
.bhit a{text-decoration:none}
.bhit a::after{content:"";position:absolute;inset:0}

/* =========================================================================
   404
   ========================================================================= */
.e404{padding:64px 0 72px;max-width:var(--w-prose)}
.e404-n{margin:0;font-family:var(--f-display);font-size:5rem;font-weight:800;
  color:var(--signal);line-height:1;letter-spacing:-.04em}
.e404 h1{margin:10px 0 10px;font-size:1.9rem;font-weight:800;letter-spacing:-.03em}
.e404-cta{margin-top:26px}
.e404-mas{margin-top:26px;font-size:.9rem;color:var(--text-2)}

/* =========================================================================
   ALTIMETRÍA
   ========================================================================= */
.alti{margin:12px 0}
.alti .perfil{display:block;width:100%;height:90px}
.alti figcaption{margin-top:4px;font-size:.72rem;color:var(--text-3)}

/* =========================================================================
   PIE
   ========================================================================= */
.site-footer{margin-top:56px;padding:40px 0 44px;background:var(--ink);color:var(--on-ink-lo);
  border-top:3px solid var(--signal)}
.site-footer p{margin:0 0 14px}
.site-footer a{color:var(--on-ink-hi);text-decoration:underline;
  text-decoration-color:rgba(255,255,255,.3);text-underline-offset:.2em}
.site-footer a:hover{color:#fff;text-decoration-color:#fff}
.foot-grid{display:grid;gap:26px}
.disc{font-size:.86rem;line-height:1.65;max-width:62ch}
.disc b{color:var(--on-ink-hi);font-weight:600}
.disc-tag{display:block;font-size:.73rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;color:var(--signal-lite);margin-bottom:8px}
.fnav{font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.fnav a{display:inline-block;padding:6px 0;text-decoration:none}
.fnav a:hover{text-decoration:underline}
.fnav .sep{color:var(--on-ink-sep);padding:0 8px}
.fcontact a{display:inline-block;padding:12px 20px;min-height:44px;
  border:1px solid rgba(255,255,255,.28);color:#fff;text-decoration:none;
  font-size:.85rem;font-weight:600;border-radius:var(--r-ctl)}
.fcontact a:hover{border-color:var(--signal-on-ink);background:var(--signal-veil)}
.fgen{color:var(--on-ink-dim);font-size:.75rem;font-variant-numeric:tabular-nums}

/* cinta de entorno de prueba (solo fuera de producción) */
.entorno-prueba{background:#3b2f8f;color:#fff;text-align:center;padding:8px 16px;
  font-size:.78rem;line-height:1.4}
.entorno-prueba b{font-weight:700}

/* =========================================================================
   BARRA INFERIOR (solo mobile) — la navegación principal en la zona del pulgar.
   Un header sticky de dos filas se come 100 px de alto en todas las páginas y
   además deja la navegación arriba, que es donde el pulgar no llega. Las cuatro
   secciones del portal viven acá abajo, siempre a un toque.
   ========================================================================= */
.tabbar{display:none}
@media (max-width:899px){
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;
    background:var(--ink);border-top:1px solid rgba(255,255,255,.14);
    padding-bottom:env(safe-area-inset-bottom)}
  .tabbar a{flex:1 1 0;display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:3px;min-height:60px;padding:8px 2px 9px;
    color:var(--on-ink-lo);text-decoration:none;font-size:.75rem;font-weight:600;
    letter-spacing:.01em;border-top:3px solid transparent;margin-top:-1px}
  .tabbar a.on{color:#fff;border-top-color:var(--signal-on-ink)}
  .tabbar svg{display:block}
  .tabbar a.on svg{color:var(--signal-on-ink)}
}

/* =========================================================================
   CTA ANCLADO (solo mobile) — la inscripción de la ficha de carrera.
   Es a lo que viene la gente desde Instagram; no puede depender de scrollear
   hasta encontrarla. Se apoya arriba de la barra de pestañas.
   ========================================================================= */
.cta-fija{display:none}
@media (max-width:899px){
  .cta-fija{display:flex;position:fixed;left:0;right:0;
    bottom:calc(60px + env(safe-area-inset-bottom));z-index:45;gap:10px;
    padding:10px var(--pad);background:var(--paper-veil);
    border-top:1px solid var(--rule-2)}
  .cta-fija .btn-h{flex:1 1 0;margin:0}
  /* el CTA anclado duplica el de la cabecera: en la cabecera se oculta para no
     mostrar el mismo botón dos veces en la misma pantalla */
  body.con-cta-fija .racts .btn-h.primary{display:none}
  body.con-cta-fija{padding-bottom:calc(124px + env(safe-area-inset-bottom))}
}

/* =========================================================================
   MOBILE — la plataforma principal.
   No es "el desktop encogido": cambian los patrones, no los tamaños.

   Tres cambios estructurales, no cosméticos:
   a) La navegación se va ABAJO, a la zona del pulgar. El header deja de robar
      dos filas de alto fijo y queda una sola línea de 52 px.
   b) Las TABLAS dejan de ser tablas: cada fila pasa a ser un bloque de dos
      líneas con el dato fuerte a la derecha. Se conserva el marcado <table>
      (semántica y SEO intactos); lo que cambia es la presentación.
   c) La acción de la ficha de carrera (inscribirme) se ancla al pie: es a lo
      que viene la gente y no puede depender de scrollear.
   ========================================================================= */
/* La NAVEGACIÓN cambia de patrón antes que el layout: a 768 px (tablet vertical,
   teléfono apaisado) la barra de arriba ya no entra y el dispositivo sigue siendo
   táctil. Por eso este corte es 900 y el de composición 720: son dos decisiones
   distintas y no tienen por qué pasar en el mismo ancho. */
@media (max-width:899px){
  /* deja lugar a la barra inferior fija (y al gesto del iPhone) */
  body{padding-bottom:calc(60px + env(safe-area-inset-bottom))}

  /* header de UNA línea: marca + lupa. Todo lo demás vive en la barra inferior. */
  .topbar-in{min-height:52px;gap:12px}
  .brand{padding:4px 0}
  .brand-txt{font-size:1rem}
  .topnav{display:none}          /* la reemplaza .tabbar */
  .brand-buscar{margin-left:auto;display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;color:var(--on-ink)}
  .brand-buscar:hover{color:#fff}
}

@media (max-width:719px){
  :root{--pad:16px}

  /* el hero manda igual en la mano: el nombre ocupa el ancho y las acciones
     van a lo ancho, pero el bloque no llega a media pantalla de alto */
  .hero{padding:26px 0 26px}
  .hero .hero-cta .btn-h{flex:1 1 100%}
  .hero-dists{font-size:1.25rem}

  /* fila de carrera: el NOMBRE primero. Antes el numeral de fecha (1.25rem/800)
     competía con el nombre (1rem/700) y el ojo iba al número. */
  .ev{grid-template-columns:46px minmax(0,1fr);gap:2px 12px;padding:14px 0}
  .ev-d{font-size:1.5rem}
  .ev-n{font-size:1.08rem}
  .ev-meta{font-size:.8rem}
  .ev-dists{font-size:.82rem}

  .phead h1{font-size:1.75rem}
  .phead{padding:20px 0 16px}
  .block{margin:30px 0}
  /* el titulo de bloque y su enlace no entran en una linea a 360 px: en vez de
     que el titulo se parta en dos, el enlace baja */
  .block-head{flex-wrap:wrap;gap:2px 12px}
  .block-head h2{font-size:.95rem}
  .more{margin-left:auto;font-size:.72rem}

  .rmeta{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px}
  .racts .btn-h{flex:1 1 100%}

  /* filtros a ancho completo: en la mano un select de 120px es intocable.
     PERO la casilla no: `input` a secas la estiraba a los 340 px de la fila, y
     eso era el "check gigante" que se veia en la clasificacion -- no que 24 px
     fuera mucho. Al ocupar el renglon entero, la etiqueta se desbordaba y el
     contador se le dibujaba encima. */
  .rfilt select,.rfilt input:not([type=checkbox]),.filtros select{width:100%}
  .fseg{width:100%}
  .fseg .fbtn{flex:1 1 0;padding:10px 4px}
  /* Cada uno en su renglon. `.showall` es nowrap y no encogia, asi que se
     desbordaba y el contador se le dibujaba ENCIMA. Se veia en la
     clasificacion, donde conviven los dos en la misma fila. */
  .fcount{width:100%}
  .rfilt .showall{width:100%;white-space:normal}

  /* --- TABLAS: cambio de patrón, no de tamaño ---------------------------
     Una tabla de 5 columnas en 360 px es ilegible aunque "entre". Cada fila
     pasa a ser un bloque:  [pos]  Nombre           Tiempo
                                   categoría        puntos
     Sigue siendo un <table> en el HTML: la semántica y lo que indexa Google
     no cambian. El encabezado se oculta porque cada dato ya se explica solo. */
  .tablewrap{overflow-x:visible;border-top-width:2px}
  .rtable thead{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap}
  .rtable tr{display:grid;grid-template-columns:30px minmax(0,1fr) auto;
    align-items:baseline;gap:0 12px;padding:12px 0;
    border-bottom:1px solid var(--rule)}
  /* los filtros de resultados y clasificación ocultan filas con [hidden]:
     display:grid le ganaría al atributo, así que hay que reponerlo */
  .rtable tr[hidden]{display:none}
  .rtable td{display:block;border:0;padding:0;white-space:normal}
  .rtable .pos{grid-column:1;grid-row:1;text-align:left;font-size:1.05rem;
    color:var(--text-2);padding:0}
  .rtable .name{grid-column:2;grid-row:1}
  .rtable .name{min-width:0}
  .rtable .rn{font-size:.98rem}
  .rtable .c-dorsal{display:none}          /* el dorsal ya está en el subtítulo */
  .rtable td.t{grid-column:3;grid-row:1;text-align:right;font-family:var(--f-display);
    font-size:1.05rem;font-weight:700;font-variant-numeric:tabular-nums}
  .rtable .c-pts{grid-column:3;grid-row:2;text-align:right;font-size:.8rem;
    color:var(--signal-ink);font-weight:700}
  .rtable .c-pts::after{content:" pts";font-weight:500;color:var(--text-2);
    font-size:.72rem}
  .rtable tbody tr:hover{background:transparent}

  .dtabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .dtabs::-webkit-scrollbar{display:none}
  .dtab{padding:12px 15px;font-size:.86rem;white-space:nowrap}

  /* La clasificación en mano: se ocultan las columnas por fecha y queda
     Pos · Corredor · Total. El detalle por fecha está en la ficha, a un toque. */
  .ctabla .col-race,.ctabla .col-fechas{display:none}
  .ctabla .c-pts{grid-column:3;grid-row:1;font-family:var(--f-display);
    font-size:1.15rem;color:var(--ink);align-self:center}
  .ctabla .c-pts::after{content:" pts";font-size:.73rem;font-weight:500;
    color:var(--text-2)}
  .ctabla tr{grid-template-columns:30px minmax(0,1fr) auto;padding:11px 0}

  .prose h1,.e404 h1{font-size:1.6rem}
  .e404-n{font-size:3.6rem}
  .camp-banda{padding:18px 20px}
}

/* =========================================================================
   PANTALLAS GRANDES — recién acá aparecen las columnas.
   ========================================================================= */
@media (min-width:720px){
  .hero{padding:52px 0 48px}
  .hero-in{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
    gap:48px;align-items:end}
  /* la distancia a la izquierda y sus datos a la derecha, como la agenda */
  .dist{grid-template-columns:88px minmax(0,1fr) auto;align-items:baseline}
  .dist-acts{margin:0;justify-self:end}
  .ev{grid-template-columns:74px minmax(0,1fr) auto;align-items:baseline;
    padding:18px 0}
  .ev-estado{grid-column:3;grid-row:1;margin-top:0;justify-self:end;text-align:right}
  .ev-d{font-size:2.1rem}
  .ev-n{font-size:1.32rem}
  .punteros{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:26px}
  .foot-grid{grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:48px}
}

@media (min-width:1000px){
  .phead h1{font-size:2.6rem}
}

/* =========================================================================
   FICHA DEL CORREDOR — se ve en DOS lugares y con los mismos estilos:
     · como página propia  (/campeonatos/<c>/corredor/<dist>/<slug>/)
     · como panel sobre la clasificación, que va a buscar esa misma página
       y le inyecta el <article id="ficha-contenido"> al modal.
   El bloque entero cuelga de las clases del article y no del contenedor, que
   es lo que evita que las dos versiones se despeguen.
   ========================================================================= */
body.modal-open{overflow:hidden}
.modal{position:fixed;inset:0;z-index:60;display:flex;justify-content:flex-end}
.modal[hidden]{display:none}      /* si no, display:flex le gana al atributo hidden */
.modal-backdrop{position:absolute;inset:0;background:var(--scrim);
  animation:fadeIn .16s ease}
.modal-panel{position:relative;width:min(580px,100%);height:100%;overflow-y:auto;
  background:var(--surface);box-shadow:-12px 0 40px rgba(0,0,0,.2);
  padding:24px 26px 40px;animation:slideIn .2s cubic-bezier(.2,.7,.3,1)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideIn{from{transform:translateX(26px);opacity:.4}to{transform:none;opacity:1}}
.modal-x{position:absolute;top:14px;right:14px;z-index:2;width:36px;height:36px;
  border:1px solid var(--rule-2);background:var(--surface);border-radius:var(--r-ctl);
  cursor:pointer;font-size:.95rem;color:var(--text-2);line-height:1}
.modal-x:hover{border-color:var(--ink);color:var(--ink)}

/* Como página, la ficha necesita su propia caja; dentro del panel no, porque el
   panel YA es la caja. */
.wrap > #ficha-contenido{padding:8px 0 24px;margin:0;max-width:760px}

.fhead{padding-right:44px;margin-bottom:20px;border-bottom:2px solid var(--ink);
  padding-bottom:14px}
.fhead h2{font-size:1.6rem;font-weight:800;letter-spacing:-.03em;margin:0 0 8px;
  color:var(--ink)}
.wrap > #ficha-contenido .fhead{padding-right:0}
.fchips{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.78rem;color:var(--text-2)}
.fchip{font-weight:500}
.fchip+.fchip::before{content:"·";margin-right:14px;color:var(--rule-2)}

/* resumen: cuatro datos en fila, separados por regla, sin cajas */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-bottom:26px;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
/* Dos aires distintos, y ninguno es simetría:

   ARRIBA más que abajo, porque el rótulo en micro-mayúsculas es visualmente
   liviano y con el mismo padding quedaba pegado a la regla superior.

   IZQUIERDA en todas menos la primera: el separador es un `border-right`, así
   que la columna que sigue arrancaba pegada a la línea de la anterior y se leía
   como si el texto se hubiera desbordado de la caja de al lado. La primera no
   lleva, para que su rótulo alinee con el margen de la página. */
.tile{padding:18px 12px 14px 15px;border-right:1px solid var(--rule)}
.tile:first-child{padding-left:0}
.tile:last-child{border-right:0}
/* EL DATO, la unidad tipográfica del sitio: etiqueta en micro-mayúsculas de 700
   y valor en Archivo con numerales tabulares. La misma pareja se repite en la
   metadata de la carrera (.rmeta), en la ficha del corredor (.tile) y en las
   calculadoras (.g-herr-out): que se lea igual en los tres lados es lo que hace
   que los números se vean como el idioma del sitio y no como texto suelto. */
.tile .tl{display:block;font-size:.73rem;font-weight:700;color:var(--text-2);
  text-transform:uppercase;letter-spacing:.12em}
.tile .tv{display:block;font-family:var(--f-display);font-size:1.5rem;font-weight:700;
  letter-spacing:-.02em;color:var(--ink);line-height:1.2;margin-top:3px;
  font-variant-numeric:tabular-nums}
.tile .ts{display:block;font-size:.72rem;color:var(--text-2);line-height:1.35}

.fsec{margin:0 0 28px}
/* h2 cuando la ficha es página (el nombre es el h1) y h3 en el comparador, que
   lo sigue armando el navegador: mismo aspecto, el nivel lo manda la semántica */
.fsec h2,.fsec h3{margin:0 0 12px;font-size:.73rem;font-weight:700;color:var(--text-2);
  text-transform:uppercase;letter-spacing:.12em;font-family:var(--f-text);
  padding-bottom:8px;border-bottom:1px solid var(--rule-2)}

/* gráficos: el generador ya deja el SVG dibujado; si hay JavaScript, ficha.js lo
   vuelve a pintar midiendo el ancho real y le agrega el tooltip. */
.chartbox{position:relative}
.chartbox svg{display:block;width:100%;height:auto}
.legend{display:flex;flex-wrap:wrap;gap:4px 16px;margin:-2px 0 8px}
.lg{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;color:var(--text-2)}
.lgd{width:10px;height:10px;flex:0 0 auto}
/* el atributo hidden no aplica a elementos SVG: hay que ocultarlo por CSS */
.chartbox .cross[hidden]{display:none}
.chartbox .band{cursor:crosshair;outline:none}
.chartbox .band:focus-visible{fill:var(--signal-veil)}
.tip{position:absolute;top:0;pointer-events:none;background:var(--ink);color:#fff;
  border-radius:var(--r-ctl);padding:7px 10px;font-size:.75rem;white-space:nowrap;z-index:3}
.tip b{display:block;color:#fff;font-size:.78rem;margin-bottom:2px}
.tl-row{display:flex;align-items:center;gap:6px}

/* tabla de datos de la ficha (el equivalente accesible de los gráficos) */
.ftable-wrap{overflow-x:auto;border-top:1px solid var(--rule-2)}
.ftable{border-collapse:collapse;width:100%;font-size:.8rem}
.ftable th{color:var(--text-2);font-size:.73rem;text-transform:uppercase;
  letter-spacing:.12em;font-weight:700;padding:8px 10px 8px 0;text-align:left;
  white-space:nowrap;border-bottom:1px solid var(--rule)}
.ftable td{padding:9px 10px 9px 0;border-bottom:1px solid var(--rule);white-space:nowrap;
  color:var(--text);vertical-align:top}
.ftable td.num,.ftable th.num{text-align:right;padding-right:0;
  font-variant-numeric:tabular-nums}
.ftable td.b{font-weight:700;font-family:var(--f-display);font-size:.95rem}
.ftable td small{display:block;font-size:.72rem;color:var(--text-2);font-weight:400}
.ftable tr.off td,.ftable td.off{color:var(--text-3);font-style:italic}
.ftable tr.tot td{border-top:2px solid var(--ink);font-weight:700}

/* rivales directos */
.riv{position:relative;display:grid;grid-template-columns:32px 1fr auto 56px;
  align-items:baseline;gap:10px;padding:9px 0;border-bottom:1px solid var(--rule);
  font-size:.85rem}
.riv-p{color:var(--text-3);font-size:.75rem;font-variant-numeric:tabular-nums}
.riv-n{font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
/* Dos cosas distintas: la caja del enlace llega a los 24 px que pide la norma
   (una línea de texto mide 20), y el ::after extiende el área tocable a la FILA
   entera. */
a.riv-n{text-decoration:none;display:block;min-height:24px;line-height:24px}
/* La fecha enlaza a los resultados de esa carrera. Como enlace suelto medía 15 px
   de alto y no llegaba al mínimo táctil (WCAG 2.5.8): en la mano hay que poder
   tocarla sin apuntar. */
.ftable td a{display:inline-block;min-height:24px;line-height:24px}
a.riv-n::after{content:"";position:absolute;inset:0}
a.riv-n:hover{text-decoration:underline}
a.riv-n:focus-visible::after{outline:2px solid var(--signal);outline-offset:-2px}
.riv-t{font-weight:600;font-variant-numeric:tabular-nums;color:var(--text)}
.riv-d{text-align:right;font-size:.78rem;font-variant-numeric:tabular-nums;
  color:var(--text-2)}
.riv.me{background:var(--signal-wash)}
.riv.me .riv-n,.riv.me .riv-t{color:var(--signal-ink);font-weight:700}
.riv.up .riv-d{color:var(--alerta)}
.riv.down .riv-d{color:var(--live)}

/* próximas fechas: inscripto o no */
.rd-item{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:10px 0;border-bottom:1px solid var(--rule)}
.rd-item.empty{opacity:.5;border-top:0}
.rd-race{font-weight:600;font-size:.9rem;color:var(--text)}
.rd-race small{display:block;font-weight:400;font-size:.72rem;color:var(--text-2);
  margin-top:1px}
.rd-vals{text-align:right;font-size:.9rem;color:var(--text-2);white-space:nowrap;
  font-variant-numeric:tabular-nums}

/* acciones de la ficha */
.factions{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.factions .btn{font-size:.82rem;padding:10px 16px;min-height:40px}

/* comparador */
.cmp-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:20px}
.cchip{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;font-weight:600;
  color:var(--text);border:1px solid var(--rule-2);border-radius:var(--r-ctl);
  padding:5px 6px 5px 11px}
.cchip .cdot{width:9px;height:9px;background:var(--c);flex:0 0 auto}
.cchip .cx{border:0;background:none;cursor:pointer;color:var(--text-2);font-size:.85rem;
  line-height:1;padding:4px 6px;min-width:24px;min-height:24px}
.cchip .cx:hover{color:var(--ink)}
.cmp-add input{font-family:var(--f-text);font-size:.82rem;padding:9px 12px;
  min-height:38px;border:1px dashed var(--rule-2);border-radius:var(--r-ctl);
  background:transparent;min-width:200px}
.cmp-add input:focus{outline:2px solid var(--signal);outline-offset:-1px;
  border-style:solid}

/* nombre clickeable -> ficha */
.rn-link{cursor:pointer}

@media (max-width:719px){
  /* En mano la ficha entra como hoja desde abajo: más natural que un panel lateral */
  .modal{align-items:flex-end;justify-content:center}
  .modal-panel{width:100%;height:92%;border-radius:var(--r-box) var(--r-box) 0 0;
    padding:20px 16px 32px;animation:sheetUp .22s cubic-bezier(.2,.7,.3,1)}
  @keyframes sheetUp{from{transform:translateY(30px);opacity:.5}to{transform:none;opacity:1}}
  .wrap > #ficha-contenido{padding:8px 0 20px}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .tile:nth-child(2){border-right:0}
  .tile:nth-child(-n+2){border-bottom:1px solid var(--rule)}
  .fhead h2{font-size:1.3rem}
  .riv{grid-template-columns:28px 1fr auto 48px;gap:8px;font-size:.82rem}
  .factions .btn{flex:1 1 100%}
  .cmp-add input{width:100%}
}

/* =========================================================================
   GUÍA TRAIL

   Misma gramática que el resto del sitio: regla antes que caja, el naranja como
   señal y no como decoración, microtipografía en mayúsculas para etiquetar.
   No hay estética nueva para esta sección — se lee como el mismo medio.

   Tres piezas propias, y las tres existen porque cambian la comprensión:
   · la RESPUESTA RÁPIDA, en tinta, que es el contrato de la sección (30 segundos)
   · el ERROR TÍPICO, con la regla de aviso a la izquierda
   · el ¿SABÍAS QUE…?, con la regla de señal, que es un aparte y no cuerpo
   ========================================================================= */
.g-head{padding-bottom:14px}
.g-head h1{font-size:1.95rem}

/* La respuesta rápida. Es el mismo negro del hero y del header a propósito:
   quien entra desde Google tiene que ver la respuesta antes que nada. */
.g-rapida{background:var(--ink);color:#fff;padding:22px var(--pad);margin:0 0 26px;
  border-radius:var(--r-box)}
.g-rapida .eyebrow{color:var(--on-ink-lo)}
.g-rapida p{margin:0;font-size:1.06rem;line-height:1.6}
.g-rapida b{font-weight:700}

.g-prose{margin-left:0}
.g-prose h2{font-size:1.15rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;margin:34px 0 12px;padding-bottom:8px;
  border-bottom:2px solid var(--ink)}

/* LO IMPORTANTE — el corazón de cada página. Lista con regla, no tarjeta. */
.g-clave{margin:0 0 22px;padding:16px 0 4px;border-top:1px solid var(--rule-2)}
.g-clave ul{margin:0;padding-left:20px}
.g-clave li{margin:8px 0;line-height:1.6}

/* ERROR TÍPICO */
.g-error{margin:22px 0;padding:14px 0 14px 16px;border-left:3px solid var(--alerta)}
.g-error .eyebrow{color:var(--alerta)}
.g-error-q{margin:0 0 8px;font-weight:600}
.g-error-a{margin:0;font-size:.94rem;color:var(--text-2)}
.g-error-a b{color:var(--text)}

/* ¿SABÍAS QUE…? */
.g-sabias{margin:22px 0;padding:14px 0 14px 16px;border-left:3px solid var(--signal)}
.g-sabias .eyebrow{color:var(--signal-ink)}
.g-sabias p{margin:0}

/* DATO OFICIAL y EXPERIENCIA DE CORREDORES. Son la distinción que sostiene la
   sección de El Cruce: se ven distintos porque NO son lo mismo. */
.g-oficial{margin:22px 0;padding:16px 18px;background:var(--surface);
  border:1px solid var(--rule-2);border-left:3px solid var(--ink);
  border-radius:var(--r-box)}
.g-oficial p{margin:0 0 6px}
.g-exp{margin:22px 0;padding:14px 0 14px 16px;border-left:3px dashed var(--rule-2)}
.g-exp p{margin:0 0 6px}
.g-fuente-p{margin:0;font-size:.78rem;color:var(--text-2)}

/* ¿QUERÉS PROFUNDIZAR? — <details>, funciona sin JavaScript */
.g-mas,.g-faq details{margin:18px 0;border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule)}
.g-faq details+details{border-top:0}
.g-mas summary,.g-faq summary{cursor:pointer;padding:13px 0;font-weight:600;
  font-size:.95rem;list-style:none;display:flex;align-items:center;gap:10px;
  min-height:44px}
.g-mas summary::-webkit-details-marker,
.g-faq summary::-webkit-details-marker{display:none}
.g-mas summary::before,.g-faq summary::before{content:"+";font-family:var(--f-display);
  font-weight:700;color:var(--signal-ink);width:14px;flex:0 0 14px}
.g-mas[open] summary::before,.g-faq details[open] summary::before{content:"−"}
.g-mas-in{padding:0 0 12px 24px}
.g-mas-in p:last-child,.g-mas-in ul:last-child{margin-bottom:0}

/* TABLAS de la guía. En mano dejan de ser tabla y pasan a bloques etiquetados,
   igual que las de resultados: se conserva el <table> del HTML. */
.g-tabla{margin:24px 0}
.gtable{border-collapse:collapse;width:100%;font-size:.9rem}
.gtable th,.gtable td{padding:10px 12px;border-bottom:1px solid var(--rule);
  text-align:left;vertical-align:top}
.gtable thead th{color:var(--text-2);font-size:.73rem;text-transform:uppercase;
  letter-spacing:.08em;border-bottom:1px solid var(--rule-2);white-space:nowrap}
.gtable tbody th{font-weight:600;width:34%}
/* un enlace suelto dentro de una celda es un objetivo táctil, no un enlace de
   párrafo: la excepción de WCAG 2.5.8 no aplica y tiene que llegar a 24 px */
.gtable a{display:inline-block;min-height:24px;padding:2px 0}
.gtable tbody tr:last-child th,.gtable tbody tr:last-child td{border-bottom:0}
.g-nota-i{display:block;font-size:.78rem;color:var(--text-2);font-weight:400}

/* CHECKLISTS */
.g-check{margin:24px 0}
.g-check-g{margin:0 0 18px;padding-top:14px;border-top:1px solid var(--rule-2)}
.g-check ul{list-style:none;margin:0;padding:0}
.g-check li{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;
  padding:9px 0;border-bottom:1px solid var(--rule);line-height:1.45}
.g-check li:last-child{border-bottom:0}
.g-check-t{flex:1 1 60%}
.g-check-n{flex:1 1 100%;font-size:.78rem;color:var(--text-2)}
.g-marca{font-size:.73rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;color:var(--text-2);white-space:nowrap}
.g-marca-obligatorio{color:var(--alerta)}
.g-marca-organizacion{color:var(--live)}
.g-marca-experiencia{color:var(--text-3)}
/* con JavaScript cada ítem se puede tildar; sin JavaScript es una lista y ya */
/* 24x24 y no 20: es el mínimo táctil de WCAG 2.5.8 AA que exige check_responsive */
.g-check input{margin:0 2px 0 0;width:24px;height:24px;flex:0 0 24px;
  accent-color:var(--signal-ink)}
.g-check li.ok .g-check-t{color:var(--text-3);text-decoration:line-through}
.g-check label.g-check-t{cursor:pointer}
.g-check>.btn{margin-top:14px}

/* VIGENCIA — lo que separa un dato oficial de la edición vigente de uno viejo */
.g-vigencia{margin:0 0 24px;padding:14px 16px;background:var(--signal-wash);
  border-left:3px solid var(--signal);font-size:.88rem;line-height:1.55;
  border-radius:0 var(--r-box) var(--r-box) 0}
.g-vigencia .eyebrow{color:var(--signal-ink)}

/* LISTAS de la guía: una pregunta por línea, con su respuesta corta debajo */
.g-lista{list-style:none;margin:0;padding:0}
.g-lista li{padding:14px 0;border-bottom:1px solid var(--rule)}
.g-lista>li>a{font-family:var(--f-display);font-weight:700;
  font-size:1.05rem;letter-spacing:-.01em;text-decoration:none;
  display:inline-block;min-height:24px}
.g-lista>li>a:hover{text-decoration:underline}
.g-lista-lg>li>a{font-size:1.18rem}
.g-lista-r{display:block;color:var(--text-2);font-size:.88rem;margin-top:3px;
  line-height:1.5}
/* LA ETIQUETA de una pieza de la guía. Es la única etiqueta con fondo del sitio,
   y lo tiene porque acá sí clasifica: dice de qué habla la pieza dentro de una
   lista de piezas heterogéneas. Fondo arena y no cápsula de color: radio 2px,
   oliva sobre papel secundario. No es un badge, es una etiqueta de revista. */
.g-etq{display:inline-block;margin-top:6px;padding:2px 7px;font-size:.73rem;
  font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  color:var(--olive);background:var(--paper-2);border-radius:var(--r-ctl)}
/* EL CONTEO de una categoría. Informa, no compite.
   Historia, para no repetirla: era un numeral de Archivo a 1.3rem alineado a la
   derecha con grid, y terminaba siendo el elemento más fuerte de la home —«24»
   gritando más que «estoy empezando»— además de señalar con un número grande
   justo a la categoría que tiene un solo contenido. Y el grid tenía el bug A-18
   (`.g-cuenta` con fila fija y columna automática: el auto-placement lo mandaba
   a la columna 1 y desarmaba la fila).
   Las dos cosas se arreglan igual: ya no hay grid ni numeral. Es texto chico
   pegado al nombre. Si algún día vuelve a alinearse a la derecha, hay que
   declarar `grid-column` y `grid-row` en LOS TRES hijos. */
.g-cuenta{margin-left:10px;font-size:.78rem;color:var(--text-3);
  white-space:nowrap;font-variant-numeric:tabular-nums}

/* =========================================================================
   LA HOME DE LA GUÍA — entrar por la situación, no por la taxonomía

   Antes convivían cuatro taxonomías con exactamente el mismo peso visual
   (situación · evento · tema · formato) y seis bloques idénticos: la página se
   leía como un índice enorme. Lo que sigue es la jerarquía nueva, y no hay
   ninguna caja nueva para conseguirla.
   ========================================================================= */

/* Qué hay adentro. Va arriba porque es la otra mitad de «qué es esto». */
.g-inventario{margin:12px 0 0;display:flex;flex-wrap:wrap;gap:4px 20px;
  font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;
  color:var(--text-3);font-variant-numeric:tabular-nums}

/* ¿POR DÓNDE EMPIEZO? — el selector por intención.
   Es lo primero que hay que resolver acá, así que es lo tipográficamente más
   fuerte de la página (1.22rem contra los 1.05 de las listas de abajo). Cuatro
   tarjetas volverían a presentar las cuatro opciones como equivalentes y
   romperían «regla antes que caja»: son cuatro líneas y una regla entre cada
   una. La flecha es naranja porque esto SÍ es la acción primaria de la página,
   que es la única licencia que el sistema le da a la señal. */
.g-caminos{margin:30px 0 42px}
.g-caminos>h2{font-size:1.05rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;margin:0 0 2px;padding-bottom:10px;
  border-bottom:2px solid var(--ink)}
.g-caminos ul{list-style:none;margin:0;padding:0}
.g-caminos li{position:relative;padding:15px 28px 15px 0;
  border-bottom:1px solid var(--rule)}
.g-caminos li>a{font-family:var(--f-display);font-weight:700;font-size:1.22rem;
  letter-spacing:-.015em;text-decoration:none;display:inline-block;min-height:24px}
.g-caminos li>a:hover{text-decoration:underline}
.g-caminos li::after{content:"→";position:absolute;right:2px;top:16px;
  color:var(--signal-ink);font-weight:600}

/* UN RECORRIDO. La lista está curada y ordenada: se lee de arriba abajo, así
   que lleva número. No es un índice alfabético, es un camino. */
.g-camino{list-style:none;margin:0 0 8px;padding:0;counter-reset:paso}
.g-camino li{counter-increment:paso;position:relative;
  padding:14px 0 14px 32px;border-bottom:1px solid var(--rule)}
.g-camino li::before{content:counter(paso);position:absolute;left:0;top:16px;
  font-family:var(--f-display);font-weight:700;font-size:.95rem;
  color:var(--text-3);font-variant-numeric:tabular-nums}
.g-camino>li>a{font-family:var(--f-display);font-weight:700;font-size:1.18rem;
  letter-spacing:-.01em;text-decoration:none;display:inline-block;min-height:24px}
.g-camino>li>a:hover{text-decoration:underline}

/* PARA CURIOSEAR — muestra, no volcado. Un error y un «¿sabías que…?» reales,
   cada uno con el enlace a la pieza de la que salieron. El índice completo de
   los 24 sigue estando, a un clic. */
.g-curiosear-baj{margin:14px 0 0;font-size:.9rem;color:var(--text-2)}
.g-muestra{display:grid;gap:0;margin:4px 0 10px}
.g-curiosear-nav{margin-top:4px;padding-top:12px;
  border-top:1px solid var(--rule)}

/* EL PIE DE NAVEGACIÓN de las páginas interiores. Tres filas —situación, tema y
   formato—, que es la misma separación que ordena la home. Existe porque una
   categoría de un solo contenido con un «volver» al pie es un callejón. */
.g-nav{margin:38px 0 8px;padding-top:16px;border-top:2px solid var(--ink)}
.g-nav>.eyebrow{display:block;margin-bottom:10px}
.g-nav-fila{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;
  gap:0 18px;font-size:.9rem}
.g-nav-et{flex:0 0 auto;min-width:10.5em;font-size:.73rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;color:var(--text-3)}
.g-nav-fila a{display:inline-block;min-height:24px;padding:4px 0;font-weight:600;
  text-decoration:none;color:var(--text)}
.g-nav-fila a:hover{text-decoration:underline}
.g-nav-todo{margin:14px 0 0;font-size:.88rem;font-weight:600}

/* La nota de cómo está escrita la guía: al pie y en una pieza chica. Antes eran
   dos párrafos con encabezado de sección, compitiendo con el contenido. */
.g-pie-nota{margin:42px 0 0;padding-top:16px;border-top:1px solid var(--rule)}
.g-pie-nota p{margin:0;font-size:.85rem;line-height:1.6;color:var(--text-2);
  max-width:76ch}

/* fichas de dato de El Cruce */
.g-datos{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:0;
  border-top:1px solid var(--rule-2)}
.g-datos li{padding:12px 0;border-bottom:1px solid var(--rule);font-size:.95rem}
.g-datos .eyebrow{margin:0 0 2px}

/* SEGUÍ EXPLORANDO al pie de cada pieza. Es una .g-lista y no una lista propia:
   los relacionados van con su respuesta corta porque un título solo no alcanza
   para decidir el clic, y la Guía tiene que leerse como una red. */
.g-rel{margin-bottom:20px}

.g-fuentes{list-style:none;margin:0 0 14px;padding:0}
.g-fuentes li{padding:9px 0;border-bottom:1px solid var(--rule);font-size:.88rem;
  line-height:1.5}
.g-fuentes .muted{display:block}
.g-evid{margin:0 0 12px}
.g-evid .eyebrow{display:inline-block;margin:0 8px 0 0}
.g-evid-solida{color:var(--live)}
.g-evid-limitada{color:var(--signal-ink)}
.g-evid-experiencia{color:var(--text-3)}

/* micro-contenidos en su índice transversal */
.g-grid{display:grid;gap:0;margin:0 0 28px}
.g-grid>*{border-top:1px solid var(--rule)}

/* la banda de El Cruce en el hub */
.g-cruce-banda{background:var(--ink);color:#fff;padding:24px var(--pad);
  display:grid;gap:18px;border-radius:var(--r-box)}
.g-cruce-banda h3{font-size:1.5rem;margin:0 0 6px}
.g-cruce-banda p{margin:0;color:var(--on-ink)}
.g-cruce-datos p{margin:0 0 4px}
.g-cruce-datos b{color:#fff;font-family:var(--f-display);font-size:1.15rem}
.g-cruce-datos .btn-h{margin-top:12px}

/* =========================================================================
   CALCULADORAS
   Sin JavaScript se ve la TABLA de referencia, que trae los mismos números que
   la calculadora. Con JavaScript se muestra el formulario y la tabla queda como
   respaldo plegado. No hay una versión "pobre": hay dos formas del mismo dato.
   ========================================================================= */
/* la calculadora es una herramienta embutida en la lectura: fondo arena, que es
   lo que hace --paper-2, en vez de una tarjeta blanca flotando sobre el papel */
.g-herr{margin:0 0 32px;padding:20px 18px;background:var(--paper-2);
  border:1px solid var(--rule-2);border-radius:var(--r-box)}
.g-herr-head h2{font-size:1.15rem;margin:0 0 4px;border:0;padding:0;
  text-transform:none;letter-spacing:-.01em}
.g-herr-head .eyebrow{color:var(--signal-ink)}
.g-herr-head p{font-size:.9rem;margin:0 0 14px}
.g-herr-aviso{font-size:.9rem;padding:12px 14px;background:var(--signal-wash);
  border-left:3px solid var(--signal);margin:0 0 16px}
.g-herr-form{display:grid;gap:14px;margin:0 0 18px}
.g-herr-campo{display:grid;gap:5px}
.g-herr-campo label{font-size:.73rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;color:var(--text-2)}
.g-herr-campo select,.g-herr-campo input{font-family:var(--f-text);font-size:.95rem;
  padding:11px 12px;min-height:44px;border:1px solid var(--rule-2);
  border-radius:var(--r-ctl);background:var(--paper);color:var(--text);width:100%}
.g-herr-campo input{font-variant-numeric:tabular-nums}
.g-herr-out{border-top:2px solid var(--ink);padding-top:14px}
.g-herr-out dl{margin:0;display:grid;gap:14px}
.g-herr-dato{min-width:0}
.g-herr-out dt{font-size:.73rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;color:var(--text-2)}
.g-herr-out dd{margin:2px 0 0;font-family:var(--f-display);font-weight:700;
  font-size:1.5rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.g-herr-out dd small{display:block;font-family:var(--f-text);font-weight:400;
  font-size:.85rem;color:var(--text-2);letter-spacing:0}
.g-herr-tabla{margin-top:6px}
.g-herr-tabla>summary{cursor:pointer;font-size:.85rem;font-weight:600;
  padding:10px 0;min-height:44px;display:flex;align-items:center;gap:10px;
  list-style:none}
.g-herr-tabla>summary::-webkit-details-marker{display:none}
.g-herr-tabla>summary::before{content:"+";font-family:var(--f-display);
  font-weight:700;color:var(--signal-ink)}
.g-herr-tabla[open]>summary::before{content:"−"}
.g-herr-pie{margin:14px 0 0;font-size:.8rem;color:var(--text-2)}

@media (min-width:720px){
  .podios{grid-template-columns:repeat(2,minmax(0,1fr))}
  .podios .podio+.podio{margin-top:0}
  .g-cruce-banda{grid-template-columns:1.4fr 1fr;align-items:center}
  .g-herr-form{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-herr-out{grid-column:1/-1}
  .g-herr-out dl{grid-template-columns:repeat(3,minmax(0,1fr))}
  .g-datos{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
  /* el selector de intención en dos columnas: las cuatro entradas entran de una
     sola mirada, que es de lo que se trata */
  .g-caminos ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:36px}
  .g-muestra{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
}

@media (max-width:719px){
  .g-head h1{font-size:1.55rem}
  .g-rapida{margin-left:calc(var(--pad)*-1);margin-right:calc(var(--pad)*-1);
    border-radius:0;padding:20px var(--pad)}
  .g-rapida p{font-size:1rem}
  .g-prose h2{font-size:1.02rem}

  /* la tabla deja de ser tabla: cada fila es un bloque y cada celda lleva su
     etiqueta adelante. Igual que en resultados, cambia el patrón y no el tamaño. */
  .gtable thead{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap}
  .gtable tbody th,.gtable td{display:block;width:auto;border:0;padding:0}
  .gtable tbody tr{display:block;padding:12px 0;border-bottom:1px solid var(--rule)}
  .gtable tbody th{font-size:1rem;margin-bottom:5px}
  .gtable td{font-size:.88rem;padding:2px 0}
  .gtable td[data-l]::before{content:attr(data-l) ": ";color:var(--text-2);
    font-size:.78rem;font-weight:600}

  .g-herr{margin-left:calc(var(--pad)*-1);margin-right:calc(var(--pad)*-1);
    border-left:0;border-right:0;border-radius:0;padding:20px var(--pad)}
  .g-cruce-banda{margin-left:calc(var(--pad)*-1);margin-right:calc(var(--pad)*-1);
    border-radius:0}
  .g-check li{gap:4px 8px}
  /* el pie de navegación: la etiqueta de la fila deja de reservar ancho y pasa
     a su propia línea, o los tres o cuatro enlaces quedan en una columna flaca */
  .g-nav-fila{gap:0 14px;margin-bottom:6px}
  .g-nav-et{flex:1 1 100%;min-width:0;margin-bottom:-2px}
}

/* =========================================================================
   VOLVER ARRIBA — botón flotante.

   Existe por las tablas de resultados: 423 finishers son 27.000 px de alto y
   volver al principio con el dedo es medio minuto de scroll. Va en todas las
   páginas igual, porque la clasificación, el calendario y las piezas largas de
   la guía tienen el mismo problema en menor escala.

   Aparece recién cuando hay algo que desandar (dos pantallas) y NO se dibuja si
   no hay JavaScript: un control que no hace nada es peor que no tenerlo.

   Lo delicado acá es dónde se apoya. En mobile abajo ya viven la barra de
   secciones (60 px) y, en la ficha de carrera, la inscripción anclada encima de
   ella. El botón se sube por arriba de las dos en vez de taparlas: la
   inscripción es a lo que viene la gente y no se negocia.
   ========================================================================= */
.subir{position:fixed;right:16px;z-index:44;
  bottom:calc(72px + env(safe-area-inset-bottom));
  width:46px;height:46px;padding:0;display:flex;align-items:center;
  justify-content:center;cursor:pointer;
  background:var(--ink);color:#fff;
  border:1px solid var(--on-ink-sep);border-radius:var(--r-box);
  box-shadow:0 2px 12px rgba(0,0,0,.18);
  opacity:0;transform:translateY(6px);
  transition:opacity .18s ease,transform .18s ease,background-color .15s ease}
.subir[hidden]{display:none}      /* display:flex le gana al atributo hidden */
.subir.on{opacity:1;transform:none}
.subir:hover{background:var(--ink-2);border-color:var(--signal)}
.subir:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.subir svg{display:block}
/* con la inscripción anclada, el botón salta por encima de las dos barras */
body.con-cta-fija .subir{bottom:calc(136px + env(safe-area-inset-bottom))}
@media (min-width:900px){
  /* arriba de 900 no hay barra inferior ni CTA anclado: vuelve a la esquina */
  .subir,body.con-cta-fija .subir{right:24px;bottom:24px}
  .subir{width:48px;height:48px}
}

/* =========================================================================
   CORREDORES — el perfil global y su indice.

   Casi todo se reusa: el perfil arma su cabecera con .fhead, sus numeros con
   .tiles y su tabla con .ftable, que ya existian para la ficha de campeonato.
   Lo unico propio es lo que antes no existia: el indice por inicial, la fila de
   la lista y la estrella de favorito.
   ========================================================================= */

/* El nombre en la tabla de resultados ahora ENTRA a algun lado. Mismo trato que
   en la tabla de clasificacion: sigue siendo el nombre, con un subrayado fino
   que dice que se puede tocar. No es un enlace de cuerpo ni lleva color de
   marca: en una tabla de 800 filas, 800 enlaces de color son una mancha. */
.rtable a.rn{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;
  text-decoration-color:var(--rule-2);text-underline-offset:.18em}
.rtable a.rn:hover{text-decoration-color:currentColor}

.perfil{max-width:760px}
.perfil .fhead{position:relative;padding-right:52px}
.perfil .fhead h1{font-size:1.6rem;font-weight:800;letter-spacing:-.03em;
  margin:0 0 8px;color:var(--ink)}

/* buscador del indice: arranca deshabilitado y lo habilita el JS */
.cbuscador{display:flex;align-items:center;gap:12px;margin:18px 0 6px}
.cbuscador input{flex:1;min-width:0;font:inherit;font-size:.95rem;padding:12px 14px;
  min-height:46px;border:1px solid var(--rule-2);border-radius:var(--r-ctl);
  background:var(--surface);color:var(--text)}
.cbuscador input:disabled{background:var(--paper-2);color:var(--text-3)}
.cbuscador input:focus-visible{outline:2px solid var(--signal);outline-offset:1px}
.cb-count{flex:0 0 auto;color:var(--text-2);font-size:.8rem;white-space:nowrap;
  font-variant-numeric:tabular-nums}

/* el abecedario. Es la navegacion real de la seccion cuando no hay JavaScript,
   asi que cada letra tiene tamano de dedo y no de adorno. */
.letras{display:flex;flex-wrap:wrap;gap:4px;margin:18px 0 6px;
  padding-bottom:14px;border-bottom:2px solid var(--ink)}
.letra{display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;min-height:38px;padding:0 8px;font-family:var(--f-display);
  font-size:.95rem;font-weight:700;text-decoration:none;color:var(--ink);
  border:1px solid transparent;border-radius:var(--r-ctl)}
.letra:hover{border-color:var(--rule-2);background:var(--surface)}
.letra.on{background:var(--ink);color:#fff}

/* fila de la lista: nombre a la izquierda, cuantas corrio a la derecha, y la
   estrella fuera del area del enlace para que marcar no sea entrar. */
.clista{margin-top:2px}
.cfila{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto auto;
  align-items:baseline;gap:4px 14px;padding:13px 0;
  border-bottom:1px solid var(--rule)}
.cfila[hidden]{display:none}          /* display:grid le gana al atributo hidden */
.cfila:hover{background:linear-gradient(90deg,var(--signal-wash),transparent 70%)}
.cfila-n{font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.cfila-m{font-size:.8rem;color:var(--text-2);white-space:nowrap;
  font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------------ favorito
   La estrella la INYECTA el JavaScript. Sin JS no se dibuja: un control que no
   guarda nada es peor que no tenerlo (mismo criterio que la guia).

   Es de los pocos iconos del sitio, y entra por la regla de §9: reemplaza a una
   palabra, no decora. Va en SVG y no en emoji, que se dibuja distinto en cada
   telefono y mete color fuera de paleta.

   Prendida usa la senal y no el oro: el oro sobre papel da 2:1 y un icono
   necesita 3:1 para que se vea que esta activo, que es justo lo unico que este
   control tiene que comunicar. */
.fav{position:relative;z-index:2;display:inline-flex;align-items:center;
  justify-content:center;width:38px;height:38px;padding:0;cursor:pointer;
  background:none;border:1px solid transparent;border-radius:var(--r-ctl);
  color:var(--text-3);line-height:0}
.fav:hover{color:var(--ink);border-color:var(--rule-2)}
.fav:focus-visible{outline:2px solid var(--signal);outline-offset:1px}
.fav[aria-pressed="true"]{color:var(--signal)}
.fav svg{display:block;width:19px;height:19px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linejoin:round}
.fav[aria-pressed="true"] svg{fill:currentColor}
/* en el perfil la estrella va arriba a la derecha del titulo */
.perfil .fav-slot{position:absolute;right:0;top:0}

/* el filtro de favoritos que aparece en cada tabla de resultados */
.solo-favs{display:inline-flex;align-items:center;gap:8px;min-height:44px;
  font-size:.85rem;font-weight:600;color:var(--text-2);cursor:pointer}
.solo-favs input{width:17px;height:17px;accent-color:var(--signal)}
.solo-favs.vacio{color:var(--text-3);cursor:default}

/* Los campeonatos en el perfil del corredor. El PUESTO es el dato y va en el
   cuerpo grande de los numerales del sitio; el puntaje queda al costado con su
   unidad escrita, porque «208» a secas no se entiende: los puntos dependen de la
   fórmula de cada campeonato y no se comparan entre sí. */
.camps-perfil{list-style:none;margin:0;padding:0}
.camps-perfil li{position:relative;display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;gap:0 16px;
  padding:13px 0;border-bottom:1px solid var(--rule)}
.camps-perfil li:hover{background:linear-gradient(90deg,var(--signal-wash),transparent 70%)}
.cp-pos{font-family:var(--f-display);font-size:1.7rem;font-weight:800;
  letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums;
  min-width:2.1em}
.cp-pos i{font-style:normal;font-size:.9rem;font-weight:700}
.cp-n{font-weight:600;color:var(--ink)}
.cp-n small{display:block;font-size:.75rem;font-weight:500;color:var(--text-2);
  text-transform:uppercase;letter-spacing:.1em;margin-top:2px}
.cp-pts{font-size:.9rem;font-weight:700;color:var(--text-2);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.cp-pts i{font-style:normal;font-size:.75rem;font-weight:600}

/* -------------------------------------------------------------------------
   MAPA MAXIMIZADO. El control lo agrega recorrido.js; acá va solo el estado.

   `.mapa-grande` es el camino de respaldo, para cuando el navegador no da
   pantalla completa (iOS no la da fuera de los videos). Ocupa la ventana con
   position:fixed en vez de pedirla al sistema, y se sale con Escape o con el
   mismo botón. El z-index queda por encima de la barra inferior de secciones,
   que si no se dibuja sobre el mapa.
   ------------------------------------------------------------------------- */
/* El `!important` es el único de esta hoja y no es pereza: Leaflet escribe
   `position: relative` como estilo INLINE en el contenedor del mapa, y un estilo
   inline le gana a cualquier regla por específica que sea. Sin esto el mapa se
   quedaba en su lugar, con la altura colapsada a 2 px (todo lo demás de esta
   regla sí aplicaba, que es lo que hacía el síntoma difícil de leer).
   Se marca solo `position`: el resto no lo pisa nadie. */
.mapa.mapa-grande{position:fixed !important;inset:0;width:auto;height:auto;
  z-index:60;border-radius:0;margin:0}
/* con el mapa ocupando la ventana, el fondo no se scrollea por detrás */
body.con-mapa-grande{overflow:hidden}
/* el botón, con el mismo trato que el zoom de Leaflet, que ya está estilado */
.mapa-max a{display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;cursor:pointer}

/* En la portada los recorridos de la Guía van dentro de un .block, que ya trae
   su encabezado y su regla: el margen propio del componente sobra y rompía el
   ritmo de las otras secciones. */
.guia-home{margin:0}

/* mientras hay una busqueda en curso, la letra y las secciones de abajo se
   apartan: los resultados son lo unico que importa en ese momento */
.oculto-buscando{display:none !important}

/* el aviso de "este nombre son varias personas" no es una sugerencia amable:
   es la razon por la que la pagina no muestra lo que se esperaba */
.banner.alerta{border-left-color:var(--alerta);background:var(--alerta-wash)}

@media (min-width:720px){
  .cfila{grid-template-columns:minmax(0,1fr) auto auto;padding:14px 0}
}

/* Si el sistema pide menos movimiento, nada se anima. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
}