/* Estilo de la portada y la página de entrada: la misma hoja cuadriculada del constructor. */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,700;12..96,800&family=Instrument+Sans:wght@400;500;600&family=JetBrains+Mono:wght@500&display=swap");
:root{
  --papel:#f6f7f2;--celda:#ffffff;--linea:#dfe3d6;--tinta:#1f2a24;--tinta-2:#5c6a61;--verde:#13744a;--verde-suave:#e2f1e8;--error:#b42318;
  --display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;--texto:"Instrument Sans","Segoe UI",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{--papel:#131814;--celda:#1a211c;--linea:#2a332d;--tinta:#e7ede8;--tinta-2:#9aa89f;--verde:#4cc48a;--verde-suave:#1d3326;--error:#f97066;color-scheme:dark}}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;min-height:100vh;display:grid;place-items:center;padding:24px 16px;background:var(--papel);color:var(--tinta);font:16px/1.55 var(--texto);
  background-image:linear-gradient(var(--linea) 1px,transparent 1px),linear-gradient(90deg,var(--linea) 1px,transparent 1px);background-size:100% 32px,96px 100%}
.caja{width:100%;max-width:460px;background:var(--celda);border:1px solid var(--linea);border-radius:6px;padding:28px 24px;display:grid;gap:14px}
.caja.ancha{max-width:720px}
.celda-ref{font:500 12px var(--mono);color:var(--tinta-2);letter-spacing:.06em}
h1{font:800 clamp(28px,6vw,46px)/1.05 var(--display);margin:0;letter-spacing:-.02em;text-wrap:balance}
h1 s{text-decoration-thickness:4px;text-decoration-color:var(--verde);color:var(--tinta-2)}
.bajada{margin:0;color:var(--tinta-2)}
form{display:grid;gap:8px}
label{font-weight:600}
input{font:500 15px var(--mono);color:var(--tinta);background:var(--papel);border:1px solid var(--linea);border-radius:4px;padding:10px 12px;width:100%}
input:focus-visible,.boton:focus-visible,a:focus-visible{outline:2px solid var(--verde);outline-offset:2px}
.boton{font:600 15px var(--texto);border:1px solid var(--verde);background:var(--verde);color:var(--celda);border-radius:4px;padding:10px 16px;cursor:pointer}
.boton:disabled{opacity:.6;cursor:wait}
.mensaje{margin:0;min-height:1.5em;color:var(--error);font-size:14px}
.pie{margin:0;font-size:14px;color:var(--tinta-2)}
a{color:var(--verde)}
.idiomas{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.idioma{display:grid;gap:2px;padding:16px;border:1px solid var(--linea);border-radius:6px;text-decoration:none;color:var(--tinta);background:var(--papel)}
.idioma:hover,.idioma.sugerido{border-color:var(--verde);background:var(--verde-suave)}
.idioma strong{font:700 20px var(--display)}
.idioma span{font-size:14px;color:var(--tinta-2)}