/* =======================================================================
   linea-profetica.css — Estilos del componente de línea de tiempo.

   Misma identidad que el resto del sitio: blanco, negro y #00b3e5.

   Y la misma regla que gobierna todo: el cian sobre blanco solo da 2.45
   de contraste, así que nunca es tinta. Por eso la línea vive en una
   placa negra, igual que el modelo 3D del estudio: sobre negro el cian
   da 8.57 y puede llevar el peso del recorrido y de los hitos.
   ======================================================================= */

@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../vendor/fonts/schibsted-1.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../vendor/fonts/schibsted-2.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

:root {
  --blanco: #ffffff;
  --negro:  #000000;
  --cian:   #00b3e5;

  --negro-72: rgba(0, 0, 0, 0.72);
  --negro-55: rgba(0, 0, 0, 0.55);
  --hilo:     rgba(0, 0, 0, 0.14);

  /* Sobre la placa negra */
  --sobre-negro-72: rgba(255, 255, 255, 0.72);
  --sobre-negro-48: rgba(255, 255, 255, 0.48);
  --sobre-negro-15: rgba(255, 255, 255, 0.15);

  --sans: 'Schibsted Grotesk', ui-sans-serif, system-ui, -apple-system,
          'Segoe UI', Roboto, sans-serif;

  --radio: 24px;
  --radio-control: 8px;
  --sale-rapido: cubic-bezier(0.23, 1, 0.32, 1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--blanco);
  color: var(--negro);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 600; }

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 3px solid var(--negro); outline-offset: 2px; }
.linea__placa :focus-visible { outline-color: var(--cian); }

/* =======================================================================
   La placa
   ======================================================================= */

.linea__placa {
  background: var(--negro);
  color: var(--blanco);
  border-radius: var(--radio);
  padding: clamp(26px, 4vw, 44px) clamp(22px, 4vw, 44px) clamp(22px, 3vw, 34px);
}

/* =======================================================================
   El eje
   ======================================================================= */

.linea__eje { position: relative; }

.linea__pista {
  position: relative;
  height: 12px;
  background: var(--sobre-negro-15);
  border-radius: 2px;
  /* El sitio de arriba lo reserva la zona de llamadas, que sabe cuánto
     necesita; el mando va pegado justo debajo. */
  margin: 0;
  touch-action: none;   /* el arrastre no debe desplazar la página */
}

/* El recorrido: el cian haciendo el trabajo, sobre negro. */
.linea__recorrido {
  position: absolute; inset: 0 auto 0 0;
  background: var(--cian);
  border-radius: 2px;
  width: 0;
}

/* ---------- Tramos ---------- */

.linea__tramos { position: absolute; inset: 0; pointer-events: none; }

.linea__tramo {
  position: absolute; top: 0; bottom: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.55);
}
.linea__tramo:first-child { border-left: none; }

/* ---------- Llamadas ----------

   Cada hito cuelga de un tallo: caja con el título, caja con la fecha, y
   una línea fina que baja hasta el anillo del eje. El ancla mide cero de
   ancho y está justo sobre el hito, así que el tallo cae a plomo aunque la
   caja se haya desplazado para no salirse de la placa.                    */

.linea__llamadas { position: relative; }

.linea__llamada {
  position: absolute; bottom: 0;
  width: 0; height: var(--alto, 80px);
  cursor: pointer;
}
/* El tallo */
.linea__llamada::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  top: var(--caja, 54px);
  width: 1px;
  background: var(--sobre-negro-15);
  transition: background 150ms ease;
}
.linea__llamada.alcanzado::after { background: rgba(0, 179, 229, 0.55); }

/* Una llamada baja de nivel cuando su vecina le ocupa el sitio, así que un
   tallo largo puede cruzar por delante de la caja de al lado. Se apilan por
   nivel —la más cercana al eje, arriba— y las cajas llevan fondo opaco para
   tapar el tallo que pase por detrás. */
.linea__llamada[data-nivel='0'] { z-index: 3; }
.linea__llamada[data-nivel='1'] { z-index: 2; }
.linea__llamada[data-nivel='2'] { z-index: 1; }

