@charset "UTF-8";
/*!
 * crciclismo-2026 — hoja principal
 *
 * Generada a partir de design/crciclismo-2026.html, que es la especificación
 * normativa del proyecto. Si hay que cambiar una medida, se cambia primero en
 * la maqueta y después aquí — nunca al revés.
 *
 * Un solo archivo, sin framework. El orden es: tokens → firma → cabecera →
 * retícula → publicidad → tarjetas → artículo → pie → móvil → WordPress.
 */



/* ═══════════════════════════════════════════════════════════════════════
   TOKENS
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  /* El azul de los botones, adoptado como color de identidad el 2026-08-23 a
     pedido del propietario. Sustituye al #002B7F —el Pantone Reflex Blue de la
     bandera de Costa Rica— que había mandado desde el 17/08.

     Es un azul MUCHO más luminoso: el contraste de la cabecera baja de 12,7:1
     a 5,7:1. Sigue pasando AA para texto normal, pero ya no sobra margen, así
     que nada de texto blanco a menos de 16 px sobre este fondo. */
  --navy:  #2152FF;
  --blue:  #1B4EFF;
  --red:   #F80010;
  --ink:   #0B1020;
  --paper: #FFFFFF;
  --mist:  #EEF1FB;

  --navy-deep: #1535A6;   /* el mismo azul al 65 %: la franja del menú */
  --blue-lift: #4B78FF;
  --red-lift:  #FF3D2E;

  --ink-60: color-mix(in srgb, var(--ink) 60%, var(--paper));
  --ink-40: color-mix(in srgb, var(--ink) 40%, var(--paper));
  --hair:   color-mix(in srgb, var(--navy) 12%, var(--paper));

  /* Profundidad — los gradientes son de gran escala y las sombras van
     teñidas de navy, nunca gris: es lo que evita el aspecto plano sin
     caer en el brillo de botón de 2012.

     La cabecera y el pie quedan FUERA de esto a propósito: son un plano de
     `--navy` liso. La profundidad la ponen las tarjetas, las pastillas y las
     sombras.

     Las sombras y el velo del hero NO siguieron a --navy al azul nuevo: se
     quedaron en el azul profundo de antes. Una sombra tiene que ser oscura —
     teñirla de #2152FF convierte el reborde de las tarjetas en un halo celeste,
     y el velo del hero dejaría de sostener el titular blanco. Son tinte de
     profundidad, no color de marca. */
  --g-blue: linear-gradient(135deg, var(--blue) 0%, var(--blue-lift) 100%);
  --g-red:  linear-gradient(135deg, var(--red) 0%, var(--red-lift) 100%);
  --g-trail: linear-gradient(90deg, var(--blue) 0%, color-mix(in srgb, var(--blue) 35%, transparent) 70%, transparent 100%);
  --g-scrim: linear-gradient(to top, rgb(0 28 82 / .92) 0%, rgb(0 28 82 / .55) 38%, rgb(0 28 82 / 0) 72%);

  --sh-sm: 0 1px 2px rgb(0 43 127 / .05), 0 2px 8px rgb(0 43 127 / .06);
  --sh-md: 0 2px 6px rgb(0 43 127 / .07), 0 10px 26px rgb(0 43 127 / .11);
  --sh-lg: 0 4px 12px rgb(0 43 127 / .09), 0 22px 46px rgb(0 43 127 / .16);

  --display: 'Archivo', system-ui, sans-serif;
  --body:    'Figtree', system-ui, sans-serif;

  /* Sin rieles desde el 2026-08-23: el escritorio va a una sola tirada.
     Lo que antes eran dos columnas de 250 px de publicidad es ahora una sola
     columna de contenido, con «Hoy en la historia» al costado de la portada. */
  --aside: 340px;       /* la columna de «Hoy en la historia», solo en portada */
  --gap:  48px;
  --shell: 1780px;

  /* ── Cabecera ──────────────────────────────────────────────────────────
     El alto de la barra azul se declara aquí y el logotipo se deriva de él:
     el propietario lo pidió al 75 % de la barra, así que el número que manda
     es --bar-h y --logo-pct es la proporción, no una medida suelta.

     El relleno vertical es lo que queda: (1 - 75 %) repartido arriba y abajo.
     Se calcula, no se escribe, para que cambiar --bar-h no obligue a recalcular
     nada a mano — y porque el pliegue del encabezado anima ese relleno. */
  --bar-h: 104px;
  --logo-pct: .75;

  /* ── Alto de la nota de portada ────────────────────────────────────────
     La foto se dibuja con `aspect-ratio`, así que su alto lo fija su ancho y a
     1.684 px se comía la pantalla entera: había que bajar a ciegas para
     descubrir que existía «Últimas».

     Este factor la achata sin quitarle ancho — sigue a sangre de columna — y
     con ella baja «Hoy en la historia», que mide lo que la foto por
     construcción. Solo aplica en escritorio: en móvil la portada es lo único
     que se ve y 16/9 es la proporción correcta. */
  --hero-alto: .65;     /* escritorio · 35 % menos que el 16/9 de origen */
  --hero-alto-movil: .75; /* móvil · 25 % menos que el cuadrado */
  --ad-gap: 16px;       /* separación entre anuncios de riel */
  --ad-body: 8px;       /* aire alrededor de los anuncios dentro del contenido */
  --ad-banner: 6px;     /* aire de la banda de Google, arriba de la portada */
  /* ── Logotipo ──────────────────────────────────────────────────────────
     Desde el 2026-08-23 el archivo es `crciclismo-logotipo-blanco.svg`, del kit
     de marca: la opción de LOGOTIPO —la palabra sola, en blanco— y no el
     isologo con banderín rojo que estuvo hasta el 17/08. La eligió el
     propietario.

     Este archivo NO trae halo: el `viewBox 0 0 445.5 81.3` encuadra el dibujo
     exacto. Por eso el marco vale 1 y el aire lateral 0, y por eso los márgenes
     negativos que compensaban el halo se anulan solos: multiplicados por cero
     no descuentan nada.

     Consecuencia práctica, y es la buena: sin halo, el 75 % que pidió el
     propietario cabe entero en la barra. Con el isologo, el marco medía el
     125 % de la barra a ese tamaño y sobresalía 13 px por lado.

     Estos cuatro números son lo único que hay que revisar si el logotipo
     vuelve a cambiar. */
  --logo-marco: 1;      /* alto del marco ÷ alto del dibujo · sin halo, es 1 */
  --logo-prop:  5.4797; /* ancho ÷ alto · 445,5/81,3 */
  --logo-aire:  0;      /* halo lateral, en fracción del ancho del marco */
  --logo-w: 121px;      /* ancho del logotipo plegado: 22 px de alto × 5,4797 */
  --feed-gap: 2.25rem;  /* separación entre tarjetas del feed */
  --p-gap: 1.35rem;     /* margen inferior de párrafo */

  --ease: cubic-bezier(.2, .7, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scrollbar-gutter: stable; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--display); font-variation-settings: 'wdth' 100;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-inline-size: 100%; block-size: auto; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 2px; }

/* ═══════════════════════════════════════════════════════════════════════
   FIRMA — estelas de velocidad, ahora como degradado que se disuelve
   ═══════════════════════════════════════════════════════════════════════ */
.rule { display: grid; gap: 4px; margin-block-end: .85rem; }
.rule::before, .rule::after, .rule > i {
  content: ''; block-size: 3px; border-radius: 2px; background: var(--g-trail);
}
.rule::before { inline-size: 100%; }
.rule > i     { inline-size: 58%;  }
.rule::after  { inline-size: 24%;  }

.rule-label {
  font-size: .8125rem; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--navy);
  /* 8 px, no 28. Un rótulo pertenece a lo que rotula: separado 28 px de la
     portada parecía un titular suelto en vez de la etiqueta de la sección. */
  margin-block-end: 8px; font-variation-settings: 'wdth' 92;
}

.tag {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .28rem .7rem; border-radius: 999px;
  background: var(--g-blue); color: var(--paper);
  font-size: .6875rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; font-variation-settings: 'wdth' 92;
  box-shadow: 0 2px 8px rgb(27 78 255 / .32);
}
.tag[data-live] { background: var(--g-red); box-shadow: 0 2px 10px rgb(248 0 16 / .38); }
.tag[data-live]::before {
  content: ''; inline-size: 6px; block-size: 6px; border-radius: 50%;
  background: var(--paper); animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.7); } }

/* ═══════════════════════════════════════════════════════════════════════
   CABECERA DEL SITIO
   ═══════════════════════════════════════════════════════════════════════ */
/* Plano y liso.
   Antes llevaba tres capas: un degradado, una trama de puntos y un resplandor
   elíptico detrás del logotipo. Las tres se quitaron al adoptar el azul de la
   bandera — un color de bandera tiene que leerse como ese color, y encima el
   logotipo nuevo ya trae su propio halo, así que el resplandor se duplicaba.
   La estructura la sigue dando la franja del menú, un tono más oscura.

   Llevaba `overflow: clip` para contener esas tres capas. Sin ellas no recorta
   nada útil, y desde el 2026-10-16 recortaba algo que sí importa: el panel de
   los submenús, que cuelga POR DEBAJO del encabezado. Se abría, pero invisible,
   y el ratón lo atravesaba hasta la foto de portada. Se quitó. La barra del
   logotipo conserva su propio `overflow: clip`, que es el que necesita el
   pliegue. */
.masthead { background: var(--navy); color: var(--paper); position: relative; }
.masthead-bar {
  position: relative; z-index: 1;
  /* `inline-size: 100%` es obligatorio desde que la barra vive dentro de
     .masthead-row, que es una rejilla. En un bloque normal, `margin-inline:
     auto` centra una caja estirada; en una rejilla, los márgenes automáticos
     absorben el espacio libre y ENCOGEN el elemento a su contenido — el
     logotipo terminaba centrado en vez de a la izquierda. */
  inline-size: 100%;
  max-inline-size: var(--shell); margin-inline: auto;
  /* El relleno vertical es lo que sobra tras darle al logotipo su 75 %.
     Con --bar-h en 104 px salen 13 px arriba y 13 abajo, y la barra mide
     78 + 26 = 104. No se fija `block-size`: una altura definida sobreviviría
     al `grid-template-rows: 0fr` del pliegue y la barra se derramaría sobre
     el menú. El relleno, en cambio, se anima a cero y desaparece de verdad. */
  padding-block: calc(var(--bar-h) * (1 - var(--logo-pct)) / 2);
  padding-inline: var(--gap);
  display: flex; align-items: center; gap: 2rem;
}
/* Que el enlace del logotipo pueda encogerse: sin `min-inline-size: 0` un
   elemento flexible no baja de su contenido y el logotipo empujaría al botón
   de hamburguesa fuera de la pantalla en teléfonos angostos. */
.masthead-bar > a { display: flex; min-inline-size: 0; }
/* ── Tamaño del logotipo ──────────────────────────────────────────────────
   Se declara el alto de lo que SE VE, no el del marco del archivo.

   Con el logotipo actual son lo mismo —no trae halo— y los márgenes negativos
   valen cero. La maquinaria se deja igual a propósito: si mañana vuelve un
   archivo con resplandor, se cambian los tres tokens de :root y nada más. Ya
   pasó tres veces.

   El ancho no se declara nunca: lo deduce el navegador del `viewBox`. El
   logotipo ya cambió tres veces de proporción y cada vez había que recalcular
   cuatro anchos a mano.

   El sprite se emite como un <svg width=0 height=0> en el mismo contenedor,
   por eso los selectores apuntan a .site-logo y no a cualquier <svg>. */
