/* ════════════════════════════════════════════════════════════════════════
   web.css — el look de systechub.com, en un solo archivo.

   Extraído de index.html el 2026-09-02, sin cambiar un valor. Existe porque cada
   página del sitio copiaba su CSS a mano y por eso derivaban: el diagnóstico, la
   calculadora y la capacitación cargaban Playfair Display, pintaban el fondo con
   el otro crema y usaban un botón violeta plano, mientras la landing usaba solo
   Montserrat, #fbf7f0 y azul profundo con sombra. Sara, 2026-09-02: "quiero que
   la web y los diagnósticos estén completamente alineados".

   REGLA: en la web manda la landing. DESIGN.md sigue mandando en guías, hojas y
   manuales; aquí no entra Playfair. Una sola familia: Montserrat.

   Quién lo carga: los instrumentos (/diagnostico, /calculadora), la capacitación
   (/capacitacion y todo assessment que salga de su molde) y, desde el 2026-09-08,
   los portales de cliente (/portal/{slug}/), que además cargan `portal.css` encima
   —el shell de app y el tema oscuro, que la web no tiene y no debe tener aquí—.
   La landing conserva su <style> inline: este archivo se deriva de ella, no al
   revés. Si un valor cambia en index.html, cambia aquí el mismo día — lo verifica
   revisar_alineacion.mjs.

   Contenido:
     1. Tokens y base
     2. Nav y footer (idénticos a la landing)
     3. Tipografía: títulos, overline, eyebrow, lede
     4. Botones y campos
     5. Controles de elección — la familia única de los instrumentos:
        tarjeta de opción · sí/no · chip · escala · campo
     6. Avance (bloques del isotipo) y pista de teclado
     7. Columna de instrumento y caja de resultado
     8. Responsive y movimiento reducido
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens y base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--crema-fondo); color: #000; font-family: 'Montserrat', -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }

:root {
  --violeta: #6B5FE8;
  --azul-medio: #5BA7DD;
  /* Dos cremas, y son distintos a propósito: --crema-fondo es el papel de la página,
     --crema es el crema de marca de DESIGN.md, que se usa como tinta sobre campos oscuros. */
  --crema-fondo: #fbf7f0;
  --crema: #F9F1E3;
  --crema-rgb: 249, 241, 227;
  --negro: #000000;
  --azul-claro: #B6D4FB;
  --azul-prof: #2C27B8;
  --azul-prof-hover: #24208F;
  --violeta-prof: #5849D2;
  --terracota: #C15F3C;          /* solo cifras display, como .evidencia-cifra */
  --terracota-texto: #AD5232;    /* 4,62:1 — terracota para texto pequeño */
  --hairline: #ece4d4;
  --violeta-12: rgba(107,95,232,0.12);
  --azul-prof-07: rgba(44,39,184,0.07);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --foco: 0 0 0 3px rgba(107,95,232,0.35);

  /* Texto secundario que pasa WCAG AA sobre cada campo. */
  --tinta-2-crema: #7a6e5c;   /* 4.67:1 sobre --crema-fondo */
  --tinta-2-azul:  #3c5370;   /* 4.9:1  sobre --azul-claro  */
  --tinta-2-negro: #8f8f8f;   /* 6.4:1  sobre --negro       */
  --violeta-texto: #6357E0;   /* 4.7:1  sobre --crema-fondo */

  /* Veredicto y tintas de estado. Vivían sueltas en la capacitación; subieron aquí el
     2026-09-02 para que ningún instrumento vuelva a escribir un hex a mano. */
  --verde-ok: #2F7A46;
  --estado-ambar: #F5E3BD;
  --estado-verde: #CFE5CB;
}

::selection { background: var(--violeta); color: var(--crema); }
.oculto { display: none !important; }
/* El atributo `hidden` no se pierde por una regla de display: la capacitación lo usa para
   alternar los textos de modo cliente y modo público. */
[hidden] { display: none !important; }

