/* ============================================================
   HISORA — media.css | v=20260820
   Componentes de vídeo e imagen. Additivo: no pisa styles.css
============================================================ */

/* ── VÍDEO EN LA CABECERA ──────────────────────────────────
   El póster va debajo y el vídeo encima. Si el navegador no
   reproduce, o el usuario pide menos movimiento, queda el póster. */
.hero-img-wrap { position: relative; background: var(--parchment-d); }

.hero-img-wrap .hero-poster,
.hero-img-wrap .hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;
  display: block;
}
.hero-img-wrap .hero-video { z-index: 1; }

/* ── BANDA CINEMATOGRÁFICA ─────────────────────────────────
   Se funde con la sección de arriba y la de abajo mediante
   --band-top / --band-bot, que se pasan en el propio HTML. */
.film-band {
  position: relative;
  overflow: hidden;
  background: var(--pine-dk);
  height: clamp(320px, 46vw, 600px);
}
.film-band video,
.film-band img.film-poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
.film-band video { z-index: 1; }
.film-band::after {
  content: '';
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(to bottom, var(--band-top, transparent) 0%, rgba(0,0,0,0) 20%),
    linear-gradient(to top,    rgba(26,46,39,.88) 0%, rgba(26,46,39,.38) 20%, rgba(26,46,39,0) 52%);
}
.film-band-copy {
  position: absolute; z-index: 3;
  inset-inline: 0; bottom: 0;
  padding: 3rem var(--pad) 2.4rem;
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: .8rem;
}
.film-band-copy p {
  font-family: var(--font-h);
  font-size: clamp(.8rem, 1.9vw, 1.2rem);
  font-weight: 300; color: var(--white);
  letter-spacing: .06em; text-transform: uppercase;
  text-shadow: 0 1px 18px rgba(26,46,39,.4);
}
.film-band-copy p strong { font-weight: 600; color: var(--gold); }
.film-band-copy .fb-small {
  font-size: .64rem; letter-spacing: .22em;
  color: rgba(244,241,234,.7); text-transform: uppercase;
}

/* ── GALERÍA EDITORIAL ─────────────────────────────────────*/
.gal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.7rem, 1.4vw, 1.1rem);
}
.gal-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--rlg);
  aspect-ratio: 4 / 3;
  background: var(--parchment-d);
  border: 1px solid rgba(32,56,49,.07);
}
.gal-item.gal-big { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.gal-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s var(--ease);
}
.gal-item:hover img { transform: scale(1.045); }
.gal-item::after {
  content: '';
  position: absolute; inset-inline: 0; bottom: 0; height: 45%;
  background: linear-gradient(to top, rgba(26,46,39,.62) 0%, rgba(26,46,39,0) 100%);
  pointer-events: none;
  opacity: .9;
}
.gal-cap {
  position: absolute; z-index: 2;
  left: 1rem; right: 1rem; bottom: .85rem;
  font-size: .68rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(244,241,234,.92);
  text-shadow: 0 1px 10px rgba(26,46,39,.5);
}
/* Encuadres: cada foto mira a donde debe */
.gal-item img.fp-top    { object-position: center 22%; }
.gal-item img.fp-upper  { object-position: center 34%; }
.gal-item img.fp-lower  { object-position: center 66%; }
.gal-item img.fp-right  { object-position: 68% center; }

/* ── GALERÍA DE PRODUCTO (ficha) ───────────────────────────*/
.pgal { display: flex; flex-direction: column; gap: .7rem; }
.pgal-main {
  position: relative;
  overflow: hidden;
  border-radius: var(--rlg);
  background: var(--parchment-d);
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(32,56,49,.07);
}
.pgal-main img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  animation: pgalIn .45s var(--ease);
}
@keyframes pgalIn { from { opacity: 0; transform: scale(1.015); } to { opacity: 1; transform: none; } }

.pgal-thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .55rem;
}
.pgal-thumb {
  position: relative;
  padding: 0; margin: 0;
  border: 1.5px solid transparent;
  border-radius: 9px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--parchment-d);
  cursor: pointer;
  transition: border-color .25s, transform .25s, opacity .25s;
  opacity: .72;
}
.pgal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pgal-thumb:hover { opacity: 1; transform: translateY(-2px); }
.pgal-thumb.is-active { border-color: var(--gold); opacity: 1; }
.pgal-thumb:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }

/* ── RESPONSIVE ────────────────────────────────────────────*/
@media (max-width: 900px) {
  .gal-grid { grid-template-columns: repeat(2, 1fr); }
  .gal-item.gal-big { grid-column: span 2; grid-row: span 1; aspect-ratio: 16 / 10; }
}
@media (max-width: 560px) {
  .gal-grid { grid-template-columns: 1fr; }
  .gal-item.gal-big { grid-column: span 1; aspect-ratio: 4 / 3; }
  .film-band-copy { padding: 2rem var(--pad) 1.6rem; }
  .pgal-thumbs { grid-template-columns: repeat(5, 1fr); gap: .4rem; }
}

/* ── MENOS MOVIMIENTO: se queda el póster ──────────────────*/
@media (prefers-reduced-motion: reduce) {
  .hero-img-wrap .hero-video,
  .film-band video { display: none; }
  .gal-item img, .pgal-main img { transition: none; animation: none; }
  .gal-item:hover img { transform: none; }
}