/*
 * Bloque Hero — estilos.
 * Carga condicional: solo si la página usa el bloque `hero`.
 *
 * Regla del fondo: video por defecto; `css_motion` sigue disponible como fondo
 * editable alternativo. El fallback neutro aparece con tipo `gradient` sin media
 * o `.is-bg-failed`.
 */

.okip-hero {
    position: relative;
    z-index: var(--okip-hero-z, 1); /* z por orden de render (block.php); el sticky sigue abajo */
    min-height: 100svh;
    min-height: 100vh;
    display: grid;
    place-items: center;
    overflow: hidden;
    isolation: isolate;
    color: var(--okip-color-text, #f4f7fb);
}

/* Overlap apilado B1→B2 (solo desktop): el Hero queda ESTÁTICO a pantalla completa
   (contenido inmóvil) y el Bloque 2 (z-index 2, opaco) sube por flujo natural y lo
   cubre. `sticky` no comprime el scroll ni envuelve el nodo → no toca la cadena de
   pins B2→B3. En ≤1024px se mantiene el flujo normal (apilado simple). */
@media (min-width: 1025px) {
    .okip-hero {
        position: sticky;
        top: 0;
    }
}

/* ---- Capa 1: fondo (limpio) ---- */
.okip-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: transparent; /* sin gradiente encima del media */
}

