/* ==========================================================================
   Estilos para la Página de Redes Sociales
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Estilos de Navegación y Header
   -------------------------------------------------------------------------- */

/* Estilos para la navbar con transparencia y efecto borroso (Glassmorphism) */
#header-navbar {
    --s-start-0: 2.391200382592061%;
    --s-end-0: 43.902064173373226%;
    --x-0: 7%;
    --c-0: hsla(306, 0%, 0%, 1);
    --y-0: 9%;
    
    --c-1: hsla(306, 0%, 0%, 1);
    --x-1: 96%;
    --s-start-1: 9%;
    --s-end-1: 54.805582404585024%;
    --y-1: 93%;
    
    --s-start-2: 3%;
    --s-end-2: 26.722813338714598%;
    --y-2: 103%;
    --x-2: -2%;
    --c-2: hsla(166.53061224489795, 72%, 60%, 1);
    
    --c-3: hsla(180, 100%, 50%, 0.46);
    --y-3: 82%;
    --s-start-3: 2.391200382592061%;
    --s-end-3: 32.0689540200964%;
    --x-3: 33%;
    
    --y-4: 81%;
    --s-start-4: 4.40642490323111%;
    --s-end-4: 37.23528104246256%;
    --c-4: hsla(212.43243243243245, 88%, 26%, 0.58);
    --x-4: 37%;
    
    --c-5: hsla(271.9148936170212, 98%, 53%, 0.31);
    --s-start-5: 3%;
    --s-end-5: 32.537089799783296%;
    --x-5: 54%;
    --y-5: 99%;
    
    --s-start-6: 6%;
    --s-end-6: 42.501105312974815%;
    --c-6: hsla(262.82352941176475, 100%, 50%, 0.15);
    --x-6: 104%;
    --y-6: 43%;
    
    --y-7: -16%;
    --s-start-7: 5%;
    --s-end-7: 13.10107024898374%;
    --x-7: 104%;
    --c-7: hsla(298.60465116279073, 36%, 23%, 1);
    
    --y-8: 30%;
    --x-8: 97%;
    --s-start-8: 2.391200382592061%;
    --s-end-8: 27.141813016850573%;
    --c-8: hsla(180, 100%, 50%, 0.31);
    
    --s-start-9: 5%;
    --s-end-9: 21.32164536610654%;
    --x-9: 78%;
    --c-9: hsla(219.2079207920792, 83%, 23%, 0.59);
    --y-9: 4%;

    background-color: hsla(305, 0%, 0%, 1) !important;
    background-image: 
        radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), 
        radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), 
        radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), 
        radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), 
        radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)), 
        radial-gradient(circle at var(--x-5) var(--y-5), var(--c-5) var(--s-start-5), transparent var(--s-end-5)), 
        radial-gradient(circle at var(--x-6) var(--y-6), var(--c-6) var(--s-start-6), transparent var(--s-end-6)), 
        radial-gradient(circle at var(--x-7) var(--y-7), var(--c-7) var(--s-start-7), transparent var(--s-end-7)), 
        radial-gradient(circle at var(--x-8) var(--y-8), var(--c-8) var(--s-start-8), transparent var(--s-end-8)), 
        radial-gradient(circle at var(--x-9) var(--y-9), var(--c-9) var(--s-start-9), transparent var(--s-end-9)) !important;
    background-blend-mode: normal !important;
    background-size: cover !important;
    
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

#header-navbar > * {
    position: relative;
    z-index: 2;
}

/* Tipografía de los enlaces de navegación */
#header-navbar .nav-link {
    font-weight: bold !important;
    font-family: 'Lato', sans-serif !important;
    font-size: 15px !important;
}

#header-navbar .dropdown-toggle {
    font-weight: bold !important;
    font-family: 'Lato', sans-serif !important;
    font-size: 15px !important;
}

/* Ajuste del logo en la navbar */
#header-navbar .navbar-brand img {
    height: 35px !important;
}

