/* ============================================================
   auditoria.css — Diagnóstico "Del packaging al checkout"
   Extiende el sistema editorial de luise.pro (tokens.css).
   No redefine ningún color: todo sale de las variables del sitio.
   ============================================================ */

/* La home oculta el cursor nativo y lo sustituye por uno propio vía JS.
   Aquí hay formularios: el cursor real es mejor UX que el decorativo. */
@media (hover:hover) and (pointer:fine){ body{ cursor:auto; } }

.aud{
  max-width: 780px;
  margin-inline: auto;
  padding: var(--s4) var(--mx) var(--s6);
}

/* ---------- cabecera ---------- */
.aud-head{
  display:flex; align-items:center; justify-content:space-between;
  gap: var(--s2);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s4);
}
/* La marca es solo "LUISE": un nombre corto se recuerda y se busca mejor que
   un nombre y un apellido, y al soltar el apellido cabe a un tamaño con el que
   la cabecera ya funciona como firma y no como pie de página. */
.aud-brand{
  display:flex; align-items:center; gap:.7rem;
  font-family: var(--font-display); font-weight:700; font-size:1.75rem;
  line-height:1; letter-spacing:.04em; color:var(--ink); text-decoration:none;
}
.aud-brand img{ width:44px; height:44px; border-radius:2px; }
.aud-brand span{ white-space:nowrap; }
.aud-head .eyebrow{ letter-spacing:.16em; }
@media (max-width:430px){
  .aud-brand{ font-size:1.4rem; gap:.55rem; }
  .aud-brand img{ width:36px; height:36px; }
  .aud-head .eyebrow{ font-size:.66rem; text-align:right; }
}

/* ---------- pantallas ---------- */
.screen{ display:none; }
.screen.on{ display:block; animation: aud-up .45s var(--ease) both; }
@keyframes aud-up{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }

/* ---------- portada ---------- */
.aud-hero h1{
  font-size: clamp(2.4rem, 7vw, 4.4rem);
  margin: var(--s2) 0 var(--s3);
}
.aud-hero h1 em{ font-style:italic; color:var(--accent); }

.axis-list{
  list-style:none; margin: var(--s4) 0 0; padding:0;
  border-top:1px solid var(--line);
}
.axis-list li{
  display:grid; grid-template-columns: 3.2rem 1fr;
  gap: var(--s2); align-items:baseline;
  padding: var(--s2) 0;
  border-bottom:1px solid var(--line-soft);
}
.axis-list .folio{
  font-family:var(--font-display); font-weight:600;
  color:var(--accent); font-size:.95rem;
}
.axis-list strong{ font-weight:600; display:block; }
.axis-list span{ color:var(--ink-2); font-size:.92rem; }

.meta-row{
  display:flex; flex-wrap:wrap; gap: var(--s3);
  margin-top: var(--s4);
  font-size: var(--fs-meta); text-transform:uppercase;
  letter-spacing:.14em; color:var(--ink-2);
}
.meta-row b{ font-family:var(--font-display); font-size:1rem; letter-spacing:0; color:var(--ink); }

/* ---------- stepper ---------- */
.stepper{
  display:flex; align-items:center; gap:.75rem;
  margin-bottom: var(--s4);
  font-size: var(--fs-meta); text-transform:uppercase; letter-spacing:.14em;
  color: var(--ink-2);
}
.stepper i{ flex:1; height:1px; background: var(--line); font-style:normal; }
.stepper i.done{ background: var(--accent); }
.stepper b{ font-weight:500; color: var(--ink-2); white-space:nowrap; }
.stepper b.act{ color: var(--accent); }
@media (max-width:640px){
  .stepper b:not(.act){ display:none; }
  .stepper i{ min-width:16px; }
}

