/* =========================================================
   Hacemos — ajustes 16/10
   1) Zócalo final (.hp-closing--bone):
   Video de la cabra que gira la cabeza siguiendo al mouse.
   Se monta ENCIMA de la foto fija (::before, cierre-continuo.webp)
   con exactamente el mismo encuadre: mismo ancho, misma máscara y
   el mismo "cover / right center", así la foto queda abajo y solo
   la cabra se mueve. En celular / pantallas táctiles no se carga:
   queda la foto fija de siempre.
   ========================================================= */
.hp-closing__goat {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: min(100%, 1140px);
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  container-type: size;
  /* misma máscara que .hp-closing--bone::before */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.01) 8%, rgba(0,0,0,.06) 18%, rgba(0,0,0,.18) 28%, rgba(0,0,0,.4) 38%, rgba(0,0,0,.69) 48%, rgba(0,0,0,.9) 58%, #000 70%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.01) 8%, rgba(0,0,0,.06) 18%, rgba(0,0,0,.18) 28%, rgba(0,0,0,.4) 38%, rgba(0,0,0,.69) 48%, rgba(0,0,0,.9) 58%, #000 70%);
}
/* Réplica de background-size:cover + background-position:right center
   de la foto (2172×724) dentro de la caja de arriba. */
.hp-closing__goat-frame {
  position: absolute;
  right: 0;
  top: 50%;
  width: max(100cqw, calc(100cqh * 2172 / 724));
  aspect-ratio: 2172 / 724;
  transform: translateY(-50%);
}
/* Posición del video dentro de la foto (medida por coincidencia de
   píxeles con la foto original: el video es un recorte de ella). */
.hp-closing__goat-video {
  position: absolute;
  left: 58.19%;
  top: 7.87%;
  width: 41.81%;
  height: 84.27%;
  object-fit: fill;
  opacity: 0;
  transition: opacity .5s ease;
  /* bordes suaves para que se funda con la foto de abajo */
  /* Borde superior SIN fundido: si se fundiera, se transparentaría
     el cuerno de la foto fija de abajo cuando la cabra gira. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 24%), linear-gradient(180deg, rgba(0,0,0,.35) 0%, #000 3.5%, #000 95%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent 0%, #000 24%), linear-gradient(180deg, rgba(0,0,0,.35) 0%, #000 3.5%, #000 95%, transparent 100%);
          mask-composite: intersect;
}
/* Franja de fondo SIN cabra, justo encima del video: tapa la punta del
   cuerno y el sombrero de la foto fija (que quedan por arriba del video
   y se verían "congelados" cuando la cabeza gira). */
.hp-closing__goat-plate {
  position: absolute;
  left: 58.125%;
  top: 0;
  width: 41.875%;
  height: 11.99%;
  background: url('../assets/videos/cabra-zocalo-cielo.webp?v=1') center / 100% 100% no-repeat;
  opacity: 0;
  transition: opacity .5s ease;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 24%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 24%);
}
.hp-closing__goat.is-ready .hp-closing__goat-video,
.hp-closing__goat.is-ready .hp-closing__goat-plate { opacity: 1; }

/* Celular, tablets táctiles, sin soporte o con "reducir movimiento": foto fija */
@media (max-width: 760px), (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .hp-closing__goat { display: none; }
}
@supports not (width: 1cqw) {
  .hp-closing__goat { display: none; }
}

/* =========================================================
   Celular — tarjeta "Rulemanes Industriales" (Estrategia en acción).
   Su video tiene una regla propia (.ri-card-image { width: 38% }) que
   pisaba la de celular y lo dejaba angosto. Igual que las demás
   tarjetas: ancho completo.
   ========================================================= */
@media (max-width: 600px) {
  .hp-case-card .ri-card-image { width: 100%; height: 140px; }
}