/* ── 2. Nav y footer ──────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251,247,240,0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
}
.nav-inner {
  max-width: 1280px; margin: 0 auto;
  padding: 18px 48px;
  display: flex; align-items: center; justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-name { white-space: nowrap; font-size: 18px; font-weight: 500; color: var(--azul-medio); letter-spacing: -0.01em; }
.nav-links { display: flex; align-items: center; gap: 36px; margin-left: auto; }
.nav-actions { display: flex; align-items: center; gap: 12px; margin-left: 36px; }
.nav-toggle { display: none; }
.nav-link {
  font-size: 14px; font-weight: 500; color: var(--negro);
  text-decoration: none; letter-spacing: 0;
  transition: color 150ms var(--ease);
}
.nav-link:hover { color: var(--violeta); }
.nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--azul-prof); color: var(--crema);
  padding: 10px 18px; border-radius: 8px;
  font-size: 14px; font-weight: 600; white-space: nowrap;
  text-decoration: none;
  transition: background 200ms var(--ease), transform 200ms var(--ease);
}
.nav-cta:hover { background: var(--azul-prof-hover); transform: translateY(-1px); color: var(--crema); }
.nav-cta:active { transform: translateY(0); }
.nav-cta:focus-visible { outline: none; box-shadow: var(--foco); border-radius: 8px; }

/* Dentro de un instrumento el nav no ofrece salidas: a la derecha va la sección
   en curso, con la forma del eyebrow de la landing. */
.nav-seccion {
  margin-left: auto;
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--tinta-2-crema); white-space: nowrap;
}

footer {
  background: var(--negro); padding: 40px 48px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.footer-inner {
  max-width: 1280px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px;
}
.footer-copy { font-size: 13px; color: var(--tinta-2-negro); }
.footer-links { display: flex; gap: 24px; }
.footer-link { font-size: 13px; color: #a8a8a8; text-decoration: none; transition: color 150ms var(--ease); }
.footer-link:hover { color: #ffffff; }
.footer-legal { max-width: 1280px; margin: 16px auto 0; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.06); display: flex; gap: 20px; flex-wrap: wrap; }
.footer-legal-link { font-size: 11px; color: #808080; text-decoration: none; transition: color 150ms var(--ease); letter-spacing: 0.02em; }
.footer-legal-link:hover { color: #d6d6d6; }

/* ── 3. Tipografía ────────────────────────────────────────────────────── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--azul-prof); margin-bottom: 28px;
}
.eyebrow-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--violeta); }
.eyebrow-divider { width: 24px; height: 1px; background: rgba(0,0,0,0.4); }
/* `text-decoration: none` no es decorativo y no se quita: **Tailwind tiene una utilidad
   que se llama igual** (`.overline` = `text-decoration-line: overline`), y como su hoja
   carga antes que esta, el eyebrow salía con una raya encima pegada al texto. Lo vio Sara
   en la portada del diagnóstico el 2026-09-02. `revisar_alineacion.mjs` falla si nace otra
   colisión de nombre entre este archivo y Tailwind. */
.overline {
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--violeta-texto);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px;
}
.overline::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--violeta); }
h1.headline {
  font-size: clamp(44px, 5.4vw, 72px);
  font-weight: 700; line-height: 1.02;
  letter-spacing: -0.025em; color: var(--negro);
  margin: 0 0 28px; text-wrap: balance;
}
.headline .caos { font-weight: 300; color: rgba(0,0,0,0.55); font-style: italic; }
.headline .sistema { color: var(--azul-prof); }
.headline .weeks { display: inline-block; position: relative; color: var(--violeta); font-weight: 900; }
.headline .weeks::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 10px; background: var(--violeta-12); z-index: -1; border-radius: 2px; }
h2.section-title {
  font-size: clamp(32px, 3.5vw, 48px); font-weight: 700;
  line-height: 1.1; letter-spacing: -0.025em; color: var(--negro);
  margin: 0 0 16px; text-wrap: balance;
}
/* El título de una pantalla de instrumento: una pregunta. Misma familia y tracking
   que h2.section-title, un escalón más chico porque se lee de a una. */
