/* ═══════════════════════════════════════════════════════════════
   Itinerario — línea de tiempo nocturna (v2)
   El texto va directo sobre la noche (sin tarjetas). Un hilo de luz
   se dibuja con el scroll (--p lo escribe el motor) y en su punta
   viaja una luciérnaga que enciende cada hito al alcanzarlo.
   Paleta v2: el hilo, la luciérnaga y los nodos encendidos son
   filetes de dorado tenue (son luz); la ilustración de línea y los
   acentos van en olivo claro; el texto, en marfil.
   El remate es la luna (sin frase, 21-oct-2026): de su punta cuelgan
   dos anillos entrelazados que se balancean apenas.
   Solo se animan transform y opacity.
   ═══════════════════════════════════════════════════════════════ */

.prog {
  --prog-luz: var(--dorado-tenue, #CDBF9E);     /* lo que brilla: hilo, nodos, luciérnaga, luna */
  --prog-luz-rgb: 205, 191, 158;
  --prog-luz-alta: #FBF4E2;                     /* corazón de la luciérnaga */
  --prog-linea-color: var(--olivo-claro, #A3A67E);   /* ilustración de línea y acentos */
  --prog-linea-rgb: 163, 166, 126;
  --prog-marfil: var(--marfil, #F6F2EA);
  --prog-marfil-rgb: 246, 242, 234;
  --prog-hora: clamp(44px, 12vw, 56px);         /* tamaño de la hora */
  --prog-eje: 12px;                             /* posición horizontal del hilo */
  --prog-sangria: 48px;                         /* del borde al texto (celular) */
  --prog-icono: 74px;
  --prog-trazo: 1.5;                            /* ≈ 1.4 px en pantalla */
  --prog-punta: .6;                             /* altura de la ventana donde viaja la punta */
  overflow: hidden;                             /* los decorados nunca provocan scroll lateral */
  overflow: clip;
  /* El remate ya es solo la luna (sin frase): el respiro inferior se acorta un poco
     para que la siguiente sección no quede tan lejos */
  padding-bottom: clamp(56px, 9vh, 110px);
}

/* ── Cabecera ── */
.prog-cabecera { margin-bottom: clamp(64px, 11vh, 120px); }
/* La manuscrita (--f-mano) solo trae peso 400: con más, el navegador la
   engrosaría de mentira. Es fina, así que va en marfil pleno y grande. */
.prog-titulo {
  margin-top: clamp(10px, 2vh, 18px);
  font-family: var(--f-mano);
  font-weight: 400;
  font-size: clamp(44px, 9vw, 92px);
  line-height: 1.15;
  color: var(--prog-marfil);
}
.prog-entrada {
  max-width: 30em;
  margin: 0 auto;
  font-style: italic;
  font-size: clamp(18px, 2.1vw, 21px);
  line-height: 1.6;
  color: rgba(var(--prog-marfil-rgb), .8);
  text-wrap: balance;
}

/* Ramita de olivo en el ornamento (el rombo compartido se sustituye aquí) */
.prog-ornamento { color: var(--prog-linea-color); gap: 16px; }
.prog-ramita {
  width: 58px;
  height: 24px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.prog-ramita__hoja { fill: var(--olivo, #6B7042); stroke: var(--prog-linea-color); }
.prog-ramita__fruto { fill: var(--prog-linea-color); stroke: none; }
@supports not (inset: 0) {
  .prog-ornamento { gap: 0; }
  .prog-ramita { margin: 0 16px; }
}

/* ── Línea de tiempo ── */
.prog-linea {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  padding: 26px 0 clamp(64px, 10vh, 110px);
  /* Sin JavaScript el hilo aparece completo y los hitos encendidos */
  --hilo: 1;
}
/* Con el módulo listo, el avance del hilo sale de --p: la punta viaja a una
   altura fija de la ventana (--prog-punta), sin importar el alto de la lista. */
.prog-linea.prog-lista {
  --hilo: clamp(0,
    calc((var(--p, 0) * (var(--prog-vh, 800) + var(--prog-alto, 1600)) - var(--prog-vh, 800) * (1 - var(--prog-punta)))
      / var(--prog-alto, 1600)),
    1);
}

.prog-hilo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--prog-eje);
  width: 0;
  pointer-events: none;
}
.prog-hilo__guia,
.prog-hilo__oro {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -.5px;
  width: 1px;
}
/* Guía: el camino que el hilo va a recorrer, apenas insinuado en olivo */
.prog-hilo__guia {
  background: repeating-linear-gradient(180deg,
    rgba(var(--prog-linea-rgb), .3) 0 2px, rgba(var(--prog-linea-rgb), 0) 2px 9px);
}
/* Hilo de luz: filete de dorado tenue */
.prog-hilo__oro {
  left: -.75px;
  width: 1.5px;
  background: linear-gradient(180deg, rgba(var(--prog-luz-rgb), 0) 0, var(--prog-luz) 40px, var(--prog-luz) 100%);
  transform: scaleY(var(--hilo));
  transform-origin: 50% 0;
  will-change: transform;
}

/* ── Luciérnaga ── */
.prog-chispa {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  transform: translate3d(0, calc(var(--hilo) * var(--prog-alto, 0) * 1px), 0);
  /* aparece al empezar el hilo y se apaga al llegar al final */
  opacity: calc(clamp(0, var(--hilo) * 40, 1) * clamp(0, (1 - var(--hilo)) * 25, 1));
  will-change: transform, opacity;
}
.prog-linea:not(.prog-lista) .prog-chispa { display: none; }
.prog-chispa__vuelo {
  position: absolute;
  top: 0;
  left: 0;
  animation: prog-vuelo 5.2s ease-in-out infinite;
}
.prog-chispa__halo,
.prog-chispa__aura,
.prog-chispa__luz {
  position: absolute;
  border-radius: 50%;
}
.prog-chispa__halo {
  width: 150px; height: 150px;
  margin: -75px 0 0 -75px;
  background: radial-gradient(circle, rgba(var(--prog-luz-rgb), .28) 0%, rgba(var(--prog-luz-rgb), .11) 30%, rgba(var(--prog-luz-rgb), 0) 68%);
  animation: prog-latido 3.4s ease-in-out infinite;
}
.prog-chispa__aura {
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  background: radial-gradient(circle, rgba(251, 244, 226, .95) 0%, rgba(var(--prog-luz-rgb), .5) 26%, rgba(var(--prog-luz-rgb), 0) 70%);
  animation: prog-latido 3.4s ease-in-out -1.1s infinite;
}
.prog-chispa__luz {
  width: 5px; height: 5px;
  margin: -2.5px 0 0 -2.5px;
  background: var(--prog-luz-alta);
  box-shadow: 0 0 8px 2px rgba(251, 244, 226, .9);
}
@keyframes prog-latido {
  0%, 100% { transform: scale(.82); opacity: .7; }
  50% { transform: scale(1.08); opacity: 1; }
}
@keyframes prog-vuelo {
  0%, 100% { transform: translate3d(-2.5px, 1px, 0); }
  30% { transform: translate3d(2px, -2px, 0); }
  62% { transform: translate3d(3px, 2px, 0); }
  82% { transform: translate3d(-1.5px, -1.5px, 0); }
}

/* ── Hitos ── */
.prog-hitos { list-style: none; }

.prog-hito {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--prog-icono);
  column-gap: 10px;
  align-items: start;
  padding-left: var(--prog-sangria);
  /* 0 → 1 cuando el hilo alcanza el nodo (--en lo escribe programa.js) */
  --luz: clamp(0, calc((var(--hilo) - var(--en, 0)) * 70), 1);
}
.prog-hito + .prog-hito { margin-top: clamp(64px, 10vh, 120px); }

.prog-texto { min-width: 0; display: contents; }

/* La hora, en marfil; «hrs» pequeño en olivo claro, como lo escriben los novios */
.prog-hora {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--prog-hora);
  line-height: 1;
  letter-spacing: .01em;
  color: var(--prog-marfil);
  white-space: nowrap;
}
.prog-hora time { display: inline-block; }
.prog-hora__periodo {
  font-style: normal;
  font-weight: 600;
  font-size: .3em;
  letter-spacing: .3em;
  margin-left: .1em;
  color: var(--prog-linea-color);
}

.prog-nombre {
  grid-column: 1 / -1;
  margin-top: 8px;
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: clamp(14px, 1.7vw, 16px);
  line-height: 1.5;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--prog-marfil);
  text-wrap: balance;
}
.prog-nombre__y {
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  font-size: 1.25em;
  color: var(--prog-linea-color);
  margin: 0 .15em 0 -.1em;
}

.prog-detalle {
  grid-column: 1 / -1;
  margin-top: 8px;
  max-width: 24em;
  font-size: clamp(18px, 2vw, 20px);
  font-style: italic;
  line-height: 1.55;
  color: rgba(var(--prog-marfil-rgb), .78);
  text-wrap: pretty;
}

/* ── Icono ilustrado (línea en olivo claro) ── */
.prog-icono {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  width: var(--prog-icono);
  height: var(--prog-icono);
  color: var(--prog-linea-color);
}
/* Resplandor detrás del trazo: se aviva cuando llega el hilo */
.prog-icono::before {
  content: '';
  position: absolute;
  top: -22%; right: -22%; bottom: -22%; left: -22%;
  border-radius: 46% 54% 52% 48% / 55% 45% 55% 45%;
  background: radial-gradient(closest-side, rgba(var(--prog-luz-rgb), .2) 0%, rgba(var(--prog-linea-rgb), .1) 50%, rgba(var(--prog-luz-rgb), 0) 100%);
  opacity: calc(.3 + var(--luz) * .7);
}
.prog-icono svg {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
  stroke-width: var(--prog-trazo);
}

/* ── Nodo en el hilo ── */
.prog-nodo {
  position: absolute;
  top: calc(var(--prog-hora) * .5);
  left: var(--prog-eje);
  width: 0;
  height: 0;
}
.prog-nodo i,
.prog-nodo::before,
.prog-nodo::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
}
/* rombo apagado: noche con contorno olivo */
.prog-nodo i {
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  transform: rotate(45deg);
  background: #2F2F27;
  box-shadow: inset 0 0 0 1px rgba(var(--prog-linea-rgb), .6);
}
/* rombo encendido: dorado tenue */
.prog-nodo::before {
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  z-index: 1;
  background: linear-gradient(135deg, var(--prog-luz-alta), var(--prog-luz));
  box-shadow: 0 0 10px 1px rgba(var(--prog-luz-rgb), .55);
  transform: rotate(45deg) scale(calc(.5 + var(--luz) * .5));
  opacity: var(--luz);
}
/* resplandor */
.prog-nodo::after {
  width: 64px; height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--prog-luz-rgb), .34) 0%, rgba(var(--prog-luz-rgb), .1) 40%, rgba(var(--prog-luz-rgb), 0) 70%);
  transform: scale(calc(.4 + var(--luz) * .6));
  opacity: var(--luz);
}

