/* INDEX — animaciones Cruce y Capas (recursos Moxen, adaptados al scroll de la página) */

.mx-cruce, .mx-capas {
    --mx-fondo: #121212;
    --mx-texto: #f4f4f4;
    --mx-suave: rgba(255, 255, 255, .5);
    --mx-hueco: rgba(255, 255, 255, .26);
    --mx-linea: rgba(255, 255, 255, .14);
    --mx-cara-a: #ffffff;
    --mx-cara-b: #a9a9a9;
    --mx-lamina: 30;
    --mx-lamina-paso: 4.2;
    --mx-filo: rgba(255, 255, 255, .13);
    --mx-foco: rgba(255, 123, 58, .08);
    --mx-acento: #ff7b3a;
    position: relative; z-index: 4; color: var(--mx-texto);
    background-color: var(--mx-fondo);
    background-image: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.045) 1px, transparent 0);
    background-size: 60px 60px;
    font-family: system-ui, "Segoe UI", Roboto, sans-serif;
}
.light-theme .mx-cruce, .light-theme .mx-capas {
    --mx-fondo: #f4f4f4;
    --mx-texto: #0a0a0a;
    --mx-suave: rgba(0, 0, 0, .55);
    --mx-hueco: rgba(0, 0, 0, .24);
    --mx-linea: rgba(0, 0, 0, .14);
    --mx-cara-a: #0a0a0a;
    --mx-cara-b: #4a4a4a;
    --mx-lamina: 24;
    --mx-lamina-paso: 3.4;
    --mx-filo: rgba(255, 255, 255, .7);
    --mx-foco: rgba(255, 123, 58, .12);
    background-image: radial-gradient(circle at 50% 50%, rgba(0,0,0,0.05) 1px, transparent 0);
}

.mx-cruce :is(h2), .mx-capas :is(h2, h3) { font-family: inherit; }

