/**
 * HERO — template-parts/hero.php
 *
 * Fondo de video (desktop) con fallback a imagen poster (mobile — ver
 * assets/js/hero-video.js, que decide cuál de los dos activar).
 * object-position sesgado a la izquierda: el texto quemado en el
 * video vive en el tercio izquierdo del frame — ver nota en hero.html.
 */
.hero{
  position:relative;
  min-height:100vh;   /* fallback para navegadores sin soporte de svh */
  min-height:100svh;
  display:flex; align-items:flex-end;
  overflow:hidden;
  background:var(--color-ink);
}
.hero-media{ position:absolute; inset:0; width:100%; height:100%; }
.hero-poster, .hero-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:22% center;
  opacity:.96;
}
.hero-video{ display:none; }
.hero.has-video .hero-video{ display:block; }
.hero.has-video .hero-poster{ opacity:0; } /* el poster queda como <img> de respaldo (SEO/carga inicial) pero no se ve una vez el video reproduce */

.hero::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,15,12,.28) 0%, rgba(20,15,12,.05) 30%, rgba(20,15,12,.18) 58%, rgba(20,15,12,.7) 100%);
  z-index:1;
}
.hero-content{ position:relative; z-index:2; width:100%; padding-bottom:56px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }

.scroll-cue{
  position:absolute; z-index:2; left:32px; bottom:26px;
  display:flex; align-items:center; gap:10px;
  color:rgba(255,255,255,.65); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
}
.scroll-cue .line{ width:1px; height:30px; background:rgba(255,255,255,.5); position:relative; overflow:hidden; }
.scroll-cue .line::after{
  content:""; position:absolute; left:0; top:-100%; width:100%; height:100%; background:var(--color-amber-soft);
  animation:scrollcue 1.8s ease-in-out infinite;
}
@keyframes scrollcue{ 0%{top:-100%;} 60%{top:100%;} 100%{top:100%;} }
@media (max-width:640px){ .scroll-cue{ display:none; } }

/* Home: el video institucional no tiene el mismo sesgo de encuadre
   que el de Casuarinas (ahí el texto quemado vive en el tercio
   izquierdo) — se centra normal, sin tocar la regla compartida. */
.page-home .hero-video, .page-home .hero-poster{ object-position:center center; }

/* Casuarinas — hero vertical 9:16 (mobile): el sesgo 22% a la
   izquierda es específico del video horizontal (el texto quemado
   vive en su tercio izquierdo). El video vertical nuevo trae su
   propio texto centrado, así que en el breakpoint donde se activa
   (≤767px, ver hero.html) se recupera el centrado estándar — el
   poster de respaldo también se recentra para consistencia. */
@media (max-width:767px){
  .page-project .hero-video, .page-project .hero-poster{ object-position:center center; }
}