/* --------------------------------------------------------------------------
   2. Navegación Flotante Móvil (Estilo Neumórfico)
   -------------------------------------------------------------------------- */

.floating-mobile-nav .nav-container {
    --s-start-0: 2.391200382592061%;
    --s-end-0: 43.902064173373226%;
    --x-0: 7%;
    --c-0: hsla(306, 0%, 0%, 1);
    --y-0: 9%;
    
    --c-1: hsla(306, 0%, 0%, 1);
    --x-1: 96%;
    --s-start-1: 9%;
    --s-end-1: 54.805582404585024%;
    --y-1: 93%;
    
    --s-start-2: 3%;
    --s-end-2: 26.722813338714598%;
    --y-2: 103%;
    --x-2: -2%;
    --c-2: hsla(166.53061224489795, 72%, 60%, 1);
    
    --c-3: hsla(180, 100%, 50%, 0.46);
    --y-3: 82%;
    --s-start-3: 2.391200382592061%;
    --s-end-3: 32.0689540200964%;
    --x-3: 33%;
    
    --y-4: 81%;
    --s-start-4: 4.40642490323111%;
    --s-end-4: 37.23528104246256%;
    --c-4: hsla(212.43243243243245, 88%, 26%, 0.58);
    --x-4: 37%;
    
    --c-5: hsla(271.9148936170212, 98%, 53%, 0.31);
    --s-start-5: 3%;
    --s-end-5: 32.537089799783296%;
    --x-5: 54%;
    --y-5: 99%;
    
    --s-start-6: 6%;
    --s-end-6: 42.501105312974815%;
    --c-6: hsla(262.82352941176475, 100%, 50%, 0.15);
    --x-6: 104%;
    --y-6: 43%;
    
    --y-7: -16%;
    --s-start-7: 5%;
    --s-end-7: 13.10107024898374%;
    --x-7: 104%;
    --c-7: hsla(298.60465116279073, 36%, 23%, 1);
    
    --y-8: 30%;
    --x-8: 97%;
    --s-start-8: 2.391200382592061%;
    --s-end-8: 27.141813016850573%;
    --c-8: hsla(180, 100%, 50%, 0.31);
    
    --s-start-9: 5%;
    --s-end-9: 21.32164536610654%;
    --x-9: 78%;
    --c-9: hsla(219.2079207920792, 83%, 23%, 0.59);
    --y-9: 4%;

    background-color: hsla(305, 0%, 0%, 1) !important;
    background-image: 
        radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), 
        radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), 
        radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), 
        radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), 
        radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)), 
        radial-gradient(circle at var(--x-5) var(--y-5), var(--c-5) var(--s-start-5), transparent var(--s-end-5)), 
        radial-gradient(circle at var(--x-6) var(--y-6), var(--c-6) var(--s-start-6), transparent var(--s-end-6)), 
        radial-gradient(circle at var(--x-7) var(--y-7), var(--c-7) var(--s-start-7), transparent var(--s-end-7)), 
        radial-gradient(circle at var(--x-8) var(--y-8), var(--c-8) var(--s-start-8), transparent var(--s-end-8)), 
        radial-gradient(circle at var(--x-9) var(--y-9), var(--c-9) var(--s-start-9), transparent var(--s-end-9)) !important;
    background-blend-mode: normal !important;
    background-size: cover !important;
    
    border-radius: 22px;
    display: block;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.12),
        0 12px 25px rgba(0, 0, 0, 0.08),
        0 6px 12px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 0 rgba(255, 255, 255, 0.1),
        inset 1px 0 0 rgba(255, 255, 255, 0.2),
        inset -1px 0 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(50px) saturate(200%) brightness(110%);
    -webkit-backdrop-filter: blur(50px) saturate(200%) brightness(110%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.floating-mobile-nav .nav-container::-webkit-scrollbar {
    display: none;
}

/* --------------------------------------------------------------------------
   3. Ocultar navbar desktop en móvil
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    #header-navbar {
        display: none !important;
    }
}