/* ==========================================================================
   layout.css — escenas (pintura fija + contenido encima), pasos, secciones
   y galería. Móvil primero.
   ========================================================================== */

/* --- Escena: pintura fija (sticky) con el contenido pasando por encima --- */
/* El fondo ocupa una pantalla y se queda pegado arriba; el contenido sube
   una pantalla con margen negativo para empezar encima de él. La escena dura
   lo que dure su contenido, y la siguiente escena tapa a esta al llegar. */

.escena {
  position: relative;
}

.escena__fondo {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
  background-color: var(--fondo); /* mientras carga la pintura */
}

.escena__fondo picture {
  display: block;
  height: 100%;
}

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

.escena__contenido {
  position: relative;
  z-index: 1;
  margin-top: -100vh;
  margin-top: -100lvh;
}

/* --- Paso: una pantalla de la narración (capítulos con scrollytelling) --- */

.paso {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 14vh var(--espacio-s);
}

/* --- Bloque: estructura nueva (sesión 2), sobre el fondo en movimiento --- */
/* Sin la clase "movimiento" (sin JS, CDN caído o movimiento reducido), cada
   bloque lleva su fondo quieto: su pintura o un degradado de su tono. Con
   ella, el bloque es transparente y se ve la capa fija de ambiente.css. */

.bloque {
  position: relative;
  isolation: isolate;
  padding: 10vh var(--espacio-s);
}

.bloque[data-tono] {
  background:
    radial-gradient(70% 45% at 15% 20%, var(--mancha-a), transparent),
    radial-gradient(70% 45% at 85% 80%, var(--mancha-b), transparent),
    var(--fondo);
}

.bloque--pintura {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.bloque__pintura {
  position: absolute;
  inset: 0;
  z-index: -1;
}

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

.movimiento .bloque {
  background: none;
}

/* Respiro: pintura sola, sin texto. Sin animación es una pantalla de pintura;
   con ella, un tramo de scroll vacío mientras la pintura de la capa fija entra,
   llena la pantalla y se va (ambiente.js). */
.bloque--respiro {
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  padding: 0;
}

.movimiento .bloque--respiro {
  height: 210vh;
}

/* Bloque de texto sobre color: columna centrada de lectura cómoda */
.bloque--texto {
  display: grid;
  justify-items: center;
}

/* Justo después de una pintura, el texto empieza más abajo: así no se lee
   sobre la pintura hasta que esta se ha desvanecido por debajo del 40 %
   (por encima, el --texto bajaría de 4.5:1 en sus zonas más oscuras). */
.bloque--pintura + .bloque--texto {
  padding-top: 28vh;
}

/* --- Sección informativa: al menos una pantalla, tarjeta centrada --- */

.seccion {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 14vh var(--espacio-s);
}

.pie {
  display: grid;
  place-items: center;
  padding: 0 var(--espacio-s) 8rem;
}

/* --- Galería --- */
/* Móvil (y sin JS o con movimiento reducido): carrusel que se desliza con el dedo. */

.seccion--galeria {
  display: block;
  justify-items: normal; /* sin esto, Chrome centra la galería a su ancho natural y desborda la página */
  padding-inline: 0;
}

.galeria {
  width: 100%;
}

.seccion--galeria > .tarjeta {
  margin: 0 auto var(--espacio-m);
  width: min(calc(100% - 2 * var(--espacio-s)), 34rem);
}

.galeria__pista {
  display: flex;
  gap: var(--espacio-s);
  margin: 0;
  padding: var(--espacio-xs) 7.5vw var(--espacio-s);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}

.galeria__pista {
  align-items: center;
}

.galeria__item {
  flex: 0 0 auto;
  scroll-snap-align: center;
}

/* Escritorio con JS: la fila de fotos queda fija y avanza de lado con el scroll */
@media (min-width: 900px) {
  .galeria--fija .galeria__marco {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
  }

  .galeria--fija .galeria__pista {
    overflow: visible;
    scroll-snap-type: none;
    gap: 3vw;
    padding: 0 12vw;
    will-change: transform;
  }

  /* Deja sitio a la nav lateral */
  .paso,
  .seccion,
  .bloque {
    padding-left: 6rem;
    padding-right: 6rem;
  }

  .seccion--galeria {
    padding-inline: 0;
  }
}