/*@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap");*/
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');


:root {
    --tipo-primary: "Nunito Sans", sans-serif !important;
    --main-grid-padding: 5vw;
    --main-grid-max-width: 1400px;
    --selection: #02b378;
    --whatsapp-button-height: 10px;
    --header-height: 64px
}

* {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: var(--tipo-primary);
    box-sizing: border-box;
    vertical-align: baseline
}

*:focus {
    box-shadow: none !important
}

body {
    height: 100vh;
    font-size: 100%;
    line-height: 1.4em;
    hyphens: none;
    font-smooth: always;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

img,
picture,
video,
iframe,
figure {
    display: block;
    object-fit: cover;
    object-position: center center
}

a {
    display: block;
    text-decoration: none;
    color: inherit;
    font-size: inherit
}

p a {
    display: inline
}

html {
    scroll-behavior: smooth
}

h1,
h2,
h3,
h4,
h5,
h6,
span,
a,
blockquote {
    font-weight: inherit;
    font-style: inherit;
    text-decoration: none;
    color: inherit;
    margin-bottom: 0;
    word-break: keep-all !important
}

div {
    word-break: keep-all !important
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: ''
}

form,
textarea,
select,
button,
label {
    font-family: inherit;
    font-size: inherit;
    hyphens: none;
    background-color: transparent;
    color: inherit;
    display: block
}

table,
tr,
td {
    border-collapse: collapse
}

table {
    border-collapse: separate;
    border-spacing: 0 10px
}

svg {
    display: block;
    fill: currentColor
}

::selection {
    background-color: var(--selection);
    color: var(--white)
}

.nav-link {
    font-weight: 700
}

.menu-icon {
    font-size: 40px
}

header ul {
    font-size: medium
}

footer {
    z-index: 100
}

@media (max-width: 768px) {
    footer div p span {
        font-size: 10pt !important
    }
}

.footer__logo {
    width: 213px;
    min-width: 195px;
    height: 53px;
    min-height: 44px
}

.footer__footer-container {
    padding-left: 4%;
    border-left: 1px solid #3e3d3d
}

.footer-container__p--blue {
    color: #4196cd;
    font-weight: 600
}

.footer-container__p {
    color: white
}

@media (max-width: 768px) {
    #footer {
        padding-bottom: var(--whatsapp-button-height) !important
    }
}

footer a {
    text-decoration: underline
}

.btn-float {
    border: 4px white solid;
    border-right: none;
    position: fixed;
    right: 0;
    top: 60%;
    background-color: #25d366;
    padding: 7px 35px 7px 40px;
    border-radius: 35px 0 0 35px;
    z-index: 9999;
    display: flex;
    align-items: center;
    max-height: 52px
}

.btn-float-link {
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: 1px;
    font-weight: 700;
    color: white;
    font-size: 22px;
    text-decoration: none
}

@media screen and (max-width: 767px) {
    .btn-float {
        bottom: 0;
        border-bottom: none;
        border-left: none;
        border-radius: 0;
        justify-content: center;
        text-align: center;
        padding: 0.5em;
        font-size: 1.2em;
        top: auto;
        width: 100%;
        z-index: 9999
    }
}

.btn-float:hover a {
    color: #23682B
}

section {
    overflow: hidden
}

@media (max-width: 768px) {
    .section-title {
        font-size: 2.2em !important
    }
}

.text-shadowy {
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.316)
}

.text-dark-shadow {
    text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.56)
}

.section-content {
    align-items: center;
    display: flex
}

.section-content-button {
    color: white;
    letter-spacing: 0.5px;
    font-weight: 600;
    background-color: transparent;
    border: 2px solid white;
    border-radius: 25px 25px 25px 25px;
    margin-top: 10px;
    max-width: 250px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding-top: 3px;
    transition: all 0.5s
}

.section-content-button:hover {
    text-decoration: none;
    background-color: white;
    border-color: white;
    color: #333333
}

.section-content-element {
    flex: 1;
    font-weight: bold;
    line-height: normal
}

.section-content-element-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center
}

@media (max-width: 576px) {
    .section-content {
        position: relative;
        display: flex;
        align-items: center;
        flex-direction: column-reverse
    }
}

.section-title {
    margin-top: 2.8rem !important;
    font-weight: 900;
    font-size: 2.8em;
    text-align: center
}

.background-picture {
    object-fit: cover;
    overflow: visible
}

picture {
    position: absolute;
    z-index: -100
}

body {
    background-color: #d8edfd !important
}

.txt-comic {
    font-family: "Shantell Sans", cursive;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal
}

.txt-comic span {
    font-family: "Shantell Sans", cursive;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal
}

.btn-promo {
    background-color: #446EC0;
    border-radius: 20px;
    font-size: 28px;
    color: white;
    padding: 10px;
    width: 300px;
    display: inline-block;
    margin: 30px 0 0
}

#inicio-section {
    padding: 80px 20px;
    background: url(../images/landingpage-herobacking.png) #d8edfd center bottom/cover !important
}

