/* ═══════════════════════ HÉROE V2 «a sangre» — VISTA PREVIA /v2/ (2026-10-08) ═══════════════════════
   Pedido del owner: renders más épicos que ocupen TODO el héroe (referencia: tarjeta redondeada a sangre con el producto
   grande, cristal encima), con el estilo de la web y compatible con móvil. Solo lo cargan las páginas de /v2/.
   Escena «La consulta» (Blender): consulta al anochecer con ventanal y la ciudad; el
   vídeo acaba en el portátil y el móvil grandes y las pantallas son HTML nítido proyectado (mk-next-v2.js §12).
   Tres disposiciones según la forma de la ventana:
   · ancha (> 3:2): tarjeta a pantalla completa, vídeo 16:9 de fondo, texto a la izquierda sobre un velo.
   · casi cuadrada / tableta apaisada (1:1 – 3:2): texto arriba y la tarjeta 16:9 debajo (si no, el texto pisa el portátil).
   · vertical (≤ 1:1, móvil y tableta de pie): vídeo 9:16 propio a toda la tarjeta; título y botones arriba sobre el
     cielo, aparatos en medio, sellos abajo y la entradilla debajo de la tarjeta. */

body.mk .mk-hero.v2-hero {
    display: grid; grid-template-columns: minmax(0, 1fr);
    padding: 10px !important; min-height: 0; background: var(--nx-night); overflow: visible;
}
body.mk .mk-hero.v2-hero::before, body.mk .mk-hero.v2-hero::after, body.mk .mk-hero.v2-hero > .mk-wrap::before { display: none; }

.v2-card {
    grid-area: 1 / 1; position: relative; z-index: 0;
    min-height: max(560px, calc(100vh - 20px)); min-height: max(560px, calc(100svh - 20px));
    border-radius: clamp(20px, 2.2vw, 32px); overflow: hidden; isolation: isolate; background: #0b0a18;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .38);
}
.v2-card::after {   /* filo de cristal */
    content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .10);
}
.v2-card .nx-stage {
    position: absolute; inset: 0; width: auto; height: auto; margin: 0; aspect-ratio: auto; z-index: 0;
    --nx-z: 1;      /* sin acercamiento 2D: el render ya acaba con los aparatos grandes */
    --nx-wf: 1.15;  /* el vídeo ocupa todo el ancho (calidad: 1080 desde ~1240 px) */
}
.v2-card .nx-stage-media { -webkit-mask-image: none; mask-image: none; }
.v2-card .nx-stage-media > picture img { background: #0b0a18; }
.v2-card .nx-stage-glow { display: none; }
/* velo para leer el texto: oscuro a la izquierda → nada a la derecha (los aparatos quedan limpios) */
.v2-shade {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        linear-gradient(90deg, rgba(10, 8, 26, .84) 0%, rgba(10, 8, 26, .70) 24%, rgba(10, 8, 26, .32) 41%, rgba(10, 8, 26, 0) 55%),
        linear-gradient(180deg, rgba(10, 8, 26, .50) 0%, rgba(10, 8, 26, 0) 18%, rgba(10, 8, 26, 0) 82%, rgba(10, 8, 26, .38) 100%);
}
/* v3 (2026-10-18): refuerzo del velo SOLO bajo la columna de texto en PC (14–45 % del ancho). Las aperturas v3 llevan
   blancos (papeles, maqueta, factura) bajo el párrafo; el portátil del plano final empieza en el 46 % y no se oscurece. */
.v2-shade::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, rgba(10, 8, 26, 0) 14%, rgba(10, 8, 26, .34) 26%, rgba(10, 8, 26, .30) 38%, rgba(10, 8, 26, 0) 45%);
}
@media (max-aspect-ratio: 3/2) { .v2-shade::after { display: none; } }
/* leyenda viva (qué función se ve en las pantallas): píldora de cristal bajo el portátil (abajo a la derecha está el
   botón flotante de WhatsApp de la web) */
.v2-card .nx-stage-caption { left: 63%; bottom: clamp(16px, 3.2vh, 34px); transform: translateX(-50%); z-index: 4; }

/* texto encima del render, a la izquierda. Anclado al borde de la TARJETA (no a un contenedor centrado): el portátil
   del vídeo empieza en el 45 % del ancho → columna ≤ 38,5vw con 4,5vw de margen deja ≥ 24 px de aire de 1280 a 2560 */