/* ---------- bloques de pregunta ---------- */
.q{ padding: var(--s4) 0; border-bottom: 1px solid var(--line-soft); }
.q:first-of-type{ padding-top: var(--s2); }
.q-label{
  display:grid; grid-template-columns: 2.6rem 1fr; gap: var(--s2);
  align-items:baseline; margin-bottom: var(--s2);
}
.q-label .folio{
  font-family:var(--font-display); font-weight:600;
  color:var(--accent); font-size:.95rem;
}
.q-label h3{ font-size: 1.25rem; line-height:1.2; font-weight:600; }
.q-hint{
  margin: calc(var(--s1) * -1) 0 var(--s2) 2.6rem;
  font-size:.82rem; color: var(--ink-2);
}
@media (max-width:640px){
  .q-label{ grid-template-columns: 2rem 1fr; }
  .q-hint{ margin-left: 0; }
}

/* input de texto */
.aud input[type=text], .aud input[type=email], .aud input[type=tel]{
  width:100%; padding: .85rem 0;
  font-family: var(--font-text); font-size: 1.05rem; color: var(--ink);
  background: transparent; border: none;
  border-bottom: 1px solid var(--line);
  outline: none;
  transition: border-color var(--dur-micro) var(--ease);
}
.aud input::placeholder{ color: var(--ink-2); opacity:.6; }
.aud input:focus{ border-bottom-color: var(--accent); }

/* opciones */
.opts{ display:flex; flex-direction:column; gap:1px; }
.opt{
  display:flex; align-items:center; gap:.85rem;
  padding: .8rem 1rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  background: transparent;
  font-family: var(--font-text); font-size: .98rem; line-height:1.35;
  color: var(--ink-2); text-align:left; width:100%;
  cursor:pointer;
  transition: color var(--dur-micro) var(--ease),
              border-color var(--dur-micro) var(--ease),
              background var(--dur-micro) var(--ease);
}
.opt::before{
  content:''; flex:0 0 auto; width:9px; height:9px; border-radius:50%;
  border:1px solid var(--line); transition: all var(--dur-micro) var(--ease);
}
.opt:hover{ color: var(--ink); border-color: var(--line); }
.opt[aria-pressed="true"]{
  color: var(--ink); border-color: var(--accent); background: var(--paper-2);
}
.opt[aria-pressed="true"]::before{ background: var(--accent); border-color: var(--accent); }
.opt[disabled]{ opacity:.4; cursor:not-allowed; }

/* variante en rejilla para listas cortas */
.opts.grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:6px; }
@media (max-width:640px){ .opts.grid{ grid-template-columns:1fr; } }

/* ---------- botones ---------- */
.nav-row{ display:flex; gap: var(--s2); margin-top: var(--s4); align-items:center; }
.btn{
  font-family: var(--font-text); font-size:.82rem;
  text-transform:uppercase; letter-spacing:.14em; font-weight:500;
  padding: .95rem 1.6rem; border-radius: var(--r-card);
  border:1px solid var(--accent); background: var(--accent); color: var(--on-accent);
  cursor:pointer; text-decoration:none; display:inline-block;
  transition: opacity var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease);
}
.btn:hover{ opacity:.88; }
.btn:disabled{ opacity:.3; cursor:not-allowed; }
.btn--ghost{
  background:transparent; color: var(--ink-2); border-color: var(--line);
}
.btn--ghost:hover{ color: var(--ink); border-color: var(--ink-2); opacity:1; }
.btn--wide{ width:100%; text-align:center; }