.pregunta-titulo {
  font-size: clamp(26px, 3vw, 38px); font-weight: 700;
  line-height: 1.12; letter-spacing: -0.025em; color: var(--negro);
  margin: 0 0 14px; text-wrap: balance;
}
.pregunta-titulo em { font-weight: 300; font-style: italic; color: rgba(0,0,0,0.55); }
.titulo-portada { font-size: clamp(34px, 4.2vw, 52px); }
.subtitulo { font-size: clamp(22px, 2.4vw, 28px); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--negro); }
/* El tramo del resultado: la frase grande en violeta. Montserrat 700, nunca otra fuente. */
.tramo { font-size: clamp(26px, 3vw, 36px); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--violeta-texto); }
.lede { font-size: 18px; line-height: 1.55; color: rgba(0,0,0,0.72); max-width: 560px; margin: 0 0 40px; }
.lede strong { color: var(--negro); font-weight: 600; }
.section-sub { font-size: 17px; line-height: 1.6; color: rgba(0,0,0,0.6); max-width: 520px; margin: 0 auto; }
.texto-2 { font-size: 15px; line-height: 1.6; color: var(--tinta-2-crema); }
.rotulo {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tinta-2-crema); margin-bottom: 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.rotulo .pista-grupo { font-weight: 600; letter-spacing: 0.04em; text-transform: none; font-size: 12px; }
.cifra-display {
  font-size: clamp(38px, 3.6vw, 52px); font-weight: 900;
  line-height: 1; letter-spacing: -0.03em; color: var(--terracota);
}
.cifra-display small { font-size: 0.55em; font-weight: 700; letter-spacing: -0.01em; }

/* ── 4. Botones y campos ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 26px; border-radius: 10px;
  font-family: inherit; font-size: 15px; font-weight: 600;
  text-decoration: none; border: none; cursor: pointer;
  transition: all 200ms var(--ease); line-height: 1;
}
.btn-primary {
  background: var(--azul-prof); color: var(--crema);
  box-shadow: 0 4px 12px rgba(44,39,184,0.12), 0 16px 32px rgba(44,39,184,0.08);
}
.btn-primary:hover {
  background: var(--azul-prof-hover); transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(44,39,184,0.18), 0 20px 40px rgba(44,39,184,0.12);
  color: var(--crema);
}
.btn-primary .ic { transition: transform 200ms var(--ease); }
.btn-primary:hover .ic { transform: translateX(3px); }
.btn-primary:disabled, .btn-primary[aria-disabled="true"] { opacity: 0.45; box-shadow: none; transform: none; cursor: not-allowed; }
.btn-ghost { background: transparent; color: var(--negro); border: 1px solid rgba(0,0,0,0.18); }
.btn-ghost:hover { background: var(--violeta-12); border-color: var(--violeta); color: var(--negro); }
.btn:focus-visible { outline: none; box-shadow: var(--foco); }
.btn:active { transform: translateY(0); }
/* Tamaño pequeño: los botones de los simuladores de capacitación y los "Volver". */
.btn-sm { padding: 10px 16px; border-radius: 8px; font-size: 13.5px; }
.btn-ghost.activo { background: var(--violeta-12); border-color: var(--violeta); font-weight: 700; }
.btn-ver-todos {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 28px;
  padding: 11px 20px; border-radius: 999px;
  border: 1px solid var(--hairline); background: #fff;
  font-size: 14px; font-weight: 600; color: var(--azul-prof); text-decoration: none;
  transition: gap 200ms var(--ease), border-color 200ms var(--ease), transform 200ms var(--ease), box-shadow 200ms var(--ease);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.btn-ver-todos:hover { gap: 12px; border-color: var(--violeta); color: var(--violeta); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.07); }
