/* ============================================================
   QuAI Villas — implementación del sistema QuAI Analytics
   Ver design.md. Modo CLARO (§1: "modo claro — cuerpo web").
   No mezclar modos. No hardcodear hex fuera de :root.
   ============================================================ */

/* ---------- tipografías auto-hospedadas (design.md §2.3) ----------
   Nunca desde CDN de terceros. Si los archivos no existen, el
   fallback system-ui mantiene la página funcional. */
@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 {
  /* ---- 2.1 paleta base ---- */
  --black:#000000;
  --navy:#082038;
  --navy-800:#061829;
  --navy-700:#0d2c47;
  --navy-line:#1b3a58;
  --cobalt:#2563eb;
  --cobalt-soft:#6f9bf5;
  --cobalt-deep:#1c4fd0;
  --taupe:#dbcdc6;
  --taupe-deep:#b9a99f;
  --taupe-tint:#f4efec;
  --white:#ffffff;
  --offwhite:#f7f4f2;
  --muted:#8ea3b8;
  --muted-2:#5f7690;

  /* ---- 2.2 semántico, modo oscuro (navbar) ----
     design.md §3 define el componente Navbar con surface "dark" por
     defecto, asi que la barra navy no es una desviacion del sistema. */
  --bg-dark:var(--navy);
  --surface-dark:var(--navy-800);
  --text-on-dark:var(--white);
  --text-on-dark-secondary:var(--taupe);
  --text-on-dark-muted:var(--muted);
  --border-on-dark:var(--navy-line);
  --accent-on-dark:var(--cobalt);

  /* ---- 2.2 semántico, modo claro (cuerpo) ---- */
  --bg-light:var(--white);
  --bg-light-warm:var(--offwhite);
  --surface-light:var(--taupe-tint);
  --surface-light-warm:var(--taupe);
  --text-on-light:var(--navy);
  --text-on-light-secondary:#4a5c70;
  --text-on-light-muted:#8a7a70;
  --border-on-light:#e4dbd4;
  --accent-on-light:var(--navy);
  --link:var(--cobalt);
  --link-hover:var(--cobalt-deep);
  --error:#b4544a;

  /* ---- 2.3 tipografía ---- */
  --font-display:'Sora',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;

  --fs-display:clamp(44px,7.5vw,96px);
  --fs-h1:clamp(32px,5.4vw,60px);
  --fs-h2:clamp(28px,4.4vw,44px);
  --fs-h3:26px; --fs-h4:20px;
  --fs-body-lg:19px; --fs-body:16px;
  --fs-small:14px; --fs-caption:12px; --fs-eyebrow:12px;

  --lh-tight:1.08; --lh-heading:1.3; --lh-body:1.65;
  --tracking-tight:-0.02em; --tracking-wide:0.1em; --tracking-eyebrow:0.24em;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;

  /* ---- 2.4 espaciado, forma, layout ---- */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px;
  --space-12:48px; --space-16:64px; --space-20:80px;
  --space-28:112px; --space-36:144px;

  --radius-sm:8px; --radius-md:12px; --radius-lg:16px;
  --radius-xl:18px; --radius-pill:999px;

  --shadow-card-light:0 16px 40px -18px rgba(8,32,56,.14);
  --border-w:1px;

  --container-max:1140px;
  --gutter:44px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-light);
  color: var(--text-on-light);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
@media (max-width: 40rem) { :root { --gutter: 20px; } }

/* ---------- tipografía ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-heading);
  margin: 0;
  text-wrap: pretty;
  max-width: 20em;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p  { margin: 0; max-width: 38em; text-wrap: pretty; }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }

.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;
}

/* Eyebrow (design.md §3) — mono, mayúsculas, tracking amplio */
.eyebrow {
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--cobalt);
  margin: 0 0 var(--space-3);
}
.eyebrow.is-muted { color: var(--text-on-light-muted); }