/* ---------- pantalla de carga ---------- */
.load-wrap{ padding: var(--s5) 0; }
.load-wrap h2{ font-size: clamp(1.8rem,5vw,2.8rem); margin-bottom:.4rem; }
.load-brand{ color: var(--accent); font-family: var(--font-display); font-size:1.2rem; }
.tasks{ list-style:none; padding:0; margin: var(--s4) 0 0; }
.tasks li{
  display:flex; align-items:center; gap:.85rem;
  padding:.7rem 0; border-bottom:1px solid var(--line-soft);
  color: var(--ink-2); font-size:.95rem;
  opacity:.35; transition: opacity .4s var(--ease), color .4s var(--ease);
}
.tasks li.act{ opacity:1; color: var(--ink); }
.tasks li.done{ opacity:1; }
.tasks li::before{
  content:''; flex:0 0 auto; width:9px; height:9px; border-radius:50%;
  border:1px solid var(--line);
}
.tasks li.act::before{ border-color: var(--accent); animation: aud-pulse 1s infinite; }
.tasks li.done::before{ background: var(--accent); border-color: var(--accent); animation:none; }
@keyframes aud-pulse{ 50%{ transform:scale(.6); } }

.track{ height:1px; background: var(--line); margin-top: var(--s4); }
.track i{ display:block; height:1px; background: var(--accent); width:0; transition: width .7s var(--ease); }
.track-pct{
  margin-top:.5rem; text-align:right;
  font-size: var(--fs-meta); letter-spacing:.14em; color: var(--ink-2);
}

/* ---------- gate ---------- */
.gate-blur{
  height: 120px; margin: var(--s3) 0 var(--s4);
  border:1px solid var(--line-soft); border-radius: var(--r-card);
  background: repeating-linear-gradient(
    to bottom, var(--line-soft) 0 1px, transparent 1px 14px
  );
  filter: blur(3px); opacity:.7;
}
.consent{
  display:flex; gap:.7rem; align-items:flex-start;
  margin-top: var(--s3); font-size:.85rem; color: var(--ink-2); line-height:1.5;
}
.consent input{ margin-top:.28rem; accent-color: var(--accent); flex:0 0 auto; }
.err{ font-size:.8rem; color: var(--accent); margin-top:.4rem; min-height:1em; }

/* ---------- informe ---------- */
.rep-head{ border-bottom:1px solid var(--line); padding-bottom: var(--s3); margin-bottom: var(--s4); }
.rep-title{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap: var(--s2); margin: var(--s2) 0;
}
.rep-title h1{ font-size: clamp(2rem, 6vw, 3.4rem); }
.rep-score{
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(2.4rem, 7vw, 3.6rem); color: var(--accent); line-height:1;
}
.rep-score small{ font-size:1rem; color: var(--ink-2); }
.verdict{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size: var(--fs-meta); text-transform:uppercase; letter-spacing:.14em;
  color: var(--ink-2);
}
.verdict s{ width:7px; height:7px; border-radius:50%; background: var(--accent); }

.sec{ padding: var(--s4) 0; border-bottom:1px solid var(--line-soft); }
.sec > .eyebrow{ margin-bottom: var(--s3); }

.radar-wrap{ display:flex; justify-content:center; padding: var(--s2) 0; }
.radar{ width:100%; max-width: 420px; height:auto; overflow:visible; }
.radar text{ font-family: var(--font-text); font-size:9px; fill: var(--ink-2); letter-spacing:.06em; text-transform:uppercase; }

.dim{ margin-bottom: var(--s3); }
.dim-top{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--s2); margin-bottom:.4rem; }
.dim-top b{ font-weight:600; font-size:.98rem; }
.dim-top span{ font-family: var(--font-display); font-weight:600; color: var(--accent); }
.dim-track{ height:2px; background: var(--line); }
.dim-track i{ display:block; height:2px; background: var(--accent); width:0; transition: width 1s var(--ease); }
.dim p{ margin-top:.45rem; font-size:.88rem; color: var(--ink-2); }

.split{ display:grid; grid-template-columns:1fr 1fr; gap: var(--s4); }
@media (max-width:640px){ .split{ grid-template-columns:1fr; gap: var(--s3); } }
.split ul{ list-style:none; padding:0; margin:0; }
.split li{
  padding:.55rem 0; border-bottom:1px solid var(--line-soft);
  font-size:.9rem; color: var(--ink-2);
}
.split li b{ color: var(--ink); font-weight:600; }

