.landing-cristal-intro {
    --cristal-duracion: 1s;
    --cristal-retraso-der: 0.28s;
    --cristal-curva: cubic-bezier(0.33, 0.02, 0.18, 1);
    position: fixed;
    inset: 0;
    z-index: 1040;
    pointer-events: none;
    touch-action: auto;
    overflow: hidden;
    opacity: 1;
    transition: opacity 0.35s ease;
}

.landing-cristal-intro,
.landing-cristal-intro * {
    pointer-events: none !important;
    user-select: none;
}

.landing-cristal-intro--terminado {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease;
}

.landing-cristal-intro__vitral {
    position: absolute;
    inset: 0;
}

.landing-cristal-intro__cristal-base {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(125deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 42%),
        linear-gradient(235deg, rgba(174, 228, 255, 0.1) 0%, rgba(255, 255, 255, 0) 48%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.landing-cristal-intro__escarcha {
    position: absolute;
    inset: 0;
    background: rgba(240, 248, 255, 0.16);
    backdrop-filter: blur(24px) saturate(0.92) brightness(1.03);
    -webkit-backdrop-filter: blur(24px) saturate(0.92) brightness(1.03);
    animation: landing-cristal-escarcha var(--cristal-duracion) ease-out forwards;
    animation-play-state: paused;
}

.landing-cristal-intro__escarcha::before,
.landing-cristal-intro__escarcha::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.landing-cristal-intro__escarcha::before {
    clip-path: ellipse(180% 160% at -18% -16%);
    animation: landing-cristal-escarcha-izq var(--cristal-duracion) var(--cristal-curva) forwards;
    animation-delay: var(--cristal-retraso-izq, 0s);
    animation-play-state: paused;
}

.landing-cristal-intro__escarcha::after {
    clip-path: ellipse(165% 145% at 122% -12%);
    animation: landing-cristal-escarcha-der var(--cristal-duracion) var(--cristal-curva) forwards;
    animation-delay: var(--cristal-retraso-der);
    animation-play-state: paused;
}

.landing-cristal-intro__brillo {
    position: absolute;
    inset: 0;
    opacity: 0.22;
    background:
        linear-gradient(118deg, transparent 0%, rgba(255, 255, 255, 0.2) 44%, transparent 52%),
        radial-gradient(ellipse 80% 45% at 50% -10%, rgba(255, 255, 255, 0.16) 0%, transparent 72%);
    animation: landing-cristal-brillo var(--cristal-duracion) ease-in-out forwards;
    animation-play-state: paused;
}

.landing-cristal-intro__gotas {
    position: absolute;
    inset: 0;
    opacity: 0;
    background:
        radial-gradient(circle at 8% 6%, rgba(255, 255, 255, 0.75) 0 1.5px, transparent 2.5px),
        radial-gradient(circle at 12% 14%, rgba(174, 228, 255, 0.8) 0 1.5px, transparent 2.5px),
        radial-gradient(circle at 92% 6%, rgba(255, 255, 255, 0.75) 0 1.5px, transparent 2.5px),
        radial-gradient(circle at 88% 14%, rgba(174, 228, 255, 0.8) 0 1.5px, transparent 2.5px);
    animation: landing-cristal-gotas var(--cristal-duracion) ease-out forwards;
    animation-play-state: paused;
}

.landing-cristal-intro__rasqueta {
    position: absolute;
    top: clamp(2px, 0.8vw, 12px);
    z-index: 2;
    width: clamp(92px, 14vw, 168px);
    background: transparent;
    opacity: 0;
    pointer-events: none;
}

.landing-cristal-intro__rasqueta--izq {
    left: clamp(0px, 0.5vw, 8px);
}

.landing-cristal-intro__rasqueta--der {
    right: clamp(0px, 0.5vw, 8px);
}

.landing-cristal-intro--motor-js .landing-cristal-intro__rasqueta-mover,
.landing-cristal-intro--motor-js .landing-cristal-intro__rasqueta-img,
.landing-cristal-intro--motor-js .landing-cristal-intro__rasqueta-huella {
    animation: none !important;
}

.landing-cristal-intro--motor-js .landing-cristal-intro__rasqueta {
    animation: none !important;
    opacity: 0;
}

.landing-cristal-intro--motor-js .landing-cristal-intro__rasqueta-mover,
.landing-cristal-intro--motor-js .landing-cristal-intro__rasqueta-img {
    transition: none;
}

.landing-cristal-intro__rasqueta-mover {
    position: relative;
    width: 100%;
    animation: landing-cristal-rasqueta-mover-izq var(--cristal-duracion) var(--cristal-curva) forwards;
    animation-play-state: paused;
    will-change: transform;
}

.landing-cristal-intro__rasqueta--der .landing-cristal-intro__rasqueta-mover {
    animation-name: landing-cristal-rasqueta-mover-der;
    animation-delay: 0.18s;
}

.landing-cristal-intro__rasqueta-huella {
    position: absolute;
    top: 11%;
    left: -6%;
    width: 118%;
    height: 14px;
    border-radius: 999px;
    opacity: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(174, 228, 255, 0.55) 42%, rgba(255, 255, 255, 0.72) 50%, rgba(174, 228, 255, 0.45) 58%, transparent 100%);
    transform-origin: 12% 50%;
    animation: landing-cristal-rasqueta-huella var(--cristal-duracion) ease-out forwards;
    animation-play-state: paused;
    pointer-events: none;
}

.landing-cristal-intro__rasqueta--der .landing-cristal-intro__rasqueta-huella {
    animation-delay: 0.18s;
}

.landing-cristal-intro__rasqueta-img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    background: transparent;
    transform-origin: 50% 72%;
    filter: drop-shadow(0 10px 16px rgba(14, 107, 143, 0.34));
    animation: landing-cristal-rasqueta-giro-izq var(--cristal-duracion) var(--cristal-curva) forwards;
    animation-play-state: paused;
    will-change: transform;
}

