@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 10px;
  transition: all 0.3s ease-in-out;
  font-family: 'Roboto', sans-serif;
}

html { 
  touch-action: pan-y; 
  zoom: reset; 
}

body {

  height: 100vh;
  width: 100vw;
}

main {
  height: 100%;
  width: 100%;
  display: flex;
}

#container-left {
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
}


.card-text {
  width: 70%;  
  display: flex;
  flex-direction: column;
  margin: 4rem;  
}

.card-text h1 {
  font-family: 'Roboto', sans-serif;
  font-size: 5rem;
  text-align: center;
  color: white;
  margin-bottom: 1rem;
}

.card-text p {
  font-family: 'Roboto', sans-serif;
  font-size: 2rem;
  color: white;
  text-align: center;
}

#container-left::after {
  content: "";
  position: absolute;
  height: 160rem;
  width: 160rem;
  top: -5%;
  right: 50%;
  background-image: linear-gradient(-45deg, #F2AC1C 0%, #F2AC1C 100%);
  transform: translateY(-50%);
  border-radius: 50%;
  z-index: -1;  
  box-shadow: 10px 24px 45px 0px rgb(125 125 125 / 63%);
}

#container-right {
  width: 50%;
  height: 100%;

  display: flex;
  justify-content: center;
  align-items: center;
}
#container-right p,a {
font-size: 1.6rem;
text-align: center;
}

.Container-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


.input-field {  
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f0f0;
  border-radius: 55px;
  margin: 1rem 0;
  padding-left: 1rem;

}

.input-field input {
  height: 50px;
  width: 100%;
  background: none;
  border: none;
  outline: none;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
}


.input-field i {
  text-align: center;
  line-height: 5.5rem;
  margin-right: 1rem;
  color: #acacaa;
}

.invalid-input{
  border: 1px solid red;

}
.input-valid{
  border: 1px solid green;
}

.Container-form button {
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
  width: 20%; 
  height: 45px;
  border-radius: 3rem;  
  font-size: 2rem;
  border: none;
  background-color: #F2AC1C;
  cursor: pointer; 
  margin-bottom: 2rem;
}

#logo {
  width: 50%;
}

#img-container-left {
  width: 40%;
  z-index: 999;
}

.modal-mobile{
  width: 100%;
  height: 100%;
  background-color: #F2AC1C;
  position: absolute;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  display: none;
  
}

form{
  width: 100%;
  display: flex;
  flex-direction: column;  
  align-items: center;
}
.modal-mobile h1 {
  font-size: 5rem;
  color: white;
  font-family: 'Roboto', sans-serif;

}
.modal-mobile p {
  font-size: 2rem;
  text-align: center;
  color: white;
  font-family: 'Roboto', sans-serif;
}
.modal-mobile span {
  font-size: 3rem;
  text-align: center;
  color: white;
  font-family: 'Roboto', sans-serif;
  cursor: pointer;
}

.modal-mobile img {
  width: 200px;
}

.close-modal{
  width: 100%;
  display: flex;
  justify-content: end;
  padding: 1rem;
}

.box {
  align-self: flex-end;
  animation-duration: 5s;
  animation-iteration-count: infinite;  
  margin: 0 auto 0 auto;
  transform-origin: bottom;
  
}
.bounce-2 {
  animation-name: bounce-2;
  animation-timing-function: ease;
}
@keyframes bounce-2 {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-30px); }
  100% { transform: translateY(0); }
}

/* Dispositivos extra pequeños (teléfonos en orientación vertical, menos de 576px) */
@media (max-width: 575.98px) {
  /* Estilos para dispositivos muy pequeños */
  #container-left{
    display: none;
  }

  #container-right {
    width: 100%;    
  }

  .Container-form button {
    width: 30%;
    height: 30px;  
  }
  .input-field {
    width: 90%; 
  }
  .input-field input {
    height: 30px;    
  }
  #logo {
    width: 100%;
  }
  .modal-mobile{
    
    display: flex;
    
  }

}

/* Dispositivos pequeños (teléfonos en orientación horizontal, de 576px en adelante) */
@media (min-width: 576px) and (max-width: 767.98px) {
  /* Estilos para dispositivos pequeños */
  #container-left{
    display: none;
  }

  #container-right {
    width: 100%;    
  }

  .Container-form button {
    width: 30%;
    height: 30px;  
  }
  .input-field {
    width: 90%; 
  }
  .input-field input {
    height: 30px;    
  }
  #logo {
    width: 100%;
  }  

  #container-left{
    display: none;
  }

  #container-right {
    width: 100%;    
  }

  .Container-form button {
    width: 30%;  
  }
  .input-field {
    width: 90%; 
  }
  #logo {
    width: 100%;
  }
  .modal-mobile{
    
    display: flex;
    
  }

}
/* Dispositivos medianos (tabletas, de 768px en adelante) */
@media (min-width: 768px) and (max-width: 991.98px) {
  /* Estilos para dispositivos medianos */
  #container-left{
    display: none;
  }

  #container-right {
    width: 100%;    
  }

  .Container-form button {
    width: 30%;
    height: 40px;  
  }
  .input-field {
    width: 90%; 
  }
  .input-field input {
    height: 50px;    
  }
  #logo {
    width: 70%;
  }
  .modal-mobile{
    
    display: flex;
    
  }
}
/* Dispositivos grandes (escritorios, de 992px en adelante) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  /* Estilos para dispositivos grandes */
  body{
    overflow: hidden;
  }
  #container-left {
    width: 50%;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;  
  }
  #container-right {
    width: 50%;    
  }
  .Container-form button {
    width: 50%;
    height: 40px;  
  }
  .input-field {
    width: 90%; 
  }
  .input-field input {
    height: 50px;    
  }
  #logo {
    width: 100%;
  }
  #container-left::after { 
    height: 300rem;
    width: 300rem; 
    
  }  
  #img-container-left {
    width: 60%;
    z-index: 999;
  }
}
/* Dispositivos extra grandes (escritorios grandes, de 1200px en adelante) */
@media (min-width: 1200px) {
  /* Estilos para dispositivos muy grandes */
  #container-left::after { 
    height: 250rem;
    width: 240rem;    
  
  }
  *{
    overflow: hidden;
  }
  #container-left {
    width: 50%;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;  
  }
  #container-right {
    width: 50%;    
  } 

  .input-field {  
    width: 50%;  
  }

  
}
@media (min-width: 1400px) {
  /* Estilos para dispositivos muy grandes */
  #container-left::after { 
    height: 250rem;
    width: 240rem;    
  
  }
  
  #container-left {
    width: 50%;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;  
  }
  #container-right {
    width: 50%;    
  } 

  
}