/* =========================================================
   COMPONENTES VISUALES GLOBALES
   LAM TRANSPORTACIONES
========================================================= */

/* =========================================================
   PRELOADER
========================================================= */

.lam-preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #010407;
    color: #ffffff;
}

.preloader-background {
    position: absolute;
    inset: 0;
    background: radial-gradient( circle at 50% 46%, rgba(32, 101, 153, 0.25), transparent 34% ), radial-gradient( circle at 50% 72%, rgba(239, 37, 45, 0.12), transparent 28% ), linear-gradient( 145deg, #010306, #061522 );
}

    .preloader-background::before {
        content: "";
        position: absolute;
        inset: 0;
        opacity: 0.14;
        background-image: linear-gradient( rgba(255, 255, 255, 0.035) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px );
        background-size: 80px 80px;
    }

.preloader-content {
    position: relative;
    z-index: 4;
    width: min(86%, 520px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.preloader-logo-wrapper {
    position: relative;
    display: grid;
    place-items: center;
    width: min(74vw, 310px);
}

.preloader-logo {
    position: relative;
    z-index: 2;
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 18px 32px rgba(0, 0, 0, 0.48));
}

.preloader-logo-glow {
    position: absolute;
    inset: 12%;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(239, 37, 45, 0.3), rgba(30, 115, 177, 0.15) 42%, transparent 70% );
    filter: blur(34px);
}

.preloader-copy {
    margin-top: 22px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

    .preloader-copy span {
        color: #ef252d;
        font-size: 0.74rem;
        font-weight: 800;
        letter-spacing: 0.23em;
        text-transform: uppercase;
    }

    .preloader-copy strong {
        color: rgba(255, 255, 255, 0.9);
        font-size: 0.88rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

.preloader-progress {
    width: 100%;
    margin-top: 38px;
    display: flex;
    align-items: center;
    gap: 18px;
}

.preloader-progress-track {
    position: relative;
    flex: 1;
    height: 2px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.12);
}

.preloader-progress-bar {
    width: 0;
    height: 100%;
    background: linear-gradient( 90deg, #164f8f, #4db8ff 48%, #ef252d );
    box-shadow: 0 0 18px rgba(77, 184, 255, 0.58);
}

.preloader-percentage {
    width: 42px;
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.preloader-door {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 3;
    width: 50.2%;
    background: linear-gradient( 145deg, #02070c, #061522 );
}

.preloader-door-left {
    left: 0;
}

.preloader-door-right {
    right: 0;
}


/* =========================================================
   TEXTURA CINEMATOGRÁFICA
========================================================= */

.site-noise {
    position: fixed;
    inset: -50%;
    z-index: 9000;
    width: 200%;
    height: 200%;
    opacity: 0.022;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.8'/%3E%3C/svg%3E");
    animation: siteNoiseMovement 0.22s steps(2) infinite;
}

.site-vignette {
    position: fixed;
    inset: 0;
    z-index: 8999;
    pointer-events: none;
    box-shadow: inset 0 0 180px rgba(0, 0, 0, 0.27);
}

@keyframes siteNoiseMovement {
    0% {
        transform: translate3d(0, 0, 0);
    }

    25% {
        transform: translate3d(2%, -3%, 0);
    }

    50% {
        transform: translate3d(-3%, 2%, 0);
    }

    75% {
        transform: translate3d(3%, 4%, 0);
    }

    100% {
        transform: translate3d(-2%, -2%, 0);
    }
}


/* =========================================================
   LUZ AMBIENTAL
========================================================= */

.mouse-ambient-light {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    background: radial-gradient( circle, rgba(50, 151, 222, 0.1) 0%, rgba(239, 37, 45, 0.035) 32%, transparent 69% );
    filter: blur(3px);
    transform: translate3d(-50%, -50%, 0);
    will-change: transform, opacity;
}


/* =========================================================
   CURSOR PREMIUM
========================================================= */

.premium-cursor {
    position: fixed;
    inset: 0;
    z-index: 10000;
    pointer-events: none;
}

.cursor-dot,
.cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    border-radius: 50%;
    pointer-events: none;
    transform: translate3d(-50%, -50%, 0);
}

.cursor-dot {
    z-index: 2;
    width: 7px;
    height: 7px;
    background: #ffffff;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.65);
}

.cursor-ring {
    z-index: 1;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.015);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    transition: width 0.28s ease, height 0.28s ease, border-color 0.28s ease, background 0.28s ease;
}

    .cursor-ring span {
        opacity: 0;
        color: #ffffff;
        font-size: 0.58rem;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        transition: opacity 0.22s ease;
    }

.premium-cursor.cursor-active .cursor-ring {
    width: 74px;
    height: 74px;
    border-color: rgba(239, 37, 45, 0.85);
    background: rgba(239, 37, 45, 0.09);
}

.premium-cursor.cursor-label-active .cursor-ring {
    width: 92px;
    height: 92px;
    border-color: rgba(77, 184, 255, 0.8);
    background: rgba(9, 31, 48, 0.72);
}

    .premium-cursor.cursor-label-active .cursor-ring span {
        opacity: 1;
    }


/* =========================================================
   TARJETAS INTERACTIVAS
========================================================= */

[data-spotlight] {
    position: relative;
    isolation: isolate;
    --spotlight-x: 50%;
    --spotlight-y: 50%;
}

    [data-spotlight]::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        opacity: 0;
        pointer-events: none;
        background: radial-gradient( 380px circle at var(--spotlight-x) var(--spotlight-y), rgba(62, 169, 239, 0.17), rgba(239, 37, 45, 0.06) 35%, transparent 68% );
        transition: opacity 0.3s ease;
    }

    [data-spotlight]:hover::after {
        opacity: 1;
    }

[data-tilt] {
    transform-style: preserve-3d;
    will-change: transform;
}

    [data-tilt] > * {
        transform: translateZ(20px);
    }


/* =========================================================
   BRILLO DE BOTONES
========================================================= */

.magnetic-button {
    --button-x: 50%;
    --button-y: 50%;
}

    .magnetic-button::after {
        content: "";
        position: absolute;
        inset: 0;
        opacity: 0;
        pointer-events: none;
        background: radial-gradient( circle at var(--button-x) var(--button-y), rgba(255, 255, 255, 0.32), transparent 38% );
        transition: opacity 0.25s ease;
    }

    .magnetic-button:hover::after {
        opacity: 1;
    }


/* =========================================================
   RESPONSIVE
========================================================= */

@media (pointer: coarse), (max-width: 900px) {
    .premium-cursor {
        display: none;
    }

    .mouse-ambient-light {
        display: none;
    }

    body {
        cursor: auto;
    }
}

@media (max-width: 600px) {
    .preloader-logo-wrapper {
        width: min(76vw, 260px);
    }

    .preloader-progress {
        gap: 12px;
    }

    .site-noise {
        opacity: 0.014;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-noise {
        animation: none;
    }
}

/* =========================================================
   LOGO Y ÓRBITA DEL PRELOADER
========================================================= */

.preloader-logo-wrapper {
    position: relative;
    width: min(72vw, 420px);
    height: 285px;
    display: grid;
    place-items: center;
    margin: 0 auto;
}

.preloader-logo {
    position: relative;
    z-index: 4;
    width: 285px;
    max-height: 190px;
    object-fit: contain;
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.55));
    pointer-events: none;
}

.preloader-logo-glow {
    position: absolute;
    z-index: 1;
    width: 290px;
    height: 190px;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(239, 37, 45, 0.2), rgba(28, 111, 175, 0.12) 42%, transparent 72% );
    filter: blur(32px);
}

