/* ============================================================
   Puente QuAI Villas ⇄ CAPU (index.html de Ricardo Alvarez, Tailwind CDN)
   ============================================================
   El pedido fue "usar este index [el de Ricardo] con el form que tenía
   [el nuestro, wireado a /api/lead]". Son dos sistemas de diseño
   distintos — Tailwind utility-first vs el sistema QuAI Analytics de
   design.md — así que en vez de mezclar selectores sueltos (que
   pisarían los `<h1>`, `<label>`, `<input>` de TODA la página de
   Ricardo), este archivo trae solo lo que el formulario necesita y lo
   deja envuelto en `.qv-form-scope`. :root y @font-face son globales a
   propósito: son variables y tipografías, no pintan nada por sí solas.
   Fuera de este archivo, el resto de la página sigue siendo 100% de
   Ricardo, tal cual pidió. */

@font-face {
  font-family: "Sora";
  src: url("/assets/fonts/Sora-Variable.woff2") format("woff2-variations");
  font-weight: 100 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter-Variable.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/JetBrainsMono-Variable.woff2") format("woff2-variations");
  font-weight: 100 800; font-style: normal; font-display: swap;
}

:root {
  --black:#000000;
  --navy:#082038;
  --navy-700:#0d2c47;
  --cobalt:#2563eb;
  --cobalt-deep:#1c4fd0;
  --taupe-tint:#f4efec;
  --white:#ffffff;
  --text-on-light:var(--navy);
  --text-on-light-secondary:#4a5c70;
  --text-on-light-muted:#8a7a70;
  --border-on-light:#e4dbd4;
  --error:#b4544a;

  --font-display:'Sora',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;

  --fs-small:14px; --fs-caption:12px;
  --tracking-eyebrow:0.24em;
  --fw-regular:400; --fw-semibold:600;

  --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px;

  --radius-sm:8px; --radius-lg:16px; --radius-pill:999px;
  --shadow-card-light:0 16px 40px -18px rgba(8,32,56,.14);
  --border-w:1px;
}

.qv-form-scope, .qv-form-scope * { box-sizing: border-box; }

.qv-form-scope .form-card {
  margin-inline: auto;
  background: var(--white);
  border: var(--border-w) solid var(--border-on-light);
  border-radius: var(--radius-lg);
  padding: var(--space-10);
  box-shadow: var(--shadow-card-light);
  max-width: 46rem;
}
@media (max-width: 40rem) { .qv-form-scope .form-card { padding: var(--space-6); } }

.qv-form-scope .progress { margin-bottom: var(--space-10); }
.qv-form-scope .progress-track {
  height: 3px; border-radius: var(--radius-pill);
  background: var(--border-on-light); overflow: hidden;
}
.qv-form-scope .progress-fill {
  display: block; height: 100%; width: 33.333%;
  background: var(--cobalt);
  border-radius: var(--radius-pill);
  transition: width .18s ease;
}
.qv-form-scope .progress-steps {
  display: flex; gap: var(--space-8);
  list-style: none; margin: var(--space-3) 0 0; padding: 0;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--text-on-light-muted);
}
.qv-form-scope .progress-steps .is-active { color: var(--cobalt); }
@media (max-width: 34rem) { .qv-form-scope .progress-steps li:not(.is-active) { display: none; } }

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

