/*==========================================
            MENU TABLET
==========================================*/

@media(max-width:1100px){

    .nav-links{
        position:fixed;
        top:90px;
        right:-100%;
        width:80%;
        max-width:400px;
        height:calc(100vh - 90px);
        background:white;
        flex-direction:column;
        align-items:center;
        justify-content:flex-start;
        padding-top:50px;
        gap:25px;
        box-shadow:-10px 0 30px rgba(0,0,0,.12);
        transition:.4s;
        overflow-y:auto;
    }

    .nav-links.active{
        right:0;
    }

    .btn-nav{
        display:none;
    }

    .menu-toggle{
        display:flex;
        align-items:center;
        justify-content:center;
    }

}

/*==========================================
        SERVICIOS LAPTOP PEQUEÑA
==========================================*/

@media(max-width:1050px){

    .services .services-grid{
        grid-template-columns:1fr;
        gap:26px;
    }

}

/*==========================================
            TABLET
==========================================*/

@media(max-width:992px){

    .navbar{
        padding:20px 30px;
    }

    .hero{
        flex-direction:column;
        text-align:center;
        gap:60px;
    }

    .hero-content,
    .hero-image{
        width:100%;
    }

    .hero-buttons,
    .hero-data{
        justify-content:center;
        flex-wrap:wrap;
    }

    .about-row{
        grid-template-columns:1fr;
        gap:50px;
    }

    .about-row.reverse{
        direction:ltr;
    }

    .team-grid{
        grid-template-columns:repeat(2,1fr);
    }

    /* ==========================================
        EQUIPO - TABLET
========================================== */

.team{
    margin:60px auto 25px;
    padding:70px 30px 80px;
    border-radius:30px;
}

.team-showcase{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px;
    margin-top:45px;
}

.team-person{
    padding:25px 18px 22px;
}

.team-person-photo{
    width:135px;
    height:135px;
}


/* MODAL DEL EQUIPO */

.team-modal{
    padding:25px;
}

.team-modal-card{
    width:min(820px, 96%);
    padding:38px 32px;

    grid-template-columns:230px minmax(0,1fr);
    gap:32px;
}

.team-detail-photo{
    min-height:250px;
}

.team-detail-photo-bg{
    width:215px;
    height:215px;
}

.team-detail-photo img{
    width:185px;
    height:185px;
}

.team-detail-content h3{
    font-size:1.65rem;
}

.team-detail-description{
    font-size:.92rem;
    line-height:1.7;
}

.team-detail-contact{
    grid-template-columns:1fr;
    gap:10px;
    margin-top:20px;
}

    .stats-container{
        grid-template-columns:repeat(4,1fr);
        gap:20px;
    }

    .stat-box h3{
        font-size:36px;
    }

    .stat-box p{
        font-size:13px;
    }

    .footer-container{
        grid-template-columns:1fr 1fr;
    }

}

/*==========================================
            CELULAR
==========================================*/

