:root {
  --radio1: 10px;
  --radio2: 20px;
  --white: #ffffff;
  --blue: #6178FF;
  --orange: #FF7C5A;
  --grey: #333333;
  --black: #000000;
  --aqua: #00F9C4;
  --green: #39B54A;
  --violet: #F292FF;
}

@media (min-width: 1600px) {}
@media (max-width: 1200px) {}
@media (max-width: 1024px) {

    html,
    body{
        overflow-x:hidden;
    }

    .mobile{
        display: block;
    }
    .desktop{
        display: none !important;
    }

    h2 {
        margin: 0 0 10px 0;
    }
    .hero {
    height: 300px;
    padding-top:45px;
    width: auto;

    /* background: red; */
    }
        p {
        font-size: 14px;
        margin: 0 0 20px 0;
        line-height: 22px;
    }
        .img-chica img {
            width: 100%;
    }
        .dest1 {
        width: 165px;
        height: auto;
        position: absolute;
        top: 20px;
        left: 10%;
    }
        .dest2 {
        width: 125px;
        height: auto;
        position: absolute;
        top: 40px;
        left: 67%;
    }
        .dest3 {
        width: 104px;
        height: 114px;
        position: absolute;
        top: 220px;
        left: 30px;
    }
        .titulo {
        position: absolute;
        top: 78%;
        left: 0;
        width: 100%;
        z-index: 1;
        box-sizing: content-box;
    }
        .titulo h1 {
        display: flex;
        flex-direction: column;
        text-align: center;
        width: 100%;
        font-size: 20px;
        /* line-height: 0; */
    }
    h1 {
    text-align: center;
    color:#fff;
    }
        .titulo span {
        background-color: var(--violet);
        padding: 0;
        color: var(--orange);
        border-radius: var(--radio1);
        margin: 0 auto;
        width: 100%;
    }
        .subtitulo {
        position: absolute;
        width: 100%;
        background-color: var(--orange);
        text-align: center;
        top: 90%;
        left: 0;
        padding: 16px 0 16px 0;
        border-radius: var(--radio1);
        box-sizing: border-box;
        z-index: 9996;
        font-size: 20px;
    }
        .subtitulo h3 {
        margin: 0 auto;
        color: var(--white);
        text-align: center;
        font-size: 16px;
        line-height: 20px;
    }
    

    body.no-scroll {
    overflow: hidden;
    overscroll-behavior: none;
    }

    .contact {
            border: solid 2px var(--orange);
            background-color: var(--orange);
            /* margin: 0 0 0 10px; */
            transition: all 0.2s ease;
            border-radius: 10px;
            margin: 0 7px;
            width: 100%;
    }
    .contact:hover {
        border: solid 2px var(--white);
        background-color: var(--white);
        color: var(--orange);
    }
    .ico-menu {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }
    .col-3-3 {

        grid-template-columns: repeat(1, 1fr);
        gap: 0;
    }
        #beneficios {
        margin-top: 0;
    }
        .benef-ind, .adv-ind {

        padding: 20px 30px;
    
    }
        .benef-ind p, .adv-ind p {
            margin: 0;
    }
        section, footer {
        padding: 0 0 80px 0;
        width: 100%;
    }
        .col-2-2 {
        grid-template-columns: repeat(1, 100%);
        gap: 20px;
    }
        .envios-list h3, .entrega h3 span {
        text-align: center;
        width: 100%;
        margin: 10px 0;
        padding: 16px 8px;
        box-sizing: border-box;
        border-radius: var(--radio2);
    }
        .entrega h3 br {
            display: none;
        }
        .envios-ind p span {
    font-size: 4.4vw;
    line-height: 3.8vw;
    clear: both;
    width: 100%;
    display: block;
    }
        .envios-list h1 {
        text-align: center;
    }
        .envios-cont {
    
    grid-template-columns: repeat(2, 49%);
    
    gap: 1%;
    
    row-gap: 1%;
    
    justify-content: space-between;
    }
        .serv-cont {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 3%;
    }
        .serv-ind img{
        
        width: 50%;
        
    }
        
        .serv-ind h3 {
        text-align: center;
        color: var(--violet);
        border: solid 3px var(--violet);
        border-radius: 50px;
        padding: 3px 0 3px 20px;
        margin: 20px 0 20px 0;
        float: right;
        width: 100%;
        font-size: 20px;
        text-align: center;
        box-sizing: border-box;
    }
        .serv-ind p {
        text-align: center;
        font-weight: 700;
        float: right;
        width: 100%;
    }
        #faq {
        margin-top: 0;
        padding: 40px 0 0 0;
    }
        .entrega h1, .entrega h3 {
        text-align: center;
        margin-bottom: 30px;
    }
        .benef-ind, .adv-ind {
    
    display: flex;
    
    flex-direction: column;
    }
    .faq, .form-cont  {
        width: 90%;
    
    }
        .envios .imagen {
            /* background-color: red; */
            max-width: 50%;
            margin: 0 auto;
        }
        .serv-ind {
        display: flex;
        align-items: center;
        flex-direction: column;
    }
        .serv-ind-cont{
        width: 80%;
        display: flex;
        flex-direction: column;
    }
        .delivery-cont {
    
    display: flex;
    
    flex-direction: column;
    }
        .logo-delivery img {
        max-width: 200px;
        margin: 0px auto;
    
    }
        .banner-delivery {
        margin: 40px auto 0;
        padding: 20px 0;
        width: 100%;
    }
        .delivery-txt p {
        font-size: 18px;
        text-align: center;
    }
    .benef-ind h2, .benef-ind p{
            text-align: center;
            font-size: 18px;
        }
        .botones-cont {
        width: 100%;
    
    }
        .boton {
        width: 100%;
        padding: 20px 40px;
    }
        .boton a img {
        width: auto;
        height: 30px;
    
    }
        .num-cont {
        flex-direction: column;
    }
        .num-cont span {
        margin: 0 0 10px 0;
        text-align: center;
    }
        .envios-ind p {
    
        text-align: center;
    }
        .envios-ind {
        padding: 20px 20px;
    
    }
        .serv-ind img {
        margin: 0 auto;
        width: 70%;
    }
        .footer {
        margin: 0 auto;
        margin-top: 30px;
        padding: 0;
        width: 90%;
        display: flex;
        flex-direction: column;
    }
        .logo-footer {
    
        margin: 0 auto;
    }
        .redes {
        display: flex;
        flex-direction: row;
        margin: 20px auto;
        width: 80px;
        justify-content: space-around;
    }
        .footer h1{
        text-align: center;
        margin: 20px 0 0 0;
    }
        .footer p {
        text-align: center;
    
    }
        .menu-footer {
    
    /* display: none; */
    }
        .menu-footer .menu{
    
    /* display: none; */
    
    position: relative;
    
    /* color: var(--violet); */
    
    text-align: center;
    
    height: auto !important;
    
    left: auto;
    
    background-color: transparent !important;
    }
        .footer-resto {
        display: flex;
        flex-direction: column;
    }
        .benef-ico {
        margin: 0 auto 20px;
    }
        .legales h1, .imprimir h1{
        width: 90%;
        font-size: 28px;
        line-height: 34px;
        margin: 0 auto 40px !important;
    }
        .faq, .legales-cont {
        width: 90%;
    
    }
        .legales-cont {
        padding: 40px 30px;
    
    }
        .imprimir {
    
        margin: 0 0 0 0;
    }
        .faq-cont, .legales-cont {
        margin: 0 auto 0;
    
    }
        .faq h2 {
        font-size: 18px;
        line-height: 22px;
    }
        input[type="radio"]:checked ~ div {
        max-height: auto !important;
        display: contents;
    }
        .sucursales {
        width: 90%;
    
    }
        .sucursal-ind {
        display: flex !important;
        flex-direction: column !important;
            box-sizing: border-box;
            padding: 20px 20px;
    }
    .sucursal-img {
        margin: 0 0 20px 0;
    }
        .sucursal-info h2 {
            font-size: 20px;
            line-height: 26px;
    }
        .sucursal-info h3 {
        font-size: 16px;
        margin: 0 0 20px 0;
    }
        .compra h1 {
        text-align: center;
        font-size: 28px;
        line-height: 34px;
    }
        .compra {
        padding: 40px 0;
        width: 90%;
    }
        .footer .menu a {
        font-size: 14px;
    
    }
        .pagos img {
        width: 140px;
        margin: 0 auto;
    }
        .firma{
        width: 100% !important;
        /* background-color: red; */
        display: inline-block !important;
    }
            .firma a{
        text-align: center !important;
        float: none !important;
        margin: 40px auto !important;
        display: block;
    }
