/* ---------- Nuestra historia: línea de tiempo en capas ---------- */
/* Mientras llega la historia se reserva espacio: el pie no salta (CLS) */
.capas:has(> .cargando) { min-height: 150vh; }

.capas {
  display: grid;
  border-bottom: 1px solid var(--linea-fuerte);
}

/* Cada capa es una franja horizontal */
.capa {
  display: grid;
  gap: 0.9rem;
  padding: 2rem 0 2.4rem;
  border-top: 1px solid var(--linea-fuerte);
}

.capa__numero {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--azul-claro);
}

/* Línea que cruza la franja, como la pasada de la boquilla */
.capa__boquilla {
  flex: 1;
  height: 1px;
  background: var(--azul);
  transform-origin: left center;
}

.capa__titulo {
  font-size: clamp(1.15rem, 5.4vw, 1.6rem);
}

.capa__texto {
  max-width: 38ch;
  font-size: 1.08rem;
  line-height: 1.7;
  color: rgb(255 255 255 / 0.86);
}

.capa__foto {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  margin-top: 0.4rem;
  border: 1px dashed var(--linea-fuerte);
  overflow: hidden;
}

.capa__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Animación: cada capa se deposita al entrar en pantalla ---------- */
.capas--animadas .capa {
  opacity: 0;
  transform: translateY(1.75rem);
  transition:
    opacity 0.5s ease,
    transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.capas--animadas .capa__boquilla {
  transform: scaleX(0);
  transition: transform 0.7s 0.15s cubic-bezier(0.6, 0, 0.2, 1);
}

.capas--animadas .capa--depositada {
  opacity: 1;
  transform: none;
}

.capas--animadas .capa--depositada .capa__boquilla { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .capas--animadas .capa,
  .capas--animadas .capa__boquilla {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Pantallas más anchas ---------- */
@media (min-width: 760px) {
  .capa {
    grid-template-columns: 8rem minmax(0, 1fr);
    column-gap: 2rem;
    align-items: start;
    padding: 2.5rem 0 3rem;
  }

  .capa__numero { grid-row: 1 / span 2; flex-direction: column; align-items: flex-start; padding-top: 0.35rem; }
  .capa__boquilla { flex: none; width: 100%; }
  .capa__titulo,
  .capa__texto { grid-column: 2; }

  .capa--con-foto { grid-template-columns: 8rem minmax(0, 1fr) minmax(0, 0.8fr); }
  .capa--con-foto .capa__foto { grid-column: 3; grid-row: 1 / span 2; margin-top: 0; }
}