/* SEHL Guardian — páginas de cuenta (recuperar / restablecer).
   Conforme a SEHL_DEPLOYMENT_MANIFEST v1.4 §21 (design tokens) y §23 (brand identity):
   - lienzo IVORY (#faf8f4), texto INK (#1b1f2a) — nunca blanco/negro puros.
   - TODOS los colores de componente salen de tokens (§21 direct_color_values_in_components_allowed:false).
     Los valores crudos viven SOLO aquí, en la capa de definición de tokens (permitido por §21).
   - gold NO representa éxito; estados usan tokens semánticos (success/danger).
   - tipografías de marca (Fraunces display / Inter interface) empaquetadas, con fallback; sin CDN (§23).
   Calcado al console de escritorio (renderer/styles.css tema claro). */

/* ---- Tipografías de marca (empaquetadas en /assets/fonts, con fallback si faltan) ---- */
@font-face{font-family:"Fraunces";src:url("/assets/fonts/fraunces-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/assets/fonts/inter-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/assets/fonts/inter-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/assets/fonts/inter-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}

:root{
  /* ---- primitivos de marca (§23 palette) — única fuente de valores crudos ---- */
  --sehl-gold:#b0894f;
  --sehl-gold-deep:#97713a;
  --sehl-gold-soft:#f3ebdc;
  --sehl-gold-on-dark:#d8b676;
  --sehl-navy:#1f2a3c;
  --sehl-ink:#1b1f2a;
  --sehl-ivory:#faf8f4;
  --sehl-bg-2:#f3efe8;
  --sehl-surface:#ffffff;
  --sehl-surface-2:#fbfaf7;
  --sehl-line:#e8e3da;
  --sehl-line-soft:#f0ece4;
  --sehl-ink-soft:#555c6b;
  --sehl-ink-faint:#8a909c;
  --sehl-success:#2f8f5b;
  --sehl-success-soft:#e7f3ec;
  --sehl-warning:#c98a25;
  --sehl-danger:#c0492f;
  --sehl-danger-soft:#f8e8e3;
  --sehl-info:#2f6f9f;
  --font-display:"Fraunces",Georgia,Cambria,"Times New Roman",serif;
  --font-interface:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* ---- semánticos (referencian primitivos; los componentes usan ESTOS) ---- */
  --bg:var(--sehl-ivory);
  --bg-glow-a:var(--sehl-surface);
  --bg-glow-b:var(--sehl-bg-2);
  --surface:var(--sehl-surface);
  --surface-2:var(--sehl-surface-2);
  --line:var(--sehl-line);
  --ink:var(--sehl-ink);
  --ink-soft:var(--sehl-ink-soft);
  --ink-faint:var(--sehl-ink-faint);
  --accent:var(--sehl-gold);
  --accent-deep:var(--sehl-gold-deep);
  --accent-bright:var(--sehl-gold-on-dark);
  --accent-soft:var(--sehl-gold-soft);
  --on-accent:var(--sehl-ink);
  --danger:var(--sehl-danger);
  --danger-soft:var(--sehl-danger-soft);
  --ok:var(--sehl-success);
  --ok-soft:var(--sehl-success-soft);
}
*{box-sizing:border-box;min-width:0}
html,body{height:100%}
body{
  margin:0;color:var(--ink);font-family:var(--font-interface);
  background:
    radial-gradient(1100px 620px at 10% -10%, var(--bg-glow-a) 0%, transparent 60%),
    radial-gradient(900px 520px at 100% 115%, var(--bg-glow-b) 0%, transparent 60%),
    var(--bg);
  background-attachment:fixed;-webkit-font-smoothing:antialiased;
}
.wrap{position:relative;min-height:100%;display:grid;grid-template-columns:1.12fr .88fr}
@media(max-width:900px){.wrap{grid-template-columns:1fr}.hero{display:none}}
.hero{padding:56px clamp(28px,5vw,72px);display:flex;flex-direction:column;justify-content:center;gap:22px}
.logo{display:flex;align-items:center}
.logo-img{height:84px;width:auto;max-width:min(340px,72vw);display:block;filter:drop-shadow(0 4px 14px rgba(176,137,79,.28))}
.tag{font-size:.6rem;letter-spacing:.42em;text-transform:uppercase;color:var(--ink-soft);font-weight:700}
.eyebrow{color:var(--accent-deep);font-size:.68rem;letter-spacing:.24em;font-weight:800;text-transform:uppercase}
.hero h1{margin:0;font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,3.6vw,3.05rem);line-height:1.08;letter-spacing:-.4px;color:var(--ink);max-width:15ch}
.hero p{margin:0;color:var(--ink-soft);font-size:1rem;max-width:46ch;line-height:1.62}
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:6px;max-width:600px}
.feat{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;box-shadow:0 6px 18px rgba(27,31,42,.04)}
.feat .fi{color:var(--accent-deep);font-size:1.05rem;margin-bottom:7px}
.feat b{display:block;font-size:.88rem;color:var(--ink)}
.feat small{display:block;color:var(--ink-faint);font-size:.74rem;margin-top:3px;line-height:1.35}
.hero .base{margin-top:6px;color:var(--ink-faint);font-size:.72rem;border-top:1px solid var(--line);padding-top:16px;max-width:600px}

