*
{
    margin: 0;
    padding: 0;
}
body
{
    background-color: #f7f7f7;
}

#cuerpo
{
    width: 100%;
    margin: 0 auto;
    max-width: 550px;
}
#linea_inicial
{
    width: 100%;
    background-color: #f3f16f;
    height: 8px;
}
img
{
    width: 100%;
    max-width: 375px;
    margin-bottom: 25px;
    margin-top:25px;
}
a
{
    text-decoration: none;
}
form a p
{
    text-decoration: none;
    color:#575757;
    text-align: center;
    font-size: 15px;
    margin-bottom: 15px;
}
@media screen and (max-width: 600px) {
    img
    {
        width: 90%;
        margin-top: 12%;
        margin-bottom: 5%;
    }
}



.form {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 350px;
    padding: 20px;
    border-radius: 20px;
    position: relative;
}


.title {
  font-size: 28px;
  color: #73bdf0;
  font-weight: 600;
  letter-spacing: -1px;
  align-items: center;
  text-align: center;
}


.texto, .signin {
  color: rgba(88, 87, 87, 0.822);
  font-size: 14px;
  text-align: justify;
}
#recuperar
{
    color: rgba(88, 87, 87, 0.822);
  font-size: 14px;
  text-align: center;
}
.signin {
  text-align: center;
}

.signin a {
  color: royalblue;
}

.signin a:hover {
  text-decoration: underline royalblue;
}

.flex {
  display: flex;
  width: 100%;
  gap: 6px;
}

.form label {
  position: relative;
}

.form label .input {
  width: 94%;
  padding: 10px 10px 20px 10px;
  outline: 0;
  border: 1px solid rgba(105, 105, 105, 0.397);
  border-radius: 10px;
}

.form label .input + span {
  position: absolute;
  left: 10px;
  top: 15px;
  color: grey;
  font-size: 0.9em;
  cursor: text;
  transition: 0.3s ease;
}

.form label .input:placeholder-shown + span {
  top: 15px;
  font-size: 0.9em;
}

.form label .input:focus + span,.form label .input:valid + span {
  top: 30px;
  font-size: 0.7em;
  font-weight: 600;
}

.form label .input:valid + span {
  color: green;
}

#boton, #boton_recuperar{
  border: none;
  outline: none;
  background-color: #73bdf0;
  padding: 10px;
  border-radius: 10px;
  color: #fff;
  font-size: 16px;
  transform: .3s ease;
  margin-bottom: 20px;
}

#boton:hover , #boton_recuperar:hover{
  background-color: #65b7ef;
}

a{
    text-decoration: none;
}

@keyframes pulse {
  from {
    transform: scale(0.9);
    opacity: 1;
  }

  to {
    transform: scale(1.8);
    opacity: 0;
  }
}


@media screen and (max-width:800px){
    .columna
    {
        clear: both;
    }
    #columna1
    {
        width: 100%;
        padding-left:0px;
        margin-top: -25px;
    }
    .form
    {
        margin-left: 0px;
        width: 100%;
        max-width: 93%;
    }
    #columna2
    {
        width: 100%;
        margin-top: 15px;
    }
    #imagen_pc
    {
        display: none;
        width: 100%;
    }
}

@media  (min-width:801px)
{
    #imagen_movil
    {
        display: none;
    }
}