.site-logo {
  --marco: calc(var(--logo-alto) * var(--logo-marco));
  block-size: var(--marco);
  inline-size: auto;
  /* Tope de seguridad para pantallas angostas. Un SVG con viewBox conserva su
     proporción: al toparse con este máximo, el navegador reduce TAMBIÉN el alto
     y el logotipo encoge entero en vez de desbordar. Por debajo de unos 380 px
     la regla del 75 % cede ante esto, que es el orden correcto — un logotipo un
     poco más chico se ve bien; uno que se sale de la pantalla, no. */
  max-inline-size: 100%;
  margin-block:  calc(var(--marco) * (1 - 1 / var(--logo-marco)) / -2);
  margin-inline: calc(var(--marco) * var(--logo-prop) * var(--logo-aire) * -1);
}
/* El 75 % que pidió el propietario: el banderín ocupa tres cuartos del alto de
   la barra azul, y el cuarto restante es el aire de arriba y abajo. */
.masthead-bar .site-logo { --logo-alto: calc(var(--bar-h) * var(--logo-pct)); }

/* ── El logotipo con eslogan ──────────────────────────────────────────────
   Desde el 2026-10-16 la barra lleva «La casa del ciclismo costarricense»
   debajo de la palabra, por pedido de Steeven Mora. Sale de
   `assets/logo-crciclismo-eslogan.svg`, vectorizado del PNG que mandó la
   marca: 55 contornos, proporción 3,976 —la palabra sola es 5,48—, y el
   eslogan ocupa el 17 % inferior del alto.

   Ese 17 % es el número que manda en móvil: a los 48 px de antes el eslogan
   medía 8 px y no se leía. Ver la consulta de móvil.

   La sombra es la del arte original, medida sobre el PNG: negra al ~28 %,
   corrida hacia abajo a la derecha y difusa. Se expresa en fracción del alto
   para que escale con el logotipo en vez de quedarse en píxeles fijos. */
.site-logo--eslogan {
  filter: drop-shadow(calc(var(--logo-alto) * .04) calc(var(--logo-alto) * .045)
                      calc(var(--logo-alto) * .045) rgb(0 0 0 / .28));
}
.masthead-actions { margin-inline-start: auto; display: flex; align-items: center; gap: .75rem; }

.site-nav { background: var(--navy-deep); position: relative; z-index: 1; }
.site-nav-wrap {
  max-inline-size: var(--shell); margin-inline: auto;
  padding: .45rem var(--gap);
  display: flex; align-items: center; gap: 0;
}
.site-nav-inner {
  display: flex; align-items: center; gap: .3rem;
  flex: 1 1 auto; min-inline-size: 0;
}
/* El panel de «Coberturas Internacionales» se ancla a la franja entera, no al
   botón: con cuatro columnas mide ~760 px y, colgado del cuarto ítem, se salía
   por la derecha a 1024. */
