/* ============================================================================
   LA CRONOLOGÍA DE «CÓMO LO PARAMOS»
   ============================================================================
   Un día por hito, del más antiguo al más reciente. Cada hito es una banda a todo el ancho
   con su ficha a la izquierda —qué pasó ese día— y una tira de recortes a la derecha que se
   desplaza mientras la banda cruza la pantalla.

   DOS MOVIMIENTOS INDEPENDIENTES, Y MANDA EL DE LA PÁGINA. Aquí hubo un `position: sticky`
   que clavaba la ficha durante varias pantallas mientras la tira recorría todo el ancho:
   funcionaba, pero se sentía como si la página se hubiera detenido. Ahora nada se pega: la
   página baja con normalidad y las tiras se mueven al pasar.

   EL MOVIMIENTO NO ESTÁ AQUÍ, ESTÁ EN js/cronologia.js. Esta hoja tuvo animaciones por scroll
   del CSS (`animation-timeline`, `--recorrido` en unidades de contenedor, `@keyframes`), que
   las lleva el compositor y no cuestan JavaScript. Se quitaron el 4-ago-2026: esa animación
   va de 0 a 1 sobre un tramo, así que cada día recorría lo suyo mientras su banda cruzaba la
   pantalla y los hitos iban a velocidades distintas según cuántos recortes tuvieran. Velocidad
   igual para todos y bucle sin fin piden sumar píxeles y dar la vuelta, y eso es estado.
   No volver a intentarlo por CSS.

   Lo que SÍ decide esta hoja: la maqueta, el desvanecido de los bordes, qué días no llevan
   carrusel (por la clase que pone el JavaScript) y el respaldo de quien no ejecuta
   JavaScript o pide menos movimiento, que es un carrusel de arrastre nativo. En los tres
   casos se llega a todos los recortes.  */

.cronologia-2 {
  --tw: 300px;          /* ancho de cada recorte en la tira */
  --tg: 18px;           /* hueco entre recortes */
  --ficha: 300px;       /* ancho de la ficha del día */
  --difuminado: 26px;   /* el desvanecido de los bordes de la tira */
  list-style: none; margin: 0;
  /* El `padding` va COMPLETO y a CERO. Dos motivos, y los dos costaron:
     · una lista trae de fábrica 40 px de sangría a la izquierda, y poniendo solo el de arriba
       esos 40 px sobrevivían y metían TODAS las bandas hacia dentro — en escritorio
       desalineaba la ficha del día respecto al titular y en móvil impedía que el carrusel
       llegara al canto de la pantalla;
     · y el hueco de arriba que había aquí solo lo tenía el PRIMER hito, así que su carrusel
       quedaba más lejos de la banda blanca que del separador de abajo. Cada hito ya pone su
       propio aire con el relleno de `.dia`, que sí es igual arriba y abajo. */
  padding: 0;
}

/* -------------------------------------------------------------------------- las bandas */
/* CADA HITO, UNA BANDA A TODO EL ANCHO, alternando dos tonos del papel. Es el recurso
   clásico del diseño editorial para dar ritmo en una pieza larga, y aquí hacía falta: sin él
   los hitos se leían como una masa continua. Los dos tonos son los del propio sistema, así
   que la cronología no mete ni un color nuevo.

   PARA LLEGAR A LOS BORDES no se usa `100vw`: ese valor INCLUYE la barra de desplazamiento,
   así que en un navegador con barra visible la banda sobresale unos quince píxeles y aparece
   scroll horizontal en toda la página. En su lugar, en esta página el contenedor de 1240 px
   se suelta y lo vuelven a aplicar por dentro los bloques que sí deben ir estrechos. */
/* EL TITULAR, A LA MISMA DISTANCIA DE LA CABECERA QUE DE LA BANDA. El hueco de arriba lo ponía
   el relleno de `.med-main` y el de abajo el margen de la banda, y no coincidían. Ahora el de
   arriba se pasa a la propia portada y los dos valen lo mismo: como el interlineado del titular
   reparte su sobrante por igual arriba y abajo, con las cajas a la misma distancia los huecos
   que se VEN también salen iguales. */
