/* ============================================================
   WaterGo · Hero "El mundo dentro de la botella"
   ------------------------------------------------------------
   El vídeo (10 s) se reproduce UNA vez: el mar de icebergs se
   repliega dentro de la botella y el último fotograma del vídeo
   es EXACTAMENTE la imagen fija (hero-mundo-final). Al terminar,
   el vídeo se funde con esa imagen y aparece el titular. Nada
   queda en bucle: la página descansa sobre una imagen ligera.

   Estados (los pone /assets/js/heroe-mundo.js):
     .heroe-mundo            → reproduciendo el vídeo
     .heroe-mundo--fijo      → vídeo terminado: imagen + titular

   En móvil (≤ 820 px) y con prefers-reduced-motion el vídeo no
   se carga: se entra directamente en --fijo.
   ============================================================ */

.heroe-mundo {
  position: relative;
  /* Pantalla COMPLETA. Con 92vh asomaba una franja de la sección
     siguiente por debajo y el hero parecía un recuadro. dvh para que
     en móvil no lo estropee la barra del navegador. */
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background: #FBFAF8;           /* el glacial del fotograma final */
  display: flex;
  align-items: stretch;
}

.heroe-mundo__video,
.heroe-mundo__final {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* ANCLADOS ABAJO, el vídeo y la imagen igual.
     Una pantalla de 16:9 no recorta nada, pero una de 21:9 se come un
     16 % de la altura. Con el encuadre centrado ese recorte se
     repartía mitad arriba y mitad abajo, y cortaba las botellas por
     la base. Anclando abajo, el recorte se lo lleva TODO por arriba:
     las de 600 y 350 no se tocan nunca y, como mucho, se recorta el
     asa de la de litro.
     Y como los dos comparten encuadre, el fundido del final no da
     ningún salto de escala. */
  object-position: right bottom;
}

.heroe-mundo__video {
  z-index: 1;
  opacity: 1;
  transition: opacity .9s ease;
}

.heroe-mundo__final {
  z-index: 0;
}

.heroe-mundo--fijo .heroe-mundo__video {
  opacity: 0;
  pointer-events: none;
}

/* Velo suave solo por la izquierda para que el titular lea bien
   sobre la imagen final (que ya es clara). */
.heroe-mundo__velo {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(251, 250, 248, .82) 0%,
    rgba(251, 250, 248, .45) 34%,
    rgba(251, 250, 248, 0) 60%);
  opacity: 0;
  transition: opacity .6s ease .15s;
}

.heroe-mundo--fijo .heroe-mundo__velo { opacity: 1; }

/* ---- El texto ---- */

.heroe-mundo__texto {
  position: relative;
  z-index: 3;
  align-self: center;
  width: 100%;
  padding-top: 48px;
  padding-bottom: 48px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s ease .35s, transform .7s ease .35s;
}

.heroe-mundo--fijo .heroe-mundo__texto {
  opacity: 1;
  transform: none;
}

.heroe-mundo__titular {
  font-family: var(--fuente-titular, 'Familjen Grotesk', sans-serif);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: var(--tinta, #1D1D1B);
  font-size: clamp(2.6rem, 6.5vw, 5.2rem);
  max-width: 12ch;
  margin: 0 0 .5em;
}

.heroe-mundo__entrada {
  font-family: var(--fuente-texto, 'Source Serif 4', serif);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.6;
  color: var(--tinta, #1D1D1B);
  max-width: 44ch;
  margin: 0 0 1.6em;
}

.heroe-mundo__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  margin-bottom: 2.2em;
}

.heroe-mundo .cifras { margin: 0; }

/* Aviso mínimo mientras corre el vídeo: la marca ya está en la
   cabecera, así que aquí solo un botón para saltar la intro. */
.heroe-mundo__saltar {
  position: absolute;
  z-index: 3;
  right: 22px;
  bottom: 20px;
  border: 1px solid rgba(29, 29, 27, .35);
  background: rgba(251, 250, 248, .75);
  color: var(--tinta, #1D1D1B);
  font-family: var(--fuente-datos, 'DM Mono', monospace);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: opacity .4s ease;
}

.heroe-mundo__saltar:hover { background: rgba(251, 250, 248, .95); }
.heroe-mundo--fijo .heroe-mundo__saltar {
  opacity: 0;
  pointer-events: none;
}

/* ---- Móvil: sin vídeo, directo a la imagen ---- */

@media (max-width: 820px) {
  .heroe-mundo { min-height: 100dvh; }

  /* El vídeo TAMBIÉN se ve en el móvil. Antes se ocultaba y el hero
     entraba directo en la foto quieta. Lo gobierna heroe-mundo.js, que
     solo lo salta con reduced-motion o con ahorro de datos activado. */
  .heroe-mundo__saltar { right: 14px; bottom: 14px; }
  /* En vertical el texto cae encima de las botellas: el velo tiene que
     ser más opaco arriba o el titular se lee a medias. */
  .heroe-mundo__velo {
    background: linear-gradient(180deg,
      rgba(251, 250, 248, .96) 0%,
      rgba(251, 250, 248, .92) 38%,
      rgba(251, 250, 248, .62) 55%,
      rgba(251, 250, 248, 0) 74%);
  }
  /* El texto arranca POR DEBAJO de la cabecera. Antes empezaba a 40 px
     y el titular se leía a medias detrás de la isla del menú. */
  .heroe-mundo__texto {
    align-self: flex-start;
    padding-top: calc(var(--e-3) + 46px + var(--e-5));
    padding-bottom: 0;
  }
  /* Nada se sale por la derecha: en móvil los anchos en ch se pasan. */
  .heroe-mundo__titular,
  .heroe-mundo__entrada { max-width: 100%; }
  .heroe-mundo__titular { font-size: clamp(2.1rem, 10vw, 3rem); }
  .heroe-mundo__entrada { font-size: 1rem; margin-bottom: 1.3em; }
  .heroe-mundo__acciones { gap: 12px; margin-bottom: 1.6em; }

  /* Aquí el vídeo y la imagen ya son 9:16 propios, rodados con la
     botella centrada y la cámara atrás para que quepan las tres. Los
     pone heroe-mundo.js desde data-movil.

     El 9:16 del vídeo es más ancho que un móvil real (390×844), así
     que cover recorta por los lados y NO sobra alto: con solo
     object-position no hay forma de mover el encuadre en vertical.
     La solución es empezar más abajo y dejar que el alto se ajuste
     solo. El grupo baja Y encoge un poco, así que además se recorta
     menos por los lados. La banda que queda arriba es el mismo
     #FBFAF8 del fondo del archivo, así que no se ve. */
  .heroe-mundo__video,
  .heroe-mundo__final {
    top: 9%;
    height: auto;
    object-position: center bottom;
  }
}

@media (prefers-reduced-motion: reduce) {
  .heroe-mundo__video, .heroe-mundo__saltar { display: none; }
  .heroe-mundo__texto, .heroe-mundo__velo { transition: none; }
}