/* =========================
   GENERAL Y RESET
========================= */
body {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #111;
    color: white;
}

/* HEADER PRINCIPAL */
.header {
    background: #000;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 2px solid #333;
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
}

.logo img {
    height: 60px; /* Ajusta según el tamaño de tu logo */
    display: block;
}

/* ESTILO DE ENLACES GENERAL */
a {
    text-decoration: none;
    color: white;
    transition: 0.3s;
}

a:hover {
    color: #00a8ff; /* Color de énfasis */
}

/* =========================
   MENÚ DESKTOP
========================= */
.menu-desktop ul {
    list-style: none;
    display: flex;
    gap: 25px;
    margin: 0;
    padding: 0;
}

.menu-desktop li {
    position: relative;
}

/* Submenú Desktop */
.menu-desktop .submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #222;
    min-width: 160px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.5);
    border-radius: 4px;
    padding: 10px 0;
    flex-direction: column;
}

.menu-desktop .dropdown:hover .submenu {
    display: flex; /* Se muestra al pasar el mouse */
}

.menu-desktop .submenu li {
    padding: 8px 20px;
}

/* =========================
   MENÚ MÓVIL (Boton Hamburguesa)
========================= */
.hamburguesa {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 10px;
}

.hamburguesa span {
    width: 30px;
    height: 3px;
    background: white;
    border-radius: 2px;
}

.menu-movil {
    display: none; /* Oculto por defecto */
    background: #111;
    width: 100%;
    position: absolute;
    top: 100%; /* Justo debajo del header */
    left: 0;
    border-top: 1px solid #333;
}

.menu-movil ul {
    list-style: none;
    padding: 20px;
    margin: 0;
}

.menu-movil li {
    padding: 15px 0;
    border-bottom: 1px solid #222;
}

.menu-movil .submenu {
    padding-left: 20px;
    border-bottom: none;
}

/* Submenú Móvil - Forzar que esté oculto */
.menu-movil .submenu {
    display: none !important; /* El !important asegura que no herede el flex del desktop */
    list-style: none;
    padding-left: 20px;
    background: #1a1a1a;
}

/* Solo mostrar cuando el padre tiene la clase .active */
.menu-movil .dropdown.active .submenu {
    display: block !important;
}

/* Clase para mostrar con JS */
.menu-movil.activo {
    display: block;
}

/* =========================
   RESPONSIVE (Media Queries)
========================= */

/* De móvil a Tablet/Desktop */
@media (max-width: 768px) {
    .menu-desktop {
        display: none; /* Escondemos el de PC */
    }

    .hamburguesa {
        display: flex; /* Mostramos hamburguesa */
    }
}

/* Solo Desktop */
@media (min-width: 769px) {
    .menu-movil {
        display: none !important; /* Asegura que no se vea el de móvil en PC */
    }
}