/* Fonts */

/* Resets */

::selection {
    background-color: #34303d;
    color: #fff;
}

/*scroll bar*/
/* width */
::-webkit-scrollbar {
    width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    border-radius: 5px;
    background-color: #dddddd;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #01d0d3;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.img-fluid {
    width: 100%;
}

.noPadding {
    padding: 0;
}

.row {
    padding: 0 !important;
    margin: 0 !important;
}

.row.no-gutters {
    margin-right: 0;
    margin-left: 0;
}

.row.no-gutters>[class^="col-"],
.row.no-gutters>[class*="col-"] {
    padding-right: 0;
    padding-left: 0;
}

section.noPadding {
    padding: 0em 0;
}

/* Fonts */
/* Fonts */

body {
    font-family: "IQOS";
}

body,
input,
textarea,
select {
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-display: swap;
}

h1 {
    font-size: clamp(1.5rem, 1.44rem + 0.3vw, 1.8rem);
    font-weight: 600;
}

h2 {
    font-size: clamp(1.4rem, 1.36rem + 0.2vw, 1.6rem);
    font-weight: 600;
}

h3 {
    font-size: clamp(1rem, 0.94rem + 0.3vw, 1.3rem);
}

p {
    font-size: clamp(0.9rem, 0.86rem + 0.2vw, 1.1rem);
}

li,
label {
    font-size: clamp(0.8rem, 0.78rem + 0.1vw, 0.9rem) !important;
    font-weight: 500;
}

.displayTitle {
    font-size: clamp(1.8rem, 1.46rem + 1.7vw, 3.5rem);
    font-weight: 600;
}

.smallTxt {
    font-size: 0.7rem !important;
    font-weight: 400;
}

/* links */
a {
    color: #f73939;
    text-decoration: underline;
    transition: color 0.3s;
}

a:hover,
a:active,
a:focus {
    color: #fe4912 !important;
}

/* Buttons */
.btn {
    font-style: normal;
    font-weight: 400;
    font-size: 1em;
    padding: 0.8em 1.3em !important;
    text-decoration: none;
    transition: color 0.4s, border 0.3s;
    position: relative;
    transition: color 0.3s, background-color 0.3s;
    text-transform: none !important;
    -webkit-border-radius: 0.4em;
    -ms-border-radius: 0.4em;
    -o-border-radius: 0.4em;
    border-radius: 0.4em;
}

.titleSnipet {
    display: none;
}

.cs-hero-003 .cta_hero {
    max-width: 270px;
}

.cs-hero-003 .cta_hero,
.btn_form {
    background-color: #01d0d3;
    color: #34303d;
    font-weight: 600;
    text-transform: initial;
    border-radius: 1rem;
    border: 0;
}

/*Landing page*/
header {
    background-color: #01d0d3;
    position: relative;
    top: 0;
    width: 100%;
    z-index: 10;
    transition: 0.3s ease-in-out;
}

header .navbar-nav .nav-link {
    color: #34303d;
    text-decoration: none;
    font-weight: 600;
    position: relative;
}

header .navbar-nav .nav-link.active:after {
    content: "";
    position: absolute;
    transform: translate(-50%, -50%);
    width: 50%;
    height: 2px;
    background-color: #34303d;
    left: 50%;
    bottom: -5%;
    transition: 0.3s;
}

header.fixed {
    position: sticky;
    top: .2px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    transition: 0.3s ease-in-out;
}