.linea__llamada-caja {
  position: absolute; top: 0; left: 0;
  translate: var(--tx, -50%) 0;
  display: grid; justify-items: start; gap: 4px;
  width: max-content; max-width: 22ch;
  background: var(--negro);
}

.linea__llamada-titulo {
  padding: 7px 11px;
  border: 1px solid var(--sobre-negro-15);
  border-top: 2px solid var(--sobre-negro-48);
  border-radius: 3px;
  font-size: 0.875rem; font-weight: 600;
  line-height: 1.25;
  color: var(--blanco);
  transition: border-color 150ms ease, background 150ms ease;
}
.linea__llamada-fecha {
  padding: 4px 11px;
  background: var(--sobre-negro-15);
  border-radius: 3px;
  font-size: 0.8125rem;
  color: var(--sobre-negro-72);
  white-space: nowrap;
}

/* Un hito alcanzado se marca en el filete superior, que es donde la
   referencia pone el color, y no en el texto: el cian no es tinta. */
.linea__llamada.alcanzado .linea__llamada-titulo { border-top-color: var(--cian); }

@media (hover: hover) and (pointer: fine) {
  .linea__llamada:hover .linea__llamada-titulo {
    background: var(--sobre-negro-15);
    border-color: var(--sobre-negro-48);
  }
}

/* El asa de reajuste, solo en edición. */
.linea__asa {
  position: absolute; top: -9px;
  width: 18px; height: 30px;
  translate: -50% 0;
  background: var(--blanco);
  border: 1px solid var(--negro);
  border-radius: 4px;
  padding: 0; cursor: ew-resize;
  pointer-events: auto;
  z-index: 4;
}
.linea__asa::before {
  content: '';
  position: absolute; inset: 7px;
  border-left: 1px solid var(--negro-55);
  border-right: 1px solid var(--negro-55);
}
.linea__asa:hover { background: var(--cian); }

/* ---------- Hitos ---------- */

.linea__hitos { position: absolute; inset: 0; }

.linea__hito {
  position: absolute; top: 50%;
  translate: -50% -50%;
  display: grid; justify-items: center; gap: 6px;
  background: none; border: none; padding: 10px 6px;
  font-family: inherit; color: var(--blanco);
  cursor: pointer;
  z-index: 3;
}

.linea__hito-punto {
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--negro);
  border: 2px solid var(--sobre-negro-48);
  transition: background 150ms ease, border-color 150ms ease,
              scale 150ms var(--sale-rapido);
}
/* Un hito alcanzado queda sobre el recorrido, que ya es cian: si el punto
   también fuera cian de borde a borde desaparecería dentro de la barra. El
   filete negro lo recorta contra ella. */
.linea__hito.alcanzado .linea__hito-punto {
  background: var(--cian);
  border-color: var(--negro);
}

.linea__hito-etq {
  position: absolute; bottom: 100%; margin-bottom: 2px;
  font-size: 0.8125rem; font-weight: 500;
  color: var(--sobre-negro-72);
  white-space: nowrap;
}
/* Un hito interior del tramo ampliado no se dibuja en el eje principal: a
   esa escala se apiñaría con sus vecinos en un borrón. Su punto, su fecha y
   su ficha están en la banda ampliada de abajo, que es para lo que existe. */
.linea__hito--muda { display: none; }
.linea__hito.alcanzado .linea__hito-etq { color: var(--blanco); }

@media (hover: hover) and (pointer: fine) {
  .linea__hito:hover .linea__hito-punto { scale: 1.25; }
}

/* En edición el hito se agarra. */
.linea[data-modo='edicion'] .linea__hito { cursor: grab; }
.linea.arrastrando .linea__hito { cursor: grabbing; }
.linea.arrastrando { user-select: none; }

/* ---------- El mando ---------- */

/* Un <input type="range"> restilizado: así el teclado, el táctil y el
   lector de pantalla funcionan sin reimplementar nada. */
.linea__mando {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 30px;
  margin: -6px 0 0;
  background: none;
  cursor: ew-resize;
}
.linea__mando::-webkit-slider-runnable-track { height: 30px; background: none; }
.linea__mando::-moz-range-track { height: 30px; background: none; }