.site-nav-wrap { position: relative; }
.site-nav a {
  display: block; padding: .55rem .9rem; border-radius: 999px;
  font-size: .8125rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: rgb(255 255 255 / .82);
  font-variation-settings: 'wdth' 92; white-space: nowrap;
  transition: color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.site-nav a:hover, .site-nav a:focus-visible { color: var(--paper); background-color: rgb(255 255 255 / .13); }
/* La sección activa se marca SOBRE el nombre, no debajo: pastilla en el rojo de
   marca con letras blancas. Lo fosforescente lo pone el halo, no el color: sobre
   el navy del menú, el rojo saturado con resplandor lee como neón. */
.site-nav a[aria-current] {
  color: var(--paper); background-color: var(--red);
  font-weight: 800;   /* el resto del menú se queda en 700 */
  box-shadow: 0 0 18px color-mix(in srgb, var(--red) 65%, transparent),
              0 0 44px color-mix(in srgb, var(--red) 34%, transparent);
}
.site-nav a[aria-current]:hover { background-color: var(--red); color: var(--paper); }

/* ── Submenús ─────────────────────────────────────────────────────────────
   Desde el 2026-10-16. Los pinta CRC_Nav_Walker (inc/template.php).

   Hasta entonces el contenedor llevaba `overflow-x: auto` para que un menú
   largo se desplazara de lado. Un contenedor con scroll RECORTA a sus hijos
   posicionados, así que el panel no habría salido nunca. Con cinco secciones
   el menú cabe de sobra a 1024 px; el scroll se retiró. */
.nav-item { position: relative; display: flex; align-items: center; }
.nav-item:has(.nav-col) { position: static; }

/* El padre que no lleva a ninguna parte es un botón con aspecto de enlace. */
.nav-parent, .nav-sub-toggle {
  font: inherit; border: 0; cursor: pointer; background: transparent;
  color: rgb(255 255 255 / .82); border-radius: 999px;
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.nav-parent {
  display: flex; align-items: center; gap: .35rem;
  padding: .55rem .9rem; font-size: .8125rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; font-variation-settings: 'wdth' 92; white-space: nowrap;
}
.nav-sub-toggle { display: grid; place-items: center; inline-size: 26px; block-size: 26px; margin-inline-start: -.55rem; padding: 0; }
.nav-parent:hover, .nav-parent:focus-visible, .nav-sub-toggle:hover, .nav-sub-toggle:focus-visible,
.nav-item[data-open] > .nav-parent { color: var(--paper); background-color: rgb(255 255 255 / .13); }
.nav-parent[aria-current] { color: var(--paper); background-color: var(--red); font-weight: 800; }
.nav-flecha { inline-size: 12px; block-size: 12px; flex: 0 0 auto; transition: transform .2s var(--ease); }
.nav-item[data-open] .nav-flecha { transform: rotate(180deg); }

.nav-sub {
  display: none; position: absolute; z-index: 30;
  inset-block-start: 100%; inset-inline-start: 0;
  min-inline-size: 230px; padding: .5rem;
  background: var(--navy-deep); border-radius: 14px;
  box-shadow: 0 18px 40px rgb(0 20 70 / .35);
  flex-direction: column;
}
/* Puente invisible sobre el panel: sin él, el ratón cruza el hueco entre el
   botón y el panel, sale del .nav-item y el panel se cierra en el camino. */
.nav-sub::before { content: ''; position: absolute; inset-inline: 0; inset-block-end: 100%; block-size: .9rem; }
.nav-item:has(.nav-col) > .nav-sub {
  inset-inline-start: var(--gap); inline-size: min(780px, calc(100% - 2 * var(--gap)));
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .25rem 1rem; padding: 1rem;
}
.nav-item[data-open] > .nav-sub { display: flex; }
.nav-item[data-open]:has(.nav-col) > .nav-sub { display: grid; }
@media (hover: hover) and (min-width: 1024px) {
  .nav-item:hover > .nav-sub, .nav-item:focus-within > .nav-sub { display: flex; }
  .nav-item:has(.nav-col):hover > .nav-sub, .nav-item:has(.nav-col):focus-within > .nav-sub { display: grid; }
  .nav-item:hover .nav-flecha { transform: rotate(180deg); }
}

.site-nav .nav-sub a {
  padding: .5rem .75rem; border-radius: 8px;
  font-size: .875rem; font-weight: 600; letter-spacing: 0; text-transform: none;
  font-variation-settings: normal; color: rgb(255 255 255 / .86); box-shadow: none;
}
.site-nav .nav-sub a[aria-current] { background-color: var(--red); color: var(--paper); box-shadow: none; }
.nav-col { display: flex; flex-direction: column; min-inline-size: 0; }
.nav-col-links { display: flex; flex-direction: column; }
.nav-col-title, .site-nav .nav-sub a.nav-col-title {
  padding: .35rem .75rem .45rem; font-size: .6875rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: rgb(255 255 255 / .55);
}

/* ── Utilidades del menú: redes, divisor y buscador ───────────────────────
   Vivían en los cabezales de los rieles (250 × 58 cada uno). Al retirarse los
   rieles subieron aquí, a la derecha del menú y en este orden: redes, divisor,
   buscador.

   `flex: 0 0 auto` para que no se encojan cuando el menú trae muchas secciones:
   quien se lleva el sobrante es .site-nav-inner, que ya tiene su propio scroll
   horizontal. */
.nav-utils {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: .75rem;
  padding-inline-start: .75rem;
}

/* El divisor. Un filete de 1 px se pierde sobre el azul del menú, así que son
   TRES líneas verticales de alturas decrecientes, cada una desvaneciéndose por
   los extremos. Es la firma de las estelas de velocidad del logotipo, puesta de
   canto: el mismo gesto que separa «PORTADA» de «ÚLTIMAS» más abajo. */
.nav-sep {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 3px;
  inline-size: 13px; block-size: 26px;
}
.nav-sep::before, .nav-sep::after, .nav-sep i {
  content: ''; display: block; inline-size: 1px; border-radius: 1px;
  background: linear-gradient(to bottom,
    transparent 0%, rgb(255 255 255 / .55) 30%, rgb(255 255 255 / .55) 70%, transparent 100%);
}
.nav-sep::before { block-size: 100%; }
.nav-sep i      { block-size: 72%; opacity: .7; }
.nav-sep::after { block-size: 44%; opacity: .45; }

/* Los iconos de redes, ahora sobre fondo oscuro.
   En el riel iban en `--navy` sólido sobre fondo claro; aquí ese mismo azul
   quedaría a 1,4:1 contra la franja del menú. Pasan a blanco translúcido, que
   es como se comporta el botón de hamburguesa dos píxeles más allá. */
.socials { display: flex; gap: .35rem; }
.socials a {
  /* `padding: 0` NO es decorativo: estos enlaces viven dentro de .site-nav, y
     `.site-nav a` les mete .55rem .9rem pensando en los enlaces de sección.
     Con box-sizing: border-box eso no agranda el círculo de 32 px — lo que hace
     es comerse el interior y aplastar el icono a 3 px de ancho. */
  padding: 0;
  inline-size: 32px; block-size: 32px; border-radius: 50%;
  display: grid; place-items: center; color: var(--paper);
  background: rgb(255 255 255 / .12);
  transition: transform .2s var(--ease), background .2s var(--ease);
}
.socials a:hover, .socials a:focus-visible {
  transform: translateY(-2px); background: rgb(255 255 255 / .26);
}
.socials svg { inline-size: 15px; block-size: 15px; fill: currentColor; }

/* El buscador. La pastilla blanca se sostiene sola sobre el azul del menú y no
   necesita borde. Se encoge con la ventana hasta un mínimo utilizable. */
.navsearch {
  inline-size: clamp(150px, 16vw, 230px);
  display: flex; align-items: center; gap: .3rem;
  background: var(--paper); border-radius: 999px;
  padding: .22rem .22rem .22rem .85rem;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .35);
  transition: box-shadow .2s var(--ease), inline-size .25s var(--ease);
}
.navsearch:focus-within {
  inline-size: clamp(190px, 20vw, 280px);
  box-shadow: inset 0 0 0 2px var(--blue), 0 4px 14px rgb(0 0 0 / .18);
}
.navsearch input {
  flex: 1 1 auto; min-inline-size: 0; border: 0; background: none; outline: none;
  font-family: var(--body); font-size: .8125rem; color: var(--ink);
}
.navsearch input::placeholder { color: var(--ink-40); }
.navsearch button {
  flex: 0 0 auto; inline-size: 28px; block-size: 28px; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; color: var(--paper);
  background: var(--g-blue); box-shadow: 0 2px 8px rgb(27 78 255 / .35);
  transition: transform .2s var(--ease);
}
.navsearch button:hover { transform: scale(1.06); }
.navsearch svg { inline-size: 14px; block-size: 14px; fill: currentColor; }

.masthead-accent { block-size: 4px; background: var(--g-blue); display: flex; }
.masthead-accent::before { content: ''; inline-size: 104px; background: var(--g-red); }

/* ═══════════════════════════════════════════════════════════════════════
   RETÍCULA — una sola tirada
   ═══════════════════════════════════════════════════════════════════════
   Hasta el 2026-08-22 esto eran tres columnas: 250 px de publicidad, el
   contenido, y otros 250 px de publicidad. Los rieles se retiraron del
   escritorio por decisión del propietario, así que el contenido pasa a ocupar
   todo el contenedor de 1780 px.

   La simetría de los rieles —el problema que originó el rediseño— deja de ser
   un asunto: ya no hay rieles que puedan diferir. */
.shell {
  max-inline-size: var(--shell); margin-inline: auto;
  padding: var(--ad-gap) var(--gap) 4rem;
}
/* Cuando la banda de Google cierra la página, el relleno de 4 rem del
   contenedor la separaría del pie 70 px mientras arriba tiene 6. Se iguala.

   Va con `:has()` y no en la plantilla porque el hueco vacío NO se pinta en
   producción: si un día la banda se queda sin anuncio, esta regla deja de
   coincidir sola y el pie recupera su aire de 4 rem. */
.shell:has(> .shell-main > .ad[data-slot="center-banner"]:last-child) {
  /* A cero, no a --ad-banner: el margen inferior de la propia banda ya pone
     los 6 px. Sumar aquí otros 6 dejaba 12 abajo contra 6 arriba, que es
     justo la asimetría que se quería quitar. */
  padding-block-end: 0;
}

/* ── El canal lateral, en :root y no en .shell ────────────────────────────
   Antes estos dos escalones vivían dentro de `.shell`, así que solo encogían
   el contenido: la cabecera y la franja del menú se quedaban con los 48 px de
   escritorio a cualquier ancho.

   Se notaba en dos sitios. Entre 1280 y 1439 px el logotipo quedaba 20 px más
   afuera que la nota de portada, desalineados. Y a 390 px los 96 px de sangría
   más el botón de hamburguesa dejaban 236 px para un logotipo que pedía 263:
   el `max-inline-size` lo achicaba a 43 px de alto y el 75 % se quedaba en
   67 % sin que nada pareciera roto.

   En `:root` el escalón lo comparten la cabecera, el menú y el contenido, que
   es lo que hace que las tres cosas se alineen. */
@media (max-width: 1439px) { :root { --gap: 28px; } }
@media (max-width: 1023px) { :root { --gap: 1.25rem; } }

/* ── Cabeza de la portada: nota principal + «Hoy en la historia» ──────────
   Dos columnas SOLO aquí. Debajo, el feed vuelve a todo el ancho: es lo que
   pidió el propietario con «una sola tirada».

   El aside es de ancho fijo y el hero se lleva el resto, no al revés. Con las
   dos columnas en fracciones, una portada sin efemérides —o con un titular
   muy largo— movía el ancho de la foto principal, que es el LCP de la página. */
.portada-top {
  display: grid; gap: var(--gap);
  grid-template-columns: minmax(0, 1fr) var(--aside);
  /* `stretch` —el valor por omisión— y no `start`: la columna tiene que
     alcanzar el alto de la fila, que es el de la foto. */
  /* 10 px más que el aire de contenido: la nota principal y las efemérides son
     un bloque, y «Últimas» empieza otra cosa. Con 8 px el rótulo parecía
     colgar de la foto. */
  margin-block-end: calc(var(--ad-body) + 10px);
}
/* Sin efemérides ni widgets la columna no se imprime, y entonces el hero se
   queda con TODO el ancho en vez de dejar un hueco de 340 px. Es la razón de
   `:has()`: la rejilla se adapta a lo que hay sin que PHP tenga que avisarle. */
.portada-top:not(:has(> .portada-aside)) { grid-template-columns: minmax(0, 1fr); }

.portada-top > .hero { margin-block-end: 0; }

/* Achatar la caja de la foto es lo que baja la fila entera. Se toca el
   `aspect-ratio` y no un `max-block-size` porque la imagen ya va con
   `object-fit: cover`: la proporción recorta, el tope dejaría la foto
   descentrada dentro de una caja que sigue midiendo lo de antes.

   16/9 ÷ 0,65 = 2,735. Se escribe como cuenta para que el 0,65 quede a la
   vista: es el número que se toca si hay que ajustar de nuevo.

   DENTRO DE LA CONSULTA, y esto no es opcional. La regla nació sin acotar
   —con el comentario diciendo que era de escritorio, que es peor que no
   decirlo— y `.portada-top > .hero` también existe en el teléfono, donde solo
   se oculta la columna de al lado. Resultado: una franja de 2,735:1 y 128 px de
   alto en una pantalla de 390. */
@media (min-width: 1024px) {
  .portada-top > .hero .hero-media { aspect-ratio: calc(16 / 9 / var(--hero-alto)); }
}

/* ── La columna iguala SIEMPRE el alto de la foto de portada ──────────────
   Pedido explícito. Tiene dos mitades y las dos hacen falta:

   `block-size: 0` es lo que impide que la columna EMPUJE la fila. Al medir el
   alto de la fila, la rejilla toma el alto declarado del elemento —cero— en vez
   del de su contenido, así que quien manda es la foto y solo la foto. Sin esto,
   un día con efemérides largas estiraría la fila y la nota principal crecería
   por debajo de su `aspect-ratio`, mostrando fondo gris bajo la imagen.

   `min-block-size: 100%` es lo que la hace CRECER hasta esa altura ya resuelta.
   El porcentaje se mide contra el área de rejilla, que a esa altura del cálculo
   ya vale lo que mide la foto.

   Las dos juntas dan «igual de alta que la foto, nunca más». */
.portada-aside {
  block-size: 0;
  min-block-size: 100%;
  display: flex; flex-direction: column; gap: var(--ad-gap);
  min-inline-size: 0;
}

/* «Hoy en la historia» es de escritorio, como se pidió. Por debajo de 1024 px
   —donde entra el menú de hamburguesa— desaparece y la portada queda a una
   columna. */
@media (max-width: 1023px) {
  .portada-top { grid-template-columns: minmax(0, 1fr); }
  .portada-top > .portada-aside { display: none; }
}

/* ── HOY EN LA HISTORIA ───────────────────────────────────────────────────
   Efemérides: lo que publicó el medio un día como hoy en años anteriores.
   Con 14.390 entradas desde 2012, los 366 días del año tienen algo — se
   comprobó por SQL, no por suposición. */
.hoy {
  background: var(--paper); border-radius: 12px;
  box-shadow: var(--sh-md);
  overflow: clip;
  /* Se lleva el alto que le deje la columna, y la columna mide lo que la foto.
     `min-block-size: 0` levanta el mínimo automático de los elementos flexibles;
     sin él la lista no puede encogerse por debajo de su contenido y el módulo
     se desborda en vez de repartirse. */
  flex: 1 1 auto; min-block-size: 0;
  display: flex; flex-direction: column;
}
.hoy-head {
  background: var(--navy); color: var(--paper);
  padding: .8rem 1.1rem;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
}
/* El icono del reloj. El selector es directo para no alcanzar al logotipo,
   que también es un <svg> y vive dentro del h2. */
.hoy-head > svg { inline-size: 17px; block-size: 17px; fill: currentColor; flex: 0 0 auto; }

.hoy-head h2 {
  margin: 0; min-inline-size: 0;
  display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap;
  font-family: var(--display);
  font-size: .75rem; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; font-variation-settings: 'wdth' 92;
  line-height: 1.2;
  /* El interletraje es .07 y no el .1 del resto de los rótulos por una razón
     medida: el mes más largo del año. «UN 30 DE SEPTIEMBRE EN» más el logotipo
     se pasaban de los 305 px útiles y el rótulo caía a dos líneas —se sostenía,
     porque envuelve, pero la cabecera crecía 20 px tres meses al año—. Con .07
     entran los doce meses en una línea. */
}

/* ── El logotipo dentro del rótulo ────────────────────────────────────────
   «UN 23 DE AGOSTO EN crciclismo», con la marca en vez de la palabra.

   El alto va en `em`, atado al tamaño del texto que lo acompaña: si mañana se
   toca el cuerpo del rótulo, la marca lo sigue sin recalcular nada. 1,5 em de
   alto sobre 12 px son 18, que junto a unas versales de 12 lee como logotipo y
   no como una palabra más — que es de lo que se trata.

   El ancho no se declara: lo deduce el navegador del viewBox. La alineación es
   por línea base con un empujón: la caja del SVG llega hasta el trazo más bajo
   del dibujo, así que sentarla en la línea base la deja flotando alta. */
.hoy-logo {
  /* 1,3 em sobre un texto de 12 px son 15,6: lee como marca al lado de unas
     versales de 12 sin gritar. */
  block-size: 1.3em;
  inline-size: auto;
  flex: 0 0 auto;
  /* `baseline`, y NADA más.
     El wordmark no tiene descendentes: su borde inferior ES su línea base, y
     un elemento reemplazado alineado por línea base en flex usa justamente ese
     borde. Encaja solo.

     Estaba con `align-self: center` y un empujón de .08em, que era doble error:
     centrar 18 px de logotipo en una caja de texto de 14,4 lo dejaba colgando, y
     el empujón sumaba. Medido entonces: 8 px por debajo de la línea base.
     Medido ahora: 0,0. */
  align-self: baseline;
}
/* La lista ocupa lo que sobra tras el encabezado y la fecha, y las efemérides
   se reparten ese espacio en partes iguales. Estirarlas es mejor que dejar un
   bloque de blanco al fondo: el módulo tiene que verse lleno, no truncado.

   `overflow-y: auto` es la válvula de seguridad para el día que alguien suba
   las efemérides a doce y ya no quepan. Con las seis de fábrica no aparece. */
.hoy-lista {
  list-style: none; margin: 0; padding: 0;
  flex: 1 1 auto; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column;
}
.hoy-item { border-block-end: 1px solid var(--hair); flex: 1 1 0; min-block-size: 0; }
.hoy-item:last-child { border-block-end: 0; }
.hoy-item a {
  block-size: 100%;
  display: grid; gap: .2rem; align-content: center; padding: .5rem 1.1rem;
  transition: background .2s var(--ease);
}
.hoy-item a:hover, .hoy-item a:focus-visible { background: var(--mist); }

/* El año es lo que da sentido al módulo: va primero, en el rojo de marca y con
   el mismo peso que un rótulo de sección. */
.hoy-anio {
  font-family: var(--display); font-size: .6875rem; font-weight: 800;
  letter-spacing: .12em; color: var(--red);
  font-variation-settings: 'wdth' 92;
}
.hoy-titulo {
  font-family: var(--display); font-size: .875rem; font-weight: 600;
  line-height: 1.28; color: var(--ink);
  /* DOS líneas y elipsis, no tres.
     Eran tres cuando la foto de portada medía 578 px. Al bajarla un 35 % el
     módulo se quedó en 376 y las seis efemérides se repartieron 48 px cada
     una: no cabía ni una línea, y el resultado fue una lista de años sueltos
     con los titulares recortados a nada. Se ve raro sin parecer roto — que es
     exactamente la clase de fallo que este proyecto ya pagó dos veces. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}



/* ═══════════════════════════════════════════════════════════════════════
   HUECOS PUBLICITARIOS — altura reservada, sin AdSense real
   ═══════════════════════════════════════════════════════════════════════ */
.ad {
  position: relative;
  display: grid; place-content: center; gap: .3rem; text-align: center;
  border-radius: 8px; contain: layout;
  /* Fondo blanco a propósito: la mayoría de los banners de los anunciantes
     vienen con fondo blanco, y un relleno celeste dibujaba un recuadro dentro
     del recuadro. Ahora el hueco se delimita solo con la línea azul. */
  background: var(--paper);
  overflow: clip;   /* que la imagen respete las esquinas redondeadas */
}

/* El borde va en un pseudoelemento, NO en box-shadow.
   Una sombra interior se pinta por debajo del contenido: un banner de 250 px
   —exactamente el ancho de la caja— tapaba la línea azul en los costados y el
   recuadro se veía cortado. El ::after pinta encima de la imagen, así el borde
   siempre gana. */
.ad::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  border: 1px solid color-mix(in srgb, var(--blue) 30%, transparent);
}
.ad-label {
  font-size: .5625rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: color-mix(in srgb, var(--navy) 48%, var(--paper));
}
.ad-size { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: .6875rem; color: var(--ink-40); }

/* Las MEDIDAS de cada hueco no se declaran aquí: las emite el PHP como estilo
   en línea, a partir del registro `crc_ad_slots()`. Así hay una sola fuente de
   verdad y no dos listas que se desincronizan. La maqueta usa `data-size`
   porque es estática; el tema usa `data-slot` porque el contenido es dinámico.

   Aquí solo van los ajustes que dependen de la POSICIÓN en la página. */

/* La banda de Google CIERRA la portada, entre el paginador y el pie.
   Estuvo arriba hasta el 2026-08-23, y entonces no llevaba margen superior a
   propósito: alineaba con los cabezales de los rieles. Abajo ya no hay nada con
   qué alinearse, así que el aire es el mismo por los dos lados. */
.ad[data-slot="center-banner"] {
  inline-size: 100%;
  margin-block: var(--ad-banner);
}

/* La medida del AdSense de la banda, por pantalla. Desde el 2026-10-16.

   `.ad` centra su contenido con `place-content: center`, y un bloque
   RESPONSIVO de AdSense no trae medida propia: la pista de la rejilla se
   ajustaba a un contenido vacío y el <ins> medía 0 × 0. Sin ancho, Google no
   sirve nada. La banda estuvo vacía desde el pase, en escritorio y en móvil,
   sin dar ningún error. Medido con getBoundingClientRect.

   La salida es la que documenta AdSense para bloques responsivos: fijar el
   tamaño con CSS por punto de corte y quitar `data-ad-format`. Teléfono:
   300 × 100, la misma medida que los bloques móviles (pedido del 16/10).
   Escritorio: 728 × 90, la banda estándar, centrada. */
.ad .crc-banda { display: inline-block; inline-size: 300px; block-size: 100px; }
@media (min-width: 1024px) {
  .ad .crc-banda { inline-size: 728px; block-size: 90px; }
}
@media (max-width: 1023px) {
  /* 150 px de caja para 100 de anuncio dejaban 25 de blanco arriba y abajo. */
  .ad[data-slot="center-banner"] { block-size: 116px !important; }
}

/* Si Google no tiene anuncio que servir, la caja desaparece en vez de quedar
   como un recuadro punteado vacío entre el paginador y el pie (pedido del
   16/10). AdSense marca el <ins> con `data-ad-status="unfilled"`, o con
   «unfill-optimized» cuando ya lo colapsó él. Cualquier bloque de Google,
   no solo la banda: el 300 × 100 de la rotación móvil también puede quedar
   sin llenar. */
.ad:has(ins.adsbygoogle[data-ad-status="unfilled"]),
.ad:has(ins.adsbygoogle[data-ad-status="unfill-optimized"]) { display: none; }

/* Los anuncios dentro del contenido respiran --ad-body (8 px) arriba y abajo.
   Los márgenes negativos cancelan la rejilla del feed móvil y el margen del
   párrafo anterior: sin ellos el colapso de márgenes ganaría y dejaría 22-26 px. */
.cards > .ad          { margin-block: calc(var(--ad-body) - var(--feed-gap)); grid-column: 1 / -1; }
.article-body > .ad   { margin-block: calc(var(--ad-body) - var(--p-gap)) var(--ad-body); }

/* Aquí vivían cuatro reglas `[data-src="propio"|"google"]` que NO COINCIDÍAN
   CON NADA: el tema emite `data-slot`, nunca `data-src`. Una de ellas ponía un
   degradado celeste de fondo, o sea justo lo contrario del fondo blanco que
   este archivo explica dos bloques más arriba. Se fueron el 2026-08-23; era el
   pendiente de «selectores muertos» de la Fase 3 §3.5. La distinción entre
   inventario propio y Google la hace `.ad--google`, que sí existe. */


/* ═══════════════════════════════════════════════════════════════════════
   TARJETAS
   ═══════════════════════════════════════════════════════════════════════ */
.feed { container: inline-size / feed; }

/* Portada: la imagen manda, el titular va encima con velo */
.hero {
  position: relative; border-radius: 12px; overflow: clip;
  margin-block-end: var(--ad-body); box-shadow: var(--sh-lg);
  isolation: isolate;
}
.hero-media { aspect-ratio: 16 / 9; background: var(--mist); }
.hero-media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.hero::after { content: ''; position: absolute; inset: 0; background: var(--g-scrim); pointer-events: none; }
.hero-copy {
  position: absolute; inset-block-end: 0; inset-inline: 0; z-index: 1;
  padding: clamp(1.5rem, 1rem + 2vw, 3rem); color: var(--paper);
  display: grid; gap: .85rem; justify-items: start;
}
.hero-copy h2 {
  margin: 0; max-inline-size: 22ch;
  font-size: clamp(1.75rem, 1rem + 2.4vw, 3.1rem);
  font-weight: 800; font-variation-settings: 'wdth' 88;
  line-height: 1.03; letter-spacing: -.024em;
  text-wrap: balance; text-shadow: 0 2px 20px rgb(0 6 60 / .45);
}
.hero-copy p {
  margin: 0; font-family: var(--body); font-size: 1.0625rem; line-height: 1.55;
  color: rgb(255 255 255 / .82); max-inline-size: 56ch;
}
/* La fecha de la nota principal: bajo el titular, a la derecha y en blanco.
   `justify-self: end` la despega del borde izquierdo donde la deja
   `justify-items: start` de .hero-copy. */
.hero-copy .hero-fecha {
  justify-self: end;
  margin: 0;
  font-family: var(--display);
  font-size: .75rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  font-variation-settings: 'wdth' 94;
  font-variant-numeric: tabular-nums;
  color: var(--paper);
}

.hero:hover .hero-media img { transform: scale(1.03); }
.hero-media img { transition: transform .6s var(--ease); }

/* El mínimo de la pista sube a 280 px a propósito: con el centro más ancho,
   250 dejaba entrar una cuarta columna y las tarjetas salían MÁS pequeñas.
   Con 280 se mantienen tres y cada una gana ancho. */
/* ── El feed: TRES filas en escritorio ────────────────────────────────────
   El número de columnas se declara por tramo en vez de dejarlo a `auto-fill`.
   La razón es que las filas tienen que salir exactas: con doce entradas y
   cuatro columnas son tres filas justas, y con `auto-fill` el ancho de la
   ventana decidía si eran tres, cuatro o cinco, dejando la última coja.

   Las tarjetas son elásticas dentro de cada tramo —`1fr`, no un ancho fijo—,
   así que el tamaño sí se adapta a la resolución de forma continua: 397 px a
   1920, 352 a 1600, 325 a 1440, 285 a 1280.

   POR QUÉ NO SE RECORTAN LAS SOBRANTES EN PANTALLAS ANGOSTAS. Lo natural sería
   pedir doce y ocultar por CSS las que no completan tres filas. No se puede: el
   paginador cuenta por `posts_per_page`, así que la página 2 arrancaría igual
   en la trece y las ocultas no se verían NUNCA. Se pierde contenido, y en un
   medio con 14.390 notas eso no es un detalle. Por eso a 1024-1279 se muestran
   las doce en cuatro filas en vez de esconder tres. */
.cards { display: grid; gap: 2.25rem 1.75rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1279px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card {
  display: grid; gap: .7rem; align-content: start;
  border-radius: 10px; background: var(--paper);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.card:hover { transform: translateY(-3px); }
.card-media {
  aspect-ratio: 16 / 10; background: var(--mist);
  border-radius: 8px; overflow: clip; box-shadow: var(--sh-sm);
  transition: box-shadow .25s var(--ease);
}
.card:hover .card-media { box-shadow: var(--sh-md); }
.card-media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.card:hover .card-media img { transform: scale(1.04); }
.card h3 {
  margin: 0; font-size: clamp(1.0625rem, 1rem + .25vw, 1.25rem);
  font-weight: 700; font-variation-settings: 'wdth' 90;
  line-height: 1.18; letter-spacing: -.012em; text-wrap: balance;
}
.card h3 a { transition: color .18s var(--ease); }
.card h3 a:hover, .card h3 a:focus-visible { color: var(--blue); }
.card-excerpt {
  margin: 0; font-family: var(--body); font-size: .9375rem; line-height: 1.55; color: var(--ink-60);
  display: none; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-clamp: 2; overflow: clip;
}
@container feed (inline-size > 640px) { .card-excerpt { display: -webkit-box; } }

.meta {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  font-size: .6875rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-40); font-variant-numeric: tabular-nums;
}

/* ── Sin `content-visibility` en las tarjetas ─────────────────────────────
   Se difería el render de las tarjetas bajo el pliegue con
   `content-visibility: auto` y `contain-intrinsic-size: … 340px`. Tenía sentido
   cuando la portada llevaba veinte anuncios además del feed.

   Se quitó el 2026-08-23 porque **escondía el pie**. El alto declarado eran
   340 px y las tarjetas reales miden 328: mientras estaban fuera de pantalla la
   página se creía 35 px más alta de lo que es, y al bajar —cuando se
   renderizan— encogía. El navegador recorta entonces el scroll al nuevo máximo
   y devuelve la vista hacia arriba: el pie aparecía mientras se arrastraba y
   se escondía al soltar.

   Un `contain-intrinsic-size` exacto lo taparía hoy y volvería a fallar en
   cuanto un titular ocupara una línea más. El diferido ya no compra nada: son
   doce tarjetas y una unidad publicitaria, no treinta y dos elementos. */


/* ═══════════════════════════════════════════════════════════════════════
   MEDIOS EN BLOQUE — corrige el hueco de línea base
   ═══════════════════════════════════════════════════════════════════════
   Una imagen es un elemento REEMPLAZADO EN LÍNEA: por defecto se apoya en la
   línea base del texto y el navegador reserva el espacio de los descendentes
   debajo. Son unos 9 px de aire fantasma que no se ven, pero cuentan.

   Aquí rompía la retícula: `.card-media` con `aspect-ratio: 16/10` debía medir
   242,8 px y medía 260,9 —los 9 px de más— así que el contenido de la tarjeta
   excedía el alto de su fila y el titular quedaba cortado a media letra en las
   notas de tres líneas.

   Poner en bloque la imagen y su enlace elimina la línea base y con ella el
   hueco. Es la corrección de raíz: sin esto, cualquier caja con `aspect-ratio`
   que envuelva una imagen mide de más. */
.card-media a,
.card-media img,
.hero-media img,
.article-media img { display: block; }

/* ═══════════════════════════════════════════════════════════════════════
   ARTÍCULO
   ═══════════════════════════════════════════════════════════════════════ */
.article-head { margin-block-end: 2rem; }
.article-head h1 {
  margin: .85rem 0 1rem;
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.25rem);
  font-weight: 800; font-variation-settings: 'wdth' 88;
  line-height: 1.04; letter-spacing: -.024em; text-wrap: balance;
}
/* El sumario acompaña al titular y va con él: a ancho completo, como el
   cuerpo. Capado a 62ch quedaba como un pie de foto perdido a la izquierda. */
.article-standfirst { font-family: var(--body); font-size: 1.1875rem; font-weight: 400; line-height: 1.55; color: var(--ink-60); margin: 0; }
.article-media { aspect-ratio: 16 / 9; background: var(--mist); border-radius: 12px; overflow: clip; margin-block-end: 2.5rem; box-shadow: var(--sh-md); }
.article-media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
/* Figtree es sans: a igual cuerpo pesa más que una serifa, así que baja
   un punto y sube el interlineado para sostener la lectura larga.

   ── Ancho ────────────────────────────────────────────────────────────────
   A ancho completo, por pedido del 2026-08-23. Antes iba con `68ch`, que a
   1512 px daba 784 de columna y dejaba 632 px muertos a la derecha bajo una
   foto que sí ocupaba los 1416: se veía desbalanceado, y esa era la queja.

   El coste está medido y hay que decirlo: a 1512 px la línea pasa de 86 a unos
   155 caracteres, y la lectura cómoda está entre 45 y 75. El interlineado sube
   a 1,8 para compensar en parte — con líneas largas, el ojo pierde el renglón
   al volver, y el aire entre renglones es lo único que ayuda desde el CSS.

   Si alguna vez se quiere volver atrás sin perder el equilibrio, la línea es
   `max-inline-size: min(100%, 90ch); margin-inline: auto;` — columna medida y
   centrada bajo la foto, en vez de pegada a la izquierda. */
.article-body { font-family: var(--body); font-size: 1.125rem; font-weight: 400; line-height: 1.8; letter-spacing: -.003em; }
.article-body p { margin: 0 0 1.35rem; }
.article-body p:first-of-type::first-letter {
  float: inline-start; font-family: var(--display); font-weight: 800;
  font-size: 3.4em; line-height: .82; margin: .06em .09em 0 0;
  color: var(--blue); font-variation-settings: 'wdth' 88;
}

/* ═══════════════════════════════════════════════════════════════════════
   CONTENIDO INCRUSTADO — vídeo y redes dentro de la nota
   ═══════════════════════════════════════════════════════════════════════
   El archivo tiene incrustados de dos épocas y hay que servir a las dos:

   · Los VIEJOS son `<iframe width="560" height="315">` sueltos dentro de un
     <p>, pegados con el editor clásico. Medida fija: en una columna de 1.416 px
     quedaban pequeños y pegados a la izquierda, y en un teléfono de 390 se
     salían de la pantalla.
   · Los NUEVOS son bloques `core/embed`, que el editor de bloques envuelve en
     un <figure class="wp-block-embed">.

   Se tratan igual: proporción 16:9, ancho acotado y centrado, esquinas
   redondeadas y la sombra del tema. Un vídeo a 1.416 px mediría 797 de alto
   —más que la pantalla— así que el tope de 900 no es cosmético.

   La hoja de estilos de bloques de WordPress NO se carga en este tema, así que
   la proporción hay que ponerla aquí: no hay `wp-has-aspect-ratio` que valga. */

.article-body :is(iframe, .wp-block-embed, .twitter-tweet, blockquote.instagram-media) {
  margin-inline: auto;
}

/* Vídeo: el ancho manda y el alto sale de la proporción. `block-size: auto` es
   obligatorio — sin él gana el atributo `height="315"` del marcado viejo y el
   `aspect-ratio` no llega a aplicarse. */
.article-body iframe[src*="youtube"],
.article-body iframe[src*="youtu.be"],
.article-body iframe[src*="vimeo"],
.article-body iframe[src*="dailymotion"],
.article-body .wp-block-embed.is-type-video iframe {
  display: block;
  inline-size: 100%;
  max-inline-size: 900px;
  block-size: auto;
  aspect-ratio: 16 / 9;
  border: 0; border-radius: 10px;
  box-shadow: var(--sh-md);
  background: var(--ink);   /* mientras carga, negro: es un vídeo */
}

/* El <p> que envuelve a los iframes viejos: sin él, el iframe queda pegado al
   párrafo anterior porque el margen del <p> se colapsa con el suyo. */
.article-body p:has(> iframe) {
  margin-block: 2rem;
  text-align: center;
}

/* Bloques de incrustado del editor nuevo */
.article-body .wp-block-embed {
  margin-block: 2rem;
  max-inline-size: 900px;
}
.article-body .wp-block-embed__wrapper { position: relative; }
.article-body .wp-block-embed figcaption,
.article-body figcaption {
  margin-block-start: .6rem;
  font-family: var(--body); font-size: .8125rem; line-height: 1.5;
  color: var(--ink-60); text-align: center;
}

/* Redes: X e Instagram traen su propio marco, así que aquí solo se centran y
   se les acota el ancho. Pintarles un recuadro encima sería un marco doble. */
.article-body :is(.twitter-tweet, blockquote.instagram-media, .tiktok-embed) {
  margin-block: 2rem !important;
  max-inline-size: 560px;
}

/* El envoltorio que WordPress deja alrededor de un enlace a nota propia:
   ya no hay iframe dentro —lo sustituye `.nota-enlazada`— así que el <figure>
   no debe aportar márgenes de figura. */
.article-body .wp-block-embed.is-provider-crciclismo,
.article-body figure:has(> .nota-enlazada) { margin: 0; max-inline-size: none; }

@media (max-width: 1023px) {
  .article-body p:has(> iframe),
  .article-body .wp-block-embed { margin-block: 1.5rem; }
  .article-body :is(.twitter-tweet, blockquote.instagram-media) { max-inline-size: 100%; }
}

/* ── «Leé también» ────────────────────────────────────────────────────────
   Sustituye a la tarjeta de iframe que WordPress metía cuando un redactor
   pegaba la URL de otra nota. Aquella no la pintaba el tema: traía sus propios
   estilos, su «Sigue leyendo» y el icono del sitio, y no se parecía a nada de
   la página.

   Aquí es un enlace y poco más. Va dentro del texto, así que tiene que leerse
   como una acotación del redactor y no como un módulo: filete azul a la
   izquierda, rótulo en versales pequeñas y el titular en el tipo de titulares.

   El ancho se acota aunque el cuerpo vaya a sangre: una acotación de una línea
   estirada a 1.416 px se lee como un titular perdido. */
.nota-enlazada {
  margin-block: 1.6rem;
  padding: .85rem 0 .85rem 1.1rem;
  border-inline-start: 3px solid var(--blue);
  display: grid; gap: .25rem;
  max-inline-size: 68ch;
}
.nota-enlazada-rotulo {
  font-family: var(--display); font-size: .625rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-40);
  font-variation-settings: 'wdth' 92;
}
.nota-enlazada a {
  font-family: var(--display); font-size: 1.0625rem; font-weight: 700;
  line-height: 1.3; color: var(--ink); font-variation-settings: 'wdth' 92;
  text-wrap: balance;
}
.nota-enlazada a:hover, .nota-enlazada a:focus-visible { color: var(--blue); }

