/* 
   CARRERA DE LOBOS - Estilos Personalizados
   Diseño Premium Dark Mode con acentos en Amarillo Dorado (#eab308)
*/

/* Texturas de Fondo */
.textured-bg {
    background-image: url(https://lh3.googleusercontent.com/aida-public/AB6AXuD8tTq6DlZOgWL7Fi6ajzQE50JTW0vhNy_qqSpGTQExjF6KArq8wrFO8im1Nn2hQyzrUTxf6KFtO6ja1N-Alznrr7-rxSJV9738EFNbegIUTMlL7CLlGAAnJOUSu8yZCfxSnHoajGG81-_75fl9oH6ki86S1An7A4YYf71uTRrR0jZwT86DFig_hqEoMNFJwFJVxegjAeQ5g2_KxTgpduC2bFyY48K7YZ7rx0OIdE1pNMb0P5qMPvDnrOFN2vE9hU7ZgolZf6mhR7WZ);
    background-blend-mode: multiply;
    background-size: cover;
}

/* Efecto bosque oscuro para secciones */
.dark-textured {
    background-color: #062312;
    /* Verde bosque muy oscuro */
    background-image: url(https://lh3.googleusercontent.com/aida-public/AB6AXuDQhcZ6Z_huHwdoKmPpiIt4hbmUw1rawHDyISgwUD798R1nAkO7x9yHxM8FOt0c2-B3LD4wqwitOVRF-pm9kycMNahihAZpKmip4f0wUfdhwLHgI3efq6AqVgoukSHv1NOWxBynAPDdu4BYdCLjj93bMWGN1sJOzEu9LQ9i6HdsgS_AIt2FkizT26JqMy2xdfTeWoouThQ6ASs1LMn4rn8u1xrsz1GZRg22LjCNJ8GCv_fIEp52Cu3Kb4D6C-AbPW6hfP4u-C_dj_7c);
    background-blend-mode: overlay;
}

/* Degradado para el Hero para mejorar lectura de texto */
.hero-gradient {
    background: linear-gradient(to right, rgba(10, 10, 10, 0.95) 40%, rgba(10, 10, 10, 0.4) 100%);
}

/* Configuración de iconos Material Symbols */
.material-symbols-outlined {
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* Degradado para que el mapa se integre con el fondo */
.map-gradient {
    background: linear-gradient(180deg, rgba(10, 10, 10, 1) 0%, rgba(10, 10, 10, 0.8) 50%, rgba(10, 10, 10, 1) 100%);
}

/* Textura para la barra del contador */
.timer-texture {
    background-color: #000000 !important;
    background-image: none !important;
}

/* Efecto de texto con sombra fuerte */
.distressed-text {
    text-transform: uppercase;
    letter-spacing: -0.05em;
    text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.8);
}

/* Animación de Revelado al hacer Scroll */
.reveal {
    position: relative;
    transform: translateY(50px);
    opacity: 0;
    transition: all 0.8s ease-out;
}

.reveal.active {
    transform: translateY(0);
    opacity: 1;
}

/* Animaciones Personalizadas */
@keyframes pulse-slow {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

.animate-pulse-slow {
    animation: pulse-slow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Leaflet Customization */
.leaflet-container {
    background: #0a0a0a !important;
}

.km-marker {
    background: transparent !important;
    border: none !important;
}

.leaflet-popup-content-wrapper {
    background: #1a1a1a !important;
    color: white !important;
    border: 1px solid rgba(234, 179, 8, 0.3) !important;
    border-radius: 12px !important;
}

.leaflet-popup-tip {
    background: #1a1a1a !important;
}

/* Custom indicator pulse */
@keyframes marker-pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

.leaflet-interactive:focus {
    outline: none !important;
}