/* -------------------------------------------------- */
/* MENU RESPONSIVE - VERSIÓN MEJORADA */
/* -------------------------------------------------- */

/* Punto de quiebre ajustado para desktop (1024px) */
@media screen and (max-width: 1100px) {
    .menu-toggle {
        display: flex;
        align-items: center;
    }
    
    .nav-links {
        position: fixed;
        top: 0;
        right: -300px;
        width: 280px;
        height: 100vh;
        background-color: #a7a7a7;
        flex-direction: column;
        padding: 70px 0 30px;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Transición más suave */
        overflow-y: auto;
        z-index: 9500;
    }
    
    .nav-active {
        right: 0 !important;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2);
    }
    
    .overlay-active {
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .nav-links li {
        width: 100%;
        height: auto;
    }
    
    .nav-links li a {
        border-right: none;
        border-bottom: 1px solid #E7E7E7;
        width: 100%;
        padding: 15px 20px;
        height: auto;
        transition: background-color 0.3s ease; /* Efecto hover suave */
    }
    
    .nav-links li a:hover {
        background-color: rgba(255,255,255,0.1);
    }
    
    .nav-links li ul {
        position: static;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease;
        display: block;
    }
    
    .nav-links li.sub-menu.active ul {
        max-height: 500px;
    }
    
    .nav-links li ul li {
        width: 100%;
    }
    
    .nav-links li ul li a {
        padding-left: 40px;
    }
    
    body.menu-open {
        overflow: hidden;
    }
    
    .nav-links li.sub-menu a svg {
        transition: transform 0.3s ease; /* Animación del ícono */
    }
    
    .nav-links li.sub-menu.active a svg {
        transform: rotate(180deg);
    }
}

/* Transición más suave para el menú en tablets */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .nav-links {
        width: 300px; /* Un poco más ancho para tablets */
        padding-top: 80px; /* Más espacio arriba */
    }
    
    .nav-links li a {
        padding: 18px 25px; /* Más espaciado para tablets */
    }
}

/* Optimización para móviles en orientación horizontal */
@media screen and (max-width: 1024px) and (orientation: landscape) {
    .nav-links {
        padding-top: 60px;
        overflow-y: auto;
        max-height: 100vh;
    }
}
@media screen and (max-width: 768px) {
    * {
        font-size: 3vw;
    }

    .main{
        padding-top: 70px;
    }
    .hero, .banner2, .info, .info2, .container, .banner, .page_container_blue{
        flex-direction: column;
    }
    .page_container_blue{
        height: 70dvh;
        justify-content: flex-start;
        padding: 5% 0;
        background-position: center  bottom;
    }
    .hero{
        height: auto;
        padding: 5% 0 0 0;
        align-items: center;

        .box-hero{
            height:40dvh;
        
           }
    }

    .hero .inner, .container, .p_tab{
        width: 80%;
        height: auto;
    }

    .texbox{
        gap:0.2rem;
    }
 
    .container-white{
        align-items: center;
        justify-content: center;
        width: 100%;
    }
    .inn{
        justify-content: center;
        max-width: 100%;
        overflow-x: hidden;
    }

    .box2, .box3{
        width: 100%;
        background-position: top center;
        height: 30vh;
    }
    p.small, .client-grid{
        width: 100%;
    }
    .box3{
        width: 100%;
        background-position: top right;
        height: 30vh;
    }
    .content{
        text-align: center;
        align-items: center;
        justify-content: center;
        padding: 5% 0;
    }
    .content2{
        width: 80%;
    }
    .p-about, .p-clients{
        align-items: center;
        justify-content: center;
        padding-top:20vh;
    }

    .modal-content{
        width:90dvw;
    }
}



/* Tabletas pequeñas (481px-768px) */
@media screen and (min-width: 481px) and (max-width: 768px) {
    * {
        font-size: 2.5vw;
    }
    
    .hero .inner, .container, .p_tab {
        width: 75%;
    }

    
    
    .content2 {
        width: 75%;
    }
    
    .box2, .box3 {
        height: 35vh;
    }
}


@media screen and (min-width: 769px) and (max-width: 1024px) {
    * {
        font-size: 1.8vw;
    }
    
    .page_container_blue {
        height: 80dvh;
    }
    .hero{
        height: auto;
        padding: 5% 0 0 0;
        flex-direction: column;
        align-items: center;

        .box-hero{
            height:40dvh;
        
           }
    }
    .hero .inner, .container, .p_tab {
        width: 65%;
    }
    
    .content2 {
        width: 65%;
    }
    
    .box2, .box3 {
        height: 40vh;
    }
    
    /* Menú para tablets - versión intermedia */
    .nav-links {
        right: -300px;
        width: 250px;
    }
}

/* Escritorios pequeños (1025px-1440px) */
@media screen and (min-width: 1025px) and (max-width: 1440px) {
    * {
        font-size: 1.1vw;
    }
}

/* Grandes pantallas (+1441px) */
@media screen and (min-width: 1441px) {
    * {
        font-size: 0.9vw;
    }
}

/* Optimización para orientación horizontal en móviles */
@media screen and (max-width: 768px) and (orientation: landscape) {
    .hero, .page_container_blue {
        height: auto;
        min-height: 100dvh;
    }
    
    .box2, .box3 {
        height: 50vh;
    }
    
    .nav-links {
        padding-top: 50px;
    }
}

/* Transiciones fluidas para elementos que cambian */
@media screen and (max-width: 1024px) {
    .container-white, .inn, .content {
        transition: all 0.3s ease;
    }
    
    .box2, .box3 {
        transition: height 0.4s ease, background-position 0.4s ease;
    }
    
    .modal-content {
        transition: width 0.3s ease;
    }
}

/* Mejora de accesibilidad para reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
    
    .nav-links {
        transition: none !important;
    }
}