/* Hero Banner */
.hero-banner {
    background-image: url(https://image.oxxoparati.com/lib/fe3711727364047f731770/m/1/ebff8012-2979-4065-9946-a861b28e4c87.jpg);
    background-size: cover;
    background-position: center center;
    min-height: 70vh;
    position: relative;

    /* &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
        z-index: 1;
    } */

    .content-banner {
        position: relative;
        display: block;
        text-align: left;
        z-index: 2;

        h1 {
        color: #fff;
        span {
            color: #00d1d2;
        }
        }
        svg {
        height: clamp(4rem, 1.8665rem + 3.4446vw, 6rem);
        width: auto;
        * {
            fill: #fff;
        }
        }
        .cta_hero {
                display: inline-block;
                background-color: #01d0d3;
                border: 2px solid #01d0d3;
                color: #000;
                max-width: 270px;
            }
            .cta_hero:hover, .cta_hero:focus, .cta_hero:active {
                background-color: #fff;
                border-color: #fff;
                color: #000!important;
            }

    }
}





/* SECTION PRIMEROS PASOS */

.sec-primeros-pasos {

    h3 {
        color: #34303d;
        font-weight: 600;

        span {
            font-weight: 600;
            color: #01d0d3;
        }
    }

    .device-iluma {
        align-items: center;
        width: 100%;
        font-weight: 600;
        background-color: #f6f4f0;
        border-radius: 0.5rem;

        img.img-fluid {
            display: block;
            margin: 0 auto;
            max-width: 400px;
            width: 100%;
        }
        p.available {
            font-size: 1.15rem;
            /* font-size: clamp(1rem, 0.84rem + 0.2583vw, 1.15rem); */
        }
        p.available-type {
            max-width: 180px;
            width: 100%;
            margin: 0 auto 1rem;
            text-align: left;
        }
        .dot {
            position: relative;
            padding-left: 1.5rem;
            &::before {
                content: "";
                position: absolute;
                left: 0;
                top: 25%;
                transform: translateY(0%);
                width: 1rem;
                height: 1rem;
                background-color: #a8e0e0;
                border-radius: 50%;
            }
        }
        .dot.black {
            &::before {
                background-color: #343942;
            }
        }
        ul {
            list-style: none;
            padding: 0;
            margin: 0 auto 30px;
            max-width: 300px;
            width: 100%;

            img {
                max-width: 50px;
                height: auto;
            }
            li {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                gap: 1rem;
                justify-content: flex-start;
                font-weight: 600;

                &:not(:last-child) {
                    margin-bottom: 1rem;
                }
            }
        }
    }

    .cta_hero {
        display: inline-block;
        background-color: #34303d;
        color: #fff;
        text-transform: initial;
        border-radius: 1.5rem;
        text-decoration: none;
        padding: .5rem 1.5rem;
        transition: .3s ease-in-out;
        min-width: 250px;

        &:hover {
            background-color: #000;
            color: #fff !important;
        }
    }
}

.precios-bg {
    padding-top: 60px;
    background-repeat: no-repeat;
    background-position: 50% 0%;
    background-size: cover;
    background-image: url(https://image.oxxoparati.com/lib/fe3711727364047f731770/m/1/b5a9bde1-57c5-4db4-9369-969d4de41431.jpg);
    /* min-height: 750px; */
    aspect-ratio: 1920 / 1008;
    width: 100%;
}
/* SECTION APP SPIN */
.cs-hero-003.benefits {
    min-height: auto;
    font-weight: bold;
    background-color: transparent;
}
.cs-hero-003.benefits img {
    display: block;
    max-width: 100px;
    height: auto;
    margin: 0 auto 1rem;
}
.cs-hero-003.benefits h3 {
    font-weight: 600;
}


/* SECTION APP SPIN */
.section-appSpin {
    background-color: #efefef;
    min-height: initial;

    h2 {
        span {
            color: #01d0d3;
        }
    }

    .logo-appSpin {
        max-width: 90px;
        width: 100%;
    }

    .downloadApp {
        max-width: 150px;
        width: 100%;
        border-radius: 0.5rem;
        position: relative;
        bottom: 0;
        transition: 0.3s ease-in-out;
        display: inline-block;

        &:hover {
            bottom: 0.4rem;
            transition: 0.3s ease-in-out;
        }
    }
}

/* SECTION COTACTO */
.sec-contacto {
    background-color: #01d0d3;
    min-height: initial;

    h3 {
        color: #34303d;
        font-weight: 600;

    }


    .cta_hero {
        display: inline-block;
        background-color: #fff;
        color: #34303d;
        text-transform: initial;
        border-radius: 1.5rem;
        text-decoration: none;
        padding: .5rem 1.5rem;
        transition: .3s ease-in-out;

        &:hover {
            background-color: #000;
            color: #fff !important;
        }
    }
}

/*SECTION STORE LOCATOR*/

.store-locator {
    background-color: #fff;
    min-height: initial;
}

.store-locator iframe {
    width: 100%;
    min-height: 65dvh;
}

/*Thank ypu page*/

.wrapLanding {
    display: grid;
    grid-template-rows: auto 1fr auto;
    position: relative;
    min-height: 100dvh;

    header {
        position: relative;
    }

    img {
        max-width: 200px;
        width: 100%;
    }
}

/*Modal POPUP*/
.modal-dialog .img-fluid {
  width: 100%;
  max-width: 200px;
  margin: 0 auto;
}
.modal-dialog .cta_hero {
    display: inline-block;
    max-width: 200px;
    width: 100%;
    padding: .5em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    font-size: .9em;
    border-radius: 1.5em;
    border: 1px solid #01d0d3;
    transition: .3s ease;

    background-color: #01d0d3;
    color: #34303d;
    font-weight: 600;
    text-transform: initial;
    border-radius: 1rem;
    border: 0;
}

/*Footer*/

footer {
    background-color: #34303d;
    color: #fff;
}

footer p {
    font-size: clamp(0.9rem, 0.86rem + 0.2vw, 1.1rem);
}

footer a {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
}

footer a:hover {
    color: #01d0d3 !important;
}

/*Responsive*/

@media only screen and (max-width: 1024px) {
    .store-locator iframe {
        width: 100%;
        min-height: 150dvh;
    }
    .hero-banner  .content-banner  .cta_hero {
      transform: translateY(8.5rem);
    }
}

@media only screen and (max-width: 991px) {
    header .navbar-nav .nav-link.active:after {
        width: 30%;
        left: 15%;
    }

    .store-locator iframe {
        width: 100%;
        min-height: 150dvh;
    }
    .hero-banner {
        background-position: center bottom;
        background-image: url(https://image.oxxoparati.com/lib/fe3711727364047f731770/m/1/ea0208f3-5232-46eb-8bd5-6ec060332922.jpg);
        min-height: 85vh;
    }
    .sec-primeros-pasos .cta_hero.my-2 {
        text-align: center;
    }
    .precios-bg {
        /* min-height: 900px; */
        background-position: center bottom;
        aspect-ratio: 630 / 990;
        width: 100%;
        background-image: url(https://image.oxxoparati.com/lib/fe3711727364047f731770/m/1/5b0cb4d8-24a1-490c-8b57-550cefac6e62.jpg);
    }
}

/*Medium Devices*/
@media only screen and (max-width: 767px) {
    .cs-hero-003 .deviceIQOS {
        max-width: 320px;
    }

    .store-locator iframe {
        width: 100%;
        min-height: 180dvh;
    }
}
/*Medium Devices*/
@media only screen and (max-width: 380px) {
    .store-locator iframe {
        width: 100%;
        min-height: 200dvh;
    }
}