.contenedor_loader_intro {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100000;
    background: #323946;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: opacity 0.6s, visibility 0.6s;
    /* aísla el layout/pintado del loader del resto de la página
       (p. ej. el tracking animado del tagline no invalida nada externo) */
    contain: layout style;
}

.li-vignette {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(1100px 700px at 50% 38%, rgba(37, 198, 236, 0.07), rgba(0, 0, 0, 0) 60%),
        radial-gradient(140% 120% at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(10, 14, 20, 0.55) 100%);
}

.li-scale {
    position: relative;
    will-change: transform;
}

.li-shake {
    position: relative;
    will-change: transform;
}

.li-column {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.li-box {
    position: relative;
    width: 520px;
    height: 469px;
    will-change: transform;
}

.li-box>* {
    position: absolute;
}

.li-flash,
.li-ground {
    pointer-events: none;
    opacity: 0;
}

.li-flash {
    left: 50%;
    top: 58%;
    width: 900px;
    height: 640px;
    margin-left: -450px;
    margin-top: -320px;
    background: radial-gradient(closest-side, rgba(150, 240, 255, 0.95), rgba(37, 198, 236, 0.45) 40%, rgba(37, 198, 236, 0) 72%);
    filter: blur(6px);
}

.li-ground {
    left: 50%;
    top: 503px;
    width: 760px;
    height: 90px;
    margin-left: -380px;
    background: radial-gradient(closest-side, rgba(37, 198, 236, 0.75), rgba(37, 198, 236, 0) 70%);
    filter: blur(10px);
}

.li-shockwave {
    left: 50%;
    top: 55%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    display: none;
}

.li-particle {
    left: 50%;
    top: 55%;
    border-radius: 50%;
    background: #aef4ff;
    box-shadow: 0 0 10px rgba(37, 198, 236, 0.9);
    pointer-events: none;
    display: none;
}

.li-mark {
    inset: 0;
    width: 100%;
    height: 100%;
    /* transform + blur + opacity animan cada frame durante el armado de la X:
       mantener la capa promovida en GPU evita re-rasterizados con tirones */
    will-change: transform, opacity, filter;
}

/* Single line racing the X outline like a car on a circuit. The traced path
   is painted three times — a wide soft halo, a blue glow body, and a sharp
   white-hot core — each a short travelling dash so together they read as one
   comet with a bright head and a fading tail. */
.li-race {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    opacity: 0;
    /* Soft neon bloom via GPU-composited CSS drop-shadow instead of an SVG
       feGaussianBlur — WebKit/Safari accelerates this and stays smooth, whereas
       animated SVG filters are rasterised on the CPU every frame and stutter. */
    filter:
        drop-shadow(0 0 3px rgba(120, 200, 255, 1)) drop-shadow(0 0 8px rgba(60, 150, 255, 0.7)) drop-shadow(0 0 18px rgba(40, 110, 255, 0.45));
    /* additive blending so the overlapping head burns to white */
    mix-blend-mode: screen;
    will-change: opacity;
}

/* Stroke colour, width, opacity and caps are set as presentation attributes on
   the <use> elements in the markup so they render even if this file is cached;
   only the dash offset (the travelling position) is animated from JS. */

.li-title {
    position: relative;
    margin-top: 64px;
    font-family: 'Montserrat', sans-serif;
    font-size: 96px;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
    display: flex;
    color: #f4f7fa;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.35);
    min-height: 100px;
}

.li-title span {
    display: inline-block;
    white-space: pre;
    opacity: 0;
    will-change: transform, opacity, filter;
}

.li-tagline {
    position: relative;
    margin-top: 26px;
    font-size: 27px;
    font-weight: 500;
    font-family: 'Rajdhani', 'Montserrat', sans-serif;
    white-space: nowrap;
    opacity: 0;
}