/* ============================================================
   UWA — Inicio (elección: usuario nuevo / ya tengo)
   Extraído del inline de index.html y retematizado con el
   UWA Design System. Depende de: uwa-design-system.css.
   ============================================================ */

:root {
  --ink:      var(--uwa-fg);
  --paper:    var(--uwa-bg);
  --muted:    var(--uwa-muted);
  --line:     var(--uwa-border);
  --wash:     var(--uwa-bg-alt);
  --accent:   var(--uwa-accent);
  --accent-dark: var(--uwa-accent-dark);
  --blue:     var(--uwa-accent);   /* alias */
  --r:        var(--uwa-r);
}

body { font-family: var(--uwa-font); background: var(--paper); color: var(--ink); min-height: 100vh; display: flex; flex-direction: column; }

.brand { padding: 22px 32px; font-family: var(--uwa-font-display); font-weight: 700; font-size: 18px; letter-spacing: -.03em; }
.brand span { color: var(--accent); }

main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 24px 64px; text-align: center; }

h1 { font-family: var(--uwa-font-display); font-size: clamp(26px, 4.5vw, 40px); font-weight: 300; line-height: 1.1; letter-spacing: -.02em; }
.sub { margin-top: 12px; font-size: 16px; color: var(--muted); }

.opts { margin-top: 38px; display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
.opt { width: 260px; border: 1.5px solid var(--line); border-radius: var(--r); padding: 30px 24px; background: var(--paper); text-decoration: none; color: var(--ink); transition: border-color .15s, transform .1s, background .15s; display: flex; flex-direction: column; align-items: center; gap: 10px; cursor: pointer; }
.opt:hover { border-color: var(--ink); transform: translateY(-3px); }
.opt .ico { font-size: 34px; line-height: 1; }
.opt strong { font-size: 18px; font-family: var(--uwa-font-display); font-weight: 700; letter-spacing: -.02em; }
.opt small { font-size: 13.5px; color: var(--muted); line-height: 1.5; }

/* Opción primaria: ladrillo sólido */
.opt.pri { background: var(--accent); border-color: var(--accent); color: #fff; }
.opt.pri:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.opt.pri small { color: rgba(255, 255, 255, .85); }