.preloader-orbit {
    position: absolute;
    z-index: 5;
    width: 400px;
    height: 235px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-95deg);
    transform-origin: center;
    pointer-events: none;
}

    .preloader-orbit::before {
        content: none !important;
        display: none !important;
    }

.preloader-truck::after {
    content: none !important;
    display: none !important;
}
   

.preloader-truck {
    position: absolute;
    top: 50%;
    left: 100%;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    background: linear-gradient( 145deg, #ef252d, #a50d14 );
    color: #ffffff;
    font-size: 0.95rem;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45), 0 0 22px rgba(239, 37, 45, 0.38);
    transform: translate(-50%, -50%) rotate(95deg);
    transform-origin: center;
    will-change: transform, opacity;
}

   



/*Funcion para celular--------------------------------------------*/
@media (max-width: 600px) {
    .preloader-logo-wrapper {
        width: 300px;
        height: 230px;
    }

    .preloader-logo {
        width: 215px;
        max-height: 145px;
    }

    .preloader-orbit {
        width: 290px;
        height: 180px;
    }

    .preloader-truck {
        width: 37px;
        height: 37px;
        font-size: 0.82rem;
    }
}

/*------------------------Diseños de UI------------------------------------------------------------------*/

/* =========================================================
   SISTEMA GLASS / LIQUID GLASS / SPATIAL UI
========================================================= */