.pagina-cronologia .med-main { max-width: none; padding-inline: 0; padding-top: 0; }
.pagina-cronologia .med-portada { padding-top: 34px; }
/* Más interlineado que el resto del sitio: el bloque rojo de «LA LEY DE NIETOS» sobresale por
   arriba de su renglón, y con el 1,18 general tocaba el renglón de encima. */
.pagina-cronologia .med-portada h1 { line-height: 1.36; }
.pagina-cronologia .med-portada,
.pagina-cronologia .mosaico-seo,
.pagina-cronologia .med-actualizado,
.pagina-cronologia .med-banda .med-entrada {
  max-width: 1240px; margin-inline: auto; padding-inline: 24px;
}

/* -------------------------------------------------------------- la banda de la entradilla */
/* El párrafo de entrada va sobre BLANCO y a todo el ancho, para que se despegue del resto de
   la página. El blanco es `--papel`, el mismo de las tarjetas y los paneles: en este sistema
   no hay dos blancos. Los filetes de arriba y abajo son los mismos que separan las bandas de
   los hitos, así que la banda se lee como la primera de la serie y no como un parche. */
.pagina-cronologia .med-banda {
  background: var(--papel);
  margin: 34px 0 0;   /* el MISMO que el hueco de arriba del titular */
  padding-block: 24px;
  box-shadow: inset 0 1px 0 var(--linea), inset 0 -1px 0 var(--linea);
}

.dia { position: relative; padding: 7vh 0; }
.dia--impar { background: var(--fondo); }
.dia--par { background: var(--fondo-2); }
/* Un filete fino entre bandas: los dos tonos se parecen a propósito —el salto de color no
   debe gritar— y esta línea es la que deja claro dónde empieza otro día. */
.dia + .dia { box-shadow: inset 0 1px 0 var(--linea); }

/* La ficha se alinea con el contenedor de 1240 px; la tira, en cambio, sigue hasta el borde
   derecho de la pantalla. Así el corte de la derecha ocurre en el borde y no a mitad de
   página, que es donde se notaba como un recorte raro.
   El `calc` con `100%` —y no con `vw`— evita otra vez el problema de la barra de scroll. */
.dia-fijo {
  display: grid; grid-template-columns: var(--ficha) minmax(0, 1fr); gap: 34px;
  align-items: center;
  padding-left: max(24px, calc((100% - 1240px) / 2 + 24px));
}

/* ------------------------------------------------------------------------ la ficha del día */
/* El filete rojo vertical a la izquierda es el mismo recurso de las creatividades del
   partido que ya usa el resto del sitio. Aquí hace además de eje de la cronología. */
.dia-ficha { position: relative; padding-left: 26px; }
.dia-ficha::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  background: var(--vox-rojo);
}
/* La marca del hito: cuadrada, nunca un círculo. El sistema es rectangular. */
.dia-ficha::after {
  content: ''; position: absolute; left: -6px; top: 14px; width: 15px; height: 15px;
  background: var(--vox-rojo); border: 3px solid var(--fondo);
}
.dia--par .dia-ficha::after { border-color: var(--fondo-2); }

/* LA FECHA: el número grande y, a su derecha, mes y año repartidos en la MISMA altura —el mes
   arriba del todo y el año abajo del todo—. Eso es `stretch` en la fila para que la columna de
   la derecha crezca hasta lo que mide el número, y `space-between` dentro para que los dos
   renglones se vayan a los extremos. No hay que ajustar ningún número a mano: si cambia el
   cuerpo del día, los otros dos se recolocan solos. */
