/* Lenguaje visual de gbm.net/analitica-con-ai, registrado en marca/marca_gbm.json:
   Chivo; títulos en peso 400 (h1 magenta con guion, h2 azul); cuerpo 18 px #080D2B; botones de esquinas rectas,
   azules sólidos o blancos con borde; secciones blanco y #FCFAFA; portada sobre fondo oscuro. */
:root {
  --azul: #3165F8;
  --azul-oscuro: #06183A;
  --fondo-oscuro: #04172B;
  --texto: #080D2B;
  --magenta-titulo: #A548A2;
  --magenta: #CE5ACA;
  --verde: #98F4B6;
  --fondo-seccion: #FCFAFA;
  --gris: #3C3C3C;
  --texto-gris: #555555;
  --gris-claro: #EFEFEF;
  --blanco: #FFFFFF;
  --error: #B42318;
  --tinte-azul: #EEF3FF;
  --fuente: "Chivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ancho: 1200px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--fuente); font-size: 17px; line-height: 1.55; color: var(--texto); background: var(--blanco); }
/* Portada, registro y código sobre el azul de GBM (pedido de la usuaria, 28-sep-2026). */
body:has(#vista-entrada:not([hidden])), body:has(#vista-registro:not([hidden])),
body:has(#vista-codigo:not([hidden])) { background: var(--azul); }
h1, h2, h3 { font-weight: 400; line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: clamp(28px, 3.2vw, 40px); }
h2 { font-size: clamp(22px, 2.4vw, 30px); color: var(--azul); }
h3 { font-size: 18px; color: var(--azul); }
p { margin: 0 0 1em; }
a { color: var(--azul); }
button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--magenta); outline-offset: 2px; }

.saltar { position: absolute; left: -9999px; top: 0; background: var(--blanco); padding: 8px 12px; z-index: 10; }
.saltar:focus { left: 8px; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Cabecera */
.cabecera { display: flex; align-items: center; gap: 24px; padding: 14px max(20px, calc((100vw - var(--ancho)) / 2)); background: var(--fondo-oscuro); color: var(--blanco); }
.marca img { display: block; height: 28px; width: auto; }
.cabecera-titulo { margin: 0; font-size: 14px; letter-spacing: .02em; color: #C9D3E6; flex: 1; }
.cabecera-acciones { display: flex; align-items: center; gap: 16px; font-size: 14px; }
.persona-activa { color: var(--verde); }

main { min-height: calc(100vh - 170px); }
.vista { padding: 40px max(20px, calc((100vw - var(--ancho)) / 2)); }

/* Etiquetas y títulos */
.etiqueta { margin: 0 0 8px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--magenta-titulo); }
.etiqueta-verde { color: var(--verde); }
.titulo-guion { color: var(--magenta-titulo); }
.titulo-guion::before { content: "– "; }
.titulo-magenta { color: var(--magenta-titulo); margin-top: 32px; }
.lema { font-size: 18px; max-width: 820px; }
.nota { font-size: 14px; color: var(--texto-gris); }
.meta { font-size: 14px; color: var(--texto-gris); }

/* Botones: esquinas rectas */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 26px; border: 2px solid var(--azul); border-radius: 0; background: var(--azul); color: var(--blanco); font-weight: 700; text-decoration: none; cursor: pointer; }
.boton:hover { background: #1F4FD8; border-color: #1F4FD8; }
.boton:disabled { opacity: .45; cursor: not-allowed; }
.boton-contorno { background: var(--blanco); color: var(--azul); }
.boton-contorno:hover { background: var(--tinte-azul); color: var(--azul); }
.boton-texto { background: none; border: 0; padding: 6px 0; color: var(--azul); text-decoration: underline; cursor: pointer; }
.boton-texto-claro { color: var(--blanco); }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; align-items: center; }

/* Paneles y formularios */
.panel { background: var(--blanco); border: 1px solid var(--gris-claro); padding: 28px; }
.panel-ayuda { font-size: 14px; color: var(--texto-gris); }
.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.campo input, .campo select { width: 100%; min-width: 0; }
.campo label { font-size: 14px; font-weight: 700; }
.campo input, .campo select { min-height: 40px; padding: 8px 10px; border: 1px solid #B8BFCC; border-radius: 0; background: var(--blanco); }
.campo input:focus, .campo select:focus { border-color: var(--azul); outline: 2px solid var(--azul); outline-offset: 0; }
.campo [aria-invalid="true"] { border-color: var(--error); }
.consentimiento { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 2px; font-size: 12.5px; line-height: 1.4; }
.consentimiento input { width: 18px; height: 18px; margin-top: 2px; flex: none; }
.nota-provisional { display: block; color: var(--magenta-titulo); }
.nota-privacidad { border-left: 3px solid var(--magenta-titulo); padding: 6px 10px; background: #F5F7FA; color: var(--fondo-oscuro); }
.error { color: var(--error); font-size: 14px; margin: 10px 0 0; }
.aviso { background: var(--tinte-azul); border-left: 4px solid var(--azul); padding: 10px 14px; font-size: 14px; }

/* 01 · Entrada: portada oscura y formulario visible en el primer pantallazo */
.vista-entrada { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 40px; align-items: start; background: var(--fondo-oscuro); color: var(--blanco); padding-top: 20px; padding-bottom: 40px; }
.entrada-portada h1 { text-transform: uppercase; color: var(--blanco); font-size: clamp(30px, 3.4vw, 44px); letter-spacing: .01em; }
.entrada-lema { font-size: 19px; color: #DDE4F2; }
.etapas { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; }
.etapas li { display: flex; gap: 14px; align-items: baseline; }
.etapas span { color: var(--verde); font-weight: 700; font-size: 14px; }
.etapas small { display: block; color: #AEB9CF; font-size: 14px; }
.panel-registro { color: var(--texto); padding: 18px 24px 20px; }
.panel-registro h2 { margin-bottom: 2px; font-size: 26px; }
.panel-registro .panel-ayuda { margin-bottom: 10px; }

/* 02 · Código */
.vista-centrada { display: flex; justify-content: center; background: var(--fondo-seccion); }
.panel-estrecho { width: min(560px, 100%); }
.entrada-codigo { font-size: 26px; letter-spacing: .3em; text-align: center; max-width: 260px; }

/* 03 · Preguntas */
/* Crítica de diseño (28-sep-2026): riel más liviano que el contenido, medida de lectura acotada y ayudas discretas. */
.vista-preguntas { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 56px; align-items: start; }
.riel { position: sticky; top: 16px; background: var(--fondo-seccion); border: 1px solid var(--gris-claro); padding: 20px 20px 24px; }
.progreso-texto { margin: 0 0 8px; font-size: 13px; color: var(--texto-gris); }
.progreso-texto strong { font-size: 30px; color: var(--azul); font-weight: 400; margin-right: 2px; }
.progreso { height: 3px; background: var(--gris-claro); }
.progreso span { display: block; height: 100%; width: 0; background: var(--azul); transition: width .2s; }
.riel-nota { font-size: 12px; color: var(--texto-gris); margin: 8px 0 14px; }
.lista-preguntas h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--magenta-titulo); margin: 14px 0 6px; }
.lista-preguntas ol { list-style: none; margin: 0; padding: 0; }
.lista-preguntas button { width: 100%; display: flex; gap: 8px; justify-content: space-between; text-align: left; background: none; border: 0; border-left: 3px solid transparent; padding: 4px 8px; font-size: 14px; cursor: pointer; color: var(--gris); }
.lista-preguntas button[aria-current="step"] { border-left-color: var(--azul); color: var(--azul); background: var(--tinte-azul); }
.lista-preguntas .hecha::after { content: "✓"; color: #1B8A4B; }
/* Una sola jerarquía en cada paso: rótulo, la pregunta del instrumento como título (mismo cuerpo en todos los
   pasos, en azul marino porque cinco líneas en azul vivo gritan), orientación y ayudas en gris, y las opciones. */
/* El contenido llena el lienzo de 1200 px (skill de diseño, 28-sep-2026): el espacio a la derecha no era margen,
   era columna sin usar. La pregunta guarda su medida de lectura; las opciones van a todo el ancho. */
.escenario { min-width: 0; }
.escenario .etiqueta { font-size: 12px; margin-bottom: 14px; }
.titulo-pregunta { color: var(--azul-oscuro); font-size: clamp(20px, 1.9vw, 23px); line-height: 1.4; max-width: 38em; margin: 0 0 14px; }
.texto-pregunta { font-size: 15px; line-height: 1.55; color: var(--texto-gris); padding: 0; margin: 0 0 6px; max-width: 34em; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.rol-sugerido { font-size: 13px; color: var(--texto-gris); margin: 0 0 18px; }
.instruccion { font-size: 13px; line-height: 1.5; color: var(--texto-gris); background: none; border-left: 2px solid var(--azul); padding: 2px 0 2px 12px; margin: 0 0 14px; }
.instruccion strong { color: var(--texto); font-weight: 700; }
.opciones { display: grid; gap: 8px; margin-top: 0; }
.opcion { position: relative; }
.opcion input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opcion label { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 16px; padding: 16px 22px; border: 1px solid #D9DEE8; background: var(--blanco); cursor: pointer; transition: border-color .12s, background-color .12s; }
.opcion label:hover { border-color: var(--azul); }
.opcion label strong { color: var(--azul); font-weight: 700; }
.opcion label strong small { display: block; font-weight: 400; color: var(--texto-gris); font-size: 14px; }
.opcion label span { font-size: 15.5px; line-height: 1.55; }
.opcion input:checked + label { border-color: var(--azul); background: var(--tinte-azul); box-shadow: inset 3px 0 0 var(--azul); }
.opcion input:focus-visible + label { outline: 3px solid var(--magenta); outline-offset: 2px; }
.opcion-nivel label { grid-template-columns: minmax(0, 1fr); }
.opcion-especial label { background: var(--fondo-seccion); padding: 11px 18px; }
.opcion-especial label span { font-size: 14px; }
.separador-opciones { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-gris); margin: 10px 0 0; }
.guardado { font-size: 13px; color: #1B8A4B; min-height: 1.3em; margin: 10px 0 0; }

/* 04 y 05 · Tablas */
.vista-ancha { background: var(--blanco); }
.tabla { border-top: 2px solid var(--azul); margin: 8px 0 20px; }
.fila { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) minmax(0, .9fr) auto; gap: 16px; padding: 12px 8px; border-bottom: 1px solid var(--gris-claro); align-items: baseline; }
.fila-cabecera { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-gris); background: var(--fondo-seccion); }
.fila .pendiente { color: var(--error); }
.resultado-nivel { color: var(--azul); font-weight: 700; }
.resultado-especial { color: var(--texto-gris); font-style: italic; }

/* Informe */
.panel-informe { margin: 32px 0 8px; background: var(--fondo-seccion); }
.estado-informe { font-size: 15px; }
.pasos { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; font-size: 14px; }
.pasos li::before { content: "● "; color: var(--azul); }
.pasos li.en-curso::before { color: var(--magenta); }
.insignia { display: inline-block; padding: 2px 10px; font-size: 13px; font-weight: 700; }
.insignia-borrador { background: var(--verde); color: var(--fondo-oscuro); }
.insignia-revision { background: #F5F7FA; color: var(--magenta-titulo); }
.insignia-aprobado { background: var(--azul-oscuro); color: #FFFFFF; }
.observaciones { margin-top: 16px; font-size: 14px; }
.observaciones li { margin-bottom: 8px; }

.pie { padding: 20px max(20px, calc((100vw - var(--ancho)) / 2)); background: var(--fondo-oscuro); color: #AEB9CF; font-size: 13px; }
.pie p { margin: 0; }

@media (max-width: 900px) {
  .vista-entrada, .vista-preguntas { grid-template-columns: minmax(0, 1fr); }
  .riel { position: static; }
  /* En pantallas angostas la lista de 20 empujaría la pregunta fuera de vista tras cada avance automático. */
  .lista-preguntas { display: none; }
  .campos { grid-template-columns: minmax(0, 1fr); }
  .cabecera-titulo { display: none; }
  .fila { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .fila-cabecera { display: none; }
  .opcion label { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ── Generación del informe (estructura del prototipo Elara, colores GBM) ── */
.vista-generacion { background: var(--fondo-seccion); min-height: calc(100vh - 170px); display: flex; justify-content: center; }
.generacion { width: min(820px, 100%); }
.generacion h1 { color: var(--azul); }
.generacion-lema { font-size: 18px; color: var(--gris); max-width: 680px; }
.senal { height: 3px; margin: 40px 0 24px; background: var(--gris-claro); overflow: hidden; }
.senal span { display: block; width: 35%; height: 100%; background: var(--azul); animation: senal 1.35s ease-in-out infinite; }
.senal.detenida span { animation: none; width: 0; }
@keyframes senal { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
.etapas-generacion { list-style: none; padding: 0; margin: 0; }
.etapas-generacion li { display: grid; grid-template-columns: 44px minmax(0, 1fr) 18px; gap: 16px; align-items: center; min-height: 76px; padding: 12px 0; border-bottom: 1px solid var(--gris-claro); opacity: .45; }
.etapas-generacion .etapa-numero { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--azul-oscuro); font-weight: 700; }
.etapas-generacion strong, .etapas-generacion small { display: block; }
.etapas-generacion small { color: var(--texto-gris); margin-top: 2px; }
.etapas-generacion b { width: 14px; height: 14px; border: 2px solid var(--gris-claro); border-radius: 50%; }
.etapas-generacion li.en-curso { opacity: 1; }
.etapas-generacion li.en-curso .etapa-numero { background: var(--azul); color: var(--blanco); border-color: var(--azul); }
.etapas-generacion li.en-curso b { border-color: var(--azul); border-top-color: transparent; animation: girar .7s linear infinite; }
.etapas-generacion li.hecha { opacity: .85; }
.etapas-generacion li.hecha b { background: #1B8A4B; border-color: #1B8A4B; }
.etapas-generacion li.fallida { opacity: 1; }
.etapas-generacion li.fallida .etapa-numero { border-color: #B3261E; color: #B3261E; }
.etapas-generacion li.fallida b { background: #B3261E; border-color: #B3261E; }
.etapas-generacion li.fallida small { color: #B3261E; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ── Informe web ── */
.vista-informe { background: var(--blanco); }
.informe-portada { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: end; padding: 48px max(20px, calc((100vw - var(--ancho)) / 2)) 40px; background: var(--fondo-oscuro); color: var(--blanco); }
.informe-portada h1 { font-size: clamp(30px, 3.6vw, 48px); color: var(--blanco); margin: 8px 0 18px; }
.informe-lema { font-size: 19px; color: #DDE4F2; max-width: 820px; margin: 0; }
.informe-descarga { background: var(--blanco); color: var(--texto); padding: 22px; display: grid; gap: 12px; align-content: start; }
.informe-descarga p { margin: 0; font-size: 14px; color: var(--gris); }
.informe-descarga .boton { width: 100%; }
.informe-meta { display: flex; flex-wrap: wrap; margin: 0; padding: 0 max(20px, calc((100vw - var(--ancho)) / 2)); border-bottom: 1px solid var(--gris-claro); background: var(--fondo-seccion); }
.informe-meta span { padding: 12px 22px 12px 0; margin-right: 22px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-gris); }
.informe-cuerpo { padding: 0 max(20px, calc((100vw - var(--ancho)) / 2)); }
/* ── Informe como página web (1-oct-2026; dirección en maquetas/DIRECCION_informe-web.md) ───────────────────
   Mismos datos del PDF, diseño propio de la web. Prefijo iw-. El nivel va siempre con texto, nunca solo color. */
.con-vista .informe-portada { grid-template-columns: minmax(0, 1fr); padding: 12px max(20px, calc((100vw - var(--ancho)) / 2)); background: var(--fondo-seccion); color: var(--texto); border-bottom: 1px solid var(--gris-claro); }
.con-vista .informe-descarga { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; padding: 0; background: none; }
.con-vista .informe-descarga p { flex: 1 1 360px; font-size: 14px; }
.con-vista .informe-descarga .boton { width: auto; }

.iw { color: var(--texto); }
.iw-portada { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: center; padding: 56px max(20px, calc((100vw - var(--ancho)) / 2)) 48px; background: var(--fondo-oscuro); color: var(--blanco); }
.iw-portada h1 { color: var(--blanco); font-size: clamp(28px, 3.4vw, 44px); max-width: 22ch; margin: 6px 0 28px; }
.iw-portada h1:focus { outline: none; }
.iw-datos { display: grid; grid-template-columns: repeat(4, minmax(0, auto)); gap: 12px 40px; margin: 0; }
.iw-datos dt { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #9DB9FF; }
.iw-datos dd { margin: 2px 0 0; font-size: 16px; color: var(--blanco); }
.iw-global { padding: 24px 24px 20px; border: 1px solid #1B3354; text-align: center; }
.iw-global-rotulo { margin: 0 0 6px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #C9D3E6; }
.iw-medidor { display: block; width: 100%; max-width: 230px; margin: 0 auto; }
.iw-global-nivel { margin: 2px 0 8px; font-size: 20px; color: var(--verde); }
.iw-global-nota { margin: 0; font-size: 13px; line-height: 1.45; color: #C9D3E6; }

.iw-cuerpo { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 64px; padding: 0 max(20px, calc((100vw - var(--ancho)) / 2)); }
.iw-indice { position: sticky; top: 0; align-self: start; max-height: 100vh; overflow-y: auto; padding: 40px 0 24px; }
.iw-indice-titulo { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--magenta-titulo); }
.iw-indice ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--gris-claro); }
.iw-indice a { display: block; padding: 7px 0 7px 14px; margin-left: -2px; border-left: 2px solid transparent; font-size: 14px; line-height: 1.35; color: var(--texto-gris); text-decoration: none; }
.iw-indice a:hover { color: var(--azul); border-left-color: var(--azul); }
.iw-indice-anexo a { margin-top: 10px; color: var(--magenta-titulo); }

.iw-sec { padding: 56px 0; border-bottom: 1px solid var(--gris-claro); scroll-margin-top: 16px; }
.iw-sec p, .iw-sec li, .iw-sec dd { max-width: 74ch; }
.iw-sec-cabeza { margin-bottom: 28px; }
.iw-rotulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--magenta-titulo); }
.iw-rotulo > span:first-child { color: var(--texto); }
.iw-sec .iw-rotulo { max-width: none; }
.iw-marca { margin-left: auto; padding: 2px 8px; border: 1px solid var(--gris-claro); font-size: 11px; letter-spacing: .06em; color: var(--texto-gris); }
.iw-marca-fuera { border-color: var(--magenta-titulo); color: var(--magenta-titulo); }
.iw-sec h2 { max-width: 40ch; margin-bottom: 10px; }
.iw-bajada { margin: 0; font-size: 16px; color: var(--texto-gris); }
.iw-sec h3 { font-size: 18px; margin: 0 0 12px; }
.iw-sec .iw-subtitulo { margin-top: 36px; }
.iw-rotulo-chico { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--magenta-titulo); }
.iw-sin-vinetas { list-style: none; margin: 0; padding: 0; }

.iw-estado { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 28px; font-size: 14px; color: var(--texto-gris); }
.iw-estado-sello { padding: 2px 10px; border: 1px solid var(--magenta-titulo); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--magenta-titulo); }
.iw-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; margin: 0 0 32px; padding: 0; }
.iw-sec .iw-cifras li { max-width: none; padding: 18px 20px; border-top: 3px solid var(--azul); background: var(--fondo-seccion); }
.iw-cifras b { display: block; font-size: 30px; font-weight: 400; color: var(--azul-oscuro); line-height: 1.1; }
.iw-cifras span { font-size: 14px; color: var(--texto-gris); }
.iw-mensaje { margin: 0 0 32px; padding: 24px 28px; border-left: 4px solid var(--azul); background: var(--tinte-azul); }
.iw-sec .iw-mensaje h3 { color: var(--azul-oscuro); }
.iw-mensaje p:last-child { margin-bottom: 0; }
.iw-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.iw-tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.iw-tarjeta { padding: 22px 24px; border: 1px solid var(--gris-claro); background: var(--blanco); }
.iw-tarjeta p:last-child { margin-bottom: 0; }
.iw-suave { background: var(--fondo-seccion); }
.iw-lista-num, .iw-lista { margin: 0 0 12px; padding-left: 22px; }
.iw-lista-num li, .iw-lista li { margin-bottom: 10px; }
.iw-previa { color: var(--magenta-titulo); }
.iw-rasgo { display: block; font-size: 15px; color: var(--texto-gris); }
.iw-sintesis { margin-top: 24px; padding: 20px 24px; background: var(--azul-oscuro); color: var(--blanco); }
.iw-sintesis .iw-rotulo-chico { color: var(--verde); }
.iw-sintesis p:last-child { margin: 0; }
.iw-escala { margin-top: 24px; }
.iw-escala summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--azul); }
.iw-escala ol { list-style: none; margin: 8px 0 0; padding: 0; }
.iw-escala li { padding: 6px 8px; font-size: 15px; }
.iw-escala li[aria-current] { background: var(--tinte-azul); }

.iw-nivel { display: inline-block; min-width: 2.8em; margin-right: 6px; padding: 1px 7px; font-size: 13px; font-weight: 700; text-align: center; vertical-align: 1px; background: var(--gris-claro); color: var(--gris); }
.iw-n1 { background: #EAF0FE; color: var(--azul-oscuro); }
.iw-n2 { background: #C9D8FD; color: var(--azul-oscuro); }
.iw-n3 { background: #8FADFA; color: var(--azul-oscuro); }
.iw-n4 { background: var(--azul); color: var(--blanco); }
.iw-n5 { background: var(--azul-oscuro); color: var(--blanco); }

.iw-radar-capas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.iw-radar { margin: 0; }
.iw-radar svg { display: block; width: 100%; height: auto; }
.iw-radar figcaption { display: flex; justify-content: center; gap: 20px; margin-top: 8px; font-size: 14px; color: var(--texto-gris); }
.iw-leyenda { display: inline-flex; align-items: center; gap: 8px; }
.iw-leyenda i { display: inline-block; width: 22px; height: 0; border-top: 3px solid var(--azul); }
.iw-leyenda .iw-l-objetivo { border-top: 2px dashed var(--azul-oscuro); }
.iw-leyenda .iw-l-resto { border-top-color: #8FADFA; }
.iw-leyenda .iw-l-cond { border-top-color: #C9D8FD; }
.iw-capas ol { list-style: none; margin: 0; padding: 0; counter-reset: capa; }
.iw-capas li { padding: 14px 0; border-bottom: 1px dashed var(--gris-claro); counter-increment: capa; }
.iw-capas li:last-child { border-bottom: 0; }
.iw-capa-nombre { margin: 0 0 6px; }
.iw-capas .iw-chips { margin-bottom: 6px; }
.iw-capa-nombre b::before { content: counter(capa) " · "; color: var(--magenta-titulo); }
.iw-capas li p:last-child { margin: 0; font-size: 15px; color: var(--texto-gris); }
.iw-dispersion { margin: 4px 0 10px; }
.iw-sec .iw-dispersion li { display: grid; grid-template-columns: auto minmax(0, 1fr) 7.5em; align-items: center; gap: 10px; padding: 4px 0; max-width: none; font-size: 14px; }
.iw-dispersion svg { display: block; width: 100%; height: 10px; }
.iw-sep { margin-top: 28px; }
.iw-lectura { margin-top: 28px; padding: 24px 28px; background: var(--tinte-azul); border-left: 4px solid var(--azul); }
.iw-sec .iw-lectura h3 { color: var(--azul-oscuro); }
.iw-lectura p:last-child { margin-bottom: 0; }
.iw-lectura-clara { background: var(--fondo-seccion); border-left-color: var(--gris-claro); }

.iw-tabla-caja { overflow-x: auto; }
.iw-tabla { width: 100%; border-collapse: collapse; font-size: 15px; }
.iw-tabla th, .iw-tabla td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--gris-claro); }
.iw-tabla thead th { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-gris); border-bottom: 2px solid var(--azul-oscuro); }
.iw-tabla tbody th[scope="row"] { font-weight: 700; color: var(--azul-oscuro); min-width: 180px; }
.iw-grupo th { padding-top: 20px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--magenta-titulo); background: var(--blanco); }
.iw-grupo th span { display: block; margin-top: 4px; font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--texto-gris); }
.iw-estado-cond { display: inline-block; padding: 1px 8px; font-size: 13px; font-weight: 700; }
.iw-presente { background: #DDF8E6; color: #0B5A2B; }
.iw-fragil { background: #FFF1D6; color: #7A4B00; }
.iw-ausente { background: #F5F7FA; color: #8A2E86; }
.iw-sin-dato { background: var(--gris-claro); color: var(--gris); }
.iw-ext-cabeza { display: flex; align-items: baseline; gap: 4px; margin: 0 0 6px; }

.iw-bloque-ia { margin-bottom: 16px; padding: 20px 24px; border: 1px solid var(--gris-claro); }
.iw-bloque-ia p:last-child { margin-bottom: 0; }
.iw-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.iw-chip { display: inline-block; padding: 2px 9px; font-size: 13px; background: var(--gris-claro); color: var(--gris); }
.iw-chip-foco { background: var(--azul-oscuro); color: var(--blanco); }
.iw-chip-reco { background: var(--tinte-azul); color: var(--azul-oscuro); }
.iw-sin-corte { white-space: nowrap; }
.iw-con-lateral { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
.iw-lateral { padding: 22px 24px; background: var(--fondo-seccion); font-size: 15px; }
.iw-sec .iw-lateral h3:not(:first-child) { margin-top: 24px; }
.iw-foco { list-style: none; margin: 0; padding: 0; }
.iw-foco li { padding: 8px 0; border-bottom: 1px solid var(--gris-claro); }
.iw-foco .iw-rotulo-chico { display: block; margin-bottom: 4px; color: var(--azul-oscuro); }
.iw-foco-nombre { display: block; overflow-wrap: anywhere; }
.iw-tabla td p { margin: 6px 0 0; }
.iw-capa-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.iw-capa-chips b { flex-basis: 100%; font-size: 14px; }
.iw-rel { font-size: 14px; }

.iw-sec .iw-aviso-cronograma { max-width: none; margin: 0 0 24px; padding: 16px 20px; border-left: 4px solid var(--magenta-titulo); background: #FFFFFF; font-size: 15px; }
.iw-ficha { border: 1px solid var(--gris-claro); }
.iw-ficha header { padding: 16px 20px; background: var(--azul-oscuro); color: var(--blanco); }
.iw-sec .iw-ficha header h3 { margin: 0 0 4px; color: var(--blanco); }
.iw-ficha header p { margin: 0; font-size: 14px; color: #C9D3E6; }
.iw-ficha dl { margin: 0; padding: 4px 20px 16px; }
.iw-ficha dt { margin-top: 14px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--magenta-titulo); }
.iw-ficha dd { margin: 4px 0 0; font-size: 15px; }
.iw-ficha ul { margin: 0; padding-left: 18px; }
.iw-falta { color: var(--texto-gris); font-style: italic; }

.iw-gantt { border-top: 2px solid var(--azul-oscuro); font-size: 14px; }
.iw-gantt ul { list-style: none; margin: 0; padding: 0; }
.iw-sec .iw-gantt-meses, .iw-sec .iw-gantt-fila { display: grid; align-items: center; margin: 0; max-width: none; }
.iw-meses-12 .iw-gantt-meses, .iw-meses-12 .iw-gantt-fila { grid-template-columns: minmax(170px, 260px) repeat(12, minmax(0, 1fr)); }
.iw-meses-8 .iw-gantt-meses, .iw-meses-8 .iw-gantt-fila { grid-template-columns: minmax(170px, 260px) repeat(8, minmax(0, 1fr)); }
.iw-gantt-meses span { padding: 8px 0; font-size: 12px; color: var(--texto-gris); text-align: center; }
.iw-gantt-meses span:first-child { text-align: left; font-weight: 700; color: var(--texto); }
.iw-gantt-fila { min-height: 40px; border-bottom: 1px solid var(--gris-claro); }
.iw-gantt-nombre { grid-column: 1; grid-row: 1; padding: 6px 12px 6px 0; }
.iw-gantt-cabeza { background: var(--fondo-seccion); }
.iw-gantt-cabeza .iw-gantt-nombre { font-weight: 700; color: var(--azul-oscuro); padding-left: 8px; }
.iw-barra { grid-row: 1; margin: 0 2px; padding: 3px 8px; font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iw-barra-fase { background: var(--azul-oscuro); color: var(--blanco); }
.iw-barra-foco { background: var(--azul); color: var(--blanco); }
.iw-barra-resto { background: #8FADFA; color: var(--azul-oscuro); }
.iw-barra-cond { background: #C9D8FD; color: var(--azul-oscuro); }
.iw-ini-1 { grid-column-start: 2; } .iw-fin-1 { grid-column-end: 3; }
.iw-ini-2 { grid-column-start: 3; } .iw-fin-2 { grid-column-end: 4; }
.iw-ini-3 { grid-column-start: 4; } .iw-fin-3 { grid-column-end: 5; }
.iw-ini-4 { grid-column-start: 5; } .iw-fin-4 { grid-column-end: 6; }
.iw-ini-5 { grid-column-start: 6; } .iw-fin-5 { grid-column-end: 7; }
.iw-ini-6 { grid-column-start: 7; } .iw-fin-6 { grid-column-end: 8; }
.iw-ini-7 { grid-column-start: 8; } .iw-fin-7 { grid-column-end: 9; }
.iw-ini-8 { grid-column-start: 9; } .iw-fin-8 { grid-column-end: 10; }
.iw-ini-9 { grid-column-start: 10; } .iw-fin-9 { grid-column-end: 11; }
.iw-ini-10 { grid-column-start: 11; } .iw-fin-10 { grid-column-end: 12; }
.iw-ini-11 { grid-column-start: 12; } .iw-fin-11 { grid-column-end: 13; }
.iw-ini-12 { grid-column-start: 13; } .iw-fin-12 { grid-column-end: 14; }
.iw-sec .iw-gantt-leyenda { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 12px 0 0; max-width: none; font-size: 14px; color: var(--texto-gris); }

.iw-sec .iw-formula { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 28px; max-width: none; }
.iw-formula > span:not([aria-hidden]) { padding: 10px 14px; border: 1px solid var(--gris-claro); font-size: 14px; }
.iw-formula b { display: block; font-size: 24px; font-weight: 400; color: var(--azul-oscuro); }
.iw-formula .iw-formula-total { background: var(--azul-oscuro); color: var(--blanco); border-color: var(--azul-oscuro); }
.iw-formula-total b { color: var(--verde); }
.iw-pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0 0 8px; padding: 0; list-style: none; counter-reset: paso; }
.iw-pasos li { counter-increment: paso; }
.iw-pasos h3::before { content: counter(paso, decimal-leading-zero) "  "; color: var(--magenta-titulo); }
.iw-pasos p { font-size: 15px; color: var(--texto-gris); }
.iw-normas dt { font-weight: 700; color: var(--azul-oscuro); margin-top: 12px; }
.iw-normas dd { margin: 2px 0 0; font-size: 15px; }

.iw-sec.iw-anexo { margin: 32px 0 0; padding: 48px 40px; background: var(--fondo-seccion); border-top: 4px solid var(--magenta-titulo); border-bottom: 0; }
.iw-declaracion { padding: 12px 16px; border-left: 3px solid var(--magenta-titulo); background: var(--blanco); font-size: 15px; }
.iw-sec .iw-capac li { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--gris-claro); max-width: none; }
.iw-capac p { font-size: 15px; }
.iw-ciclo { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin: 28px 0 12px; padding: 0; list-style: none; }
.iw-ciclo li { padding: 16px; background: var(--blanco); border-top: 3px solid var(--azul); font-size: 15px; }
.iw-ciclo b { display: block; margin-bottom: 4px; color: var(--azul-oscuro); }
.iw-respaldo { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin: 20px 0; }
.iw-respaldo b { display: block; font-size: 28px; font-weight: 400; color: var(--azul-oscuro); }
.iw-cita { margin: 28px 0 20px; padding: 28px 32px; background: var(--azul-oscuro); color: var(--blanco); }
.iw-cita-pregunta { font-size: 22px; color: var(--verde); }
.iw-cita a { color: var(--verde); }
.iw-fuentes span { white-space: normal; }
.iw-fuentes a { color: var(--texto-gris); overflow-wrap: anywhere; }
.satisfaccion-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 20px; margin-bottom: 24px; }
.bloque-satisfaccion label { display: block; font-weight: 600; font-size: 16px; }
.bloque-satisfaccion select { display: block; width: 100%; min-height: 44px; margin-top: 10px; padding: 8px; border: 1px solid #B8BFCC; background: var(--blanco); }
.bloque-satisfaccion textarea { display: block; width: 100%; margin: 10px 0 16px; padding: 12px; font: inherit; line-height: 1.5; border: 1px solid #B8BFCC; }

@media (max-width: 1100px) {
  .iw-cuerpo { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .iw-indice { position: static; max-height: none; padding: 24px 0 8px; border-bottom: 1px solid var(--gris-claro); }
  .iw-indice ol { display: flex; flex-wrap: wrap; gap: 6px; border-left: 0; }
  .iw-indice a { display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 4px 12px; border: 1px solid var(--gris-claro); }
  .iw-indice .iw-indice-anexo a { margin-top: 0; }
  .iw-con-lateral { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .iw-portada { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 36px; }
  .iw-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .iw-dos, .iw-tres, .iw-radar-capas, .iw-pasos, .iw-cifras { grid-template-columns: minmax(0, 1fr); }
  .iw-sec.iw-anexo { padding: 36px 20px; margin-left: -20px; margin-right: -20px; }
  .iw-sec .iw-capac li { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
@media (max-width: 700px) {
  .iw-tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .iw-tabla, .iw-tabla tbody, .iw-tabla tr, .iw-tabla th, .iw-tabla td { display: block; width: 100%; }
  .iw-tabla tr { padding: 10px 0; border-bottom: 1px solid var(--gris-claro); }
  .iw-tabla th, .iw-tabla td { padding: 4px 0; border: 0; }
  .iw-tabla td[data-rotulo]::before { content: attr(data-rotulo) ": "; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-gris); }
  .iw-gantt-scroll { overflow-x: auto; padding-bottom: 8px; }
  .iw-gantt { min-width: 720px; }

}
.bloque { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(32px, 6vw, 90px); padding: 56px 0; border-bottom: 1px solid var(--gris-claro); }
.bloque-intro h2 { font-size: clamp(22px, 2.2vw, 28px); }
.numero-seccion { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--magenta-titulo); }
.bloque-contenido > p { font-size: 17px; max-width: 760px; }
.subtitulo-barras { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--magenta-titulo); margin: 0 0 12px; }
.subtitulo-barras + .barras { margin-bottom: 30px; }
/* Radar del bloque 01 (pedido de la usuaria, 28-sep-2026): gráfico y valores exactos lado a lado. */
.panel-radar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-bottom: 36px; }
.radar { width: 100%; max-width: 720px; height: auto; display: block; margin: 0 auto; }
.radar-anillo { fill: none; stroke: #D6DEEF; stroke-width: 1; }
.radar-eje { stroke: #D6DEEF; stroke-width: 1; }
.radar-escala { font-size: 10px; fill: var(--texto-gris); font-family: var(--fuente); }
.radar-etiqueta { font-size: 11.5px; fill: var(--texto); font-family: var(--fuente); }
.radar-etiqueta.sin-nivel { fill: var(--texto-gris); font-style: italic; }
.radar-forma { fill: rgba(49, 101, 248, .14); stroke: var(--azul); stroke-width: 2.2; stroke-linejoin: round; }
.radar-linea { fill: none; stroke: var(--azul); stroke-width: 2.2; stroke-linecap: round; }
.radar-punto { fill: var(--azul); stroke: var(--blanco); stroke-width: 1.5; }
.barra { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, 2fr) 150px; gap: 16px; align-items: center; padding: 7px 0; }
.barra-nombre { font-size: 14px; }
.barra-pista { height: 12px; background: var(--gris-claro); }
.barra-relleno { display: block; height: 100%; background: var(--azul); }
.barra-valor { font-size: 14px; font-weight: 700; color: var(--azul); }
.barra-valor.sin-nivel { font-weight: 400; font-style: italic; color: var(--texto-gris); }
.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 1px; background: var(--gris-claro); border: 1px solid var(--gris-claro); }
.tarjeta { background: var(--blanco); padding: 24px; }
.tarjeta p { margin: 0; font-size: 15px; }
.tarjeta .tarjeta-numero { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--azul); margin-bottom: 12px; }
.linea-tiempo { position: relative; list-style: none; padding: 0; margin: 0; }
.linea-tiempo::before { content: ""; position: absolute; top: 24px; bottom: 24px; left: 25px; width: 2px; background: var(--gris-claro); }
.linea-tiempo li { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 20px; padding-bottom: 26px; }
.linea-tiempo li:last-child { padding-bottom: 0; }
.linea-tiempo .hito { z-index: 1; display: grid; place-items: center; width: 52px; height: 52px; background: var(--azul-oscuro); color: var(--blanco); font-weight: 700; font-size: 18px; }
.linea-tiempo p { margin: 12px 0 0; font-size: 16px; }
.linea-tiempo .fase-titulo { font-weight: 700; }
.linea-tiempo .nota { margin-top: 4px; font-size: 14px; }
/* v2 (29-sep-2026): bloques del motor. Estado y nivel en texto; sin colores por nivel. */
.veredicto-texto { font-size: clamp(20px, 2vw, 24px); font-weight: 700; line-height: 1.3; color: var(--azul-oscuro); margin: 0 0 20px; max-width: 760px; }
.condiciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 1px; background: var(--gris-claro); border: 1px solid var(--gris-claro); margin: 0 0 36px; }
.condicion { background: var(--blanco); padding: 18px; }
.condicion p { margin: 0; }
.condicion-nombre { font-weight: 700; font-size: 15px; }
.condicion-estado { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--magenta-titulo); margin: 6px 0 0; }
/* Narrativa fija del análisis del nivel (contexto, resultado global, capacidades de base), con los datos en negrita. */
.narrativa { margin: 0 0 32px; }
.narrativa p { font-size: 17px; max-width: 760px; margin: 0 0 16px; }
.narrativa p:last-child { margin-bottom: 0; }
/* Franja de tres cifras del núcleo (promedio, dominios con nivel, condiciones frágiles o ausentes), al estilo del
   informe ejecutivo de Ultra: la cifra grande sin color por nivel. */
.cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--gris-claro); border: 1px solid var(--gris-claro); margin: 0 0 36px; }
/* Lectura por capas de dependencia (criterio del consultor): capa, lo declarado con la rúbrica elegida, criterio. */
.tabla-capas { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 14px; }
.tabla-capas th, .tabla-capas td { text-align: left; vertical-align: top; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--gris-claro); }
.tabla-capas thead th { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--azul-oscuro); background: var(--tinte-azul); padding-left: 10px; }
.tabla-capas tbody th { width: 18%; font-weight: 700; }
.tabla-capas td.capa-criterio { width: 26%; color: var(--texto-gris); }
.capa-rango { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; color: var(--magenta-titulo); text-transform: uppercase; letter-spacing: .06em; }
.lista-dominios { list-style: none; margin: 0; padding: 0; }
.lista-dominios li { margin: 0 0 8px; }
.lista-dominios li:last-child { margin-bottom: 0; }
.techo { margin: 0 0 36px; padding: 14px 18px; border-left: 3px solid var(--azul-oscuro); background: var(--tinte-azul); max-width: 760px; }
.techo p { margin: 0; font-size: 15px; }
.techo .nota { margin-top: 6px; }
.cifra { background: var(--tinte-azul); padding: 18px 20px; }
.cifra p { margin: 0; }
.cifra-valor { font-size: clamp(28px, 3vw, 36px); font-weight: 700; line-height: 1.1; color: var(--azul); }
.cifra-rotulo { margin-top: 6px !important; font-size: 13px; color: var(--texto-gris); }
.cifra-sin { font-size: clamp(20px, 2vw, 24px); color: var(--texto-gris); }
.lectura { margin: 0 0 36px; }
.veredicto .nota { margin: 0 0 16px; }
.lectura p { max-width: 760px; font-size: 16px; }
.relato-cita { margin: 12px 0; padding: 12px 18px; border-left: 3px solid var(--azul); background: var(--tinte-azul); max-width: 760px; }
.relato-cita p { margin: 0; font-size: 15px; font-style: italic; white-space: pre-line; }   /* varias respuestas de un dominio, una por párrafo */
.relato-cita cite { display: block; margin-top: 6px; font-style: normal; font-size: 12px; color: var(--texto-gris); }
.plan-motor { margin-top: 32px; }
.plan-motor .linea-tiempo { margin-top: 12px; }
.nota-metodo { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(32px, 6vw, 90px); margin: 56px 0 0; padding: 34px; background: var(--fondo-oscuro); color: #D9E2EC; }
.nota-metodo h2 { color: var(--blanco); font-size: 24px; }
.nota-metodo .numero-seccion { color: var(--verde); }
.nota-metodo p { font-size: 14px; }
.vista-informe .observaciones { margin: 32px 0 0; }
.informe-acciones { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding: 32px max(20px, calc((100vw - var(--ancho)) / 2)) 48px; }
@media (max-width: 900px) {
  .informe-portada { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .bloque, .nota-metodo { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 40px; padding-bottom: 40px; }
  .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .barra { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
  .barra-pista { grid-column: 1 / -1; grid-row: 2; }
  .etapas-generacion li { grid-template-columns: 38px minmax(0, 1fr) 16px; }
}
@media (max-width: 700px) {
  .tabla-capas thead { display: none; }
  .tabla-capas, .tabla-capas tbody, .tabla-capas tr, .tabla-capas th, .tabla-capas td { display: block; width: auto; }
  .tabla-capas tbody th { width: auto; padding-bottom: 6px; border-bottom: 0; }
  .tabla-capas td { padding-top: 0; border-bottom: 0; }
  .tabla-capas td.capa-criterio { width: auto; padding-bottom: 16px; border-bottom: 1px solid var(--gris-claro); }
}
@media (max-width: 560px) {
  .cifras { grid-template-columns: minmax(0, 1fr); }
}

/* ── Portada, opción B «moderna e ilustrativa» (usuaria, 5-oct-2026): azul de marca con un degradado de magenta
   y verde a la derecha, ilustración decorativa del producto y tres tarjetas blancas con icono. A diferencia del
   resto de la app, la portada lleva esquinas redondeadas, como la maqueta elegida. ── */
.boton-claro { background: var(--blanco); color: var(--azul-oscuro); border-color: var(--blanco); }
.boton-claro:hover { background: var(--verde); border-color: var(--verde); color: var(--fondo-oscuro); }
body:has(#vista-entrada:not([hidden])) { background: var(--fondo-seccion); }
.vista-inicio {
  padding: 48px max(16px, calc((100vw - var(--ancho)) / 2)) 40px; color: var(--blanco);
  background:
    radial-gradient(55% 70% at 100% 10%, rgba(206, 90, 202, .55), transparent 70%),
    radial-gradient(45% 60% at 95% 85%, rgba(152, 244, 182, .45), transparent 70%),
    linear-gradient(180deg, var(--azul) 0, var(--azul) 72%, var(--fondo-seccion) 72%);
}
.inicio-heroe { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; align-items: center; }
/* Sobre el azul, el magenta y el verde de marca no llegan al contraste de texto pequeño: rótulos en blanco. */
.inicio-etiqueta { color: var(--blanco); letter-spacing: .12em; }
.inicio-principal h1 { color: var(--blanco); font-size: clamp(32px, 4.2vw, 54px); line-height: 1.1; margin: 10px 0 18px; }
.inicio-lema { font-size: 19px; color: #F2F5FF; max-width: 600px; }
/* Pasos: panel translúcido con tres columnas, número en círculo, título y una línea de explicación. */
.inicio-pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; padding: 0; margin: 26px 0 28px; max-width: 600px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); border-radius: 14px; backdrop-filter: blur(6px); }
.inicio-pasos li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; min-width: 0; }
.inicio-pasos li + li { border-left: 1px solid rgba(255, 255, 255, .22); }
.paso-numero { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--blanco); color: var(--azul); font-size: 15px; font-weight: 700; box-shadow: 0 4px 10px rgba(4, 23, 43, .2); }
.paso-texto { display: flex; flex-direction: column; min-width: 0; font-size: 13px; line-height: 1.35; color: #E6ECFF; }
.paso-texto strong { font-size: 15px; color: var(--blanco); }
.inicio-garantias { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: -6px 0 22px; }
.inicio-garantias li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 16px 6px 11px; border-radius: 999px; background: rgba(152, 244, 182, .16); border: 1px solid rgba(152, 244, 182, .6); color: var(--blanco); font-size: 15px; font-weight: 700; letter-spacing: .02em; }
.inicio-garantias svg { flex: none; color: var(--verde); }
.inicio-accion { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.boton-inicio { background: var(--verde); border-color: var(--verde); color: var(--fondo-oscuro); border-radius: 10px; padding: 12px 28px; min-height: 50px; box-shadow: 0 10px 24px rgba(4, 23, 43, .25); }
.boton-inicio:hover { background: var(--blanco); border-color: var(--blanco); color: var(--azul-oscuro); }
.boton-inicio:focus-visible { outline-color: var(--blanco); }
.inicio-dato { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; color: var(--blanco); }

/* Ilustración: capturas reales (página 4 del informe en un portátil, portada del PDF detrás, resultado en un
   celular) y una ficha con tres niveles del mismo informe. */
.vista-inicio { overflow-x: clip; }
.inicio-ilustracion { position: relative; margin: 0; padding: 40px 0 56px; }
.ilu-portatil { position: relative; z-index: 1; width: 90%; margin: 0 auto; filter: drop-shadow(0 30px 40px rgba(4, 23, 43, .35)); }
.ilu-pantalla { position: relative; background: #0B1220; border: 1px solid #2A3550; border-radius: 16px 16px 4px 4px; padding: 18px 14px 14px; }
.ilu-camara { position: absolute; top: 7px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #3A4560; }
.ilu-pantalla img { display: block; width: 100%; height: auto; border-radius: 3px; background: var(--blanco); }
.ilu-base { position: relative; height: 16px; margin: 0 -6%; background: linear-gradient(180deg, #E9ECF2, #AEB6C4); border-radius: 0 0 18px 18px; }
.ilu-base::before { content: ""; position: absolute; left: 42%; top: 0; width: 16%; height: 6px; background: #C3C9D4; border-radius: 0 0 8px 8px; }
.ilu-hoja { position: absolute; z-index: 0; right: -2%; top: 0; width: 28%; transform: rotate(7deg); background: var(--blanco); border-radius: 4px; box-shadow: 0 24px 44px rgba(4, 23, 43, .42); }
.ilu-hoja img { display: block; width: 100%; height: auto; border-radius: 4px; }
.ilu-sello { position: absolute; right: -10px; top: -10px; padding: 6px 9px; border-radius: 6px; background: #D92D20; color: var(--blanco); font-size: 12px; font-weight: 700; letter-spacing: .04em; box-shadow: 0 6px 14px rgba(0, 0, 0, .25); }
/* Anclada desde abajo: con `top: 53%` la ficha (de alto fijo) tapaba la leyenda entre 900 y 1200 px de ancho.
   48 px dejan sitio a la leyenda aunque ocupe dos líneas (columna angosta, ~920 px). */
.ilu-niveles { position: absolute; z-index: 2; left: -5%; bottom: 48px; display: grid; gap: 10px; padding: 14px 18px 14px 14px; background: var(--blanco); border-radius: 16px; box-shadow: 0 22px 44px rgba(4, 23, 43, .35); }
.ilu-nivel { display: flex; align-items: center; gap: 12px; }
.ilu-nivel svg { flex: none; }
.ilu-nivel text { font: 700 12.5px var(--fuente); fill: var(--azul-oscuro); }
.ilu-nivel p { margin: 0; display: flex; flex-direction: column; line-height: 1.25; }
.ilu-nivel span { font-size: 12px; color: var(--texto-gris); white-space: nowrap; }
.ilu-nivel b { font-size: 15px; color: var(--texto); }
.ilu-celular { position: absolute; z-index: 3; right: -4%; bottom: 18px; width: 25%; padding: 6px; background: #0B1220; border: 1px solid #3A4560; border-radius: 26px; box-shadow: 0 26px 46px rgba(4, 23, 43, .45), inset 0 0 0 2px #1C263D; }
.ilu-celular img { display: block; width: 100%; height: auto; aspect-ratio: 390 / 780; object-fit: cover; object-position: top; border-radius: 20px; background: var(--blanco); }
.ilu-isla { position: absolute; top: 11px; left: 50%; width: 30%; height: 9px; margin-left: -15%; border-radius: 6px; background: #0B1220; z-index: 1; }
.ilu-nota { position: absolute; left: 0; bottom: 0; margin: 0; font-size: 12px; color: var(--blanco); opacity: .9; }

/* Tarjetas: montan sobre el borde del azul. */
.inicio-tarjetas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 44px; }
.inicio-tarjeta { background: var(--blanco); color: var(--texto); border-radius: 16px; padding: 26px 26px 24px; box-shadow: 0 18px 40px rgba(6, 24, 58, .16); }
.inicio-icono { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 16px; margin-bottom: 16px;
  background: linear-gradient(140deg, #3165F8 0%, #1F3FB8 55%, #06183A 100%);
  box-shadow: 0 10px 22px rgba(49, 101, 248, .35), inset 0 1px 0 rgba(255, 255, 255, .25); }
.inicio-tarjeta h2 { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--magenta-titulo); margin-bottom: 8px; }
.inicio-tarjeta p { margin: 0; font-size: 15px; color: var(--gris); }
.inicio-aviso { margin: 22px 0 0; font-size: 13px; color: var(--texto-gris); }
/* Paso 1: el formulario solo, en una tarjeta blanca sobre el azul. */
.vista-azul { background: var(--azul); padding: 48px 16px 72px; min-height: calc(100vh - 120px); }
.vista-azul .panel { box-shadow: 0 24px 56px rgba(6, 24, 58, .35); border: 0; }
.vista-azul .panel-registro { margin: 0 auto; width: min(880px, 100%); padding: 32px 36px 36px; }
.vista-azul .panel-registro h1 { font-size: 30px; color: var(--azul); margin: 4px 0 6px; }
.volver-inicio { margin: 0 0 14px; padding: 0; font-size: 14px; }
@media (max-width: 900px) {
  .inicio-heroe { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .vista-inicio { background:
    radial-gradient(70% 40% at 100% 45%, rgba(206, 90, 202, .5), transparent 70%),
    linear-gradient(180deg, var(--azul) 0, var(--azul) 78%, var(--fondo-seccion) 78%); }
  .inicio-ilustracion { max-width: 560px; width: 100%; margin: 0 auto; }
  .inicio-tarjetas { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 32px; }
}
@media (max-width: 560px) {
  .inicio-pasos { grid-template-columns: minmax(0, 1fr); }
  .inicio-pasos li { padding: 12px 14px; }
  .inicio-pasos li + li { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .22); }
  .inicio-ilustracion { padding: 28px 0 0; }
  .ilu-nota { position: static; margin-top: 18px; }
  .ilu-portatil { width: 100%; }
  .ilu-hoja { width: 30%; right: 0; }
  .ilu-niveles { left: 0; top: auto; bottom: 64px; padding: 10px 12px 10px 10px; gap: 6px; }
  .ilu-nivel svg { width: 34px; height: 34px; }
  .ilu-nivel b { font-size: 13px; }
  .ilu-celular { width: 30%; right: 0; bottom: 60px; border-radius: 20px; padding: 4px; }
  .ilu-celular img { border-radius: 16px; }
}

/* Chat del informe */
.chat-turnos { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 20px; }
.chat-turno { padding: 20px 22px; background: var(--fondo-seccion); border-left: 4px solid var(--azul); }
.chat-pregunta { margin: 0 0 8px; font-weight: 700; }
.chat-respuesta { margin: 0 0 10px; font-size: 17px; max-width: 760px; }
/* Párrafos y listas de la respuesta (14-oct-2026). */
.chat-respuesta p { margin: 0 0 10px; }
.chat-respuesta ul { margin: 0 0 10px; padding-left: 22px; list-style: disc; }
.chat-respuesta li { margin: 0 0 6px; line-height: 1.5; }
.chat-respuesta li::marker { color: var(--azul); }
.chat-respuesta > :last-child { margin-bottom: 0; }
.chat-procedencia, .chat-apoyo { margin: 0; font-size: 13px; color: var(--texto-gris); }
.chat-rechazada, .chat-error, .chat-sin_llamada { border-left-color: var(--magenta-titulo); }
.chat-formulario { display: grid; gap: 8px; max-width: 760px; }
.chat-etiqueta { font-size: 14px; font-weight: 700; }
.chat-formulario textarea { width: 100%; min-height: 84px; padding: 10px; border: 1px solid #B8BFCC; border-radius: 0; font: inherit; resize: vertical; }
.chat-formulario textarea:focus { border-color: var(--azul); outline: 2px solid var(--azul); outline-offset: 0; }
.chat-pie { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
@media (max-width: 720px) { .chat-turno { padding: 16px; } }

/* Pregunta abierta por dominio */
.relato { display: grid; gap: 8px; margin-top: 12px; }
.relato textarea { width: 100%; min-height: 120px; padding: 10px; border: 1px solid #B8BFCC; border-radius: 0; font: inherit; resize: vertical; }
.relato textarea:focus { border-color: var(--azul); outline: 2px solid var(--azul); outline-offset: 0; }
.relato .nota.invalido { color: var(--error); }
.relato { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--gris-claro); }
.relato-etiqueta { margin: 0; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--magenta-titulo); }
.relato-pregunta { margin: 0; font-weight: 700; font-size: 17px; }
/* Riel con los números de las preguntas y la explicación del tema (usuaria, 28-sep-2026) */
.numeros-preguntas ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.numeros-preguntas button { width: 100%; aspect-ratio: 1; border: 1px solid #DDE2EB; border-radius: 0; background: var(--blanco); color: var(--texto-gris); font: inherit; font-size: 12px; cursor: pointer; padding: 0; transition: background-color .12s, border-color .12s; }
.numeros-preguntas button:hover { border-color: var(--azul); color: var(--azul); }
.numeros-preguntas button.hecha { background: var(--tinte-azul); border-color: #B9C8F5; color: var(--azul); }
.numeros-preguntas button[aria-current="step"] { background: var(--azul); border-color: var(--azul); color: var(--blanco); font-weight: 700; }
.explicacion { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--gris-claro); }
.explicacion-rotulo { margin: 0 0 4px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--magenta-titulo); }
.explicacion h2 { margin: 0 0 6px; font-size: 15px; color: var(--azul-oscuro); }
.explicacion p { margin: 0; font-size: 13.5px; color: var(--texto-gris); line-height: 1.55; }
.explicacion .explicacion-orientacion { margin-top: 12px; color: var(--texto); }
.riel .instruccion { margin: 14px 0 0; font-size: 12.5px; }
.titulo-pregunta { margin-bottom: 20px; }

/* ── Rediseño de la primera parte con el lenguaje del prototipo «Autodiagnóstico Datos e IA» (usuaria, 14-oct-2026:
   «el resultado sí el de nosotros»). Solo registro, código, preguntas y la portada en celular; el informe no cambia.
   Tarjetas redondeadas, botones en píldora, títulos en Chivo 800, opciones como tarjetas con letra y anillo de
   avance. Sin estilos en línea (política de seguridad): todo por clases. ── */
.vista-azul .panel { border-radius: 24px; }
.vista-azul .boton, .vista-preguntas .boton { border-radius: 999px; min-height: 52px; padding: 12px 32px; }
.vista-azul .panel-registro { padding: 40px 44px 36px; }
.vista-azul .panel-registro h1, #vista-codigo h1 { font-weight: 800; color: var(--texto); font-size: clamp(28px, 3vw, 38px); letter-spacing: -.01em; line-height: 1.12; margin: 6px 0 10px; }
#vista-codigo .titulo-guion::before { content: none; }
.vista-azul .panel-ayuda { font-size: 16px; color: #4A5070; margin-bottom: 22px; }
.vista-azul .campos { gap: 18px 22px; }
.vista-azul .campo label { font-size: 14px; font-weight: 700; color: var(--texto); }
.vista-azul .campo input, .vista-azul .campo select { min-height: 52px; padding: 12px 16px; border: 1px solid #D5DAE8; border-radius: 14px; font-size: 16px; }
.vista-azul .campo input:focus, .vista-azul .campo select:focus { outline: 2px solid var(--azul); outline-offset: 1px; border-color: var(--azul); }
.vista-azul .entrada-codigo { font-size: 26px; }
.grupo-chips { border: 0; margin: 22px 0 0; padding: 0; min-width: 0; }
.grupo-chips legend { padding: 0; margin: 0 0 10px; font-size: 14px; font-weight: 700; color: var(--texto); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip label { display: inline-flex; align-items: center; min-height: 44px; padding: 9px 18px; border: 1px solid #D5DAE8; border-radius: 999px; background: var(--blanco); font-size: 15px; cursor: pointer; transition: border-color .12s, background-color .12s; }
.chip label:hover { border-color: var(--azul); }
.chip input:checked + label { background: var(--azul); border-color: var(--azul); color: var(--blanco); }
.chip input:focus-visible + label { outline: 3px solid var(--magenta); outline-offset: 2px; }
.chip input[aria-invalid="true"] + label { border-color: var(--error); }
.vista-azul .consentimiento { margin-top: 24px; padding-top: 20px; border-top: 1px solid #E6E9F2; font-size: 13.5px; line-height: 1.5; color: #4A5070; }
.vista-azul .consentimiento input { width: 20px; height: 20px; }
.registro-acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 24px; padding-top: 20px; border-top: 1px solid #E6E9F2; }
.registro-acciones .volver-inicio { margin: 0; font-size: 15px; }

/* Preguntas: fondo claro, columna de avance blanca y la pregunta como protagonista. */
body:has(#vista-preguntas:not([hidden])) { background: #F4F6FB; }
.vista-preguntas { grid-template-columns: 280px minmax(0, 1fr); gap: 48px; padding-top: 36px; padding-bottom: 56px; }
.vista-preguntas .riel { background: var(--blanco); border: 0; border-radius: 20px; box-shadow: 0 1px 3px rgba(7, 13, 45, .06); }
/* El paso en que va ya lo dice el anillo de arriba: la columna conserva la barra, lo respondido y los números. */
.vista-preguntas .progreso-texto { display: none; }
.vista-preguntas .numeros-preguntas button { border-radius: 8px; }
.pregunta-barra { display: flex; align-items: center; gap: 16px; margin: 0 0 26px; }
.boton-volver { flex: none; display: grid; place-items: center; width: 72px; height: 48px; border: 2px solid var(--texto); border-radius: 999px; background: transparent; color: var(--texto); cursor: pointer; }
.boton-volver:hover { background: var(--blanco); }
.boton-volver:disabled { opacity: .3; cursor: not-allowed; }
.anillo { --avance: 0%; position: relative; flex: none; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: conic-gradient(var(--azul) var(--avance), #DDE3F0 0); }
.anillo::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #F4F6FB; }
.anillo span { position: relative; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--texto); }
.escenario .pregunta-barra .etiqueta { margin: 0; font-size: 13px; letter-spacing: .1em; line-height: 1.4; }
/* El título es la pregunta completa del instrumento (sin titular corto, usuaria 14-oct-2026): más chica que un
   titular porque ocupa varias líneas. */
.vista-preguntas .titulo-pregunta { font-weight: 600; color: var(--texto); font-size: clamp(20px, 1.7vw, 24px); line-height: 1.4; max-width: 40em; margin: 0 0 22px; }
/* El foco llega al título por programa, para los lectores de pantalla: sin marco, como el título del informe. */
.vista-preguntas .titulo-pregunta:focus { outline: none; }
.vista-preguntas .opciones { gap: 12px; }
.opciones .opcion-nivel label { grid-template-columns: 40px minmax(0, 1fr); gap: 18px; align-items: center; padding: 16px 22px; border: 2px solid transparent; border-radius: 16px; background: var(--blanco); box-shadow: 0 1px 2px rgba(7, 13, 45, .06); }
.opciones .opcion-nivel label:hover { border-color: #B9C8F5; }
.opcion-letra { display: grid; place-items: center; width: 40px; height: 40px; border: 2px solid var(--texto); border-radius: 50%; font-size: 15px; font-weight: 700; color: var(--texto); }
.opciones .opcion-nivel .opcion-texto { font-size: 16px; line-height: 1.5; }
.opciones .opcion input:checked + label { border-color: var(--azul); background: #EAF1FF; box-shadow: none; }
.opciones .opcion input:checked + label .opcion-letra { background: var(--azul); border-color: var(--azul); color: var(--blanco); }
.opciones .opcion input:focus-visible + label { outline: 3px solid var(--magenta); outline-offset: 2px; }
.vista-preguntas .separador-opciones { margin: 14px 0 0; font-size: 14px; letter-spacing: 0; text-transform: none; color: #4A5070; }
.opciones-especiales { display: flex; flex-wrap: wrap; gap: 10px; }
.opciones-especiales .opcion { flex: 1 1 260px; }
.opciones .opcion-especial label { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 12px 18px; border: 1px dashed #B8BFCC; border-radius: 14px; background: transparent; }
.opciones .opcion-especial label strong { color: var(--texto); font-size: 15px; }
.opciones .opcion-especial label span { font-size: 13.5px; color: #4A5070; }
.opciones .opcion-especial input:checked + label { border-style: solid; }
.vista-preguntas .relato { margin-top: 4px; padding-top: 0; border-top: 0; }
.vista-preguntas .relato textarea { padding: 14px 16px; border: 1px solid #D5DAE8; border-radius: 16px; background: var(--blanco); font-size: 16px; }
.vista-preguntas .relato textarea:focus { outline: 2px solid var(--azul); outline-offset: 1px; border-color: var(--azul); }
.acciones-pregunta { justify-content: space-between; margin-top: 26px; }
.acciones-pregunta .boton { margin-left: auto; }
@media (max-width: 900px) {
  /* En el celular la pregunta va primero; los números y la explicación del tema, debajo. */
  .vista-preguntas { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 22px; }
  .vista-preguntas .escenario { order: -1; }
  .vista-preguntas .titulo-pregunta { font-size: 20px; margin-bottom: 20px; }
  .pregunta-barra { gap: 12px; margin-bottom: 18px; }
  .boton-volver { width: 56px; height: 44px; }
  .anillo { width: 52px; height: 52px; }
  .anillo span { font-size: 12px; }
  .escenario .pregunta-barra .etiqueta { font-size: 12px; letter-spacing: .06em; }
  .opciones .opcion-nivel label { grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding: 14px 16px; }
  .opcion-letra { width: 34px; height: 34px; font-size: 14px; }
  .opciones .opcion-nivel .opcion-texto { font-size: 15.5px; }
  .vista-azul { padding: 24px 12px 48px; }
  .vista-azul .panel-registro { padding: 28px 20px 24px; border-radius: 20px; }
  .registro-acciones { flex-direction: column-reverse; align-items: stretch; }
  .registro-acciones .boton { width: 100%; }
}
@media (max-width: 560px) {
  /* Portada en el celular: «Comenzar» justo debajo del lema (D-21); los tres pasos, después. */
  .inicio-principal { display: flex; flex-direction: column; }
  .inicio-pasos { order: 1; margin: 22px 0 0; }
  .inicio-garantias { margin-top: 0; }
}

/* Encuesta independiente del informe. */
.encuesta-pagina { max-width: 1040px; margin: 0 auto; padding: 40px 24px; }
.encuesta-pagina .bloque { padding-left: 0; padding-right: 0; }
.encuesta-pagina #encuesta-acceso { grid-column: 2; }
.encuesta-volver { margin-top: 24px; }
@media (max-width: 900px) { .encuesta-pagina #encuesta-acceso { grid-column: 1; } }

.encuesta-pagina #titulo-satisfaccion { font-size: clamp(24px, 2.6vw, 32px); }