.diag p{ font-size: var(--fs-lead); line-height:1.65; color: var(--ink); max-width:62ch; }
.diag p + p{ margin-top: var(--s2); }
.steps{ list-style:none; padding:0; margin: var(--s3) 0 0; counter-reset: st; }
.steps li{
  counter-increment: st;
  display:grid; grid-template-columns:2.4rem 1fr; gap: var(--s2);
  padding: var(--s2) 0; border-top:1px solid var(--line-soft);
  font-size:.95rem; color: var(--ink-2); line-height:1.55;
}
.steps li::before{
  content: "0" counter(st);
  font-family: var(--font-display); font-weight:600; color: var(--accent);
}

.gen{ color: var(--ink-2); font-style:italic; }
.gen::after{ content:''; animation: aud-dots 1.2s steps(1,end) infinite; }
@keyframes aud-dots{ 0%{content:'.';} 33%{content:'..';} 66%{content:'...';} }

.cta{
  margin-top: var(--s4); padding: var(--s4);
  background: var(--paper-2); border-radius: var(--r-card);
  border:1px solid var(--line-soft);
}
.cta h3{ font-size: clamp(1.4rem,4vw,2rem); margin:.5rem 0 var(--s2); }
.cta p{ color: var(--ink-2); max-width:52ch; margin-bottom: var(--s3); }
.cta-btns{ display:flex; flex-wrap:wrap; gap:.7rem; }

.aud-foot{
  margin-top: var(--s5); padding-top: var(--s3);
  border-top:1px solid var(--line);
  font-size: var(--fs-meta); text-transform:uppercase; letter-spacing:.14em;
  color: var(--ink-2);
  display:flex; flex-wrap:wrap; gap: var(--s2); justify-content:space-between;
}
.aud-foot a{ color: var(--ink-2); text-decoration:none; border-bottom:1px solid var(--line); }
.aud-foot a:hover{ color: var(--accent); border-color: var(--accent); }

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

@media (prefers-reduced-motion: reduce){
  .screen.on{ animation:none; }
  .tasks li.act::before{ animation:none; }
  .gen::after{ animation:none; content:'...'; }
}

/* ============================================================
   Añadidos 15/08/2026 — retícula, accesibilidad y bloque estacional.
   Van al final a propósito: así ganan por orden en la cascada y el
   diff sobre el fichero original queda limpio.
   ============================================================ */

/* ---------- 1. Fondo de retícula ----------
   base.css pinta al body una retícula de 40px con dos linear-gradient.
   Aquí estorba: la página es un formulario largo, no una portada.
   Se anula SOLO en esta página; la home la conserva. */
body{ background-image:none; }

/* ---------- 2. Cabecera y pie fuera de <main> ----------
   Antes vivían dentro de .aud y heredaban su ancho y su padding.
   Ahora son hermanos de <main>, así que necesitan su propia caja. */
.aud-head,
.aud-foot{
  max-width: 780px;
  margin-inline: auto;
  padding-inline: var(--mx);
}
.aud-head{ padding-top: var(--s4); }
.aud{ padding-top: 0; }          /* el espacio de arriba ya lo pone la cabecera */
.aud-foot nav{ display:inline; }

/* ---------- 3. Enlace de salto ----------
   Primer elemento tabulable: quien navega con teclado se salta la
   cabecera. Invisible hasta que recibe foco. */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background: var(--accent); color: var(--on-accent);
  padding: .75rem 1.25rem; border-radius: 0 0 var(--r-card) 0;
  font-size: var(--fs-meta); text-transform:uppercase; letter-spacing:.14em;
  text-decoration:none;
}
.skip-link:focus{ left:0; }

/* Texto solo para lectores de pantalla: da encabezado a secciones que
   visualmente no lo necesitan, sin alterar el diseño. */
.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;
}

