/* Estado inicial que necesita motion-kit.js. Pegar (o enlazar) tras los tokens del DESIGN.md. */
.mk-line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
[data-curtain] { position: fixed; inset: 0; z-index: 100; background: var(--bg, #0b0b0c); display: grid; place-items: center; }
[data-curtain] .bar { width: min(240px, 50vw); height: 1px; background: color-mix(in oklab, var(--fg, #fff) 15%, transparent); }
[data-curtain] .bar i { display: block; height: 100%; background: var(--fg, #fff); transform: scaleX(0); transform-origin: left; }
[data-progress] { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; z-index: 60; }
[data-hero] { position: relative; min-height: 100svh; overflow: hidden; }
[data-hero-media] { position: absolute; inset: 0; }
/* Velo para que el titular se lea sobre cualquier foto */
[data-hero-media]::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in oklab, var(--bg, #000) 85%, transparent) 0%, transparent 60%), color-mix(in oklab, var(--bg, #000) 25%, transparent); }
[data-hero-media] img, [data-hero-media] video { width: 100%; height: 115%; object-fit: cover; }
[data-parallax] { will-change: transform; }
[data-expand] { height: 100svh; display: grid; place-items: center; overflow: hidden; position: relative; }
[data-expand-frame] { --cy: 18%; --cx: 22%; --cr: 24px; position: absolute; inset: 0; clip-path: inset(var(--cy) var(--cx) round var(--cr)); }
[data-expand-frame] img, [data-expand-frame] video { width: 100%; height: 100%; object-fit: cover; transform: scale(1.25); }
[data-highlight] { color: var(--hl-off, color-mix(in oklab, var(--fg, #fff) 22%, transparent)); }
[data-horizontal] { overflow: hidden; }
[data-marquee] { display: flex; width: max-content; white-space: nowrap; }
[data-magnetic] { will-change: transform; }

/* Sin JS de movimiento: todo visible, sin recortes. */
.mk-static [data-expand-frame] { clip-path: none; }
.mk-static [data-expand-frame] img { transform: none; }
.mk-static [data-highlight] { color: inherit; }
@media (max-width: 900px) {
  [data-horizontal] [data-track] { flex-direction: column; }
  [data-expand-frame] { --cy: 12%; --cx: 6%; --cr: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}