/*==================================================
            RESPONSIVE
            COMPRE EN USA - PERÚ SAC
==================================================*/


/*==================================================
                TABLETS
≤ 992px
==================================================*/

@media (max-width:992px){

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

    .header{
    
        position:fixed;
    
        top:0;
    
        left:0;
    
        width:100%;
    
        z-index:99999;
    
        background:#FFF;
    
        box-shadow:0 4px 18px rgba(0,0,0,.10);
    
    }


    .header .container{
    
        height:70px;
    
        display:flex;
    
        align-items:center;
    
        justify-content:space-between;
    
    }
    

    .menu-toggle{
    
        width:42px;
        height:42px;
        font-size:22px;
    
    }
    
    .menu-toggle{
        display:flex !important;
        align-items:center;
        justify-content:center;
        width:48px;
        height:48px;
        border:none;
        background:transparent;
        cursor:pointer;
        font-size:24px;
        color:#0A2342;
    }
    
    .menu{
        display:none;
    }
    
    .btn-intranet{
        display:none !important;
        
        width:100%;
    
        margin-top:16px;
    
        border-radius:16px;        
    }
    
    
/*
.container{

    width:100%;
    max-width:100%;
    padding-left:16px;
    padding-right:16px;

}
*/
    
    .tracking-card{
        width:100%;
        max-width:100%;
    }
    
    .tracking-form{
        flex-direction:column;
    }
    
    .tracking-form button{
        width:100%;
    }
    
    
    .hero{
    
        height:auto;
        min-height:680px;
        background-position:center;
    
    }
    
    .hero-content{
    
        height:auto;
        padding:40px 0 120px;
        align-items:flex-start;
    
    }
    
    .hero-text{
        max-width:100%;
    }
    
    .hero-text h1{
    
        font-size:clamp(42px, 10vw, 60px);
        line-height:1.1;
        margin-bottom:20px;
    
    }
    
    .hero-text p{
    
        font-size:18px;
        line-height:1.6;
        margin-bottom:30px;
    
    }


    .tracking-section{
        margin-top:-25px;
    }
    
    
    .tracking-card{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:20px;
    }
    
    .tracking-title{
        white-space:normal;
        justify-content:center;
        text-align:center;
    }
    
    .tracking-form{
        width:100%;
    }
    
    .tracking-form input{
        width:100%;
    }
    
    .tracking-form button{
        width:100%;
    }
    
    
    .tracking-form button{
        width:100%;
        height:54px;
        font-size:16px;
    }
    
    .tracking-form{
        gap:12px;
    }
    
    
    /*====================================
            ¿CÓMO FUNCIONA?
    ====================================*/
    
    .how{
        padding:70px 0;
    }
    
    .steps{
        display:grid;
        grid-template-columns:1fr !important;
        gap:50px;
        max-width:340px;
        margin:0 auto 20px;
    }
    
    .steps::before{
        display:none;
    }
    
    .step{
        max-width:340px;
        margin:auto;
    }
    
    .step-icon{
        width:90px;
        height:90px;
        font-size:38px;
    }
    
    .step h3{
        font-size:24px;
    }
    
    .step p{
        font-size:16px;
        line-height:1.7;
        margin-top:15px;
    }
    
    
    /*====================================
            TIEMPOS DE TRÁNSITO
    ====================================*/
    
    .transit{
        padding:70px 0;
    }
    
    .transit-intro{
        font-size:18px;
        line-height:1.7;
        margin-bottom:45px;
    }
    
    .transit-grid{
        display:grid;
        grid-template-columns:1fr !important;
        gap:30px;
    }
    
    .transit-card{
        width:100%;
        max-width:380px;
        margin:0 auto;
        padding:35px 25px;
    }
    
    .transit-card h3{
        font-size:24px;
    }
    
    .transit-card h4{
        font-size:28px;
    }
    
    .transit-icon{
        width:80px;
        height:80px;
    }
    
    .transit-icon i{
        font-size:32px;
    }
    
    .flight-route{
        flex-direction:column;
        gap:18px;
    }
    
    .transit-arrow{
        transform:rotate(90deg);
    }
    
    /*====================================
            DESPUÉS DEL EMBARQUE
    ====================================*/
    
    .delivery-section{
        margin-top:60px;
    }
    
    .delivery-section h3{
        font-size:34px;
        line-height:1.25;
    }
    
    .delivery-intro{
        font-size:18px;
        line-height:1.7;
    }
    
    .delivery-grid{
        display:grid;
        grid-template-columns:1fr !important;
        gap:30px;
    }
    
    .delivery-box{
        width:100%;
        max-width:380px;
        margin:0 auto;
        padding:35px 25px;
    }
    
    .delivery-box h4{
        font-size:24px;
    }
    
    .delivery-days{
        font-size:30px;
    }
    
    .delivery-box p{
        font-size:16px;
        line-height:1.7;
    }
    
    
    /*====================================
            ¿POR QUÉ ELEGIRNOS?
    ====================================*/
    
    .advantages{
        padding:70px 0;
    }
    
    .section-mini-title{
        font-size:16px;
        letter-spacing:3px;
    }
    
    .section-title{
        font-size:34px;
        line-height:1.2;
        margin-bottom:20px;
    }
    
    .advantages-intro{
        font-size:18px;
        line-height:1.7;
        margin-bottom:50px;
    }
    
    .advantages-grid{
        display:grid;
        grid-template-columns:1fr !important;
        gap:30px;
    }
    
    .advantage-card{
        max-width:360px;
        width:100%;
        margin:0 auto;
        padding:40px 30px;
    }
    
    .advantage-icon{
        width:76px;
        height:76px;
    }
    
    .advantage-icon i{
        font-size:30px;
    }
    
    .advantage-card h3{
        font-size:24px;
    }
    
    .advantage-card p{
        font-size:16px;
        line-height:1.7;
    }


    /*====================================
            TIENDAS USA
    ====================================*/
    
    .stores{
        padding:70px 0;
    }
    
    .stores-title h2{
        font-size:34px;
        line-height:1.2;
    }
    
    .stores-title p{
        font-size:18px;
        line-height:1.7;
    }
    
    .stores-grid{
        display:grid;
        grid-template-columns:repeat(2, minmax(0,1fr)) !important;
        gap:18px;
        margin-top:24px;
    }
    
    .store-card{
        height:120px;
        padding:16px;
    }
    
    .store-card img{
        width:100%;
        height:70px;
        object-fit:contain;
        object-position:center;
        margin:0 auto;
    }
    
    .stores-cta{
        margin-top:45px;
    }
    
    .btn-store{
        width:100%;
        max-width:320px;
        text-align:center;
    }
    
    

    html,
    body{
        overflow-x:hidden;
    }
    
    
    /*====================================
                MENÚ LATERAL
    ====================================*/
    
    .mobile-overlay{
    
        position:fixed;
    
        inset:0;
    
        background:rgba(0,0,0,.45);
    
        opacity:0;
    
        visibility:hidden;
    
        transition:opacity .35s ease,
                   visibility .35s ease;
    
        z-index:9998;
    
    }    
    

    .mobile-menu{
    
        display:flex;
    
        flex-direction:column;
    
        position:fixed;
    
        top:0;
        right:-320px;
    
        width:320px;
        height:100vh;
    
        background:#FFF;
    
        z-index:9999;
    
        transition:right .35s ease;
    
        overflow-y:auto;
        overflow-x:hidden;
    
        box-shadow:-8px 0 25px rgba(0,0,0,.15);
    
        padding:25px 28px 20px;
    
    }
    
/*======================================
            HEADER MENÚ MÓVIL
======================================*/

.mobile-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    margin-bottom:20px;

}

.mobile-logo{

    width:150px;

    height:auto;

}

.mobile-close{

    position:static;

    width:58px;
    height:58px;

    border:none;

    border-radius:50%;

    background:#FFFFFF;

    color:#0B2341;

    font-size:30px;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    box-shadow:
        0 8px 22px rgba(15,23,42,.10),
        0 2px 8px rgba(15,23,42,.05);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        color .25s ease;

}

.mobile-close:hover{

    transform:translateY(-2px) scale(1.06);

    color:#ED3237;

    box-shadow:
        0 12px 30px rgba(15,23,42,.16),
        0 4px 12px rgba(15,23,42,.08);

}


