﻿div#graciasregistro .btn-dark {
    background-color: black;
    color: white;
    border-radius: 7px;
}

#hsx h2 {
    color: var(--bblack);
}

#hsx .row {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
}

#formx h2 {
    font-size: 30px;
    letter-spacing: -0.02em;
    font-family: "SF Pro Text";
    font-weight: 500;
}

#formx form {
    background-color: var(--wwhite);
    color: black;
}

#formx input {
    background-color: var(--gray4);
    border: none;
}

#formx .selectric {
    background-color: #f2f2f2 !important;
    border: none !important;
}

#formx .boton.boton-primario {
    border: none;
}

#formx .legal-send {
    margin-bottom: 32px;
    line-height: normal;
    letter-spacing: 0.06rem;
}

.input-error {
    border: 2px solid #ff6347 !important;
    border-radius: 4px;
    box-shadow: 0 0 5px #ff6347 !important;
}

.mc-lanzamiento-npi-2020-1 form .input, .mc-lanzamiento-npi-2020-1 form select {
    background-color: #f2f2f2 !important;
    border: none !important;
    border-radius: 10px;
    border-style: solid;
    border-width: 1px;
    color: black;
    margin-bottom: 0.9em;
    transition: border-color 1s;
    padding: 0.4em 0.7em;
    width: 100%;
}

div#hsx h1 {
    color: var(--bblack);
    font-size: 30px;
    font-family: "SF Pro Text";
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.02em;
    text-align: left;
}

    div#hsx h1 > b {
        font-size: 50px;
        font-family: "SF Pro Text";
        font-weight: 600;
        letter-spacing: -0.02em;
    }

#hsx img {
    margin: auto !important;
}

.degradado {
    font-size: 65px;
    background: #3a7bd5; /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #0ABDFF, #356FFF); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #0ABDFF, #356FFF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background-size: cover;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sub {
    font-size: 25px;
}

.promo-container {
    margin: 64px 0;
}

@media screen and (max-width: 690px) {
    #hsx .row {
        display: block;
        height: auto;
    }

    #formx .selectric {
        background-color: #f2f2f2 !important;
        border: none !important;
    }

    #hsx h1 {
        color: black;
        font-size: 20px;
        margin-bottom: 50px;
    }

    #hsx img {
        width: 50%;
        margin-top: 30px;
        margin: auto !important;
    }

    #hsx .row {
        display: block;
    }

    div#formx {
        margin-top: 30px;
    }
}

#carrusel-x {
    margin-bottom: -2px !important;
}

.alert-xx {
    margin-bottom: 50px;
    margin-top: 50px;
}

.bon-banc {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 5px;
    margin-top: 5px;
}

.row.bannerx.text-center img {
    margin: auto;
    margin-bottom: -20px;
}

.space-ban img {
    margin: auto;
}

.space-ban {
    margin-bottom: 40px;
}

@media (max-width: 700px) {
    .bon-banc {
        flex-direction: column;
        gap: 0px;
        margin-bottom: 20px;
        text-align: center;
    }

    .row.bannerx.text-center h3 {
        font-size: 21px;
        line-height: normal;
    }

    .container.principal-bd img {
        width: 65%;
    }

    .ee img {
        width: 80%;
    }

    #hsx h1 {
        color: black;
        font-size: 20px !important;
        margin-bottom: 50px;
    }

    #formx h2 {
        font-size: 20px;
        letter-spacing: -0.02em;
        font-family: "SF Pro Text";
        font-weight: 500;
    }

    div#hsx h1 {
        text-align: center;
    }
}



.grix {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    justify-content: center;
}

#nd h2 {
    font-size: 30px;
}

#nd .grix h2 {
    font-size: 20px;
}

#nd p {
    font-size: 20px;
}



#nd .ui img {
    margin: auto;
}

@media (max-width: 900px) {

    #nd h2 {
        font-size: 25px;
    }

    #nd .grix h2 {
        font-size: 15px;
    }

    #nd p {
        font-size: 15px;
    }

    .grix {
        grid-template-columns: repeat(2, 1fr);
    }
}


#carrusel-x {
    margin-bottom: -2px !important;
}

.alert-xx {
    margin-bottom: 50px;
    margin-top: 50px;
}

.bon-banc {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 5px;
    margin-top: 5px;
}

.row.bannerx.text-center img {
    margin: auto;
    margin-bottom: -20px;
}

.space-ban img {
    margin: auto;
}

.space-ban {
    margin-bottom: 40px;
}

@media (max-width: 700px) {
    .bon-banc {
        flex-direction: column;
        gap: 0px;
        margin-bottom: 20px;
        text-align: center;
    }

    .row.bannerx.text-center h3 {
        font-size: 21px;
        line-height: normal;
    }

    .container.principal-bd img {
        width: 65%;
    }

    .ee img {
        width: 80%;
    }
}

