/* Onboarding form (/empezar) and its confirmation page. Builds on site.css. */

.onb { padding-block: clamp(2.5rem, 6vw, 5rem) var(--sec-pad); }
.onb-grid { display: grid; gap: 2.5rem; }
@media (min-width: 1040px) {
  .onb-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(3rem, 6vw, 6rem); align-items: start; }
  .onb-intro { position: sticky; top: calc(var(--header-h) + 2rem); }
}
.onb-intro .lead { margin-top: 1.25rem; }
.onb-steps { margin: 2rem 0 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: .9rem; max-width: 34ch; }
.onb-steps li { counter-increment: s; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .75rem; color: var(--ink-soft); }
.onb-steps li::before {
  content: counter(s); display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  font: 600 .875rem var(--font-sans); color: var(--birome); box-shadow: inset 0 0 0 1.5px var(--birome);
}
.onb-steps b { color: var(--ink); font-weight: 600; }

.onb-form { display: grid; gap: 2.5rem; }
.onb-form fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: 1.5rem; min-width: 0; }
.onb-form legend {
  float: left; width: 100%; padding: 0 0 1rem; margin-bottom: .25rem; border-bottom: 1px solid var(--rule);
  font-family: var(--font-display); font-weight: 420; font-size: var(--t-h4); letter-spacing: -.01em;
}
.onb-form legend + * { clear: both; }

.f { display: grid; gap: .45rem; min-width: 0; }
.f-row { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 640px) { .f-row { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } .f-row--even { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.f-label { font-weight: 600; font-size: .9375rem; }
.f-label .opt { font-weight: 400; color: var(--ink-mute); }
.f-hint { font-size: .875rem; line-height: 1.45; color: var(--ink-soft); max-width: 60ch; }
.f-err { font-size: .875rem; font-weight: 600; color: #A42525; }
.f-err::before { content: "• "; }

.f-input, .f-text {
  width: 100%; min-height: 50px; padding: .75em .95em; border: 0; border-radius: var(--r-2);
  background: var(--paper-hi); color: var(--ink); font: inherit; font-size: 1.0625rem; line-height: 1.4;
  box-shadow: inset 0 0 0 1px var(--rule-strong); transition: box-shadow .15s var(--ease-ui);
  -webkit-appearance: none; appearance: none;
}
.f-text { min-height: 9.5rem; resize: vertical; }
.f-input::placeholder, .f-text::placeholder { color: var(--ink-faint); }
.f-input:focus, .f-text:focus { outline: none; box-shadow: inset 0 0 0 2px var(--birome); }
[aria-invalid="true"] { box-shadow: inset 0 0 0 2px #A42525 !important; }
.f-count { justify-self: end; font-size: .8125rem; color: var(--ink-mute); font-variant-numeric: tabular-nums; }

.f-domain { display: flex; align-items: stretch; border-radius: var(--r-2); box-shadow: inset 0 0 0 1px var(--rule-strong); background: var(--paper-hi); }
.f-domain:focus-within { box-shadow: inset 0 0 0 2px var(--birome); }
.f-domain .f-input { box-shadow: none; background: transparent; padding-right: .25em; }
.f-domain .f-input:focus { box-shadow: none; }
.f-suffix { display: grid; place-items: center; padding-right: .95em; color: var(--ink-mute); font-size: 1.0625rem; }
.f-status { min-height: 1.3em; font-size: .875rem; font-weight: 600; color: var(--ink-soft); }
.f-status.is-ok { color: #1E6B45; }
.f-status.is-no { color: #A42525; }

/* Choices: radio cards and checkbox chips */
.choices { display: grid; gap: .6rem; }
@media (min-width: 640px) { .choices--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .choices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.choice { position: relative; display: flex; align-items: center; gap: .7rem; min-height: 50px; padding: .7em .95em; border-radius: var(--r-2); background: var(--paper-hi); box-shadow: inset 0 0 0 1px var(--rule-strong); cursor: pointer; font-size: 1rem; line-height: 1.3; }
.choice input { flex: none; width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--birome); }
.choice:has(input:checked) { box-shadow: inset 0 0 0 2px var(--birome); }
.choice:has(input:focus-visible) { outline: 2px solid var(--birome); outline-offset: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips .choice { min-height: 44px; padding: .5em .85em; }

/* Photos */
.f-photos { display: flex; gap: .75rem; flex-wrap: wrap; }
.f-photos:empty { display: none; }
.f-photos img { width: 5.5rem; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-2); background: var(--paper-lo); }
.f-file { font: inherit; font-size: .9375rem; max-width: 100%; }
.f-file::file-selector-button { margin-right: .75rem; padding: .6em 1em; border: 0; border-radius: var(--r-1); background: var(--ink); color: var(--paper-hi); font: 600 .875rem var(--font-sans); cursor: pointer; }
.f-text--short { min-height: 5.5rem; }

/* Frequent questions */
.f-faq { display: grid; gap: .9rem; padding-bottom: 1.25rem; border-bottom: 1px dashed var(--rule); }
.f-more { display: grid; gap: 1.5rem; }
.f-more > summary { cursor: pointer; font-weight: 600; color: var(--birome); width: max-content; }
.f-more[open] > summary { margin-bottom: 1rem; }
.choice:has(input:disabled) { opacity: .5; cursor: default; }

.f-consent { display: flex; gap: .75rem; align-items: flex-start; font-size: .9375rem; line-height: 1.45; }
.f-consent input { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .15rem; accent-color: var(--birome); }

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

.onb-alert { padding: 1rem 1.15rem; border-radius: var(--r-2); background: #F7E3E0; color: #6E1717; font-weight: 600; }
.onb-alert:focus { outline: 2px solid #A42525; outline-offset: 2px; }
.onb-submit { display: grid; gap: .9rem; justify-items: start; }
.onb-fine { font-size: .875rem; color: var(--ink-soft); max-width: 52ch; }

.js .is-hidden { display: none; }

/* Confirmation page */
.done { padding-block: clamp(4rem, 12vw, 9rem) var(--sec-pad); }
.done-in { display: grid; gap: 1.25rem; max-width: 44rem; }
.done .actions { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .75rem; }