/* ============================================================
   UWA — Onboarding 0 (forma de vivir)
   Extraído del inline de onboarding.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);
  --faint:      #9a9a97;
  --line:       var(--uwa-border);
  --wash:       var(--uwa-bg-alt);
  --accent:     var(--uwa-accent);
  --accent-dark:var(--uwa-accent-dark);
  --blue:       var(--uwa-accent);   /* alias: refs inline del markup → ladrillo */
  --sel-wash:   rgba(196, 92, 46, .07);
  --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: 20px 32px; font-family: var(--uwa-font-display); font-weight: 700; font-size: 17px; letter-spacing: -.03em; flex-shrink: 0; }
.brand span { color: var(--accent); }

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

.step { display: none; width: 100%; max-width: 720px; animation: fade .3s ease; }
.step.on { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.eyebrow { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 12px; }
h1 { font-family: var(--uwa-font-display); font-size: clamp(24px, 4vw, 36px); font-weight: 300; line-height: 1.12; letter-spacing: -.02em; }
.sub { margin-top: 12px; font-size: 15px; color: var(--muted); line-height: 1.5; }

/* Tamaño de lote */
.sizes { margin-top: 30px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.size { border: 1.5px solid var(--line); border-radius: var(--r); padding: 22px 16px; background: var(--paper); cursor: pointer; transition: border-color .15s, transform .1s, background .15s; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.size:hover { border-color: var(--ink); transform: translateY(-2px); }
.size.sel { border-color: var(--accent); background: var(--sel-wash); }
.size .sq { border: 2px solid var(--ink); border-radius: 0; background: var(--wash); }
.size strong { font-size: 15px; }
.size small { font-size: 12px; color: var(--muted); }

/* Preguntas forma de vida */
.questions { margin-top: 26px; text-align: left; display: flex; flex-direction: column; gap: 22px; }
.q { border: 1px solid var(--line); border-radius: var(--r); padding: 18px 18px 16px; }
.q-preg { font-family: var(--uwa-font-display); font-size: 17px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 14px; }
.opts { display: flex; flex-wrap: wrap; gap: 10px; }
.opt { border: 1.5px solid var(--line); border-radius: var(--r); padding: 9px 18px; background: var(--paper); cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--ink); transition: border-color .12s, background .12s, color .12s; }
.opt:hover { border-color: var(--ink); }
.opt.sel { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Acciones */
.actions { margin-top: 28px; display: flex; gap: 12px; justify-content: center; }
.btn { padding: 14px 32px; border: 1.5px solid transparent; border-radius: var(--r); font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s, border-color .15s, opacity .2s; }
.btn-pri { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-pri:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn-pri:disabled { opacity: .35; cursor: default; }
.btn-sec { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-sec:hover { background: var(--ink); color: var(--paper); }

.dots { display: flex; gap: 6px; justify-content: center; margin-top: 26px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.dot.on { background: var(--ink); }

.empty { margin-top: 24px; color: var(--faint); font-size: 14px; }