/* El tirador va bajo el eje, entre él y la regla. Redondeado y estrecho
   para que se lea como un agarre y no como un trozo de la línea. */
.linea__mando::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 22px;
  background: var(--blanco);
  border: 1px solid var(--negro);
  border-radius: 6px;
  cursor: ew-resize;
}
.linea__mando::-moz-range-thumb {
  width: 12px; height: 22px;
  background: var(--blanco);
  border: 1px solid var(--negro);
  border-radius: 6px;
  cursor: ew-resize;
}
.linea__mando:focus-visible::-webkit-slider-thumb { background: var(--cian); }
.linea__mando:focus-visible::-moz-range-thumb { background: var(--cian); }

/* =======================================================================
   La regla

   La tira de divisiones bajo el eje, como los meses de un calendario: da
   la escala absoluta del período para que los tramos y los hitos se lean
   contra algo, no en el aire.
   ======================================================================= */

.linea__regla {
  position: relative;
  height: 34px;
  margin-top: 10px;
  background: var(--sobre-negro-15);
  border-radius: 3px;
  overflow: hidden;
}

.linea__celda {
  position: absolute; top: 0; bottom: 0;
  display: grid; place-items: center;
  border-left: 1px solid rgba(0, 0, 0, 0.55);
  min-width: 0;
}
.linea__celda:first-child { border-left: none; }
.linea__celda span {
  font-size: 0.8125rem; font-weight: 500;
  color: var(--blanco);
  white-space: nowrap;
  padding-inline: 6px;
}
/* Sin sitio para la etiqueta entera, la celda se queda muda: la división
   sigue ahí marcando la escala, sin un rótulo a medias. */
.linea__celda--muda span { display: none; }

/* =======================================================================
   Las barras de tramo

   Un tramo por fila, con su rango de fechas al extremo, y al pie la barra
   del total. Los topes redondos marcan dónde empieza y acaba cada uno.
   ======================================================================= */

/* La retícula de dos columnas vive en el contenedor, no en cada fila: si
   cada fila midiera su propia columna de rango, cada pista tendría un ancho
   distinto y las barras de tramos distintos no compartirían escala. Las
   filas son `display: contents` para heredarla, así que el filete y el
   relleno van en sus celdas. */
.linea__barras {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 16px;
  margin-top: 32px;
  padding-top: 8px;
  border-top: 1px solid var(--sobre-negro-15);
}

.linea__barra { display: contents; }

.linea__barra-pista,
.linea__barra-rango {
  padding-block: 9px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.linea__barra:last-child .linea__barra-pista,
.linea__barra:last-child .linea__barra-rango { border-bottom: none; }

.linea__barra-pista { position: relative; min-height: 44px; min-width: 0; }

/* La barra ocupa el área de contenido, dentro del relleno de la fila. */
.linea__barra-tramo {
  position: absolute; top: 9px; bottom: 9px;
  background: var(--cian);
  border-radius: 999px;
}
/* Los topes: el punto de inicio y el de fin, como en la referencia. */
.linea__barra-tramo::before,
.linea__barra-tramo::after {
  content: '';
  position: absolute; top: 50%;
  width: 6px; height: 6px;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--negro);
}
.linea__barra-tramo::before { left: 8px; }
.linea__barra-tramo::after { left: calc(100% - 8px); }

.linea__barra-etq {
  position: absolute; top: 50%;
  translate: 0 -50%;
  font-size: 0.8125rem; font-weight: 600;
  white-space: nowrap;
}
/* Dentro de la barra la tinta es negra sobre el cian (8.58); fuera, blanca
   sobre la placa. El cian nunca lleva el texto.

   El rótulo interior pinta su propio fondo cian en lugar de confiar en que
   la barra quede debajo: si alguna vez no quedara, el texto sería negro
   sobre negro. Y va centrado y ajustado al texto, no al ancho de la barra,
   para no tapar los dos topes. */