.navbar-brand img {
    height: 115px !important;
    position: absolute !important;
    top: 0px !important
}

#header {
    padding: 5px 0
}

.section-title {
    font-family: "Shantell Sans", cursive;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    position: relative;
    z-index: 1
}

.mecanica-subtitle {
    color: #444C60;
    font-size: 22px;
    line-height: 32px
}

.text-mecanica {
    font-size: 32px;
    color: #446EC0
}

.card-container {
    position: relative;
    overflow: visible
}

.card-container::before {
    content: "";
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    background: url(../images/forma-1.png) center center no-repeat;
    background-size: contain;
    z-index: 0
}

#ganadores-section {
    background: url(../images/backing-ganadores.jpg) left top !important;
    background-position-y: top !important;
    background-repeat: repeat-x !important;
    padding: 120px 0;
    margin-bottom: 0 !important
}

#ganadores-section .foreground-image {
    bottom: 0 !important;
    top: auto !important;
    width: 100%
}

#ganadores-section .foreground-image img {
    width: 100%
}

#faq-section {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 80px !important;
    background-position-y: top !important
}

#faq-section .text-help {
    color: #444C60;
    font-size: 22px
}

#faq-section .btn-ayuda {
    background-color: #5BB8B5;
    border-radius: 20px;
    font-size: 20px;
    color: white;
    padding: 10px;
    width: 300px;
    display: inline-block;
    margin: 30px 0 0;
    text-align: center
}

.terms-input {
    width: 100%;
    display: flex;
    justify-content: start
}

.terms-input input {
    margin: 0 !important
}

.terms-input a {
    display: contents
}

#ayuda-section {
    padding: 30px 0
}

#ayuda-section .divided-content-img {
    width: auto !important;
    max-height: 180px
}

#ayuda-section .section-content-element-image {
    justify-content: end
}

#ayuda-section .section-content-text {
    text-align: start !important;
    color: #F0FFB9;
    font-size: 60px
}

#ayuda-section .section-content-text p {
    font-family: "Shantell Sans", cursive;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal
}

.register-form {
    background: white;
    border-top-left-radius: 0;
    border-bottom-left-radius: 30px;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    box-shadow: 0px 5px 16px rgba(0, 0, 0, 0.1);
    color: #666666;
    border: 0
}

.register-form .title-contact {
    font-weight: 600;
    color: #446EC0
}

.register-form input,
.register-form textarea,
.register-form .dp__input_valid,
.register-form .form-control {
    border: 1px solid #8CAF0C !important;
    border-radius: 10px;
    margin: 5px 0 10px;
    min-height: 50px
}

.register-form .m-phone-number-input {
    width: 100%;
    border-radius: 10px;
    margin: 5px 0 10px
}

.register-form .form-btn {
    background-color: #446EC0;
    text-transform: uppercase;
    border-radius: 99px
}

.register-form .form-btn :hover {
    background-color: #C0E5F0
}

.txt-magic {
    border-radius: 30px !important;
    line-height: 20px
}

.txt-blue {
    color: #446EC0 !important
}

#Contacto-section .section-title {
    position: relative;
    padding-bottom: 20px;
    background-image: url(../images/contact-bottom.svg);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: auto
}

#faq-section .faqs .accordion-button {
    background-color: white;
    border: 2px solid #C0E5F0;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    margin-bottom: 15px
}

#faq-section .faqs .accordion-button p {
    margin: 0 !important
}

#faq-section .faqs .accordion-button:not(.collapsed) {
    background-color: white !important;
    border: 2px solid #C0E5F0 !important;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1)
}

#faq-section .section-title {
    position: relative;
    padding-bottom: 20px;
    background-image: url(../images/faq-bottom.svg);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: auto
}

.reg-right .nav-link {
    padding: 15px 30px;
    background-color: #9FBD59;
    color: white !important;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    margin-right: 6px;
    border: 0px
}

.reg-right .nav-link.active {
    background-color: white;
    color: #298927 !important
}

.header__title {
    color: #446EC0;
    font-size: 32px
}

.header__description {
    color: #183875
}

.m-phone-input[data-v-e2bf70df] {
    min-width: auto !important
}

.m-input-wrapper[data-v-78090be8] {
    overflow: unset !important
}

.m-input-wrapper.--default-border {
    border-color: transparent
}

#footer .img-footer {
    width: 210px
}

#footer h3 {
    color: white;
    font-weight: 700;
    font-size: 20px
}

#footer .legales {
    color: #FBE06A;
    font-weight: 600;
    font-size: 16px
}

#footer a {
    color: #C0E5F0;
    margin-bottom: 10px;
    text-decoration: none
}

#footer a:hover {
    color: white;
    text-decoration: underline
}

.swiper .swiper-button-prev:after,
.swiper .swiper-button-next:after {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #8E4C0C !important
}

.swiper .swiper-button-prev.swiper-button-disabled,
.swiper .swiper-button-next.swiper-button-disabled {
    opacity: 0.5
}

.swiper .swiper-button-prev,
.swiper .swiper-rtl .swiper-button-next {
    left: 0 !important
}

