/* Añade esto a tu archivo _responsive.css */

/* El botón de menú está oculto en el escritorio */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5em;
    color: var(--secondary-color); /* Color del ícono en el encabezado */
    cursor: pointer;
    z-index: 1001; /* Asegura que el botón esté por encima del menú desplegable */
    transition: transform 0.3s ease; /* Transición suave para el ícono */
}

/* Estilo para el ícono de Font Awesome dentro del botón */
.menu-toggle i {
    color: #fff; /* Asegura que el color del ícono sea blanco por defecto */
}

/* ------------------- Media Queries para Móviles ------------------- */
@media (max-width: 768px) {
    .nav-container {
        justify-content: space-between;
    }

    /* Asegura que el logo esté visible en móviles */
    .logo {
        display: block; 
        color: #fff;   
    }

    /* Muestra el botón de menú en móviles */
    .menu-toggle {
        display: block;
    }
    
    /* Cuando el botón tiene la clase 'active', cambia el ícono */
    .menu-toggle.active i::before {
        content: "\f00d"; /* Código Unicode para la 'X' de Font Awesome */
    }

    /* El menú de navegación se deslizará */
    .nav-links {
        display: flex; /* Se mantiene visible pero oculto por el 'transform' */
        flex-direction: column;
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        background-color: var(--secondary-color); /* Usa la variable de color aquí */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        transform: translateY(-100%); /* Oculta el menú por defecto */
        transition: transform 0.3s ease-in-out; /* Transición para el efecto de deslizar */
        z-index: 1000;
    }

    /* Cuando tiene la clase 'active', el menú se desliza a su posición */
    .nav-links.active {
        transform: translateY(0);
    }
    
    /* Estilo para los enlaces del menú móvil */
    .nav-links li {
        width: 100%;
        text-align: center;
        padding: 15px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .nav-links li:last-child {
        border-bottom: none;
    }

    /* Estilo para los enlaces individuales del menú */
    .nav-links a {
      color: #fff;
    }
    
    /* Ajustes para el contenido de la página */
    .hero-section .container {
        flex-direction: column;
        text-align: center;
    }
    
    .hero-content {
        margin-bottom: 20px;
    }

    .hero-content h1 {
        font-size: 2.5em;
    }

    .hero-image img {
        max-width: 80%;
    }
}