.mobile-close i{

    transition:
        transform .25s ease,
        color .25s ease;

}

.mobile-close:hover i{

    transform:rotate(90deg);

}

.mobile-welcome{

    margin-bottom:28px;

}

.mobile-welcome span{

    display:block;

    margin-bottom:2px;

    font-size:15px;

}

.mobile-welcome h3{

    margin:0;

    font-size:16px;

    line-height:1.2;

}

.mobile-welcome strong{

    display:block;

    margin-top:2px;

    font-size:18px;

    line-height:1.2;

}
    
    
    .mobile-menu.active{
    
        right:0;
    
    }
    
    
    .mobile-overlay.active{
    
        opacity:1;
    
        visibility:visible;
    
    }    
    
    .mobile-nav{
    
        display:block;
    
        overflow:visible;
    
    }
    
    .mobile-nav ul{
    
        list-style:none;
    
        padding:0;
    
        margin:0;
    
        display:flex;
    
        flex-direction:column;
    
    }
    
    .mobile-nav li{
    
        border-bottom:1px solid #ECECEC;
    
    }
    
    .mobile-nav a{
    
        display:flex;
    
        align-items:center;
    
        gap:14px;
    
        padding:18px 18px;
    
        text-decoration:none;
    
        color:#0A2342;
    
        font-size:18px;
    
        font-weight:700;
    
    }
    
    .mobile-nav a:hover{
    
        color:#ED3237;
    
    }
    
    .mobile-nav a.active{
    
        background:#F4F8FF;
    
        color:#0B2341;
    
        border-left:5px solid #ED3237;
    
        padding-left:15px;
    
        box-shadow:0 8px 20px rgba(0,0,0,.06);
    
    }
    
    .mobile-nav a.active i:first-child{
    
        color:#ED3237;
    
    }
    
    .mobile-nav a.active .menu-arrow{
    
        color:#ED3237 !important;
    
    }    
    
    
    .mobile-btn-intranet{
    
        margin-top:auto;
    
        display:flex;
    
        justify-content:center;
    
        align-items:center;
    
        gap:10px;
    
        height:52px;
    
        background:#ED3237;
    
        color:#FFF;
    
        text-decoration:none;
    
        border-radius:12px;
    
        font-weight:700;
    
    }
    
    
    .mobile-footer{
    
        flex-shrink:0;
    
        padding-top:20px;
    
        padding-bottom:16px;
    
        background:#FFF;
    
    }

/*==================================================
        SUBMENÚ MOBILE
==================================================*/

.mobile-submenu{

    list-style:none;

    margin:0;

    padding:0;

    max-height:0;

    overflow:hidden;

    transition:max-height .35s ease;

}

.mobile-submenu li{

    border-bottom:1px solid #F1F5F9;

}

.mobile-submenu a{

    display:block;

    padding:14px 18px 14px 52px;

    font-size:15px;

    font-weight:500;

    color:#475569;

    text-decoration:none;

    background:#FFF;

    transition:.25s;

}

.mobile-submenu a:hover{

    color:#ED3237;

    background:#F8FAFC;

}

.mobile-dropdown.active .mobile-submenu{

    max-height:600px;

}

.mobile-dropdown.active .menu-arrow{

    transform:rotate(90deg);

}

.menu-arrow{

    margin-left:auto;

    transition:transform .30s ease;

}


body{

    padding-top:70px;

}    

}





/*==================================================
                CELULARES
≤ 768px
==================================================*/