/* Remate del hilo */
.prog-fin {
  position: absolute;
  bottom: 0;
  left: var(--prog-eje);
  width: 0;
  height: 0;
  --luz: clamp(0, calc((var(--hilo) - .985) * 70), 1);
}
.prog-fin i {
  position: absolute;
  width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px;
  transform: rotate(45deg);
  background: var(--prog-luz);
  opacity: calc(.25 + var(--luz) * .75);
}

/* ── Luna y estrellas ── */
.prog-remate {
  margin-top: clamp(26px, 5vh, 54px);
  text-align: center;
}
.prog-remate__cielo {
  position: relative;
  width: min(100%, 340px);
  margin: 0 auto;
  color: var(--prog-luz);
}
.prog-remate__svg {
  position: relative;
  width: 100%;
  height: auto;
  overflow: visible;
  stroke-width: 1.4;
}
.prog-remate__halo {
  position: absolute;
  left: 50%;
  top: 47%;
  width: 78%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--prog-luz-rgb), .2) 0%, rgba(var(--prog-luz-rgb), .08) 38%, rgba(var(--prog-luz-rgb), 0) 68%);
}
/* Respaldo sin aspect-ratio: el alto sale del relleno (78 % del ancho del contenedor) */
@supports not (aspect-ratio: 1) {
  .prog-remate__halo { height: 0; padding-top: 78%; }
}

