/*==================================================
                TABLETS
==================================================*/

@media (max-width:1200px){

    section{
        padding:90px 40px;
    }

    nav{
        padding:20px 40px;
    }

    /* HERO */

    #inicio{
        grid-template-columns:1fr;
        text-align:center;
        gap:70px;
    }

    .hero-left{
        order:1;
    }

    .hero-right{
        order:2;
        display:flex;
        justify-content:center;
    }

    .hero-buttons{
        justify-content:center;
    }

    .cube-container{
        transform:scale(.90);
    }

    /* SOFTWARE */

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

    /* ABOUT */

    #about .about-container{
        grid-template-columns:1fr;
        text-align:center;
        gap:60px;
    }

    .stats{
        justify-content:center;
    }


}


/*==================================================
                CELULARES
==================================================*/

@media (max-width:768px){

  /*========== NAVBAR ==========*/

nav{

    display:flex;
    justify-content:space-between;
    align-items:center;

    position:fixed;

    top:0;
    left:0;

    width:100%;

    padding:20px 25px;

    background:rgba(8,17,31,.95);

    backdrop-filter:blur(15px);

    z-index:1000;

}

.logo{

    font-size:2rem;

    margin:0;

    flex:1;

}

.menu-toggle{

    display:flex;

    align-items:center;
    justify-content:center;

    width:45px;
    height:45px;

    color:white;

    font-size:32px;

    cursor:pointer;

}

    nav ul{

    position:fixed;

    top:80px;
    right:-100%;

    left:auto;

    width:280px;

    height:calc(100vh - 80px);

    background:#08111f;

    display:flex;
    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

    gap:35px;

    padding-top:60px;

    transition:.4s;

}

    nav ul.active{

        right:0;

    }

    #inicio{

    padding-top:140px;

}

    .btn-nav{

        display:none;

    }

    /*========== HERO ==========*/

/*========== HERO ==========*/

/*========== HERO ==========*/

#inicio{

    min-height:auto;
    height:auto;

    display:grid;

    grid-template-columns:1fr;

    gap:60px;

    padding:140px 25px 60px;

    align-items:center;

}

.hero-left{

    width:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

}

.hero-left h1{

    width:100%;

    max-width:340px;

    margin:0 auto 25px;

    font-size:42px !important;

    line-height:1.25;

}

.hero-left h1 span{

    display:inline;
    white-space:normal;

}

.hero-left p{

    max-width:100%;
    font-size:17px;
    line-height:30px;
    text-align:center;

}

.hero-buttons{

    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:18px;

}

.btn-primary,
.btn-secondary{

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

}

.cube-container{

    transform:scale(.60);

}
    /*========== SERVICIOS ==========*/

    .services{

        grid-template-columns:1fr;

    }

    /*========== SOFTWARE ==========*/

    .software-grid{

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

    }

    .software-card{

        min-height:auto;

    }

    .software-card h3{

        font-size:28px;
        line-height:1.2;
        margin:20px;

        word-break:break-word;

    }

    .software-card h3 span{

        display:block;

    }

    .software-card p{

        font-size:16px;
        line-height:1.7;
        margin:0 20px 20px;

    }

    /*========== PROCESO ==========*/

    .process-container{

        flex-direction:column;
        gap:40px;

    }

    .process-line{

        display:none;

    }

    /*========== TECNOLOGÍAS ==========*/

    .tech-network,
    .network-lines{

        display:none;

    }

    .tech-mobile{

        display:grid;

        grid-template-columns:repeat(2,1fr);

        gap:20px;

        margin-top:40px;

    }

    .tech-card{

        background:rgba(255,255,255,.05);

        border:1px solid rgba(255,255,255,.08);

        border-radius:20px;

        padding:25px;

        text-align:center;

        transition:.35s;

    }

    .tech-card:hover{

        transform:translateY(-8px);

        border-color:#2F80ED;

        box-shadow:0 15px 40px rgba(47,128,237,.25);

    }

    .tech-card img{

        width:60px;
        height:60px;

        object-fit:contain;

        border-radius:50%;

        margin-bottom:15px;

    }

    .tech-card h4{

        color:white;

        font-size:18px;

    }

    /*========== TESTIMONIOS ==========*/

    .testimonial-container{

        grid-template-columns:1fr;

    }

    /*========== ABOUT ==========*/

    .about-container{

        grid-template-columns:1fr;
        text-align:center;

    }

    .about-right{

        display:none;

    }

   .stats{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

    width:100%;

    margin-top:40px;

}
.stat{

    width:100%;

    padding:25px 18px;

    text-align:center;

}

