/* =========================================
   1. GLOBAL & CURSOR
   ========================================= */
body, a, button, .spa-link, .cursor-pointer {
    cursor: url('https://res.cloudinary.com/doogqtbgv/image/upload/w_32,h_32/principal/cursor_guante.png') 16 16, auto !important;
    overflow-x: hidden; 
}

/* =========================================
   2. CONTENEDOR DE PARTÍCULAS (FONDO)
   ========================================= */
#all-page-particles {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 50; overflow: hidden;
    /* OPTIMIZACIÓN LIGHHOUSE: Previene que repinte toda la pantalla */
    contain: strict; 
}

.floating-item {
    position: absolute; 
    /* OPTIMIZACIÓN LIGHHOUSE: Fuerza a usar la tarjeta de video (GPU) */
    will-change: transform, opacity;
    transform: translateZ(0); 
    display: flex; align-items: center; justify-content: center; opacity: 0;
}

@keyframes floatUpScreen {
    0% { transform: translate3d(0, 110vh, 0) rotate(0deg); opacity: 0; }
    10% { opacity: 0.3; } 
    90% { opacity: 0.3; }
    100% { transform: translate3d(0, -10vh, 0) rotate(360deg); opacity: 0; }
}

.bubble-global {
    border-radius: 50%; border: 1px solid rgba(150, 150, 150, 0.3);
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.4), transparent);
    box-shadow: 0 0 5px rgba(255,255,255,0.1);
}

/* =========================================
   3. TEXTOS Y EFECTOS VISUALES (SHIMMER)
   ========================================= */
@keyframes shimmerMove { 
    0% { background-position: 0% 50%; } 
    50% { background-position: 100% 50%; } 
    100% { background-position: 0% 50%; } 
}

/* Shimmer Nav y Hero optimizados */
.shimmer-text-nav, .shimmer-text-hero {
    background-size: 300% auto; 
    -webkit-background-clip: text; 
    background-clip: text; 
    -webkit-text-fill-color: transparent; 
    display: inline-block;
    /* OPTIMIZACIÓN LIGHHOUSE: Aceleración GPU para el brillo */
    will-change: background-position;
    transform: translateZ(0);
}