/* ── Anillos que cuelgan de la luna ──
   Dos aros finos entrelazados (uno dorado tenue, otro olivo claro) penden de
   la punta inferior de la luna por un hilo. El grupo entero pivota en la
   punta (198.6 108 del viewBox) y el par de aros, en el nudo (198.6 129):
   un péndulo doble muy leve y lento. Las curvas de cada tramo imitan un
   seno (sale rápido del centro, frena en el extremo), y el reposo (0 %) es
   la vertical: así quedan rectos cuando la animación se pausa o no corre. */
.prog-anillos,
.prog-anillos__par {
  transform-box: view-box;
  will-change: transform;
}
.prog-anillos {
  transform-origin: 198.6px 108px;
  animation: prog-balanceo 7.6s linear infinite;
}
.prog-anillos__par {
  transform-origin: 198.6px 129px;
  animation: prog-balanceo-par 5.9s linear infinite;
}
.prog-anillos__hilo { stroke-width: .75; opacity: .85; }
.prog-anillos__nudo { fill: currentColor; stroke: none; }
.prog-anillo--oro { stroke: var(--prog-luz); }
.prog-anillo--olivo { stroke: var(--prog-linea-color); }
/* Brillo discreto: un arco corto casi blanco que respira muy despacio */
.prog-anillo__brillo {
  stroke: var(--prog-luz-alta);
  stroke-width: 1.05;
  animation: prog-destello 6.4s ease-in-out var(--r, 0s) infinite;
}
@keyframes prog-balanceo {
  0%   { transform: rotate(0deg); animation-timing-function: cubic-bezier(.39, .575, .565, 1); }
  25%  { transform: rotate(2.4deg); animation-timing-function: cubic-bezier(.12, 0, .39, 0); }
  50%  { transform: rotate(0deg); animation-timing-function: cubic-bezier(.39, .575, .565, 1); }
  75%  { transform: rotate(-2.4deg); animation-timing-function: cubic-bezier(.12, 0, .39, 0); }
  100% { transform: rotate(0deg); }
}
@keyframes prog-balanceo-par {
  0%   { transform: rotate(0deg); animation-timing-function: cubic-bezier(.39, .575, .565, 1); }
  25%  { transform: rotate(-1.7deg); animation-timing-function: cubic-bezier(.12, 0, .39, 0); }
  50%  { transform: rotate(0deg); animation-timing-function: cubic-bezier(.39, .575, .565, 1); }
  75%  { transform: rotate(1.7deg); animation-timing-function: cubic-bezier(.12, 0, .39, 0); }
  100% { transform: rotate(0deg); }
}
@keyframes prog-destello {
  0%, 100% { opacity: .95; }
  50% { opacity: .4; }
}

