:root{
  --brand-brown:#442F17;
  --card-bg:#ffffff;
  --card-shadow:0 10px 24px rgba(0,0,0,.18);
  --input-border:#cfcfcf;
  --btn-bg:#205221;
  --btn-bg-hover:#2b6d2f;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Arial, Helvetica, sans-serif}

/* Fondo a pantalla completa (usa fondo_1.png) */
.bg{
  position:fixed;
  inset:0;
  background: #f9f0dc url("fondo_1.png") center/cover no-repeat;
  z-index:-1;
}

/* Contenido centrado vertical/horizontal */
.wrap{
  min-height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:24px;
  text-align:center;
  gap:18px;
}

/* Títulos */
.hero h1{
  margin:0 0 6px;
  color:var(--brand-brown);
  font-size: clamp(28px, 4.4vw, 60px);
  letter-spacing:.5px;
  font-weight:800;
}
.hero h2{
  margin:0 0 16px;
  color:var(--brand-brown);
  font-size: clamp(18px, 3vw, 40px);
  font-weight:600;
  opacity:.9;
}

/* Logo */
.logo{
  width:min(140px, 38vw);
  height:auto;
  margin:6px auto 6px;
  display:block;
}

/* Tarjeta de login */
.card{
  background:var(--card-bg);
  padding:18px;
  border-radius:12px;
  box-shadow:var(--card-shadow);
  width:min(520px, 92vw);
}

form{display:flex;flex-direction:column;gap:10px}

input{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--input-border);
  border-radius:8px;
  font-size:16px;
  outline:none;
  background:#fff;
}
input:focus{border-color:#7aa97a; box-shadow:0 0 0 3px rgba(32,82,33,.15)}

button{
  appearance:none;
  border:none;
  border-radius:8px;
  padding:12px 14px;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
  color:#fff;
  background:var(--btn-bg);
  transition:background .15s ease-in-out, transform .02s ease-in-out;
}
button:hover{background:var(--btn-bg-hover)}
button:active{transform:translateY(1px)}
button:disabled{opacity:.6; cursor:not-allowed}

.msg{
  margin:6px 0 0;
  min-height:1.2em;
  color:#b00020; /* rojo sutil para errores */
  font-size:.95rem;
}