:root{
    --primary-color: #7d0edf;
    --secondary-color: #9b0bc3; 
    --tertiary-color: #3b0c60; 
    --white: #f3f3f3;
    --black: rgba(15, 15, 15, 1);
    --dark-grey: #333333;
    --light-grey: #d4d4d4;
    --grey: #757575;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Clash Display', sans-serif;
    color: var(--white);
}

a{
    text-decoration: none;
}

li{
    list-style: none;
}

html, body{
    width: 100%;
    min-height: 100dvh;
    background: var(--black);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    scroll-behavior: auto;
}

/* Evita cualquier scroll horizontal en toda la web */
html, body {
    overflow-x: hidden !important;
    width: 100vw;
    max-width: 100vw;
    position: relative;
}
body {
    /* Para evitar que algún elemento absoluto cause scroll-x */
    overflow-x: hidden !important;
}
* {
    box-sizing: border-box;
}

/* Personalización del scrollbar para navegadores basados en Webkit */
::-webkit-scrollbar {
    width: 5px;
    background: transparent; /* Fondo del scrollbar */
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--primary-color), var(--tertiary-color)); /* Color del "pulgar" */
    border-radius: 8px;
    border: 1px solid var(--grey);
    transition: background 0.3s;
}

@keyframes glow-move {
    0% {
        box-shadow: 0 0 10px 2px rgba(255,255,255,0.18), 0 0 2px 0 rgba(0,0,0,0.08);
    }
    50% {
        box-shadow: 8px 0 16px 4px rgba(255,255,255,0.22), 0 0 2px 0 rgba(0,0,0,0.08);
    }
    100% {
        box-shadow: 0 0 10px 2px rgba(255,255,255,0.18), 0 0 2px 0 rgba(0,0,0,0.08);
    }
}

@keyframes glow-move-strong {
    0% {
        box-shadow: 0 0 18px 4px var(--primary-color), 0 0 4px 0 rgba(0,0,0,0.12);
    }
    50% {
        box-shadow: -8px 0 24px 8px var(--tertiary-color), 0 0 4px 0 rgba(0,0,0,0.12);
    }
    100% {
        box-shadow: 0 0 18px 4px var(--primary-color), 0 0 4px 0 rgba(0,0,0,0.12);
    }
}

@keyframes subtle-glow {
    0% {
        box-shadow: 0 0 12px 2px rgba(255,255,255,0.18), 0 0 0px 0 rgba(0,0,0,0.08);
    }
    50% {
        box-shadow: 2px 0 18px 4px rgba(255,255,255,0.22), 0 0 0px 0 rgba(0,0,0,0.08);
    }
    100% {
        box-shadow: 0 0 12px 2px rgba(255,255,255,0.18), 0 0 0px 0 rgba(0,0,0,0.08);
    }
}

@keyframes subtle-glow-strong {
    0% {
        box-shadow: 0 0 18px 4px var(--primary-color), 0 0 0px 0 rgba(0,0,0,0.12);
    }
    50% {
        box-shadow: 1px 0 24px 6px var(--tertiary-color), 0 0 0px 0 rgba(0,0,0,0.12);
    }
    100% {
        box-shadow: 0 0 18px 4px var(--primary-color), 0 0 0px 0 rgba(0,0,0,0.12);
    }
}

.btn{
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2% 5%;
    background-color: var(--white);
    color: var(--black);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    text-align: center;
    font-size: 1rem;
    transition: all 0.3s ease-in-out;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Opcional: muestra "..." si el texto es muy largo */
    box-shadow: 0 0 12px 2px rgba(255,255,255,0.25), 0 0 2px 0 rgba(0,0,0,0.1);
    transition: all 0.3s ease-in-out;
    animation: glow-move 2s infinite linear;
    filter: brightness(1);
}

.btn:hover{
    background-color: var(--primary-color);
    color: var(--white);
}

.btn:hover i{
    color: var(--white);
}

.btn:hover, .btn:focus {
    box-shadow: 0 0 32px 8px var(--primary-color), 0 0 8px 2px rgba(0,0,0,0.15);
    box-shadow: 0 0 18px 4px var(--tertiary-color), 0 0 4px 0 rgba(0,0,0,0.12);
    animation: glow-move-strong 1.2s infinite linear;
}

.btn:hover, .btn:focus {
    box-shadow: 0 0 18px 4px var(--primary-color);
    animation: subtle-glow-strong 1.2s infinite linear;
    filter: brightness(1.08);
}

/* Puedes ponerlo en tu home_modules/_performance.css o similar */
#mapa3d {
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    border-radius: 12px;
    margin-top: 1rem;
}