.enlace-atras {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--azul-prof);
  background: none; border: none; cursor: pointer; font-family: inherit; text-decoration: none;
  transition: gap 200ms var(--ease), color 200ms var(--ease);
}
.enlace-atras:hover { color: var(--violeta); }

.campo-label { display: block; font-size: 14px; font-weight: 600; color: var(--negro); margin-bottom: 8px; }
.campo {
  display: block; width: 100%; min-width: 0;
  font-family: inherit; font-size: 15px; color: var(--negro);
  background: #fff; border: 1px solid rgba(0,0,0,0.14); border-radius: 10px;
  padding: 16px 18px;
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.campo::placeholder { color: #6e6e6e; }
.campo:focus { outline: none; border-color: var(--violeta); box-shadow: 0 0 0 3px rgba(107,95,232,0.25); }
.campo-grupo { display: grid; gap: 18px; max-width: 520px; }
.campo-error { font-size: 14px; color: #A33A1F; margin-top: 10px; }

/* ── 5. Controles de elección ─────────────────────────────────────────── */
/* Una sola familia. Todos comparten: borde 1px negro 14 % (el del campo de la
   landing), radio 10 (el del botón), hover = el hover del botón fantasma
   (violeta), elegida = azul profundo, el color de acción de la landing. */
.opciones { display: grid; gap: 10px; max-width: 680px; }
.opciones-fila { display: flex; gap: 10px; flex-wrap: wrap; max-width: 680px; }
.opciones-fila .opcion { flex: 1 1 160px; }
.opcion {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  font-family: inherit; font-size: 15.5px; line-height: 1.45; color: var(--negro);
  background: #fff; border: 1px solid rgba(0,0,0,0.14); border-radius: 10px;
  padding: 15px 18px; cursor: pointer;
  transition: border-color 150ms var(--ease), background 150ms var(--ease), box-shadow 150ms var(--ease);
}
.opcion:hover { border-color: var(--violeta); background: var(--violeta-12); }
.opcion:focus-visible { outline: none; box-shadow: var(--foco); }
.opcion .letra {
  flex: none; width: 28px; height: 28px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  background: var(--violeta-12); color: var(--violeta-texto);
  transition: background 150ms var(--ease), color 150ms var(--ease);
}
.opcion .txt { flex: 1; }
.opcion .tic {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.22);
  display: flex; align-items: center; justify-content: center;
  color: transparent; background: transparent;
  transition: background 150ms var(--ease), border-color 150ms var(--ease), color 150ms var(--ease);
}
.opcion .tic svg { width: 12px; height: 12px; }
/* Múltiple: el tic es cuadrado, para que se lea que se pueden marcar varias. */
.opcion[data-multiple] .tic { border-radius: 6px; }
.opcion.elegida { border-color: var(--azul-prof); background: var(--azul-prof-07); font-weight: 600; }
.opcion.elegida .letra { background: var(--azul-prof); color: var(--crema); }
.opcion.elegida .tic { border-color: var(--azul-prof); background: var(--azul-prof); color: var(--crema); }

.chips { display: flex; flex-wrap: wrap; gap: 10px; max-width: 680px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--negro);
  background: #fff; border: 1px solid rgba(0,0,0,0.14); border-radius: 999px;
  padding: 10px 16px; cursor: pointer;
  transition: border-color 150ms var(--ease), background 150ms var(--ease), color 150ms var(--ease);
}
.chip .num { font-weight: 600; color: var(--tinta-2-crema); }
.chip:hover { border-color: var(--violeta); background: var(--violeta-12); }
.chip:focus-visible { outline: none; box-shadow: var(--foco); }
.chip.elegida { background: var(--azul-prof); border-color: var(--azul-prof); color: var(--crema); }
.chip.elegida .num { color: rgba(var(--crema-rgb),0.7); }

.escala { max-width: 620px; }
.escala-lectura { display: flex; align-items: flex-end; gap: 20px; margin-bottom: 22px; }
.escala-lectura .cifra-display { font-size: clamp(64px, 7vw, 96px); }
.escala-lectura .lectura { font-size: 18px; line-height: 1.4; color: rgba(0,0,0,0.6); padding-bottom: 8px; }
.escala input[type=range] { width: 100%; accent-color: var(--azul-prof); height: 28px; cursor: pointer; }
.escala-extremos { display: flex; justify-content: space-between; font-size: 13px; color: var(--tinta-2-crema); margin-top: 6px; }

/* ── 6. Avance y pista ────────────────────────────────────────────────── */
/* Retícula de bloques del isotipo, usada como avance. Cuenta fases, no preguntas. */
.avance { display: flex; align-items: center; gap: 5px; }
.bloque { width: 22px; height: 7px; border-radius: 3px; background: var(--negro); opacity: 0.12; transition: all 250ms var(--ease); }
.bloque.hecho { opacity: 1; background: var(--violeta); }
.bloque.actual { opacity: 1; background: var(--terracota); width: 30px; }
.avance-etiqueta { margin-left: 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta-2-crema); }
.pista { font-size: 13px; color: var(--tinta-2-crema); }
kbd {
  font-family: inherit; font-size: 11px; font-weight: 600;
  border: 1px solid rgba(0,0,0,0.18); border-radius: 4px; padding: 1px 6px;
  color: var(--tinta-2-crema); background: #fff;
}