/* ═══════════════════════════════════════════════════════════════════════
   NOTAS RELACIONADAS — «Seguí leyendo»
   ═══════════════════════════════════════════════════════════════════════
   Tarjetas de RESUMEN, deliberadamente más pequeñas que las del feed: aquí la
   nota ya se leyó y esto es una sugerencia, no un titular compitiendo por la
   entrada. Foto chica, sección, fecha y titular a dos líneas.

   Cuántas se ven lo decide el ancho. Se piden ocho al servidor y se ocultan las
   que sobran en cada tramo, para que las filas salgan siempre completas. Aquí
   ocultar no cuesta nada —son sugerencias— al revés que en el feed de la
   portada, donde el paginador cuenta por `posts_per_page` y lo oculto no se
   vería nunca. */
.relacionadas { margin-block-start: 3.5rem; }

.rel-grid {
  display: grid; gap: 1.5rem 1.25rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rel-card { min-inline-size: 0; }
.rel-link {
  display: grid; gap: .6rem; align-content: start;
  border-radius: 10px;
  transition: transform .2s var(--ease);
}
.rel-link:hover, .rel-link:focus-visible { transform: translateY(-3px); }

/* 16:10, la misma proporción que las tarjetas del feed pero a menos tamaño:
   así las fotos se recortan igual y no hay que regenerar miniaturas. */
.rel-media {
  display: block; aspect-ratio: 16 / 10;
  border-radius: 8px; overflow: clip; background: var(--mist);
  box-shadow: var(--sh-sm);
}
.rel-media img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }

