/* Importar una fuente moderna tipo Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
    font-family: 'Poppins', sans-serif; /* Tipografía moderna */
}

/* --- BARRA DE TEXTO EN MOVIMIENTO (MARQUEE) --- */
.top-bar-marquee {
    background-color: #333; /* Gris oscuro/Negro */
    color: white;
    padding: 5px 0;
    overflow: hidden;
    white-space: nowrap;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
}

.marquee-content {
    display: inline-block;
    animation: marquee 20s linear infinite;
    padding-left: 100%;
}

@keyframes marquee {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(-100%, 0);
    }
}

/* --- NAVBAR Y ICONOS --- */
.navbar-brand {
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 1.5rem;
    text-transform: uppercase;
}

/* --- ICONOS DE NAVEGACIÓN CORREGIDOS --- */
.nav-icon-btn {
    color: #000 !important; /* Fuerza el NEGRO sobre cualquier azul */
    font-size: 1.8rem !important; /* Aumentamos el tamaño (antes era 1.2rem) */
    background: none;
    border: none;
    padding: 0 10px;
    cursor: pointer;
    transition: color 0.3s ease;
    display: inline-flex; /* Para alinear icono y texto */
    align-items: center;
    text-decoration: none; /* Saca el subrayado azul */
}

    .nav-icon-btn:hover {
        color: #e91e63 !important; /* Rosa al pasar el mouse */
    }

/* Ajuste específico para el texto "MENÚ" */
.menu-text {
    font-size: 1rem; /* Tamaño de letra para la palabra MENÚ */
    font-weight: 800; /* Letra bien negrita */
    margin-left: 8px; /* Separación del icono */
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* En celulares muy chicos, achicamos un poco para que entre todo */
@media (max-width: 400px) {
    .nav-icon-btn {
        font-size: 1.4rem !important;
        padding: 0 5px;
    }

    .menu-text {
        font-size: 0.8rem;
        margin-left: 4px;
    }
}

/* --- FOOTER NEGRO --- */
.footer-custom {
    background-color: #000;
    color: #fff;
    padding: 40px 0;
    margin-top: 50px;
}

    .footer-custom a {
        color: #ccc;
        text-decoration: none;
    }


/* --- RESPONSIVIDAD GLOBAL --- */

/* Ajuste automático de títulos en pantallas chicas */
@media (max-width: 768px) {
    h1 {
        font-size: 1.8rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.3rem;
    }

    /* Reducir márgenes laterales en contenedores para ganar espacio */
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Ajuste de botones grandes para que no se salgan de pantalla */
    .btn-lg {
        font-size: 1rem;
        padding: 10px 15px;
    }
}