:root{
    --container-width: 1572px;
    --margin-x-auto: auto;
}

*, *::before, *::after, 
*:before, *:after{
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background-color: #F5F5F5;
}

a {
    text-decoration: none;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.offer-list li::before {
    content: "\2022"; 
    color: #1C9DF4;
    font-weight: bold;
    display: inline-block;
    width: 1em;
}    

.social-red {
    margin-left: 1em;
}

nav {                    
    width: 100%;
}

img {
    max-width: initial;
    
}

header {
    position: sticky;
    top: 0;
    z-index: 99;
}

nav.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px;
    background-color: #F5F5F5;    
}

.nav-branding:nth-child(1){
    display: none;
}
.nav-branding .desktop-logo {
    max-width: 100%;
    width: 180px;
    display: none;
}

.nav-branding .mobile-logo {
    width: 72px; 
height: auto;
}

.desktop-wrap-phone{
    display: none;
}

.mobile-wrap-phone {
    display: flex;
    align-items: center;
    gap: 10px;
}

.phone {
    color: #019BF2;
    font-size: 32px;
}

.phone-image {
    width: 34px;
}

.hamburger {
    display: block;
    cursor: pointer;
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: #019BF2;
}

.hamburger.active .bar:nth-child(2) {
    opacity: 0;

}
.hamburger.active .bar.bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.hamburger.active .bar.bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

.nav-menu {
    position: fixed;
    left: -100%;
    top: 100px;
    gap: 20px;
    flex-direction: column;
    background-color: white;
    width: 100%;
    text-align: center;
    transition: 0.3s;
    min-height: 100vh;
    padding: 20px;
}

.nav-menu.active {
    left: 0;
}

.nav-item a{
    border-bottom: 1px solid #e9e9e9;
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    margin: 16px 0;
    align-items: center;
    padding: 15px 0;
    color: #86888C;
}

.nav-item-content {
    font-size: 14px;
    text-align: left;
}

.nav-item-content span{
    font-size: 13px;
}

.nav-item .active {
    color: #019BF2;
}

.navbar img.icons {
    width: 30px;
}

img.icons.first-icon {
    width: 25px;
}

img.icons.last-icon {
    width: 20px;
}

strong.first-item-option {
    margin-left: 5px;
}

span.nav-item-content.last-item-option {
    margin-left: 10px;
    line-height: 18px;
}

a:not(.nav-branding) {
    margin: auto;
}

.container-custom{
    max-width: 1572px;
    margin-left: auto;
    margin-right: auto;
}