.swiper .swiper-button-next,
.swiper .swiper-rtl .swiper-button-prev {
    right: 0px !important
}

@media screen and (min-width: 1200px) {
    #premios-section .divided-content-img {
        margin-left: 30px
    }
}

@media screen and (min-width: 1200px) and (max-width: 1400px) {
    #premios-section .divided-content-img {
        margin-left: 0px
    }
}

@media screen and (min-width: 768px) {
    #premios-section .section-content-element.section-content-text {
        justify-content: start !important
    }

    #faq-section .accordion.accordion-flush {
        width: 90% !important
    }

    #inicio-section .divided-content-img,
    #premios-section .divided-content-img {
        max-height: 460px
    }
}

@media screen and (max-width: 768px) {

    #premios-section .section-content-element.section-content-text,
    #premios-section .divided-content-img {
        width: 90% !important;
        margin: auto
    }

    #ganadores-section {
        padding: 20px 0
    }

    #footer .img-footer {
        margin: 0 auto
    }

    #footer h3 {
        font-size: 16px
    }

    #footer .legales,
    #footer a {
        font-size: 12px
    }
}

#faq-section {
    font-weight: 600 !important
}

#faq-section strong {
    font-weight: 800 !important
}

@media screen and (max-width: 594px) {
    .reg-right .nav-link {
        padding: 15px 5px;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
        font-size: 12px;
        width: 126px
    }

    .register-form {
        border-bottom-left-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px
    }

    .txt-magic {
        border-radius: 10px !important
    }

    .form-btn {
        padding: 8px 46px !important
    }
}

@media screen and (max-width: 991px) {
    .navbar-brand img {
        height: 48px !important;
        position: relative !important;
        top: 0px !important
    }

    .navbar-expand-lg {
        padding: 0 10px
    }

    .container {
        max-width: 90%
    }

    .img-bottom {
        display: none
    }

    #bdNavbar {
        background-color: white !important
    }

    #bdNavbar .nav-link {
        color: #446EC0 !important
    }
}

@media screen and (max-width: 576px) {
    #premios-section .section-content-text p>span {
        font-size: 14pt !important;
        line-height: 20pt !important
    }

    .premios-lg {
        font-size: 34pt !important
    }

    .btn-promo {
        font-size: 22px;
        padding: 10px 5px;
        max-width: 210px
    }

    #inicio-section {
        padding: 0 20px 80px
    }

    #faq-section .btn-ayuda {
        width: 265px
    }

    .back-winners {
        width: 100% !important
    }
}

.foreground-image {
    top: 0
}

#premios-section .margin-y-divided-content {
    z-index: 1;
    position: relative
}

#premios-section {
    overflow: visible
}

.foreground-coin img {
    max-height: 350px
}

.foreground-extra-coin {
    z-index: 0;
    right: 0
}

.foreground-extra-coin img {
    max-height: 300px
}

@media screen and (min-width: 768px) {
    .foreground-extra-coin {
        margin-top: 300px
    }
}

@media screen and (max-width: 820px) and (min-width: 768px) {
    .foreground-coin img {
        max-height: 150px !important
    }

    .foreground-extra-coin img {
        max-height: 120px !important
    }
}

@media (max-width: 768px) {
    .foreground-coin img {
        max-height: 150px !important
    }

    .foreground-extra-coin img {
        max-height: 120px !important
    }

    .foreground-extra-coin {
        margin-top: 400px
    }
}

@media (max-width: 767px) {

    .winners-table.table-responsive .winners-item.winner-item:nth-child(odd),
    .winners-table.table-responsive .winners-item.winner-item:nth-child(even) {
        position: relative
    }

    .winners-table.table-responsive .winners-item.winner-item:nth-child(odd)::after,
    .winners-table.table-responsive .winners-item.winner-item:nth-child(even)::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 3%;
        width: 94%;
        border-bottom: #fee5ca solid 1px
    }

    .winners-item .custom-font:first-of-type {
        font-weight: bolder
    }

    .winners-item .custom-font {
        width: 100%;
        margin-bottom: 0.5em
    }
}

#premios-section .anchor {
    top: calc(var(--header-height)* -2)
}

.btn-promo:hover {
    background-color: #EA6A57;
    color: #FFFFFF
}

.terms-input .error_message {
    margin-top: 5px;
    display: flex;
    justify-content: center;
    align-items: center
}

main {
    margin-top: var(--header-height)
}

.card {
    background: transparent !important
}

.anchor {
    display: block;
    position: relative;
    top: calc(var(--header-height)*-1);
    visibility: hidden
}

.footer-a:hover {
    color: #35c4c1
}

.burger-menu-absolute {
    top: 17px;
    right: 20px
}

.rights-reserved::after {
    content: '®';
    font-size: 60%;
    position: relative;
    top: -0.75em;
    left: -0.1em
}

.dropdown-item-text {
    font-size: 14px;
    color: #FFFFFF
}

.dropdown-item {
    font-size: 14pt
}

.dropdown-item:hover {
    color: #FFFFFF
}