@media (min-width:769px){

    .mobile-nav{

        display:none !important;
    }

}



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

@media(max-width:1199px){

.hero-grid{
    
     display:flex;

    flex-direction:column;

    grid-template-columns:1fr;
}

.hero-content{

    padding-top:20px;

    padding-bottom:10px;
    
    max-width:100%;
}

.hero-title{

    font-size:50px;
}


}

/* ==================================================
   MOBILE
================================================== */

@media(max-width:767px){

.hero{

    padding-top:30px;
}

.hero-content{

    padding-top:20px;

    padding-bottom:10px;
    
    max-width:100%;
}

.hero-title{

    font-size:35px;

    line-height:1.05;
}

.hero-description{

    font-size:20px;
}

.hero-buttons{

    flex-direction:column;
}

.btn-primary,
.btn-secondary{

    width:100%;
}

.hero-features{

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

    gap:25px;
}

.hero-image{

    margin-top:20px;
}

.hero-trust{

    margin-top:20px;
}

}

/* ==================================================
   PLANS - TABLET
================================================== */

@media(max-width:1199px){

    .plans{

        padding:80px 0;
    }

    .plans-title{

        font-size:60px;
    }

    .plans-description{

        font-size:20px;
    }

    .plans-grid{

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

        max-width:820px;

        margin:0 auto;
    }

    .plan-card{

        min-height:auto;
    }

    .plan-card.featured{

    padding-top:40px;
   
    }
    
    .plans-benefits{

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

    .benefit-item:nth-child(2){

        border-right:none;
    }

}

/* ==================================================
   PLANS - MOBILE
================================================== */

@media(max-width:767px){

    .plans{

        padding:50px 0;
    }
    
    .plans-dots{

        display:flex;

        justify-content:center;

        gap:10px;

        margin-top:25px;
    }

    .plans-dots span{

        width:10px;

        height:10px;

        border-radius:50%;

        background:#d1d5db;
    }

    .plans-dots span.active{

        background:var(--primary);
    }

    .plan-badge{
        
         top:-9px;
    }
    
    
    .plans-header{

        margin-bottom:40px;
    }

    .plans-title{

        font-size:35px;

        line-height:1.05;
    }

    .plans-description{

        font-size:18px;

        line-height:1.6;
    }

    .plans-grid::-webkit-scrollbar{

    display:none;
    }

    .plans-grid{
        
        scrollbar-width:none;

        display:flex;

        overflow-x:auto;

        gap:20px;

        padding-bottom:10px;

        scroll-snap-type:x mandatory;

        -webkit-overflow-scrolling:touch;
    }

    /* =========================================
       PLAN CARD
    ========================================= */

    .plan-card{
        
        flex:0 0 85%;

        scroll-snap-align:center;
        
        padding:24px;

        display:grid;

        grid-template-areas:
        "header price"
        "divider-bottom divider-bottom"
        "features features"
        "button button";

        grid-template-columns:1fr auto;
    }

    /* =========================================
       HEADER
    ========================================= */

    .plan-header{

        grid-area:header;

        gap:14px;

        margin-bottom:0;
    }

    .plan-icon{

        width:50px;

        height:50px;
    }

    .plan-icon img{

        width:34px;

        height:34px;
    }

    .plan-name{

        font-size:16px;
    }

    .speed-value{

        font-size:40px;
    }

    .speed-unit{

        font-size:16px;

        margin-bottom:8px;
    }

    /* =========================================
       PRICE
    ========================================= */

    .plan-price{

        grid-area:price;

        margin:0;

        padding:0;

        border:none;

        display:flex;

        align-items:center;

        justify-content:flex-end;
    }

    .currency{

        font-size:18px;

        margin-bottom:8px;
    }

    .amount{

        font-size:40px;

        line-height:1;
    }

    /* =========================================
       DIVIDERS
    ========================================= */

    .divider-top{

        display:none;
    }

    .divider-bottom{

        grid-area:divider-bottom;

        margin:20px 0;
    }

    /* =========================================
       FEATURES EN 2 COLUMNAS
    ========================================= */

    .plan-features{
        
        margin-bottom:24px;

        grid-area:features;

        display:grid;

        grid-template-columns:1fr 1fr;

        column-gap:25px;
    }

    .plan-features li{

        font-size:15px;

        gap:10px;
    }

    .plan-features li img{

        width:22px;

        height:22px;
    }

    /* =========================================
       BUTTON
    ========================================= */

    .plan-button{

        grid-area:button;

        height:56px;

        font-size:15px;
    }

    /* =========================================
       BENEFICIOS INFERIORES
    ========================================= */

    .plans-benefits{

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

        padding:4px;

        gap:10;
    }

    .benefit-item{

        border-right:none !important;

        gap:5px;

        padding:16px;
    }
    
    .benefit-item img{

        width:34px;

        height:34px;
}

    .benefit-item:nth-child(1),
    .benefit-item:nth-child(2){

        border-bottom:1px solid #e5e7eb;
    }

    .benefit-item h4{

        font-size:16px;
    }

    .benefit-item p{

        font-size:14px;
    }

    .plans-note{

        font-size:13px;
    }

}



/* =====================================================
  TIPOS DE NEGOCIO -  TABLET
===================================================== */

@media(max-width:1199px){

    .business-types{

        padding:70px 0;
    }

    .section-header{

        margin-bottom:60px;
    }

    .section-header h2{

        font-size:2.8rem;
    }

    .business-grid{

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

        gap:24px;
    }

    .business-card > img{

        height:240px;
    }
    
    .business-icon{

        width:70px;

        height:70px;

        margin-top:-42px;
    }


}


/* =====================================================
   TIPOS DE NEGOCIO - MOBILE
===================================================== */

@media(max-width:767px){

    .business-types{

        padding:50px 0;
    }

    .section-header{

        margin-bottom:40px;
    }

    .section-tag{

        font-size:.75rem;

        letter-spacing:1.5px;
    }

    .section-header h2{

        font-size:2rem;

        line-height:1.2;
    }

    .section-header p{

        font-size:.95rem;

        line-height:1.7;
    }


/* ==================================================
   BUSINESS SLIDER
================================================== */

.business-grid{

    display:flex;

    overflow-x:auto;

    gap:20px;

    scroll-snap-type:x mandatory;

    -webkit-overflow-scrolling:touch;

    padding-bottom:10px;
}

.business-grid::-webkit-scrollbar{

    display:none;
}

.business-grid{

    scrollbar-width:none;
}

.business-card{

    flex:0 0 85%;

    scroll-snap-align:center;
}


.business-dots{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    margin-top:20px;
}

.business-dots span{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#d1d5db;
}

.business-dots span.active{

    background:var(--primary);
}









    .business-grid{

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

        gap:16px;
    }

    .business-card{

        border-radius:18px;
    }

    .business-card > img{

        height:120px;
    }

    .business-card-footer{

        display:flex;

        align-items:center;

        gap:10px;

        padding:14px;
    }

    .business-icon{

        width:46px;

        height:46px;

        margin-top:-28px;
    }

    .business-icon img{

        width:30px;

        height:30px;
    }

    .business-card-footer h3{

        font-size:.85rem;

        line-height:1.2;

        text-align:left;
    }

}


/* =====================================================
   WHY APU - TABLET
===================================================== */

@media(max-width:1199px){

    .why-apu{

        padding:80px 0;
    }

    .why-apu-header{

        margin-bottom:60px;
    }

    .why-apu-header h2{

        font-size:2.5rem;
    }

    .why-apu-grid{

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

        gap:50px;
    }

    .why-apu-card{

        padding:0 20px;
    }

    .why-apu-card::after{

        display:none;
    }

}

/* =====================================================
   WHY APU - MOBILE
===================================================== */

@media(max-width:767px){

    .why-apu{

        padding:50px 0;
    }

    .why-apu-header{

        margin-bottom:40px;
    }

    .why-apu-header h2{

        font-size:2rem;
    }

    .why-apu-grid{

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

        gap:30px 20px;
    }

    .why-apu-card{

        padding:0;
    }

    .why-apu-card img{

        width:42px;

        height:42px;

        margin-bottom:14px;
    }

    .why-apu-card h3{

        font-size:1.05rem;

        margin-bottom:10px;
    }

    .why-apu-card p{

        font-size:.85rem;

        line-height:1.6;
    }

}


/* =====================================================
   COVERAGE - TABLET
===================================================== */

@media(max-width:1199px){

    .coverage{

        padding:70px 0;
    }

    .coverage-content{

        display:block;
    }

    .coverage-info{

        max-width:none;
    }

    .coverage-map{

        display:none;
    }

}


/* =====================================================
   COVERAGE - MOBILE
===================================================== */

@media(max-width:767px){

    .coverage{

        padding:50px 0;
    }

    .coverage-info{

        max-width:none;
    }

    .coverage-info h2{

        font-size:2.4rem;
    }

    .coverage-description{

        font-size:1rem;

        line-height:1.7;

        margin-bottom:30px;
    }

    .coverage-features{

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

        gap:20px;

        margin-bottom:40px;
    }

    .coverage-feature{

        padding:0 6px;
    }

    .coverage-feature::after{

        display:none;
    }

    .coverage-feature-icon{

        width:52px;

        height:52px;

        margin-bottom:12px;
    }

    .coverage-feature-icon img{

        width:34px;

        height:34px;
    }

    .coverage-feature p{

        font-size:.85rem;

        line-height:1.4;
    }

    .coverage-feature strong{

        font-size:1.5rem;
    }

    .coverage-action{

        margin-top:0;
    }

    .coverage-action-btn{

        width:100%;

        justify-content:center;
    }

    .coverage-map{

        display:none;
    }
}


/* =====================================================
   SOLUTIONS - TABLET
===================================================== */

@media(max-width:1199px){

    .solutions{

        padding:70px 0;
    }



    .solutions-grid{

        grid-template-columns:1fr;

        gap:30px;
    }

    .solutions-intro{

        text-align:left;
    }

    .solutions-line{

        margin:0 0 24px;
    }

    .solutions-intro p{

        max-width:600px;

        margin:auto;
        
        text-align:left;
    }

}





/* =====================================================
   SOLUTIONS - MOBILE
===================================================== */

@media(max-width:767px){

    .solutions{

        padding:50px 0;
    }

    .solutions-intro h2{

        font-size:2.4rem;
    }

    .solution-card{
        
        min-height:auto;
        
        padding:24px 20px;
    }

    .solution-icon{

        width:90px;

        height:90px;
    }

    .solution-icon img{

        width:72px;

        height:72px;
    }

    .solution-card h3{

        font-size:1.4rem;
    }

}

/* ==================================================
   CONTACTO - TABLET
================================================== */

@media (max-width:1199px){

    .contact{

        padding:90px 0;
    }

    .contact-grid{

        grid-template-columns:1fr;

        gap:48px;
    }

    .contact-info{

        padding-right:0;

        border-right:none;
    }

    .contact-heading{

        font-size:2.75rem;
    }

    .contact-title{

        max-width:none;

        font-size:2rem;
    }

    .contact-description{

        max-width:100%;
    }

    .form-grid{

        grid-template-columns:1fr;
    }

    .contact-form-wrapper{

        padding:40px;
    }
}

/* ==================================================
   CONTACTO - MOBILE
================================================== */

@media (max-width:767px){

    .contact{

        padding:50px 0;
    }

    .contact-grid{

        gap:40px;
    }

    .contact-heading{

        font-size:2.5rem;

        margin-bottom:16px;
    }

    .contact-line{

        margin-bottom:24px;
    }

    .contact-title{

        font-size:1.75rem;

        margin-bottom:12px;
    }

    .contact-description{

        margin-bottom:32px;

        font-size:1rem;
    }

    .contact-items{

        gap:20px;
    }

    .contact-item{

        gap:16px;
    }

    .contact-icon{

        width:56px;

        height:56px;

        border-radius:14px;
    }

    .contact-icon img{

        width:28px;

        height:28px;
    }

    .contact-content h4{

        font-size:1rem;

        margin-bottom:4px;
    }

    .contact-content span{

        font-size:.95rem;

        word-break:break-word;
    }

    .contact-form-wrapper{

        padding:28px 24px;

        border-radius:20px;
    }

    .form-title{

        font-size:1.5rem;
    }

    .form-subtitle{

        margin-bottom:24px;

        font-size:.95rem;
    }

    .form-grid{

        gap:16px;

        margin-bottom:16px;
    }

    .contact-form input,
    .contact-form select,
    .contact-form textarea{

        padding:16px;

        font-size:16px;
    }

    .contact-form textarea{

        min-height:140px;
    }

    .btn-contact{

        height:58px;

        font-size:1rem;
    }
}

/* ==================================================
   CONTACTO - MOBILE SMALL
================================================== */

@media (max-width:480px){

    .contact-heading{

        font-size:2.2rem;
    }

    .contact-title{

        font-size:1.5rem;
    }

    .contact-form-wrapper{

        padding:24px 20px;
    }

    .contact-icon{

        width:52px;

        height:52px;
    }

    .contact-content h4{

        font-size:.95rem;
    }

    .contact-content span{

        font-size:.9rem;
    }
}


/* =====================================================
   FOOTER - TABLET
===================================================== */

@media(max-width:1199px){

    .footer{

        padding:70px 0 30px;
    }

    .footer-top{

        grid-template-columns:1fr;

        gap:40px;
    }

    .footer-services{

        padding-left:0;

        border-left:none;
    }

    .footer-book{

        border-left:none;

        justify-content:flex-start;
    }

    .footer-bottom{

        flex-direction:column;

        gap:20px;

        text-align:center;
    }

}

/* =====================================================
   FOOTER - MOBILE
===================================================== */

@media(max-width:767px){

    .footer{

        padding:50px 0 25px;
    }

    .footer-brand img{

        width:150px;
    }

    .footer-legal{

        flex-direction:column;

        gap:10px;
    }

    .footer-legal span{

        display:none;
    }

}