/* =========================================
   1. SCROLLBAR INVISIBLE & APP FEEL (Nativo)
========================================= */
/* Ocultamos la barra para que parezca una app nativa, pero mantenemos el scroll fluido */
::-webkit-scrollbar { width: 0px; background: transparent; }
html { scroll-behavior: smooth; }

/* Selección de texto (Toque premium) */
::selection {
    background-color: #E30613;
    color: white;
}
/* ========================================== */
/* BLOQUEO DE GHOST DRAG (IMÁGENES Y SVG)     */
/* ========================================== */
img, svg {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    user-select: none;
    -webkit-user-select: none;
}

/* =========================================
   2. EL MOTOR DEL MODO OSCURO (GOD TIER)
========================================= */
/* Esta clase hace que todos los cambios de color tomen 0.7 segundos y sean súper fluidos */
.theme-transition, .theme-transition * {
    transition-property: background-color, border-color, color, fill, stroke, box-shadow;
    transition-duration: 700ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================
   3. FONDOS ARQUITECTÓNICOS (BLUEPRINT)
========================================= */
.blueprint-bg {
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
    background-size: 50px 50px;
    /* Efecto de viñeta para dar profundidad */
    mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
}

.dark .blueprint-bg {
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}

/* =========================================
   4. SVG GRÚA (INTACTO - NO SE BORRA NADA)
========================================= */
.crane-metal { fill: #E30613; }
.block-text { 
    font-family: 'Montserrat', sans-serif; 
    font-weight: 900; 
    font-size: 24px; 
    fill: #fff; 
    letter-spacing: 3px; 
}

/* =========================================
   5. CONTROLES DEL CARRUSEL (SWIPER JS PREMIUM)
========================================= */
/* Flechas sólidas y elegantes (Awwwards Style) */
.swiper-button-next, .swiper-button-prev {
    color: #fff !important;
    background: #E30613;
    width: 60px !important;
    height: 60px !important;
    border-radius: 50%;
    transform: scale(0.8);
    box-shadow: 0 4px 15px rgba(227, 6, 19, 0.4);
    transition: all 0.4s cubic-bezier(0.68,-0.55,0.265,1.55);
}
.dark .swiper-button-next, .dark .swiper-button-prev {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
}
.swiper-button-next:hover, .swiper-button-prev:hover {
    transform: scale(1);
    background: #b9050f;
}

/* Botoncitos de abajo (Paginación) */
.swiper-pagination-bullet { 
    background: #999 !important; 
    border-radius: 0 !important; 
    width: 30px !important; 
    height: 3px !important; 
    transition: all 0.3s ease;
}
.swiper-pagination-bullet-active { 
    background: #E30613 !important; 
    width: 50px !important; /* Se estira cuando está activo */
}

/* =========================================
   6. MARQUEE INFINITO ACELERADO POR HARDWARE
========================================= */
.animate-marquee { animation: marquee 40s linear infinite; will-change: transform; }
.animate-marquee2 { animation: marquee2 40s linear infinite; will-change: transform; }

/* Pausa cuando el usuario pone el mouse encima para que pueda leer */
.group:hover .animate-marquee, 
.group:hover .animate-marquee2 { 
    animation-play-state: paused; 
}

@keyframes marquee { 
    0% { transform: translate3d(0%, 0, 0); } 
    100% { transform: translate3d(-100%, 0, 0); } 
}
@keyframes marquee2 { 
    0% { transform: translate3d(100%, 0, 0); } 
    100% { transform: translate3d(0%, 0, 0); } 
}