/* =========================
   Home ▸ Hero (video + título)
   ========================= */

/* Contenedor del hero */
.hp-video__container {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* alto adaptable: sube en desktop, baja en mobile */
  min-height: 591px;
  height: clamp(48vh, 62vh, 76vh);
  background: #000;
}

/* El/los <video> ocupan todo el contenedor */
.hp-video__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;             /* recorta para llenar sin deformar */
  object-position: center center;
  display: block;
}

/* Overlay sutil para legibilidad del texto (opcional; poné un <div class="hp-video__overlay"> si lo usás) */
.hp-video__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.35) 0%,
    rgba(0,0,0,.15) 40%,
    rgba(0,0,0,.45) 100%
  );
  pointer-events: none;
}

/* ===== Título/claim sobre el video ===== */
.video__texto h1 {
  position: absolute;
  z-index: 2;
  left: 8%;
  bottom: 12%;
  margin: 0;
  color: #fff;
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: .02em;

  /* tamaño fluido: grande en desktop, moderado en mobile */
  font-size: clamp(1.6rem, 6.2vw, 5.2rem);
  max-width: min(72ch, 72%);
  text-wrap: balance;
}

/* ===== Utilidades de visibilidad ya usadas en tu sitio ===== */
.d-none { display: none !important; }
.d-md-block { display: none !important; }
.d-md-none  { display: block !important; }

@media (min-width: 1200px) {
  .d-md-block { display: block !important; }
  .d-md-none  { display: none !important; }
}

/* ===== Responsivo ===== */

/* <= 992px: ajusta títulos y alto del hero */
@media (max-width: 992px) {
  .hp-video__container {
    height: clamp(44vh, 56vh, 64vh);
    min-height: 320px;
  }
  .video__texto h1 {
    left: 6%;
    bottom: 10%;
    font-size: clamp(1.4rem, 6.5vw, 3rem);
    max-width: 86%;
  }
}

/* <= 600px: títulos más compactos y mayor contraste para legibilidad */
@media (max-width: 600px) {
  .hp-video__container { height: clamp(46vh, 56vh, 60vh); }
  .video__texto h1 {
    left: 5%;
    bottom: 9%;
    font-size: clamp(1.2rem, 7.2vw, 2.2rem);
    max-width: 92%;
    letter-spacing: .01em;
  }

  /* si el video vertical recorta mucho, centrado arriba */
  .hp-video__video { object-position: center; }
}

/* <= 380px: ultra-compacto */
@media (max-width: 380px) {
  .hp-video__container { min-height: 300px; }
  .video__texto h1 { font-size: clamp(1rem, 7.6vw, 1.9rem); bottom: 8%; }
}

/* Respeta usuarios con reduce motion */
@media (prefers-reduced-motion: reduce) {
  .hp-video__video { animation: none; }
}

/* Fallback si el video no carga (opcional: agrega la clase desde JS) */
.hp-video__container.is-fallback {
  background: #0f0f0f url('img/hero-fallback.jpg') center/cover no-repeat;
}