/* EL CUERPO DE LA FECHA ES UNA VARIABLE (--num) y el mes se calcula de ella: así no hay dos
   números que mantener a la vez. Más pequeño desde el 11-oct-2026 (antes llegaba a 74 px): con
   un hito de varios días —«22/23», «13-15»— y un mes largo, el bloque se salía de su columna y
   el mes pisaba la primera tarjeta del carrusel (lo vio el usuario). */
.dia-fecha {
  --num: clamp(40px, 4.4vw, 56px);
  display: flex; align-items: stretch; gap: 10px; margin-bottom: 12px; max-width: 100%;
}
/* Los hitos de varios días llevan cinco caracteres donde los demás llevan dos: van algo más
   pequeños para que número y mes quepan siempre en el ancho de la ficha. */
.dia-fecha--larga { --num: clamp(34px, 3.5vw, 44px); }
/* El número del día, grande y ultranegro: es el ancla visual de toda la banda. */
.dia-num {
  font-family: var(--display); font-size: var(--num); line-height: .82;
  letter-spacing: -.02em; color: var(--tinta); white-space: nowrap;
}
/* UN HITO PUEDE CUBRIR DOS DÍAS. El 29 y el 30 de julio son la misma cosa —la providencia del
   Supremo y su eco en la prensa jurídica—, así que van juntos y la ficha dice «29/30».
   VA AL MISMO CUERPO QUE LOS DEMÁS NÚMEROS, y esto es a propósito: se probó a encogerlo para
   que cupiera y el resultado era una ficha que no cuadraba con las otras veintitrés. Lo único
   que cambia es que se aprieta el espaciado, porque son cinco caracteres en un hueco pensado
   para dos, y así la barra queda pegada a las dos cifras. El mes y el año siguen repartiéndose
   la altura del número, que no cambia. */
.dia-num--largo { letter-spacing: -.055em; }

.dia-mes {
  display: flex; flex-direction: column; justify-content: space-between;
  font-family: var(--titular); font-weight: 700; line-height: .92;
  /* EL CUERPO SALE DE UNA CUENTA, no de probar números. Los dos renglones tienen que llenar la
     altura del número sin llegar a tocarse: esa altura es `cuerpo del número × 0,82` y lo que
     ocupan los dos renglones es `2 × cuerpo del mes × 0,92`. Igualando, el mes sería 0,446
     veces el número; se usa 0,42 para dejar un par de píxeles de aire y que no se solapen
     nunca, por mucho que redondee la tipografía. El número es `clamp(46px, 6vw, 74px)`, así
     que este es el mismo `clamp` multiplicado por 0,42. Si se cambia uno, hay que cambiar el
     otro: son el mismo número escrito dos veces. */
  font-size: calc(var(--num) * .42);
  /* Un mes largo —SEPTIEMBRE— no puede partirse en dos líneas: serían tres renglones dentro
     de un hueco calculado para dos y se saldría por abajo del número. */
  white-space: nowrap;
  text-transform: uppercase; letter-spacing: .06em;
}
.dia-mesn { color: var(--vox-rojo); }
.dia-anno { color: var(--tinta-3); letter-spacing: .04em; }

.dia-titulo {
  font-family: var(--titular); font-size: clamp(21px, 2.3vw, 28px); font-weight: 700;
  line-height: 1.06; text-transform: uppercase; letter-spacing: .005em;
  margin: 0 0 10px; color: var(--tinta);
}
.dia-resumen { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--tinta-2); }

/* El justificado de las páginas de lectura NO alcanza a la cronología. Los selectores llevan
   `.med-main` delante para ganarle a `.med-main p`, que si no gana por especificidad y deja
   la ficha con calles enormes entre palabras: en una columna de 300 px, justificar un
   párrafo de tres líneas lo destroza. Es la misma trampa que dejó sin borde el botón de
   rechazar del aviso de cookies. */
.med-main .dia p, .med-main .dia h2, .med-main .dia li {
  text-align: initial; hyphens: manual;
}

/* --------------------------------------------------------------------------- la tira */
.dia-carro { position: relative; min-width: 0; }