/* ── CRUCE ─────────────────────────────────────────────────────────── */
.mx-cruce-pista { height: 400vh; }
.mx-cruce-escenario {
    position: sticky; top: 0; height: 100vh; overflow: hidden;
    perspective: 1500px; perspective-origin: 50% 46%;
}
.mx-cruce-escenario::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(34% 48% at 50% 46%, var(--mx-foco), transparent);
}
.mx-cruce-frase {
    position: absolute; left: 0; top: 46%; margin: 0; translate: 0 -50%;
    font-size: 30vh; font-weight: 700; line-height: 1; letter-spacing: -.045em; white-space: nowrap;
    will-change: transform; transform-origin: 50% 70%; transform-style: preserve-3d;
}
.mx-palabra { display: inline-block; transform-style: preserve-3d; }
.mx-letra { display: inline-block; position: relative; will-change: transform, opacity; }
.mx-cara {
    position: relative; display: block; padding: .15em; margin: -.15em; will-change: opacity;
    background: linear-gradient(180deg, var(--mx-cara-a) 30%, var(--mx-cara-b) 92%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mx-contorno {
    position: absolute; left: 0; top: 0; color: transparent; pointer-events: none;
    -webkit-text-stroke: 1.5px var(--mx-acento);
}
.mx-contra-marco {
    position: absolute; left: 0; right: 0; bottom: 15vh; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.mx-contra {
    margin: 0; white-space: nowrap; will-change: transform; width: max-content;
    font-size: 8.5vh; font-weight: 500; line-height: 1.1;
    color: transparent; -webkit-text-stroke: 1px var(--mx-hueco);
}
.mx-rotulo, .mx-cifra {
    position: absolute; top: 12vh; margin: 0; font: 700 .78rem 'Courier New', monospace;
    letter-spacing: .24em; text-transform: uppercase; color: var(--mx-acento);
}
.mx-rotulo { left: 6vw; }
.mx-cifra { right: 6vw; font-variant-numeric: tabular-nums; }
.mx-barra { position: absolute; left: 6vw; right: 6vw; bottom: 7vh; height: 1px; background: var(--mx-linea); }
.mx-barra i { position: absolute; inset: 0; background: var(--mx-acento); transform-origin: 0 50%; transform: scaleX(0); }

/* ── CAPAS ─────────────────────────────────────────────────────────── */
[data-mx-capa] { will-change: transform; }
[data-mx-pila] { position: relative; isolation: isolate; }
.mx-copia {
    position: absolute; left: 0; top: 0; width: 100%; z-index: -1; pointer-events: none; user-select: none;
    color: color-mix(in srgb, var(--mx-acento) calc((var(--mx-lamina) + 8 - var(--i) * var(--mx-lamina-paso)) * 1%), var(--mx-fondo));
    -webkit-text-stroke: 1px rgba(255, 123, 58, .3);
}
.mx-capa-cara {
    padding-right: .15em; margin-right: -.15em;
    background: linear-gradient(180deg, var(--mx-cara-a) 35%, var(--mx-cara-b));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mx-fondo .mx-copia {
    color: transparent;
    -webkit-text-stroke: 1.5px color-mix(in srgb, var(--mx-hueco) calc(100% - var(--i) * 13%), transparent);
}
.mx-fondo .mx-capa-cara { background: none; }

.mx-tramo {
    position: relative; height: 100vh; padding: 0 8vw; overflow: hidden;
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
}
.mx-derecha { align-items: flex-end; text-align: right; }
.mx-portada { align-items: center; text-align: center; }
.mx-fondo {
    position: absolute; left: 50%; top: 50%; translate: -50% -54%;
    font-size: 27vw; font-weight: 700; letter-spacing: -.06em; line-height: 1; white-space: nowrap;
    color: transparent; -webkit-text-stroke: 1.5px var(--mx-hueco); user-select: none;
}
.mx-titulo {
    position: relative; margin: 0; font-size: 6.4vw; font-weight: 700; line-height: .98; letter-spacing: -.05em;
}
.mx-titulo span { color: var(--mx-acento); }
.mx-portada .fx-eyebrow { position: relative; }
.mx-numero {
    position: absolute; top: 50%; right: 6vw; margin-top: -.53em;
    font-size: 27vw; font-weight: 700; line-height: 1; letter-spacing: -.06em;
    color: transparent; -webkit-text-stroke: 1.5px var(--mx-hueco); user-select: none;
}
.mx-derecha .mx-numero { right: auto; left: 6vw; }
.mx-palabra-grande {
    margin: 0; font-size: 14vw; font-weight: 700; line-height: .9; letter-spacing: -.055em; white-space: nowrap;
    --mx-deriva: .32;
}
.mx-derecha .mx-palabra-grande { --mx-deriva: -.32; }
.mx-nota { position: relative; margin: 2.2rem 0 0; max-width: 34rem; }
.mx-nota b {
    display: block; margin-bottom: 10px; font: 700 .78rem 'Courier New', monospace;
    letter-spacing: .24em; text-transform: uppercase; color: var(--mx-acento);
}
.mx-nota span { font-size: 1.05rem; line-height: 1.55; color: var(--mx-suave); }

@media (max-width: 640px) {
    .mx-cruce-frase { font-size: 14vh; }
    .mx-contra { font-size: 6vh; }
    .mx-titulo { font-size: 11vw; }
    .mx-palabra-grande { font-size: 21vw; }
    .mx-numero { font-size: 44vw; }
    .mx-fondo { font-size: 38vw; }
    .mx-tramo { padding: 0 7vw; }
}

/* ── HERO: primero la esfera, luego el texto (Capas en carga) ───────── */
#hero-canvas-mount canvas { animation: mx-esfera 2.2s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes mx-esfera { from { opacity: 0; } to { opacity: 1; } }

/* el texto lo revela el scroll (animateTrack, en index.php); al cargar solo hay esfera y el "Desliza" */
.hero-intro-inner :is(.intro-eyebrow, .intro-tagline, .intro-features),
.hero-intro-inner::before { opacity: 0; }
.hero-intro-inner::before { opacity: var(--tx, 0); }
.hero-intro-inner .intro-scroll-hint { opacity: 0; transition: opacity .8s ease; }
.hero-intro-inner.intro-go:not(.intro-scrolled) .intro-scroll-hint { opacity: 1; transition-delay: .6s; }

/* título: cada letra cae desde arriba con el scroll (index.php) */
.intro-title:not(.mx-listo) { visibility: hidden; }
.mx-w { display: inline-block; white-space: nowrap; }
.mx-ch { display: inline-block; will-change: transform, opacity; }
.intro-title span { background: none; -webkit-text-fill-color: initial; }
.intro-title > span:not(.mx-w) .mx-ch {
    text-shadow: none;
    background: linear-gradient(135deg, var(--primary-color, #ff6b35), #ff9a5a);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
@media (prefers-reduced-motion: reduce) { #hero-canvas-mount canvas { animation: none; } }