/* Escena 5 — selección de paisaje.
   El fondo (a pantalla completa) muestra el paisaje resaltado/elegido
   en vivo; las etiquetas de equipaje flotan abajo, una por opción. */

[data-scene="landscape"]{
  overflow: hidden;
}

.landscape-preview{
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #0c111a;
}

/* Viñeta sutil, igual que la del prototipo original de Luisa, para dar
   sensación de estar mirando por la ventanilla del tren. */
.landscape-preview::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow:
    inset 0 0 min(14vw, 14vh) min(2.5vw, 2.5vh) rgba(0, 0, 0, 0.6),
    inset 0 0 3vw 1vw rgba(0, 0, 0, 0.4);
}

.landscape-header{
  position: relative;
  z-index: 2;
  text-align: center;
  padding-top: clamp(28px, 6vh, 56px);
}

.landscape-header h1{
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.4rem, 4vw, 2.1rem);
  color: var(--brass-light);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6);
}

.landscape-header p{
  margin: 8px 0 0;
  font-family: var(--font-utility);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--parchment-dim);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.landscape-footer{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2vh, 20px);
  padding: 0 0 clamp(18px, 3vh, 32px);
}

.landscape-tags{
  display: flex;
  gap: clamp(10px, 1.6vw, 18px);
  padding: 20px clamp(16px, 4vw, 40px) 8px;
  overflow-x: auto;
  max-width: 100vw;
  scrollbar-width: thin;
}

.landscape-tags::-webkit-scrollbar{ height: 6px; }
.landscape-tags::-webkit-scrollbar-thumb{
  background: rgba(198, 161, 91, 0.4);
  border-radius: 3px;
}