.rel-texto { display: grid; gap: .3rem; }
.rel-meta {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  font-size: .625rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-40);
  font-variant-numeric: tabular-nums;
}
/* La sección va en color, no en pastilla: una cápsula por tarjeta en una
   rejilla de ocho es demasiado ruido para lo que es un pie de nota. */
.rel-cat { color: var(--blue); }

.rel-titulo {
  font-family: var(--display); font-size: .9375rem; font-weight: 700;
  line-height: 1.28; color: var(--ink); font-variation-settings: 'wdth' 92;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.rel-link:hover .rel-titulo { color: var(--blue); }

/* ── Cuántas se ven ─────────────────────────────────────────────────────── */
@media (max-width: 1279px) {
  .rel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rel-card:nth-child(n+7) { display: none; }   /* 2 filas de 3 */
}
@media (max-width: 1023px) {
  .rel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1rem; }
  .rel-card:nth-child(n+7) { display: none; }   /* 3 filas de 2 */
}
@media (max-width: 560px) {
  /* En un teléfono, la tarjeta se acuesta: foto a la izquierda y texto al
     lado. Apiladas ocupaban media pantalla cada una y «seguí leyendo» pasaba
     a ser más largo que la propia nota. */
  .rel-grid { grid-template-columns: 1fr; gap: .9rem; }
  .rel-link { grid-template-columns: 116px minmax(0, 1fr); gap: .85rem; align-items: center; }
  .rel-media { aspect-ratio: 4 / 3; }
  .rel-card:nth-child(n+5) { display: none; }   /* 4 sugerencias */
}

/* ═══════════════════════════════════════════════════════════════════════
   PIE
   ═══════════════════════════════════════════════════════════════════════ */
.site-foot { background: var(--navy); color: var(--paper); position: relative; overflow: clip; }
.site-foot-inner { position: relative; max-inline-size: var(--shell); margin-inline: auto; padding: 3.25rem var(--gap) 1.75rem; display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; }
/* Con eslogan desde el 2026-10-16, igual que la cabecera. A 28 px —lo que
   medía con la palabra sola— el eslogan saldría de 5 px: con 64 queda en ~11,
   lo mismo que en el teléfono arriba, y mide 254 de ancho: cabe a 320 px. */
.site-foot .site-logo { --logo-alto: 64px; }
.site-foot p { margin: 0; font-size: .8125rem; opacity: .72; margin-inline-start: auto; max-inline-size: 46ch; line-height: 1.55; }


/* ═══════════════════════════════════════════════════════════════════════
   ENCABEZADO FIJO — dos estados
   ═══════════════════════════════════════════════════════════════════════
   Al tope de la página el encabezado va completo: el logotipo grande en su
   propia fila y el menú debajo. Al bajar se pliega en una sola barra, con el
   logotipo entrando por la izquierda y los enlaces corriéndose a la derecha.

   El pliegue se hace con `grid-template-rows: 1fr → 0fr`, que SÍ es animable
   —a diferencia de `height: auto`— y no necesita medir nada con JavaScript.

   El estado lo marca un IntersectionObserver sobre `.masthead-sentinel`, no
   un manejador de scroll: así no hay trabajo en el hilo principal en cada
   píxel que se desplaza. */