.landing-cristal-intro__rasqueta--der .landing-cristal-intro__rasqueta-img {
    transform: scaleX(-1);
    animation-name: landing-cristal-rasqueta-giro-der;
    animation-delay: 0.18s;
}

.landing-cristal-intro--activo .landing-cristal-intro__escarcha,
.landing-cristal-intro--activo .landing-cristal-intro__escarcha::before,
.landing-cristal-intro--activo .landing-cristal-intro__escarcha::after,
.landing-cristal-intro--activo .landing-cristal-intro__brillo,
.landing-cristal-intro--activo .landing-cristal-intro__gotas,
.landing-cristal-intro--activo .landing-cristal-intro__rasqueta,
.landing-cristal-intro--activo .landing-cristal-intro__rasqueta-mover,
.landing-cristal-intro--activo .landing-cristal-intro__rasqueta-huella,
.landing-cristal-intro--activo .landing-cristal-intro__rasqueta-img {
    animation-play-state: running;
}

@keyframes landing-cristal-escarcha {
    0%, 10% {
        opacity: 1;
        backdrop-filter: blur(24px) saturate(0.92) brightness(1.03);
        -webkit-backdrop-filter: blur(24px) saturate(0.92) brightness(1.03);
    }
    82% {
        opacity: 0.22;
        backdrop-filter: blur(6px) saturate(0.98) brightness(1.01);
        -webkit-backdrop-filter: blur(6px) saturate(0.98) brightness(1.01);
    }
    100% {
        opacity: 0;
        backdrop-filter: blur(0px) saturate(1) brightness(1);
        -webkit-backdrop-filter: blur(0px) saturate(1) brightness(1);
    }
}

@keyframes landing-cristal-escarcha-izq {
    0%, 7% {
        clip-path: ellipse(180% 160% at -18% -16%);
        opacity: 1;
    }
    19% {
        clip-path: ellipse(102% 82% at -18% -16%);
        opacity: 0.9;
    }
    27% {
        clip-path: ellipse(88% 70% at -16% -14%);
        opacity: 0.82;
    }
    41% {
        clip-path: ellipse(64% 54% at -18% -16%);
        opacity: 0.64;
    }
    53% {
        clip-path: ellipse(52% 46% at -17% -15%);
        opacity: 0.52;
    }
    67% {
        clip-path: ellipse(36% 34% at -18% -16%);
        opacity: 0.36;
    }
    81% {
        clip-path: ellipse(18% 16% at -18% -16%);
        opacity: 0.16;
    }
    100% {
        clip-path: ellipse(0% 0% at -18% -16%);
        opacity: 0;
    }
}

@keyframes landing-cristal-escarcha-der {
    0%, 5% {
        clip-path: ellipse(165% 145% at 122% -12%);
        opacity: 1;
    }
    14% {
        clip-path: ellipse(108% 88% at 120% -10%);
        opacity: 0.92;
    }
    24% {
        clip-path: ellipse(92% 74% at 124% -8%);
        opacity: 0.84;
    }
    38% {
        clip-path: ellipse(70% 58% at 119% -14%);
        opacity: 0.66;
    }
    51% {
        clip-path: ellipse(54% 48% at 121% -11%);
        opacity: 0.5;
    }
    64% {
        clip-path: ellipse(38% 36% at 123% -13%);
        opacity: 0.34;
    }
    78% {
        clip-path: ellipse(22% 20% at 120% -12%);
        opacity: 0.18;
    }
    100% {
        clip-path: ellipse(0% 0% at 122% -12%);
        opacity: 0;
    }
}

