/* --- Estilos Base (Escritorio) --- */

/* Ocultamos el icono hamburguesa en pantallas grandes */
.hamburger {
    display: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px; /* Espacio entre las líneas */
}

/* Estilo de las líneas del icono */
.hamburger span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #333; /* Color de las líneas */
    transition: all 0.3s ease;
}

/* El menú de navegación se ve normal en fila */
.nav {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Ocultar dropdown content por defecto */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Mostrar dropdown al pasar el mouse (versión escritorio) */
.dropdown:hover .dropdown-content {
    display: block;
}


/* --- Estilos Móviles (Max-width 768px) --- */
@media (max-width: 768px) {
    
    /* Mostrar la hamburguesa */
    .hamburger {
        display: flex; 
        z-index: 1001; /* Para que quede por encima del menú abierto */
    }

    /* Ocultar el menú de navegación por defecto */
    .nav {
        display: none; /* Oculto inicialmente */
        position: absolute;
        top: 70px; /* Ajusta esto según la altura de tu header */
        left: 0;
        width: 100%;
        background-color: white; /* O el color de fondo de tu header */
        flex-direction: column; /* Elementos uno debajo del otro */
        padding: 20px 0;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        z-index: 1000;
    }

    /* ESTA ES LA CLAVE: Cuando JS agrega la clase 'active', mostramos el menú */
    .nav.active {
        display: flex;
    }

    /* Ajustes para los items del menú en móvil */
    .nav a, .nav .header-item {
        display: block;
        padding: 15px;
        text-align: center;
        width: 100%;
    }

    /* Estilos para el dropdown en móvil (usando tu lógica de JS) */
    .dropdown-content {
        position: relative; /* Ya no flota, sino que empuja el contenido */
        box-shadow: none;
        background-color: #f0f0f0;
    }

    /* Tu JS agrega la clase 'active' al .dropdown también */
    .dropdown.active .dropdown-content {
        display: block;
    }
}