/* =========================
   MOBILE MENU REAL
========================= */

.mobile-menu-open{
    width:52px;
    height:52px;

    border-radius:50%;
    right: 10px;

    background:#5D6BFF;

    position:relative;

    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    cursor:pointer;

    z-index:99999;
}

/* hamburguesa */
.mobile-menu-open span,
.mobile-menu-open span::before,
.mobile-menu-open span::after{
    content:'';

    position:absolute;

    width:22px;
    height:2px;

    background:#fff;
}

.mobile-menu-open span::before{
    transform:translateY(-7px);
}

.mobile-menu-open span::after{
    transform:translateY(7px);
}

/* transición suave */
.mobile-menu-open span,
.mobile-menu-open span::before,
.mobile-menu-open span::after{
    transition:.25s ease;
}

/* línea central desaparece */
.mobile-menu-open.active span{
    background:transparent;
}

/* línea superior */
.mobile-menu-open.active span::before{
    transform:rotate(45deg);
}

/* línea inferior */
.mobile-menu-open.active span::after{
    transform:rotate(-45deg);
}

/* PANEL */
#header .content{
    margin-left:10px;
    margin-right:10px;
    box-sizing:border-box;
}

#header .header{
    display:flex;
    align-items:center;
    justify-content:space-between;

    width:100%;
}