/* Estrellas: titilan muy despacio, cada una a su ritmo */
.prog-estrella {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: prog-titilar var(--d, 8s) ease-in-out var(--r, 0s) infinite;
}
@keyframes prog-titilar {
  0%, 100% { opacity: 1; transform: scale(1); }
  45% { opacity: .28; transform: scale(.8); }
  60% { opacity: .5; transform: scale(.88); }
}

/* Estrellas lejanas con parallax */
.prog-cielo {
  width: clamp(90px, 16vw, 150px);
  color: var(--prog-luz);
  opacity: .55;
}
.prog-cielo svg { width: 100%; height: auto; stroke-width: 1.3; overflow: visible; }
.prog-cielo--a { top: 5%; right: 3%; }
.prog-cielo--b { top: 46%; right: -2%; opacity: .42; }
.prog-cielo--c { bottom: 15%; right: 4%; opacity: .48; }

/* Fuera de pantalla o con la pestaña oculta, nada se mueve. Sin el módulo
   (modo básico, sin JavaScript) tampoco: nunca llega .prog-activa, y los
   anillos quedan en su vertical de reposo. */
.prog:not(.prog-activa) .prog-estrella,
.prog:not(.prog-activa) .prog-chispa__vuelo,
.prog:not(.prog-activa) .prog-chispa__halo,
.prog:not(.prog-activa) .prog-chispa__aura,
.prog:not(.prog-activa) .prog-anillos,
.prog:not(.prog-activa) .prog-anillos__par,
.prog:not(.prog-activa) .prog-anillo__brillo {
  animation-play-state: paused;
}

