*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Inter', sans-serif;
}

/* FONDO LIMPIO */
body{
  background:#ffffff;
}

/* HEADER */
.header{
  width:100%;
  padding:20px;
  text-align:center;
  border-bottom:1px solid #eee;
}

.logo{
  height:40px;
  vertical-align:middle;
}

.header span{
  font-weight:600;
  margin-left:8px;
  font-size:18px;
  color:#1f2937;
}

/* CONTENEDOR */
.contenedor{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:40px 20px;
}

/* CARD */
.card{
  width:100%;
  max-width:350px;
  border:1px solid #ddd;
  border-radius:10px;
  padding:25px;
  background:#fff;
}

/* TITULO */
.card h1{
  font-size:22px;
  margin-bottom:20px;
  color:#111;
}

/* INPUTS */
.card label{
  font-size:13px;
  margin-bottom:5px;
  display:block;
  color:#333;
}

.card input{
  width:100%;
  padding:10px;
  margin-bottom:15px;
  border:1px solid #ccc;
  border-radius:6px;
  font-size:14px;
}

.card input:focus{
  border-color:#2563eb;
  outline:none;
  box-shadow:0 0 0 2px rgba(37,99,235,0.2);
}

/* PASSWORD */
.password-box{
  position:relative;
}

.password-box span{
  position:absolute;
  right:10px;
  top:10px;
  cursor:pointer;
}

/* BOTON */
.card button{
  width:100%;
  padding:10px;
  background:#2563eb; /* azul TraderZone */
  color:#fff;
  border:none;
  border-radius:6px;
  font-weight:600;
  cursor:pointer;
}

.card button:hover{
  background:#1e40af;
}

/* TEXTO */
.terminos{
  font-size:12px;
  color:#555;
  margin-top:15px;
}

/* CREAR CUENTA */
.crear{
  display:block;
  text-align:center;
  margin-top:20px;
  padding:10px;
  border:1px solid #ccc;
  border-radius:6px;
  text-decoration:none;
  color:#111;
  font-weight:500;
}

.crear:hover{
  background:#f5f5f5;
}

/* FOOTER */
footer{
  text-align:center;
  font-size:12px;
  color:#777;
  margin-top:30px;
}

/* RESPONSIVE */
@media (max-width:480px){
  .card{
    border:none;
    padding:15px;
  }
}
/*Codigo link olvide la contraseña*/
.olvido{
  display:block;
  text-align:center;
  margin-top:10px;
  font-size:13px;
  color:#2563eb;
  text-decoration:none;
  font-weight:500;
}

.olvido:hover{
  text-decoration:underline;
}
.visitante{

    display:block;

    width:100%;

    margin-top:15px;

    padding:14px;

    text-align:center;

    text-decoration:none;

    color:#2563eb;

    background:#f5f7fb;

    border:1px solid #dbe3ef;

    border-radius:10px;

    font-weight:600;

    transition:.25s;

}

.visitante:hover{

    background:#edf2ff;

    border-color:#2563eb;

}