/* =====================================================================
   PANTALLA · Web pública · INICIO → LOS 4 TIEMPOS
   Qué hace:    el título «Una invitación dinámica, en cuatro tiempos» y el
                camino con los números unidos por una línea, que aparecen en
                orden cada vez que entran a la pantalla; y el contenido que
                sube sobre las nubes al bajar. Solo tokens del sistema (§4).
   Quién la usa: index.html (la portada de la web)
   Depende de:  tokens.css, base.css
   Requisitos:  R-WEB-14
   ===================================================================== */

/* ---------- Los 4 tiempos: un camino con números unidos por una línea ---------- */
.web-inicio__tiempos-cabecera {
  margin-bottom: var(--espacio-7);
  text-align: center;
}

.web-inicio__subtitulo {
  margin: 0 0 var(--espacio-2);
  font-size: var(--tamano-xl);
  font-weight: 400;
}

.web-inicio__tiempos-bajada {
  margin: 0;
  color: var(--color-texto-suave);
  font-size: var(--tamano-m);
}

/* Aparecen uno por uno AL RITMO DEL DESPLAZAMIENTO: inicio.js pone --progreso (de 0 a 1) en el
   camino; cada tiempo usa su tramo (el 1.º el primer cuarto, el 2.º el segundo…) y su línea se
   dibuja después. Al subir la página, se deshacen en orden inverso. Solo si inicio.js puso
   --animar: sin JS (o con «reducir movimiento») se ven quietos. */
.web-inicio__tiempo:nth-child(2) { --orden: 1; }
.web-inicio__tiempo:nth-child(3) { --orden: 2; }
.web-inicio__tiempo:nth-child(4) { --orden: 3; }

.web-inicio__camino--animar .web-inicio__tiempo {
  --aparece: clamp(0, calc(var(--progreso, 0) * 4 - var(--orden, 0)), 1);
  --linea: clamp(0, calc((var(--progreso, 0) * 4 - var(--orden, 0) - 0.5) * 2), 1);
  opacity: var(--aparece);
  transform: translateX(calc((1 - var(--aparece)) * -1rem));
}

.web-inicio__camino--animar .web-inicio__tiempo::after {
  transform: scaleY(var(--linea));
  transform-origin: top;
}

.web-inicio__tiempos {
  padding-block: var(--espacio-7) var(--espacio-8);   /* el mismo espacio abajo que las demás */
}

/* Al bajar, el contenido sube más rápido que la página, por encima de las nubes (que ya taparon
   esa parte de la foto), hasta quedar a la altura de los ojos. El margen negativo de abajo
   descuenta esa subida: así el pie queda pegado y no hay un espacio vacío al final. */
.web-inicio__contenido {
  position: relative;
  z-index: 1;
  margin-bottom: -40svh;
  transform: translateY(calc(var(--avance, 0) * -40svh));
}

.web-inicio__camino {
  display: grid;
  gap: var(--espacio-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.web-inicio__tiempo {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--espacio-4);
  align-items: start;
}

/* La línea que une cada número con el siguiente (en celular, hacia abajo) */
.web-inicio__tiempo:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 2.75rem;
  bottom: calc(var(--espacio-6) * -1);
  left: 1.375rem;
  border-left: 1px solid var(--color-acento-decorativo);
}

.web-inicio__numero {
  display: grid;
  grid-row: span 2;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--color-acento-decorativo);
  border-radius: var(--radio-redondo);
  background: var(--color-fondo);
  color: var(--color-acento);
  font-family: var(--letra-titulo);
  font-size: var(--tamano-m);
}

.web-inicio__tiempo-nombre {
  margin: var(--espacio-2) 0 var(--espacio-1);
  font-size: var(--tamano-l);
  font-weight: 400;
}

.web-inicio__tiempo-texto {
  margin: 0;
  color: var(--color-texto-suave);
}