/* ---------- Button (design.md §3) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: 15px;
  /* Sin esto hereda line-height:1.65 del body (design.md §2.3) y el texto
     queda visualmente pegado hacia arriba dentro del padding simétrico:
     con tipografías variables el alto de línea no reparte el espacio
     sobrante igual arriba que abajo del glifo. */
  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;
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-lg { padding: 17px 34px; font-size: 16px; }

.btn-primary { background: var(--navy); color: var(--white); border-color: var(--navy); }
.btn-primary:hover { background: var(--navy-700); border-color: var(--navy-700); color: var(--white); }

.btn-secondary { background: transparent; color: var(--text-on-light); border-color: var(--border-on-light); }
.btn-secondary:hover { border-color: var(--navy); background: var(--surface-light); color: var(--text-on-light); }

.btn-ghost { background: transparent; color: var(--cobalt); border-color: transparent; padding-inline: var(--space-2); }
.btn-ghost:hover { color: var(--cobalt-deep); }

/* ---------- Navbar — superficie clara ----------
   Excepción pedida por el usuario: design.md §3 fija surface "dark" (navy)
   para este componente. Se pisa a blanco a pedido explícito, así que los
   enlaces, el logo y el CTA usan los tokens *-on-light en vez de *-on-dark
   — es la misma lógica de light/dark que ya usa el resto de la página,
   solo que aplicada al navbar en lugar de al cuerpo. */
.navbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-6);
  padding: 18px var(--gutter);
  background: var(--white);
  border-bottom: var(--border-w) solid var(--border-on-light);
  position: sticky; top: 0; z-index: 20;
}
.navbar-logo { height: 30px; width: auto; display: block; }
.wordmark {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 18px;
  letter-spacing: var(--tracking-tight);
  color: var(--text-on-light);
}
.navlinks { display: flex; align-items: center; gap: 28px; }
/* :not(.btn) — sin esto, este padding-bottom (deja aire para el subrayado
   de hover de un link de texto) le gana por especificidad al padding
   simétrico de .btn y el CTA queda con el contenido pegado al fondo. */
.navlinks a:not(.btn) {
  font-size: var(--fs-small);
  color: var(--text-on-light-secondary);
  padding-bottom: 3px;
  transition: color .17s ease;
}
.navlinks a:not(.btn):hover { color: var(--link-hover); }
@media (max-width: 48rem) { .navlinks a:not(.btn) { display: none; } }

/* Sobre claro el primario va navy, no cobalto (design.md §3 Button). */
.navbar .btn-primary { background: var(--navy); border-color: var(--navy); color: var(--white); }
.navbar .btn-primary:hover { background: var(--navy-700); border-color: var(--navy-700); }

/* ---------- selector de idioma (navbar, superficie clara) ---------- */
.langswitch {
  display: flex; gap: 2px;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: var(--surface-light);
  border: var(--border-w) solid var(--border-on-light);
}
.lang-btn {
  font-family: var(--font-mono); font-weight: var(--fw-medium);
  font-size: 11px; line-height: 1; letter-spacing: .06em;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  border: none; background: transparent;
  color: var(--text-on-light-muted);
  cursor: pointer;
  transition: background .17s ease, color .17s ease;
}
.lang-btn:hover { color: var(--text-on-light); }
.lang-btn[aria-pressed="true"] { background: var(--cobalt); color: var(--white); }
@media (max-width: 48rem) { .langswitch { order: 2; } }

/* ---------- secciones ---------- */
.section { padding-block: var(--space-28); }
@media (max-width: 48rem) { .section { padding-block: var(--space-16); } }
.section-warm { background: var(--bg-light-warm); }

.section-heading { display: flex; flex-direction: column; gap: 14px; margin-bottom: var(--space-12); }
.section-heading p { font-size: 17px; color: var(--text-on-light-secondary); }