/* El umbral de pliegue es la ALTURA de este centinela, no un rootMargin.
   El margen negativo lo saca del flujo, así que no ocupa espacio.

   La versión anterior usaba un centinela de 1 px con `rootMargin: -12px`, y
   fallaba para cualquier visitante NO logueado: sin la barra de administración,
   `html` no lleva el `margin-top: 32px` que mete WordPress, el centinela queda
   en y=0 y cae dentro de los 12 px excluidos por el rootMargin. Resultado: el
   observador nunca lo veía y el encabezado arrancaba plegado incluso al tope
   de la página. Con sesión abierta el problema no se notaba — el margen de la
   barra lo empujaba fuera de la zona muerta. */
.masthead-sentinel {
  block-size: 64px;
  margin-block-end: -64px;
  pointer-events: none;
}

.masthead {
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
}

/* ── El pliegue NO puede cambiar el alto del documento ────────────────────
   Hasta el 2026-08-23 la barra se plegaba encogiendo su fila de `1fr` a `0fr`.
   Funcionaba a la vista y traía un fallo de scroll de manual: el encabezado es
   `sticky`, o sea que SIGUE OCUPANDO SITIO EN EL FLUJO. Al pasar de 162 a 58 px
   el documento entero encogía 104, y el alto de la página dependía de dónde
   estuviera mirando el lector.

   Medido: 2.232 px arriba, 2.128 abajo. El navegador recorta el scroll al nuevo
   máximo, así que al arrastrar hacia abajo devolvía la vista 40 px hacia
   arriba sin que nadie tocara nada, y al soltar cerca del final el pie parecía
   esconderse.

   Ahora la caja mide 162 px SIEMPRE y lo que se pliega es la posición: el
   encabezado se desplaza hacia arriba justo el alto de la barra, que se lleva
   fuera de pantalla y deja la franja del menú pegada al borde. El documento no
   se entera, y de paso la animación pasa de `grid-template-rows` —que obliga a
   recalcular la maquetación en cada fotograma— a `transform`, que no. */
.masthead-row {
  display: grid;
  grid-template-rows: 1fr;
}
/* Los dos son imprescindibles para que `0fr` llegue de verdad a cero:
   `overflow: clip` recorta el contenido, y `min-block-size: 0` levanta el
   mínimo automático que traen los elementos de rejilla —sin él, la fila nunca
   baja de la altura de su contenido y la animación no se ve. */
.masthead-bar { overflow: clip; min-block-size: 0; }

/* El desplazamiento es exactamente el alto de la barra, y ese número no se
   escribe: la barra mide `--bar-h` por construcción —el relleno es (1 - 75 %)
   repartido, así que relleno + logotipo suman justo --bar-h—. Verificado: 104. */
.masthead { transition: transform .42s var(--ease); }
.masthead[data-compact] { transform: translateY(calc(var(--bar-h) * -1)); }

/* El logotipo compacto entra por la izquierda y empuja los enlaces */
.nav-logo {
  flex: 0 0 auto; overflow: clip;
  inline-size: 0; opacity: 0;
  transform: translateX(-14px);
  transition: inline-size .42s var(--ease),
              opacity .26s var(--ease) .06s,
              transform .42s var(--ease),
              margin-inline-end .42s var(--ease);
}
.nav-logo .site-logo { --logo-alto: 22px; display: block; margin-inline: 0; }

/* El ancho del contenedor SÍ tiene que ser un número: es lo que se anima.
   Es el ancho del MARCO completo, halo incluido, porque `.nav-logo` recorta
   por los lados y unos márgenes negativos ahí cortarían el halo en seco. */
.masthead[data-compact] .nav-logo {
  inline-size: var(--logo-w); opacity: 1;
  transform: none;
  margin-inline-end: 1.75rem;
}

/* Al plegarse, la barra gana un poco de peso visual para despegarse del
   contenido que pasa por debajo */
.masthead[data-compact] .site-nav { box-shadow: 0 6px 24px rgb(0 28 82 / .28); }
.site-nav { transition: box-shadow .3s var(--ease); }

/* La barra de administración de WordPress es fija: hay que descontarla */
.admin-bar .masthead { inset-block-start: 32px; }
@media (max-width: 782px) { .admin-bar .masthead { inset-block-start: 46px; } }

