* {margin: 0;padding: 0;}
html, body {width: 100vw;height: 100vh;font-family: 'Open Sans', sans-serif;}

.column-left {float: left; width: 60%; height: 100vh;background-image: url("../images/bg-1-min.jpg"); height: 100%; background-position: center;background-repeat: no-repeat;background-size: cover;}
.column-left-hombre {float: left; width: 60%; height: 100vh;background-image: url("../images/bg-mujer-min.jpg"); height: 100%; background-position: center;background-repeat: no-repeat;background-size: cover;}
.column-left-mujer {float: left; width: 60%; height: 100vh;background-image: url("../images/bg-hombre-min.jpg"); height: 100%; background-position: center;background-repeat: no-repeat;background-size: cover;}
.column-left img {float: right;margin-top:40px;}

#column-right {float: left;width: 40%; height: 100vh;text-align: center;display: flex;align-items: center;justify-content: flex-start;background: #ffffff;flex-direction: column;}
#content-top {width:75%;}
#content-top {flex: 0 0 auto;margin-top: auto;}

h1 {font-size:41px;color: #FF4453;font-weight: 800;margin: 0 0 24px;text-shadow: 1px 1px 2px rgba(0,0,0,0.1);font-family: 'Montserrat', sans-serif;letter-spacing: -0.5px;line-height: 1.2;}
h1 b {font-weight: 800;color: #FF4453;font-family: 'Montserrat', sans-serif;}
h1 u {text-decoration: none;border-bottom: 3px solid #FF4453;padding-bottom: 2px;display: inline-block;}
h1 b u {border-bottom: 3px solid #FF4453;}
.subtitle {font-size:24px;color: #000000;font-weight: 700;margin: 0 70px 40px;letter-spacing: -0.3px;line-height: 1.3;font-family: 'Open Sans', sans-serif;}

hr {height:2px;width:300px;border-width:0;color:#FF4453;background-color:#FF4453;margin: 0 auto 40px;}

.title {font-size:21px;color: #000000;font-weight: 700;margin: 0 70px 40px;letter-spacing: -0.2px;line-height: 1.4;font-family: 'Open Sans', sans-serif;}
.number3.title, .number4.title, .number5.title {font-weight: 800;color: #FF4453;font-family: 'Montserrat', sans-serif;}
.number3.title {margin: 0 70px 10px;}
.number3.title::before, .number4.title::before {content: url('../images/check-red.svg');width:24px;height: auto;margin-right: 10px;}

.step2,.step3,.step4,.step5,.step6,.number1,a.btnBig,.number2,.number3,.number4,.number5,.number6{display:none}
.step2::after {content: url('../images/step1-white.png');height: 6px;width: 248px;}
.step3::after {content: url('../images/step2-white.png');height: 6px;width: 248px;}
.step4::after {content: url('../images/step3-white.png');height: 6px;width: 248px;}
.step5::after {content: url('../images/step4-white.png');height: 6px;width: 248px;}
.step6 ul {list-style:none;padding-bottom: 30px;}
.highlight {font-weight: 700;}

ul.buttons {list-style:none;margin:0 30px 48px}
ul.buttons li {display: inline-block;margin:0 8px 48px;}
a.btn {border: 2px solid #FF4453;border-radius: 100px;color: #FF4453;padding: 12px 50px;text-align:center;text-decoration: none;display: inline-bloxck;font-size: 18px;font-weight: 700;letter-spacing: -0.2px;transition: all 0.3s ease;font-family: 'Open Sans', sans-serif;}
a.btn:hover {background-color: #FF4453 !important;color:#ffffff;transform: translateY(-2px);box-shadow: 0 4px 8px rgba(255, 68, 83, 0.3);}
a.btnBig {border: 2px solid #FF4453;color: #ffffff;background: #FF4453;border-radius: 100px;padding: 12px 50px;text-align:center;text-decoration: none;display: inline-bloxck;font-size: 18px;font-weight: 700;letter-spacing: -0.2px;transition: all 0.3s ease;font-family: 'Open Sans', sans-serif;}
a.btnBig:hover {border: 2px solid #FF4453;color:#FF4453 !important;background:#ffffff !important;transform: translateY(-2px);box-shadow: 0 4px 8px rgba(255, 68, 83, 0.3);}
.loading {float: left;width: 100%;text-align: center;margin: 10px 0px;}
.loading::before {content: url('../images/loading-yellow.svg');height: 8px; width: 152px;}

#terms {position: relative;margin: 6px auto 0;z-index: 0;width: 100%; margin-bottom: 0;}
#terms ul {list-style:none;display: flex;justify-content: center;gap: 8px;white-space: nowrap;}
#terms ul li {display: inline;color:#0a58ca;font-size:12px;margin: 0;text-align:center;}
#terms ul li+li::before {content: "|"; color: #9aa3ab; margin: 0 8px 0 4px;}
#terms ul li a {text-decoration: none;color:#0a58ca;}
#terms ul li a:hover {text-decoration: underline;}

.bold-text {
    font-weight: 700;
    color: #ff0000;
}

@media (max-width: 1920px) {
    .column-left, .column-left-hombre, .column-left-mujer {width: 57%;}
    #column-right {width: 43%;}
    h1 {font-size:36px;font-family: 'Montserrat', sans-serif;}
    .subtitle {font-size:21px;font-family: 'Open Sans', sans-serif;}
    .title {font-size:18px;font-family: 'Open Sans', sans-serif;}
    .number3.title, .number4.title, .number5.title, .number6.title {margin: 0 0 24px;}
}
@media (max-width: 1440px) {
    .column-left, .column-left-hombre, .column-left-mujer {width: 55%;}
    .column-left img {width: 65px; height: auto;}
    #column-right {width: 45%;}
    h1 {font-size:24px;font-family: 'Montserrat', sans-serif;}
    .subtitle {font-size:18px;font-family: 'Open Sans', sans-serif;margin: 0 0 30px;}
    .title {font-size:16px;font-family: 'Open Sans', sans-serif;margin: 0 0 30px;}
    a.btn,a.btnBig {padding: 8px 36px;font-size: 16px;}
    .check {width: 18px;}
    .number3.title {margin: 0 0 10px;}
    .number4.title, .number5.title, .number6.title {margin: 0 0 24px;}
    .step6 ul {padding-bottom: 10px;}
}
@media (max-width: 1024px) and (orientation: landscape) {
    .column-left, .column-left-hombre, .column-left-mujer {width: 55%;}
    .column-left img {width: 65px; height: auto;}
    #column-right {width: 45%;}
    h1 {font-size:24px;font-family: 'Montserrat', sans-serif;}
    .subtitle {font-size:18px;font-family: 'Open Sans', sans-serif;margin: 0 0 30px;}
    .title {font-size:16px;font-family: 'Open Sans', sans-serif;margin: 0 0 30px;}
    a.btn,a.btnBig {padding: 8px 36px;font-size: 16px;}
    .check {width: 18px;}
    .number3.title {margin: 0 0 10px;}
    .number4.title, .number5.title, .number6.title {margin: 0 0 24px;}
    .step6 ul {padding-bottom: 10px;}
}
@media (max-width: 1024px) and (orientation: portrait) {
    .column-left, .column-left-hombre, .column-left-mujer {float: none; width: 100%; height: 40%;}
    .column-left {background-image: url("../images/bg-1-mobile-min.jpg");}
    .column-left-hombre {background-image: url("../images/bg-mujer-mobile-min.jpg");}
    .column-left-mujer {background-image: url("../images/bg-hombre-mobile-min.jpg");}
    .column-left img {width: 55px; height: auto;}
    #column-right {float: none;width: 100%; height: 70%;display: flex;align-items: center;justify-content: center;border-top-left-radius: 50px;border-top-right-radius: 50px;position: absolute;bottom: 0;}
   h1 {font-size:24px;font-family: 'Montserrat', sans-serif;}
    .subtitle {font-size:18px;font-family: 'Open Sans', sans-serif;margin: 0 0 30px;}
    .title {font-size:16px;font-family: 'Open Sans', sans-serif;margin: 0 0 30px;}
    a.btn,a.btnBig {padding: 8px 36px;font-size: 16px;}
    .check {width: 18px;}
    .number3.title {margin: 0 0 10px;}
    .number4.title, .number5.title, .number6.title {margin: 0 0 24px;}
    .step6 ul {padding-bottom: 10px;}
    .loading::before {content: url('../images/loading-red.svg');}
}
@media (max-width: 764px) and (orientation: landscape) {
    .column-left, .column-left-hombre, .column-left-mujer {height: 50%;float: none; width: 100%;}
    .column-left img {width: 45px; height: auto;}
    #column-right {background: #ffffff;height: 70%;float: none;width: 100%;display: block;border-top-left-radius: 50px;border-top-right-radius: 50px;position: relative;bottom: 0;-webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none;}
    #content-top {width:85%;text-align: center;margin: 0 auto;padding: 20px;}
    h1 {font-size:21px;font-family: 'Montserrat', sans-serif;}
    .subtitle {font-size:14px;font-family: 'Open Sans', sans-serif;margin: 0 0 16px;color:#414141;}
    hr {width:150px;color:#FF4453;background-color:#FF4453;margin: 0 auto 16px;}
    .title {font-size:14px;font-family: 'Open Sans', sans-serif;margin: 0 0 24px;color:#414141;}
    ul.buttons {margin:0 0 30px}
    ul.buttons li {margin:0 8px 30px;}
    a.btn,a.btnBig {border: 2px solid #ff4453;color: #ff4453;padding: 8px 36px;font-size: 16px;}
    a.btn:hover {background-color: #ff4453 !important;color:#ffffff;}
    a.btnBig {border: 2px solid #FF4453;color: #ffffff;background: #FF4453;}
    a.btnBig:hover {border: 2px solid #FF4453;color:#ff4453 !important;background:#ffffff !important;}
    .number3.title::before, .number4.title::before {content: url('../images/check-red.svg');}
    .number3.title {margin: 0 0 10px;}
    .number4.title, .number5.title, .number6.title {margin: 0 0 20px;}
    .step6 ul {padding-bottom: 10px;}
    .step2::after {content: url('../images/step1-red.png');}
    .step3::after {content: url('../images/step2-red.png');}
    .step4::after {content: url('../images/step3-red.png');}
    .step5::after {content: url('../images/step4-red.png');}
    #terms {bottom:auto;}
}
@media (max-width: 764px) and (orientation: portrait) {
    .column-left, .column-left-hombre, .column-left-mujer {height: 35%;float: none; width: 100%;}
    .column-left img {width: 45px; height: auto;}
    #column-right {background: #ffffff;height: 75%;float: none;width: 100%;display: flex;align-items: center;justify-content: center;border-top-left-radius: 50px;border-top-right-radius: 50px;position: absolute;}
    #content-top {width:95%;}
    h1 {font-size:21px;font-family: 'Montserrat', sans-serif;}
    .subtitle {font-size:14px;font-family: 'Open Sans', sans-serif;margin: 0 0 16px;color:#414141;}
    hr {width:150px;color:#FF4453;background-color:#FF4453;margin: 0 auto 16px;}
    .title {font-size:14px;font-family: 'Open Sans', sans-serif;margin: 0 0 24px;color:#414141;}
    ul.buttons {margin:0 0 30px}
    ul.buttons li {margin:0 8px 30px;}
    a.btn,a.btnBig {border: 2px solid #ff4453;color: #ff4453;padding: 8px 36px;font-size: 16px;}
    a.btn:hover {background-color: #ff4453 !important;color:#ffffff;}
    a.btnBig {border: 2px solid #FF4453;color: #ffffff;background: #FF4453;}
    a.btnBig:hover {border: 2px solid #FF4453;color:#ff4453 !important;background:#ffffff !important;}
    .number3.title::before, .number4.title::before {content: url('../images/check-red.svg');}
    .number3.title {margin: 0 0 10px;}
    .number4.title, .number5.title, .number6.title {margin: 0 0 20px;}
    .step6 ul {padding-bottom: 10px;}
    .step2::after {content: url('../images/step1-red.png');}
    .step3::after {content: url('../images/step2-red.png');}
    .step4::after {content: url('../images/step3-red.png');}
    .step5::after {content: url('../images/step4-red.png');}
    #terms {bottom:auto;}
}
@media (max-width: 325px) and (orientation: portrait) {
    #content-top {width:90%;}
    h1 {font-size:18px;font-family: 'Montserrat', sans-serif;}
    .subtitle {font-size:12px;font-family: 'Open Sans', sans-serif;margin: 0 0 12px;}
    hr {margin: 0 auto 12px;}
    .title {font-size:12px;font-family: 'Open Sans', sans-serif;margin: 0 0 24px;}
    ul.buttons {margin:0 0 18px}
    ul.buttons li {margin:0 8px 18px;}
    a.btn,a.btnBig {padding: 6px 24px;font-size: 14px;}
    .number3.title {font-size:11px;margin: 0 0 10px;}
    .number4.title, .number5.title, .number6.title {font-size:11px;margin: 0 0 16px;}
    .step6 ul {padding-bottom: 10px;}
}

#countdown-timer {
    position: relative;
    width: 100%;
    background: rgba(255, 68, 83, 0.9);
    color: white;
    padding: 8px 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 0;
    box-shadow: none;
    z-index: 1;
    margin-top: 10px;
    align-self: stretch;
}

#bottom-section {width: 100%;margin-top: auto;display: flex;flex-direction: column;align-items: center;}

#countdown-seconds {
    font-size: 14px;
    font-weight: 700;
    background: white;
    color: #FF4453;
    padding: 1px 6px;
    border-radius: 3px;
    min-width: 20px;
    text-align: center;
}

@media (max-width: 764px) {
    #countdown-timer {
        font-size: 11px;
        padding: 6px 10px;
    }
    
    #countdown-seconds {
        font-size: 13px;
        padding: 1px 5px;
    }
}