/* =========================================================
   García Recta Design — plegakit-hero.css
   Entrada cinematográfica del hero de Plegakit: pantalla oscura
   que se abre verticalmente (como una cortina) revelando la
   fotografía real, sincronizada con el reveal de título/subtítulo/
   CTA que ya maneja el sistema compartido (.hero.in-view, en
   layout.css / animations.js). Solo afecta el hero de esta página.
   ========================================================= */

.hero-cine-veil {
    position: absolute; left: 0; right: 0; height: 52%; background: var(--black);
    z-index: 2; transition: transform 1.3s cubic-bezier(.65,0,.35,1);
}
.hero-cine-veil.top { top: 0; transform-origin: top; }
.hero-cine-veil.bottom { bottom: 0; transform-origin: bottom; }
.hero.in-view .hero-cine-veil.top { transform: translateY(-100%); }
.hero.in-view .hero-cine-veil.bottom { transform: translateY(100%); }

/* Micro-detalles editoriales (esquinas) */
.hero-micro-brand { display: block; }
.hero-micro-brand + span { display: block; margin-top: 4px; opacity: .6; font-size: 10.5px; }

@media (prefers-reduced-motion: reduce) {
    .hero-cine-veil { transition: none; }
}