/* Hero «a medida»: vídeo a sangre que, al bajar, se recoge en un encuadre con cotas vivas.
   Las variables --ix / --iy (recorte lateral / vertical) las mueve js/modules/hero.js con el scroll. */
.hero { position: relative; height: 100svh; min-height: 560px; background: var(--paper); }
.motion .hero { height: 210svh; }
.hero__pin { position: relative; height: 100svh; min-height: 560px; overflow: hidden; --ix: 0px; --iy: 0px; }
.motion .hero__pin { position: sticky; top: 0; }

.hero__media {
  position: absolute; inset: 0; background: #2a2723; overflow: hidden;
  clip-path: inset(var(--iy) var(--ix) var(--iy) var(--ix));
}
.hero__poster, .hero__poster img, .hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.hero__video { opacity: 0; transition: opacity 0.8s; }
.hero__video.is-playing { opacity: 1; }
.hero__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.42) 0%, rgba(10, 10, 10, 0) 26%, rgba(10, 10, 10, 0) 48%, rgba(10, 10, 10, 0.62) 100%);
  opacity: var(--shade, 1);
}

/* Encuadre: mismas medidas que el recorte; esquinas y cotas por fuera */
.hero__frame { position: absolute; inset: var(--iy) var(--ix); pointer-events: none; opacity: var(--fo, 0); }
.hero__frame .frame__c { --corner: clamp(16px, 2vw, 28px); }
.hero__cw { position: absolute; left: 0; right: 0; top: -30px; }
.hero__ch { position: absolute; top: 0; bottom: 0; right: -32px; }
.hero__ch .cota__text { padding-block: 0.5em; }

.hero__content {
  position: absolute; inset: auto var(--pad) clamp(20px, 4vh, 44px); color: #fff; z-index: 2;
  display: grid; gap: clamp(16px, 3vh, 28px); opacity: var(--co, 1); transform: translateY(var(--cy, 0px));
}
.hero__meta { color: rgba(255, 255, 255, 0.85); }
.hero__title { font-family: var(--f-display); font-weight: 500; letter-spacing: -0.035em; }
.hero__title .line:first-child { font-size: var(--t-hero-a); line-height: 1.02; }
.hero__title .line:last-child { font-size: var(--t-hero-b); line-height: 0.9; font-weight: 600; }
.bw--hero .bw__l, .bw--hero .bw__r { color: #fff; font-weight: 400; }
.hero__title { text-shadow: 0 2px 34px rgba(0, 0, 0, 0.28); }
.hero__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; gap: var(--gap); }
.hero__lead { max-width: 36ch; font-size: var(--t-lead); line-height: 1.45; }
.hero__now { display: grid; gap: 4px; text-align: right; color: rgba(255, 255, 255, 0.78); }
.hero__now a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.5); }
.hero__now a:hover { border-color: #fff; }
.hero__toggle {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.6); background: transparent;
  cursor: pointer; display: grid; place-items: center; color: #fff;
}
.hero__toggle:hover { background: #fff; color: var(--ink); }
.hero__toggle[hidden] { display: none; }
.hero__toggle-icon { width: 10px; height: 12px; border-inline: 3px solid currentColor; }
.hero__toggle[aria-pressed="true"] .hero__toggle-icon {
  border: 0; width: 0; height: 0; border-left: 11px solid currentColor; border-block: 7px solid transparent; margin-left: 3px;
}
.hero__scroll {
  position: absolute; right: var(--pad); top: 50%; z-index: 2; color: #fff; writing-mode: vertical-rl;
  display: flex; align-items: center; gap: 10px; opacity: var(--co, 1);
}
.hero__scroll::after { content: ""; width: 1px; height: 56px; background: currentColor; animation: scrollcue 2.2s var(--ease-snap) infinite; transform-origin: top; }
@keyframes scrollcue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* Lo que se ve cuando el vídeo ya está recogido */
.hero__after {
  position: absolute; inset: 0; pointer-events: none; opacity: var(--fo, 0); z-index: 1;
}

@media (max-width: 899px) {
  .hero__foot { grid-template-columns: minmax(0, 1fr) auto; }
  .hero__now { grid-column: 1; text-align: left; }
  .hero__toggle { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
  .hero__scroll { display: none; }
  .hero__ch { right: -24px; }
}
@media (prefers-reduced-motion: reduce) { .hero__scroll::after { animation: none; } }