.dia-caja {
  overflow: hidden;
  /* `pan-y` deja el scroll vertical de la página al navegador y nos entrega a nosotros el
     gesto horizontal. Sin esto, en el móvil el dedo hacia los lados no llega nunca. */
  touch-action: pan-y;
  cursor: grab;
  /* Desvanecido FINO y pegado a los bordes. Empezó siendo de 40 y 52 px y se comía media
     tarjeta; a 26 px marca el corte sin tapar contenido. */
  /* CON PREFIJO Y SIN ÉL, y el prefijado PRIMERO. Safari solo entiende `mask-image` sin
     prefijo desde la 15.4: en un iPhone con menos, la línea sin prefijar se descarta y la tira
     se queda SIN difuminar, que es exactamente el síntoma que se vio el 6-ago-2026. El resto
     del proyecto ya prefija lo que lo necesita (`user-select`, `appearance`, …); esto se había
     quedado fuera. */
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0, #000 var(--difuminado),
    #000 calc(100% - var(--difuminado)), transparent 100%);
  mask-image: linear-gradient(90deg,
    transparent 0, #000 var(--difuminado),
    #000 calc(100% - var(--difuminado)), transparent 100%);
}
.dia--agarrado .dia-caja { cursor: grabbing; }
/* Mientras se arrastra, el texto no se selecciona: si no, tirar del carrusel deja media
   página en azul. */
.dia--agarrado .dia-caja, .dia--agarrado .dia-caja * { user-select: none; }

/* UN SOLO `transform`, y lo escribe js/cronologia.js. El desplazamiento por scroll y el
   arrastre con la mano son el mismo número, así que no hay dos capas que sincronizar: al
   soltar el carrusel sigue desde donde se dejó porque nunca dejó de ser la misma posición. */
.dia-tira {
  list-style: none; margin: 0;
  /* SITIO PARA LA SOMBRA. La caja recorta —tiene que hacerlo, para que la tira se corte en el
     borde de la pantalla— y el desvanecido solo actúa en horizontal, así que la sombra de las
     tarjetas se cortaba en seco por abajo con una línea recta. Aquí no se difumina: se le da
     el hueco que necesita. `--sombra` baja 8 px y difumina 22, o sea unos 30; con 40 no llega
     nunca al borde.
     VA IGUAL ARRIBA QUE ABAJO aunque arriba sobre —la sombra solo sube 14—: con 26 y 40 las
     tarjetas quedaban descentradas dentro de su banda, y se veía en el primer hito, más lejos
     de la banda blanca que del separador de abajo. Lo que se mira es dónde están las tarjetas,
     no dónde acaba la caja. */
  padding: 40px 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: var(--tw); gap: var(--tg);
  transform: translate3d(0, 0, 0);
}
/* Y por lo mismo, dentro de la cronología el realce al pasar el ratón NO usa `--sombra-alta`,
   que baja 66 px y no cabría en ninguna reserva razonable. Una sombra intermedia da el mismo
   efecto de levantar la tarjeta y entra de sobra. */
.dia .rec:hover .rec-tarjeta,
.dia .rec:focus-within .rec-tarjeta { box-shadow: 0 10px 26px rgba(28, 28, 28, .22); }
/* SIN `will-change`. Son 21 tiras, y marcarlas todas obliga al navegador a mantener 21 capas
   compuestas vivas a la vez. `translate3d` ya basta para que el movimiento vaya en la GPU.
   Es la misma lección que dejó el mapa: `will-change` en el tablero empeoraba el repintado
   en vez de mejorarlo. */

/* -------------------------------------------------------------------------- la flecha */
/* La señal de que ahí se puede tirar con la mano, y de paso el único modo de avanzar con el
   teclado. VA FUERA DE `.dia-caja` A PROPÓSITO: la máscara del desvanecido afecta a todo lo
   que hay dentro, y justo en el borde derecho —que es donde tiene que estar— la habría
   dejado transparente.
   Rectangular y roja, como el resto del sistema: aquí no hay círculos. */
.dia-flecha {
  position: absolute; right: 10px; top: 50%; z-index: 2;
  display: grid; place-items: center;
  width: 40px; height: 48px; padding: 0; border: 0;
  background: var(--vox-rojo); color: #fff;
  box-shadow: var(--sombra-alta);
  cursor: pointer; transform: translateY(-50%);
  transition: background .15s ease;
}
.dia-flecha svg {
  width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
}
.dia-flecha:hover { background: var(--tinta); }
.dia-flecha:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }
/* Sin JavaScript la flecha no tiene a quién avisar: la caja se arrastra sola con el dedo. */
html:not(.cr-js) .dia-flecha { display: none; }

