:root {
  --azul: #005298;
  --azul-hondo: #003a6b;
  --verde: #27ae60;
  --tinta: #0b1320;
  --gris: #5b6777;
  --fondo: #f6f8fc;
  --linea: #dce4ef;
  --alerta: #b3261e;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 2.5rem 1.25rem 4rem;
  background: var(--fondo);
  color: var(--tinta);
  font-family: Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.lienzo { max-width: 34rem; margin: 0 auto; }

.marca {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin-bottom: 2.25rem;
}
.marca b {
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -.01em;
  color: var(--azul);
}
.marca span { font-size: .875rem; color: var(--gris); }

h1 {
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.25;
  letter-spacing: -.02em;
  margin: 0 0 .625rem;
}

.bajada { color: var(--gris); margin: 0 0 2rem; max-width: 30rem; }

.tarjeta {
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: 14px;
  padding: 1.5rem;
}

label { display: block; font-weight: 600; font-size: .9375rem; margin-bottom: .375rem; }
.pista { font-size: .8125rem; color: var(--gris); margin: 0 0 .625rem; }

input[type=text], textarea {
  width: 100%;
  font: inherit;
  color: var(--tinta);
  padding: .75rem .875rem;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: #fff;
  resize: vertical;
}
textarea {
  min-height: 8.5rem;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .9375rem;
}

input:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 2px;
}

.campo + .campo { margin-top: 1.25rem; }

button {
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--verde);
  border: 0;
  border-radius: 10px;
  padding: .8125rem 1.375rem;
  cursor: pointer;
  margin-top: 1.5rem;
}
button:hover { background: #219150; }
button:disabled { background: #a8b4c2; cursor: default; }

.secundario {
  background: transparent;
  color: var(--azul);
  border: 1px solid var(--linea);
  margin-top: 1rem;
}
.secundario:hover { background: #eef3fa; }

.enlace-caja {
  margin-top: 1.25rem;
  padding: 1rem;
  background: #eef3fa;
  border: 1px solid #cfdcee;
  border-radius: 10px;
  word-break: break-all;
  font-family: ui-monospace, Menlo, monospace;
  font-size: .875rem;
  color: var(--azul-hondo);
}

.aviso {
  margin-top: 1.5rem;
  padding: .875rem 1rem;
  border-left: 3px solid var(--azul);
  background: #fff;
  font-size: .9375rem;
  color: var(--gris);
}

.error {
  margin-top: 1.25rem;
  padding: .875rem 1rem;
  border-left: 3px solid var(--alerta);
  background: #fff;
  color: var(--alerta);
  font-size: .9375rem;
}

.revelado {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, Menlo, monospace;
  font-size: .9375rem;
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: 10px;
  padding: 1rem;
}

.pie { margin-top: 2.5rem; font-size: .8125rem; color: var(--gris); }
.pie a { color: var(--azul); }

.oculto { display: none; }