*, *::before, *::after {
    box-sizing: border-box;
}

body {
    color: #fff;
    font-family: "Open Sans",sans-serif;
    margin: 0;
	font-weight:600
}

.bg1{
	background:#000000 url(../images/background.jpg) no-repeat center center;
    background-size: cover;
	color:#ffffff;
    text-align: center;
    min-height: 100vh;
    padding: 25px;
}

header {background:#15132f;  text-align:center; height:103px; display:flex; align-items: center; justify-content:center; padding:0}
header img{position: absolute; left:2%}
header h1{color:#fff;font-weight:600; font-size:21px; width: 100%;
    position: absolute;
    z-index: 1;}

.logo {
    display: block;
    height: 2rem;
    margin: 0 auto;
}
.img-fluid {
    max-width: 100%;
    margin: 0 auto;
}

.flex-column{  
display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; 
  }
.mx-auto {
    margin: auto;
}

.main {
    display: flex;
    flex-direction: column;
    text-align: center;
}
.h2 {
    color: #ffffff;
    font-size:17px;
    line-height:20px;
    font-weight:700;
    text-align:center;
    margin-bottom:0
    }
.h1 {
    color: #ffffff;
    font-size:17px;
    line-height:20px;
    font-weight:700;
    text-align:center;
    margin-bottom:0}

.container {
    
    background-attachment: scroll;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: contain;
}
.p-20{padding:0 20px 20px 20px}
.language-picker p{margin-top:10px}
.grid {
    display: grid;
    grid-gap: 1rem;
}
.icons-input {
    position:relative;
}
.cta {
    border-radius: 1rem;
    margin-top: 0rem;
    position: relative;
    z-index: 25;
}
.cta__label {
    display: block;
    font-weight: 700;
    font-size: 1.125rem;
    text-align: center;
}

.main-input {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid #153050;
    border-radius: 12px;
    color: #4a4a4a;
    font-size: 21px;
    font-weight: 900;
    outline: none;
    padding: 2.1rem 2rem;
    width: 100%;
	height: 42px;
	text-indent: 103px;
    background-color: rgba(255, 255, 255, 0.5);
}
.gap-20{gap:20px}
.mt-20{margin-top:20px}
.mb-20{margin-bottom:20px}
.verification{align-items:center; justify-content: center; }
.otp-input {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid #153050;
    border-radius: 12px;
    color: #4a4a4a;
    font-size: 21px;
    font-weight: 900;
    outline: none;
    padding: 2.1rem 2rem;
    width: 100%;
	height: 42px;
	text-align: center;
    background-color: rgba(255, 255, 255, 0.5);
}
::placeholder {
  color: #bababa;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
 color: #bababa;
}

::-ms-input-placeholder { /* Microsoft Edge */
 color: #bababa;
}

.margin-price {
    font-size: 13px;
    font-weight: bold;
    margin-top: 15px;
    text-align: center;
}

.button {
    background: linear-gradient(to bottom, #00C93C, #007e26);
    border: 1px solid #000000;
    border-radius: 10px;
    color: #ffffff;
    display: block;
    font-size: 150%;
    font-weight: 600;
    text-align: center;
    width: 100%;
	padding: 4.5% 0;
	margin: 0 auto;
	cursor: pointer;
}
h2{font-size:130%; color: #ffffff;}
.bw-100{max-width:100%!important}
.button:hover{ background : linear-gradient(to bottom, #007e26, #005018);}
.button-image{background:transparent; border:0; cursor:pointer; width:167px; margin:0 auto}
.button-image:focus{outline:0}
.text-center{text-align:center}
legend{ color: #293174;text-align: center; font-size:16px; line-height:20px}
footer {text-align:left; font-size:11px; margin-top:18px; font-weight: 100; padding:5px}
footer .sms{margin-right:3px}
footer a, .link-blue{color:#00C93C;}
footer .tyc{font-size:16px;text-decoration:none; text-align:center; display: block; margin-top:20px;font-weight:600}
footer .tyc:hover{text-decoration:underline;}
.radius{border-radius:20px;}

.country-code {
    position:absolute;
    font-size:150%;
    color:#0000007e;
    width:80px;
    height:60px;
padding-left: 42px;
display: flex;
    align-items: center;
	left: 10px;
    top: 5px;
}
.confirmation-box {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}
.confirmation-box .congratulation-img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 500px) {
  .confirmation-box .congratulation-img {
    height: 300px; /* altura fija deseada */
    width: 100%;   /* el ancho sigue siendo responsive */
    object-fit: contain; /* muestra toda la imagen sin recortes */
  }
}
.confirmation-box .congratulation-text {
    position: absolute;
    top: 50%;
    left: 40%;
    transform: translate(-35%, -50%);
    font-size: 12px;
    color: #fff; /* Asegurate de que el texto contraste con la imagen */
    z-index: 2;
}

#lines {    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
}

@media screen and (max-width: 768px){
    header img{width:40px}
    header {height:60px}
    footer {font-size:10px}
    .main-input{font-size:100%}
}
@media screen and (orientation: landscape) and (min-width: 640px) {
    .cta #step1, .cta #step2 {max-width:401px; margin:0 auto;}
    .h1{font-size:17px; line-height:22px; font-weight:700}
    .container {max-width:815px; margin:0 auto;}
}
.cta #step3 h2{font-weight:normal}
.subscribe-button{background:#ffcc00; background: rgb(255,228,109);
background: linear-gradient(180deg, rgba(255,228,109,1) 0%, rgba(255,138,0,1) 100%); border-radius:150px; color:#fff; cursor:pointer; text-decoration:none; height:46px; width:250px;display: flex;align-items: center;justify-content: center;text-shadow: -1px -1px 1px rgba(255,255,255,.1), 1px 1px 1px rgba(0,0,0,.5);
-webkit-box-shadow: 2px 5px 16px 0px #0B325E, inset 0px -29px 15px -7px rgba(0,0,0,0.07); 
  transition: 0.3s;
  box-shadow: 0px 4px 10px -2px rgba(0, 0, 0, 0.3);
}

.subscribe-button:hover{ box-shadow: 0 0 rgba(0, 0, 0, .3);}

.hide {
    display:  none;
 }

 .language-picker {
    /*left: 80%;*/
	text-align:right;
    position: relative;
 }
 .flex{display:flex;gap:10px}
 
@media screen and (min-width: 768px){
	 footer {width:600px;margin:0 auto;}
	 .cta #step3 h2{
		font-size: 140%;
        line-height: 120%;
		max-width: 80%;
        margin: 0 auto;
	}
		.confirmation-box{padding:10px}
 }