/* Un empujoncito de tres píxeles que se repite: una flecha quieta se lee como adorno y una
   que se mueve se lee como «tira de aquí». Es un `transform` sobre un dibujo de 20 px, así
   que no cuesta nada aunque haya uno por hito. */
/* SIN GUARDA DE «MENOS MOVIMIENTO». Estaba dentro de `prefers-reduced-motion: no-preference`,
   y por decisión del usuario del 6-ago-2026 la web tiene que verse EXACTAMENTE IGUAL con ese
   ajuste puesto o sin él. */
.dia-flecha svg { animation: cr-llamada 2.6s ease-in-out infinite; }
@keyframes cr-llamada {
  0%, 62%, 100% { transform: translateX(0); }
  76% { transform: translateX(3px); }
  88% { transform: translateX(0); }
}

/* ------------------------------------------------- los días que caben enteros no son tira */
/* Con pocos recortes no hay nada que desplazar ni nada que desvanecer: se reparten el ancho
   y se ven todos. El umbral cambia con la pantalla —en escritorio caben tres, en móvil solo
   uno— y la clase la pone js/cronologia.js escuchando la consulta de medios: es el único
   dato de toda la mecánica que el CSS no puede resolver solo, porque es un número distinto
   por ancho y no un simple `data-n`. Las copias del bucle sobran aquí y se esconden.
   El JavaScript, además de poner la clase, borra el `transform` que hubiera dejado escrito:
   un estilo en línea le gana a esta hoja. */
.dia--sin-tira .dia-caja { -webkit-mask-image: none; mask-image: none; cursor: auto; }
.dia--sin-tira .dia-tira {
  transform: none;
  /* LAS TARJETAS NO CAMBIAN DE TAMAÑO. Aquí hubo un `1fr` que las repartía el ancho, y un día
     de una sola noticia se convertía en un recorte gigante de pantalla entera. Con
     `minmax(0, var(--tw))` mantienen su ancho de siempre y solo se encogen si de verdad no
     caben, que es lo único que puede pasar con tres en una ventana estrecha.
     Y el reservado de la derecha para que la tercera no muera contra el borde de la pantalla:
     la tira llega al borde a propósito cuando hay carrusel —el corte tiene que ocurrir ahí—,
     pero cuando no lo hay, una tarjeta pegada al canto se lee como cortada. */
  grid-auto-columns: minmax(0, var(--tw));
  padding-right: 24px;
}
.dia--sin-tira .rec--eco { display: none; }
.dia--sin-tira .dia-flecha { display: none; }

/* ------------------------------------------------- sin motor: carrusel de arrastre nativo */
/* Si no hay JavaScript —o si el sistema pide menos movimiento—, la tira pasa a arrastrarse
   con el dedo y el navegador pone la inercia. Los recortes siguen todos accesibles, que es lo
   único que no se puede negociar. */
html:not(.cr-js) .dia-caja { overflow-x: auto; scroll-snap-type: x proximity; }
html:not(.cr-js) .dia-tira > * { scroll-snap-align: start; }