/* ---------- 4. Foco visible ----------
   Los inputs llevaban outline:none y el único indicador era el color del
   borde inferior: insuficiente y poco visible con teclado. Se restaura un
   foco real, solo para navegación por teclado (:focus-visible). */
.aud input[type=text]:focus-visible,
.aud input[type=email]:focus-visible,
.aud input[type=tel]:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-bottom-color: var(--accent);
}
.aud input[type=checkbox]:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- 5. Etiquetas reales del formulario ----------
   Los campos usaban <h3> como etiqueta visual: bonito y sin nombre
   accesible. Ahora son <label for>, con el mismo aspecto que tenían. */
.q-label label{
  font-family: var(--font-display); font-weight:600;
  font-size: 1.25rem; line-height:1.2;
  letter-spacing:-0.015em; color: var(--ink);
  cursor: pointer;
}

/* Título del gate: estaba como style="" en el HTML. */
.gate-title{ font-size: clamp(1.8rem, 5vw, 2.8rem); margin: var(--s2) 0; }

/* ---------- 6. Línea y bloque estacionales ----------
   Ambos se quitan sin tocar nada más cuando pase la temporada. */
.prose--season{
  margin-top: var(--s2);
  color: var(--ink);
  border-left: 2px solid var(--accent);
  padding-left: var(--s2);
}

.why-now{
  margin: var(--s5) 0 0;
  padding: var(--s4) 0 0;
  border-top: 1px solid var(--line);
}
.why-now h2{
  font-size: clamp(1.6rem, 4.4vw, 2.4rem);
  margin: var(--s2) 0 var(--s3);
  max-width: 22ch;
}
.why-now p{ color: var(--ink-2); line-height:1.65; }
.why-now p + p{ margin-top: var(--s2); }
.why-now p:last-child{ color: var(--ink); }

/* ---------- 7. Microcopy bajo el botón de inicio ---------- */
.nav-row--start{ flex-direction:column; align-items:flex-start; gap: var(--s2); }
.btn-micro{
  font-size: .82rem; color: var(--ink-2); max-width: 46ch; margin:0;
}

/* ============================================================
   BLOQUE 2 — 15/08/2026: ancho, cursor y conmutador de tema.
   ============================================================ */

/* ---------- 1. Ancho: el mismo sistema que la home ----------
   El problema no era el 780px en sí, sino que ese max-width incluía el
   padding lateral --mx (clamp 22-128px, border-box). En escritorio el texto
   se quedaba en ~524px reales: de ahí que rompiera cada pocas palabras y que
   la página se hiciera larguísima.

   La home no usa columna central: son secciones a sangre con padding --mx y
   la medida de lectura se controla por elemento en `ch` (56-62ch). Se replica
   eso mismo aquí. */
.aud,
.aud-head,
.aud-foot{
  max-width: none;
  margin-inline: 0;
  padding-inline: var(--mx);
}
.aud{ padding-bottom: var(--s6); }

/* Medida de lectura por elemento, como en la home. */
.aud .prose{ max-width: 60ch; }
.aud-hero h1{ max-width: 18ch; }
.axis-list{ max-width: 92ch; }
.axis-list span{ max-width: 62ch; }
.why-now h2{ max-width: 26ch; }
.why-now p{ max-width: 62ch; }
.btn-micro{ max-width: 56ch; }

/* El formulario no debe estirarse a todo el ancho: un input de 1.200px es
   peor que uno de 500. Se le da una columna propia. */
.q,
.consent,
.gate-blur,
#sc-gate .prose,
#sc-gate .gate-title{ max-width: 52ch; }
.stepper, #step-body{ max-width: 78ch; }
.load-wrap{ max-width: 60ch; }

/* El informe sí aprovecha el ancho: radar, columnas y pasos. */
.rep-head, .sec, .cta{ max-width: 92ch; }
.sec .split{ max-width: none; }