.stat h3,
.stat h2{

    font-size:42px;

}

.stat span,
.stat p{

    font-size:15px;

}

@media (max-width:768px){

    #inicio,
    .hero-left,
    .hero-right{

        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;

    }

    .hero-left *{

        max-width:100% !important;

    }

    .hero-left h1{

        font-size:35px !important;
        width:100% !important;

        white-space:normal !important;

        overflow-wrap:anywhere;

    }

      .cierre-container .btn-primary{

       display:inline-flex;
    align-items:center;
    justify-content:center;

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

    padding:18px 30px;

    font-size:18px;
    font-weight:600;

    white-space:nowrap;

    }

}

    .tech-mobile{

        display:grid !important;

        grid-template-columns:repeat(2,1fr) !important;

        gap:18px;

        width:100%;

    }

    .tech-card{

        width:100%;

        padding:20px 15px;

    }

    .tech-card img{

        width:55px;
        height:55px;

    }

    .tech-card h4{

        font-size:18px;

    }

}

@media (max-width:420px){

    .tech-mobile{

        grid-template-columns:repeat(2,1fr);

        gap:12px;

    }

    .tech-card{

        padding:15px 10px;

    }

    .tech-card img{

        width:45px;
        height:45px;

    }

    .tech-card h4{

        font-size:16px;

    }

}




/*==================================================
            CELULARES PEQUEÑOS
==================================================*/

@media(max-width:480px){

    section{

        padding:60px 20px;

    }

    nav{

        padding:18px;

    }

    h1{

        font-size:44px !important;

    }

    h2{

        font-size:30px !important;

    }

    p{

        font-size:15px;

    }

    .hero-buttons{

        width:100%;

    }

    .btn-primary,
    .btn-secondary{

        width:100%;

    }

    .cube-container{

        transform:scale(.55);

    }

    .tech-mobile{

        grid-template-columns:1fr;

    }

    .software-card h3{

        font-size:24px;

    }
    .stats{

    grid-template-columns:repeat(2,1fr);

    gap:15px;

}

.stat{

    padding:20px 15px;

}

.stat h3,
.stat h2{

    font-size:34px;

}

.hero-left h1{

    font-size:34px !important;
    line-height:1.2;

}

}

/*=========================================
        QUIÉNES SOMOS
=========================================*/

@media(max-width:992px){

    #company{

        grid-template-columns:1fr;

        gap:60px;

        text-align:center;

    }

    .company-left{

        display:flex;

        flex-direction:column;

        align-items:center;

    }

    .company-left h2{

        font-size:42px;

    }

}

@media(max-width:768px){

    #company{

        padding:100px 25px;

    }

    .company-left h2{

        font-size:34px;

    }

    .company-left p{

        font-size:16px;

        line-height:30px;

    }

}

/*=========================================
        HISTORIA
=========================================*/

@media(max-width:768px){

    #history{

        padding:100px 25px;

    }

    .timeline::before{

        display:none;

    }

    .timeline-item{

        flex-direction:column;

        align-items:center;

        text-align:center;

        margin-bottom:45px;

    }

    .timeline-content{

        width:100%;

    }

}

/*==============================
    MISION Y VISION
===============================*/

@media(max-width:768px){

    .mission-grid{

        grid-template-columns:1fr;

        gap:30px;

    }

    .mission-card{

        padding:35px;

        text-align:center;

    }

    .mission-icon{

        margin:0 auto 25px;

    }

    .mission-card h3{

        font-size:28px;

    }

    .mission-card p{

        font-size:16px;

        line-height:28px;

    }

    .mission-card li{

        justify-content:center;

        font-size:16px;

    }

}

/*==========================
        VALORES
===========================*/

@media(max-width:768px){

    .values-grid{

        grid-template-columns:1fr;

    }

    .value-card{

        padding:35px;

    }

}

@media(max-width:768px){

    #cierre{

        padding:90px 20px;

    }

    .cierre-container{

        padding:50px 30px;

    }

    .cierre-container h2{

        font-size:38px;

    }

    .cierre-container p{

        font-size:16px;

        line-height:30px;

    }

    .firma h3{

        font-size:24px;

    }

}