/* ---------- hero a pantalla completa (maqueta Stitch) ----------
   La superficie pasa a ser oscura, asi que dentro del hero rigen los
   tokens *-on-dark y el boton primario va cobalto, igual que en el
   navbar (design.md §3, Button sobre surface "dark"). */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: center;
  min-height: min(86vh, 780px);
  padding-block: var(--space-20);
  background: var(--navy);   /* color de respaldo si la foto no carga */
}
.hero-bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 60%;
}
/* Velo navy. Sin el, el blanco sobre el cielo del atardecer no llega a 4.5:1. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom,
    rgba(8,32,56,.36) 0%, rgba(8,32,56,.60) 55%, rgba(8,32,56,.80) 100%);
}

.hero-copy { max-width: 44rem; }
.hero .eyebrow { color: var(--taupe); }
.hero h1 {
  font-size: var(--fs-display); max-width: 15em;
  color: var(--text-on-dark); margin-bottom: var(--space-6);
}
.hero-intro {
  font-size: var(--fs-body-lg); color: var(--text-on-dark-secondary);
  margin-bottom: var(--space-10);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.hero .btn-primary { background: var(--accent-on-dark); border-color: var(--accent-on-dark); color: var(--white); }
.hero .btn-primary:hover { background: var(--cobalt-deep); border-color: var(--cobalt-deep); color: var(--white); }
.hero .btn-secondary { color: var(--text-on-dark); border-color: rgba(255,255,255,.38); }
.hero .btn-secondary:hover { background: rgba(255,255,255,.10); border-color: var(--white); color: var(--text-on-dark); }

/* ---------- buscador rapido flotante ---------- */
.quicksearch {
  margin-top: var(--space-16);
  display: grid; gap: var(--space-4);
  grid-template-columns: 1.3fr 1fr 1fr .7fr auto;
  align-items: end;
  padding: var(--space-5);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 28px 64px -30px rgba(0,0,0,.6);
}
@media (max-width: 62rem) { .quicksearch { grid-template-columns: 1fr 1fr; } }
@media (max-width: 34rem) { .quicksearch { grid-template-columns: 1fr; } }
.quicksearch .field { margin-bottom: 0; }
.quicksearch label {
  font-family: var(--font-mono); font-weight: var(--fw-medium);
  font-size: 10px; letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--text-on-light-muted);
}
.quicksearch .btn { width: 100%; }

/* La banda de metricas ya no vive dentro del hero. */
.section-metrics { padding-block: var(--space-16); }
.section-metrics .metrics { margin-top: 0; padding-top: 0; border-top: 0; }

/* ---------- servicios en rejilla bento ---------- */
.bento { display: grid; gap: var(--space-6); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 62rem) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 40rem) { .bento { grid-template-columns: 1fr; } }

/* Tarjeta destacada: la foto ocupa la caja entera y el texto va encima. */
.bento-feature {
  grid-row: span 2;
  position: relative;
  min-height: 24rem;
  padding: 0;
  overflow: hidden;
  gap: 0;
}
@media (max-width: 40rem) { .bento-feature { grid-row: auto; min-height: 20rem; } }
.bento-feature img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* La foto es apaisada (3:2) y la caja es vertical, asi que el alto entra
     entero y solo hay margen horizontal. La villa esta a la izquierda. */
  object-position: 22% center;
}
.bento-feature .bento-body {
  position: relative;
  margin-top: auto;
  display: flex; flex-direction: column; gap: 8px;
  padding: var(--space-6);
  background: linear-gradient(to top,
    rgba(8,32,56,.90) 0%, rgba(8,32,56,.60) 62%, rgba(8,32,56,0) 100%);
}
/* Doble clase a proposito: el bloque Card vive mas abajo en el archivo y
   con un solo selector .bento-feature ganaria el color claro de .card p. */