@keyframes landing-cristal-rasqueta-aparece {
    0%, 4% {
        opacity: 0;
    }
    10%, 86% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes landing-cristal-rasqueta-mover-izq {
    0%, 7% {
        transform: translate3d(-6%, -4%, 0) scale(0.94);
    }
    10% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    24% {
        transform: translate3d(7vw, 13vh, 0) scale(1);
    }
    28% {
        transform: translate3d(7.6vw, 12.2vh, 0) scale(1);
    }
    32% {
        transform: translate3d(8vw, 13.5vh, 0) scale(1);
    }
    48% {
        transform: translate3d(17vw, 28vh, 0) scale(1.01);
    }
    52% {
        transform: translate3d(17.5vw, 27.2vh, 0) scale(1.01);
    }
    56% {
        transform: translate3d(18vw, 28.5vh, 0) scale(1.01);
    }
    72% {
        transform: translate3d(28vw, 44vh, 0) scale(1.02);
    }
    76% {
        transform: translate3d(28.6vw, 43.2vh, 0) scale(1.02);
    }
    84% {
        transform: translate3d(32vw, 50vh, 0) scale(1.02);
    }
    100% {
        transform: translate3d(36vw, 56vh, 0) scale(1.02);
    }
}

@keyframes landing-cristal-rasqueta-mover-der {
    0%, 7% {
        transform: translate3d(6%, -4%, 0) scale(0.94);
    }
    10% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    24% {
        transform: translate3d(-7vw, 13vh, 0) scale(1);
    }
    28% {
        transform: translate3d(-7.6vw, 12.2vh, 0) scale(1);
    }
    32% {
        transform: translate3d(-8vw, 13.5vh, 0) scale(1);
    }
    48% {
        transform: translate3d(-17vw, 28vh, 0) scale(1.01);
    }
    52% {
        transform: translate3d(-17.5vw, 27.2vh, 0) scale(1.01);
    }
    56% {
        transform: translate3d(-18vw, 28.5vh, 0) scale(1.01);
    }
    72% {
        transform: translate3d(-28vw, 44vh, 0) scale(1.02);
    }
    76% {
        transform: translate3d(-28.6vw, 43.2vh, 0) scale(1.02);
    }
    84% {
        transform: translate3d(-32vw, 50vh, 0) scale(1.02);
    }
    100% {
        transform: translate3d(-36vw, 56vh, 0) scale(1.02);
    }
}

@keyframes landing-cristal-rasqueta-giro-izq {
    0%, 10% {
        transform: rotate(22deg);
    }
    24% {
        transform: rotate(36deg);
    }
    28%, 32% {
        transform: rotate(28deg);
    }
    48% {
        transform: rotate(38deg);
    }
    52%, 56% {
        transform: rotate(30deg);
    }
    72% {
        transform: rotate(37deg);
    }
    84%, 100% {
        transform: rotate(33deg);
    }
}

@keyframes landing-cristal-rasqueta-giro-der {
    0%, 10% {
        transform: scaleX(-1) rotate(22deg);
    }
    24% {
        transform: scaleX(-1) rotate(36deg);
    }
    28%, 32% {
        transform: scaleX(-1) rotate(28deg);
    }
    48% {
        transform: scaleX(-1) rotate(38deg);
    }
    52%, 56% {
        transform: scaleX(-1) rotate(30deg);
    }
    72% {
        transform: scaleX(-1) rotate(37deg);
    }
    84%, 100% {
        transform: scaleX(-1) rotate(33deg);
    }
}

@keyframes landing-cristal-rasqueta-huella {
    0%, 9% {
        opacity: 0;
        transform: rotate(24deg) scaleX(0.6);
    }
    14%, 24% {
        opacity: 0.75;
        transform: rotate(34deg) scaleX(1);
    }
    28% {
        opacity: 0.2;
        transform: rotate(28deg) scaleX(0.7);
    }
    34%, 48% {
        opacity: 0.7;
        transform: rotate(36deg) scaleX(1.05);
    }
    52% {
        opacity: 0.18;
        transform: rotate(30deg) scaleX(0.72);
    }
    58%, 72% {
        opacity: 0.62;
        transform: rotate(35deg) scaleX(1.02);
    }
    100% {
        opacity: 0;
        transform: rotate(33deg) scaleX(0.8);
    }
}

@keyframes landing-cristal-gotas {
    0%, 14% {
        opacity: 0;
    }
    28% {
        opacity: 0.48;
    }
    58% {
        opacity: 0.32;
    }
    100% {
        opacity: 0;
    }
}

@keyframes landing-cristal-brillo {
    0%, 12% {
        opacity: 0.14;
    }
    46% {
        opacity: 0.28;
    }
    100% {
        opacity: 0;
    }
}

@media (max-width: 768px) {
    .landing-cristal-intro {
        --cristal-duracion: 1s;
    }

    .landing-cristal-intro__rasqueta {
        width: clamp(78px, 22vw, 128px);
    }

    @keyframes landing-cristal-rasqueta-mover-izq {
        24% {
            transform: translate3d(5vw, 10vh, 0) scale(1);
        }
        48% {
            transform: translate3d(12vw, 22vh, 0) scale(1.01);
        }
        72% {
            transform: translate3d(20vw, 36vh, 0) scale(1.02);
        }
        100% {
            transform: translate3d(26vw, 46vh, 0) scale(1.02);
        }
    }

    @keyframes landing-cristal-rasqueta-mover-der {
        24% {
            transform: translate3d(-5vw, 10vh, 0) scale(1);
        }
        48% {
            transform: translate3d(-12vw, 22vh, 0) scale(1.01);
        }
        72% {
            transform: translate3d(-20vw, 36vh, 0) scale(1.02);
        }
        100% {
            transform: translate3d(-26vw, 46vh, 0) scale(1.02);
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .landing-cristal-intro {
        display: none;
    }
}