#main-container-promo {
    min-height: 100vh;
    background-image: url("/content/dam/latinamerica/promo-pringles/assets/promos/do/popsaborbadbunny2025/bg_mo_home.png");
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

/* GLobales */
html {
    background-color: #E41E2B;
}

.footer {
    /*display: none;*/
    position: relative;
    z-index: 1;
}

#back-to-top{
        display: none;
}

.container {
    /* width: 100%; */
}

#scroll-down{

position: fixed;

bottom: 15px;

right: 15px;

border-radius: 50%;

border: 3px solid white;

padding: 10px;

cursor: pointer;

box-shadow: 0 4px 6px rgba(0,0,0,0.2);

transition: opacity 0.3s ease;

animation: bounce 1.5s infinite;

background-color: #E41E2B;

z-index: 2;
}

#scroll-down img{
    width: 100%;
    max-width: 20px;
}

#scroll-down:hover {
  background: #5555558c;
}

/*----------------------------------------------*/
#container1 {
    padding-top: 7rem;
}

#container1-title {

    text-align: center;

    color: white;

    text-transform: uppercase;

    font-size: 30px;

    text-shadow: 0 7px 0 #AD1F23;
}

#container1-imglanding {
    display: flex;
    justify-content: center;
}

#container1-imglanding img {
    width: 100%;
    max-width: 350px;
}

#container1-subtitle {
    text-align: center;
    color: white;
    font-size: 25px;
    text-transform: uppercase;
    text-shadow: 0 7px 0 #AD1F23;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#container1-subtitle>p {
    max-width: 340px;
}

#container2 {
    width: 100%;
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#container2>.container {
    width: 100%;
    display: flex;
    justify-content: center;
}

#container2>.text {
    width: 100%;
    display: flex;
    justify-content: center;
}

#container2-btn-whats {
    width: 100%;
    max-width: 370px;
    position: relative;
}

#container2-btn-cta {
    width: 100%;
    max-width: 370px;
    margin-top: 40px;
}

#container2-btn-cta>p {
    text-align: center;
    text-transform: uppercase;
    font-size: 20px;
    width: 100%;
    /* max-width: 300px; */
    background-color: white;
    padding: 15px 0px;
    border-radius: 40px;
    border: 3px solid #E41E2B;
    cursor: pointer;
}

#container2-btn-cta>p a {
    color: #E41E2B;
    text-decoration: none;
}

#container2-btn-whats-cta {
    display: flex;
    justify-content: center;
    /* width: 100%; */
}

#container2-btn-whats-cta>p {
    width: 100%;
}

#container2-btn-whats-cta>p a {
    display: block;
    text-align: center;
    color: #009033;
    text-transform: uppercase;
    font-size: 20px;
    width: 85%;
    background-color: white;
    padding: 15px 40px 15px 20px;
    border-radius: 40px;
    border: 3px solid #00BB3C;
    cursor: pointer;
    text-decoration: none;
}

#container2-btn-whats-icon {
    position: absolute;
    right: -10px;
    top: 8px;
}

#container2-btn-whats-icon img {
    width: 100%;
    max-width: 75px;
}

#container3 {
    margin-top: 100px;
}

#container3-pasos {
    padding-bottom: 5rem;
}

#container3-pasos-paso1 {
    display: flex;
    justify-content: center;
}

#container3-pasos-paso2 {
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

#container3-pasos-paso3 {
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

#container3-pasos-paso1 img {
    width: 100%;
    max-width: 300px;
    position: inherit;
    z-index: 1;
}

#container3-pasos-paso2 img {
    width: 100%;
    max-width: 300px;
}

#container3-pasos-paso3 img {
    width: 100%;
    max-width: 300px;
}

/* Footer promo */

#container-footer-promo {
    display: none;
}

#footer-promo {
    background-color: #E41E2B;
    font-family: 'Helvetica';
    color: white;
    text-transform: uppercase;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 15px;
}

#footer-promo-txt {
    padding: 30px 20px;
    max-width: 800px;
}

