/* Índice de Complejidad Operativa · estilos de la página.
   Archivo externo, sin nada en línea, para que la política de contenido pueda
   seguir prohibiendo 'unsafe-inline'. Todo el color sale de base.css. */

.icp-wrap { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 3.4rem; align-items: start; }
@media (max-width: 940px) { .icp-wrap { grid-template-columns: 1fr; gap: 2.4rem; } }

/* La tarjeta del cuestionario no tenía título ni instrucción propios: fuera
   de contexto (scroll restaurado, o en móvil sin ver ya el hero) se leía
   como un formulario suelto. Este bloque le da identidad y recuerda el
   total de preguntas justo donde el visitante ya está viendo el contador. */
.icp-intro { margin-bottom: 1.8rem; }
.icp-intro p { margin-top: 0.7rem; font-size: 1.02rem; line-height: 1.55; color: var(--ink-600); max-width: 52ch; }

/* ── Barra de progreso y modo asistente ──────────────────────────────────── */
/* Antes las ocho preguntas vivían apiladas con scroll largo. Ahora se
   contestan de una en una: la barra y el contador dicen dónde vas, y el
   fieldset de cada paso es el único visible. El paso activo lo marca un solo
   atributo en el <form> (data-paso), que pone indice-wizard.js; nada de esto
   toca la lógica de indice.js, que sigue mandando las mismas ocho claves. */
.icp-barra { height: 4px; background: var(--ink-100); margin-bottom: 1.6rem; overflow: hidden; }
.icp-barra-fill { height: 100%; background: var(--gold-800); width: 12.5%;
  transition: width var(--dur-medium, 0.35s) var(--ease); }
.icp-wizard[data-paso="2"] .icp-barra-fill { width: 25%; }
.icp-wizard[data-paso="3"] .icp-barra-fill { width: 37.5%; }
.icp-wizard[data-paso="4"] .icp-barra-fill { width: 50%; }
.icp-wizard[data-paso="5"] .icp-barra-fill { width: 62.5%; }
.icp-wizard[data-paso="6"] .icp-barra-fill { width: 75%; }
.icp-wizard[data-paso="7"] .icp-barra-fill { width: 87.5%; }
.icp-wizard[data-paso="8"] .icp-barra-fill { width: 100%; }

.icp-progreso { display: flex; align-items: baseline; gap: 0.9rem; margin-bottom: 1.8rem;
  padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
#icp-avance { font-family: "JetBrains Mono VF", monospace; font-variation-settings: "wght" 600;
  font-size: 0.95rem; color: var(--ink-900); }

#icp-form fieldset { border: 0; border-top: 1px solid var(--line); margin: 0; padding: 1.7rem 0 0.4rem; }
#icp-form fieldset:first-of-type { border-top: 0; padding-top: 0; }
#icp-form fieldset::after { content: ""; display: block; clear: both; }

/* Un solo paso visible a la vez. */
.icp-wizard fieldset[data-variable] { display: none; }
.icp-wizard[data-paso="1"] fieldset[data-paso="1"],
.icp-wizard[data-paso="2"] fieldset[data-paso="2"],
.icp-wizard[data-paso="3"] fieldset[data-paso="3"],
.icp-wizard[data-paso="4"] fieldset[data-paso="4"],
.icp-wizard[data-paso="5"] fieldset[data-paso="5"],
.icp-wizard[data-paso="6"] fieldset[data-paso="6"],
.icp-wizard[data-paso="7"] fieldset[data-paso="7"],
.icp-wizard[data-paso="8"] fieldset[data-paso="8"] { display: block; border-top: 0; padding-top: 0; }

.icp-nav { display: flex; gap: 1rem; margin-top: 2.2rem; }
#icp-atras:disabled, #icp-siguiente:disabled { opacity: 0.4; cursor: not-allowed; }
.icp-wizard[data-paso="8"] #icp-siguiente { display: none; }

.icp-final { display: none; }
.icp-wizard[data-paso="8"] .icp-final { display: block; margin-top: 2.2rem; }
.icp-final #icp-enviar { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .icp-barra-fill { transition: none; }
}

/* legend no se comporta como un bloque normal: se dibuja encima del borde del
   fieldset y no respeta el margen inferior, con lo que la pregunta se pegaba a
   las opciones de la pregunta anterior. Flotarla a todo lo ancho la devuelve al
   flujo sin perder la semantica, que es lo que necesita un lector de pantalla. */
#icp-form legend { float: left; width: 100%; padding: 0; margin: 0 0 1rem;
  font-family: "Archivo VF", sans-serif;
  font-variation-settings: "wght" 660, "wdth" 100; font-size: 1.12rem; line-height: 1.3;
  color: var(--ink-900); }