.linea__barra-etq--dentro {
  translate: -50% -50%;
  color: var(--negro);
  background: var(--cian);
  padding-inline: 10px;
  border-radius: 4px;
}
.linea__barra-etq--despues { color: var(--blanco); padding-left: 12px; }
.linea__barra-etq--antes { color: var(--blanco); padding-right: 12px; }

/* El total no es un tramo más: va en contorno para no competir con ellos. */
.linea__barra--total .linea__barra-tramo {
  background: none;
  border: 1px solid var(--sobre-negro-48);
}
.linea__barra--total .linea__barra-etq--dentro {
  color: var(--blanco);
  background: var(--negro);   /* la barra del total va en contorno */
}
.linea__barra--total .linea__barra-tramo::before,
.linea__barra--total .linea__barra-tramo::after { background: var(--sobre-negro-48); }

.linea__barra-rango {
  font-size: 0.8125rem;
  color: var(--sobre-negro-72);
  white-space: nowrap;
}

/* =======================================================================
   La banda ampliada
   ======================================================================= */

.linea__ampliada {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--sobre-negro-15);
}

.linea__ampliada-titulo {
  margin: 0 0 6px;
  font-size: 0.875rem; font-weight: 500;
}
.linea__ampliada-titulo span {
  display: block;
  font-size: 0.8125rem; font-weight: 400;
  color: var(--sobre-negro-48);
}

.linea__pista--ampliada {
  margin: 52px 0 18px;
  height: 6px;
}
/* Aquí los puntos sí son cian: marcan fechas, no progreso. */
.linea__pista--ampliada .linea__hito-punto {
  background: var(--cian);
  border-color: var(--cian);
}

/* =======================================================================
   La lectura
   ======================================================================= */

.linea__lectura {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--sobre-negro-15);
}

.linea__cifras {
  display: flex; flex-wrap: wrap; gap: 12px 40px;
  margin: 0;
}
.linea__cifras dt {
  font-size: 0.8125rem;
  color: var(--sobre-negro-48);
  margin-bottom: 2px;
}
.linea__cifras dd {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.05;
}

.linea__lectura-hito {
  margin: 18px 0 0;
  display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline;
}
.linea__lectura-hito b { font-weight: 600; }
.linea__lectura-hito span {
  font-size: 0.875rem; color: var(--sobre-negro-48);
}

/* =======================================================================
   Pie: el año cero
   ======================================================================= */

.linea__pie { margin-top: 18px; }

.linea__btn {
  background: none;
  border: 1px solid var(--hilo);
  border-radius: var(--radio-control);
  color: var(--negro);
  font-family: inherit; font-size: 0.9375rem; font-weight: 500;
  padding: 9px 16px;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease,
              transform 140ms var(--sale-rapido);
}
.linea__btn:hover { border-color: var(--negro); }
.linea__btn:active { transform: scale(0.97); }
.linea__btn[aria-pressed='true'] {
  background: var(--cian); border-color: var(--negro);
}

.linea__nota {
  margin: 14px 0 0;
  max-width: 62ch;
  font-size: 0.9375rem;
  color: var(--negro-72);
}
.linea__nota b { color: var(--negro); font-weight: 600; }

/* =======================================================================
   La ficha del hito
   ======================================================================= */

/* La ficha es un diálogo modal y no un bloque al pie de la placa: en un eje
   alto, el detalle aparecía a cuatrocientos píxeles del hito que se acababa
   de tocar y había que ir a buscarlo con la vista. */
.linea__ficha {
  /* El diálogo es el marco: ocupa la pantalla y centra la tarjeta, de modo
     que un clic fuera de ella llega con el diálogo como destino. */
  width: 100%; max-width: none; height: 100%; max-height: none;
  margin: 0; padding: 20px;
  border: none; background: none;
  place-items: center;
  opacity: 0;
  transition: opacity 180ms ease;
}
/* El `display` va solo en `[open]`: puesto en la regla base taparía el
   `dialog:not([open]) { display: none }` del navegador —una regla de autor
   gana a la suya sea cual sea la especificidad— y el marco del diálogo
   quedaría visible con la página cerrada. */