#footer-promo-txt p {
    margin: 0;
}

#footer-promo-container-legals {
    padding: 20px 0 40px;
}

#footer-promo-container-legals p {
    margin: 0;
    cursor: pointer;
}

#footer-promo-container-legals p a {
    color: white;
    text-decoration: none;
}

#asset_home_papa_1,
#asset_home_papa_2,
#asset_home_latasrojama,
#asset_home_latasverma,
#asset_home_tickets,
#asset_home_dmtf {
    display: none;
}

/* Animación de salto */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

@media(min-width: 900px) {
    #main-container-promo {
        background-image: url("/content/dam/latinamerica/promo-pringles/assets/promos/do/popsaborbadbunny2025/bg_dt_home.png");

    }

    #container1 {}

    #container1-title {}

    #container1-imglanding {
        display: none;
    }

    #container1-imglanding img {}

    #container1-subtitle {}

    #container1-subtitle>p {
        max-width: initial;
        margin: 0;
    }

    #container2 {}

    #container2-btn-whats {}

    #container2-btn-cta {}

    #container2-btn-whats-cta {}

    #container2-btn-whats-icon {}

    #container3 {}

    #container3-pasos {}

    #container3-pasos-paso1 {}

    #container3-pasos-paso2 {}

    #container3-pasos-paso3 {}

    #footer-promo {}

}

@media(min-width: 1200px) {
    #main-container-promo {
        background-image: url("/content/dam/latinamerica/promo-pringles/assets/promos/do/popsaborbadbunny2025/bg_dt_home.png");
        display: flex;
        flex-direction: column;
        position: relative;
    }

    #main-container-promo>div:nth-child(1) {
        order: 1;
    }

    #main-container-promo>div:nth-child(2) {
        order: 3;
        padding-bottom: 5rem;
    }

    #main-container-promo>div:nth-child(3) {
        order: 2;
    }

    #main-container-promo>div:nth-child(4) {
        order: 4;
    }

    #container1 {}

    #container1-title {
        display: flex;
        justify-content: center;
    }

    #container1-title p {
        font-size: 41px;
        max-width: 700px;
    }

    #container1-imglanding {}

    #container1-imglanding img {}

    #container1-subtitle {}

    #container1-subtitle>p {
        font-size: 26px;
    }

    #container2 {
        margin-top: 0;
    }

    #container2-btn-whats {}

    #container2-btn-cta {}

    #container2-btn-whats-cta {}

    #container2-btn-whats-icon {}

    #container3 {
        margin-top: 30px;
    }

    #container3-pasos {
        display: flex;
        justify-content: center;
        align-items: start;
        gap: 80px;
        padding-bottom: 1rem;
    }

    #container3-pasos-paso1 {}

    #container3-pasos-paso2 {
        margin-top: 0;
    }

    #container3-pasos-paso3 {
        margin-top: 0;
    }

    #footer-promo {
        position: relative;
        z-index: 1;
    }

    #asset_home_papa_1,
    #asset_home_papa_2,
    #asset_home_latasrojama,
    #asset_home_latasverma,
    #asset_home_tickets,
    #asset_home_dmtf {
        display: flex;
        position: absolute;
    }

    #asset_home_papa_1 {
        width: 100%;
        max-width: 100px;
        top: 8rem;
        left: 200px;
    }

    #asset_home_papa_2 {
        width: 100%;
        max-width: 200px;
        right: 100px;
        top: 5rem;
    }

    #asset_home_latasrojama {
        width: 100%;
        max-width: 300px;
        left: -110px;
        top: 12rem;
    }

    #asset_home_latasverma {
        bottom: -10rem;
        width: 100%;
        max-width: 400px;
        right: 0;
    }

    #asset_home_tickets {
        width: 100%;
        max-width: 200px;
        right: 0;
        top: 10rem;
    }

    #asset_home_dmtf {
        width: 100%;
        max-width: 350px;
        bottom: -5rem;
        left: 80px;
    }

}