@media (max-width:768px){
    
    
    /*====================================
                HEADER
    ====================================*/
    
    .header .container{
    
        height:68px;
        padding:0 18px;
    
    }
    
    .logo img{
    
        height:42px;
    
    }
    
    .menu-toggle{
    
        width:42px;
        height:42px;
        font-size:22px;
    
    }
    
    /*====================================
                HERO
    ====================================*/
    
    .hero{
    
        background-image:url("../images/hero-mobile.webp");
        min-height:700px;
        padding:50px 0 40px;
        background-position:center top;
        background-size:cover;
    
    }
    
    .hero-content{
    
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        justify-content:flex-start;
    
        padding-top:45px;
    
    }
    
    .hero-text{
    
        width:100%;
        max-width:340px;
    
    }
    
    .hero-text h1{
    
        font-size:29px;
        line-height:1.22;
        letter-spacing:0;
        margin-bottom:34px;
    
    }
    
    .hero-text p{
    
        font-size:15px;
        line-height:1.55;
        max-width:300px;
        margin-bottom:34px;
    
    }
    
    .hero-buttons{
    
        display:flex;
        gap:14px;
        width:100%;
        max-width:360px;
        margin-top:0;
    
    }
    
    .hero-buttons .btn{
    
        flex:1;
    
        min-height:96px;
    
        display:flex;
        align-items:center;
        justify-content:center;
    
        gap:12px;
    
        padding:20px;
    
        font-size:17px;
        font-weight:700;
        line-height:1.25;
    
        border-radius:16px;
    
        text-align:left;
    
    }
    
    .hero-buttons .btn-primary{
    
        margin-right:0;
    
    }
    
    
    .btn-blue i,
    .btn-red i{
    
        font-size:22px;
        flex-shrink:0;
    
    }
    
    .btn-blue span,
    .btn-red span{
    
        line-height:1.15;
    
    }
    
    
    /*====================================
            TRACKING
    ====================================*/
    
    .hero + .tracking-section .container{
    
        padding-left:0;
    
        padding-right:0;
    
    }


    .tracking-section{
    
        margin-top:-55px;
    
        padding:0;
    
        display:flex;
        justify-content:center;
    
    }
    
    .tracking-card{
    
        width:100%;
        
        max-width:380px; /* conteneder del Tracking */
    
        margin:0 auto;
    
        border-radius:22px;
    
        padding:22px 22px 20px;
    
    }
    
    .tracking-title{
    
        display:flex;
    
        align-items:center;
    
        justify-content:center;
    
        gap:16px; /* separación entre el ícono y título */
    
        padding:0;
    
        font-size:15px;
    
        font-weight:700;
    
        line-height:1.35;
    
        text-align:center;
    
        margin-bottom:4px;
    
    }
    
    .tracking-title i{
    
        font-size:28px;
    
        flex-shrink:0;
    
        margin-top:0;
    
        display:flex;
    
        align-items:center;
    
    }
    
    .tracking-form{
    
        display:flex;
        flex-direction:column;
        gap:12px;
    
    }
    
    .tracking-form input{
    
        width:100%;
        height:54px;
    
        padding:0 18px;
        
        line-height:54px;
    
        font-size:17px;
    
        text-align:center;
    
        border:2px solid #E2E8F0;
    
        border-radius:14px;
    
        color:#1E293B;
    
        font-weight:500;
    
        box-sizing:border-box;

    }
    
    .tracking-form input::placeholder{
    
        text-align:center;
    
        color:#8A8F98;
    
        opacity:1;
    
    }
    
    .tracking-form button{
    
        width:100%;
        height:54px;
        font-size:17px;
        border-radius:12px;
    
    }
    
    
    /*====================================
            ¿CÓMO FUNCIONA?
    ====================================*/
    
    .how{
    
        padding:85px 0 50px;
    
    }
    
    .how .section-mini-title{
    
        font-size:15px;
    
        letter-spacing:3px;
    
        margin-bottom:14px;
    
    }
    
    .how .section-title{
    
        max-width:340px;
    
        margin:0 auto 45px;
    
        font-size:30px;
    
        line-height:1.20;
    
    }
    
    .how .container{
    
        width:100%;
    
        max-width:100%;
    
        padding-left:12px;
    
        padding-right:12px;
    
        display:flex;
    
        flex-direction:column;
    
        align-items:center;
    
    }
    

    .steps{
    
        gap:20px;
    
        margin:0 auto;
        
        position:relative;
    
    }
    
    .steps::before{
    
        content:"";
    
        position:absolute;
    
        top:22px;
    
        bottom:22px;
    
        left:32px;
    
        width:2px;
    
        background:linear-gradient(
            180deg,
            #D7E6FF 0%,
            #BFD7FF 100%
        );
    
        z-index:0;
    
    }
    
    .step-number{
    
        position:absolute;
    
        top:-18px;
    
        left:50px;
    
        width:40px;
    
        height:40px;
    
        border-radius:50%;
    
        background:#1F64D8;
    
        color:#FFF;
    
        display:flex;
    
        align-items:center;
    
        justify-content:center;
    
        font-size:18px;
    
        font-weight:700;
    
        box-shadow:0 8px 20px rgba(31,100,216,.28);
    
        z-index:10;
    
    }
    
    .step-icon{
    
        width:90px;
        height:90px;
        
        margin:6px 0 0;
    
        border-radius:50%;
    
        border:1px solid #EDF2F7;
    
        display:flex;
        justify-content:center;
        align-items:center;
    
        transition:.3s;
        
        grid-area:icon;
        
        background:linear-gradient(
        180deg,
        #FFFFFF 0%,
        #F4F8FF 100%
        );
        
        border:1px solid #EEF4FD;
        
        box-shadow:
        0 8px 22px rgba(15,23,42,.05);        
    
    }
    

    .step-icon i{
    
        font-size:38px;
    
        color:#1F64D8;
    
    }
    
    .step p{
    
        grid-area:text;
    
        margin:0;
    
        padding-left:8px;
    
        max-width:none;
    
        text-align:left;
    
        line-height:1.40;
    
        color:#6B7280;
    
        font-weight:500;
    
    }
    
    .step h3{
    
        grid-area:title;
    
        margin:-2px 0 6px;
    
        padding-left:8px;
    
        text-align:left;
    
    }
    
    .step{
    
        position:relative;
    
        display:grid;
    
        grid-template-columns:82px 1fr;
    
        grid-template-areas:
            "icon title"
            "icon text";
            
        grid-auto-rows:min-content;
    
        column-gap:16px;
    
        align-items:start;
    
        width:100%;
    
        max-width:100%;
    
        margin:0 auto 26px;
    
        padding:26px 24px;
    
        background:#FFF;
    
        border-radius:22px;
    
        border:1px solid #E7EDF5;
        
        box-shadow:
        0 8px 24px rgba(15,23,42,.06),
        0 2px 8px rgba(15,23,42,.04);
        
        min-height:160px;
    
    }
    

    /*
    .step:not(:last-child)::after{
    
        content:"";
    
        position:absolute;
    
        bottom:0;
    
        left:50%;
    
        transform:translateX(-50%);
    
        width:70px;
    
        height:2px;
    
        border-radius:2px;
    
        background:linear-gradient(
            90deg,
            transparent,
            rgba(31,100,216,.22),
            transparent
        );
    
    }
    */

/* ===== FIN ¿CÓMO FUNCIONA? =============================== */



    /*====================================
                TIEMPOS DE TRÁNSITO
    ====================================*/
    
    .transit{
    
        padding:70px 0;
    
    }
    
    .transit .container{
    
        width:100%;
        max-width:420px;
        margin:0 auto;
        padding:0 20px;
    
    }
    
    .transit-card{
    
        padding:26px 24px;
        border-radius:24px;
        margin-bottom:24px;
    
    }
    
    .transit-card h3{
    
        font-size:23px;
    
        line-height:1.25;
    
        margin:22px 0 18px;
    
    }

    .transit-delivery{
    
        padding-top:70px;
    
    }
    
    .transit-delivery h2{
    
        font-size:44px;
    
        line-height:1.15;
    
        margin:22px auto;
    
        max-width:580px;
    
    }
    
    .transit-delivery p{
    
        font-size:20px;
    
        line-height:1.80;
    
        max-width:560px;
    
        margin:0 auto 34px;
    
    }
    
/* ===== FIN TIEMPOS DE TRÁNSITO =============================== */    
    
    /*====================================
            ¿POR QUÉ ELEGIRNOS?
    ====================================*/

    .advantages{
    
        padding:30px 0 50px;
    
    }


    .advantages .section-mini-title{
    
        margin-bottom:20px;
    
    }

    .advantages .section-title{
    
        margin-bottom:26px;
    
    }
    
    
    .advantages-intro{
    
        max-width:340px;
    
        margin:0 auto 55px;
    
        line-height:1.8;
    
    }    


    .advantage-card{
    
        padding:42px 28px;
        
        margin-bottom:24px;
    
    }

    .advantage-card .icon-circle{
    
        margin-bottom:24px;
    
    }


    .advantage-card h3{
    
        margin-bottom:18px;
    
        line-height:1.25;
    
    }

    .advantage-card p{
    
        max-width:270px;
    
        margin:0 auto;
    
        line-height:1.65;
    
    }

/* ===== FIN TIEMPOS DE ¿POR QUÉ ELEGIRNOS? =============================== */ 


    /*====================================
        COMPRA EN TUS TIENDAS FAVORITAS
    ====================================*/

    .stores{
    
        padding:60px 0 70px;
    
    }

    .stores-title span{
    
        display:block;
    
        font-size:15px;
    
        font-weight:700;
    
        letter-spacing:3px;
    
        text-transform:uppercase;
    
        color:#ED3237;
    
        text-align:center;
    
        margin-bottom:14px;
    
    }

    .stores-title h2{
    
        max-width:340px;
    
        margin:0 auto 26px;
    
        font-size:30px;
    
        line-height:1.20;
    
        font-weight:800;
    
        text-align:center;
    
        color:#0A2342;
    
    }

    .stores-title p{
    
        max-width:345px;
    
        margin:0 auto 42px;
    
        font-size:15px;
    
        line-height:1.85;
    
        text-align:center;
    
        color:#5F6C7B;
    
    }

    .stores-grid{
    
        max-width:340px;
    
        margin:0 auto;
    
        gap:18px;
    
    }

    .store-card{
    
        min-height:118px;
    
        border-radius:18px;
    
        padding:18px;
    
    }

    .store-card img{
    
        max-width:80%;
    
        max-height:52px;
    
        object-fit:contain;
    
    }

    .store-cta{
    
        margin-top:40px;
    
        text-align:center;
    
    }

    .store-cta p{
    
        max-width:320px;
    
        margin:0 auto 28px;
    
        font-size:15px;
    
        line-height:1.8;
    
    }

    .btn-store{
    
        width:100%;
    
        max-width:320px;
    
        min-height:60px;
    
        display:flex;
    
        align-items:center;
    
        justify-content:center;
    
        margin:0 auto;
    
        font-size:17px;
    
        border-radius:14px;
    
        padding:0 24px;
    
    }

/* ===== FIN TIEMPOS DE COMPRA EN TUS TIENDAS FAVORITAS =============================== */ 


    /*====================================
            TODO LO QUE NECESITAS
    ====================================*/
    
    .highlights{
    
        padding:70px 0 50px;
    
    }
    
    .highlights .container{
    
        width:100%;
    
        max-width:420px;
    
        margin:0 auto;
    
        padding:0 20px;
    
    }
    
    .highlights-header{
    
        margin:0 auto 46px;
    
    }
    
    .highlights-header h3{
    
        font-size:30px;
    
        line-height:1.20;
    
        margin-bottom:24px;
    
    }
    
    .highlights-header p{
    
        font-size:18px;
    
        line-height:1.75;
    
    }

    .highlights-grid{
    
        display:grid;
    
        grid-template-columns:repeat(2,1fr);
    
        gap:18px;
    
        margin-top:42px;
    
    }

    .highlight-item{
    
        min-height:238px;
    
        padding:26px 18px;
    
        border-radius:22px;
    
        display:flex;
    
        flex-direction:column;
    
        align-items:center;
    
    }

    .highlight-item i{
    
        font-size:34px;
    
    }
    
    .highlight-item h4{
    
        font-size:19px;
    
        line-height:1.35;
    
        margin-bottom:14px;
    
    }
    
    .highlight-item p{
    
        font-size:16px;
    
        line-height:1.60;
    
    }
/* ===== FIN DE TODO LO QUE NECESITAS =============================== */


    /*====================================
            NOSOTROS
            HERO
    ====================================*/
    
    .hero-nosotros .hero-overlay{
    
        background:linear-gradient(
            90deg,
            rgba(10,35,66,.82) 0%,
            rgba(10,35,66,.62) 45%,
            rgba(10,35,66,.18) 100%
        );
    
    }
    
    .hero-nosotros{
    
        min-height:620px;
    
        background-position:center;
    
    }
    
    .hero-nosotros .hero-content{
    
        padding-top:45px;
    
        padding-bottom:45px;
    
        padding-left:0;
    
        padding-right:0;
    
        justify-content:flex-start;
    
    }
    
    .hero-nosotros .hero-text{
    
        width:100%;
    
        max-width:320px;
    
        margin:0;
    
    }
    
    .hero-nosotros .hero-text h1{
    
        font-size:30px;
    
        line-height:1.18;
    
        margin-bottom:32px;
    
    }
    
    .hero-nosotros .hero-text p{
    
        max-width:260px;
    
        font-size:15px;
    
        line-height:1.85;
    
    }

    .hero-nosotros .hero-content{
    
        width:100%;
    
        max-width:100%;
    
        margin:0;
    
        padding:45px 16px 45px;
    
        box-sizing:border-box;
    
        display:flex;
    
        justify-content:flex-start;
    
        align-items:flex-start;
    
    }

    
    /*====================================
            NOSOTROS
            MISIÓN Y VISIÓN
    ====================================*/
    
    .mision-vision{
    
        padding:70px 0;
    
    }
    
    .mision-vision .container{
    
        width:100% !important;
    
        max-width:100% !important;
    
        padding:0 8px !important;
    
        margin:0 auto;
    
        box-sizing:border-box;
    
    }
    

    .mision-grid{
    
        display:flex !important;
    
        flex-direction:column !important;
    
        align-items:stretch !important;
    
        width:100% !important;
    
        max-width:100% !important;
    
        padding:0;
    
        margin:0;
    
        gap:35px;
    
        box-sizing:border-box;
    
    }

    .mision-card{
    
        width:96% !important;
    
        max-width:100% !important;
    
        margin:0 auto;
    
        padding:42px 22px 28px;
    
        box-sizing:border-box;
    
        border-radius:22px;
    
        background:#FFF;
    
        box-shadow:0 10px 30px rgba(0,0,0,.08);
    
        text-align:center;
    
    }
    
    .mision-divider{
    
        display:block !important;
    
        width:70% !important;
    
        height:1px !important;
    
        min-height:1px !important;
    
        max-height:1px !important;
    
        background:#E5E7EB;
    
        margin:0 auto;
        
        position:relative;
    
        flex:none;
    
    }
    
    .mision-divider::after{
    
        content:"";
    
        position:absolute;
    
        left:50%;
    
        top:50%;
    
        transform:translate(-50%,-50%);
    
        width:12px;
    
        height:12px;
    
        border-radius:50%;
    
        background:#FFC72C;
    
    }

    .icon-circle{
    
        width:110px;
    
        height:110px;
    
        margin:0 auto 34px;
    
    }
    
    .icon-circle i{
    
        font-size:34px;
    
    }
    
    .mision-card h3{
    
        font-size:30px;
    
        margin-bottom:22px;
    
    }
    
    .mision-card p{
    
        width:100%;
    
        max-width:430px;
    
        margin:0 auto;
    
        font-size:18px;
    
        line-height:1.85;
    
    }
    
    .mision-vision .section-title h2{
    
        font-size:30px;
    
        line-height:1.2;
    
    }



    /*====================================
            NOSOTROS
            ¿POR QUÉ ELEGIRNOS?
    ====================================*/


    .porque-nosotros{
    
        padding:20px 0 40px;
    
    }
    
    .porque-nosotros .container{
    
        padding:0 8px;
    
    }
    
    .porque-nosotros .section-title{
    
        margin-bottom:45px;
    
    }
    
    .porque-nosotros .section-title h2{
    
        font-size:30px;
    
        line-height:1.20;
    
    }
    
    .porque-subtitulo{
    
        font-size:16px;
    
        line-height:1.80;
    
        max-width:320px;
    
        margin:18px auto 22px;
    
    }
    
    .porque-grid{
    
        display:grid !important;
    
        grid-template-columns:1fr !important;
    
        justify-content:unset !important;
    
        gap:22px !important;
    
        width:100%;
    
        max-width:340px;
    
        margin:55px auto 0 !important;
    
    }
    
    .porque-card{
    
        width:100% !important;
    
        max-width:340px;
    
        padding:42px 24px;
    
        margin:0;
    
        min-height:auto;
    
    }
    
    
    .porque-card h3{
    
        white-space:normal;
    
        font-size:22px;
    
        line-height:1.25;
    
        margin-top:24px;
        
        margin-bottom:18px;
    
    }
    
    .porque-card p{
    
        max-width:260px;
    
        margin:0 auto;
    
        line-height:1.75;
    
        font-size:16px;
    
    }


    /*====================================
            NOSOTROS - NUESTRO COMPROMISO
    ====================================*/
    
    .compromiso{
    
        padding:15px 0 40px;
    
    }
    
    .compromiso .container{
    
        max-width:100% !important;
    
        width:100% !important;
    
        padding:0 !important;
    
    }
    
    .compromiso-box{
    
        width:calc(100vw - 24px);
    
        max-width:420px;
    
        margin:0 auto;
    
        padding:34px 18px;
    
        box-sizing:border-box;
    
        display:flex !important;
    
        flex-direction:column !important;
    
        align-items:stretch !important;
    
        gap:28px;
    
    }
    
    .compromiso-icono{
    
        grid-area:icono;
    
        width:95px;
    
        height:95px;
    
        margin:0 auto 18px;
    
        align-self:center;
    
        justify-self:center;
    
        display:flex;
    
        justify-content:center;
    
        align-items:center;
    
    }
    
    .compromiso-icono i{
    
        font-size:42px;
    
    }
    
    .compromiso-texto{
    
        width:100% !important;
    
        max-width:100% !important;
    
        flex:none !important;
    
    }
    
    .compromiso-texto h2{
    
        text-align:center;
    
        margin:0 0 20px;
    
    }
    
    .compromiso-texto p{
    
        display:block;
    
        width:calc(100% + 80px) !important;
    
        max-width:none !important;
    
        margin:0 -40px 18px !important;
    
        padding:0 10px !important;
    
        box-sizing:border-box;
    
        text-align:justify !important;
        
        text-justify:inter-word;
        
        line-height:1.8;
    
    }
    
    .compromiso-texto{
    
        text-align:left;
    
    }
    
    .compromiso-texto strong{
    
        white-space:normal;
    
    }
    
    .compromiso-texto .destacado{
    
        margin-top:22px;
    
    }

/* ===== FIN DE NOSOTROS =============================== */


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


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

.hero-services{

    min-height:auto;
    padding:0;

}

.hero-services .hero-services-content{

    width:100%;
    padding:34px 20px 40px;
    box-sizing:border-box;

    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:flex-start;

}

.hero-services .hero-services-text{

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

}

.hero-services .hero-services-text h1{

    font-size:28px;
    line-height:1.26;
    letter-spacing:-1px;
    font-weight:800;
    max-width:360px;
    margin:18px 0 24px;

}

.hero-services .hero-services-text p{

    max-width:320px;
    font-size:17px;
    line-height:1.65;
    margin-bottom:34px;

}


/*==================================================
=           BLOQUE 1 - BENEFICIOS
==================================================*/

.benefits{

    padding:70px 0;

}

.benefits-header{

    width:100%;

    padding:0 22px;

    margin:0 auto 45px;

    text-align:center;

    box-sizing:border-box;

}

.benefits-header h2{

    font-size:34px;

    line-height:1.20;

}

.benefits-header p{

    font-size:18px;

    line-height:1.8;
    
    max-width:340px;

    margin:0 auto;

}

.benefits-grid{

    display:flex;

    flex-direction:column;

    gap:22px;

    padding:0 22px;

}

.benefit-item{

    width:100%;

    padding:34px 28px;

    border-radius:22px;

    box-sizing:border-box;

}

.benefit-item i{

    font-size:52px;

}

.benefit-item h3{

    font-size:28px;

}

.benefit-item p{

    font-size:17px;

}


/*==================================================
=     BLOQUE 2 - TÍTULO SERVICIOS RESPONSIVE
==================================================*/

.services-intro h2{

    font-size:34px;

    line-height:1.15;

    max-width:330px;

    margin:0 auto 28px;

}

.services-intro p{

    font-size:18px;

    line-height:1.8;

    max-width:330px;

    margin:0 auto;

}


/*==================================================
=     BLOQUE 3 - NUESTROS SERVICIOS RESPONSIVE
==================================================*/

.services-section .services-header h2{

    font-size:36px !important;

    line-height:1.18;

    max-width:330px;

    margin:18px auto 20px;

}

.services-section .services-header p{

    font-size:17px !important;

    line-height:1.8;

    max-width:330px;

    margin:0 auto;

}

/*==================================================
=         BLOQUE 4 - SERVICIOS RESPONSIVE
==================================================*/

.service-block,
.service-reverse{

    display:flex;

    flex-direction:column;

    gap:0;

    padding:18px;
    
    align-items:stretch;

}

.service-image{

    width:100%;

    margin:0 0 26px;

    overflow:hidden;

    border-radius:22px;
    
    order:2;

}

.service-image img{

    display:block;

    width:100%;

    height:250px;

    object-fit:cover;

    object-position:center;

    border-radius:22px;

}

.service-content{

    order:1;

    width:100%;

    padding:28px 8px 8px;
    
}


.service-content h3{

    font-size:28px;

    line-height:1.15;

    margin:18px 0 18px;

}


.service-content p{

    font-size:18px;

    line-height:1.7;

    color:#5B6477;

    margin:0 0 28px;

}

.service-features{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:14px 18px;

    margin:28px 0 30px;

}


.service-features li{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:16px;

    line-height:1.45;

    color:#16386F;

}


.service-features i{

    color:#22C55E;

    font-size:15px;

    margin-top:2px;

    flex-shrink:0;

}


.service-card{

    display:flex;

    flex-direction:column;

    gap:0;

}


.service-btn{

    width:100%;

    justify-content:center;

}

/* ===== FIN DESERVICIOS =============================== */

/*==================================================
=           RESTRICCIONES
==================================================*/

/*==================================================
=           HERO RESTRICCIONES
==================================================*/
    
.hero-restricciones{

    padding:50px 0 28px;

}

.hero-restricciones .container{

    width:100%;
    max-width:100%;
    padding:0 20px;
    box-sizing:border-box;

}

.hero-texto{

    width:100%;
    max-width:340px;
    margin:0;

}


.hero-restricciones .hero-texto h1{

    font-size:28px;
    line-height:1.26;
    letter-spacing:-1px;
    font-weight:800;
    max-width:360px;
    margin:18px 0 24px;

}

.hero-restricciones .hero-texto p{

    max-width:320px;
    font-size:17px;
    line-height:1.65;
    margin-bottom:34px;

}


/*==================================================
=       HERO RESTRICCIONES
=       BOTONES / ETIQUETAS
==================================================*/

.hero-links{

    display:flex;
    flex-wrap:wrap;
    gap:14px;

    margin-top:10px;

}


/*==================================================
=       MERCANCÍAS PERMITIDAS
==================================================*/

/*==================================================
= MERCANCÍAS PERMITIDAS, RESTRINGIDAS Y PROHIBIDAS
==================================================*/

.restriction-category{

    padding:32px 18px;

    border-radius:24px;

    margin-bottom:28px;

}

.restriction-title{

    width:100%;

    justify-content:center;

    padding:18px 20px;

    margin-bottom:26px;

}

.restriction-title h3{

    font-size:22px;

    line-height:1.3;

    text-align:center;

}

.restriction-description{

    max-width:100%;

    font-size:17px;

    line-height:1.75;

    margin-bottom:28px;

}

.restriction-divider{

    margin:0 0 34px;

}

.restriction-grid{

    display:grid;

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

    gap:16px;

}

.restriction-item{

    width:100%;

    padding:28px 12px;

    border-radius:18px;

    box-sizing:border-box;

}

.restriction-icon{

    width:74px;

    height:74px;

    margin:0 auto 18px;

}

.restriction-svg{

    width:36px;

    height:36px;

}

.restriction-item span{

    font-size:15px;

    line-height:1.35;

}

/* ===== FIN RESTRICCIONES ============== */


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

.hero-tarifas{

    min-height:auto;

    padding:20px 0 20px;

}

.hero-tarifas .container{

    width:100%;

    padding:34px 20px 40px;

    box-sizing:border-box;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    align-items:center;

}

.hero-tarifas .hero-tag{

    margin:0 auto 18px;

}

.hero-tarifas h1{

    max-width:330px;

    font-size:28px;

    line-height:1.22;

    letter-spacing:-1px;

    margin:0 0 28px;

}

.hero-tarifas p{

    max-width:320px;

    font-size:15px;

    line-height:1.85;

    margin:0 0 34px;
    
}


.hero-buttons{

    width:100%;

    display:flex;

    flex-direction:column;

    gap:18px;

    align-items:center;

}

.hero-buttons a{

    width:100%;

    max-width:320px;

    min-width:0;

    min-height:60px;

    padding:18px 24px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:17px;

    border-radius:14px;

    box-sizing:border-box;

}

/*==================================================
            TARIFAS
            TARJETAS DE TARIFAS
==================================================*/


.tarifas-section{

    padding:40px 0 70px;

}

.tarifas-section .container{

    width:100%;

    max-width:420px;

    margin:0 auto;

    padding:0 8px;

    box-sizing:border-box;

}

.tarifas-section .section-title{

    margin:0 auto 45px;

}

.tarifas-section .section-title h2{

    font-size:30px;

    line-height:1.20;

    margin-bottom:24px;

}

.tarifas-section .section-title p{

    max-width:330px;

    margin:0 auto;

    font-size:17px;

    line-height:1.75;

}

.pricing-grid{

    display:flex;

    flex-direction:column;

    gap:28px;

}

.badge{

    top:12px;

    right:16px;

    font-size:10px;

    padding:7px 12px;

}

.pricing-header{

    padding:38px 22px 22px;

}

/* ===== ANCHO DE LAS 2 TARJETAS TARIFAS ============== */

.customs{

    padding:10px 20px 18px;

}

.pricing-card ul{

    padding:0 20px;

}

.tax-note{

    margin:0 20px 30px;

}

.pricing-button{

    width:calc(100% - 40px);

}


/*==================================================
        TARJETAS - CONTENIDO INTERNO
==================================================*/

.price{

    padding:38px 20px 8px;

    font-size:54px;

}

.price span{

    margin-top:10px;

    font-size:16px;

    letter-spacing:1px;

}

.customs{

    padding:10px 20px 20px;

    font-size:17px;

}

.customs strong{

    margin-top:12px;

    font-size:26px;

}

.pricing-card li{

    padding:14px 16px;

    font-size:16px;

    border-radius:16px;

}

.pricing-card li i{

    font-size:20px;

}

.pricing-button{

    min-height:58px;

    font-size:17px;

    border-radius:14px;

}

/*==================================================
        TARJETAS - NOTA SUNAT
==================================================*/

.tax-note{

    margin:0 16px 24px;

    padding:16px 18px;

    font-size:15px;

    line-height:1.30;
    
    text-align:justify;

    border-radius:16px;

}

/*==================================================
            TARIFAS
            VALOR FOB
==================================================*/

.fob-section{

    padding:70px 0 50px;

}

.fob-section .container{

    width:100%;

    max-width:100%;

    padding:0 10px;

    box-sizing:border-box;

}

.fob-card{

    width:100%;

    display:flex;

    flex-direction:column;

    padding:36px 20px;

    border-radius:24px;

    box-sizing:border-box;

}

.fob-icon{

    margin:0 auto 2px;

}

.fob-content{

    width:100%;

}

.fob-content{

    text-align:center;

}

.fob-content h2{

    text-align:center;
    
    font-size:28px;
    
    line-height:1.25;

}

.fob-content p{

    text-align:justify;
    
    font-size:18px;
    
    line-height:1.25;

}

.fob-example{

    text-align:justify;
    
    font-size:18px;
    
    line-height:1.25;

}


/*==================================================
=           COTIZADOR ONLINE
==================================================*/

.cotizador-section{

    padding:40px 0 70px;

}

.cotizador-section .container{

    width:100%;

    max-width:420px;

    margin:0 auto;

    padding:0 10px;

    box-sizing:border-box;

}


.cotizador-section .section-title{

    max-width:340px;

    margin:0 auto 45px;

}

.cotizador-section .section-title h2{

    font-size:30px;

    line-height:1.20;

    margin-bottom:24px;

}

.cotizador-section .section-title p{

    max-width:330px;

    margin:0 auto;

    font-size:17px;

    line-height:1.75;

}


.cotizador-form{

    padding:24px 16px;

}

.cotizador-info{

    margin:0 0 28px;

}

.estado-titulo{

    display:block;

    width:100%;

    text-align:center;

    letter-spacing:2px;

    margin-bottom:18px;

}


.form-group select{

    padding-right:10px;

    font-size:14px;

}

.cotizador-resultados{

    width:100%;

    box-sizing:border-box;

    padding:24px 16px;

}

.cotizador-grid{

    display:flex;

    flex-direction:column;

    gap:28px;

}

.resultado-item{

    align-items:flex-start;

    gap:14px;

}

.resultado-item span{

    flex:1;

    font-size:15px;

    line-height:1.45;

}

.resultado-item strong{

    flex-shrink:0;

    font-size:18px;

    text-align:right;

}

/* ===== FIN TARIFAS ============== */


/*==================================================
=           CONTACTO
==================================================*/

.contact-hero{

    min-height:auto;

    padding:0;

}

.contact-hero .hero-content{

    width:100%;

    max-width:100%;

    padding:10px 16px 48px;

    box-sizing:border-box;

    display:flex;
    
    flex-direction:column;

    align-items:center;

}

.contact-hero .hero-text{

    width:100%;

    max-width:340px;

    margin:0;
    
}

.contact-hero .hero-mini{

    display:block;

    text-align:center;

    font-size:15px;

    letter-spacing:3px;

    margin-bottom:18px;

}

.contact-hero .hero-text h1{

    font-size:28px;

    line-height:1.20;

    text-align:center;

    margin-bottom:26px;

}

.contact-hero .hero-text p{

    max-width:330px;

    margin:0 auto 36px;

    font-size:16px;

    line-height:1.75;

    text-align:center;

}

/*==================================================
=           CONTACTO
            TARJETAS HERO
==================================================*/

.contact-highlights{

    width:100%;

    max-width:380px;

    margin:0 auto;

    display:grid;

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

    gap:16px;

}

.contact-highlight{

    min-height:150px;

    padding:24px 16px;

    border-radius:20px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    box-sizing:border-box;

}

.contact-highlight i{

    font-size:42px;

    margin-bottom:18px;

}

.contact-highlight h3{

    font-size:16px;

    line-height:1.35;

    margin:0;

}

/*==================================================
=           CONTACTO
            FORMULARIO
==================================================*/

.contact-section{

    padding:70px 0;

}

.contact-section .container{

    width:100%;

    max-width:100%;

    padding:0 8px;

    margin:0 auto;

    box-sizing:border-box;

}

.contact-grid{

    display:flex;

    flex-direction:column;

    gap:28px;

}

/*==================================================
=           CONTACTO
            FORMULARIO
            CONTENIDO
==================================================*/

.contact-form h2{

    text-align:center;

    margin:0 auto 18px;

}


.contact-form p{

    text-align:justify;

    text-justify:inter-word;

}


.contact-form{

    padding:28px 2px;

    border-radius:24px;

}

.contact-form-header{

    text-align:center;

    max-width:340px;

    margin:0 auto 34px;

}

.contact-form-header h2{

    font-size:30px;

    line-height:1.20;

    max-width:320px;

    margin:0 auto 18px;

}

.contact-form-header p{

    max-width:330px;

    margin:0 auto;

    font-size:16px;

    line-height:1.75;

}

/*==================================================
=           CONTACTO
            GRID
==================================================*/

.contact-card{

    display:flex;

    flex-direction:column;

    gap:32px;

    padding:28px 18px;

}


.contact-info-card{

    padding:28px 18px;

}


.contact-info .info-text span{

    overflow-wrap: break-word;

    word-break: break-word;

}

/* ===== FIN TARIFAS ============== */


/*==================================================
=           PREGUNTAS FRECUENTES
=                 HERO
==================================================*/

.hero-preguntas{

    min-height:760px;
    height:auto;

    background-position:center;
    background-size:cover;

}

.hero-preguntas .hero-overlay{

    background:linear-gradient(
        180deg,
        rgba(8,25,55,.68) 0%,
        rgba(8,25,55,.52) 45%,
        rgba(8,25,55,.78) 100%
    );

}

.hero-preguntas .hero-content{

    width:100%;
    max-width:100%;

    padding:30px 18px 48px;

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

    text-align:center;

    min-height:auto;

    box-sizing:border-box;

}

.hero-preguntas .hero-text{

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

    margin:0 auto;

}

.hero-preguntas .hero-subtitulo{

    display:block;

    margin-bottom:22px;

    font-size:14px;

    letter-spacing:2px;

    line-height:1.4;

    text-align:center;

}

.hero-preguntas .hero-text h1{

    font-size:29px;

    line-height:1.22;

    margin-bottom:28px;

    text-align:center;

}

.hero-preguntas .hero-text p{

    max-width:340px;

    margin:0 auto 22px;

    font-size:16px;

    line-height:1.80;

    text-align:center;

}

.hero-preguntas .hero-destacado{

    max-width:320px;

    margin:0 auto;

    font-size:15px;

    line-height:1.75;

    text-align:center;

}

/*==================================================
        PREGUNTAS FRECUENTES
        BUSCADOR
==================================================*/

.faq-search{

    padding:34px 0 22px;

}

.faq-search .container{

    width:100%;

    max-width:100%;

    padding:0 14px;

    box-sizing:border-box;

}

.faq-search-box{

    width:100%;

    max-width:100%;

    margin:0 auto;

}

.faq-search-box input{

    width:100%;

    height:58px;

    padding:0 18px 0 20px;

    font-size:16px;

    border-radius:16px;

    box-sizing:border-box;

}

.faq-search-box i{

    left:16px;

    font-size:18px;

}

/*==================================================
        PREGUNTAS FRECUENTES
        CATEGORÍA FAQ
==================================================*/

.faq-section{

    padding:18px 0 40px;

}

.faq-section .container{

    width:100%;

    max-width:100%;

    padding:0 6px;

    overflow:hidden;

    box-sizing:border-box;

}


.faq-category-icon i{

    font-size:28px;

}


.faq-category-content span{

    display:block;

    margin-bottom:10px;

    font-size:14px;

    letter-spacing:2px;

}


.faq-category-content p{

    max-width:340px;

    margin:0 auto;

    font-size:16px;

    line-height:1.75;

}


/*==================================================
        PREGUNTAS FRECUENTES
        GRID
==================================================*/

.faq-grid{

    display:grid !important;

    grid-template-columns:1fr !important;

    gap:32px !important;

}

.faq-block{

    width:100%;

    max-width:100%;

    margin-bottom:36px;

    overflow:hidden;

    padding:24px 8px !important;

    box-sizing:border-box;

}




/*==================================================
        PREGUNTAS FRECUENTES
        ENCABEZADO CATEGORÍA
==================================================*/

.faq-category{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    padding:26px 12px;

    border-radius:22px;

}

.faq-category-icon{

    width:72px;
    height:72px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:0 auto 18px;

}

.faq-category-content{

    display:flex;

    flex-direction:column;

    align-items:center;

    width:100%;

    text-align:center;

}


.faq-category-content h2{

    width:100%;

    max-width:none;

    margin:0 auto 18px;

    font-size:26px;

    line-height:1.20;

}


.faq-question{

    padding:20px 14px;

}

.faq-answer{

    padding:0 14px 20px;

}

/* ===== PREGUNTAS FRECUENTES ============== */

/*==================================================
=           AYUDA ADICIONAL
==================================================*/

/*==================================================
        PREGUNTAS FRECUENTES
        AYUDA ADICIONAL
==================================================*/

.faq-help{

    padding:20px 0 55px;

}

.faq-help .container{

    width:100%;

    max-width:100%;

    padding:0 8px;

    box-sizing:border-box;

}

.faq-help-box{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    gap:24px;

    padding:34px 10px !important;

    min-height:auto;

    box-sizing:border-box;

}

.faq-help-left{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

}

.faq-help-divider{

    display:none;

}

.faq-help-right{

    width:100%;

}

.faq-help-image img{

    width:170px;

    height:auto;

}

.faq-help-title{

    font-size:25px;

    line-height:1.22;

    margin-bottom:18px;

}

.faq-help-text{

    font-size:17px;

    line-height:1.75;

    max-width:340px;

    margin:0 auto;

}

.faq-help-button{

    width:100%;

    max-width:340px;

    justify-content:center;

    padding:18px 20px;

    font-size:17px;

}

/* ===== FIN PREGUNTAS FRECUENTES ============== */

/*==================================================
=           POLÍTICA DE PRIVACIDAD
=                 HERO
==================================================*/

.privacy-hero{

    padding:48px 0 42px;

}

.privacy-hero .container{

    width:100%;

    max-width:100%;

    padding:0 20px;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    align-items:flex-start;

    gap:0;

    box-sizing:border-box;

}

.privacy-hero-content{

    width:100%;

    max-width:340px;

}

.privacy-mini-title{

    display:block;

    margin-bottom:18px;

    font-size:14px;

    letter-spacing:2px;

    line-height:1.4;

}

.privacy-hero h1{

    font-size:30px;

    line-height:1.18;

    margin-bottom:28px;

}

.privacy-hero p{

    max-width:320px;

    font-size:16px;

    line-height:1.85;

}

.privacy-hero-icon{

    display:none;

}


/*==================================================
=       POLÍTICA DE PRIVACIDAD - MOBILE
==================================================*/

.privacy-content{

    padding:50px 0 60px;

}

.privacy-grid{

    display:grid;

    grid-template-columns:1fr;

    gap:24px;

    width:100%;

    margin:0;

    padding:0;

    box-sizing:border-box;

}


.privacy-card{

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    align-items:flex-start;

    padding:28px 18px;

    gap:22px;

    border-radius:18px;
    
    box-sizing:border-box;

    width:100%;

}

.privacy-card-icon{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    flex:none;

}

.privacy-icon-circle{

    width:74px;

    height:74px;

    margin:0 auto;

}

.privacy-icon-circle i{

    font-size:30px;

}

.privacy-card-body{

    width:100%;

    max-width:100%;
    
    box-sizing:border-box;

    min-width:0;

    flex:none;

    display:block;

}

.privacy-card-number{

    display:block;

    text-align:left;

    font-size:.95rem;

}

.privacy-card-line{

    margin:12px 0 20px;

}

.privacy-card h2{

    margin:0 0 18px;

    font-size:1.75rem;

    line-height:1.25;

    text-align:left;

    word-break:normal;

    overflow-wrap:break-word;

}

.privacy-card p{

    margin:0;

    font-size:1rem;

    line-height:1.85;

    text-align:left;

    word-break:normal;

    overflow-wrap:break-word;

}

/*==========================
CONTACTO
==========================*/

.privacy-contact-card{

    padding:30px 22px;

}

.privacy-contact-header{

    flex-direction:column;

    align-items:center;

    text-align:center;

    gap:18px;

}

.privacy-contact-header h2{

    font-size:2rem;

    margin:0;

}

.privacy-contact-description{

    text-align:left;

    margin-bottom:28px;

}

.privacy-contact-info{

    display:grid;

    grid-template-columns:1fr;

    gap:18px;

}

/*==================================================
=       CONTACTO - ENLACES
==================================================*/

.privacy-contact-info a{

    color:#12375f;

    text-decoration:none;

    font-weight:600;

    transition:0.3s ease;

}

.privacy-contact-info a:hover{

    color:#0f5db8;

    text-decoration:none;

}

.privacy-contact-info a:visited{

    color:#12375f;

}

.privacy-contact-info a:active{

    color:#12375f;

}


/*==================================================
=    CORRECCIÓN CONTENEDOR ANDROID
==================================================*/

/*.privacy-content > .container{

    width:100%;

    max-width:100%;

    margin:0;

    padding-inline:20px;

    box-sizing:border-box;

}*/

/* ===== FIN POLÍTICA DE PRIVACIDAD ============== */

/*==================================================
=           TÉRMINOS Y CONDICIONES
=                  HERO
==================================================*/

.hero-terminos .hero-terminos-content{

    justify-content:flex-start !important;

    align-items:flex-start !important;

    padding-top:45px !important;

}

.hero-terminos .hero-terminos-content .hero-terminos-text h1{

    font-size:30px !important;

    line-height:1.15 !important;

    margin-bottom:16px !important;

}

.hero-terminos .hero-terminos-content .hero-terminos-text p{

    font-size:16px !important;

    line-height:1.70 !important;

    max-width:300px !important;

}

/*==================================================
=           TÉRMINOS Y CONDICIONES
=             INTRODUCCIÓN
==================================================*/

.introduccion-terminos{

    padding:50px 0 45px !important;

}

.introduccion-terminos .section-title{

    margin-bottom:24px !important;

}

.introduccion-terminos .section-title h2{

    font-size:2.25rem !important;

    line-height:1.20 !important;

    margin-bottom:16px !important;

}

.introduccion-terminos .section-title span{

    width:60px !important;

    height:4px !important;

}

.introduccion-terminos .intro-texto{

    max-width:100% !important;

    font-size:1.05rem !important;

    line-height:1.50 !important;

    margin:0 auto 16px !important;

    padding:0 2px !important;

    box-sizing:border-box;
    
    text-align: justify;

}

/*==================================================
=           TÉRMINOS Y CONDICIONES
=                  CONTENIDO
==================================================*/

.indice-terminos{

    padding:35px 0 45px !important;

}

.indice-terminos .section-title{

    margin-bottom:28px !important;

}

.indice-terminos .section-title h2{

    font-size:2.10rem !important;

    margin-bottom:16px !important;

}

.indice-terminos .section-title p{

    font-size:1rem !important;

    line-height:1.60 !important;

    margin-top:18px !important;

    padding:0 18px;

}

.indice-grid{

    grid-template-columns:1fr !important;

    gap:16px !important;

}

.indice-card{

    padding:20px 18px !important;

    border-radius:16px !important;

    gap:16px !important;

}

.indice-card i{

    width:52px !important;

    height:52px !important;

    font-size:20px !important;

}

.indice-card span{

    font-size:1.15rem !important;

    line-height:1.45 !important;

}

/*==================================================
=           TÉRMINOS Y CONDICIONES
=                 CAPÍTULOS
==================================================*/

.capitulo-terminos{

    padding:24px 0 !important;

}

.capitulo-terminos:last-of-type{

    padding-bottom:55px !important;

}

.capitulo-terminos .container{

    padding:22px 20px !important;

    border-radius:18px !important;

    border-left:4px solid #ED3237 !important;

}

.capitulo-terminos-header{

    margin-bottom:22px !important;

}

.capitulo-numero{

    padding:7px 15px !important;

    font-size:0.82rem !important;

    margin-bottom:14px !important;

}

.capitulo-terminos-header h2{

    font-size:1.60rem !important;

    line-height:1.25 !important;

}

.capitulo-terminos-contenido{

    max-width:100% !important;

}

.capitulo-terminos-contenido p{

    font-size:1rem !important;

    line-height:1.90 !important;

    text-align:left !important;

    margin-bottom:18px !important;

}

/* ===== FIN TERMINOS Y CONDICIONES ============== */

/*==================================================
        LIBRO DE RECLAMACIONES
==================================================*/


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

.claim-hero{

    min-height:auto;

    padding:30px 0 0;

    background-position:center;

}

.claim-hero .hero-overlay{

    background:linear-gradient(
        90deg,
        rgba(10,35,66,.88) 0%,
        rgba(10,35,66,.55) 48%,
        rgba(10,35,66,.12) 100%
    );

}


.claim-hero .hero-content{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:18px;

    margin-top:0;

    padding:16px 0 0;

}

.claim-hero .hero-text{

    width:100%;

    max-width:320px;

    text-align:left;

}

.claim-hero .hero-text h1{

    font-size:30px;

    line-height:1.08;

    margin-bottom:28px;

}

.claim-hero .hero-text p{

    font-size:16px;

    line-height:1.75;

}


/*==================================================
        CONTENEDOR
==================================================*/

.claim-section .container{

    width:96%;

    max-width:100%;

    margin:0 auto;

    padding:0;

}

.claim-card{

    display:flex;

    flex-direction:column;

    align-items:stretch;

    gap:26px;

    margin-top:70px;

    padding:28px 12px;

}

.claim-card > *{

    width:100%;

    min-width:0;

}

.claim-card *{

    box-sizing:border-box;

}


/*==================================================
        CABECERA DE TARJETAS
==================================================*/

.claim-section-header{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:22px;

}

.claim-section-icon{

    width:74px;

    height:74px;

    border-radius:18px;

    margin:0;

}

.claim-section-header > div:last-child{

    width:100%;

}

.claim-section-mini{

    display:block;

    margin-bottom:8px;

    text-align:left;

}

.claim-section-header h2{

    font-size:25px;

    line-height:1.15;

    margin:0 0 14px;

    max-width:280px;

    text-align:left;

}

.claim-section-header p{

    font-size:16px;

    line-height:1.75;

    margin:0;

    max-width:320px;

    text-align:left;

}


/*==================================================
        FORMULARIOS
==================================================*/

.claim-form{

    margin-top:34px;

}

.form-grid{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.form-group{

    width:100%;

    margin-bottom:6px;

}

.form-group.full{

    width:100%;

}

.form-group label{

    margin-bottom:8px;

}

.form-group.full .input-icon{

    width:100%;

}

.form-group.full .input-icon input{

    width:100%;

    min-width:0;

    box-sizing:border-box;

}


/*==================================================
        TARJETA 1
        DOCUMENTOS
==================================================*/

.document-grid{

    display:grid;

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

    gap:14px;

    width:100%;

}

.document-card{

    width:100%;

    min-width:0;

    margin:0;

}

.document-card span{

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

    min-height:82px;

    padding:12px;

    font-size:19px;

    line-height:1.3;

    text-align:center;

    white-space:normal;

    word-break:normal;

}


/*==================================================
        TARJETA 2
==================================================*/

.claim-grid{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.claim-box{

    display:grid;

    grid-template-columns:1fr;

    gap:8px;

    width:100%;

}

.claim-options{

    grid-template-columns:1fr;

    gap:16px;

}

.claim-option{

    width:100%;

    margin:0;

    min-height:160px;

    padding:18px;

}

.claim-option i{

    font-size:30px;

    margin-bottom:6px;

}

.claim-option h3{

    font-size:18px;

    margin:6px 0 8px;

}

.claim-option p{

    font-size:15px;

    line-height:1.35;

    margin:0;

    max-width:230px;

}

.claim-option-card{

    width:100%;

    min-height:170px;

}

.claim-option-card p{

    max-width:260px;

    margin:12px auto 0;

}

.service-grid{

    display:grid;

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

    gap:14px;

    width:100%;

}

.service-card{

    width:100%;

    min-width:0;

}

.service-card span{

    width:100%;

    min-width:0;

    height:110px;

    padding:14px 10px;

    font-size:16px;

    line-height:1.25;

    box-sizing:border-box;

}


/*==================================================
        TARJETA 3
==================================================*/

.description-form{

    width:100%;

}

.textarea-icon{

    width:100%;

}

.textarea-icon textarea{

    width:100%;

    height:180px;

    padding:18px 18px 18px 52px;

    font-size:15px;

    line-height:1.6;

    border-radius:18px;

    box-sizing:border-box;

}

.textarea-icon i{

    top:20px;

    left:18px;

    font-size:18px;

}

.char-counter{

    margin-top:8px;

    font-size:13px;

    text-align:right;

}

.description-content{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.upload-box{

    width:100%;

    height:auto;

    min-height:220px;

    margin-top:0;

    padding:28px 22px;

    box-sizing:border-box;

}

.upload-box h3{

    font-size:18px;

}

.upload-box p{

    line-height:1.6;

    margin-bottom:12px;

}


.claim-card-description .description-form,

.claim-card-description .upload-box{

    width:100%;

    max-width:100%;

}

.claim-card-description .description-content{

    display:flex;

    flex-direction:column;

    gap:20px;

}


/*==================================================
        TARJETA 4
==================================================*/

.legal-box{

    display:flex;

    align-items:flex-start;

    gap:16px;

    padding:22px;

    border-radius:20px;

}

.legal-box input{

    flex-shrink:0;

    margin-top:4px;

}

.legal-box span{

    font-size:16px;

    line-height:1.85;

}

.btn-send-claim{

    width:100%;

    height:58px;

    border-radius:18px;

    font-size:24px;

    font-weight:700;

    gap:12px;

}

.btn-send-claim i{

    font-size:20px;

}


.legal-box{

    width:100%;

    box-sizing:border-box;

}

.btn-send-claim{

    margin-top:8px;

}


    /*====================================
            FOOTER
            CTA SUPERIOR
    ====================================*/

    .footer-cta{
    
        padding:55px 0;
    
    }
    
    .footer-cta .container{
    
        width:100%;
    
        max-width:420px;
    
        margin:0 auto;
    
        padding:0 20px;
    
    }
    
    .footer-cta-content{
    
        display:flex;
    
        flex-direction:column;
    
        gap:36px;
    
        text-align:center;
    
    }

    .footer-mini-title{
    
        font-size:14px;
    
        letter-spacing:3px;
    
        margin-bottom:18px;
    
    }
    
    .footer-cta-left{
    
        flex:unset;
    
    }
    
    .footer-cta-left h1{
    
        font-size:30px;
    
        line-height:1.20;
    
        margin-bottom:26px;
    
    }
    
    .footer-cta-left p{
    
        font-size:17px;
    
        line-height:1.75;
    
        max-width:330px;
    
        margin:0 auto;
    
    }


    .footer-cta-right{
    
        width:100%;
    
        max-width:320px;
    
        margin:0 auto;
    
        gap:16px;
    
        padding-top:0;
    
    }
    
    .btn-footer-primary,
    .btn-footer-whatsapp{
    
        width:100%;
    
        min-height:58px;
    
        border-radius:14px;
    
        font-size:17px;
    
    }
    
    .footer-cta-left p{
    
        margin:0 auto 18px;
    
    }


    /*====================================
            FOOTER PRINCIPAL
    ====================================*/

    .main-footer{
    
        padding:60px 0 35px;
    
    }
    
    .main-footer .container{
    
        width:100%;
    
        max-width:420px;
    
        margin:0 auto;
    
        padding:0 20px;
    
    }
    
    .footer-company{
    
        margin:0 auto;
    
        text-align:center;
    
    }
    
    .footer-logo{
    
        width:220px;
    
        margin-bottom:22px;
    
    }
    
    .footer-description{
    
        font-size:16px;
    
        line-height:1.75;
    
        margin:0 auto 24px;
    
    }
    
    .footer-license{
    
        display:flex;
    
        flex-direction:column;
    
        justify-content:center;
    
        gap:8px;
    
        padding:18px 20px;
    
        border-radius:18px;
    
        line-height:1.6;
    
    }
    

    /*====================================
            COLUMNAS DEL FOOTER
    ====================================*/
    
    .footer-grid{
    
        display:flex;
    
        flex-direction:column;
    
        gap:50px;
    
    }
    
    .footer-services,
    .footer-info,
    .footer-contact-column{
    
        width:100%;
    
        max-width:100%;
    
    }
    
    .footer-services{
    
        order:1;
    
    }
    
    .footer-info{
    
        order:2;
    
    }
    
    .footer-contact-column{
    
        order:3;
    
    }
    
    
    .footer-column h3{
    
        text-align:center;
    
        margin-bottom:24px;
    
        font-size:30px;
    
    }

    /*==================================================
            FOOTER BOTTOM RESPONSIVE
    ==================================================*/
    
    .footer-bottom-content{
    
        display:flex;
    
        flex-direction:column;
    
        align-items:center;
    
        justify-content:center;
    
        gap:22px;
    
        text-align:center;
    
    }
    
    .footer-bottom-links{
    
        display:flex;
    
        flex-direction:column;
    
        align-items:center;
    
        gap:14px;
    
        margin:0;
    
        width:100%;
    
    }
    
    .footer-separator{
    
        display:none;
    
    }    

    .footer-copy{
    
        white-space:normal;
    
        text-align:center;
    
        line-height:1.38;
    
        max-width:320px;
    
    }

    .footer-bottom-links a{
    
        display:flex;
    
        align-items:center;
    
        justify-content:center;
    
        gap:8px;
        
        line-height:0.20;
    
    }




}



/*==================================================
            CELULARES PEQUEÑOS
≤ 576px
==================================================*/

@media (max-width:576px){

}