@media(max-width:768px){

    .navbar{
        padding:18px 20px;
    }

    .logo img{
        width:50px;
    }

    .logo-text h2{
        font-size:28px;
    }

    .logo-text p{
        font-size:8px;
        letter-spacing:2px;
    }

    .nav-links{
        top:85px;
        width:85%;
        height:calc(100vh - 85px);
        padding-top:40px;
        gap:22px;
    }

    .hero{
        padding:120px 7% 80px;
    }

    .hero h1{
        font-size:42px;
    }

    .hero p{
        font-size:16px;
    }

    .hero-buttons{
        flex-direction:column;
    }
    
    .hero-image{
        transform: translateY(0);
        margin-top:20px;
    }

    .data-card{
        width:150px;
    }

    .about{
        padding:90px 7%;
    }

    .about-info h3{
        font-size:30px;
    }

    .number{
        font-size:70px;
    }

    .services,
    .team{
        padding:90px 7%;
    }

    /* SERVICIOS EN CELULAR */

    .services .services-grid{
        grid-template-columns:1fr;
        gap:22px;
        margin-top:42px;
    }

    .services .service-card{
        padding:27px 23px;
        border-radius:22px;
    }

    .services .service-top{
        margin-bottom:21px;
    }

    .services .service-icon{
        width:58px;
        height:58px;
        border-radius:16px;
    }

    .services .service-icon i{
        font-size:23px;
    }

    .services .service-code{
        padding:6px 11px;
        font-size:0.68rem;
    }

    .services .service-card h3{
        font-size:1.3rem;
    }

    .services .service-card h4{
        padding:12px 14px;
        font-size:0.92rem;
        line-height:1.55;
    }

    .services .service-card p{
        font-size:0.9rem;
        line-height:1.75;
    }

    .team-grid,
    .clients-container,
    .footer-container{
        grid-template-columns:1fr;
    }

    /* ==========================================
        EQUIPO - CELULAR
========================================== */

.team{
    margin:40px auto 20px;
    padding:55px 18px 65px;
    border-radius:24px;
}

.team-showcase{
    grid-template-columns:1fr;
    gap:18px;
    margin-top:35px;
}

.team-person{
    padding:24px 18px 20px;
    border-radius:22px;
}

.team-person-photo{
    width:125px;
    height:125px;
    margin-bottom:17px;
}

.team-person-text h3{
    font-size:1.08rem;
}

.team-person-text span{
    font-size:.84rem;
}

.team-person-arrow{
    margin-top:15px;
}


/* ==========================================
        MODAL EQUIPO - CELULAR
========================================== */

.team-modal{
    padding:15px;
    align-items:center;
}

.team-modal-card{
    width:100%;
    max-width:520px;

    padding:50px 20px 25px;

    grid-template-columns:1fr;
    gap:15px;

    border-radius:24px;

    max-height:calc(100dvh - 30px);
    overflow-y:auto;
    overflow-x:hidden;
}

.team-modal-close{
    top:12px;
    right:12px;

    width:40px;
    height:40px;

    font-size:18px;
}

.team-detail-photo{
    min-height:auto;
    padding-top:5px;
}

.team-detail-photo-bg{
    width:170px;
    height:170px;
}

.team-detail-photo img{
    width:150px;
    height:150px;
    border-width:5px;
}

.team-detail-content{
    text-align:center;
}

.team-detail-label{
    margin-bottom:10px;
    font-size:.68rem;
}

.team-detail-content h3{
    font-size:1.4rem;
    line-height:1.25;
}

.team-detail-position{
    font-size:.92rem;
    margin-bottom:14px;
}

.team-detail-description{
    font-size:.86rem;
    line-height:1.65;
    text-align:center;
}

.team-detail-contact{
    grid-template-columns:1fr;
    gap:10px;
    margin-top:18px;
    text-align:left;
}

.team-detail-contact > a{
    padding:11px 12px;
}

.team-contact-icon{
    flex:0 0 35px;
    width:35px;
    height:35px;
}

.team-detail-contact strong{
    font-size:.76rem;
}

    .stats{
        padding:60px 5%;
    }

    .stats-container{
        grid-template-columns:repeat(2,1fr);
        gap:15px;
    }

    .stat-box{
        padding:15px 5px;
    }

    .stat-box h3{
        font-size:32px;
    }

    .stat-box p{
        font-size:12px;
    }

    .contact{
        padding:100px 7%;
    }

    .contact-content h2{
        font-size:34px;
    }

    .contact-buttons{
        flex-direction:column;
        align-items:center;
    }

    .footer-container{
        text-align:center;
    }

    .footer-logo{
        justify-content:center;
    }

    .whatsapp-float{
        width:55px;
        height:55px;
        font-size:29px;
        right:20px;
        bottom:20px;
    }

    .scroll-top{
        width:50px;
        height:50px;
        right:20px;
        bottom:90px;
    }

    .diagnostico-inicio-modal{
    align-items:flex-start;
    padding:15px;
}

.diagnostico-inicio-contenido{
    width:100%;
    max-height:calc(100vh - 30px);

    margin:auto 0;

    padding:38px 22px 28px;

    border-radius:22px;
}

.diagnostico-inicio-icono{
    width:60px;
    height:60px;

    margin-bottom:18px;

    font-size:26px;
}

.diagnostico-inicio-contenido h2{
    font-size:24px;
    line-height:1.3;
}

.diagnostico-inicio-contenido p{
    font-size:15px;
    line-height:1.7;
}

.diagnostico-inicio-duracion{
    margin:22px 0;
    font-size:15px;
}

.diagnostico-inicio-boton{
    width:100%;
    padding:15px 20px;
}
}

/* ==========================================
   FOOTER LEGAL - RESPONSIVE
========================================== */

@media (max-width: 768px) {

    .footer-legal {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 14px;
        margin-bottom: 25px;

        width: 100%;
    }

    .footer-legal a {
        display: block;

        width: 100%;
        max-width: 280px;

        color: #cbd5e1;
        font-size: 15px;
        line-height: 1.4;

        text-align: center;
        white-space: normal;
    }

}