/* Quien pide menos movimiento, cambia de estado sin transición */
@media (prefers-reduced-motion: reduce) {
  .masthead, .nav-logo, .site-nav, .masthead-bar { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MENÚ MÓVIL
   ═══════════════════════════════════════════════════════════════════════
   OJO con el orden: esta regla tiene que ir ANTES del @media que la
   muestra. Al revés —que es como estaba— `display:none` gana en todos los
   anchos por ser posterior con la misma especificidad, y el botón no
   aparece nunca. */
.nav-toggle {
  display: none; margin-inline-start: auto;
  inline-size: 42px; block-size: 42px; border: 0; border-radius: 50%;
  background: rgb(255 255 255 / .12); cursor: pointer;
  place-items: center; align-content: center; gap: 4px;
  transition: background .2s var(--ease);
}
.nav-toggle:hover { background: rgb(255 255 255 / .2); }
.nav-toggle i { display: block; inline-size: 18px; block-size: 2px; background: var(--paper); border-radius: 1px; }

/* ═══════════════════════════════════════════════════════════════════════
   MÓVIL — lo que la maqueta simulaba con el marco de 390 px
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  /* La barra baja de 104 a 64 px; el logotipo la sigue al 75 %, o sea 48 px.
     Se toca --bar-h y nada más: el relleno y el logotipo salen de ahí.

     64 px es el techo que deja un teléfono de 390 px. Con el logotipo a 48 px
     el dibujo mide 284 px de ancho y quedan 292 disponibles tras descontar
     relleno, hamburguesa y separación. Por debajo de esa anchura manda el
     `max-inline-size: 100%` de .site-logo y el conjunto encoge proporcional. */
  .masthead-bar { --bar-h: 64px; gap: 1rem; }

  /* Con eslogan, 64 px no alcanzan: el eslogan ocupa el 17 % del alto y a 48
     px de logotipo sus letras medían 8. Se sube la barra a 84 y el logotipo
     al 82 % —69 px de alto, 274 de ancho—, que es lo que cabe en un teléfono
     de 390 junto a la hamburguesa (292 disponibles). El eslogan queda en
     ~12 px. Por debajo de 390 manda `max-inline-size: 100%` y encoge entero.
     El encabezado plegable está apagado en móvil, así que subir --bar-h aquí
     no mueve ningún desplazamiento. */
  .masthead-bar:has(.site-logo--eslogan) { --bar-h: 84px; --logo-pct: .82; }
  .masthead-actions { gap: .5rem; }
  .mh-btn { padding: .5rem .85rem; font-size: .6875rem; }

  /* La navegación pasa a menú desplegable */
  .site-nav-wrap { flex-direction: column; align-items: stretch; }
  .site-nav-inner { display: none; }
  .site-nav-inner[data-open] { display: flex; flex-direction: column; align-items: stretch; gap: .2rem; padding-block: .6rem; }

  /* Submenús dentro de la hamburguesa: en el flujo, no flotando, y cerrados
     hasta que se toca la flecha. Al abrir, todo el grupo se ve de una vez:
     cuatro columnas de «Coberturas» se apilan con su título encima. */
  .nav-item { flex-wrap: wrap; }
  .nav-item > .nav-parent-link { flex: 1 1 auto; }
  .nav-parent { flex: 1 1 auto; justify-content: space-between; }
  .nav-sub-toggle { inline-size: 44px; block-size: 40px; margin-inline-start: 0; }
  .nav-sub, .nav-item:has(.nav-col) > .nav-sub {
    position: static; inline-size: 100%; min-inline-size: 0;
    box-shadow: none; background: rgb(255 255 255 / .06);
    padding: .4rem; margin-block: .2rem .4rem; border-radius: 12px;
  }
  .nav-sub::before { content: none; }

  /* El menú abierto se desplaza POR DENTRO. El encabezado es sticky y, con
     «Coberturas» abierto, medía 1.194 px en una pantalla de 700: como un
     elemento sticky no se desplaza con la página, todo lo que quedaba por
     debajo del borde —Calendario, el buscador— era inalcanzable. Medido.
     88 px es la barra del logotipo en móvil (84) más el filete de acento (4).
     `dvh` y no `vh`: en el teléfono la barra del navegador aparece y
     desaparece, y con `vh` el final del menú quedaba debajo de ella. */
  .site-nav-wrap:has(.site-nav-inner[data-open]) {
    max-block-size: calc(100dvh - 88px);
    overflow-y: auto; overscroll-behavior: contain;
  }
  .nav-item[data-open]:has(.nav-col) > .nav-sub { display: flex; flex-direction: column; gap: .4rem; }
  .nav-toggle { display: grid; }

  /* ── La franja del menú, del color de la cabecera ───────────────────────
     Con el menú cerrado no hay nada que enseñar: en móvil los enlaces viven
     dentro del desplegable, así que la franja quedaba como una banda oscura y
     vacía de 14 px partiendo el azul de la cabecera en dos.

     Pasa a `--navy` y desaparece a la vista — la cabecera se lee como un solo
     plano hasta el filete de acento—. El tono oscuro vuelve al abrir el menú,
     que es cuando sí separa dos cosas distintas.

     Con `:has()` sobre el mismo `data-open` que ya gobierna el desplegable: el
     estado sigue viviendo en un solo sitio y no hay dos fuentes de verdad. */
  .site-nav { background: var(--navy); transition: background .25s var(--ease); }
  .site-nav:has(.site-nav-inner[data-open]) { background: var(--navy-deep); }

  /* Redes y buscador bajan AL FINAL del desplegable, que es donde se pidieron.
     Ya están al final en el marcado, así que basta con dejarlos aparecer.

     `:has()` sobre el contenedor en vez de un segundo atributo puesto por
     JavaScript: el estado del menú vive en un solo sitio —el `data-open` que
     pone nav.js— y no hay dos fuentes de verdad que se puedan desincronizar. */
  .nav-utils { display: none; }
  .site-nav-wrap:has(.site-nav-inner[data-open]) .nav-utils {
    display: flex; justify-content: space-between;
    padding-inline-start: 0; padding-block: .5rem .8rem;
    border-block-start: 1px solid rgb(255 255 255 / .15);
  }
  /* De canto no cabe: el divisor se acuesta y separa en horizontal. */
  .nav-sep { inline-size: 26px; block-size: 13px; flex-direction: column; }
  .nav-sep::before, .nav-sep::after, .nav-sep i {
    inline-size: auto; block-size: 1px;
    background: linear-gradient(to right,
      transparent 0%, rgb(255 255 255 / .55) 30%, rgb(255 255 255 / .55) 70%, transparent 100%);
  }
  .nav-sep::before { inline-size: 100%; block-size: 1px; }
  .nav-sep i      { inline-size: 72%; block-size: 1px; }
  .nav-sep::after { inline-size: 44%; block-size: 1px; }
  .navsearch, .navsearch:focus-within { inline-size: auto; flex: 1 1 auto; }

  /* En móvil el encabezado se queda como está, solo fijo: no se pliega.
     El logotipo ya vive en la barra superior y no hay sitio para dos.

     Antes había que anular tres propiedades —filas, opacidad y relleno— y
     olvidar una dejaba la barra encogida 32 px. Ahora el pliegue es un solo
     desplazamiento, así que se anula con una línea. */
  .masthead[data-compact] { transform: none; }
  .masthead[data-compact] .site-nav { box-shadow: none; }
  .nav-logo, .masthead[data-compact] .nav-logo { display: none; }

  /* La nota principal, partiendo del cuadrado y recortando un 25 % de alto.
     El cuadrado es el punto de partida porque a 16/9 la nota medía 197 px
     contra 329 de una tarjeta y era el elemento MÁS PEQUEÑO de la portada; se
     eligió cuadrado y no vertical porque `object-fit: cover` recorta desde el
     centro y en una foto de grupo se come a los de los extremos.

     1 ÷ 0,75 = 4/3. Se escribe como cuenta, igual que en escritorio, para que
     el porcentaje quede a la vista: es el número que se toca. */
  .hero-media { aspect-ratio: calc(1 / var(--hero-alto-movil)); }
  .hero { border-radius: 10px; margin-block-end: var(--ad-body); }
  .hero-copy { padding: 1.25rem; }
  .cards { grid-template-columns: 1fr; gap: var(--feed-gap); }
  .article-body { font-size: 1.0625rem; }
  .article-media { border-radius: 10px; }
  .site-foot-inner { padding-inline: 1.25rem; padding-block-end: 1.25rem; }
  .site-foot p { margin-inline-start: 0; }
}


/* ═══════════════════════════════════════════════════════════════════════
   WORDPRESS — clases que el núcleo y los plugins dan por sentadas
   ═══════════════════════════════════════════════════════════════════════ */
.screen-reader-text {
  position: absolute; inline-size: 1px; block-size: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.screen-reader-text:focus {
  inline-size: auto; block-size: auto; clip-path: none;
  inset-block-start: 1rem; inset-inline-start: 1rem; z-index: 100;
  padding: .75rem 1.25rem; border-radius: 999px;
  background: var(--paper); color: var(--navy); box-shadow: var(--sh-md);
}

.alignleft  { float: inline-start; margin: .3rem 1.5rem 1rem 0; }
.alignright { float: inline-end;   margin: .3rem 0 1rem 1.5rem; }
.aligncenter{ display: block; margin-inline: auto; }
/* `.alignwide` y `.alignfull` se retiraron el 2026-08-23: el tema NO declara
   `add_theme_support('align-wide')` —está dicho en inc/setup.php— así que el
   editor nunca ofrece esas alineaciones, y ninguna de las 14.390 entradas las
   usa. Comprobado por SQL antes de quitarlas. */

.wp-caption { max-inline-size: 100%; }
.wp-caption-text, figcaption {
  font-family: var(--display); font-size: .8125rem; line-height: 1.45;
  color: var(--ink-40); margin-block-start: .55rem;
}
.article-body img { block-size: auto; border-radius: 8px; }
.article-body h2 {
  font-family: var(--display); font-weight: 800; font-variation-settings: 'wdth' 90;
  font-size: clamp(1.35rem, 1.1rem + .8vw, 1.75rem); line-height: 1.2;
  letter-spacing: -.015em; margin-block: 2.25rem 1rem;
}
.article-body h3 {
  font-family: var(--display); font-weight: 700; font-variation-settings: 'wdth' 92;
  font-size: 1.1875rem; line-height: 1.25; margin-block: 1.75rem .75rem;
}
.article-body ul, .article-body ol { margin: 0 0 1.35rem; padding-inline-start: 1.5rem; }
.article-body li { margin-block-end: .5rem; }
.article-body blockquote {
  margin: 1.75rem 0; padding-inline-start: 1.25rem;
  border-inline-start: 3px solid var(--blue);
  font-size: 1.1875rem; line-height: 1.5; color: var(--ink-60);
}
.article-body a { color: var(--blue); text-decoration: underline; text-underline-offset: .15em; }
.article-body iframe, .article-body embed, .article-body video {
  max-inline-size: 100%; border-radius: 8px;
}

/* Paginación de archivos */
/* Centrado: con el feed a todo el ancho de 1684 px, un paginador pegado a la
   izquierda quedaba solo en una esquina. */
/* Aire abajo también (16/10): con margen inferior 0, la banda de AdSense o el
   pie quedaban pegados al paginador. */
.pagination { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; margin-block: 3rem 2rem; }
.pagination .page-numbers {
  display: grid; place-items: center; min-inline-size: 42px; block-size: 42px;
  padding-inline: .75rem; border-radius: 999px;
  font-family: var(--display); font-size: .875rem; font-weight: 700;
  background: var(--mist); color: var(--ink);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.pagination .page-numbers:hover { background: var(--blue); color: var(--paper); }
.pagination .page-numbers.current { background: var(--red); color: var(--paper); }

/* Widgets en la columna de la portada, debajo de «Hoy en la historia» */
.portada-aside .widget { background: var(--paper); border-radius: 12px; padding: 1.1rem; box-shadow: var(--sh-sm); }
.portada-aside .widget-title {
  font-size: .625rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-40); text-align: center;
  padding-block-end: .55rem; border-block-end: 1px solid var(--hair);
  margin-block-end: .9rem;
}

/* ═══════════════════════════════════════════════════════════════════════
   PUBLICIDAD DENTRO DEL CONTENIDO — SOLO MÓVIL
   ═══════════════════════════════════════════════════════════════════════
   En escritorio la publicidad vive únicamente en los rieles y en la banda
   central. El feed y el cuerpo de las notas van limpios.

   En móvil los rieles desaparecen, así que el inventario baja al contenido:
   una banda de 300 × 100 cada dos tarjetas y cada dos párrafos.

   El tema pinta estos huecos SIEMPRE y el CSS los oculta en escritorio. Se
   hace así, y no con una condición en PHP, porque LiteSpeed cachea una sola
   versión del HTML para todos los dispositivos: si dependiera de detectar el
   móvil en el servidor, la primera visita decidiría lo que ven las demás. */
.cards > .ad,
.article-body > .ad { display: none; }

@media (max-width: 1023px) {
  .cards > .ad,
  .article-body > .ad { display: grid; }

  /* Ancho fluido: ocupan todo el ancho del contenido, no 300 px fijos.
     En una pantalla de 390 px, un hueco de 300 dejaba 45 px de aire a cada
     lado y se veía como un recorte pegado, no como parte del sitio.
     La medida declarada (300 × 100) sigue siendo la referencia para el
     anunciante; aquí es un mínimo, no un tope. */
  .cards > .ad,
  .article-body > .ad {
    inline-size: 100%;
    max-inline-size: none;
  }
}

/* ── Los patrocinadores que no alcanzaron a salir ─────────────────────────
   Se vuelcan seguidos al final de la nota cuando el administrador lo activa.
   El aire entre ellos es el mismo `--ad-body` que respiran dentro del texto:
   ni pegados —parecerían un solo banner cortado— ni sueltos, que leería como
   contenido y no como publicidad.

   `grid` y no márgenes: entre hermanos con margen, el colapso deja la mitad de
   la separación y ya costó una corrección en la Fase 2. */
.ad-sobrantes { display: none; }

@media (max-width: 1023px) {
  .ad-sobrantes {
    display: grid; gap: var(--ad-body);
    margin-block-start: calc(var(--ad-body) * 2);
  }
  /* Dentro del volcado los bloques ya no necesitan su propio margen: lo pone
     el `gap`. Sin esto se sumarían los dos y quedarían al doble.

     El ancho fluido hay que repetirlo: la regla que lo da apunta a
     `.article-body > .ad`, y estos son nietos, no hijos. */
  .ad-sobrantes > .ad { margin-block: 0; inline-size: 100%; max-inline-size: none; }
}

/* Huecos libres, visibles solo en el sandbox mientras se diseña */
.ad--vacio {
  background: repeating-linear-gradient(45deg,
    var(--mist) 0 10px, color-mix(in srgb, var(--mist) 55%, var(--paper)) 10px 20px);
  opacity: .65;
}

/* Los anuncios enlazados no deben transmitir autoridad de enlace */
/* ── El banner llena EXACTAMENTE la caja del bloque ───────────────────────
   Iba con `block-size: 100%`, y no bastaba. `.ad` es una rejilla con
   `place-content: center`, así que su fila se dimensiona por el contenido y el
   100 % se medía contra una altura indefinida: caía a `auto`. Entonces mandaba
   la proporción que WordPress deduce de los atributos `width`/`height` del
   <img> —los del hueco, 300 × 100— y con la caja móvil a 350 px de ancho la
   imagen se pintaba de 118 px de alto dentro de un bloque de 100. Los 18 px de
   más los recortaba el `overflow: clip` sin que nada pareciera roto, y el
   dibujo quedaba 9 px descentrado.

   Con posición absoluta la caja del medio es la del bloque, punto. El
   `object-fit: contain` letterboxea dentro de esa caja exacta, y como el fondo
   es blanco el aire sobrante se confunde con el del propio banner — que es
   justo lo que se busca cuando el arte no viene de la medida pedida.

   Los rótulos del hueco vacío no se enteran: siguen siendo elementos de la
   rejilla y se centran igual. */
.ad > a,
.ad > img {
  position: absolute; inset: 0;
  inline-size: 100%; block-size: 100%;
}
.ad a { display: block; }
.ad img { inline-size: 100%; block-size: 100%; object-fit: contain; padding: 1px; }

.sin-resultados {
  font-family: var(--body); font-size: 1.125rem; color: var(--ink-60);
  padding-block: 2rem;
}

/* ═══════════════════════════════════════════════════════════════════════
   HUECOS DE GOOGLE
   ═══════════════════════════════════════════════════════════════════════
   Mismo fondo blanco que los directos; la diferencia la marca el trazo
   discontinuo, porque su tamaño es dinámico. */
.ad--google { background: var(--paper); }

/* ── Fondo blanco, dicho una vez y para todos ─────────────────────────────
   Vale igual en escritorio y en móvil, y es deliberado: un banner que no venga
   exactamente del tamaño del bloque se muestra con `object-fit: contain`, o sea
   entero y con aire a los lados. Ese aire tiene que ser BLANCO para que se
   confunda con el fondo del propio banner, que es lo que manda casi todo
   anunciante. Con un relleno de color se vería un recuadro dentro del recuadro.

   Se declara con `:where()` para no subir la especificidad: cualquier regla
   posterior que quiera otro fondo —un hueco vacío del sandbox, por ejemplo—
   sigue ganando sin tener que pelear. */
:where(.ad, .ad--movil-feed, .ad--movil-nota) { background: var(--paper); }
.ad--google::after {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--blue) 45%, transparent);
}


/* ═══════════════════════════════════════════════════════════════════════
   VOLVER ARRIBA
   ═══════════════════════════════════════════════════════════════════════
   Círculo flotante abajo a la derecha, en el azul de marca. Aparece al bajar
   y desaparece al llegar al tope — lo controla el mismo observador que pliega
   el encabezado, así que no hay un segundo vigía del scroll.

   El círculo mide 30 px, que es lo pedido, pero el área de toque se extiende
   a 44 px con un pseudoelemento transparente: 30 px es un blanco muy chico
   para un dedo, y agrandar solo el golpe evita tener que agrandar el dibujo. */
.volver-arriba {
  position: fixed;
  inset-block-end: 1.5rem;
  inset-inline-end: 1.5rem;
  z-index: 45;

  inline-size: 30px; block-size: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--g-blue);
  color: var(--paper);
  box-shadow: 0 4px 14px rgb(27 78 255 / .42);

  opacity: 0; visibility: hidden;
  transform: translateY(10px) scale(.85);
  transition: opacity .28s var(--ease),
              transform .28s var(--ease),
              visibility 0s linear .28s,
              box-shadow .2s var(--ease);
}