/* ---------- 2. Cursor de firma ----------
   Se recupera el cursor propio de la home cargando interactions.js. Las
   reglas .cursor viven en sections.css, que es la hoja de maquetación
   completa de la home: traerla entera aquí arrastraría todo su layout, así
   que se copian solo estas seis reglas. Si sections.css cambia, hay que
   replicarlo aquí (anotado en el HANDOFF). */
.cursor{
  position:fixed; top:0; left:0; z-index:300; width:10px; height:10px;
  border-radius:999px; background:var(--accent); pointer-events:none;
  transform:translate(-50%,-50%); display:grid; place-items:center;
  transition:width .25s var(--ease), height .25s var(--ease), background-color .25s var(--ease);
}
.cursor.is-ring{ width:74px; height:74px; background:color-mix(in srgb,var(--accent) 14%, transparent); border:1px solid var(--accent); }
.cursor.is-hide{ opacity:0; }
.cursor__label{ font-size:.6rem; text-transform:uppercase; letter-spacing:.14em; color:var(--accent); opacity:0; white-space:nowrap; font-family:var(--font-text); font-weight:600; }
.cursor.is-ring .cursor__label{ opacity:1; }
@media (hover:none),(pointer:coarse){ .cursor{ display:none; } }

/* Se deja de forzar cursor:auto: vuelve el de la home. */
@media (hover:hover) and (pointer:fine){
  body{ cursor:none; }

  /* PERO en los campos de texto se mantiene el cursor nativo. Sin esto el
     visitante escribe sin ver dónde está apuntando, que es exactamente por
     lo que se había desactivado el cursor de firma en esta página. */
  .aud input[type=text], .aud input[type=email], .aud input[type=tel],
  .aud textarea{ cursor: text; }
  .aud input[type=checkbox], .aud .btn, .aud .opt, .aud label{ cursor: pointer; }
}

/* ---------- 3. Conmutador de tema en la cabecera ---------- */
.aud-head__tools{ display:flex; align-items:center; gap: var(--s2); }
.aud-head .theme{
  width:26px; height:26px; border-radius:999px; padding:0;
  border:1px solid var(--line); background:transparent;
  display:grid; place-items:center; cursor:pointer;
  transition: border-color var(--dur-micro) var(--ease);
}
.aud-head .theme:hover{ border-color: var(--accent); }
.aud-head .theme__dot{
  width:11px; height:11px; border-radius:999px; background:var(--ink);
  transition: background var(--dur-theme) var(--ease);
}
html[data-theme="light"] .aud-head .theme__dot{ background:var(--accent); }

/* ---------- 4. Contraste del acento en tema claro ----------
   Con el conmutador disponible, el tema claro deja de ser hipotético. El
   acento #DD2847 daba 4,17:1 sobre el papel claro: vale para texto grande,
   no para texto normal. Se oscurece a #C81E3C, que da 5,02:1 (AA) y apenas
   cambia el tono. Solo se toca en claro; en oscuro ya cumplía (5,56:1). */