/* ── 7. Columna de instrumento y cajas ────────────────────────────────── */
.instrumento { max-width: 900px; margin: 0 auto; padding: 56px 48px 72px; }
.instrumento-pie { max-width: 900px; margin: 0 auto; padding: 0 48px 40px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.pantalla { animation: entra 300ms var(--ease); }
@keyframes entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.reaccion { animation: sube 350ms var(--ease); margin-top: 28px; padding-left: 16px; border-left: 2px solid var(--terracota); max-width: 560px; font-size: 15px; line-height: 1.6; color: rgba(0,0,0,0.72); }
@keyframes sube { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Sin animación: en las pantallas que se repintan en cada clic, animar cada vez parpadea. */
.reaccion.quieta { animation: none; }
.acciones { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 36px; }
/* Fichas del resultado: tarjeta blanca chica con rótulo, valor y nota. */
.fichas { display: grid; gap: 12px; max-width: 680px; }
@media (min-width: 640px) { .fichas { grid-template-columns: 1fr 1fr; } .ficha.ancha { grid-column: span 2; } }
.ficha { background: #fff; border: 1px solid var(--hairline); border-radius: 12px; padding: 18px 20px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.ficha-etiqueta { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-2-crema); margin-bottom: 8px; }
.ficha-valor { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; color: var(--negro); }
.ficha-nota { font-size: 14px; line-height: 1.5; color: var(--tinta-2-crema); margin-top: 6px; }
/* Lista con hairline entre filas, para el mapa de dependencia. */
.lista-hairline { list-style: none; border-top: 1px solid var(--hairline); max-width: 680px; }
.lista-hairline li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hairline); font-size: 15px; }
.lista-hairline .punto { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--violeta); }
.lista-hairline .punto.falta { background: var(--terracota); }
.lista-hairline .estado { font-size: 12px; font-weight: 600; color: var(--violeta-texto); }
.lista-hairline .estado.falta { color: var(--terracota-texto); }
.bloque-hairline { border-top: 1px solid var(--hairline); padding-top: 28px; max-width: 680px; }

.card {
  background: #fff; border: 1px solid var(--hairline); border-radius: 16px;
  padding: 32px 28px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.05);
}
.card h3 { font-size: 18px; font-weight: 700; color: var(--negro); margin: 0 0 10px; letter-spacing: -0.01em; }
.card p { font-size: 14px; line-height: 1.6; color: rgba(0,0,0,0.6); }
/* La caja del diagnóstico de la landing: blanca, radio 20, sombra más honda. Es la
   caja de resultado de los instrumentos. */
