*{
margin:0;
padding:0;
box-sizing:border-box;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 15px;
}

body{
color:#000000;
background:#0B612D;
display:flex;
justify-content: center;
align-items: center;
min-height: 100vh;
flex-direction:column;
width:100%;
}

.cabecera{
width:100%;
text-align:right;
padding:0 0 0 0;
background:#FADB05;
display:flex;
justify-content:center;
border-radius: 0 0 30px 30px;
}


.cabeza{
width:100%;
text-align:right;
padding:0 0 0 0;
background:#FADB05;
display:flex;
justify-content:right;
border-radius: 0 0 30px 30px;
}

.cabeza1{
width:100%;
text-align:right;
padding:0 0 0 0;
display:flex;
justify-content:center;
}

.titulo{
font-size:14px;
color:#0B612D;
font-weight:bold; 
margin-bottom:10px;
}

.formulario{
width:32%;
border-radius:15px;
padding:18px;
margin-bottom:10px;

/* Necesario para que el formulario tome este elemento como referencia */
position: absolute;
  top: 600px;    /* Distancia desde arriba */
  right: 800px;  /* Distancia desde la derecha */
  box-shadow: 0 4px 8px rgba(0,0,0,0.4); /* Efecto de sombra para "flotar" */
  z-index: 100; /* Asegura que esté por encima de otros elementos */
}

input{
width:100%;
padding:14px;
border-radius:25px;
border:1px solid #ffffff;
font-size:16px;
text-align:left;
margin-bottom:10px;
}

button{
width:100%;
padding:14px;
border:none;
border-radius:25px;
background:#0B612D;
color:white;
font-weight:bold;
font-size:16px;
cursor:pointer;
}

button:hover{
background:#127D3D;
}

.esp{
  background-color: #FADB05;
color: #127D3D;
width:100%;
padding:14px;
font-weight:bold;
cursor:pointer;
margin-bottom:50px;
display:flex;
justify-content:center;
text-decoration: none;
}

.esp1{
background-color: #FADB05;
color: #127D3D;
width:50%;
padding:14px;
font-weight:bold;
cursor:pointer;
margin-bottom:50px;


}

.esp a{
width:100%;
border:none;
border-radius:25px;
color:#127D3D;
font-weight:bold;
font-size:16px;
cursor:pointer;
}

.esp a:hover{
color:#ffffff;
}

.info5{
width:100%;
padding:14px;
border:none;
border-radius:25px;
background:#0B612D;
color:white;
font-weight:bold;
font-size:16px;
cursor:pointer;
}

.fondo1{
width:100%;
padding:14px;
border-radius:25px;
border:1px solid #ffffff;
font-size:16px;
text-align:left;
margin-bottom:10px;
}

.error{
  font-size: 28px;
text-align:center;
margin-bottom:10px;
padding:15px;
}

.admiracion{
width: 10%;
font-size: 10px;
}

.adm{
width: 10%;
font-size: 10px;
}

.confianza{
background-color: #0B612D;
width:100%;
padding:20px 0px 0px 0px;
text-align: center;
margin-bottom:15px;
}
.nivel{
width:20%;

}
.titulo2{
font-size:28px;
color:#FADB05;
margin-bottom:10px;
font-weight:bold;
}

.codigo{  
width:60%;
font-size: 40px;
padding: 30px 50px 50px 10px;
color:#FADB05;
background-color: #0B612D;
border:1px solid #ffffff;
border-radius:15px;
font-size:24px;
font-weight:bold;
margin-bottom:40px;
text-align: center;
padding: 20px  10px 20px 10px;
}

.ingresa{
background:#0B612D;
color:yellow;
padding:10px;
border-radius:15px;
border:1px solid #ffffff;
margin-top:10px;
font-size:24px;
font-weight:bold;
margin-bottom:10px;
text-align: center;
}

.codigo1 {  
width:50%;
height:90px;
font-size:27px;
font-weight:bold;
display:flex;
justify-content:center;
margin-bottom:20px;
text-align: center;
border-radius:15px;
border:2px solid #ffffff;
margin-top:10px;
color:#FADB05;
padding: 15px 30px 10px 10px;
}

