:root {
  --fondo: #14100c;
  --fondo-2: #1f1912;
  --pergamino: #efe2c4;
  --pergamino-2: #e2d0a8;
  --tinta: #2b1f12;
  --tinta-suave: #5a4630;
  --oro: #d9a441;
  --oro-claro: #f2c86b;
  --rojo: #9e2b1f;
  --verde: #3f8f4a;
  --borde: #8a6a3a;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: radial-gradient(ellipse at top, #2a2016 0%, var(--fondo) 60%) fixed, var(--fondo);
  color: var(--pergamino);
  font-family: Georgia, "Palatino Linotype", "Book Antiqua", serif;
  line-height: 1.5;
}

.portada {
  text-align: center;
  padding: 56px 16px 40px;
  border-bottom: 1px solid #3a2d1d;
}

h1 {
  margin: 8px 0 4px;
  font-size: clamp(2.6rem, 11vw, 5.5rem);
  letter-spacing: 0.08em;
  color: var(--oro-claro);
  text-shadow: 0 2px 0 #5a3d12, 0 0 24px rgba(217, 164, 65, 0.35);
}

.lema {
  margin: 0 auto 24px;
  max-width: 34rem;
  color: #d8c8a6;
  font-size: 1.1rem;
}

.estado {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 4px 12px;
  border: 1px solid #4a3a26;
  border-radius: 999px;
  font-size: 0.9rem;
  color: #cbb994;
}

.punto {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #777;
}

.estado.encendido .punto { background: #4fc15e; box-shadow: 0 0 8px #4fc15e; }
.estado.apagado .punto { background: #c0392b; }

.boton {
  display: inline-block;
  border: 1px solid #6b4a14;
  border-radius: 6px;
  background: linear-gradient(#e9b450, #b9802a);
  color: #2a1a06;
  font: inherit;
  font-weight: bold;
  padding: 10px 22px;
  text-decoration: none;
  cursor: pointer;
}

.boton:hover { background: linear-gradient(#f4c463, #c88d32); }
.boton:disabled { opacity: 0.6; cursor: wait; }
.boton.grande { font-size: 1.15rem; padding: 14px 28px; }

main {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 16px 24px;
}

.pasos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.paso {
  position: relative;
  background: var(--fondo-2);
  border: 1px solid #3a2d1d;
  border-radius: 10px;
  padding: 20px 18px 16px;
}

.paso h2 { margin: 6px 0; font-size: 1.2rem; color: var(--oro-claro); }
.paso p { margin: 0; color: #d3c29e; }

.numero {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--oro);
  color: #2a1a06;
  font-weight: bold;
}

.tarjeta {
  background: linear-gradient(var(--pergamino), var(--pergamino-2));
  color: var(--tinta);
  border: 2px solid var(--borde);
  border-radius: 12px;
  padding: 24px 22px;
  margin-bottom: 28px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.tarjeta h2 { margin: 0 0 16px; font-size: 1.6rem; }

form { display: grid; gap: 6px; max-width: 420px; }

label { font-weight: bold; margin-top: 10px; }
.opcional { font-weight: normal; color: var(--tinta-suave); }

input {
  width: 100%;
  font: inherit;
  padding: 10px 12px;
  border: 1px solid #a88a5a;
  border-radius: 6px;
  background: #fffaf0;
  color: var(--tinta);
}

input:focus { outline: 2px solid var(--oro); outline-offset: 1px; }

small { color: var(--tinta-suave); }

form .boton { margin-top: 16px; justify-self: start; }

.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.aviso { min-height: 1.5em; margin: 8px 0 0; font-weight: bold; }
.aviso.bien { color: var(--verde); }
.aviso.mal { color: var(--rojo); }

.peso { color: var(--tinta-suave); margin: 8px 0 0; }

.instrucciones { padding-left: 20px; margin: 18px 0 0; }
.instrucciones li { margin-bottom: 8px; }

footer {
  text-align: center;
  color: #8f7f62;
  font-size: 0.85rem;
  padding: 8px 16px 32px;
}

footer a { color: #c9a45c; }

@media (max-width: 480px) {
  .tarjeta { padding: 20px 16px; }
  .boton.grande { width: 100%; text-align: center; }
}