/* ═══════════ Escritorio: hitos alternados a los lados del hilo ═══════════ */
@media (min-width: 860px) {
  .prog {
    --prog-hora: clamp(60px, 5.6vw, 76px);
    --prog-eje: 50%;
    --prog-icono: 118px;
    --prog-trazo: .95;
  }
  .prog-hito {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(110px, 13vw, 170px);
    padding-left: 0;
  }
  .prog-hito + .prog-hito { margin-top: clamp(56px, 9vh, 96px); }

  .prog-texto {
    display: block;
    grid-column: 1;
    grid-row: 1;
    text-align: right;
  }
  .prog-nombre { margin-top: 18px; max-width: 22em; margin-left: auto; }
  .prog-detalle { margin-left: auto; max-width: 19em; text-wrap: balance; }

  .prog-icono {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    align-self: start;
    margin-top: calc(var(--prog-hora) * .5 - var(--prog-icono) * .5 + 14px);
  }

  .prog-hito:nth-child(even) .prog-texto { grid-column: 2; text-align: left; }
  .prog-hito:nth-child(even) .prog-nombre { margin-left: 0; }
  .prog-hito:nth-child(even) .prog-detalle { margin-left: 0; }
  .prog-hito:nth-child(even) .prog-icono { grid-column: 1; justify-self: end; }

  .prog-remate__cielo { width: 440px; }
  .prog-remate__svg { stroke-width: 1.05; }
  .prog-anillos__hilo { stroke-width: .55; }
  .prog-anillo__brillo { stroke-width: .8; }
  .prog-remate { margin-top: clamp(14px, 3vh, 30px); }

  .prog-cielo--a { top: 7%; right: 7%; }
  .prog-cielo--b { top: 50%; right: 4%; }
  .prog-cielo--c { bottom: 20%; right: auto; left: 5%; }
}

/* ═══════════ Movimiento reducido: todo dibujado y encendido ═══════════ */
@media (prefers-reduced-motion: reduce) {
  .prog-linea.prog-lista { --hilo: 1; }
  .prog-chispa { display: none; }
  .prog-estrella,
  .prog-anillos,
  .prog-anillos__par,
  .prog-anillo__brillo { animation: none; }
}

/* ═══════════ Temas de contraste (Windows): el hilo con borde real ═══════════ */
@media (forced-colors: active) {
  .prog-hilo__oro, .prog-hilo__guia { border-left: 1px solid CanvasText; background: none; }
  .prog-nodo i { border: 1px solid CanvasText; box-shadow: none; }
}