/* ------------------------------------------------------------------------------- móvil */
@media (max-width: 900px) {
  /* «CÓMO PARAMOS» EN UN RENGLÓN Y EL BLOQUE ROJO EN OTRO. Dejado al navegador, partía por
     donde le cuadraba y dejaba «LA LEY DE» arriba y «NIETOS» solo abajo, con el resaltado
     partido en dos trozos. Pasando la primera parte a bloque, el corte cae siempre donde debe.
     Va solo en móvil: en escritorio el titular entra de sobra en una línea. */
  .pagina-cronologia .med-portada .h1-l1 { display: block; }
  .pagina-cronologia .med-portada { padding-top: 26px; }
  .pagina-cronologia .med-banda { margin-top: 26px; }

  .cronologia-2 { --tw: 78vw; --tg: 14px; --difuminado: 16px; }
  /* En vertical la ficha va ENCIMA del carrusel, no al lado, así que la banda empieza en texto
     y termina en tarjetas. Los 40 px que la tira reserva para la sombra cuentan abajo y no
     arriba, y sin descontarlos la banda queda con el doble de aire por debajo. El `max` es por
     si la pantalla es muy baja y 5vh no llega a 40. */
  .dia { padding: 5vh 0 max(0px, calc(5vh - 40px)); }
  .dia-fijo {
    grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start;
    padding-left: 16px;
  }
  /* El texto del hito tenía margen a la izquierda y CERO a la derecha: en el teléfono las
     líneas llegaban al canto de la pantalla y parecían cortadas (lo vio el usuario el
     12-oct-2026). El margen es solo para el texto; el carrusel sigue de borde a borde. */
  .dia-ficha { padding-right: 20px; }
  /* LA TIRA VA DE BORDE A BORDE DE LA PANTALLA, también por la izquierda. La ficha del día
     mantiene su margen de 16 px —es texto y se lee—, pero el carrusel no: en una pantalla
     estrecha, dejarle un margen a un lado y no al otro lo hace parecer descuadrado, y el
     corte tiene que ocurrir en el canto del teléfono igual a los dos lados. Se deshace con un
     margen negativo el `padding-left` que la rejilla pone para el conjunto.
     Si de paso la tira se sale por encima de la banda de color del hito siguiente, no pasa
     nada: se habló y se aceptó. */
  .dia-carro { margin-left: -16px; }
  /* Salvo cuando no hay carrusel: ahí la tarjeta está entera y es una pieza más de la
     maqueta, así que se alinea con la ficha del día. Pegada al canto por un lado y con aire
     por el otro se leería como cortada, que es justo lo contrario de lo que se busca. */
  .dia--sin-tira .dia-carro { margin-left: 0; }
  .dia-flecha { right: 6px; width: 34px; height: 42px; }
  .dia-flecha svg { width: 17px; height: 17px; }
}

/* TELÉFONO EN HORIZONTAL (revisión de móvil del 11-oct-2026): cada recorte medía 633 px de
   ancho y no cabía en los ~340 px de alto. Se ciñe al ancho de una tarjeta normal. */
@media (orientation: landscape) and (max-height: 500px) {
  .cronologia-2 { --tw: min(78vw, 340px); }
}

/* EL HITO DESTACADO (11-oct-2026, petición del usuario): el día en que el Supremo dio la razón a
   VOX y paró la Ley de Nietos va en una banda ROJA a todo el ancho, con el texto en blanco. Lo
   marca `"destacado": true` en datos/noticias/dias.json; las tarjetas no cambian. */
.dia--destacado { background: var(--vox-rojo); }
/* Fecha y título en NEGRO sobre el rojo (petición del usuario, 11-oct-2026: «se lee bien»);
   el resumen sigue en blanco. */
.dia--destacado .dia-num, .dia--destacado .dia-mesn, .dia--destacado .dia-titulo { color: #000; }
.dia--destacado .dia-anno { color: rgba(0, 0, 0, .72); }
.dia--destacado .dia-resumen { color: #fff; }
.dia--destacado .dia-ficha::before { background: #fff; }
.dia--destacado .dia-ficha::after { background: #fff; border-color: var(--vox-rojo); }