.main .banner .banner-multioffer {
    background: url(https://image.m.movistarempresas.com/lib/fe2911737364047f7d1278/m/2/b48caac0-2222-45ab-a135-83c8aa3d0efe.png) center center no-repeat!important;
    background-size: cover;
    width: 100%;
    height: 500px;
}

/*.btn.primary.btn-big-multioffer {
    background-color: #08273b;
}*/

.inner-multilanding {
    display: flex;
    width: 100%;
    justify-content: space-between;
    max-width: 1500px;
    margin: 0 auto;
}

.inner-cards {
    width: 90%;
    margin: 0 auto;
    padding-bottom: 20px;
}

.option-buttons {
    display: inline-flex;
    justify-content: center;
    gap: 22px;
    width: 90%;
    max-width: 352px;
}
    

.image-form {
    display: none;
}

.title-cards{
    padding-top: 50px;
}

.first-title {
    text-align: center;
    color: #4D555F;
    font-size: 40px;
    line-height: 47px;
}

.cards {
    display: flex;
    gap: 50px;
    flex-wrap: wrap;
}

.card {
    width: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0px 1px 3px #00000029;
    border: 1px solid #707070;
    border-radius: 8px;
    position: relative;

}

.card-image {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.card .strong-big {
    font-size: 24px;
}

.card .strong-medium {
    font-size: 20px;
}

.card .strong-small {
    font-size: 18px;
}

.card .blue {
    color: #019DF4;
}

.card .purple {
    color: #A13EA1;
}

.card-text {
    padding: 29px 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


.card-text-top {
    color: #313235;
}

.card-text-top .title {
    font-size: 22px;
}

.card-text-top span {
    font-size: 18px;
}

.card-text-top img {
    width: 18px;
    height: auto;
}

.card-text-bottom small {
    text-decoration: line-through;
    color: #707070;
}

.card .card-one, .card-three {
    background-color: #FFFFFF;
}

.card.card-two {
    background-color: #FFFFFF;
}

.card.card-four {
    background-color: #FFFFFF;
}

.cards .tag {
    height: 37px;
    width: 259px;
    border-radius: 8px;
    background: #a13ea1;
    color: #ffffff;
    display: block;
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    /*padding: 0 32px;*/
    white-space: nowrap;
    text-align: center;
}

span.tag-text {
    display: flex;
    justify-content: center;
    margin-top: 2.5%;
}

.btn-multioffer {
    max-width: 214px;
    height: 57px;
    font-size: 18px;
}

.inner-bottom-banner {
    background: url(https://image.m.movistarempresas.com/lib/fe2911737364047f7d1278/m/2/98de8aba-4cbe-4d39-ab0e-aad6d1e41bf6.png) center center no-repeat;
    background-size: cover;
    background-position: bottom;
    padding: 30px;
    margin-top: 50px;
    width: 100%;
    max-width: 1572px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #C9C9C9;
    display: flex;
    flex-direction: column-reverse;
}
.bottom-banner-images{
    margin-top: 40px;
    text-align: center;
}
 .bottom-banner-images img{
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    max-width: 330px;
}


.bottom-banner-text{
    text-align: center;
}


.btn-more-options {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    color: #019BF2;
    border: 1px solid #019BF2;
    border-radius: 28px;
    max-width: 190px;
    min-height: 60px;
}

.btn-more-options:hover {
    background: #019BF2;
    color: #FFFFFF;
}

.option-buttons {
    display: inline-flex;
    justify-content: center;
    gap: 22px;
    width: 90%;
    max-width: 352px;
}

.option-buttons-ar {
    display: inline-flex;
    justify-content: center;
    width: 90%;
    max-width: 200px;
    flex-direction: column;
}

.duo-option-ar {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    color: #019BF2;
    border: 1px solid #019BF2;
    border-radius: 28px;
    min-width: 200px;
    min-height: 60px;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.duo-option-ar:hover {
    background: #019BF2;
    color: #FFFFFF;
}


.inner-benefits-multioffer {
    padding: 25px 0;
    background-color: #ffffff;
    width: 100%;
    box-shadow: 0px 1px 3px #00000029;
    border-radius: 8px;
    text-align: center;
}


.space {
    height: 200px;
}

.benefits-title {
    font-size: 25px;
    color: #313235;
    justify-content: center;
    margin-bottom: 30px;
    display: flex;
}

.title-benefits {
    color: #333333;
    font-size: 13px;
}

.subtitle-benefits {
    font-size: 11px;
    color: #999999;
    margin: 0;
}

.icons-benefits {
    display: flex;
    justify-content: space-between;
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    flex-wrap: wrap;
    gap: 20px;
}

.benefits-icon{
    width: calc(33.333% - 20px);
}

.box-image img{
    height: 33px;
}


.box-image, .text {
    text-align: center;
}

.text {
    padding-top: 7px;
}

.inner .inner-footer-home {
    width: 90%;
    max-width: var(--container-width);
    margin-left: var(--margin-x-auto);
    margin-right: var(--margin-x-auto);
}


/*Pack duo Perú*/
.switch-section{
    display: none;
}
.active-option-block{
    display: block;
}

/*@media (min-width: 570px){
    .cards .tag{
        height: 34px;
        top: 20px;
        right: 30px;
        left: initial;
        transform: translateX(0);
    }
    .card{
        flex-direction: row;
    }
}*/

@media (max-width: 640px){
    .btn.primary.btn-big-multioffer {
        background-color: #08273b;
    }
}

@media (min-width: 700px){
    .cards .tag{
        height: 37px;
        right: initial;
        top: -20px;
        left: 50%;
        transform: translateX(-50%);
    }
    .card{
        flex-direction: row;
    }
}

@media (min-width: 992px) {
    .nav-branding .desktop-logo {
        display: block;
    }

    .nav-branding .mobile-logo {
        display: none;
    }

    .mobile-wrap-phone {
        display: none;
    }

    .desktop-wrap-phone {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .text-phone {
        color: #939496;
        font-size: 16px;
    }

    .phone{
        font-size: 22px;
        display: block;
    }

    nav.navbar {
        background-color: #ffffff;
        padding: 20px 20px 0 20px;
    }

    .nav-menu {
        left: 0;
        display: flex;
        align-items: center;
        margin: 0;
        position: relative;
        flex-direction: row;
        background-color: transparent;
        min-height: auto;
        padding: 0;
        top: 0;
        justify-content: center;
        gap: 0;
        align-self: flex-end;
        width: 65%;
    }

    .hamburger {
        display: none;
    }

    .nav-item{
        width: 20%;
        max-width: 170px;
    }
    .nav-item a{
        border-bottom: none;
        padding: 21px 0;
        max-width: 180px;
        height: 70px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-right: 1px solid #DEDEDE;
        position: relative;
    }

    .nav-branding:nth-child(1){
        display: block;
    }

    .nav-item:nth-child(1) a {
        border-left: 1px solid #DEDEDE;
    }

    .nav-item .active {
        background-color: #F5F5F5;
        color: #019Df4;
    }

    .nav-item .active::before {
        content: '';
        position: absolute;
        left: 50%;
        top: 100%;
        width: 15px;
        height: 15px;
        transform: rotate(45deg) translate(-80%,-2.5px);
        transform-origin: center;
        background-color: #F5F5F5;
        z-index: -1;
    }

    .nav-item:hover a::before {
        content: '';
        position: absolute;
        left: 50%;
        top: 100%;
        width: 15px;
        height: 15px;
        transform: rotate(45deg) translate(-80%,-2.5px);
        transform-origin: center;
        background-color: #ffffff;
        z-index: -1;
    }

    .nav-item:hover .active::before {
        content: '';
        position: absolute;
        left: 50%;
        top: 100%;
        width: 15px;
        height: 15px;
        transform: rotate(45deg) translate(-80%,-2.5px);
        transform-origin: center;
        background-color: #F5F5F5;
        z-index: -1;
    }

    .nav-item-content {
        text-align: center;
    }

    .navbar img.icons {
        display: none;
    }

    .campaign-image {
        max-width: 550px;
        height: 200px;
        align-items: flex-start;
    }

    .btn-home {
        background-color: #08273b;
        color: #ffffff;
    }

    .image-form {
        display: block;
        margin: auto;
    }

    .option-buttons-ar {
        flex-direction: row;
        gap: 22px;
        width: 90%;
        max-width: 352px;
    }

    .inner-cards {
        width: 90%;
        max-width: 1572px;
        margin: 0 auto;
        padding-bottom: 50px;
    }

    .title-cards{
        padding-top: 70px;
    }

    .first-title{
        margin-bottom: 90px;
    }

    .cards {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 50px;
    }

    .cards .tag {
        width: 320px;
    }

    .card {
        width: calc(50% - 25px);
        flex-direction: row;
        justify-content: flex-end;
        
    }

    .card-text {
        width: 75%!important;
    }

    .card-text-top .title {
        font-size: 28px;
    }

    .card-image {
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
    }

    .inner-bottom-banner{
        width: 90%;
        flex-direction: row;
        min-height: 520px;
        align-items: center;
        justify-content: center;
        max-width: var(--container-width);
        margin-left: var(--margin-x-auto);
        margin-right: var(--margin-x-auto);
        border: 1px solid #4D555F;
    }

    .inner-bottom-banner .first-title{
        margin: 19px;
        font-size: 50px;
        line-height: 55px;
    }

    .bottom-banner-images img{
        max-width: 405px;
    }

    .inner-benefits-multioffer{
        margin-top: 80px;
        width: 90%;
        max-width: var(--container-width);
        margin-left: var(--margin-x-auto);
        margin-right: var(--margin-x-auto);
    }

    .box-image img{
        height: 39px;
    }

}

@media (min-width: 1200px) {

    .nav-item a {
      padding: 40px 0;
    }

    .text-phone {
        font-size: 20px;
    }

    .phone{
        font-size: 25px;
    }

    .nav-item a{
        height: 55px;
    }

    .benefits-icon{
        width: auto;
    }
}

@media (min-width: 1400px) {

    .text-phone {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .phone{
        display: inline-block;
    }

    .image-form {
        margin: auto;
    }
    
}