/* assets/css/main.css */

/* =========================================
   1. DEFINICIÓN DE FUENTES (Chillax Local)
   ========================================= */
@font-face {
    font-family: 'Chillax';
    src: url('../fonts/Chillax-Extralight.otf') format('opentype');
    font-weight: 200;
}
@font-face {
    font-family: 'Chillax';
    src: url('../fonts/Chillax-Light.otf') format('opentype');
    font-weight: 300;
}
@font-face {
    font-family: 'Chillax';
    src: url('../fonts/Chillax-Regular.otf') format('opentype');
    font-weight: 400;
}
@font-face {
    font-family: 'Chillax';
    src: url('../fonts/Chillax-Medium.otf') format('opentype');
    font-weight: 500;
}
@font-face {
    font-family: 'Chillax';
    src: url('../fonts/Chillax-Semibold.otf') format('opentype');
    font-weight: 600;
}
@font-face {
    font-family: 'Chillax';
    src: url('../fonts/Chillax-Bold.otf') format('opentype');
    font-weight: 700;
}

/* =========================================
   2. CONFIGURACIÓN GLOBAL
   ========================================= */
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Chillax', sans-serif;
    background-color: #000;
    color: #fff;
    margin: 0;
}

/* Evita que el Navbar tape el inicio de las secciones */
section {
    scroll-margin-top: 100px;
}

/* =========================================
   3. NAVEGACIÓN Y ESTILOS DE INTERACCIÓN
   ========================================= */
.nav-links .nav-item {
    transition: all 0.3s ease;
    position: relative;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Subrayado animado */
.nav-links .nav-item::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 0;
    /* Cambié el magenta por el Azul de Ubicarte (#0076FF) 
       para que combine con los puntos del mapa y la luz azul */
    background-color: #0076FF; 
    transition: width 0.3s ease;
}

.nav-links .nav-item:hover::after {
    width: 100%;
}

.nav-links .nav-item:hover {
    color: #fff;
    opacity: 1;
}