.hot-sale {
    background-color: var(--gray4);
    overflow: hidden;
}


.hot-sale
.hot-sale-iphone {
    display: flex;
    align-items: end;
    min-height: 512px;
    overflow: hidden;
    position: relative;
}

.hot-sale-iphone
.hot-sale-logo {
    position: absolute;
    height: 128px;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
}

.hot-sale-iphone
.iphone-17-pro {
    display: block;
    position: absolute;
    height: auto;
    left: 50%;
    transform: translateX(-50%);
    width: 75%;
}

.hot-sale-iphone
.iphone-17-pro-text {
    height: auto;
    position: absolute;
    top: 164px;
    left: 50%;
    transform: translateX(-50%);
    width: 75%;
}

.hot-sale
#formx form {
    background-color: var(--wwhite);
    border-radius: inherit;
    padding: 48px;
}

div#hsx.hot-sale h1 {
    color: var(--bblack);
    font-size: 24px;
    margin: 0;
    margin-bottom: 16px;
    line-height: 16px !important;
    text-align: center;
}

    div#hsx.hot-sale h1 > span.text-hot-sale {
        background-color: rgba(240, 0, 40, 1);
        border-radius: 4px;
        color: var(--wwhite);
        padding-inline: 8px;
        position: relative;
        z-index: 2;
    }

        div#hsx.hot-sale h1 > span.text-hot-sale:before {
            display: block;
            content: "";
            position: absolute;
            background-color: rgba(240, 0, 40, 1);
            height: 50px;
            filter: blur(128px);
            width: 100%;
            z-index: 1;
            top: 0;
            left: 0;
        }

    div#hsx.hot-sale h1 > span.text-hot-sale-white {
        font-size: 16px;
        font-weight: 400;
    }

.hot-sale
.row.promo-container {
    margin: 0;
    margin-top: 48px;
}

.hot-sale
#formx {
    background-color: var(--wwhite);
    box-shadow: 1px 1px 10px var(--gray3);
    border-radius: 24px 24px 0 0;
    align-self: end;
    padding-top: 15px;
}

    .hot-sale
    #formx .legal-send {
        color: var(--bblack);
        letter-spacing: -0.02em;
        font-family: "SF Pro Text";
        font-weight: 400;
    }

    .hot-sale
    #formx input {
        color: var(--bblack);
        background-color: var(--gray4) !important;
        border: none;
        padding-block: 12px;
        padding-inline: 16px;
    }

        .hot-sale
        #formx input:focus {
            outline: none;
            outline: 1px solid var(--wwhite);
        }

    .hot-sale
    #formx select {
        color: var(--bblack);
        background-color: var(--gray4) !important;
        border: none;
        padding-block: 12px;
        padding-inline: 16px;
    }

            .hot-sale
            #formx select:focus {
                outline: 1px solid var(--wwhite);
            }

.hot-sale
#formx .boton.boton-primario {
    display: block;
    margin-inline: auto;
}

@media only screen and (max-width: 900px) {
    .hot-sale #formx form {
        padding: 16px;
        padding-block: 24px;
    }

    .hot-sale .hot-sale-iphone {
        min-height: 450px;
    }
}

@media only screen and (max-width: 756px) {
    div#hsx.hot-sale h1 > span.text-hot-sale {
        display: block;
        line-height: normal;
        margin-top: 16px;
        margin-inline: auto;
        width: fit-content;
    }

    .row.promo-container
    .col-xs-12.col-sm-6 {
        align-self: end;
    }

    .hot-sale .hot-sale-iphone {
        min-height: 400px;
    }
}

@media only screen and (max-width: 690px) {
    .hot-sale
    .hot-sale-iphone {
        display: unset;
    }

    #hsx.hot-sale
    .hot-sale-iphone
    .iphone-17-pro {
        position: unset;
        width: 100%;
        margin: 0 !important;
        transform: unset;
    }

    #hsx.hot-sale
    .hot-sale-iphone
    .iphone-17-pro-text {
        position: unset;
        transform: unset;
        margin: 0 !important;
        width: 100%;
        margin-bottom: 16px !important;
    }

    #hsx.hot-sale
    .hot-sale-iphone
    .hot-sale-logo {
        height: auto;
        position: unset;
        transform: unset;
        width: 25%;
        margin: 0 !important;
    }

    .hot-sale #formx {
        margin-top: -30px;
    }
}
.special-offers-hot-sale {
    background-color: var(--gray4);
    padding-block: 28px;
}