.icp-n { font-family: "JetBrains Mono VF", monospace; font-variation-settings: "wght" 600;
  font-size: 0.8rem; color: var(--gold-800); margin-right: 0.6rem; }

/* Cada opción es una fila completa: el objetivo táctil es el renglón entero,
   no el círculo de 16 px. */
#icp-form label { display: grid; grid-template-columns: 20px 1fr; gap: 0.85rem; align-items: start;
  padding: 0.75rem 0.9rem; margin: 0 -0.9rem; cursor: pointer; border-radius: 0;
  transition: background var(--dur-short) var(--ease); }
#icp-form label:hover { background: var(--ink-050); }
#icp-form label span { font-size: 1rem; line-height: 1.5; color: var(--ink-700); }
#icp-form input[type="radio"] { width: 20px; height: 20px; margin: 0.18rem 0 0; accent-color: var(--gold-800); }
#icp-form label:has(input:checked) { background: var(--ink-050); }
#icp-form label:has(input:checked) span { color: var(--ink-900);
  font-variation-settings: "opsz" 18, "wght" 620; }

#icp-form fieldset[data-lista="si"] legend { color: var(--ink-500); }

.icp-senuelo { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.icp-mensaje { margin: 1.2rem 0 0; padding: 0.85rem 1.1rem; background: var(--ink-050);
  border-left: 3px solid var(--gold-800); font-size: 0.97rem; color: var(--ink-700); }
.icp-mensaje[data-tono="error"] { border-left-color: var(--dim-personas); }

#icp-enviar { margin-top: 2rem; }
#icp-enviar:disabled { background: var(--ink-100); color: var(--ink-500); cursor: not-allowed; }
#icp-enviar[data-estado="calculando"] { opacity: 0.7; }

/* ── Resultado ──────────────────────────────────────────────────────────── */
.icp-resultado { border-top: 3px solid var(--gold-500); background: var(--ink-050);
  padding: 2.1rem 2rem 2.3rem;
  /* La cabecera es fija: sin este margen de desplazamiento, al saltar al
     resultado la primera linea queda tapada por el menu. */
  scroll-margin-top: 7rem; }
.icp-resultado:focus { outline: none; }
.icp-resultado h3 { margin: 0.7rem 0 0.4rem; font-size: 1.5rem;
  font-variation-settings: "wght" 700, "wdth" 100; line-height: 1.2; color: var(--ink-900); }
.icp-paquete { font-family: "JetBrains Mono VF", monospace; font-variation-settings: "wght" 600;
  font-size: 0.95rem; letter-spacing: 0.06em; color: var(--gold-800);
  padding-bottom: 1.3rem; margin-bottom: 1.3rem; border-bottom: 1px solid var(--ink-100); }
.icp-rot-alcance { font-family: "Archivo VF", sans-serif;
  font-variation-settings: "wght" 640, "wdth" 92; font-size: 0.78rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ink-500); margin-bottom: 0.9rem; }
.icp-resultado .check-list { margin: 0 0 1.5rem; padding: 0; list-style: none; }
/* padding-left va a 2.6rem, no a 1.7rem: el checkmark de .check-list li::before
   (heredado de base.css) queda fijo en left:1.15rem con ~0.95rem de ancho, así
   que cualquier valor menor a ~2.1rem deja el texto encima del ícono. */
.icp-resultado .check-list li { position: relative; padding-left: 2.6rem; margin-bottom: 0.65rem;
  font-size: 0.99rem; line-height: 1.55; color: var(--ink-700); }
/* Sin max-width: el aviso debe ocupar el mismo ancho que el resto de la
   tarjeta de resultado (h3, check-list, agenda), no quedar angosto y suelto. */
.icp-nota { font-size: 0.9rem; color: var(--ink-500); line-height: 1.6;
  padding-top: 1.2rem; border-top: 1px solid var(--ink-100); margin-bottom: 1.6rem; }

/* ── Agenda tu llamada de diagnóstico ─────────────────────────────────────
   El campo, la fila, el consentimiento y el hueco de Turnstile reutilizan
   los nombres de clase de /contacto/ (.form-field, .form-row, .form-consent,
   .req, .opt, .cf-turnstile, .field-error) a propósito: mismo componente,
   mismo endpoint (/formulario/enviar.php), y así una sola definición sirve
   para las dos páginas el día que compartan hoja de estilos. */
