/* Hallmark · macrostructure: Letter · tone: soft-utilitarian · anchor hue: terracotta 40
 * theme: custom · paper oklch(97.5% 0.006 240) · accent oklch(56% 0.13 40)
 * display Bricolage Grotesque + body Instrument Sans · axes: light / grotesk-sans / warm
 * pre-emit critique: P4 H4 E4 S4 R5 V4
 */
:root {
  color-scheme: light;
  --color-paper: oklch(96.8% 0.016 70);
  --color-paper-2: oklch(93.5% 0.022 65);
  --color-card: oklch(99% 0.008 75);
  --color-ink: oklch(27% 0.03 45);
  --color-ink-2: oklch(49% 0.035 50);
  --color-rule: oklch(87% 0.025 65);
  --color-accent: oklch(56% 0.13 40);
  --color-accent-soft: oklch(93% 0.035 45);
  --color-accent-ink: oklch(99% 0.01 60);
  --color-focus: oklch(46% 0.13 250);
  --color-error: oklch(50% 0.17 30);
  --color-ok: oklch(52% 0.1 145);
  --color-marca: oklch(87% 0.07 55);
  --color-nuevo: oklch(56% 0.13 40);
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Instrument Sans", system-ui, sans-serif;
  --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px;
  --radius-sm: 10px; --radius-md: 18px; --radius-pill: 999px;
  --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);
  --dur-fast: 140ms;
}
* { box-sizing: border-box; }
html, body { overflow-x: clip; }
body {
  margin: 0; background: var(--color-paper); color: var(--color-ink);
  font: 400 17px/1.55 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
main.formulario { max-width: 620px; margin: 0 auto; padding: var(--space-2xl) var(--space-md) var(--space-2xl); }
h1, h2 { font-family: var(--font-display); font-style: normal; font-weight: 600; letter-spacing: -0.015em; font-variation-settings: 'SOFT' 50; margin: 0; overflow-wrap: anywhere; min-width: 0; }
h1 { font-size: clamp(2.1rem, 6vw + 0.6rem, 3.2rem); line-height: 1.05; font-weight: 600; }
h2 { font-size: 1.5rem; line-height: 1.2; font-weight: 600; }
.carta { margin: var(--space-lg) 0 var(--space-xl); color: var(--color-ink-2); }
.carta p { margin: 0 0 var(--space-md); }
.carta strong { color: var(--color-ink); font-weight: 600; }
.firma { color: var(--color-ink); font-weight: 500; }

.formulario section {
  background: var(--color-card); border: 1px solid var(--color-rule); border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-md) var(--space-sm); margin-bottom: var(--space-md);
}
@media (min-width: 480px) { .formulario section { padding: var(--space-lg) var(--space-lg) var(--space-sm); } }
.formulario section > h2 + .q { margin-top: var(--space-md); }
.formulario section > .bajada { color: var(--color-ink-2); margin: var(--space-xs) 0 var(--space-md); font-size: 0.95rem; }
.formulario section.opcional { background: transparent; border-style: dashed; }

.q { margin: 0 0 var(--space-lg); border: 0; padding: 0; min-width: 0; }
.q > legend, .q > label.t { display: block; font-weight: 600; margin-bottom: var(--space-sm); padding: 0; }
.q .ayuda { display: block; font-weight: 400; color: var(--color-ink-2); font-size: 0.9rem; margin-top: 2px; }

input[type=text], input[type=date], textarea {
  width: 100%; font: inherit; color: var(--color-ink); background: var(--color-paper);
  border: 1px solid var(--color-rule); border-radius: var(--radius-sm); padding: 12px 14px;
  transition: border-color var(--dur-fast) var(--ease-out);
}
textarea { min-height: 96px; resize: vertical; }
input[type=text]:hover, textarea:hover { border-color: var(--color-ink-2); }
input:focus-visible, textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; border-color: transparent; }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-block; padding: 9px 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--color-rule); background: var(--color-paper);
  font-size: 0.95rem; line-height: 1.3; cursor: pointer; user-select: none;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.chip:hover span { border-color: var(--color-ink-2); }
.chip input:checked + span { background: var(--color-accent-soft); border-color: var(--color-accent); color: var(--color-ink); font-weight: 500; }
.chip input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.chip input:active + span { transform: translateY(1px); }

.envio { margin-top: var(--space-xl); }
.envio p { color: var(--color-ink-2); margin: var(--space-sm) 0 var(--space-lg); }
.botones { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.btn {
  font: 600 1rem/1 var(--font-body); padding: 15px 22px; border-radius: var(--radius-pill);
  border: 1px solid var(--color-accent); cursor: pointer; white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.btn-main { background: var(--color-accent); color: var(--color-accent-ink); }
.btn-main:hover { background: color-mix(in oklch, var(--color-accent) 85%, black); }
.btn-main { box-shadow: 0 1px 0 oklch(0% 0 0 / 0.06), 0 6px 16px -8px color-mix(in oklch, var(--color-accent) 60%, transparent); }
.btn-alt { background: transparent; color: var(--color-ink); border-color: var(--color-rule); }
.btn-alt:hover { border-color: var(--color-ink-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.estado { min-height: 1.5em; margin-top: var(--space-sm); font-size: 0.95rem; color: var(--color-ink-2); }
.estado.ok { color: var(--color-ink); }
.guardado { font-size: 0.85rem; color: var(--color-ink-2); margin-top: var(--space-md); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* compartido por formularios, landing y panel */
a { color: inherit; text-decoration-color: var(--color-accent); text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 4px; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.estado.error { color: var(--color-error); }
input[type=tel] {
  width: 100%; font: inherit; color: var(--color-ink); background: var(--color-paper);
  border: 1px solid var(--color-rule); border-radius: var(--radius-sm); padding: 12px 14px;
}
input[type=tel]:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; border-color: transparent; }
.req { color: var(--color-accent); font-weight: 600; }
.listo { padding: var(--space-2xl) 0; }
.listo p { color: var(--color-ink-2); margin: var(--space-md) 0 0; max-width: 46ch; }
.volver { display: inline-block; margin-bottom: var(--space-lg); color: var(--color-ink-2); font-size: 0.95rem; }

/* opción con explicación: para que elijan sabiendo para qué sirve */
.chip.desc { flex: 1 1 100%; }
.chip.desc span { display: block; border-radius: var(--radius-sm); padding: 12px 14px; }
.chip.desc strong { display: block; font-weight: 600; }
.chip.desc small { display: block; color: var(--color-ink-2); font-size: 0.88rem; margin-top: 2px; line-height: 1.4; }
.chip.desc input:checked + span small { color: var(--color-ink); }

/* el envío es la acción principal del formulario: grande y fácil de tocar */
.envio .btn-main#enviar { font-size: 1.05rem; padding: 18px 32px; min-width: 220px; }
@media (max-width: 600px) { .envio .btn-main#enviar { width: 100%; } }

/* pregunta obligatoria sin contestar */
.q.falta { outline: 2px solid var(--color-error); outline-offset: 8px; border-radius: 6px; }
.q.falta > legend, .q.falta > label.t { color: var(--color-error); }