.linea__ficha[open] { display: grid; }
.linea__ficha[data-abierto] { opacity: 1; }

.linea__ficha::backdrop {
  background: rgba(0, 0, 0, 0.45);
  /* El ::backdrop no hereda, así que su transición va aquí. */
  opacity: 0;
  transition: opacity 180ms ease;
}
.linea__ficha[data-abierto]::backdrop { opacity: 1; }

/* La tarjeta recibe el foco al abrir para que el lector de pantalla empiece
   por el título y no por el botón de cerrar; su anillo sobra, porque el
   diálogo entero ya es la novedad en pantalla. */
.linea__ficha-caja:focus { outline: none; }

.linea__ficha-caja {
  position: relative;
  width: min(100%, 52ch);
  max-height: 100%; overflow-y: auto;
  padding: 26px 28px;
  background: var(--blanco);
  border-left: 3px solid var(--cian);
  border-radius: var(--radio-control);
  /* Entra subiendo un poco y creciendo desde el 96 %: nunca desde cero,
     que se lee como un destello y no como algo que llega. */
  translate: 0 8px;
  scale: 0.96;
  transition: translate 240ms var(--sale-rapido), scale 240ms var(--sale-rapido);
}
.linea__ficha[data-abierto] .linea__ficha-caja { translate: 0 0; scale: 1; }

.linea__ficha-cerrar {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: none; border: 1px solid var(--hilo);
  border-radius: 50%;
  font-family: inherit; font-size: 1.25rem; line-height: 1;
  color: var(--negro-55);
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease;
}
.linea__ficha-cerrar:hover { border-color: var(--negro); color: var(--negro); }
.linea__ficha-fecha {
  margin: 0 0 4px;
  padding-right: 40px;   /* el botón de cerrar */
  font-size: 0.875rem; color: var(--negro-55);
}
.linea__ficha h3 {
  font-size: 1.25rem;
  letter-spacing: -0.018em;
  margin-bottom: 0.4em;
  padding-right: 40px;
}
.linea__ficha-texto {
  margin: 0 0 12px;
  color: var(--negro-72);
  font-size: 0.9375rem;
}
.linea__ficha-pie {
  display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline;
  margin: 0;
}
.linea__ficha-ref {
  font-size: 0.875rem; font-weight: 500;
}
.linea__ficha-ir {
  margin-left: auto;
  font-size: 0.875rem; font-weight: 500;
  color: var(--negro);
  text-decoration-color: var(--hilo);
  text-underline-offset: 3px;
  white-space: nowrap;
  transition: text-decoration-color 150ms ease;
}
.linea__ficha-ir:hover { text-decoration-color: var(--negro); }

/* =======================================================================
   Movimiento reducido
   ======================================================================= */

@media (prefers-reduced-motion: reduce) {
  .linea__hito-punto,
  .linea__btn { transition: none; }
  .linea__hito:hover .linea__hito-punto { scale: 1; }
  .linea__btn:active { transform: none; }

  /* La ficha aparece sin recorrido, pero la opacidad se mantiene: sin ella
     el cambio es un salto y cuesta ver que ha aparecido algo. */
  .linea__ficha-caja { transition: none; translate: 0 0; scale: 1; }
}

/* =======================================================================
   Estrecho
   ======================================================================= */

@media (max-width: 620px) {
  .linea__placa { border-radius: 16px; }
  .linea__cifras { gap: 12px 24px; }

  /* En estrecho la ficha es una hoja inferior: se alcanza con el pulgar y
     no tapa el eje entero. Entra deslizando desde abajo, con la curva de
     cajón, que arranca más despacio y frena largo. */
  .linea__ficha { padding: 0; place-items: end stretch; }
  .linea__ficha-caja {
    width: 100%;
    max-height: 88vh;
    border-left: none;
    border-top: 3px solid var(--cian);
    border-radius: 18px 18px 0 0;
    padding: 24px 22px calc(24px + env(safe-area-inset-bottom, 0px));
    translate: 0 100%;
    scale: 1;
    transition: translate 320ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  .linea__ficha[data-abierto] .linea__ficha-caja { translate: 0 0; }
}