.icp-agenda { border-top: 1px solid var(--ink-100); padding-top: 1.8rem; }
.icp-agenda h3 { margin: 0 0 0.5rem; font-size: 1.2rem;
  font-variation-settings: "wght" 700, "wdth" 100; color: var(--ink-900); }
.icp-agenda-sub { font-size: 0.95rem; line-height: 1.55; color: var(--ink-600);
  margin-bottom: 1.6rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin-bottom: 1.2rem; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.form-field { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 1.2rem; }
.form-field label { font-size: 0.83rem; font-variation-settings: "wght" 620; color: var(--ink-900); }
.form-field label .req { color: var(--gold-800); font-variation-settings: "wght" 700; }
.form-field label .opt { color: var(--ink-500); font-weight: 400; }
.form-field input {
  width: 100%; max-width: 100%; border: 1px solid var(--line); padding: 0.8rem 1rem;
  font-family: "Archivo VF", sans-serif; font-size: 1rem; color: var(--ink-900); background: var(--white); }
.form-consent { font-size: 0.93rem; color: var(--ink-900); display: flex; gap: 0.7rem; align-items: center;
  margin-bottom: 1.4rem; padding: 0.9rem 1.1rem; border: 1px solid var(--line); background: var(--ink-050); }
.form-consent input[type="checkbox"] { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--gold-800); cursor: pointer; }
.form-consent label, .form-consent { cursor: pointer; }
.form-consent a { color: var(--gold-800); text-decoration: underline; }
.cf-turnstile { margin-bottom: 1.2rem; }
.field-error { color: #B3261E; font-size: 0.8rem; margin-top: 0.3rem; }
.icp-agenda-acciones { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.icp-agenda-whatsapp { font-size: 0.92rem; color: var(--gold-800); text-decoration: underline;
  text-underline-offset: 2px; }
.icp-agenda-whatsapp:hover { color: var(--ink-900); }

/* ── Columna lateral ────────────────────────────────────────────────────── */
.icp-lado { border-left: 2px solid var(--gold-500); padding: 0.2rem 0 0.2rem 1.6rem;
  position: sticky; top: 6.5rem; }
@media (max-width: 940px) { .icp-lado { border-left: 0; border-top: 2px solid var(--gold-500);
  padding: 1.4rem 0 0; position: static; } }
.icp-lado p { margin-top: 1rem; font-size: 0.99rem; line-height: 1.62; color: var(--ink-600); }
.icp-lado-nota { font-family: "JetBrains Mono VF", monospace; font-size: 0.84rem;
  line-height: 1.7; color: var(--ink-500); padding-top: 1.2rem; border-top: 1px solid var(--line); }

@media (prefers-reduced-motion: reduce) {
  #icp-form label { transition: none; }
}

/* ── Encabezado de la página ────────────────────────────────────────────── */
/* El hero era puro texto sobre azul marino, sin ningún elemento visual. Ahora
   retoma el mismo layout de dos columnas que ya usa el hero de /compass/
   (hero-grid + hero-photo, definidos en base.css): texto a la izquierda,
   fotografía real a la derecha. La imagen es de un consultor exponiendo un
   análisis con gráficas frente a su equipo, así que ilustra el propio acto
   de diagnosticar en vez de un diagrama abstracto. */
.icp-hero-grid { align-items: center; }
/* El H1 de Inicio y de /compass/ fija su propio peso y ancho con
   font-variation-settings (regla .hero h1 de base.css); este hero no lleva
   la clase .hero, así que sin esta línea el navegador resolvía el peso solo
   con el bold por defecto del elemento h1 (equivalente a wght 700 pero sin
   tocar el eje de ancho, que se quedaba en 100). Mismos valores que las
   otras dos páginas, para que el titular de las tres se vea igual de firme. */
.icp-cab h1 { font-size: clamp(2.1rem, 4vw, 3.2rem); max-width: 18ch; margin: 1.2rem 0 1.1rem;
  font-variation-settings: "wght" 740, "wdth" 112; }
/* El H1 de Inicio y de /compass/ resalta en dorado su palabra clave con
   <em> (regla .hero h1 em de base.css); este hero no lleva la clase .hero
   porque reutiliza .sec-head para el layout, así que sin esta línea el
   título se quedaba entero en blanco. Mismo tratamiento, misma variable de
   color, para que las tres páginas usen el mismo lenguaje visual. */
.icp-cab h1 em { font-style: normal; color: var(--gold-500); }
.icp-cab p { max-width: 58ch; font-size: 1.1rem; }
@media (max-width: 900px) { .icp-hero-grid .hero-photo { max-width: 26rem; margin: 0 auto; } }