@keyframes afr {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes afl {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

#simulador {
  background-color: #e8e8e8;
}

#gresmanc {
  background-color: #fff8f2;
}

.for_email input[name="email"]{
	color: var(--header-middle-text-hover);
	/*background-color: var(--header-transparent-text-hover);*/
	border-color: var(--content-faded);
	padding-left: 0.5rem;
	/*padding-top: 0.5rem;
	padding-bottom: 0.5rem;*/
	padding-right: 0.5rem;
	border-radius: 5px;
	border-style: solid;
	border-left-width: 1px;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-right-width: 1px;
}

.for_password input[name="password"]{
	color: var(--header-middle-text-hover);
	/*background-color: var(--header-transparent-text-hover);*/
	padding-left: 0.5rem;
	/*padding-top: 0.5rem;
	padding-bottom: 0.5rem;*/
	padding-right: 0.5rem;
	border-radius: 5px;
	border-style: solid;
	border-left-width: 1px;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-right-width: 1px;
	border-color: var(--content-faded);
}

#us_form_login #acceder
{
	width: 100%;
}

#us_form_login .w-form-message
{
	color: red;
}



#title3 {
	color: var(--content-primary);
	text-align: center;
	animation-name: afl;
	animation-delay: 250ms;
	animation-duration: 0.6s;           /* NECESARIO */
	animation-fill-mode: both;         /* Mantiene el estado final */
	animation-timing-function: ease;   /* Opcional pero recomendable */
}

#title1 {
	color: #ffffff;
	font-size: max(1.9rem, 1.9vw);
	letter-spacing: 0.05em;
	font-family: h1;
	animation-name: afl;
	animation-delay: 250ms;
	animation-duration: 0.6s;           /* NECESARIO */
	animation-fill-mode: both;         /* Mantiene el estado final */
	animation-timing-function: ease;   /* Opcional pero recomendable */
}

#title2 {
	color: #ffffff;
	text-align: left;
	font-size: 6rem;
	font-family: "AvenirLTStd-Black";
	text-transform: uppercase;
	animation-name: afr;
	animation-duration: 0.6s;           /* NECESARIO */
	animation-fill-mode: both;
	animation-timing-function: ease;
}

#acceder {
	animation-name: afr;
	animation-delay: 250ms;
	animation-duration: 0.6s;           /* NECESARIO */
	animation-fill-mode: both;
	animation-timing-function: ease;
}

#lostPassword {
  color: var(--header-middle-text-hover);
  font-size: 0.7rem;
}



/* Estilos para laptops */
@media (max-width: 1024px) {
  #title1 {
    color: #ffffff;
    font-size: max(1.9rem, 1.9vw);
    letter-spacing: 0.05em;
    font-family: "";
  }
  
  #title2 {
    color: #ffffff;
    text-align: left;
    font-size: 5rem;
    text-transform: uppercase;
  }
}

/* Estilos para tablets */
@media (max-width: 768px) {
  #title1 {
    color: #ffffff;
    font-size: max(1.7rem, 1.7vw);
    letter-spacing: 0.05em;
    font-family: "";
  }
  
  #title2 {
      color: #ffffff;
      text-align: left;
      font-size: 4rem;
      text-transform: uppercase;
    }
}


.toggle-password {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	cursor: pointer;
}

/* Estilos para móviles */
@media (max-width: 480px) {
  #title1 {
    color: #ffffff;
    font-size: max(1.7rem, 1.7vw);
    letter-spacing: 0.05em;
    font-family: "";
  }
  
  #title2 {
     color: #ffffff;
     text-align: left;
     font-size: 3rem;
     text-transform: uppercase;
   }
   
   .separator
   {
	  height: 10px;
   }
}