.qv-form-scope .step { display: none; border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.qv-form-scope .step.is-active { display: block; }

.qv-form-scope .field { margin-bottom: var(--space-5); }
.qv-form-scope .row { display: grid; gap: var(--space-4); grid-template-columns: 1fr 1fr; }
@media (max-width: 34rem) { .qv-form-scope .row { grid-template-columns: 1fr; } }

.qv-form-scope label {
  display: block; margin-bottom: var(--space-2);
  font-family: var(--font-body); font-weight: var(--fw-semibold);
  font-size: 13px; color: var(--text-on-light);
}
.qv-form-scope .req { color: var(--cobalt); }
.qv-form-scope .hint { display: block; font-weight: var(--fw-regular); font-size: var(--fs-caption); color: var(--text-on-light-muted); margin-top: 2px; }

.qv-form-scope input[type="text"], .qv-form-scope input[type="email"],
.qv-form-scope input[type="tel"], .qv-form-scope input[type="date"],
.qv-form-scope input[type="number"], .qv-form-scope select, .qv-form-scope textarea {
  width: 100%;
  font-family: var(--font-body); font-size: 15px; color: var(--text-on-light);
  padding: 12px 14px;
  background: var(--white);
  border: var(--border-w) solid var(--border-on-light);
  border-radius: var(--radius-sm);
  transition: border-color .17s ease, box-shadow .17s ease;
}
.qv-form-scope textarea { resize: vertical; }
.qv-form-scope select {
  appearance: none; cursor: pointer; padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23082038' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.qv-form-scope :is(input, select, textarea):focus-visible {
  outline: none;
  border-color: var(--cobalt);
  box-shadow: 0 0 0 3px rgba(37,99,235,.14);
}
.qv-form-scope .invalid { border-color: var(--error) !important; }

.qv-form-scope .check { display: flex; gap: 11px; align-items: flex-start; cursor: pointer; margin-bottom: var(--space-3); }
.qv-form-scope .check input {
  appearance: none; flex-shrink: 0;
  width: 18px; height: 18px; margin: 1px 0 0;
  border: var(--border-w) solid var(--border-on-light);
  border-radius: 5px; background: var(--white);
  cursor: pointer;
  transition: background .17s ease, border-color .17s ease;
}
.qv-form-scope .check input:checked {
  background: var(--cobalt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' fill='none'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat;
  border-color: var(--cobalt);
}
.qv-form-scope .check input:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37,99,235,.14); }
.qv-form-scope .check-text { font-size: var(--fs-small); font-weight: var(--fw-regular); margin: 0; }
.qv-form-scope .check-desc { font-size: var(--fs-caption); color: var(--text-on-light-muted); }

.qv-form-scope .check-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.qv-form-scope .check-grid .check { margin-bottom: 0; }

.qv-form-scope .rule { height: 1px; background: var(--border-on-light); border: 0; margin-block: var(--space-8); }

.qv-form-scope .form-error {
  font-size: var(--fs-small); color: var(--error);
  border-left: 2px solid var(--error);
  padding-left: var(--space-3); margin-block: var(--space-4);
}

.qv-form-scope .cf-turnstile { margin-block: var(--space-5); }
.qv-form-scope .nav-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--space-8); }

.qv-form-scope .btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-weight: var(--fw-semibold);
  font-size: 15px; line-height: 1; letter-spacing: -0.005em;
  padding: 13px 24px;
  border-radius: var(--radius-sm);
  border: var(--border-w) solid transparent;
  white-space: nowrap; cursor: pointer;
  transition: background .17s ease, border-color .17s ease, color .17s ease,
              box-shadow .17s ease, transform .17s ease;
}
.qv-form-scope .btn:hover { transform: translateY(-1px); }
.qv-form-scope .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.qv-form-scope .btn-primary { background: var(--navy); color: var(--white); border-color: var(--navy); }
.qv-form-scope .btn-primary:hover { background: var(--navy-700); border-color: var(--navy-700); color: var(--white); }
.qv-form-scope .btn-secondary { background: transparent; color: var(--text-on-light); border-color: var(--border-on-light); }
.qv-form-scope .btn-secondary:hover { border-color: var(--navy); background: var(--taupe-tint); color: var(--text-on-light); }

/* [hidden] antes que .success: si no, "display:flex" le gana al atributo
   hidden por prioridad de cascada (misma especificidad, orden de fuente)
   y el bloque de éxito queda visible desde que carga la página. */
.qv-form-scope .success[hidden] { display: none; }
.qv-form-scope .success { display: flex; flex-direction: column; gap: var(--space-4); }
.qv-form-scope .success-mark {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: var(--radius-pill);
  background: rgba(37,99,235,.10); color: var(--cobalt-deep);
  font-size: 20px;
}
.qv-form-scope .success h3 {
  font-family: var(--font-display); font-weight: 700; font-size: 22px; margin: 0;
  color: var(--text-on-light);
}
.qv-form-scope .success p { color: var(--text-on-light-secondary); margin: 0; }
.qv-form-scope .success-foot { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-on-light-muted); }
.qv-form-scope .sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}