/* ===== Loader: coche 3D derrapando en círculos ===== */
.ldr { display: none; }
html.ldr-on .ldr {
    --v: #2e9d4f; --v-claro: #4cc56f; --v-osc: #1f7a3b; --v-osc2: #17602e;
    --vuelta: 1.1s;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    position: fixed; inset: 0; z-index: 99999; overflow: hidden;
    background: radial-gradient(ellipse at 50% 55%, #24384f 0%, #13202f 55%, #0b131c 100%);
    opacity: 1; transition: opacity .45s ease, visibility .45s;
}
html.ldr-on.ldr-sale .ldr { animation: ldr-entra .25s ease both; }
html.ldr-fuera .ldr { opacity: 0; visibility: hidden; }
html.ldr-on:not(.ldr-fuera) body { overflow: hidden; }
@keyframes ldr-entra { from { opacity: 0; } }

/* Rayos de velocidad de fondo */
.ldr-rayos {
    position: absolute; left: 50%; top: 50%; width: 220vmax; height: 220vmax; margin: -110vmax 0 0 -110vmax;
    background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.07) 0 .6deg, transparent .6deg 7deg);
    -webkit-mask: radial-gradient(circle, transparent 14vmin, #000 40vmin);
            mask: radial-gradient(circle, transparent 14vmin, #000 40vmin);
    animation: ldr-gira 6s linear infinite; filter: blur(1px);
}

/* Escena 3D */
.ldr-escena { perspective: 900px; width: 340px; height: 260px; display: flex; align-items: center; justify-content: center; }
.ldr-pista {
    --r: 125px;
    position: relative; width: calc(var(--r) * 2 + 80px); height: calc(var(--r) * 2 + 80px);
    transform-style: preserve-3d; transform: rotateX(62deg) rotateZ(0deg);
    animation: ldr-balanceo 5s ease-in-out infinite;
}
.ldr-pista > div { position: absolute; inset: 0; border-radius: 50%; transform-style: preserve-3d; }
.ldr-asfalto {
    background: radial-gradient(circle, #33475e 0 38%, #2a3b4f 39% 64%, #33475e 65% 70%, transparent 71%);
    box-shadow: 0 0 60px rgba(46,157,79,.25);
}
.ldr-marcas {   /* marcas de neumático y línea discontinua */
    inset: 28px !important;
    border: 2px dashed rgba(255,255,255,.18);
    box-shadow: inset 0 0 0 9px rgba(0,0,0,.18), 0 0 0 9px rgba(0,0,0,.18);
}
.ldr-centro { inset: 50% auto auto 50% !important; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 6px !important;
    background: var(--v); box-shadow: inset 0 0 0 2px var(--v), inset 0 0 0 4px #fff, 0 0 24px rgba(76,197,111,.6);
    display: flex; align-items: center; justify-content: center; transform: translateZ(26px) rotateX(-62deg);
    animation: ldr-latido calc(var(--vuelta) * 2) ease-in-out infinite; }
.ldr-centro span { color: #fff; font: 900 30px/1 Arial, Helvetica, sans-serif; }

/* Órbita: gira y arrastra coche + estelas */
.ldr-orbita { animation: ldr-gira var(--vuelta) linear infinite; }
.ldr-estela {
    inset: 10px !important;
    background: conic-gradient(from 0deg, transparent 0 230deg, rgba(76,197,111,0) 230deg, rgba(76,197,111,.95) 356deg, transparent 360deg);
    -webkit-mask: radial-gradient(circle, transparent calc(var(--r) - 13px), #000 calc(var(--r) - 12px) calc(var(--r) + 12px), transparent calc(var(--r) + 13px));
            mask: radial-gradient(circle, transparent calc(var(--r) - 13px), #000 calc(var(--r) - 12px) calc(var(--r) + 12px), transparent calc(var(--r) + 13px));
    filter: blur(3px); transform: translateZ(2px);
}
.ldr-estela-2 {
    background: conic-gradient(from 0deg, transparent 0 300deg, rgba(255,255,255,.0) 300deg, rgba(255,255,255,.8) 357deg, transparent 360deg);
    -webkit-mask: radial-gradient(circle, transparent calc(var(--r) + 6px), #000 calc(var(--r) + 7px) calc(var(--r) + 10px), transparent calc(var(--r) + 11px));
            mask: radial-gradient(circle, transparent calc(var(--r) + 6px), #000 calc(var(--r) + 7px) calc(var(--r) + 10px), transparent calc(var(--r) + 11px));
    filter: blur(1.5px); transform: translateZ(3px);
}

/* Coche: en lo alto de la órbita, mirando en el sentido de la marcha (+X) */
.ldr-coche { position: absolute; left: 50%; top: calc(50% - var(--r)); width: 0; height: 0; transform-style: preserve-3d; }
.ldr-derrape { position: absolute; transform-style: preserve-3d; transform: rotateZ(-14deg) scale3d(1.3,1.3,1.3); animation: ldr-derrape .9s ease-in-out infinite alternate; }

.ldr-sombra { position: absolute; width: 74px; height: 40px; left: -37px; top: -20px; border-radius: 40%; background: rgba(0,0,0,.45); filter: blur(5px); }

/* Caja genérica 3D: --l (largo, X), --w (ancho, Y), --h (alto, Z), --z (altura base), --x (desplazamiento) */
.ldr-caja { position: absolute; transform-style: preserve-3d; transform: translateX(var(--x, 0px)) translateZ(var(--z, 0px)); }
.ldr-caja b { position: absolute; display: block; }
.ldr-caja .t  { width: var(--l); height: var(--w); left: calc(var(--l) / -2); top: calc(var(--w) / -2); transform: translateZ(var(--h)); }
.ldr-caja .l1, .ldr-caja .l2 { width: var(--l); height: var(--h); left: calc(var(--l) / -2); top: calc(var(--h) / -2); }
.ldr-caja .l1 { transform: translateY(calc(var(--w) / 2))  translateZ(calc(var(--h) / 2)) rotateX(90deg); }
.ldr-caja .l2 { transform: translateY(calc(var(--w) / -2)) translateZ(calc(var(--h) / 2)) rotateX(90deg); }
.ldr-caja .f, .ldr-caja .r { width: var(--w); height: var(--h); left: calc(var(--w) / -2); top: calc(var(--h) / -2); }
.ldr-caja .f { transform: translateX(calc(var(--l) / 2))  translateZ(calc(var(--h) / 2)) rotateY(90deg) rotateZ(90deg); }
.ldr-caja .r { transform: translateX(calc(var(--l) / -2)) translateZ(calc(var(--h) / 2)) rotateY(90deg) rotateZ(90deg); }

.ldr-chasis { --l: 62px; --w: 30px; --h: 13px; --z: 4px; }
.ldr-chasis .t  { background: linear-gradient(90deg, var(--v-osc) 0 6%, var(--v-claro) 30% 70%, var(--v) 94%); border-radius: 7px; }
.ldr-chasis .l1, .ldr-chasis .l2 {
    background:
        radial-gradient(circle at 22% 95%, #111 0 6px, #555 6px 7px, transparent 7.5px),
        radial-gradient(circle at 78% 95%, #111 0 6px, #555 6px 7px, transparent 7.5px),
        linear-gradient(var(--v) , var(--v-osc2));
    border-radius: 4px 4px 2px 2px;
}
.ldr-chasis .f { background: radial-gradient(circle at 22% 45%, #fff9c4 0 3px, transparent 4px), radial-gradient(circle at 78% 45%, #fff9c4 0 3px, transparent 4px), var(--v-osc); border-radius: 3px; box-shadow: 0 0 18px 4px rgba(255,249,196,.5); }
.ldr-chasis .r { background: radial-gradient(circle at 22% 45%, #ff3b3b 0 3px, transparent 4px), radial-gradient(circle at 78% 45%, #ff3b3b 0 3px, transparent 4px), var(--v-osc2); border-radius: 3px; box-shadow: 0 0 14px 3px rgba(255,59,59,.45); }

.ldr-cabina { --l: 30px; --w: 25px; --h: 10px; --z: 17px; --x: -5px; }
.ldr-cabina .t { background: #f5f7fa; border-radius: 4px; display: flex; align-items: center; justify-content: center; }
.ldr-cabina .t span { display: block; width: 14px; height: 14px; border-radius: 2px; background: var(--v); color: #fff; font: 900 11px/14px Arial, sans-serif; text-align: center; transform: rotate(90deg); }
.ldr-cabina .l1, .ldr-cabina .l2 { background: linear-gradient(90deg, #8fd3ff 0 44%, var(--v) 44% 50%, #6bb8e6 50%); opacity: .95; }
.ldr-cabina .f { background: linear-gradient(#bfe6ff, #5aa9d9); }
.ldr-cabina .r { background: #4b8fbd; }

/* Líneas de velocidad detrás del coche */
.ldr-vel { position: absolute; height: 2px; width: 46px; left: -80px; border-radius: 2px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.85));
    transform: translateZ(10px); animation: ldr-vel .45s linear infinite; filter: blur(.6px); }
.ldr-vel:nth-child(1) { top: -14px; animation-delay: -.1s; }
.ldr-vel:nth-child(2) { top: -4px;  width: 60px; animation-delay: -.3s; transform: translateZ(18px); }
.ldr-vel:nth-child(3) { top: 6px;   animation-delay: -.2s; }
.ldr-vel:nth-child(4) { top: 14px;  width: 34px; animation-delay: 0s; transform: translateZ(6px); }

.ldr-texto { margin-top: 6px; color: #dfe7ef; font: 600 15px/1 "Segoe UI", Arial, sans-serif; letter-spacing: .18em; text-transform: uppercase; }
.ldr-texto span { animation: ldr-punto 1.2s infinite; }
.ldr-texto span:nth-child(2) { animation-delay: .2s; }
.ldr-texto span:nth-child(3) { animation-delay: .4s; }

@keyframes ldr-gira { to { transform: rotate(360deg); } }
@keyframes ldr-balanceo { 0%,100% { transform: rotateX(62deg) rotateZ(-8deg); } 50% { transform: rotateX(56deg) rotateZ(8deg); } }
@keyframes ldr-derrape { from { transform: rotateZ(-10deg) rotateX(-3deg) scale3d(1.3,1.3,1.3); } to { transform: rotateZ(-20deg) rotateX(4deg) scale3d(1.3,1.3,1.3); } }
@keyframes ldr-vel { from { transform: translateX(30px) translateZ(10px); opacity: 0; } 30% { opacity: 1; } to { transform: translateX(-40px) translateZ(10px); opacity: 0; } }
@keyframes ldr-latido { 50% { box-shadow: inset 0 0 0 2px var(--v), inset 0 0 0 4px #fff, 0 0 40px rgba(76,197,111,.9); } }
@keyframes ldr-punto { 0%,100% { opacity: .2; } 50% { opacity: 1; } }

@media (max-width: 480px) { .ldr-escena { transform: scale(.85); } }

/* Movimiento reducido: escena quieta, solo el texto */
@media (prefers-reduced-motion: reduce) {
    .ldr *, .ldr { animation: none !important; }
    .ldr-vel, .ldr-rayos { display: none; }
    .ldr-orbita { transform: rotate(35deg); }
    html.ldr-on .ldr { transition-duration: .15s; }
}
@media print { .ldr { display: none !important; } }