.envolvente {  
position: relative;
width:100%;
height: 280px;
background-color:#0B612D;
display:flex;
justify-content:center;
text-align: center;
color:#FADB05;
padding: 30x 30px 10px 10px;
margin:auto;
margin-bottom: 30px;
}


.parent{
border: 1px solid #ffffff;
border-radius:15px;
width: 500px;
height: 280px;
box-sizing: border-box;
position: relative;
text-align: center;
align-items: center;
box-sizing: border-box;
position: relative;
margin:0;
display:flex;
flex-direction: column;
padding: 30px 30px 30px 30px;
margin-bottom: 30px;


}

.item{  
  border: 0px solid;
  width:80%;
  height: 100px;
  background-color:#0092f3;
  display: block;
  position: relative;
  top: 0;
 
  
}

.item:first-child{
  background-color:#0B612D;
}


.item:last-child{
  background-color:#fc0202;
}

.adm {
width:100%;
padding: 10px 10px 10px 10px;
color:#ffffff;
font-size:15px;
font-weight:bold;
text-align: center;
}

.admiracion{
width:100%;
background: #df2d3f;
padding: 5px 5px 5px 5px;
color:#ffffff;
border-radius:15px;
font-size:18 px;
font-weight:bold;
margin-bottom:40px;
text-align: center;
}


.botella{
width:100%;
padding:0 0 0 0;
background:#FADB05;
display:flex;
justify-content:center;
}

.botella2{
width:100%;
background:#ffffff;
display:flex;
justify-content:center;
}

.fronteras{
width:100%;
display:flex;
justify-content:center;
}

footer{
background:rgb(255, 255, 255);
width: 100%;
text-align: center;
padding:20px;
}

.creditos{
width:100%;
font-size:12px;
font-weight:bold;
color:#888686;
line-height:1.4;
}

.creditos1{
background: #c0bebe;
width:100%;
height: 50px;
font-size:12px;
font-weight:bold;
color:#726f6f;
line-height:1.4;
padding:20px 0 0 0;
}


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

.formulario{
position: relative;
background:rgba(255, 255, 255, 0.4);
width:90%;
padding: 20px;
margin: auto;
top:35px;
transform: translateY(-50%);
color:#FADB05;
border-radius:15px;
font-size:12px;
font-weight:bold;
text-align: center;
/* Necesario para que el formulario tome este elemento como referencia */

    /* Distancia desde arriba */
  right:0px;  /* Distancia desde la derecha */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.24); /* Efecto de sombra para "flotar" */
  /* Asegura que esté por encima de otros elementos */
  }
}


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

.contenedor{
     max-width:100%;
     margin:auto;
     background: #0c6e34 ;
     padding:20px;
     border-radius:12px;
     margin-top:15px;
     text-align: left;
     margin-bottom:15px;
    }
}

@media screen and (min-width: 200px) and (max-width: 768px){
    .linea{
      margin:10px 0;
      font-size:10px;
      color:#FADB05;
     }
 }

 @media screen and (min-width: 200px) and (max-width: 768px){
 .etiqueta{
      color:rgb(0, 183, 255);;
      font-weight:bold;
     }
      }

@media screen and (min-width: 200px) and (max-width: 768px){
.codigo{  
width:90%;
font-size: 15px;
padding: 30px 50px 50px 10px;
color:#FADB05;
background-color: #0B612D;
border:1px solid #ffffff;
border-radius:15px;
font-weight:bold;
margin-bottom:20px;
text-align: center;
padding: 10px  5px 10px 5px;
}
}

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

.confianza{
background-color: #0B612D;
width:50%;
padding:0px 0px 0px 0px;
text-align: center;
margin-bottom:15px;
margin-top: -30px;
}
 }


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

.nivel{
width:60%;

}

  }

@media screen and (min-width: 200px) and (max-width: 768px){
  .error{
    width:100%;
  font-size: 20px;
  color:#FADB05;
text-align:center;
margin-bottom:10px;
padding:15px;
}
}

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

.codigo1 {  
width:90%;
height:130px;
font-size:20px;
font-weight:bold;
display:flex;
justify-content:center;
margin-bottom:20px;
text-align: center;
border-radius:15px;
border:1px solid #ffffff;
margin-top:10px;
color:#FADB05;
padding: 15px 30px 10px 10px;
}

}