:root {
  --crema: #f6f0e4;
  --papel: #fffdf8;
  --tinta: #1f1b16;
  --suave: #6f665a;
  --linea: #e3d9c6;
  --tomate: #c8402b;
  --tomate-oscuro: #a53220;
  --albahaca: #2f6b4a;
  --trigo: #e9b949;
  --radio: 14px;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--crema); color: var(--tinta); font: 15px/1.45 var(--sans); }
button { font: inherit; cursor: pointer; }
input { font: inherit; }

.marca { font-family: var(--serif); font-weight: 700; letter-spacing: -0.01em; }
.marca small { font: 400 0.55em var(--sans); color: var(--suave); letter-spacing: 0.08em; text-transform: uppercase; margin-left: 0.6em; }

a.boton { text-decoration: none; display: inline-block; }
.boton {
  border: 1px solid var(--linea); background: var(--papel); color: var(--tinta);
  padding: 8px 14px; border-radius: 999px; transition: background 0.15s, border-color 0.15s;
}
.boton:hover { border-color: var(--tinta); }
.boton.fuerte { background: var(--tomate); border-color: var(--tomate); color: #fff; }
.boton.fuerte:hover { background: var(--tomate-oscuro); border-color: var(--tomate-oscuro); }
.boton:focus-visible, input:focus-visible { outline: 2px solid var(--tomate); outline-offset: 2px; }

/* Ingreso */
.ingreso { position: fixed; inset: 0; display: grid; place-items: center; background: var(--crema); z-index: 10; padding: 16px; }
.ingreso[hidden] { display: none; }
.ingreso form { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 28px; width: min(360px, 100%); display: grid; gap: 14px; }
.ingreso h1 { margin: 0; font-size: 26px; }
.ingreso input { padding: 10px 12px; border: 1px solid var(--linea); border-radius: 10px; background: #fff; }
.ingreso .error { color: var(--tomate-oscuro); font-size: 13px; min-height: 1.3em; margin: 0; }