html[data-theme="light"]{ --accent:#C81E3C; }

/* ============================================================
   BLOQUE 2 bis — 16/08/2026: dos columnas, ritmo vertical.
   ============================================================ */

/* ---------- Piezas estacionales fuera de i18n ----------
   Decisión de Luise (16/08): la copia de campaña se edita en UN solo sitio,
   este HTML, y no entra en i18n/. En idiomas distintos del español se ocultan
   en vez de aparecer sueltas en español, que se leería como un fallo de
   traducción. Una regla, ningún archivo extra. Hoy no hace nada porque solo
   existe el español; queda lista para cuando entre el catalán. */
html:not([lang="es"]) [data-seasonal]{ display:none; }

/* ---------- Ritmo vertical más apretado ----------
   Solo en estas páginas: la home es una pieza editorial con aire a propósito,
   pero aquí el aire se traduce en scroll y el objetivo es que se llegue al
   botón. Se baja un escalón cada respiro grande, sin tocar los tokens (que
   son compartidos) ni la medida de lectura. */
.aud{ padding-bottom: var(--s5); }              /* 104 -> 64 */
.axis-list{ margin-top: var(--s3); }            /*  40 -> 24 */
.axis-list li{ padding: calc(var(--s2) * .85) 0; }
.why-now{ margin-top: var(--s4); padding-top: var(--s3); }  /* 64/40 -> 40/24 */
.why-now h2{ margin: var(--s2) 0 var(--s3); }
.meta-row{ margin-top: var(--s3); }             /*  40 -> 24 */
.nav-row--start{ margin-top: var(--s3); }
.prose--season{ margin-top: var(--s2); }

/* ---------- Dos columnas a partir de 1200px ----------
   Hasta 1200px se mantiene la columna única: en portátil de 1280 el ancho
   útil ya no da para dos columnas legibles con márgenes --mx grandes. */
@media (min-width: 1200px){

  /* Los cinco ejes en dos columnas: quedan 3 + 2 y el bloque deja de empujar
     el resto de la página hacia abajo. */
  .axis-list{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--s5);
    max-width: 108ch;
    border-top: none;
  }
  .axis-list li{ border-top: 1px solid var(--line); border-bottom: none; }
  .axis-list span{ max-width: 46ch; }

  /* "Por qué ahora": titular a la izquierda, argumento a la derecha. Es la
     misma división que usa la home entre titular y cuerpo. */
  .why-now{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    column-gap: var(--s5);
    align-items: start;
    max-width: 108ch;
  }
  .why-now h2{ margin-top: var(--s2); max-width: 20ch; }
  .why-now__body p{ max-width: 54ch; }
  .why-now__body p:first-child{ margin-top: 0; }
}

/* ============================================================
   Ajustes sobre el montaje de Luise — 16/08/2026
   ============================================================ */

/* ---------- CTA en la cabecera ----------
   Segundo punto de entrada, arriba, sin esperar al final del scroll.
   Se oculta por JS al entrar en el cuestionario: allí ya no significa nada. */
.btn--sm{
  font-size:.72rem; padding:.7rem 1.15rem; letter-spacing:.12em;
  white-space:nowrap;
}
.aud-head__tools{ gap: var(--s3); }

/* En móvil la cabecera no da para las tres piezas. Antes se sacrificaba el
   botón; se sacrifica el eyebrow, que solo informa, y se queda el botón, que
   es el que convierte. Con la etiqueta corta cabe hasta en pantallas de 360px. */
.only-sm{ display:none; }
@media (max-width: 900px){
  .aud-head .eyebrow{ display:none; }
}
@media (max-width: 560px){
  .only-lg{ display:none; }
  .only-sm{ display:inline; }
  .btn--sm{ padding:.65rem .95rem; }
}

/* ---------- "Por qué ahora": una sola columna, texto más ancho ----------
   Anula la rejilla de dos columnas: el argumento se lee mejor seguido bajo su
   titular, y así el párrafo respira en vez de encajonarse en media página. */
@media (min-width: 1200px){
  .why-now{ display:block; max-width:none; }
  .why-now h2{ max-width: 26ch; }
  .why-now__body{ margin-top: var(--s3); }
  .why-now__body p{ max-width: 88ch; }
}
.why-now__body p{ max-width: 78ch; }

/* ============================================================
   Cuestionario reescrito — 16/08/2026: iconos, salida y pulso.
   ============================================================ */

/* ---------- Iconos de la pregunta 02 ----------
   SVG en línea, sin librerías. Heredan currentColor, así que siguen al tema
   y se tiñen de acento cuando la opción queda seleccionada. */
/* `.opt` ya es flex y tiene un ::before con el punto de selección. El icono
   es un tercer hijo en esa misma fila: nada de rejillas, que dejaban el texto
   en una columna de 1.6rem y lo partían palabra a palabra. */
