/* ==================================== */
/* MENÚ HAMBURGUESA */
/* ==================================== */

/*¡¡¡¡MENU HAMBURGUER!!!!*/

.hamburger {
    display: none; flex-direction: column; cursor: pointer; background: none; border: none;
}

.hamburger span {
    width: 20px; height: 3px; background-color: rgb(255, 255, 255); margin: 3px 0; transition: 0.5s;
}

/* ==================================== */
/* MEDIA QUERY MENÚ RESPONSIVE (max-width: 800px) */
/* ==================================== */

@media screen and (max-width: 800px) {
    .logo { max-width: 130px; }
    
    /* Mostrar botón hamburguesa */
    .hamburger { display: flex; }
    
    /* Cambiar de display none a opacity/visibility para poder hacer fade */
    .nav-menu { 
        display: block; position: absolute; top: 0; left: 0;
        width: 100%; background-color: #333333f5; padding-top: 80px; opacity: 0; visibility: hidden;
        transition: opacity 0.5s ease, visibility 0.5s ease; animation: none;
    }
    
    /* Mostrar menú cuando está activo - con fade */
    .nav-menu.active { opacity: 1; visibility: visible; }
    
    /* Cambiar disposición del menú a vertical */
    .menu { 
        flex-direction: column; padding: 20px; gap: 20px;
        border-radius: 0; align-items: center; border-radius: 0 0 20px 20px; margin: 0;
    }
    
    .menu li { width: 100%; text-align: center; list-style: none; cursor: pointer; }
    
    .menulink { display: block; padding: 10px; color: white; text-decoration: none; }
}

/* ==================================== */
/* MEDIA QUERY PANTALLAS MUY PEQUEÑAS (max-width: 480px) - MENÚ */
/* ==================================== */

@media screen and (max-width: 480px) {
    .menu { gap: 15px; }
}

/* ==================================== */
/* ESTILOS PARA MÓVIL - DROPDOWN HAMBURGUESA (max-width: 800px) */
/* ==================================== */

@media screen and (max-width: 800px) {
    /* Resetear estilos del dropdown para móvil */
    .dropdown { position: static; width: 100%; }
    
    .dropdown-menu { 
        position: static; transform: none; opacity: 1; visibility: visible;
        display: none; /* Usamos display none/block en móvil */
        background: rgba(0, 0, 0, 0.5); margin: 10px auto; min-width: 90%;
        border-radius: 15px; padding: 5px 0; box-shadow: inset -6px 5px 53px 5px rgba(255, 255, 255, 0.1);
        left: auto; transform: none;
    }
    
    /* Mostrar dropdown cuando está activo en móvil */
    .dropdown.active .dropdown-menu { display: block; animation: fadeIn 0.3s ease; }
    
    .dropdown-link { padding: 12px 20px; }
    
    /* La flecha en móvil */
    .dropdown > .menulink::after { content: "▼"; font-size: 12px; margin-left: 8px; transition: transform 0.3s ease; }
    
    /* Rotar flecha cuando está activo */
    .dropdown.active > .menulink::after { transform: rotate(180deg); }
    
    /* Ajustar padding del menú principal en móvil */
    .menu { padding: 20px 10px; }
    
    .menu li { width: 100%; }
    
    /* Hacer que el enlace Solutions ocupe todo el ancho */
    .dropdown > .menulink { display: flex; justify-content: center; align-items: center; width: 100%; }
}

/* ==================================== */
/* MEDIA QUERY PANTALLAS MUY PEQUEÑAS (max-width: 480px) - DROPDOWN */
/* ==================================== */

@media screen and (max-width: 480px) {
    .dropdown-menu { min-width: 95%; }
    .dropdown-link { padding: 10px 15px; }
}

/* ==================================== */
/* RESPONSIVE DEL HEADER (max-width: 800px) */
/* ==================================== */

@media screen and (max-width: 800px) { 
    .headerinformation { padding: 20px; margin-top: 60px; gap: 10px; } 
    .split-text-container { font-size: 34px; }
    .hero { min-height: 50vh; width: 100%; } 
    .buttons { padding: 20px; } 
    .btn-primary, .btn-secondary { padding: 8px 20px; }
}

/* Ajuste responsive formulario */
@media (max-width: 768px) { main{min-height: 850px;} .contact-overlay { width: 90%; top: 50%; } .contact-form-container { padding: 25px; } 
.contact-header h3 { font-size: 1.5rem; } .form-group input, .form-group select, .form-group textarea { padding: 12px 14px; } 
.btn-submit { padding: 12px 24px; } }


/* ==================================== */
/*       FOOTER (max-width: 968px)      */
/* ==================================== */

@media (max-width: 800px){
 .footer{flex-direction: column; gap: 20px; align-items: center;}
 .pagelinks.info{display: none;} }