:root {
    --glass-bg: rgba(8, 23, 36, 0.58);
    --glass-bg-strong: rgba(5, 17, 28, 0.78);
    --glass-border: rgba(255, 255, 255, 0.13);
    --glass-border-blue: rgba(78, 184, 255, 0.3);
    --glass-border-red: rgba(239, 37, 45, 0.34);
    --glass-shadow: 0 28px 70px rgba(0, 0, 0, 0.34);
    --liquid-blue: rgba(53, 166, 239, 0.38);
    --liquid-red: rgba(239, 37, 45, 0.3);
}

/* Tarjeta de vidrio base */

.glass-panel {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--glass-border);
    border-radius: 22px;
    background: linear-gradient( 145deg, rgba(17, 43, 64, 0.64), rgba(5, 16, 27, 0.48) );
    box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px) saturate(135%);
    -webkit-backdrop-filter: blur(20px) saturate(135%);
    transform-style: preserve-3d;
}

    /* Reflejo superior */

    .glass-panel::before {
        content: "";
        position: absolute;
        top: 0;
        left: 8%;
        right: 8%;
        height: 1px;
        background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.65), transparent );
        opacity: 0.68;
        pointer-events: none;
    }

    /* Luz líquida interior */

    .glass-panel::after {
        content: "";
        position: absolute;
        inset: -45%;
        opacity: 0;
        pointer-events: none;
        background: radial-gradient( circle at var(--liquid-x, 50%) var(--liquid-y, 50%), var(--liquid-blue), var(--liquid-red) 22%, transparent 48% );
        filter: blur(30px);
        transition: opacity 0.35s ease;
    }

    .glass-panel:hover::after {
        opacity: 0.48;
    }

/* Variante oscura */

.glass-panel-dark {
    background: linear-gradient( 145deg, rgba(5, 17, 28, 0.86), rgba(2, 9, 16, 0.68) );
    border-color: rgba(105, 174, 222, 0.2);
}

/* Profundidad espacial */

.spatial-layer {
    transform-style: preserve-3d;
    perspective: 1200px;
}

.spatial-card {
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(.16, 1, .3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
}

    .spatial-card:hover {
        border-color: rgba(77, 184, 255, 0.42);
        box-shadow: 0 34px 80px rgba(0, 0, 0, 0.42), 0 0 32px rgba(27, 121, 190, 0.12);
    }

    .spatial-card > * {
        position: relative;
        z-index: 2;
        transform: translateZ(28px);
    }

/* Botón Liquid Glass */

.liquid-button {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: linear-gradient( 135deg, rgba(239, 37, 45, 0.92), rgba(162, 13, 20, 0.82) );
    box-shadow: 0 18px 42px rgba(239, 37, 45, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

    .liquid-button::before {
        content: "";
        position: absolute;
        inset: -100%;
        z-index: -1;
        background: conic-gradient( from 90deg, transparent, rgba(255, 255, 255, 0.32), transparent 28%, rgba(77, 184, 255, 0.22), transparent 58% );
        animation: liquidButtonFlow 5s linear infinite;
    }

    .liquid-button::after {
        content: "";
        position: absolute;
        inset: 1px;
        z-index: -1;
        border-radius: inherit;
        background: linear-gradient( 135deg, rgba(239, 37, 45, 0.96), rgba(150, 10, 18, 0.92) );
    }

@keyframes liquidButtonFlow {
    to {
        transform: rotate(360deg);
    }
}

/* Distorsión visual ligera */

.liquid-orb {
    position: absolute;
    width: 330px;
    height: 330px;
    border-radius: 50%;
    background: radial-gradient( circle at 34% 30%, rgba(255, 255, 255, 0.24), rgba(57, 170, 241, 0.16) 28%, rgba(239, 37, 45, 0.1) 50%, transparent 72% );
    filter: blur(8px);
    opacity: 0.66;
    pointer-events: none;
    animation: liquidOrbFloat 9s ease-in-out infinite alternate;
}

@keyframes liquidOrbFloat {
    0% {
        transform: translate3d(-20px, 14px, 0) scale(0.96);
    }

    100% {
        transform: translate3d(30px, -24px, 0) scale(1.08);
    }
}