.special-offers-hot-sale
.container {
    background-color: var(--wwhite);
    border-radius: 16px;
    padding: 16px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.special-offers-card {
    display: flex;
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(128px);
    border-radius: 16px;
    position: relative;
    z-index: 3;
}

.special-offers-card-left,
.special-offers-card-right {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 120px;
    max-width: 50%;
    width: 100%;
}

.special-offers-card-left {
    display: flex;
    align-items: center;
    flex-direction: column-reverse;
    background-color: var(--wwhite);
    border-radius: 16px;
    justify-content: center;
    padding: 48px 48px 128px 48px;
    position: relative;
}

.special-offers-card-right {
    position: relative;
}

/*.special-offers-hot-sale
.container:before {
    display: block;
    animation: bubble 8s linear alternate infinite;
    background-color: rgba(240, 0, 40, 1);
    content: "";
    filter: blur(128px);
    height: 256px;
    position: absolute;
    width: 256px;
    z-index: 2;
}*/

.special-offers-card
h2 {
    color: var(--bblack);
    font-size: 28px;
    font-family: "SF Pro Text";
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: normal;
    margin: 0;
    max-width: 756px;
    margin-inline: auto;
    width: 100%;
}

.special-offers-card
p {
    background-color: var(--wwhite);
    border-radius: 16px 16px 0 0;
    bottom: -16px;
    color: var(--bblack);
    font-size: 14px;
    line-height: normal;
    margin: 0;
    padding: 16px;
    position: absolute;
    width: 80%;
}

.special-offers-card
.special-offers-logo-hot-sale {
    display: block;
    height: 320px;
    margin-inline: auto;
    margin-block: 48px;
    width: auto;
}

.special-offers-logo-hot-sale-sale {
    height: 120px;
    margin-bottom: 36px;
    width: auto;
}

.wave-tag {
    animation: waveEffectTags 3s linear alternate infinite;
    animation-delay: var(--delay);
    display: inline-block;
    border-radius: 8px;
    background-color: transparent;
    padding-inline: 8px;
    margin-top: 8px;
    position: relative;
    z-index: 2;
}

   /* .wave-tag::before {
        display: block;
        content: "";
        background-color: rgba(240, 0, 40, 1);
        height: 100%;
        position: absolute;
        filter: blur(128px);
        width: 100%;
        z-index: 1;
    }*/

.special-offers-card-right
.iphone-17-pro {
    height: auto;
    position: absolute;
    bottom: -16px;
    width: 80%;
}

.special-offers-card-right
.iphone-17-pro-text {
    height: auto;
    width: 80%;
}

.special-offers-card-left
.boton.boton-primario {
    margin-top: 24px;
}

.hot-sale-banks {
    background-color: var(--wwhite);
    padding-bottom: 48px;
}

    .hot-sale-banks
    .space-ban {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        row-gap: 24px;
        margin-bottom: 0;
        padding: 48px;
    }

        .hot-sale-banks
        .space-ban
        img {
            box-shadow: 1px 1px 10px var(--gray3);
            border-radius: 16px;
            outline: 8px solid var(--wwhite);
            outline-offset: -7px;
        }

    .hot-sale-banks
    .boton.boton-primario {
        display: block;
        margin-inline: auto;
        width: fit-content;
    }


    @keyframes bubble {
        0% {
        transform: translate(0%, 0%)
    }

    50% {
        transform: translate(200%, 100%)
    }

    100% {
        transform: translate(400%, 0%)
    }
}

@keyframes waveEffectTags {
    from {
        background-color: rgba(240, 0, 40, 0);
        color: var(--bblack);
    }

    to {
        background-color: rgba(240, 0, 40, 1);
        color: var(--wwhite);
    }
}

@media only screen and (max-width: 996px) {
    .special-offers-card
    h2 {
        font-size: 24px;
    }

    .special-offers-card-right
    .iphone-17-pro {
        width: 100%;
    }

    .special-offers-card
    p,
    .special-offers-card p a {
        font-size: 12px;
    }
}

@media only screen and (max-width: 768px) {
    .special-offers-card {
        flex-direction: column-reverse;
    }

    .special-offers-card-left,
    .special-offers-card-right {
        max-width: 100%;
    }

    .special-offers-card
    p,
    .special-offers-card p a {
        font-size: 14px;
    }

    .special-offers-card-left {
        border-radius: 16px;
    }

    .special-offers-card-right {
        padding: 48px;
        padding-bottom: 0;
    }

        .special-offers-card-right
        .iphone-17-pro {
            position: unset;
        }

        .special-offers-card-right .iphone-17-pro-text {
            margin-bottom: 16px;
        }
}

@media only screen and (max-width: 480px) {
    .special-offers-card-right {
        padding: 16px;
        padding-bottom: 0;
    }

    .special-offers-card-left {
        padding-top: 16px;
        padding-inline: 16px;
    }

    .special-offers-card
    p,
    .special-offers-card p a {
        font-size: 12px;
    }
}