.card.bento-feature h3 { color: var(--text-on-dark); }
.card.bento-feature p { color: var(--text-on-dark-secondary); }
.card.bento-feature .eyebrow { color: var(--taupe); }
.bento-link {
  font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: 13px;
  color: var(--white); margin-top: var(--space-2);
  border-bottom: var(--border-w) solid rgba(255,255,255,.45);
  align-self: flex-start; padding-bottom: 2px;
  transition: border-color .17s ease;
}
.bento-link:hover { color: var(--white); border-bottom-color: var(--white); }

/* Cierre de la rejilla: una tarjeta ancha, icono a la izquierda. */
.bento-wide {
  grid-column: 1 / -1;
  flex-direction: row; align-items: center; flex-wrap: wrap;
  gap: var(--space-6);
}
.bento-wide .card-icon { margin-bottom: 0; }

/* Icono de tarjeta. Navy sobre taupe: el cobalto queda reservado a dato
   y accion (design.md §2.2), y aqui solo esta decorando. */
.card-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  background: var(--surface-light);
  color: var(--navy);
  margin-bottom: var(--space-2);
}
.card-icon svg { width: 22px; height: 22px; display: block; }

/* ---------- Metric (design.md §3) ---------- */
.metrics {
  display: flex; flex-wrap: wrap; gap: var(--space-16);
  margin-top: var(--space-16); padding-top: var(--space-10);
  border-top: var(--border-w) solid var(--border-on-light);
}
.metric { display: flex; flex-direction: column; gap: var(--space-2); }
.metric-value {
  font-family: var(--font-mono); font-weight: var(--fw-medium);
  font-size: 48px; line-height: 1;
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  color: var(--text-on-light);
}
.metric-label {
  font-family: var(--font-body); font-weight: var(--fw-medium);
  font-size: 13px; max-width: 20em;
  color: var(--text-on-light-secondary);
}
.metric-note {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-on-light-muted);
}

/* ---------- Card (design.md §3) ---------- */
.grid-cards { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }

.card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 26px 28px;
  border-radius: var(--radius-lg);
  background: var(--white);
  border: var(--border-w) solid var(--border-on-light);
  transition: border-color .17s ease, box-shadow .17s ease;
}
.card:hover { border-color: var(--taupe-deep); box-shadow: var(--shadow-card-light); }

/* Tarjeta con foto: la imagen sangra hasta el borde superior. */
.card-media {
  margin: -26px -28px 6px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface-light);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.card-media img {
  width: 100%; height: 100%; display: block;
  object-fit: cover;
  transition: transform .17s ease;
}
.card:hover .card-media img { transform: scale(1.02); }

/* Marcador mientras no exista el archivo de la seccion. */
.card-media.is-empty {
  display: grid; place-items: center; text-align: center;
  border-bottom: var(--border-w) dashed var(--border-on-light);
  padding: var(--space-4);
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-on-light-muted);
}
.card-warm { background: var(--surface-light); border-color: transparent; }
.card-warm:hover { border-color: var(--taupe-deep); }
.card h3 { font-size: 19px; line-height: var(--lh-heading); letter-spacing: -0.015em; font-weight: var(--fw-semibold); }
.card p { font-size: var(--fs-small); color: var(--text-on-light-secondary); }
.card .eyebrow { font-size: 10px; margin-bottom: 0; }

/* ---------- Pedidos: stepper de cantidad dentro de .card ----------
   El input[type=number] real sigue siendo la fuente de verdad para
   assets/pedidos.js (data-nombre/categoria/precio, min/max, value) --
   los botones +/- solo lo incrementan y disparan un evento "input" para
   que el total en vivo se siga actualizando sin tocar esa lógica. */
.qty-stepper { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: var(--space-2); }
.qty-btn {
  flex-shrink: 0; width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  border: var(--border-w) solid var(--border-on-light);
  background: var(--white); color: var(--text-on-light);
  font-size: 16px; line-height: 1; cursor: pointer;
  transition: border-color .17s ease, background .17s ease;
}
.qty-btn:hover { border-color: var(--navy); background: var(--taupe-tint); }
.qty-btn:focus-visible { outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 3px rgba(37,99,235,.14); }
.qty-stepper input[type="number"] {
  width: 3rem; padding: 6px 4px; text-align: center;
  -moz-appearance: textfield;
}
.qty-stepper input[type="number"]::-webkit-inner-spin-button,
.qty-stepper input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- formulario ---------- */
.form-card {
  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) { .form-card { padding: var(--space-6); } }

