:root{
  --paper:#f4efe4; --paper2:#ece4d4; --ink:#1c2230; --ink2:#3a4254;
  --muted:#8a8170; --line:#cdc2ab; --accent:#9e2b25; --accent2:#7c1f1b;
  --gold:#b08a3e; --ok:#2f6b46; --shadow:0 18px 50px -20px rgba(28,34,48,.45);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Archivo',system-ui,sans-serif;color:var(--ink);min-height:100vh;
  background:
    radial-gradient(1200px 600px at 82% -12%, #fbf7ee 0%, transparent 60%),
    radial-gradient(900px 520px at -12% 112%, #efe7d6 0%, transparent 55%),
    var(--paper);
}
/* grano de papel, igual que la app */
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

.stage{min-height:100vh;display:grid;grid-template-columns:minmax(340px,46%) 1fr}
@media(max-width:860px){.stage{grid-template-columns:1fr}}

/* ---------- Panel izquierdo: membrete ---------- */
.side{
  position:relative;padding:56px 52px;display:flex;flex-direction:column;justify-content:space-between;
  border-right:2px solid var(--ink);
  background:
    linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 40%),
    var(--paper2);
}
@media(max-width:860px){.side{border-right:none;border-bottom:2px solid var(--ink);padding:34px 26px 28px}}
.side .k{font:600 11px/1 'Archivo';letter-spacing:.34em;text-transform:uppercase;color:var(--accent)}
.side h1{font-family:'Fraunces';font-weight:900;font-size:clamp(30px,3.6vw,44px);margin:10px 0 0;letter-spacing:-.01em;line-height:1.04}
.side .sub{font-family:'Newsreader';font-style:italic;color:var(--ink2);font-size:16.5px;margin-top:10px;max-width:34ch;line-height:1.5}
.ledger{margin-top:42px;border-top:1px solid var(--line);padding-top:20px}
.ledger .row{display:flex;align-items:baseline;gap:12px;padding:9px 0;border-bottom:1px dashed var(--line)}
.ledger .row b{font:600 12px/1 'Archivo';letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);min-width:118px}
.ledger .row span{font-family:'Newsreader';font-style:italic;font-size:14.5px;color:var(--muted)}
.foot{font:500 10.5px/1.6 'Archivo';letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:36px}
@media(max-width:860px){.ledger{display:none}.foot{margin-top:20px}}

/* ---------- Panel derecho: formulario ---------- */
.deskwrap{display:flex;align-items:center;justify-content:center;padding:48px 26px}
.desk{width:100%;max-width:470px;position:relative}

.card{
  background:#fffdf8;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);
  padding:34px 34px 30px;position:relative;overflow:hidden;
}
@media(max-width:480px){.card{padding:26px 20px 24px}}


.tabs{display:flex;gap:0;border:1px solid var(--line);border-radius:9px;overflow:hidden;margin-bottom:26px;background:#fff}
.tabs button{
  flex:1;appearance:none;border:0;background:transparent;cursor:pointer;
  font:600 12px/1 'Archivo';letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  padding:12px 8px;transition:background .15s,color .15s;
}
.tabs button.on{background:var(--ink);color:#f4efe4}
.tabs button:focus-visible{outline:2px solid var(--gold);outline-offset:-3px}

h2.formtitle{font-family:'Fraunces';font-weight:600;font-size:22px;margin:0 0 4px}
p.formsub{font-family:'Newsreader';font-style:italic;color:var(--ink2);font-size:14.5px;margin:0 0 22px;line-height:1.5}

.f{display:block;font:600 11px/1 'Archivo';letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);margin:0 0 6px}
.fld{margin-bottom:16px}
.fld input{
  width:100%;font:400 14.5px/1 'Archivo';color:var(--ink);
  padding:12px 13px;border:1px solid var(--line);border-radius:8px;background:#fff;
  transition:border-color .15s, box-shadow .15s;
}
.fld input:focus{outline:none;border-color:var(--ink2);box-shadow:0 0 0 3px rgba(28,34,48,.08)}
.fld.err input{border-color:var(--accent)}
.fmsg{font:500 12px/1.4 'Archivo';color:var(--accent);margin-top:5px;min-height:0;display:none}
.fld.err .fmsg{display:block}

.pwwrap{position:relative}
.pwwrap input{padding-right:74px}
.pwtoggle{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  appearance:none;border:1px solid var(--line);background:#fffdf8;border-radius:6px;cursor:pointer;
  font:600 10px/1 'Archivo';letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);padding:6px 9px;
}
.pwtoggle:hover{border-color:var(--ink2)}

.meter{height:4px;border-radius:2px;background:var(--paper2);margin-top:7px;overflow:hidden}
.meter i{display:block;height:100%;width:0;background:var(--accent);transition:width .25s,background .25s}
.meterlbl{font:500 10.5px/1 'Archivo';letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:5px}

.row2{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0 20px;flex-wrap:wrap}
.chk{display:flex;align-items:center;gap:8px;font:500 13px/1 'Archivo';color:var(--ink2);cursor:pointer}
.chk input{width:15px;height:15px;accent-color:var(--ink)}
a.link{font:500 13px/1 'Archivo';color:var(--accent);text-decoration:none;border-bottom:1px solid transparent}
a.link:hover{border-bottom-color:var(--accent)}
a.link:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.btn{
  width:100%;appearance:none;border:0;cursor:pointer;border-radius:9px;
  background:var(--ink);color:#f4efe4;font:600 13px/1 'Archivo';letter-spacing:.18em;text-transform:uppercase;
  padding:15px 12px;transition:background .15s,transform .08s;position:relative;
}
.btn:hover{background:#10141f}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.btn[disabled]{opacity:.55;cursor:wait}
.btn .spin{display:none;width:14px;height:14px;border:2px solid rgba(244,239,228,.35);border-top-color:#f4efe4;border-radius:50%;
  animation:rot .7s linear infinite;vertical-align:-2px;margin-right:9px}
.btn.loading .spin{display:inline-block}
@keyframes rot{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.btn .spin{animation-duration:1.6s}}

.banner{
  border-radius:9px;padding:12px 14px;font:500 13px/1.5 'Archivo';margin-bottom:18px;display:none;
  border:1px solid var(--line);
}
.banner.show{display:block}
.banner.ok{background:#eef4ee;border-color:#bcd2c2;color:var(--ok)}
.banner.bad{background:#f8ecea;border-color:#e0bcb7;color:var(--accent2)}

.switchline{font:500 13px/1 'Archivo';color:var(--muted);text-align:center;margin-top:20px}
.switchline a{color:var(--ink);font-weight:600}

.pane{display:none}
.pane.on{display:block}

.legal{font:400 11px/1.6 'Archivo';color:var(--muted);margin-top:18px;text-align:center}

.lang{
  position:absolute;top:-42px;right:0;display:flex;gap:0;border:1px solid var(--line);border-radius:50px;overflow:hidden;background:rgba(255,255,255,.4)
}
.lang button{appearance:none;border:0;background:transparent;cursor:pointer;font:600 10px/1 'Archivo';letter-spacing:.14em;padding:8px 13px;color:var(--muted)}
.lang button.on{background:var(--ink);color:#f4efe4}