body.mk .mk-hero.v2-hero .v2-copy {
    grid-area: 1 / 1; position: relative; z-index: 2; width: 100%; max-width: none; margin: 0;
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
    padding: calc(var(--nx-hh) + 1.5rem) 2rem clamp(2.2rem, 6vh, 4rem) clamp(1.25rem, 4.5vw, 6rem);
}
body.mk .mk-hero.v2-hero .v2-text { max-width: min(760px, 38.5vw); }
body.mk .mk-hero.v2-hero h1 { font-size: clamp(2.1rem, .9rem + 2.05vw, 3.75rem); line-height: 1.03; text-shadow: 0 2px 34px rgba(0, 0, 0, .35); }
body.mk .mk-hero.v2-hero .mk-hero-lead { font-size: clamp(.98rem, .92rem + .2vw, 1.12rem); line-height: 1.58; color: rgba(236, 234, 245, .86); text-shadow: 0 1px 18px rgba(0, 0, 0, .35); }
body.mk .mk-hero.v2-hero .mk-hero-ctas { margin-top: 1.5rem; }
body.mk .mk-hero.v2-hero .mk-hero-trust { margin-top: 1.5rem; }
body.mk .mk-hero.v2-hero .mk-hero-trust span {
    background: rgba(20, 16, 42, .42); border-color: rgba(255, 255, 255, .13);
    backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4);
}
body.mk .mk-hero.v2-hero .button.ghost { background: rgba(20, 16, 42, .38); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* ── casi cuadrada / tableta apaisada: texto arriba y tarjeta 16:9 debajo ── */
@media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 3/2) {
    body.mk .mk-hero.v2-hero { grid-template-rows: auto auto; }
    body.mk .mk-hero.v2-hero .v2-copy { grid-area: 1 / 1; padding: calc(var(--nx-hh) + 1.5rem) var(--mk-pad-x) 1.6rem; }
    body.mk .mk-hero.v2-hero .v2-text { max-width: 760px; }
    .v2-card { grid-area: 2 / 1; min-height: 0; aspect-ratio: 16 / 9; }
    .v2-shade { background: linear-gradient(180deg, rgba(10, 8, 26, .30) 0%, rgba(10, 8, 26, 0) 22%); }
}

/* ── vertical (móvil y tableta de pie): vídeo 9:16 propio a toda la tarjeta ──
   filas: 1 cabecera · 2 etiqueta (landings) · 3 H1 · 4 botones · 5 aparatos (1fr) · 6 sellos · 7 entradilla */
@media (max-aspect-ratio: 1/1) {
    body.mk .mk-hero.v2-hero {
        padding: 8px !important;
        grid-template-rows: calc(var(--nx-hh) + 4px) auto auto auto minmax(26svh, 1fr) auto auto;
    }
    .v2-card { grid-area: 1 / 1 / 7 / 2; min-height: calc(100vh - 16px); min-height: calc(100svh - 16px); }
    .v2-card .nx-stage { --nx-wf: 1.5; }   /* móvil 390@2,5 → 1080; 360@2 → 720 */
    .v2-shade {
        background: linear-gradient(180deg, rgba(10, 8, 26, .62) 0%, rgba(10, 8, 26, .45) 22%, rgba(10, 8, 26, .12) 40%, rgba(10, 8, 26, 0) 50%,
            rgba(10, 8, 26, 0) 74%, rgba(10, 8, 26, .55) 100%);
    }
    .v2-card .nx-stage-caption { display: none; }
    body.mk .mk-hero.v2-hero .v2-copy, body.mk .mk-hero.v2-hero .v2-text { display: contents; }
    body.mk .mk-hero.v2-hero .v2-text > * { position: relative; z-index: 2; grid-column: 1; margin-left: clamp(16px, 5vw, 40px); margin-right: clamp(16px, 5vw, 40px); }
    body.mk .mk-hero.v2-hero .mk-eyebrow { grid-row: 2; justify-self: start; margin-top: .3rem; margin-bottom: .6rem; }
    body.mk .mk-hero.v2-hero h1 { grid-row: 3; font-size: clamp(1.85rem, 8.2vw, 2.6rem); line-height: 1.06; margin-top: .4rem; margin-bottom: 0; }
    body.mk .mk-hero.v2-hero .mk-hero-ctas { grid-row: 4; margin-top: 1.1rem; gap: .6rem; }
    body.mk .mk-hero.v2-hero .mk-hero-ctas .button.btn-lg { padding: .78rem 1.05rem; font-size: .97rem; }
    body.mk .mk-hero.v2-hero .mk-hero-trust { grid-row: 6; margin-top: 0; margin-bottom: 18px; gap: .4rem .45rem; align-self: end; }
    body.mk .mk-hero.v2-hero .mk-hero-trust span { font-size: .78rem; padding: .3rem .62rem .3rem .45rem; }
    body.mk .mk-hero.v2-hero .mk-hero-lead { grid-row: 7; margin-top: 1.6rem; margin-bottom: .6rem; color: rgba(236, 234, 245, .80); text-shadow: none; }
}
/* la etiqueta de las landings se oculta en el móvil, como en producción (≤ 760 px) */
@media (max-width: 760px) { body.mk .mk-hero.v2-hero .mk-eyebrow { display: none; } }
/* móviles: entradilla y sellos DEBAJO de la tarjeta (los sellos tapaban el teclado del portátil) */
@media (max-aspect-ratio: 1/1) and (max-width: 600px) {
    .v2-card { grid-area: 1 / 1 / 6 / 2; }
    .v2-shade { background: linear-gradient(180deg, rgba(10, 8, 26, .62) 0%, rgba(10, 8, 26, .45) 22%, rgba(10, 8, 26, .12) 40%, rgba(10, 8, 26, 0) 50%,
        rgba(10, 8, 26, 0) 84%, rgba(10, 8, 26, .35) 100%); }
    body.mk .mk-hero.v2-hero .mk-hero-lead { grid-row: 6; }
    body.mk .mk-hero.v2-hero .mk-hero-trust { grid-row: 7; margin: .2rem clamp(16px, 5vw, 40px) 1.2rem; align-self: start; }
    body.mk .mk-hero.v2-hero .mk-hero-trust span { background: rgba(255, 255, 255, .05); backdrop-filter: none; -webkit-backdrop-filter: none; }
}