/* ═══════════════════════════════════════════════════════════════════
   HERO EN VIDEO — hoja de la variante
   Se carga después de style.css y solo pisa lo del hero. El resto del
   sitio queda intacto: esta variante cambia la portada, no la página.

   Los colores del texto son los mismos de la portada publicada: negro
   #0A1A2B en el titular y el cyan de marca en «PURA.». Para que el negro
   se lea, el texto va sobre la parte clara del cuadro —arriba a la
   izquierda, sobre el cielo y la bruma— y no sobre el bosque.
   ═══════════════════════════════════════════════════════════════════ */

/* ── El contenedor ─────────────────────────────────────────────────── */
/* svh en vez de vh: en celular la barra del navegador entra y sale, y con
   vh el hero cambia de alto a mitad de scroll. */
.hero-standalone--video {
  height: 100svh;
  min-height: 34rem;
  background: #DCEAF0;
}

/* El póster de fondo evita el rectángulo vacío mientras el video decodifica,
   y es el último cuadro, así que no hay salto de encuadre al arrancar. */
.hero-video-capa {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #DCEAF0 url('../video/hero-montania-poster.webp') center / cover no-repeat;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 56% center;
  display: block;
}

/* ── Los dos velos ─────────────────────────────────────────────────── */
/* Arriba: bruma clara, para que el encabezado oscuro se despegue del cielo
   y no quede pisado contra la copa del árbol de la esquina derecha. */
.hero-video-bruma {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 24%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(238, 247, 248, 0.58) 0%,
    rgba(238, 247, 248, 0.44) 26%,
    rgba(238, 247, 248, 0.18) 56%,
    rgba(238, 247, 248, 0)    100%
  );
}

/* A la izquierda: el mismo recurso que usa la portada publicada, donde el
   cielo se continúa por CSS hacia la izquierda y la foto queda a la derecha.
   Acá el video se lava hacia el margen izquierdo y se recupera entero antes
   de la mitad, así el texto se apoya en claro y el filo de roca y los árboles
   quedan sin tocar.
   La fuerza sale de medir: la zona del texto tiene luminancia 0,18 en su peor
   percentil sobre los siete cuadros muestreados; con este velo sube a 0,56 y
   el negro pasa de 3,8:1 a más de 10:1. */
.hero-video-velo {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  /* Radial y no una banda vertical: el texto ocupa la esquina de arriba a la
     izquierda, así que el lavado se concentra ahí y suelta hacia la derecha y
     hacia abajo. Con una banda de lado a lado el bosque del pie quedaba
     empañado sin necesidad y el plano perdía la mitad. */
  background: radial-gradient(
    124% 116% at 3% 20%,
    rgba(238, 247, 248, 0.82)  0%,
    rgba(238, 247, 248, 0.68) 24%,
    rgba(238, 247, 248, 0.46) 42%,
    rgba(238, 247, 248, 0.22) 58%,
    rgba(238, 247, 248, 0.06) 70%,
    rgba(238, 247, 248, 0)    82%
  );
}

/* ── El texto ──────────────────────────────────────────────────────── */
/* Arriba a la izquierda, contra la esquina, como en la portada publicada. */
.hero-standalone--video .hero-inner {
  align-items: flex-start;
  padding-left: clamp(1.25rem, 4vw, 3.5rem);
  padding-right: clamp(1.5rem, 6vw, 5rem);
  padding-top: calc(64px + clamp(1.25rem, 5vh, 3rem));
}

.hero-standalone--video .hero-text-col {
  max-width: min(58vw, 44rem);
}

.hero-standalone--video .hero-heading {
  font-size: clamp(3.6rem, 9vw, 9rem);
  margin-bottom: 1.25rem;
}

.hero-standalone--video .hero-tagline { margin-bottom: 2rem; }

/* El botón lleva sombra propia porque acá se apoya sobre el video y no sobre
   un fondo plano; sin esto flota sin peso. */
.hero-standalone--video .hero-cta {
  box-shadow: 0 10px 28px rgba(6, 95, 117, 0.30);
}

/* ── El encabezado sobre el video ──────────────────────────────────── */
/* Los enlaces del encabezado van al 70% de opacidad, que sobre el cielo del
   video da 3,5:1 y no llega. Acá van casi enteros. La regla se apaga sola en
   cuanto aparece .scrolled, que ya pinta la barra sólida. */
/* Enteros, no al 70%: la opacidad mezcla el texto con el cielo y baja el
   contraste sin que se note en el CSS. Así lo que se mide es lo que se ve.
   La regla se apaga sola en cuanto aparece .scrolled, que pinta la barra. */
.site-header--sobre-video:not(.scrolled) .nav-link { opacity: 1; }

/* ── Reducir movimiento ────────────────────────────────────────────── */
/* Se esconde el video y queda el póster de fondo, que es la toma fija. */
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
}

/* ── Celular ───────────────────────────────────────────────────────── */
/* Un plano de dron 16:9 recortado a una pantalla vertical se queda con el
   26% del ancho: se pierden el filo de roca y la profundidad del valle, que
   son la toma. Así que en vertical el video no se recorta a pantalla
   completa: ocupa la parte de arriba y se disuelve en el panel claro donde va
   el texto, que es la misma estructura de la portada publicada —la foto se
   deshace en claro y entrega la página—. */
@media (max-width: 768px) {
  .hero-standalone--video {
    height: auto;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    background: #EEF7F8;
  }

  /* El video se queda con todo lo que no usa el texto, así no sobra un panel
     vacío abajo y el plano gana la mayor superficie posible. */
  .hero-video-capa {
    position: relative;
    inset: auto;
    flex: 1 1 auto;
    width: 100%;
    min-height: 42svh;
    background-position: center 38%;
  }

  /* En vertical el texto ya no está sobre el video, así que el lavado de la
     izquierda no va: el velo pasa a ser la disolución hacia el panel. */
  .hero-video-velo {
    background: linear-gradient(
      to top,
      #EEF7F8                   0%,
      rgba(238, 247, 248, 0.86) 16%,
      rgba(238, 247, 248, 0.42) 32%,
      rgba(238, 247, 248, 0)    52%
    );
  }

  .hero-video-bruma { height: 18%; }

  .hero-standalone--video .hero-inner {
    position: relative;
    height: auto;
    flex: 0 0 auto;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;   /* si no, la columna se encoge al ancho del titular */
    padding: 0 clamp(1.25rem, 5vw, 3rem) clamp(2.5rem, 8vw, 3.5rem);
  }

  .hero-standalone--video .hero-text-col { max-width: 100%; width: 100%; }

  .hero-standalone--video .hero-heading {
    font-size: clamp(3.2rem, 15vw, 5rem);
  }
}