@import url('/_ds/cl-nica-anna-anna-design-system-5b5d4042-1554-4da2-b933-95468decf49a/tokens/colors.css');

* { box-sizing: border-box; }
body {
  margin: 0; font-family: 'Nunito Sans', system-ui, sans-serif;
  color: var(--text-body, #4F4A42); background: var(--surface-page, #FFFDFA);
}
.wrap { max-width: 560px; margin: 0 auto; padding: 32px 20px 64px; }
.brand { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.5rem; color: var(--text-strong, #2E2B26); text-decoration: none; }
h1 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; font-size: 1.8rem; color: var(--text-strong, #2E2B26); margin: 8px 0 4px; }
.sub { color: var(--text-muted, #7A7266); margin: 0 0 24px; }

.progress { display: flex; gap: 6px; margin: 20px 0 28px; }
.progress span { flex: 1; height: 4px; border-radius: 999px; background: var(--border-subtle, #F4EDE3); }
.progress span.done { background: var(--action-primary-bg, #33607A); }

.step { display: none; }
.step.active { display: block; animation: fade .2s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; font-size: .95rem; color: var(--text-strong, #2E2B26); margin-bottom: 6px; }
.field input[type=text], .field input[type=email], .field input[type=tel], .field input[type=date], .field textarea, .field select {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--border-default, #E8DECE);
  border-radius: 12px; font: inherit; background: var(--surface-card, #fff); color: inherit;
}
.field textarea { min-height: 84px; resize: vertical; }
.field .err { color: var(--status-danger-fg, #A9503B); font-size: .85rem; margin-top: 4px; display: none; }
.field.invalid .err { display: block; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--status-danger-fg, #A9503B); }

.choices { display: grid; gap: 10px; }
.choice { display: block; border: 1.5px solid var(--border-default, #E8DECE); border-radius: 16px; padding: 14px 16px; cursor: pointer; }
.choice input { position: absolute; opacity: 0; }
.choice:has(input:checked) { border-color: var(--border-focus, #8FBFD5); background: var(--blue-100, #EAF3F8); }
.choice .t { font-weight: 700; color: var(--text-strong, #2E2B26); }
.choice .d { font-size: .88rem; color: var(--text-muted, #7A7266); }

.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { border: 1.5px solid var(--border-default, #E8DECE); border-radius: 999px; padding: 9px 16px; cursor: pointer; font-weight: 600; font-size: .9rem; }
.pill input { position: absolute; opacity: 0; }
.pill:has(input:checked) { border-color: var(--border-focus, #8FBFD5); background: var(--blue-100, #EAF3F8); color: var(--blue-800, #244656); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.nav { display: flex; gap: 10px; margin-top: 28px; }
.btn { border: none; border-radius: 999px; padding: 13px 26px; font: inherit; font-weight: 600; cursor: pointer; }
.btn-primary { background: var(--action-primary-bg, #33607A); color: #fff; }
.btn-primary[disabled] { background: var(--action-disabled-bg, #F4EDE3); color: var(--action-disabled-fg, #9C9284); cursor: not-allowed; }
.btn-ghost { background: transparent; border: 1.5px solid var(--border-default, #E8DECE); color: var(--text-muted, #7A7266); text-decoration: none; display: inline-block; }
.nav .btn-primary { margin-left: auto; }

.consent { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; }
.consent input { margin-top: 3px; }

.done-box { text-align: center; padding: 32px 0; }
.done-box h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; color: var(--text-strong, #2E2B26); }

.formerr { background: var(--status-danger-bg, #FDF2EF); color: var(--status-danger-fg, #A9503B); border-radius: 12px; padding: 12px 14px; margin-top: 16px; display: none; }
.formerr.show { display: block; }