/* =========================================================================
   Campo Hass Internacional — Portada fotografica
   Secuencia de planos movida por el scroll.

   El pin se resuelve con position:sticky y scroll natural. NO se bloquea el
   body ni se secuestra la rueda: eso rompe teclado, barra de scroll y zoom.

   Registro: cinematografico. Fotografia a sangre, desplazamiento lento de
   escala, sin rebotes ni formas dibujadas. El color lo pone la imagen; la
   marca aporta el morado del velo y el crema del texto.
   ========================================================================= */

.escena {
  position: relative;
  height: 340vh;
  background: var(--morado-profundo);
  /* Sube por detras de la barra para que la fotografia llegue al borde
     superior; la barra flota encima y se aclara mientras dura la portada. */
  margin-top: calc(-1 * var(--alto-cabecera) - 2px);
}
@media (max-width: 48em) { .escena { height: 260vh; } }

.escena-fija {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  background: var(--morado-profundo);
}

/* ---------- Planos ---------- */
.plano {
  position: absolute; inset: 0;
  opacity: 0;
  will-change: opacity;
}
.plano[data-plano="1"] { opacity: 1; }
.plano img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transform-origin: center 58%;
  will-change: transform;
}

/* Velo: sostiene la legibilidad del texto sobre cualquier fotografia.
   Morado de marca, no un negro neutro. */
.escena-velo {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(34, 14, 37, .58) 0%,
      rgba(34, 14, 37, .22) 26%,
      rgba(34, 14, 37, .30) 58%,
      rgba(34, 14, 37, .82) 100%),
    radial-gradient(120% 86% at 50% 44%,
      rgba(34, 14, 37, 0) 42%, rgba(34, 14, 37, .46) 100%);
}

/* ---------- Texto de entrada ---------- */
.escena-intro {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1.15rem;
  text-align: center;
  padding-inline: var(--gutter);
  pointer-events: none;
}
.escena-rotulo {
  font-size: var(--t-rotulo); font-weight: 600;
  letter-spacing: .34em; text-transform: uppercase;
  color: rgba(247, 243, 234, .74);
}
.escena-lema {
  font-family: var(--display);
  font-size: clamp(2.5rem, 1.2rem + 5vw, 6rem);
  font-weight: 800; line-height: .96;
  letter-spacing: -.048em;
  color: var(--crema);
  max-width: 15ch;
}

/* ---------- Titular, compone al final ---------- */
.escena-marca {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center;
  opacity: 0;
  /* Mientras esta a opacidad 0 no debe recibir clics ni foco: un boton
     invisible que captura el tabulador es una trampa. */
  pointer-events: none;
}
.escena-marca[data-activa="si"] { pointer-events: auto; }
.escena-marca .contenedor { width: 100%; }
.escena-titulo {
  max-width: 17ch;
  color: var(--crema);
  text-shadow: 0 4px 44px rgba(34, 14, 37, .5);
}
.escena-titulo .resalte { color: var(--verde-brote); }
.escena-lead {
  margin-top: 1.7rem;
  color: rgba(247, 243, 234, .84);
  text-shadow: 0 2px 22px rgba(34, 14, 37, .55);
}
.escena-botones { margin-top: 2.3rem; }

/* Sobre fotografia el boton secundario va en version clara */
.escena-botones .btn-secundario { color: var(--crema); border-color: rgba(247,243,234,.3); }
.escena-botones .btn-secundario:hover { border-color: var(--crema); background: rgba(247,243,234,.14); }

/* ---------- Pista y barra ---------- */
.escena-pista {
  position: absolute; z-index: 4;
  left: 50%; bottom: clamp(1.5rem, 4vh, 3rem);
  transform: translateX(-50%);
  display: flex; flex-direction: column;
  align-items: center; gap: .6rem;
  color: rgba(247, 243, 234, .8);
  font-size: var(--t-rotulo); font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase;
  pointer-events: none;
  transition: opacity .5s ease;
}
.escena-pista svg { animation: pista-rebote 2s ease-in-out infinite; }
@keyframes pista-rebote {
  0%, 100% { transform: translateY(0); opacity: .5; }
  50%      { transform: translateY(5px); opacity: 1; }
}

.escena-barra {
  position: absolute; z-index: 4;
  left: 0; right: 0; bottom: 0; height: 2px;
  background: rgba(247, 243, 234, .16);
}
.escena-barra-relleno {
  height: 100%; width: 100%;
  transform: scaleX(0); transform-origin: left center;
  background: var(--verde-brote);
}

/* ---------- Sin JavaScript o con movimiento reducido ----------
   Se entrega un plano ya compuesto y el recorrido extra desaparece:
   nadie desliza por un tramo que no va a animarse. */
.escena[data-estatica="si"],
html:not(.js) .escena { height: auto; }

.escena[data-estatica="si"] .escena-fija,
html:not(.js) .escena .escena-fija {
  position: relative; height: auto; min-height: 100vh;
}

.escena[data-estatica="si"] .plano,
html:not(.js) .escena .plano { opacity: 0; }
.escena[data-estatica="si"] .plano[data-plano="2"],
html:not(.js) .escena .plano[data-plano="2"] { opacity: 1; }

.escena[data-estatica="si"] .escena-intro,
.escena[data-estatica="si"] .escena-pista,
.escena[data-estatica="si"] .escena-barra,
html:not(.js) .escena .escena-intro,
html:not(.js) .escena .escena-pista,
html:not(.js) .escena .escena-barra { display: none; }

.escena[data-estatica="si"] .escena-marca,
html:not(.js) .escena .escena-marca {
  opacity: 1; position: relative; inset: auto;
  min-height: 100vh; pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .escena-pista svg { animation: none; }
}

/* ---------- Seccion de rutas, tras la portada ---------- */
.rutas-seccion .portada-ruta { gap: 1.1rem; }
@media (min-width: 48em) {
  .rutas-seccion .portada-ruta { gap: 1.25rem; }
}
.rutas-seccion .ruta { background: var(--crema); backdrop-filter: none; }

/* ---------- Cabecera sobre la fotografia ----------
   El cristal se mantiene CLARO tambien sobre foto, como en la referencia:
   una capsula luminosa sobre imagen oscura se lee mejor que un cristal
   oscuro sobre oscuro, y el texto conserva el contraste del morado.
   Solo se refuerza la sombra, para que la capsula se separe de la imagen. */
.cabecera[data-sobre-foto="si"] .cabecera-fila {
  /* 62% es el minimo que mantiene el texto de la barra en 4.5:1 sobre la
     fotografia mas oscura del sitio. Por debajo se cae a 4.1:1. */
  background: rgba(255, 255, 255, .62);
  border-color: rgba(255, 255, 255, .5);
  box-shadow: 0 10px 40px rgba(34, 14, 37, .26);
}
.cabecera[data-sobre-foto="si"] .menu-movil {
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 18px 50px rgba(34, 14, 37, .3);
}