.shimmer-text-nav {
    background-image: linear-gradient(90deg, #0047AB 0%, #139AD6 25%, #FFFFFF 50%, #139AD6 75%, #0047AB 100%);
    animation: shimmerMove 6s ease infinite; 
}

.shimmer-text-hero {
    background-image: linear-gradient(90deg, #FFFFFF 0%, #139AD6 25%, #0047AB 50%, #139AD6 75%, #FFFFFF 100%);
    animation: shimmerMove 8s ease-in-out infinite;
}

/* =========================================
   4. NAVEGACIÓN Y HERO
   ========================================= */
.glass-nav { 
    background: rgba(255, 255, 255, 0.95); 
    backdrop-filter: blur(12px); 
    border-bottom: 1px solid rgba(0,0,0,0.05); 
}

.mobile-menu-dropdown { animation: slideDownMenu 0.3s ease-out; max-height: 400px; overflow-y: auto; }

@keyframes slideDownMenu {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

#mobile-menu.hidden { display: none !important; }
#mobile-menu:not(.hidden) { display: block; animation: slideDownMenu 0.3s ease-out; }

.hero-slide { transition: opacity 1.5s ease-in-out, transform 8s ease; will-change: opacity, transform; }
.active-slide { opacity: 1; transform: scale(1.05); }
.inactive-slide { opacity: 0; transform: scale(1); }

.btn-glow { position: relative; overflow: hidden; }
.btn-glow::after { 
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; 
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); 
    transition: left 0.5s; 
}
.btn-glow:hover::after { left: 100%; }


/* =========================================
   5. PRELOADER FINAL (Tuerca 3D, Martillo y Ladrillos)
   ========================================= */
.brick-background-layer, .brick-progress-fill {
   background-image:
       linear-gradient(335deg, #004B9B 23px, transparent 23px),
       linear-gradient(155deg, #0047AB 23px, transparent 23px),
       linear-gradient(335deg, #139AD6 23px, transparent 23px),
       linear-gradient(155deg, #14a2e4 23px, transparent 23px),
       linear-gradient(rgba(255, 255, 255, 0.322) 2px, transparent 2px),
       linear-gradient(90deg, rgba(255, 255, 255, 0.322) 2px, transparent 2px);
   background-size: 58px 58px;
   background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px, 0px 0px, 0px 0px;
}

.animate-brick-fill { animation: fillUpScreen 2.5s ease-in-out forwards; border-top: 4px solid #FFFFFF; box-shadow: 0px -10px 40px rgba(19, 154, 214, 0.6); }

.perspective-container { perspective: 1200px; }
.giant-nut {
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    transform: rotateX(65deg) translateZ(-50px);
    transform-style: preserve-3d; position: relative; overflow: hidden;
}
.clip-polygon { clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); }
.hammer-wrapper { transform-origin: 70% 90%; will-change: transform; }

@keyframes hammerImpactRealistic {
    0% { transform: rotate(-45deg) translateY(-20px); animation-timing-function: ease-in; }
    45% { transform: rotate(5deg) translateY(0px); } 
    50% { transform: rotate(8deg) translateY(2px) scale(1.05); } 
    60% { transform: rotate(0deg) translateY(0px); animation-timing-function: ease-out; } 
    100% { transform: rotate(-45deg) translateY(-20px); } 
}

.animate-hammer-impact { animation: hammerImpactRealistic 1.2s infinite; }

@keyframes impactFlashSyncAnim {
    0%, 45%, 100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(0.5); }
    50% { opacity: 0.8; transform: translate3d(-50%, -50%, 0) scale(3); } 
    70% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(4); }
}

.animate-impact-flash-sync { mix-blend-mode: screen; animation: impactFlashSyncAnim 1.2s infinite ease-out; will-change: transform, opacity; }

.spark {
    position: absolute; top: 20px; left: 50%; width: 8px; height: 25px;
    background: #FFFFFF; border-radius: 4px; box-shadow: 0 0 10px #0047AB, 0 0 20px #139AD6; 
    opacity: 0; animation: sparkExplosionSync 1.2s infinite ease-out; will-change: transform, opacity;
}

.s1 { --tx: -100px; --ty: -120px; --rot: -50deg; background: #004B9B; height: 30px; }
.s2 { --tx: 100px;  --ty: -130px; --rot: 50deg;  background: #FFFFFF; }
.s3 { --tx: -50px;  --ty: -150px; --rot: -20deg; background: #139AD6; height: 35px; }
.s4 { --tx: 50px;   --ty: -140px; --rot: 20deg;  background: #0047AB; }
.s5 { --tx: -120px; --ty: -80px;  --rot: -80deg; background: #004B9B; height: 20px;}
.s6 { --tx: 120px;  --ty: -90px;  --rot: 80deg;  background: #F8F9FA; }
.s7 { --tx: -20px;  --ty: -180px; --rot: -5deg;  background: #FFFFFF; height: 40px; }
.s8 { --tx: 20px;   --ty: -170px; --rot: 5deg;   background: #139AD6; }

@keyframes sparkExplosionSync {
    0%, 48% { opacity: 0; transform: translate3d(-50%, 40px, 0) scale(0.2); }
    50% { opacity: 1; transform: translate3d(-50%, 10px, 0) scale(1); } 
    60% { opacity: 1; transform: translate3d(-50%, 0px, 0) scale(2); } 
    100% { opacity: 0; transform: translate3d(calc(-50% + var(--tx)), var(--ty), 0) rotate(var(--rot)) scale(0.5); }
}

/* =========================================
   6. EXTRAS & RESPONSIVE
   ========================================= */
@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.animate-spin-slow { animation: spin-slow 20s linear infinite; will-change: transform; transform: translateZ(0); }

#navbar { height: auto; min-height: fit-content; }
#hero-carousel, section:first-of-type { margin-top: 0; scroll-margin-top: 100px; }

@media (max-width: 768px) {
    #hero-carousel { height: 500px !important; }
    .carousel-item h1 { font-size: 2rem !important; }
    .carousel-item p { font-size: 1rem !important; }
    button, a { min-height: 44px; min-width: 44px; }
}
@media (max-width: 640px) {
    .grid { gap: 1rem !important; }
    .max-w-7xl { width: 100%; }
}

/* =========================================
   8. BARRAS DE SCROLL
   ========================================= */
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 10px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #139AD6; }


/* =========================================
   9. LÓGICA DEL PILO Y WHATSAPP
   ========================================= */
.whatsapp-btn { display: none; }
.piloto-img {
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.2));
    image-rendering: -webkit-optimize-contrast;
    object-fit: cover;
    will-change: transform;
}

.chat-bubble:not(.hidden) {
    display: block !important;
    animation: popInLarge 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform, opacity;
}

@keyframes popInLarge {
    0% { opacity: 0; transform: translate3d(0, 40px, 0) scale(0.3); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

#piloto-flotante.scrolled .chat-bubble { display: none !important; }
#piloto-flotante.scrolled .piloto-img { display: none !important; }
#piloto-flotante.scrolled .whatsapp-btn {
    display: flex !important; 
    animation: bounceIn 0.5s ease; 
}

@keyframes bounceIn {
    0% { transform: scale(0); }
    70% { transform: scale(1.2); }
    100% { transform: scale(1); }
}