#header nav{
    display:flex;
    align-items:center;
}

.mobile-menu{
    position:fixed;

    top:70px;
    right:-110%;

    width:calc(100vw - 20px);

    transition:.3s ease;

    overflow:hidden;

    width:100%;

    border-radius:var(--radio1);
    margin:0;

    list-style:none;

    transition:.3s ease;

    z-index:99998;

    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    align-items:stretch;
}

/* visible */
.mobile-menu.active{
    right:0px;
}

/* header azul */
.mobile-menu::before{
    content:'';

    position:absolute;

    top:22px;
    left:22px;
    right:22px;

    height:60px;
    background:#5660D8;

    border-radius:24px;
}

/* items */
.mobile-menu li{
    display:block !important;

    width:100% !important;

    margin:0 !important;
    padding:0 !important;

    position:relative;
width:100%;
    flex:none;
    z-index:2;
}

/* links */
.mobile-menu li a{
    display:flex !important;
    width:100% !important;

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

    padding:14px 25px !important;
 position:relative;

 background:#F3F0E8 !important;

    color: var(--blue) !important;

    text-decoration:none;
    font-size:25px;
    font-weight:700;

    border-bottom:none;
    box-sizing:border-box;
}

.mobile-menu li:not(:last-child) a::after{
    content:'';

    position:absolute;

    bottom:0;
    left:25px;
    right:25px;

    height:2px;

    background:#E8B8A5;
}

/* rounded */
.mobile-menu li:first-child a{
    border-top-left-radius:22px;
    border-top-right-radius:22px;
}

.mobile-menu li:last-child a{
    border-bottom:none;

    border-bottom-left-radius:22px;
    border-bottom-right-radius:22px;
}

/* CLOSE */

.mobile-menu-close{
    position:absolute;

    top:32px;
    right:32px;

    width:44px;
    height:44px;

    border-radius:50%;

    background:#E19EFF;

    z-index:5;

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

    cursor:pointer;
}

/* X */
.mobile-menu-close span::before,
.mobile-menu-close span::after{
    content:'';

    position:absolute;

    width:18px;
    height:2px;

    background:#fff;
}

.mobile-menu-close span::before{
    transform:rotate(45deg);
}

.mobile-menu-close span::after{
    transform:rotate(-45deg);
}
}