/* ═══════════════════════════════════════════════════════════════════════════
   KIT LANDING · VIDEO  →  dist/kit-video.css (aparte: la página sin video no lo carga)
   H-0 · hero con video propio de la marca (organismos/hero-video-marca.html).
   Medido en TimeToMarket, ARS, IAC y EnduroPro (23-oct-2026). Lo que cambia por marca:
     --k-hvm-fondo       el color más oscuro del video (los bordes se funden con él)
     --k-hvm-borde       cuánto se funden los lados del video (12 %; IAC necesitó 13 %)
     --k-hvm-reserva     alto que se deja para el texto: título y botón sobre el pliegue en 1366×768
     --k-hvm-cierre-x/-y/-ancho   la zona LIBRE del cuadro final, medida con drawbox (ver MANUAL §2.1)
   Funciona SOLO (sin tokens.css ni movimiento.css): cada var(--k-…) trae su valor de respaldo, para injertarlo en sitios
   que ya existen. Ahí la marca se fija en la propia sección: .k-hvm{--k-marca:…;--k-marca-2:…;--k-fondo:…}
   ═══════════════════════════════════════════════════════════════════════════ */
.k-hvm{--k-hvm-fondo:var(--k-fondo,#05050F);--k-hvm-reserva:360px;--k-hvm-borde:12%;--k-hvm-cierre-x:7%;--k-hvm-cierre-y:12%;--k-hvm-cierre-ancho:34%;
  position:relative;isolation:isolate;overflow:hidden;overflow:clip;padding:clamp(80px,7vw,96px) 0 clamp(56px,6vw,80px);
  background:var(--k-hvm-fondo);color:var(--k-txt,#F2F2FF)}

/* chispas: repiten el objeto del video en CSS (las pone video.js; sin JS no hay) */
.k-hvm__chispas{position:absolute;inset:0;z-index:-1;pointer-events:none}
.k-hvm__chispa{position:absolute;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c);animation:k-hvm-deriva 4s ease-in-out infinite alternate}
@keyframes k-hvm-deriva{to{transform:translateY(-16px)}}

/* el video entero (contain), lo más ancho que deje el alto */
.k-hvm__escena{position:relative;margin:0 auto;width:min(100%,calc((100svh - var(--k-hvm-reserva)) * 16 / 9));min-width:min(100%,560px)}
.k-hvm__escena::before{content:'';position:absolute;inset:-20% -30%;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 70% at 50% 40%,color-mix(in srgb,var(--k-marca,#7C3AED) 32%,transparent) 0%,transparent 70%)}
/* bordes con máscara (lados + abajo), no con un ::after: el rectángulo del contain se nota en escritorio */
.k-hvm__video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:var(--k-hvm-fondo);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--k-hvm-borde),#000 calc(100% - var(--k-hvm-borde)),transparent 100%),linear-gradient(#000 70%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 var(--k-hvm-borde),#000 calc(100% - var(--k-hvm-borde)),transparent 100%),linear-gradient(#000 70%,transparent 100%);
  mask-composite:intersect}

/* cierre: logo oficial (SVG, nítido, sin créditos de IA) + «powered by», sincronizado con data-cierre */
.k-hvm__cierre{position:absolute;left:var(--k-hvm-cierre-x);top:var(--k-hvm-cierre-y);z-index:1;width:var(--k-hvm-cierre-ancho);
  container-type:inline-size;pointer-events:none;filter:drop-shadow(0 2px 14px color-mix(in srgb,var(--k-hvm-fondo) 70%,transparent))}
@media (max-width:600px){.k-hvm__cierre{width:calc(var(--k-hvm-cierre-ancho) * 1.35);top:calc(var(--k-hvm-cierre-y) * .85)}}
.k-hvm__logo{display:block;width:100%;height:auto;opacity:0;transform:translateY(10px);filter:blur(6px);
  transition:opacity 1s ease,transform 1.1s var(--k-ease,cubic-bezier(.22,1,.36,1)),filter 1s ease}
.k-hvm__by{display:flex;align-items:center;gap:.7em;margin:.9em 0 0;font:600 max(10px,4.2cqw)/1 var(--k-f-cuerpo,inherit);letter-spacing:.2em;
  text-transform:uppercase;color:var(--k-txt-2,rgba(242,242,255,.78));opacity:0;transform:translateY(8px);transition:opacity .9s ease .55s,transform 1s var(--k-ease,cubic-bezier(.22,1,.36,1)) .55s}
.k-hvm__by img{display:block;height:2.6em;width:auto}
.k-hvm-fin .k-hvm__logo{opacity:1;transform:none;filter:none}
.k-hvm-fin .k-hvm__by{opacity:1;transform:none}

/* pausa / ver de nuevo (WCAG 2.2.2): en la esquina que el cierre deja libre */
.k-hvm__pausa{position:absolute;right:max(4%,.75rem);bottom:clamp(1.5rem,9%,4rem);z-index:2;display:inline-flex;align-items:center;min-height:36px;
  padding:.4rem .8rem;border-radius:var(--k-r-pill,999px);border:1px solid var(--k-borde-2,rgba(255,255,255,.18));background:color-mix(in srgb,var(--k-hvm-fondo) 55%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--k-txt-2,rgba(242,242,255,.78));font:600 .72rem/1 var(--k-f-cuerpo,inherit);letter-spacing:.14em;
  text-transform:uppercase;cursor:pointer}
.k-hvm__pausa[hidden]{display:none}
.k-hvm__pausa:hover{color:var(--k-txt,#F2F2FF)}
.k-hvm__pausa:focus-visible{outline:2px solid var(--k-marca-2,#22D3EE);outline-offset:3px}
@media (max-width:600px){.k-hvm__pausa{min-height:28px;padding:.25rem .6rem;font-size:.6rem}}

/* texto debajo del video */
.k-hvm__txt{position:relative;margin-top:clamp(-2.5rem,-3vw,-1.25rem)}
.k-hvm__linea{height:1px;margin-bottom:1.75rem;background:linear-gradient(90deg,var(--k-marca,#7C3AED) 0%,var(--k-marca-2,#22D3EE) 38%,transparent 100%)}
.k-hvm__rotulo{margin:0 0 1.1rem;font:600 .6875rem/1.5 var(--k-f-cuerpo,inherit);letter-spacing:.22em;text-transform:uppercase;color:var(--k-txt-2,rgba(242,242,255,.78))}
.k-hvm__cab{display:grid;gap:1.75rem;grid-template-areas:"h1" "bajada" "ctas"}
.k-hvm__cab>.k-hvm__mascara{grid-area:h1}.k-hvm__cab>.k-hvm__bajada{grid-area:bajada}.k-hvm__cab>.k-hvm__ctas{grid-area:ctas}
@media (min-width:900px){.k-hvm__cab{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"h1 ctas" "bajada bajada";align-items:end;gap:1.5rem 3rem}
  .k-hvm__ctas{flex-direction:column;align-items:stretch;padding-bottom:.35rem}}
.k-hvm__h1{margin:0;font-size:clamp(2.1rem,1.2rem + 3vw,3.6rem);font-weight:500;line-height:.98;letter-spacing:-.035em;
  text-shadow:0 0 46px color-mix(in srgb,var(--k-marca,#7C3AED) 55%,transparent)}
.k-hvm__h1 .k-acento{text-shadow:none;filter:drop-shadow(0 0 22px color-mix(in srgb,var(--k-marca-2,#22D3EE) 35%,transparent))}
.k-hvm__bajada{margin:0}
@media (max-width:560px){.k-hvm__ctas .k-btn{width:100%}}

/* entrada propia (sin depender de movimiento.css del kit: el organismo se injerta en sitios que no lo cargan) */
.k-hvm .k-entra{animation:k-hvm-sube .9s var(--k-ease,cubic-bezier(.22,1,.36,1)) both;animation-delay:var(--k-d,0s)}
@keyframes k-hvm-sube{from{opacity:0;transform:translateY(22px)}}
/* el título baja como cortina. OJO: no observar con IntersectionObserver el elemento recortado (Chrome lo da por invisible
   y nunca lo destapa): la entrada es solo CSS, al cargar. El inset negativo final no corta el brillo. */
.k-hvm__h1{animation:k-hvm-cortina 1.1s var(--k-ease,cubic-bezier(.22,1,.36,1)) both}
@keyframes k-hvm-cortina{from{clip-path:inset(-40% -8% 100% -8%)}to{clip-path:inset(-40% -8% -40% -8%)}}
@media (prefers-reduced-motion:reduce){.k-hvm__h1,.k-hvm__chispa,.k-hvm .k-entra{animation:none}.k-hvm__logo,.k-hvm__by{transition:none}}