/* =====================================================================
   HÉROE CINE · las subpáginas de VÉRTICE (2-oct)
   Una fotografía a sangre debajo del héroe, del mismo mundo que los
   prototipos (las escenas del resumen ejecutivo). Va por debajo de los
   lienzos animados de cada semana (malla, campo, haces), que siguen
   siendo el momento de autoría de cada página; la foto les da
   profundidad. Se desvanece hacia el lado del texto para no competir con
   el titular, entra abriéndose desde una franja (como un obturador) y
   después deriva muy despacio.
   ===================================================================== */
.hc{ position:relative; isolation:isolate; overflow:hidden; background:#05080a; }
.hc-foto{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.5) 34%, #000 68%);
  mask-image:linear-gradient(90deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.5) 34%, #000 68%); }
.hc-foto::after{ content:""; position:absolute; inset:0; background:
  linear-gradient(0deg, rgba(5,8,10,.92) 0%, rgba(5,8,10,.2) 38%, rgba(5,8,10,.35) 100%),
  radial-gradient(70% 80% at 85% 30%, rgba(2,155,210,.16), transparent 70%); }
.hc-foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--hc-pos, 70% 50%);
  opacity:.82; filter:saturate(.85) contrast(1.05); animation:hcDeriva 30s ease-in-out 1.6s infinite alternate; }
@keyframes hcDeriva{ from{ transform:scale(1.02); } to{ transform:scale(1.09) translate3d(-1.2%, -.8%, 0); } }
.hc-foto{ clip-path:inset(40% 0 40% 0); animation:hcAbre 1.6s cubic-bezier(.16,1,.3,1) .15s forwards; }
@keyframes hcAbre{ to{ clip-path:inset(0 0 0 0); } }
.hc .doc-header-inner{ position:relative; z-index:2; }
.hc .doc-hero-scrim{ z-index:1; }
/* el lienzo de la semana 2 pinta su propio fondo oscuro en cada cuadro: en «screen» ese fondo desaparece y quedan solo sus puntos de luz sobre la foto */
.hc .malla{ mix-blend-mode:screen; }
/* las cabeceras simples (sin lienzo propio) suben a héroe */
.hc-simple{ border-bottom:1px solid var(--border); padding-block:calc(var(--nav-h) + clamp(72px, 11vw, 140px)) clamp(64px, 8vw, 110px); min-height:min(78vh, 720px); display:flex; align-items:flex-end; }
.hc-simple .doc-header-inner{ width:100%; }
.hc-simple .doc-title{ font-size:clamp(2.6rem, 6.4vw, 5.4rem); line-height:.95; letter-spacing:-.04em; max-width:16ch; text-shadow:0 16px 46px rgba(0,0,0,.7); }
.hc-simple .doc-lead{ max-width:56ch; text-shadow:0 6px 22px rgba(0,0,0,.75); }
@media (max-width:760px){
  .hc-foto{ -webkit-mask-image:none; mask-image:none; }
  .hc-foto img{ opacity:.5; }
}
@media (prefers-reduced-motion:reduce){
  .hc-foto{ clip-path:none; animation:none; }
  .hc-foto img{ animation:none; }
}