/* ==========================================================================
   days.css — Recorrido de 7 días (Escena 2)
   Cada tramo (.day-section) ocupa la pantalla completa con la foto real
   de ese día como fondo (servida desde el bucket R2 "webnuria").
   En móvil el scroll queda "fijado" tramo a tramo con scroll-snap; en
   escritorio se deja scroll normal, sin fijar.
   ========================================================================== */

.days {
  display: flex;
  flex-direction: column;
  margin-top: 4vh;
  /* Full-bleed: cancela el padding horizontal de #scene-letter (5vw,
     definido en main.css) para que los tramos ocupen todo el ancho. */
  margin-inline: -5vw;
}

.day-section {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh; /* evita saltos por la barra de direcciones móvil */
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Oscurece la foto de fondo lo justo para que el texto blanco de
   .day-content siga siendo legible encima de cualquier imagen. */
.day-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.45));
}

/* Foto de fondo real de cada tramo del viaje, servida desde el bucket
   R2 "webnuria" (acceso público vía r2.dev). El background-color queda
   como respaldo mientras carga la imagen. */
.day-section[data-day="1"] {
  background-color: #f7b8cf;
  background-image: url('https://pub-0ebc3169998c451abe09d3da7056a7ef.r2.dev/carcasona.JPG');
}
.day-section[data-day="2"] {
  background-color: #e6d9f7;
  background-image: url('https://pub-0ebc3169998c451abe09d3da7056a7ef.r2.dev/foix.jpg');
}
.day-section[data-day="3"] {
  background-color: #e8b4a2;
  background-image: url('https://pub-0ebc3169998c451abe09d3da7056a7ef.r2.dev/Peyrepertuse.jpg');
}
.day-section[data-day="4"] {
  background-color: #a7c4bc;
  background-image: url('https://pub-0ebc3169998c451abe09d3da7056a7ef.r2.dev/paris1.webp');
}
.day-section[data-day="5"] {
  background-color: #d9c46a;
  background-image: url('https://pub-0ebc3169998c451abe09d3da7056a7ef.r2.dev/paris2.webp');
}
.day-section[data-day="6"] {
  background-color: #8fb0d9;
  background-image: url('https://pub-0ebc3169998c451abe09d3da7056a7ef.r2.dev/paris3.jpg');
}
.day-section[data-day="7"] {
  background-color: #c48fd9;
  background-image: url('https://pub-0ebc3169998c451abe09d3da7056a7ef.r2.dev/lyon2.jpg');
}

.day-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 2em 1.2em;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1em;
}

.day-route {
  font-family: var(--font-cuerpo);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

.day-label {
  font-family: var(--font-titulo);
  font-weight: 400;
  font-size: clamp(2.6rem, 12vw, 4.5rem);
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
  margin: 0;
}

.day-meta {
  font-family: var(--font-cuerpo);
  font-style: italic;
  font-size: 0.95rem;
  color: #fff;
  opacity: 0.9;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

.day-text {
  font-family: var(--font-cuerpo);
  font-size: 1.05rem;
  line-height: 1.8;
  color: #fff;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
  margin: 0;
}

/* Scroll-snap: solo en móvil, que es donde se usa principalmente la
   página. En escritorio el scroll se deja libre, sin fijar tramos.

   La cabecera (título) también se convierte en un tramo a pantalla
   completa: si no fuera un punto de snap válido, el navegador la
   salta de golpe hacia el "Día 1" en cuanto activa el snap mandatory
   (ajusta el scroll al punto de snap más cercano nada más poder
   desplazarse), y el título nunca llegaría a verse. */
@media (max-width: 600px) {
  html {
    scroll-snap-type: y mandatory;
  }

  .letter-content {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .day-section {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
}