* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body{
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'Cinzel', serif;
}


.login-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgb(238, 226, 172);;
  padding: clamp(1rem, 4vw, 2.5rem); /* se adapta al tamaño de pantalla */
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  text-align: center;
  z-index: 10;
  width: clamp(250px, 30vw, 400px); /* Escala desde móvil hasta escritorio */
}

    input[type="password"] {
      padding: 0.5em;
      font-size: 1rem;
      margin-top: 1em;
      width: 100%;
      border: none;
      background-color: rgb(199, 189, 143);;
      border-radius: 6px;
      font-family: 'Cinzel Decorative', serif;
    }

    button {
      margin-top: 1em;
      padding: 0.5em 1.5em;
      font-size: 1rem;
      background-color: #f0cc58;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-family: 'Cinzel Decorative', serif;
    }

    .error {
      margin-top: 1em;
      color: red;
      display: none;
    }

    .background-image {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
}



@media screen and (max-width: 1100px) {
  #fondoAcceso{
  content: url("img/portadachiquita.png");

  }
 
}

@media screen and (max-width: 450px) {
  #fondoAcceso{
  content: url("img/portadachiquita2.png");

  }
 
}