.diag-box {
  max-width: 720px; margin: 0 auto; text-align: center;
  background: #fff; border: 1px solid rgba(0,0,0,0.07); border-radius: 20px;
  padding: 56px 48px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 12px 32px rgba(0,0,0,0.09);
}
.diag-box .section-title { margin-bottom: 18px; }
.diag-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 28px 0 32px; }
.diag-chip { font-size: 13px; font-weight: 600; color: var(--tinta-2-crema); border: 1px solid var(--hairline); border-radius: 999px; padding: 8px 16px; }
.diag-nota { font-size: 14px; line-height: 1.6; color: var(--tinta-2-crema); max-width: 520px; margin: 28px auto 0; }
.diag-chips.izquierda { justify-content: flex-start; margin: 0 0 40px; }
.diag-box .overline { justify-content: center; }
.diag-box .btn-primary { justify-content: center; }
/* Campo oscuro de la landing (sección Método), para la insignia o el cierre. */
.campo-oscuro {
  background: var(--azul-prof);
  background-image:
    radial-gradient(ellipse 70% 60% at 15% 30%, rgba(107,95,232,0.18) 0%, transparent 55%),
    radial-gradient(ellipse 50% 50% at 85% 70%, rgba(91,167,221,0.12) 0%, transparent 55%);
  color: var(--crema); border-radius: 16px; padding: 32px 28px;
}
.campo-oscuro .overline { color: var(--crema); }
.campo-oscuro .overline::before { background: rgba(var(--crema-rgb),0.5); }
.campo-oscuro p { color: rgba(var(--crema-rgb),0.85); font-size: 14px; line-height: 1.6; }

/* ── 8. Responsive y movimiento reducido ──────────────────────────────── */
@media (max-width: 1024px) {
  .nav-inner { padding: 16px 24px; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    display: none; flex-direction: column; align-items: stretch;
    gap: 0; margin-left: 0;
    background: var(--crema-fondo);
    border-bottom: 1px solid var(--hairline);
    box-shadow: 0 12px 24px rgba(0,0,0,0.06);
    padding: 4px 24px 20px;
  }
  .nav-links[data-open="true"] { display: flex; }
  .nav-link { font-size: 16px; padding: 15px 2px; border-bottom: 1px solid var(--hairline); }
  .nav-link:last-child { border-bottom: none; }
  .nav-actions { margin-left: 0; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    background: none; border: 1px solid var(--hairline); border-radius: 8px;
    color: var(--negro); cursor: pointer;
  }
  .nav-toggle:focus-visible { outline: none; box-shadow: var(--foco); }
  .instrumento { padding: 40px 32px 56px; }
  .instrumento-pie { padding: 0 32px 32px; }
  footer { padding: 32px 24px; }
}
@media (max-width: 640px) {
  .nav-cta { padding: 9px 12px; font-size: 12px; }
  .brand-name { font-size: 16px; }
  .nav-inner { padding: 14px 16px; }
  .nav-seccion { font-size: 10px; letter-spacing: 0.1em; }
  .lede { font-size: 16px; }
  .btn { width: 100%; justify-content: center; }
  .btn-sm { width: auto; }
  .instrumento { padding: 32px 20px 48px; }
  .instrumento-pie { padding: 0 20px 28px; }
  .diag-box { padding: 40px 24px; }
  .opciones-fila { flex-direction: column; }
  footer { padding: 28px 20px; }
}
@media (max-width: 400px) {
  .nav-inner { padding: 14px 12px; }
  .nav-actions { gap: 8px; }
  .nav-cta { padding: 9px 11px; font-size: 11px; }
  .nav-cta svg { display: none; }
  .brand { gap: 8px; }
  .brand-name { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-primary:hover, .nav-cta:hover { transform: none !important; }
  .pantalla, .reaccion { animation: none !important; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}