.side{padding:clamp(20px,4vw,56px);display:flex;align-items:center;justify-content:center}
.stack{width:100%;max-width:390px;display:flex;flex-direction:column;gap:14px}
.banner{background:var(--danger-soft);border:1px solid var(--danger);color:var(--danger);border-radius:12px;padding:11px 14px;font-size:.82rem;display:none;align-items:center;gap:9px}
.banner.show{display:flex}
.banner.ok{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.card{width:100%;background:var(--surface);border:1px solid var(--accent-soft);border-radius:18px;
  padding:26px 24px 22px;box-shadow:0 30px 70px rgba(27,31,42,.10)}
.clogo{display:flex;align-items:center;gap:8px}
.clogo img{width:30px;height:30px;object-fit:contain;filter:drop-shadow(0 0 5px rgba(176,137,79,.4))}
.clogo .name{font-family:var(--font-display);letter-spacing:.2em;text-transform:uppercase;font-size:.82rem;color:var(--accent-deep);font-weight:700}
.kicker{color:var(--accent);font-size:.64rem;letter-spacing:.32em;text-transform:uppercase;margin:16px 0 6px;font-weight:700}
.card h2{font-family:var(--font-display);font-size:1.5rem;color:var(--ink);margin:0;font-weight:700}
.lead{color:var(--ink-soft);font-size:.86rem;margin:6px 0 2px;line-height:1.55}
label{display:block;color:var(--ink-soft);font-size:.76rem;margin:14px 0 6px}
.ip{position:relative}
.ip .ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--ink-faint);font-size:.9rem}
input{width:100%;background:var(--surface-2);color:var(--ink);border:1px solid var(--line);border-radius:12px;
  padding:12px 13px 12px 38px;font-size:.95rem;outline:none;transition:border-color .15s,box-shadow .15s;font-family:inherit}
input::placeholder{color:var(--ink-faint)}
input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.ip .eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--ink-faint);cursor:pointer;padding:6px}
.meter{height:4px;border-radius:3px;background:var(--line);margin-top:9px;overflow:hidden}
.meter i{display:block;height:100%;width:0;border-radius:3px;background:var(--danger);transition:width .2s,background .2s}
.meter i.mid{background:var(--accent)}
.meter i.ok{background:var(--ok)}
.primary{width:100%;margin-top:16px;border:0;cursor:pointer;color:var(--on-accent);font-weight:800;
  background:linear-gradient(180deg,var(--accent-bright),var(--accent-deep));border-radius:12px;padding:13px;
  font-size:.96rem;letter-spacing:.2px;box-shadow:0 10px 22px rgba(176,137,79,.28);
  transition:filter .15s,transform .06s;display:flex;align-items:center;justify-content:center;gap:8px;font-family:inherit}
.primary:hover{filter:brightness(1.06)} .primary:active{transform:translateY(1px)}
.primary[disabled]{opacity:.6;cursor:default;filter:none}
a.as-btn{text-decoration:none}
.altbtn{width:100%;margin-top:8px;background:transparent;color:var(--accent-deep);border:1px solid var(--accent);
  border-radius:12px;padding:12px;font-weight:700;font-size:.92rem;cursor:pointer;text-align:center;text-decoration:none;display:block;transition:background .15s,border-color .15s;font-family:inherit}
.altbtn:hover{background:var(--accent-soft);border-color:var(--accent-deep)}
.spin{width:15px;height:15px;border:2px solid var(--accent-soft);border-top-color:var(--on-accent);border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.secure{margin-top:16px;color:var(--accent-deep);font-size:.72rem;letter-spacing:.04em;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.lang{display:flex;gap:6px}
.lang button{background:none;border:1px solid var(--line);color:var(--ink-soft);border-radius:7px;padding:3px 9px;font-size:.72rem;cursor:pointer;font-family:inherit}
.lang button.on{border-color:var(--accent);color:var(--accent-deep)}
.done-check{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.55rem;font-weight:800;color:var(--surface);background:var(--ok);margin:0 0 10px;box-shadow:0 8px 22px rgba(47,143,91,.24)}
.bad-mark{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:800;color:var(--surface);background:var(--danger);margin:0 0 10px;box-shadow:0 8px 22px rgba(192,73,47,.22)}
.hint{color:var(--ink-faint);font-size:.76rem;margin:12px 0 0;line-height:1.5}
.linkrow{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;color:var(--ink-faint);font-size:.78rem;gap:10px;flex-wrap:wrap}
.linkrow a{color:var(--accent-deep);text-decoration:none;border-bottom:1px dotted var(--accent)}
.linkrow a:hover{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}