.opt--ico{ align-items:center; gap:.7rem; }
.opt__ico{ flex:0 0 auto; display:grid; place-items:center; }
.opt--ico > span:last-child{ flex:1 1 auto; min-width:0; }
.opt__ico svg{
  width: 22px; height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .75;
  transition: opacity var(--dur-micro) var(--ease);
}
.opt--ico[aria-pressed="true"] .opt__ico svg{ opacity: 1; }

/* ---------- Salida para negocios de servicios ---------- */
.cta-btns--exit{ margin-top: var(--s4); }
#sc-exit .prose{ max-width: 60ch; }
#sc-exit .gate-title{ max-width: 22ch; }

/* ---------- Pulso de los botones ----------
   Latido lento y de recorrido corto: llama la atención sin competir con la
   lectura. Se aplica solo a los CTA principales, no a los fantasma ni a las
   opciones del cuestionario: si late todo, no destaca nada.
   Se detiene al pasar por encima y al enfocar con teclado, para no animar
   algo con lo que el visitante ya está interactuando. */
/* Dos versiones a propósito: `color-mix()` sigue al acento de cada tema, pero
   no está en navegadores móviles algo antiguos y allí el halo desaparecía sin
   más. La primera regla es el suelo en rojo fijo; la segunda la sustituye
   entera donde `color-mix()` existe. */
@keyframes aud-pulso{
  0%, 100% { transform: scale(1);     box-shadow: 0 0 0 0 rgba(230, 31, 62, .45); }
  50%      { transform: scale(1.018); box-shadow: 0 0 0 10px rgba(230, 31, 62, 0); }
}
@supports (color: color-mix(in srgb, red 50%, transparent)){
  @keyframes aud-pulso{
    0%, 100% { transform: scale(1);     box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
    50%      { transform: scale(1.018); box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 0%, transparent); }
  }
}
#btn-start,
#btn-start-top,
#btn-gate,
#sc-exit .cta-btns .btn:not(.btn--ghost),
.cta .cta-btns .btn:not(.btn--ghost){
  animation: aud-pulso 2.8s var(--ease) infinite;
  will-change: transform;
}
#btn-start:hover, #btn-start:focus-visible,
#btn-start-top:hover, #btn-start-top:focus-visible,
#btn-gate:hover, #btn-gate:focus-visible,
#sc-exit .cta-btns .btn:hover, #sc-exit .cta-btns .btn:focus-visible,
.cta .cta-btns .btn:hover, .cta .cta-btns .btn:focus-visible{
  animation-play-state: paused;
}
/* Botón deshabilitado: no invita a nada, no late. */
#btn-gate:disabled{ animation: none; }

/* Quien pide menos movimiento, no lo tiene. */
@media (prefers-reduced-motion: reduce){
  #btn-start, #btn-start-top, #btn-gate,
  #sc-exit .cta-btns .btn, .cta .cta-btns .btn{ animation: none; }
}

/* ---------- Volver arriba ----------
   El cuestionario y el informe son largos y en móvil el pulgar queda abajo:
   el atajo vive donde ya está la mano. Se oculta con [hidden] desde JS, así
   que no ocupa nada mientras el inicio sigue a la vista. */
.to-top{
  position: fixed;
  right: calc(var(--s3) + env(safe-area-inset-right));
  bottom: calc(var(--s3) + env(safe-area-inset-bottom));
  z-index: 40;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
  transition: background var(--dur-micro) var(--ease),
              color var(--dur-micro) var(--ease),
              border-color var(--dur-micro) var(--ease);
  animation: aud-entra .3s var(--ease) both;
}
.to-top[hidden]{ display:none; }
.to-top svg{
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.to-top:hover,
.to-top:focus-visible{
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
@keyframes aud-entra{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }
@media (prefers-reduced-motion: reduce){ .to-top{ animation:none; } }