.okip-hero__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---- Fondo CSS editable: motion/grid tecnologico ---- */
.okip-hero__bg--css-motion {
    background: var(--okip-hero-css-bg, #020711);
    overflow: hidden;
}

.okip-hero__css-bg,
.okip-hero__css-bg::before,
.okip-hero__css-bg::after,
.okip-hero__css-grid,
.okip-hero__css-signal,
.okip-hero__css-noise {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.okip-hero__css-bg {
    overflow: hidden;
    background:
        radial-gradient(80% 70% at 50% 44%, rgba(255, 255, 255, .035), transparent 64%),
        linear-gradient(180deg, rgba(2, 7, 17, .08), rgba(2, 7, 17, .7));
    transform: translateZ(0);
}

.okip-hero__css-bg::before {
    content: "";
    opacity: 0;
}

.okip-hero__css-bg::after {
    content: "";
    opacity: 0;
}

.okip-hero__css-grid {
    color: var(--okip-hero-css-accent, #ff5a14);
    mix-blend-mode: screen;
    opacity: var(--okip-hero-css-grid-opacity, .18);
}

.okip-hero__css-signal {
    mix-blend-mode: screen;
    opacity: var(--okip-hero-css-scanline-opacity, .12);
    transform: translate3d(0, 0, 0);
}

.okip-hero__css-noise {
    mix-blend-mode: screen;
    opacity: var(--okip-hero-css-noise-opacity, .07);
}

/* Variante 1: grid futurista, ahora con entrada suave y chroma controlado. */
.okip-hero__css-bg--future-grid {
    background:
        radial-gradient(70% 64% at 50% 44%, rgba(255, 255, 255, .04), transparent 66%),
        radial-gradient(52% 44% at 28% 34%, var(--okip-hero-css-accent, #ff5a14), transparent 72%),
        linear-gradient(180deg, rgba(2, 7, 17, .1), rgba(2, 7, 17, .78));
}

.okip-hero__css-bg--future-grid::before {
    background:
        radial-gradient(42% 34% at 28% 31%, var(--okip-hero-css-accent, #ff5a14), transparent 68%),
        radial-gradient(36% 30% at 74% 63%, var(--okip-hero-css-accent-2, #3c8cff), transparent 70%),
        radial-gradient(54% 44% at 50% 92%, rgba(255, 255, 255, .12), transparent 72%);
    filter: blur(14px) saturate(1.08);
    mix-blend-mode: screen;
    opacity: calc(.06 + (var(--okip-hero-css-motion-intensity, .34) * .14));
}

.okip-hero__css-bg--future-grid::after {
    background:
        linear-gradient(90deg, transparent 0 13%, var(--okip-hero-css-accent, #ff5a14) 13.25% 13.38%, transparent 13.7% 46%, var(--okip-hero-css-accent-2, #3c8cff) 46.15% 46.28%, transparent 46.6% 100%),
        repeating-linear-gradient(180deg, transparent 0 24px, var(--okip-hero-css-accent-2, #3c8cff) 25px 26px, transparent 27px 72px);
    mix-blend-mode: screen;
    opacity: calc(var(--okip-hero-css-motion-alpha, 1) * var(--okip-hero-css-motion-intensity, .34) * .14);
    transform: translate3d(0, 0, 0);
}

.okip-hero__css-bg--future-grid.is-motion-enabled::after {
    animation: okip-hero-chroma-jolt var(--okip-hero-css-chroma-duration, 8s) ease-in-out infinite;
}

.okip-hero__css-bg--future-grid .okip-hero__css-grid {
    background-image:
        linear-gradient(to right, currentColor 1px, transparent 1px),
        linear-gradient(to bottom, currentColor 1px, transparent 1px),
        linear-gradient(120deg, transparent 0 34%, currentColor 34.2% 34.35%, transparent 34.6% 100%);
    background-size: 72px 72px, 72px 72px, 320px 320px;
    background-position: center;
    -webkit-mask-image: radial-gradient(ellipse at 50% 48%, #000 0 54%, transparent 82%);
    mask-image: radial-gradient(ellipse at 50% 48%, #000 0 54%, transparent 82%);
}

.okip-hero__css-bg--future-grid .okip-hero__css-signal {
    background:
        repeating-linear-gradient(180deg, transparent 0 8px, var(--okip-hero-css-accent-2, #3c8cff) 9px 10px, transparent 11px 20px),
        linear-gradient(90deg, transparent 0 9%, var(--okip-hero-css-accent, #ff5a14) 11% 11.35%, transparent 13% 38%, var(--okip-hero-css-accent-2, #3c8cff) 39% 39.24%, transparent 41% 100%),
        linear-gradient(180deg, transparent 0 23%, var(--okip-hero-css-accent, #ff5a14) 23.2% 23.42%, transparent 24.2% 68%, var(--okip-hero-css-accent-2, #3c8cff) 68.2% 68.38%, transparent 69.1% 100%);
    background-size: 100% 100%, 160% 100%, 100% 100%;
    opacity: calc(var(--okip-hero-css-scanline-opacity, .12) * (.45 + var(--okip-hero-css-motion-intensity, .34)));
}

.okip-hero__css-bg--future-grid.is-motion-enabled .okip-hero__css-signal {
    animation: okip-hero-signal-drift var(--okip-hero-css-signal-duration, 28s) linear infinite;
}

.okip-hero__css-bg--future-grid .okip-hero__css-noise {
    background-image:
        radial-gradient(circle at 18% 28%, rgba(255, 255, 255, .72) 0 1px, transparent 1.35px),
        radial-gradient(circle at 78% 62%, var(--okip-hero-css-accent-2, #3c8cff) 0 1px, transparent 1.45px),
        repeating-linear-gradient(90deg, transparent 0 3px, rgba(255, 255, 255, .12) 3px 4px, transparent 4px 7px);
    background-size: 37px 31px, 53px 47px, 9px 100%;
    opacity: calc(var(--okip-hero-css-noise-opacity, .07) * (.48 + var(--okip-hero-css-motion-intensity, .34)));
}

.okip-hero__css-bg--future-grid.is-motion-enabled .okip-hero__css-noise {
    animation: okip-hero-noise-step var(--okip-hero-css-noise-duration, 1.65s) steps(6, end) infinite;
}

/* Variante 2: aurora liquida, inspirada en lava pero sin blobs discretos. */
.okip-hero__css-bg--liquid-aurora {
    background:
        radial-gradient(82% 66% at 50% 46%, rgba(255, 255, 255, .035), transparent 64%),
        linear-gradient(180deg, var(--okip-hero-css-bg, #020711) 0%, #071020 48%, var(--okip-hero-css-bg, #020711) 100%);
}

.okip-hero__css-bg--liquid-aurora::before {
    background:
        linear-gradient(112deg, transparent 0 12%, var(--okip-hero-css-accent, #ff5a14) 23%, transparent 42%, var(--okip-hero-css-accent-2, #3c8cff) 61%, transparent 82%),
        linear-gradient(34deg, transparent 0 18%, var(--okip-hero-css-accent-2, #3c8cff) 32%, transparent 52%, var(--okip-hero-css-accent, #ff5a14) 76%, transparent 100%),
        linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, .12) 50%, transparent 100%);
    background-size: 170% 170%, 150% 160%, 100% 100%;
    filter: blur(34px) saturate(1.28);
    mix-blend-mode: screen;
    opacity: calc(.08 + (var(--okip-hero-css-motion-intensity, .34) * .24));
    transform: scale(1.14) translate3d(0, 0, 0);
}

.okip-hero__css-bg--liquid-aurora::after {
    background:
        conic-gradient(from 150deg at 50% 52%, transparent 0deg, var(--okip-hero-css-accent, #ff5a14) 48deg, transparent 110deg, var(--okip-hero-css-accent-2, #3c8cff) 178deg, transparent 250deg, rgba(255, 255, 255, .28) 318deg, transparent 360deg);
    filter: blur(26px);
    mix-blend-mode: screen;
    opacity: calc(var(--okip-hero-css-motion-alpha, 1) * (.04 + (var(--okip-hero-css-motion-intensity, .34) * .12)));
    transform: scale(1.22);
}

.okip-hero__css-bg--liquid-aurora.is-motion-enabled::before {
    animation: okip-hero-liquid-current var(--okip-hero-css-liquid-duration, 18s) ease-in-out infinite alternate;
}

.okip-hero__css-bg--liquid-aurora.is-motion-enabled::after {
    animation: okip-hero-liquid-haze var(--okip-hero-css-field-duration, 34s) ease-in-out infinite alternate;
}

.okip-hero__css-bg--liquid-aurora .okip-hero__css-grid {
    background-image:
        linear-gradient(to right, currentColor 1px, transparent 1px),
        linear-gradient(to bottom, currentColor 1px, transparent 1px);
    background-size: 96px 96px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
    opacity: calc(var(--okip-hero-css-grid-opacity, .18) * .72);
}

.okip-hero__css-bg--liquid-aurora .okip-hero__css-signal {
    background:
        repeating-linear-gradient(180deg, transparent 0 14px, rgba(255, 255, 255, .5) 15px 16px, transparent 17px 34px),
        linear-gradient(100deg, transparent 0 18%, var(--okip-hero-css-accent, #ff5a14) 34%, transparent 48%, var(--okip-hero-css-accent-2, #3c8cff) 68%, transparent 84% 100%);
    background-size: 100% 100%, 190% 100%;
    opacity: calc(var(--okip-hero-css-scanline-opacity, .12) * .7);
}

.okip-hero__css-bg--liquid-aurora.is-motion-enabled .okip-hero__css-signal {
    animation: okip-hero-liquid-signal var(--okip-hero-css-liquid-duration, 18s) ease-in-out infinite alternate;
}

.okip-hero__css-bg--liquid-aurora .okip-hero__css-noise {
    background-image:
        radial-gradient(circle at 26% 36%, rgba(255, 255, 255, .58) 0 1px, transparent 1.4px),
        radial-gradient(circle at 66% 56%, rgba(255, 255, 255, .34) 0 1px, transparent 1.5px);
    background-size: 49px 43px, 73px 67px;
    opacity: calc(var(--okip-hero-css-noise-opacity, .07) * .7);
}

.okip-hero__css-bg--liquid-aurora.is-motion-enabled .okip-hero__css-noise {
    animation: okip-hero-noise-step var(--okip-hero-css-noise-duration, 1.65s) steps(5, end) infinite;
}

/* Variante 3: campo de senal, un fondo de datos mas grafico y direccional. */
.okip-hero__css-bg--signal-field {
    background:
        radial-gradient(70% 62% at 50% 46%, rgba(255, 255, 255, .04), transparent 70%),
        linear-gradient(145deg, rgba(255, 90, 20, .08), transparent 36%),
        linear-gradient(215deg, rgba(60, 140, 255, .12), transparent 42%),
        var(--okip-hero-css-bg, #020711);
}

.okip-hero__css-bg--signal-field::before {
    background:
        repeating-conic-gradient(from 24deg at 50% 48%, transparent 0 14deg, var(--okip-hero-css-accent-2, #3c8cff) 15deg 15.8deg, transparent 17deg 42deg),
        radial-gradient(ellipse at 50% 48%, transparent 0 24%, var(--okip-hero-css-accent, #ff5a14) 24.4% 24.8%, transparent 25.4% 43%, var(--okip-hero-css-accent-2, #3c8cff) 43.3% 43.8%, transparent 44.5% 100%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 48%, transparent 0 17%, #000 22%, #000 68%, transparent 82%);
    mask-image: radial-gradient(ellipse at 50% 48%, transparent 0 17%, #000 22%, #000 68%, transparent 82%);
    mix-blend-mode: screen;
    opacity: calc(.05 + (var(--okip-hero-css-motion-intensity, .34) * .18));
    transform: scale(1.08);
}

.okip-hero__css-bg--signal-field.is-motion-enabled::before {
    animation: okip-hero-field-turn var(--okip-hero-css-field-duration, 34s) linear infinite;
}

.okip-hero__css-bg--signal-field::after {
    background:
        linear-gradient(110deg, transparent 0 32%, var(--okip-hero-css-accent, #ff5a14) 32.15% 32.42%, transparent 33% 58%, var(--okip-hero-css-accent-2, #3c8cff) 58.12% 58.36%, transparent 59% 100%),
        linear-gradient(70deg, transparent 0 45%, rgba(255, 255, 255, .45) 45.1% 45.25%, transparent 45.7% 100%);
    background-size: 150% 100%, 140% 100%;
    mix-blend-mode: screen;
    opacity: calc(var(--okip-hero-css-motion-alpha, 1) * (.06 + (var(--okip-hero-css-motion-intensity, .34) * .14)));
}

.okip-hero__css-bg--signal-field.is-motion-enabled::after {
    animation: okip-hero-field-scan var(--okip-hero-css-signal-duration, 28s) ease-in-out infinite alternate;
}

.okip-hero__css-bg--signal-field .okip-hero__css-grid {
    background-image:
        linear-gradient(60deg, currentColor 1px, transparent 1px),
        linear-gradient(120deg, currentColor 1px, transparent 1px),
        linear-gradient(to bottom, currentColor 1px, transparent 1px);
    background-size: 124px 124px, 124px 124px, 88px 88px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 48%, #000 0 58%, transparent 80%);
    mask-image: radial-gradient(ellipse at 50% 48%, #000 0 58%, transparent 80%);
    opacity: calc(var(--okip-hero-css-grid-opacity, .18) * .86);
}

.okip-hero__css-bg--signal-field .okip-hero__css-signal {
    background:
        repeating-linear-gradient(90deg, transparent 0 18px, var(--okip-hero-css-accent-2, #3c8cff) 19px 20px, transparent 21px 48px),
        linear-gradient(90deg, transparent 0 20%, var(--okip-hero-css-accent, #ff5a14) 22% 22.28%, transparent 25% 74%, var(--okip-hero-css-accent-2, #3c8cff) 76% 76.24%, transparent 79% 100%);
    background-size: 100% 100%, 160% 100%;
    opacity: calc(var(--okip-hero-css-scanline-opacity, .12) * .75);
}

.okip-hero__css-bg--signal-field.is-motion-enabled .okip-hero__css-signal {
    animation: okip-hero-signal-drift var(--okip-hero-css-signal-duration, 28s) linear infinite;
}

.okip-hero__css-bg--signal-field .okip-hero__css-noise {
    background-image:
        repeating-linear-gradient(0deg, transparent 0 5px, rgba(255, 255, 255, .18) 5px 6px, transparent 6px 13px),
        radial-gradient(circle at 52% 48%, rgba(255, 255, 255, .32) 0 1px, transparent 1.4px);
    background-size: 100% 100%, 59px 53px;
    opacity: calc(var(--okip-hero-css-noise-opacity, .07) * .82);
}

.okip-hero__css-bg--signal-field.is-motion-enabled .okip-hero__css-noise {
    animation: okip-hero-noise-step var(--okip-hero-css-noise-duration, 1.65s) steps(5, end) infinite;
}

@keyframes okip-hero-signal-drift {
    0% { background-position: 0 0, 0 0, 0 0; }
    100% { background-position: 0 0, -28% 0, 0 0; }
}

@keyframes okip-hero-noise-step {
    0% { background-position: 0 0, 0 0, 0 0; }
    33% { background-position: 19px -11px, -17px 13px, 4px 0; }
    66% { background-position: -23px 17px, 11px -19px, -5px 0; }
    100% { background-position: 7px -5px, -9px 8px, 0 0; }
}

@keyframes okip-hero-chroma-jolt {
    0%, 82%, 100% {
        opacity: calc(var(--okip-hero-css-motion-alpha, 1) * var(--okip-hero-css-motion-intensity, .34) * .08);
        transform: translate3d(0, 0, 0);
    }
    86% {
        opacity: calc(var(--okip-hero-css-motion-alpha, 1) * var(--okip-hero-css-motion-intensity, .34) * .22);
        transform: translate3d(calc(var(--okip-hero-css-chroma-offset, 5px) * .35), -.5px, 0);
    }
    90% {
        opacity: calc(var(--okip-hero-css-motion-alpha, 1) * var(--okip-hero-css-motion-intensity, .34) * .16);
        transform: translate3d(calc(var(--okip-hero-css-chroma-offset, 5px) * -.22), .5px, 0);
    }
    94% {
        opacity: calc(var(--okip-hero-css-motion-alpha, 1) * var(--okip-hero-css-motion-intensity, .34) * .1);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes okip-hero-liquid-current {
    0% {
        background-position: 0% 50%, 100% 50%, 0 0;
        transform: scale(1.14) translate3d(-1.5%, 0, 0);
    }
    50% {
        background-position: 58% 42%, 44% 58%, 0 0;
        transform: scale(1.18) translate3d(1%, -1%, 0);
    }
    100% {
        background-position: 100% 54%, 0% 46%, 0 0;
        transform: scale(1.15) translate3d(1.5%, 1%, 0);
    }
}

@keyframes okip-hero-liquid-haze {
    0% {
        transform: scale(1.22) rotate(-5deg);
        opacity: calc(var(--okip-hero-css-motion-alpha, 1) * (.04 + (var(--okip-hero-css-motion-intensity, .34) * .1)));
    }
    100% {
        transform: scale(1.28) rotate(7deg);
        opacity: calc(var(--okip-hero-css-motion-alpha, 1) * (.06 + (var(--okip-hero-css-motion-intensity, .34) * .14)));
    }
}

@keyframes okip-hero-liquid-signal {
    0% { background-position: 0 0, 0% 0; }
    100% { background-position: 0 0, 100% 0; }
}

@keyframes okip-hero-field-turn {
    0% { transform: scale(1.08) rotate(0deg); }
    100% { transform: scale(1.08) rotate(360deg); }
}

@keyframes okip-hero-field-scan {
    0% { background-position: 0% 0, 0% 0; }
    100% { background-position: 100% 0, 70% 0; }
}

/* ---- Pausa de animaciones cuando el Hero queda CUBIERTO ----
   El Hero es position:sticky → puede seguir intersectando el viewport aunque el
   Bloque 2 ya lo tape. script.js detecta el cubrimiento por scroll/rAF (comparando
   el bloque siguiente) y latchea `.is-hero-paused`. Detener las animaciones
   infinitas full-viewport ahorra repaints/compositing (sobre todo en Firefox).
   `!important` es necesario: el shorthand `animation:` de cada variante reinicia
   `animation-play-state` a `running` y gana por especificidad si no se fuerza. */
.okip-hero.is-hero-paused .okip-hero__css-bg,
.okip-hero.is-hero-paused .okip-hero__css-bg::before,
.okip-hero.is-hero-paused .okip-hero__css-bg::after,
.okip-hero.is-hero-paused .okip-hero__css-signal,
.okip-hero.is-hero-paused .okip-hero__css-noise,
.okip-hero.is-hero-paused .okip-hero__card-scan,
.okip-hero.is-hero-paused [data-okip-motion-target] {
    animation-play-state: paused !important;
}

/* ---- Pausa de las animaciones PESADAS del fondo durante la ENTRADA ----
   Mientras entran texto y tarjetas, las animaciones infinitas del fondo (blur +
   blend a viewport completo) le roban frames a la entrada → bajones de fluidez en
   la primera carga/recarga. Se pausan durante la entrada y script.js quita
   `is-hero-entering` cuando texto+tarjetas terminan de entrar. Gated por `.okip-js`:
   sin JS el fondo anima con normalidad y la clase no congela nada. */
.okip-js .okip-hero.is-hero-entering .okip-hero__css-bg::before,
.okip-js .okip-hero.is-hero-entering .okip-hero__css-bg::after,
.okip-js .okip-hero.is-hero-entering .okip-hero__css-signal,
.okip-js .okip-hero.is-hero-entering .okip-hero__css-noise {
    animation-play-state: paused !important;
}

/* ---- Crossfade intro → loop (sin parpadeo negro) ----
   Tres posibles capas apiladas: intro (encima), loop y fallback (debajo).
   El loop/fallback se reproducen/cargan detrás y el intro se desvanece por
   opacidad, revelándolos suavemente. Las clases las latchea script.js. */
.okip-hero__media--intro,
.okip-hero__media--loop,
.okip-hero__media--fallback {
    transition: opacity var(--okip-hero-xfade, 700ms) ease;
}
.okip-hero__media--intro    { opacity: 0; z-index: 2; }  /* mostrado por JS */
.okip-hero__media--loop     { opacity: 1; z-index: 1; }
.okip-hero__media--fallback { opacity: 0; z-index: 1; }

/* Con JS activo: el intro lidera y el loop espera el crossfade. */
.okip-js .okip-hero--animated .okip-hero__media--intro { opacity: 1; }
.okip-js .okip-hero--animated .okip-hero__media--loop  { opacity: 0; }

/* Latches del crossfade (los pone script.js). */
.okip-hero.is-loop-visible .okip-hero__media--loop      { opacity: 1; }
.okip-hero.is-intro-hidden .okip-hero__media--intro     { opacity: 0; }
.okip-hero.is-fallback-shown .okip-hero__media--fallback { opacity: 1; }

/* Fallback NEUTRO: sin media real o si el video falla.
   Solo un color sólido oscuro, sin gradiente decorativo, patrón ni glow falso. */
.okip-hero__bg--missing,
.okip-hero.is-bg-failed .okip-hero__bg {
    background: #05080f;
}

/* Si un video llegó a renderizar pero falla, lo atenuamos suavemente. */
.okip-hero.is-bg-failed .okip-hero__media {
    filter: brightness(.6);
    transition: filter .6s ease;
}

/* ---- Capa 2: overlay ---- */
.okip-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

/* ---- Capa 3: tarjetas flotantes ---- */
.okip-hero__cards {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.okip-hero__card {
    position: absolute;
    left: var(--okip-card-x, 50%);
    top: var(--okip-card-y, 50%);
    width: clamp(90px, var(--okip-card-w, 14vw), 360px);
    transform: translate(-50%, -50%); /* centrado: NO se anima (lo animamos en el media) */
    pointer-events: auto;
}

.okip-hero__card--gif {
    width: clamp(170px, var(--okip-card-w, 24vw), 460px);
}

.okip-hero__card-media {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
}

.okip-hero__card--gif .okip-hero__card-media {
    aspect-ratio: 16 / 9;
    border-radius: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
}

.okip-hero__card-media img,
.okip-hero__card-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.okip-hero__card-gif {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .18s ease;
}

.okip-hero__card.is-gif-playing .okip-hero__card-gif {
    opacity: 1;
}

/* Placeholder temporal de tarjeta (cuando aún no hay media real).
   Representación clara y geométrica, NO un media final falso. Marca la posición
   y reserva el espacio; al configurar media real, este placeholder desaparece. */
.okip-hero__card-ph {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--okip-space-2, .5rem);
    padding: var(--okip-space-3, 1rem);
    text-align: center;
    background:
        repeating-linear-gradient(
            -45deg,
            rgba(255, 255, 255, .05) 0,
            rgba(255, 255, 255, .05) 1px,
            transparent 1px,
            transparent 9px
        ),
        #0a1422;
}
.okip-hero__card-ph-icon {
    width: 34%;
    aspect-ratio: 1;
    border: 2px dashed rgba(120, 180, 255, .5);
    border-radius: 8px;
    position: relative;
}
.okip-hero__card-ph-icon::after {
    content: "";
    position: absolute;
    inset: 22%;
    border-radius: 4px;
    background: rgba(120, 180, 255, .25);
}
.okip-hero__card-ph-label {
    font-size: .68rem;
    letter-spacing: .08em;
    line-height: 1.25;
    color: var(--okip-color-text-muted, #b9c4d4);
    text-transform: uppercase;
}

.okip-hero__card--glow .okip-hero__card-media {
    box-shadow:
        0 0 0 1px rgba(80, 160, 255, .35),
        0 0 28px rgba(60, 140, 255, .35),
        0 20px 50px rgba(0, 0, 0, .5);
}

.okip-hero__card--gif.okip-hero__card--glow .okip-hero__card-media {
    box-shadow: none;
}

/* Scanline (solo CSS) */
.okip-hero__card-scan {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 30%;
    background: linear-gradient(180deg, rgba(120, 200, 255, .25), transparent);
    transform: translateY(-100%);
}
.okip-hero__card--scanline .okip-hero__card-scan {
    animation: okip-hero-scan 3.2s linear infinite;
}
@keyframes okip-hero-scan {
    0%   { transform: translateY(-100%); }
    100% { transform: translateY(400%); }
}

/* Hover (solo punteros finos) — se anima el media para no tocar el centrado */
@media (hover: hover) and (pointer: fine) {
    .okip-hero__card-media {
        transition: transform .4s var(--okip-ease), box-shadow .4s ease;
    }
    .okip-hero__card:hover .okip-hero__card-media {
        transform: scale(1.05);
    }
}

/* ---- Capa 4: contenido ---- */
.okip-hero__content {
    position: relative;
    z-index: 4;
    width: 100%;
    max-width: var(--okip-hero-maxw, 1000px);
    margin-inline: auto;
    padding: 0 var(--okip-space-4, 1.5rem);
    text-align: center;
}
.okip-hero__content--left  { text-align: left; }
.okip-hero__content--right { text-align: right; }

.okip-hero__title {
    margin: 0;
    font-family: var(--okip-hero-title-font-family, var(--okip-font-base));
    font-size: var(--okip-hero-title-font-size, clamp(2.625rem, 5.2vw, 4.875rem));
    line-height: var(--okip-hero-title-line-height, 1.08);
    font-weight: var(--okip-hero-title-font-weight, 300);
    letter-spacing: var(--okip-hero-title-letter-spacing, 0);
    color: var(--okip-hero-title-color, #ffffff);
    text-shadow: 0 2px 24px rgba(0, 8, 18, .62);
}
.okip-hero__title-line { display: block; }
.okip-hero__title-line--primary { font-weight: 600; }
.okip-hero__title-line--secondary { font-weight: 200; }

.okip-hero__logo {
    margin-top: var(--okip-space-4, 1.5rem);
    display: flex;
    justify-content: center;
}

.okip-hero__logo-img {
    width: var(--okip-logo-width, 160px);
    height: auto;
    display: block;
    max-width: 100%;
}

.okip-hero__desc {
    margin-top: var(--okip-space-3, 1rem);
    font-family: var(--okip-hero-desc-font-family, var(--okip-font-base));
    font-size: var(--okip-hero-desc-font-size, clamp(1rem, 1.8vw, 1.375rem));
    line-height: var(--okip-hero-desc-line-height, 1.5);
    font-weight: var(--okip-hero-desc-font-weight, 400);
    letter-spacing: var(--okip-hero-desc-letter-spacing, 0);
    color: var(--okip-hero-desc-color, var(--okip-color-text-muted, #b9c4d4));
    text-shadow: 0 2px 16px rgba(0, 8, 18, .52);
}

/* ---- Responsive: móvil/tablet ---- */
@media (max-width: 768px) {
    .okip-hero {
        min-height: auto;
        padding-block: 18vh 8vh;
    }
    .okip-hero__cards {
        position: static;
        display: flex;
        gap: var(--okip-space-3, 1rem);
        justify-content: center;
        flex-wrap: wrap;
        padding: var(--okip-space-4, 1.5rem);
        margin-top: var(--okip-space-4, 1.5rem);
    }
    .okip-hero__card {
        position: static;
        transform: none;
        width: clamp(100px, 38vw, 160px);
    }
    .okip-hero__card--gif {
        width: clamp(156px, 82vw, 300px);
    }
}

/* ---- Accesibilidad: reduce motion ---- */
@media (prefers-reduced-motion: reduce) {
    /* Sin crossfade: mostrar el loop/fallback (estático) y ocultar el intro. */
    .okip-js .okip-hero--animated .okip-hero__media--loop  { opacity: 1; }
    .okip-js .okip-hero--animated .okip-hero__media--intro { opacity: 0; }
    .okip-hero__media--intro,
    .okip-hero__media--loop,
    .okip-hero__media--fallback {
        transition: none;
    }
    .okip-hero__card--scanline .okip-hero__card-scan {
        animation: none;
    }
    .okip-hero__css-bg,
    .okip-hero__css-bg::before,
    .okip-hero__css-bg::after,
    .okip-hero__css-signal,
    .okip-hero__css-noise {
        animation: none !important;
    }
    .okip-hero.is-bg-failed .okip-hero__media {
        transition: none;
    }
    .okip-hero__card-gif {
        transition: none;
    }
}