* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
}

/* Branding BLP */
.main-header {
    background-color: #ffffff; /* Fondo blanco para que el logo resalte */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* Sutil sombra para separarlo del Hero */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20%;
    height: 100px; /* Ajustar de ser necesario */
}

.logo-container {
    display: flex;
    align-items: center;
}

.logo-container .logo {
    height: 60px; /* Logo ligeramente más grande */
    max-width: 100%;
    object-fit: contain;
}

.main-nav {
    display: flex;
}

.main-nav ul {
    list-style: none;
    display: flex;
    gap: 30px; /* Separación entre los modulos del menú */
    align-items: center;
}

.main-nav ul li a {
    text-decoration: none;
    color: #020035; /* Letras oscuras para contrastar con el fondo blanco */
    font-size: 16px;
    font-weight: 500;
    position: relative;
    transition: color 0.3s ease;
}

.main-nav ul li a:hover {
    color: #3DAE2B; /* Acento verde marca BLP */
}

/* Para agregar la flecha hacia abajo en "Modelos" de forma sutil */
.main-nav ul li a .arrow {
    font-size: 10px;
    margin-left: 5px;
    vertical-align: middle;
}

/* Ocultamos el botón de hamburguesa en escritorio */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 20px;
    cursor: pointer;
}

.menu-toggle .bar {
    height: 3px;
    width: 100%;
    background-color: #020035;
    border-radius: 3px;
    transition: all 0.3s ease;
}

/* --- RESPONSIVIDAD (MÓVILES) --- */
@media screen and (max-width: 900px) {
    .main-header {
        flex-direction: row; /* Volvemos a fila para alinear logo y hamburguesa */
        justify-content: space-between;
        padding: 15px 5%;
        height: auto;
        position: relative; /* Para el absolute del menú desplegable */
    }

    .logo-container .logo {
        height: 50px;
    }

    /* Mostrar botón de hamburguesa */
    .menu-toggle {
        display: flex;
    }

    /* Menú desplegable oculto por defecto */
    .main-nav {
         position: absolute;
         top: 100%; /* Justo debajo del header */
         left: 0;
         width: 100%;
         background-color: #ffffff;
         box-shadow: 0 10px 10px rgba(0,0,0,0.05); /* Sombra hacia abajo */
         
         /* Ocultamos y animamos */
         max-height: 0;
         overflow: hidden;
         transition: max-height 0.4s ease-in-out;
         margin-top: 0;
         padding-bottom: 0;
    }

    /* Clase activa para mostrar el menú */
    .main-nav.active {
        max-height: 400px; /* Altura suficiente para que quepan los items */
    }

    .main-nav ul {
        flex-direction: column; /* Apilar items uno sobre otro */
        gap: 0;
        width: 100%;
        margin: 0;
        padding: 10px 0; /* Padding interno del menú */
    }
    
    .main-nav ul li {
        width: 100%;
        text-align: center;
        border-bottom: 1px solid rgba(0,0,0,0.05); /* Línea separadora tenue */
    }

    .main-nav ul li:last-child {
        border-bottom: none;
    }

    .main-nav ul li a {
        display: block;
        padding: 15px 0;
        font-size: 16px;
        white-space: normal;
    }

    /* Animación del botón hamburguesa a "X" */
    .menu-toggle.active .bar:nth-child(1) {
        transform: translateY(8.5px) rotate(45deg);
    }
    .menu-toggle.active .bar:nth-child(2) {
        opacity: 0;
    }
    .menu-toggle.active .bar:nth-child(3) {
        transform: translateY(-8.5px) rotate(-45deg);
    }
}