/* progreso: 3 pasos */
.progress { margin-bottom: var(--space-10); }
.progress-track {
  height: 3px; border-radius: var(--radius-pill);
  background: var(--border-on-light); overflow: hidden;
}
.progress-fill {
  display: block; height: 100%; width: 33.333%;
  background: var(--cobalt);          /* cobalto = dato, correcto aquí */
  border-radius: var(--radius-pill);
  transition: width .18s ease;
}
.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);
}
.progress-steps .is-active { color: var(--cobalt); }
@media (max-width: 34rem) { .progress-steps li:not(.is-active) { display: none; } }

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

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

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

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);
}
.req { color: var(--cobalt); }
.hint { display: block; font-weight: var(--fw-regular); font-size: var(--fs-caption); color: var(--text-on-light-muted); margin-top: 2px; }

/* Input y Select (design.md §3) */
input[type="text"], input[type="email"], input[type="tel"],
input[type="date"], input[type="number"], select, 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;
}
textarea { resize: vertical; }
select {
  appearance: none; cursor: pointer; padding-right: 38px;
  /* chevron 12x8, trazo 1.5, navy — design.md §3 Select */
  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;
}
:is(input, select, textarea):focus-visible {
  outline: none;
  border-color: var(--cobalt);
  box-shadow: 0 0 0 3px rgba(37,99,235,.14);
}
.invalid { border-color: var(--error) !important; }

/* Checkbox — caja 18px, radio 5px (design.md §3) */
.check { display: flex; gap: 11px; align-items: flex-start; cursor: pointer; margin-bottom: var(--space-3); }
.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;
}
.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);
}
.check input:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37,99,235,.14); }
.check-text { font-size: var(--fs-small); font-weight: var(--fw-regular); margin: 0; }
.check-desc { font-size: var(--fs-caption); color: var(--text-on-light-muted); }

/* Opciones múltiples en rejilla */
.check-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.check-grid .check { margin-bottom: 0; }

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

.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);
}

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

/* ---------- éxito ---------- */
/* [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. */
.success[hidden] { display: none; }
.success { display: flex; flex-direction: column; gap: var(--space-4); }
.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;
}
.success p { color: var(--text-on-light-secondary); }
.success-foot { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-on-light-muted); }

/* ---------- Footer (design.md §3, superficie clara) ---------- */
.footer {
  background: var(--surface-light);
  border-top: var(--border-w) solid var(--border-on-light);
  padding: 44px var(--gutter) 26px;
}
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-12); }
.footer-brand { max-width: 22em; }
.footer-logo { height: 26px; width: auto; display: block; margin-bottom: var(--space-3); }
.footer-tagline { font-size: 13px; line-height: 1.6; color: var(--text-on-light-secondary); }
.footer-cols { display: flex; flex-wrap: wrap; gap: 48px; }
.footer-col { min-width: 9em; display: flex; flex-direction: column; gap: var(--space-2); }
.footer-col h4 {
  font-family: var(--font-mono); font-weight: var(--fw-medium);
  font-size: 10px; letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--text-on-light-muted);
  margin-bottom: var(--space-1);
}
.footer-col a, .footer-col span { font-size: 13px; color: var(--text-on-light-secondary); }
.footer-legal {
  margin-top: var(--space-10); padding-top: var(--space-5);
  border-top: var(--border-w) solid var(--border-on-light);
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .06em; color: var(--muted-2);
}

/* design.md §2.4: sin animaciones decorativas. Solo respetamos la preferencia. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .btn:hover { transform: none; }
}