/* Área de toque de 44 px sin agrandar el círculo */
/* ── Contáctenos por WhatsApp ─────────────────────────────────────────────
   Pedido el 2026-10-16: lo más chico posible sin dejar de leerse. Primero fue
   una pastilla horizontal abajo a la izquierda; el mismo día pasó a una
   columna de tres niveles —icono, «Contáctenos por», «WhatsApp»— ENCIMA de
   «volver arriba», a la derecha.

   Fondo blanco y letra oscura a propósito: el verde de WhatsApp con texto
   blanco da ~2:1 de contraste, por debajo de lo legible a 12 px. El verde
   va en el círculo del icono, que es lo que se reconoce de lejos.

   El ::before agranda el área de toque sin agrandar la tarjeta. */
.wa-flotante {
  position: fixed; z-index: 45;
  /* Encima de «volver arriba» (30 px a 1,5 rem del borde) con 10 px de aire.
     Alineada por la derecha y no centrada sobre el botón: con ~92 px de ancho,
     centrarla sobre un círculo de 30 a 1,5 rem del borde la sacaba de la
     pantalla. */
  inset-block-end: calc(1.5rem + 30px + 10px); inset-inline-end: .75rem;
  /* Ancho fijo para que «volver arriba» pueda centrarse debajo (ver abajo). */
  inline-size: 104px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: .45rem .55rem .5rem;
  border-radius: 14px;
  background: var(--paper); color: var(--ink);
  font-family: var(--body); font-size: .6875rem; font-weight: 600; line-height: 1.15;
  text-align: center; text-decoration: none;
  box-shadow: 0 3px 12px rgb(11 16 32 / .22), 0 0 0 1px rgb(11 16 32 / .06);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.wa-flotante::before { content: ''; position: absolute; inset: -4px; }
/* «volver arriba» se corre para quedar centrado bajo la tarjeta: borde
   derecho de la tarjeta (.75rem) + media tarjeta (52) − medio botón (15).
   Solo si la tarjeta existe: sin número de WhatsApp vuelve a su esquina. */
body:has(.wa-flotante) .volver-arriba { inset-inline-end: calc(.75rem + 52px - 15px); }
.wa-flotante:hover, .wa-flotante:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgb(11 16 32 / .28), 0 0 0 1px rgb(11 16 32 / .06);
}
.wa-icono {
  inline-size: 28px; block-size: 28px; border-radius: 50%;
  display: grid; place-items: center; flex: 0 0 auto;
  background: #25D366; color: #fff;
}
.wa-icono svg { inline-size: 16px; block-size: 16px; fill: currentColor; }
/* Dos renglones: «Contáctenos por» / «WhatsApp», este en negrita. */
.wa-texto { display: grid; white-space: nowrap; }
.wa-texto b { font-weight: 800; font-size: .75rem; }
@media (max-width: 1023px) {
  /* Que la pastilla no tape el final del pie al llegar abajo del todo. */
  .site-foot { padding-block-end: 3.25rem; }
}
@media (prefers-reduced-motion: reduce) { .wa-flotante { transition: none; } }

.volver-arriba::before {
  content: ''; position: absolute; inset: -7px;
  border-radius: 50%;
}

.volver-arriba svg { inline-size: 16px; block-size: 16px; fill: currentColor; display: block; }

.volver-arriba[data-visible] {
  opacity: 1; visibility: visible;
  transform: none;
  transition: opacity .28s var(--ease),
              transform .28s var(--ease),
              visibility 0s,
              box-shadow .2s var(--ease);
}

.volver-arriba:hover  { box-shadow: 0 6px 20px rgb(27 78 255 / .55); }
.volver-arriba:active { transform: scale(.92); }

@media (prefers-reduced-motion: reduce) {
  .volver-arriba { transition: opacity .01ms, visibility .01ms; transform: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   INVITACIÓN A ANUNCIANTES — pie
   ═══════════════════════════════════════════════════════════════════════
   Pastilla en el azul de marca, cerrando el pie. Se elige el azul y no el
   rojo a propósito: el rojo está reservado para «en vivo» y última hora, y
   gastarlo en una llamada comercial le quitaría fuerza donde sí importa. */
.site-foot-cta {
  position: relative; z-index: 1;
  max-inline-size: var(--shell); margin-inline: auto;
  /* Poco aire abajo a propósito: la pastilla cierra el pie, y dejarle 40 px
     por debajo la hacía flotar suelta en vez de rematar el bloque. */
  padding: 0 var(--gap) 1.25rem;
  display: flex; justify-content: center;
}

.pill-sponsors {
  display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  justify-content: center;
  padding: .55rem 1.15rem;
  border-radius: 999px;
  background: var(--g-blue);
  color: var(--paper);
  /* Sin subrayado ni color de enlace: es un botón, aunque por dentro sea un <a> */
  text-decoration: none;
  font-family: var(--display);
  font-size: .9375rem;          /* 15 px */
  font-weight: 600;
  font-variation-settings: 'wdth' 94;
  line-height: 1.3;
  box-shadow: 0 3px 12px rgb(27 78 255 / .38);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.pill-sponsors:hover,
.pill-sponsors:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgb(27 78 255 / .52);
}
.pill-sponsors:active { transform: none; }

.pill-sponsors-correo { font-weight: 800; }

@media (max-width: 1023px) {
  .site-foot-cta { padding-inline: 1.25rem; padding-block-end: 1rem; }
  .pill-sponsors { font-size: .875rem; }
}

/* ─── PÁGINAS DE ENTIDAD ─────────────────────────────────────────────────────
   La ficha va entre la regla del tipo y el feed. Sin retrato: ver ficha.php.  */
.entidad-ficha{margin:0 0 clamp(20px,3vw,34px)}
.entidad-nombre{font-family:var(--tipo-titulo);font-weight:700;line-height:1.06;
  letter-spacing:-.02em;font-size:clamp(1.9rem,1.2rem + 2.6vw,3.1rem);margin:0 0 .35em}
.entidad-linea{font-family:var(--tipo-rotulo);text-transform:uppercase;
  letter-spacing:.07em;font-size:.78rem;color:var(--tinta-3);margin:0 0 .7em}
.entidad-contexto{max-width:62ch;color:var(--tinta-2);margin:0;
  font-size:clamp(.95rem,.9rem + .2vw,1.05rem);line-height:1.55}

/* ─── TABLAS DE DATOS ────────────────────────────────────────────────────────
   main.css no tenía NI UNA regla de tabla: un <table> se pintaba con el estilo
   por defecto del navegador y dentro de este diseño se veía roto.
   Este mismo CSS lo reutilizará el bloque de datos dentro de las crónicas.     */
.datos-caja{margin:0 0 clamp(22px,3vw,34px)}
.datos{width:100%;border-collapse:collapse;font-size:.95rem}
.datos th{text-align:left;font-family:var(--tipo-rotulo);text-transform:uppercase;
  letter-spacing:.07em;font-size:.7rem;color:var(--tinta-3);font-weight:600;
  padding:0 14px 8px 0;border-bottom:2px solid var(--linea)}
.datos td{padding:10px 14px 10px 0;border-bottom:1px solid var(--linea-suave);
  vertical-align:baseline}
.datos tr:last-child td{border-bottom:0}
.datos a{color:inherit;text-decoration:none;box-shadow:inset 0 -1px 0 var(--linea)}
.datos a:hover{color:var(--navy);box-shadow:inset 0 -1px 0 var(--navy)}
.datos-anio{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap;width:1%}
.datos-num{font-variant-numeric:tabular-nums;color:var(--tinta-3);width:1%;text-align:right}
.datos-segun{font-variant-numeric:tabular-nums;color:var(--tinta-3);font-size:.85rem;
  white-space:nowrap;width:1%}
.datos-hueco{color:var(--tinta-3);font-style:italic}
.datos-pie{margin:.6em 0 0;font-size:.8rem;color:var(--tinta-3)}
/* La tabla del bloque «Resultados» dentro de una nota. Hereda de `.datos`:
   un resultado tiene que verse igual en la nota que en la página del ciclista. */
.datos-resultados{margin-block:clamp(24px,3.4vw,38px)}
.datos-titulo{margin:0 0 .15em;font-family:var(--tipo-rotulo);text-transform:uppercase;
  letter-spacing:.06em;font-size:.82rem;color:var(--navy)}
.datos-linea{margin:0 0 .7em;font-size:.85rem;color:var(--tinta-3)}
.datos-tiempo{font-variant-numeric:tabular-nums;white-space:nowrap}
.datos-dif{color:var(--tinta-3);font-size:.85em}
/* En móvil se ocultan las columnas secundarias. «Según» NUNCA: es la fuente. */
@media (max-width:600px){
  .datos-num{display:none}
  .datos th,.datos td{padding-right:10px}
}

/* ─── ÍNDICE DEL ARCHIVO ─────────────────────────────────────────────────────*/
.archivo-cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;margin:0 0 clamp(24px,3vw,36px)}
.archivo-cifras>div{border:1px solid var(--linea);border-radius:8px;padding:14px 16px}
.archivo-cifras strong{display:block;font-family:var(--tipo-titulo);font-weight:700;
  font-size:clamp(1.4rem,1.1rem + 1vw,2rem);line-height:1.1;color:var(--navy)}
.archivo-cifras span{font-family:var(--tipo-rotulo);text-transform:uppercase;
  letter-spacing:.06em;font-size:.7rem;color:var(--tinta-3)}
.archivo-fichas{list-style:none;margin:0 0 14px;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.archivo-fichas a{display:flex;flex-direction:column;gap:2px;padding:12px 14px;
  border:1px solid var(--linea);border-radius:8px;text-decoration:none;color:inherit;
  transition:border-color .15s,transform .15s}
.archivo-fichas a:hover{border-color:var(--navy);transform:translateY(-1px)}
.archivo-nombre{font-weight:650;line-height:1.25}
.archivo-n{font-family:var(--tipo-rotulo);font-size:.72rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--tinta-3);font-variant-numeric:tabular-nums}
.archivo-vertodos{margin:0 0 clamp(26px,3vw,38px);font-family:var(--tipo-rotulo);
  text-transform:uppercase;letter-spacing:.07em;font-size:.78rem}
.archivo-vertodos a{color:var(--navy);text-decoration:none}
.archivo-vertodos a:hover{text-decoration:underline}
.archivo-abc{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px}
.archivo-abc a{display:inline-flex;align-items:center;justify-content:center;
  min-width:30px;height:30px;border:1px solid var(--linea);border-radius:6px;
  text-decoration:none;color:inherit;font-family:var(--tipo-rotulo);font-size:.8rem}
.archivo-abc a:hover{border-color:var(--navy);color:var(--navy)}
.archivo-grupo{margin:0 0 22px;scroll-margin-top:calc(var(--bar-h) + 16px)}
.archivo-letra{font-family:var(--tipo-rotulo);font-size:.85rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--navy);margin:0 0 8px;padding-bottom:5px;
  border-bottom:2px solid var(--linea)}
.archivo-lista{list-style:none;margin:0;padding:0;columns:3;column-gap:26px}
.archivo-lista li{break-inside:avoid;display:flex;justify-content:space-between;
  gap:10px;padding:3px 0;align-items:baseline}
.archivo-lista a{text-decoration:none;color:inherit}
.archivo-lista a:hover{color:var(--navy)}
@media (max-width:900px){.archivo-lista{columns:2}}
@media (max-width:560px){.archivo-lista{columns:1}}