/* --- HEADER ESTRUCTURA --- */

        .rb-header {

            position: fixed;

            top: 0; left: 0; width: 100%;

            padding: 20px 40px; /* Espacio a los lados */

            display: flex;

            justify-content: space-between; /* Extremos separados */

            align-items: center;

            z-index: 1000;

            transition: 0.3s;

            background: linear-gradient(to bottom, rgba(2,27,53,0.8), transparent);

        }



        /* 1. IZQUIERDA: Logo */

        .header-left {

            z-index: 2; /* Para que quede encima si la pantalla se achica */

            display: flex; align-items: center;

        }

       

        .logo-img {

            height: 35px; /* Ajusta este tamaño según tu logo */

            width: auto;

            display: block;

        }



        /* 2. CENTRO: La "Cápsula" (Posición Absoluta para centrado perfecto) */

        .nav-pill-container {

            position: absolute;

            left: 50%;

            transform: translateX(-50%); /* Truco matemático para centrar exacto */

            z-index: 1;

        }



        .nav-pill {

            background-color: rgba(255, 255, 255, 0.15); /* Fondo vidrio */

            backdrop-filter: blur(8px);

            border-radius: 50px;

            padding: 4px 6px; /* Padding interno reducido para que no sea ancha */

            display: flex; align-items: center;

            border: 1px solid rgba(255,255,255,0.1);

        }



        .pill-link {

            color: white; text-decoration: none;

            font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 0.85rem; /* Letra un poco más pequeña */

            letter-spacing: 1px;

            padding: 8px 18px; /* Menos espacio entre palabras */

            border-radius: 30px;

            transition: 0.3s;

            text-transform: uppercase;

            white-space: nowrap; /* Evita que el texto se parta en dos líneas */

        }

       

        .pill-link:hover { background: rgba(255,255,255,0.2); color: var(--sx-gold); }

        .pill-link.active { background: white; color: #021B35; font-weight: 700; }



        /* 3. DERECHA: Sponsors */

        .header-right {

            z-index: 2;

            display: flex; align-items: center; gap: 20px;

        }



        .partner-link {

            font-family: 'Oswald', sans-serif;

            font-size: 0.8rem; text-transform: uppercase; color: #ccc;

            text-decoration: none; letter-spacing: 1px;

            border-bottom: 2px solid transparent; transition: 0.3s;

            text-align: right; line-height: 1.2;

        }

        .partner-link:hover { color: white; border-color: var(--sx-cyan); }



        /* RESPONSIVE: Cuando la pantalla choca */

        @media (max-width: 1024px) {

            .nav-pill-container { display: none; } /* Ocultamos cápsula en tablets/celu */

            .partner-link { display: none; }

            .rb-header { background: #021B35; padding: 15px 20px; }

            /* Aquí deberías activar el menú hamburguesa que agregaremos luego */

        }
        /* Asegúrate que esto esté en tu CSS */

/* Botón Hamburguesa */
.mobile-toggle {
    display: none; /* Oculto en PC */
    background: transparent; border: none; color: white;
    font-size: 1.5rem; cursor: pointer; margin-left: 15px;
}

/* El Overlay Negro (Pantalla completa) */
.mobile-menu-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: #010a12; /* Color de fondo del menú */
    z-index: 2000; /* Siempre encima de todo */
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    opacity: 0; visibility: hidden; transition: 0.4s ease; transform: translateY(-20px);
}

.mobile-menu-overlay.active {
    opacity: 1; visibility: visible; transform: translateY(0);
}

/* Enlaces Grandes */
.mobile-nav-links { display: flex; flex-direction: column; gap: 30px; text-align: center; }
.mobile-nav-links a { font-family: 'regular';; font-size: 2rem; color: white; text-decoration: none; text-transform: uppercase; }

/* Botón cerrar */
.close-menu-btn { position: absolute; top: 30px; right: 30px; background: none; border: none; color: white; font-size: 2rem; cursor: pointer; }
.mobile-social a {color: white; font-size: 2rem;}
/* Activar en Móvil */
@media (max-width: 1024px) {
    .nav-pill-container, .partner-link { display: none; }
    .mobile-toggle { display: block; }
    .rb-header { background: #010a12; padding: 15px 20px; }
}