/* ============================================================================
   HERÉDITAS UNIVERSE · hoja de estilos única
   ----------------------------------------------------------------------------
   Fuente de verdad: /marca.md (raíz del repositorio).
   Los valores de color, tipografía y accesibilidad de este archivo se derivan
   de ese manual. Si hay discrepancia, manda marca.md.

   Este archivo lo usan todos los documentos de /docs. Un cambio aquí se aplica
   en todos a la vez: esa es su razón de existir. Antes vivía copiado en cada
   archivo y las nueve copias se habían ido separando entre sí.

   Regente de marca: Marce. Los componentes se proponen, no se deciden aquí.
   ============================================================================ */

@import url('fuentes.css'); /* 14-oct-2026: tipografías alojadas en assets/marca/fuentes/, ya no en Google Fonts */

/* ----------------------------------------------------------------------------
   1 · TOKENS
   Único lugar donde se escriben los valores de marca. Todo lo demás los usa.
   ---------------------------------------------------------------------------- */
:root{
  /* Anclas de marca */
  --hu-fondo:            #010914;   /* Azul Profundo del Universo */
  --hu-superficie:       #0B1B33;   /* Azul Nebulosa · tarjetas y paneles */
  --hu-texto:            #F4F2ED;   /* Blanco Estelar */
  --hu-texto-2:          #9AA3B0;   /* Gris Lunar · secundario */
  --hu-marca:            #E0A53D;   /* Dorado Estelar · LA MARCA */
  --hu-brillo:           #F7D88C;   /* Polvo Dorado · destellos */

  /* El Sol — el Legado. NO es el dorado de marca. */
  --hu-sol:              #F5C518;
  --hu-sol-luz:          #FFE566;
  --hu-sol-sombra:       #C9960A;   /* solo ilustración, nunca texto */

  /* Los planetas — fases del viaje */
  --hu-tranquilidad:     #E8E4DC;
  --hu-tranquilidad-luz: #F8F5EE;
  --hu-certeza:          #3A7BD5;
  --hu-certeza-luz:      #6FA3E8;
  --hu-permanencia:      #4CAF82;
  --hu-permanencia-luz:  #7DCFAA;

  /* LuzIA — la llama. Tercer dorado, solo para la llama. */
  --hu-luzia:            #F5A623;
  --hu-luzia-pico:       #FFF0CC;
  --hu-luzia-transicion: #E8732A;

  /* Semáforo del diagnóstico */
  --hu-favorable:        #2ECC8A;
  --hu-media:            #F5C518;
  --hu-prioritaria:      #EF7E7E;

  /* Líneas y veladuras derivadas */
  --hu-linea:            rgba(244,242,237,.14);
  --hu-linea-sutil:      rgba(244,242,237,.07);
  --hu-velo:             rgba(244,242,237,.035);

  /* Tipografía */
  --hu-titulo:  'Cormorant Garamond', Georgia, serif;
  --hu-cuerpo:  'Atkinson Hyperlegible', system-ui, sans-serif;

  /* Medidas */
  --hu-ancho:   1020px;
  --hu-radio:   14px;
}

/* ----------------------------------------------------------------------------
   2 · BASE
   marca.md: modo oscuro nativo — no es preferencia, es identidad.
   Cuerpo mínimo 16px, interlineado 1.5×.
   ---------------------------------------------------------------------------- */
*{ box-sizing:border-box }

body{
  margin:0;
  background:var(--hu-fondo);
  color:var(--hu-texto);
  font-family:var(--hu-cuerpo);
  font-size:17px;
  line-height:1.55;
}

.wrap{ max-width:var(--hu-ancho); margin:0 auto; padding:38px 22px 80px }

/* Enlaces. Sin esta regla el navegador los pinta en azul de sistema, que no
   está en la paleta y no pasa contraste sobre Azul Profundo. */
a{ color:var(--hu-marca) }
a:hover{ color:var(--hu-brillo) }

/* Foco de teclado. El manual no norma el foco; se resuelve con Polvo Dorado,
   que ya es el color de micro-interacción. Pendiente de visto bueno de Marce. */
:focus-visible{ outline:2px solid var(--hu-brillo); outline-offset:2px }

/* ----------------------------------------------------------------------------
   3 · TIPOGRAFÍA
   Mayúsculas solo en etiquetas de sistema, nunca en la voz de LuzIA.
   ---------------------------------------------------------------------------- */
h1{ font-family:var(--hu-titulo); font-size:44px; font-weight:600; margin:14px 0 6px; line-height:1.1 }
h2{ font-family:var(--hu-titulo); font-size:31px; font-weight:600; margin:0 0 10px }
h3{ font-size:19px; font-weight:700; margin:0 0 8px }

.marca{ letter-spacing:.4em; font-size:12px; color:var(--hu-marca) }
.sub{ color:var(--hu-texto-2); font-size:16px }
.meta{ color:var(--hu-texto-2); font-size:14px; margin-top:12px }

.kicker{
  color:var(--hu-marca); letter-spacing:.18em; font-size:12.5px;
  text-transform:uppercase; margin-bottom:8px;
}

.et{
  font-size:12px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--hu-marca); margin-bottom:7px;
}

/* ----------------------------------------------------------------------------
   4 · ESTRUCTURA
   ---------------------------------------------------------------------------- */
section{ margin:52px 0 }

img.logo, .logo{ max-width:260px; width:60%; display:block; margin-bottom:18px }

svg{ width:100%; height:auto; display:block }

ul.plain{ margin:0; padding-left:20px }
ul.plain li{ margin:7px 0 }

/* ----------------------------------------------------------------------------
   5 · COMPONENTES
   ---------------------------------------------------------------------------- */

/* Panel — superficie de contenido agrupado */
.panel{ background:var(--hu-superficie); border-radius:var(--hu-radio); padding:24px 28px }

/* Nota — apunte al margen, voz secundaria */
.nota{
  border:1px dashed var(--hu-texto-2); border-radius:12px;
  padding:18px 22px; margin:22px 0;
  color:var(--hu-texto-2); font-size:15px;
}
.nota b{ color:var(--hu-texto) }

/* Cita — palabra textual de una persona */
.cita{
  border-left:3px solid var(--hu-marca); padding:4px 0 4px 18px; margin:16px 0;
  color:var(--hu-texto); font-family:var(--hu-titulo);
  font-size:21px; line-height:1.45;
}
.cita span{
  display:block; font-family:var(--hu-cuerpo); font-size:13.5px;
  color:var(--hu-texto-2); margin-top:8px;
}

/* Tabla de datos */
table{ width:100%; border-collapse:collapse; margin-top:14px; font-size:15.5px }
th{
  text-align:left; color:var(--hu-marca); font-size:12.5px; letter-spacing:.14em;
  text-transform:uppercase; font-weight:700;
  padding:0 12px 10px 0; border-bottom:1px solid var(--hu-linea);
}
td{ padding:13px 12px 13px 0; border-bottom:1px solid var(--hu-linea-sutil); vertical-align:top }

/* Píldora — etiqueta de estado compacta */
.pill{
  display:inline-block; font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  font-weight:700; padding:3px 10px; border-radius:999px;
}

/* HEREDADAS · en uso en docs/tablero-pendientes.html y docs/prueba-ponderacion-v6.html.
   No usar en obra nueva y no confundirlas con el indicador de desafío del §7:
   en tablero-pendientes .p-alta significa «Cerrado» y .p-baja «Abierto», es
   decir lo contrario de la dirección del diagnóstico. Retirar cuando esos dos
   documentos se reescriban. */
.p-alta{  background:rgba(46,204,138,.16); color:var(--hu-favorable) }
.p-media{ background:rgba(245,197,24,.16); color:var(--hu-media) }
.p-baja{  background:rgba(239,126,126,.16); color:var(--hu-prioritaria) }
.p-si{    background:rgba(224,165,61,.20); color:var(--hu-brillo) }

/* Pie de documento */
.firma{
  color:var(--hu-texto-2); font-size:14px;
  border-top:1px solid rgba(244,242,237,.12);
  padding-top:20px; margin-top:56px; line-height:1.7;
}
.pie{
  text-align:center; color:var(--hu-texto-2);
  font-size:12.5px; letter-spacing:.15em; margin-top:40px;
}

/* ----------------------------------------------------------------------------
   6 · TELÉFONO
   ---------------------------------------------------------------------------- */
@media (max-width:720px){
  h1{ font-size:34px }
  h2{ font-size:26px }
  .wrap{ padding:24px 16px 60px }
  table{ font-size:14px }
}

/* ============================================================================
   7 · KIT DE COMPONENTES · PROPUESTA PARA REVISIÓN DE MARCE
   ----------------------------------------------------------------------------
   Ocho componentes para tres contextos: documentos de decisión de socios,
   dashboard de resultados de la familia, y pantallas del cuestionario.

   Sin librerías externas. Sin JavaScript. Todo texto ≥14px.
   Prefijo hu- para no colisionar con lo heredado del §5.

   Las bandas del desafío (17.0–20.0 · 13.0–16.9 · 4.0–12.9 del modelo V7)
   NO están cableadas aquí: el motor calcula la banda y la escribe en el
   atributo data-nivel. Cambiar los umbrales no toca esta hoja.
   Los umbrales están pendientes de aprobación de socios.
   ============================================================================ */

/* --- 7.0 · Hueco de icono ---------------------------------------------------
   El kit define el hueco y su comportamiento, no dibuja los iconos.
   Los diez SVG los produce un diseñador externo y viven en
   assets/marca/iconos/ : legado · familia · sucesores · empresa · patrimonio ·
   gobernanza · tranquilidad · certeza · permanencia · informacion.
   Cada SVG debe usar stroke="currentColor" fill="none" y no traer color propio:
   hereda del contenedor, que es quien conoce el nivel o el planeta.
   Mientras no existan, el hueco se ve como una órbita vacía — nunca como error. */
.hu-icono{
  flex:none; display:grid; place-items:center;
  width:46px; height:46px; border-radius:50%;
  border:1px solid rgba(247,216,140,.30);
  color:inherit;
}
.hu-icono > svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.5 }
.hu-icono--pie{ width:30px; height:30px; border-color:var(--hu-linea-sutil) }
.hu-icono--pie > svg{ width:17px; height:17px }

/* --- 7.1 · Indicador de nivel de desafío -----------------------------------
   Una sola dirección: mejor puntaje = menor desafío.
   data-nivel lo escribe el motor con la banda de V7: bajo | medio | alto.

   DOS VOCES, NUNCA JUNTAS:
   data-voz="familia" → Consolidado · En desarrollo · Desafío alto
                        (léxico de la base. «Punto de partida» quedó atrás:
                        la sesión de socios del 10-sep-2026 lo cambió a
                        «Desafío alto». Karina: «me gusta la palabra desafío
                        porque no significa que sea un problema». Eso deroga
                        la prohibición de «alto/bajo» que marca.md fija para
                        la voz de la familia; el manual está por actualizar.)
   data-voz="interna" → puntaje /20 + Desafío bajo/medio/alto (léxico de V7)

   La palabra la genera esta hoja, no el HTML. Así el léxico no puede
   desviarse documento por documento: para cambiarlo hay que cambiar la marca.

   data-escala="neutra" quita el color y deja una escala de intensidad de un
   solo trazo, para documentos de socios y para impresión. */
.hu-nivel{
  display:inline-flex; align-items:center; gap:10px;
  font-size:15px; line-height:1.3; white-space:nowrap;
}
.hu-nivel__marca{
  flex:none; width:14px; height:14px; border-radius:50%;
  background:currentColor;
}
.hu-nivel__txt{ font-weight:700 }
.hu-nivel__pt{ font-weight:700; font-variant-numeric:tabular-nums }
.hu-nivel__esc{ color:var(--hu-texto-2); font-size:14px }
.hu-nivel__txt::after{ content:"—" }

/* Voz de la familia · léxico del manual */
.hu-nivel[data-voz="familia"][data-nivel="bajo"]  .hu-nivel__txt::after{ content:"Consolidado" }
.hu-nivel[data-voz="familia"][data-nivel="medio"] .hu-nivel__txt::after{ content:"En desarrollo" }
/* OJO con el sentido de la palabra: aquí data-nivel="alto" es el nivel de DESAFÍO
   —lo peor—, mientras la base llama a lo mismo level_low, por el puntaje bajo.
   Son sentidos opuestos de «alto» y «bajo» sobre la misma realidad. Desde que la
   etiqueta de la familia dice «Desafío alto», esta trampa está activa: la palabra
   «alto» que lee la familia la gobierna una clave llamada low. */
.hu-nivel[data-voz="familia"][data-nivel="alto"]  .hu-nivel__txt::after{ content:"Desafío alto" }
/* El puntaje no se muestra a la familia */
.hu-nivel[data-voz="familia"] .hu-nivel__pt,
.hu-nivel[data-voz="familia"] .hu-nivel__esc{ display:none }

/* Voz interna · léxico de V7 */
.hu-nivel[data-voz="interna"][data-nivel="bajo"]  .hu-nivel__txt::after{ content:"Desafío bajo" }
.hu-nivel[data-voz="interna"][data-nivel="medio"] .hu-nivel__txt::after{ content:"Desafío medio" }
.hu-nivel[data-voz="interna"][data-nivel="alto"]  .hu-nivel__txt::after{ content:"Desafío alto" }

/* Color del semáforo. Verificado sobre Azul Nebulosa #0B1B33:
   favorable 8.3:1 AAA · media 10.6:1 AAA · prioritaria 6.5:1 AA.
   Los tres pasan el piso obligatorio del manual (AA, 4.5:1). La prioritaria
   no llega a AAA en texto normal, que exige 7:1; sí lo alcanza en texto
   grande (≥24px, o ≥18.66px en negrita). */
.hu-nivel[data-nivel="bajo"]{  color:var(--hu-favorable) }
.hu-nivel[data-nivel="medio"]{ color:var(--hu-media) }
.hu-nivel[data-nivel="alto"]{  color:var(--hu-prioritaria) }

/* Escala neutra · sin rojo. La intensidad es de trazo, no de tono: menos
   relleno significa mayor desafío, en la misma dirección que el puntaje.
   Todo en Blanco Estelar, 15.4:1 sobre tarjeta. Sobrevive a la impresión
   en blanco y negro, donde el semáforo se pierde. */
.hu-nivel[data-escala="neutra"]{ color:var(--hu-texto) }
.hu-nivel[data-escala="neutra"] .hu-nivel__marca{
  background:transparent; border:2px solid currentColor;
}
.hu-nivel[data-escala="neutra"][data-nivel="bajo"] .hu-nivel__marca{ background:currentColor }
.hu-nivel[data-escala="neutra"][data-nivel="medio"] .hu-nivel__marca{
  background:linear-gradient(90deg, currentColor 50%, transparent 50%);
}

/* --- 7.2 · Tarjeta de área -------------------------------------------------
   El componente central del dashboard de la familia. Seis tarjetas, una por
   dimensión del Modelo Heréditas. NO es un semáforo: usa la paleta del
   semáforo en el indicador, pero la forma es tarjeta y todos los resultados
   aparecen a la vez.

   Regla dura 1 de marca.md: las dos capas no se mezclan. El color del
   diagnóstico vive en el indicador; el color del planeta vive en el pie.
   El fondo de la tarjeta nunca toma ninguno de los dos. */
.hu-tarjetas{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:18px }

.hu-tarjeta{
  display:flex; flex-direction:column; gap:14px;
  background:var(--hu-superficie); border:1px solid var(--hu-linea-sutil);
  border-radius:var(--hu-radio); padding:22px 22px 18px;
}
.hu-tarjeta__cab{ display:flex; align-items:center; gap:14px }
.hu-tarjeta__id{ display:flex; flex-direction:column; gap:6px; min-width:0 }
.hu-tarjeta__area{
  font-size:14px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:700; color:var(--hu-texto);
}
.hu-tarjeta__texto{
  margin:0; font-size:16.5px; line-height:1.55;
  color:var(--hu-texto); text-wrap:pretty;
}
.hu-tarjeta__pie{
  display:flex; align-items:flex-start; gap:12px; margin-top:auto;
  border-top:1px solid var(--hu-linea-sutil); padding-top:14px;
  font-size:15px; line-height:1.5; color:var(--hu-texto-2); text-wrap:pretty;
}
/* Enlace al planeta. Bloque completo tocable en teléfono: 44px de alto. */
.hu-tarjeta__pie a{ text-decoration:none; display:block; min-height:44px }
.hu-tarjeta__pie a:hover .hu-planeta{ text-decoration:underline }

/* Nombre del planeta en su color propio.
   Certeza va en Azul Luz #6FA3E8 (6.6:1 sobre tarjeta): el Azul Certeza base
   #3A7BD5 da 4.08:1 sobre Azul Nebulosa y NO pasa AA. El anexo solo lo
   verificó contra Azul Profundo. Hallazgo a confirmar con Marce. */
.hu-planeta{ font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:14px }
.hu-planeta[data-planeta="tranquilidad"]{ color:var(--hu-tranquilidad) }
.hu-planeta[data-planeta="certeza"]{      color:var(--hu-certeza-luz) }
.hu-planeta[data-planeta="permanencia"]{  color:var(--hu-permanencia) }

/* Legado no es un planeta: es el Sol. Y el color del Sol #F5C518 es el MISMO
   hex que el semáforo de atención media, así que pintar la palabra LEGADO con
   él haría que la capa de medición se filtrara a la capa narrativa dentro de
   la misma cuadrícula — la tarjeta de Legado diría «Consolidado» en verde con
   la palabra en el amarillo que dos tarjetas más allá significa «En
   desarrollo». Es exactamente la mezcla que prohíbe la regla dura 1.
   Va en Blanco Estelar (15.4:1): conserva el énfasis sin tomar color de otra
   capa. PENDIENTE DE MARCE: es la única de las cuatro palabras que no lleva
   su color propio, y podría querer un tratamiento distinto para el Sol. */
.hu-planeta[data-planeta="legado"]{       color:var(--hu-texto) }

/* Prioridad no compensable. Salvaguarda de V7: toda área en banda alta debe
   verse como prioridad aunque la Continuidad Global sea favorable. Se resuelve
   con una órbita de luz alrededor de la tarjeta, no con un signo de alerta —
   marca.md prohíbe ⚠ y ❗. */
.hu-tarjeta[data-prioridad]{
  border-color:rgba(239,126,126,.45);
  box-shadow:0 0 0 1px rgba(239,126,126,.18), 0 0 34px -12px rgba(239,126,126,.35);
}
.hu-tarjeta__prioridad{
  align-self:flex-start; font-size:14px; letter-spacing:.14em;
  text-transform:uppercase; font-weight:700; color:var(--hu-prioritaria);
}

/* --- 7.3 · Número destacado con leyenda ------------------------------------
   Continuidad Global, puntaje por área, confianza diagnóstica.
   Cormorant Garamond, que es la tipografía de herencia del manual.
   marca.md evita «puntaje global» en el léxico de cara a la familia: este
   componente es de vista interna y de documentos de socios. */
.hu-cifras{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:24px }
.hu-cifra{ display:flex; flex-direction:column; gap:7px }
.hu-cifra__leyenda{
  font-size:14px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:700; color:var(--hu-marca);
}
.hu-cifra__n{
  font-family:var(--hu-titulo); font-size:62px; font-weight:600;
  line-height:1; color:var(--hu-texto); font-variant-numeric:tabular-nums;
}
.hu-cifra__n span{
  font-family:var(--hu-cuerpo); font-size:24px; font-weight:400;
  color:var(--hu-texto-2); letter-spacing:0;
}
.hu-cifra__nota{ font-size:15px; color:var(--hu-texto-2); text-wrap:pretty }
.hu-cifra--interna .hu-cifra__leyenda::after{
  content:" · vista interna"; color:var(--hu-texto-2); font-weight:400;
}

/* --- 7.4 · Tabla de datos --------------------------------------------------
   Envuelve la tabla del §5 para que sobreviva al teléfono sin romper la
   página, y sube el encabezado a 14px, el mínimo del manual. */
.hu-tabla{ overflow-x:auto; -webkit-overflow-scrolling:touch }
.hu-tabla th{ font-size:14px }
.hu-tabla .num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap }
.hu-tabla tbody tr:hover td{ background:var(--hu-velo) }
.hu-tabla td b{ font-weight:700 }
.hu-tabla tfoot td{
  border-bottom:none; border-top:1px solid var(--hu-linea);
  font-weight:700; color:var(--hu-texto);
}

/* --- 7.5 · Bloque de decisión ---------------------------------------------
   Para los documentos de decisión de los socios. Cada bloque es una pregunta
   con dueño, estado y espacio de respuesta.
   Cinco estados: pendiente · por-confirmar · decidida · diferida · bloqueada */
.hu-decision{
  background:var(--hu-superficie); border:1px solid var(--hu-linea-sutil);
  border-radius:var(--hu-radio); padding:22px 24px; margin:16px 0;
}
.hu-decision__cab{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:16px; flex-wrap:wrap;
}
.hu-decision__id{
  font-size:14px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--hu-texto-2);
}
.hu-decision__t{
  font-family:var(--hu-titulo); font-size:25px; font-weight:600;
  line-height:1.25; margin:8px 0 0; text-wrap:pretty;
}
.hu-decision__q{ margin:10px 0 0; font-size:16.5px; color:var(--hu-texto); text-wrap:pretty }
.hu-decision__meta{
  display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:14px;
  font-size:14px; color:var(--hu-texto-2);
}
.hu-decision__meta b{ color:var(--hu-texto); font-weight:700 }

/* Espacio de respuesta. Vacío es «en construcción», no error: borde punteado
   y una invitación, nunca un mensaje de falta. Con data-lleno el borde se
   vuelve continuo y el texto sube a Blanco Estelar. */
.hu-decision__respuesta{
  margin-top:16px; padding:15px 17px; min-height:96px;
  border:1px dashed rgba(244,242,237,.24); border-radius:12px;
  font-size:15.5px; line-height:1.6; color:var(--hu-texto-2); text-wrap:pretty;
}
.hu-decision__respuesta[data-lleno]{
  border-style:solid; border-color:var(--hu-linea); color:var(--hu-texto);
}
.hu-decision__firma{
  display:block; margin-top:12px; padding-top:10px;
  border-top:1px solid var(--hu-linea-sutil);
  font-size:14px; color:var(--hu-texto-2);
}

/* Estado. 14px, no 11px como la .pill heredada. */
.hu-estado{
  display:inline-flex; align-items:center; gap:8px; flex:none;
  font-size:14px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:5px 13px; border-radius:999px; border:1px solid transparent;
}
.hu-estado::before{ content:""; width:9px; height:9px; border-radius:50%; background:currentColor }
.hu-decision[data-estado="pendiente"]     .hu-estado{ color:var(--hu-texto-2); background:rgba(154,163,176,.14) }
.hu-decision[data-estado="decidida"]      .hu-estado{ color:var(--hu-favorable); background:rgba(46,204,138,.14) }
.hu-decision[data-estado="bloqueada"]     .hu-estado{ color:var(--hu-prioritaria); background:rgba(239,126,126,.14) }
/* Diferida se distingue de pendiente por la forma, no por otro color:
   mismo Gris Lunar, contorno punteado y punto hueco. */
.hu-decision[data-estado="diferida"] .hu-estado{
  color:var(--hu-texto-2); background:transparent;
  border-color:rgba(154,163,176,.45); border-style:dashed;
}
.hu-decision[data-estado="diferida"] .hu-estado::before{
  background:transparent; box-shadow:inset 0 0 0 2px currentColor;
}
/* Por confirmar usa el amarillo #F5C518, que en la plataforma es a la vez el
   Sol y el semáforo medio. Reutilizarlo aquí, fuera del diagnóstico, es la
   única decisión de color de este kit que sale del terreno normado.
   PENDIENTE DE MARCE: aprobar, o asignarle otro tratamiento. */
.hu-decision[data-estado="por-confirmar"] .hu-estado{ color:var(--hu-media); background:rgba(245,197,24,.14) }

.hu-decision[data-estado="decidida"]{ border-color:rgba(46,204,138,.28) }
.hu-decision[data-estado="bloqueada"]{ border-color:rgba(239,126,126,.28) }

/* --- 7.6 · Comparación antes / después ------------------------------------
   Dos columnas en escritorio, apiladas en teléfono.
   Ninguno de los dos lados se pinta como bueno o malo: el «después» solo
   recibe la etiqueta en Dorado Estelar, que es el color de la marca marcando
   hacia dónde va. */
.hu-comp{
  display:grid; grid-template-columns:1fr 1fr;
  border:1px solid var(--hu-linea); border-radius:var(--hu-radio);
  overflow:hidden; margin-top:16px;
}
.hu-comp__lado{ background:var(--hu-superficie); padding:20px 22px }
.hu-comp__lado + .hu-comp__lado{ border-left:1px solid var(--hu-linea) }
.hu-comp__et{
  font-size:14px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:700; color:var(--hu-texto-2); margin-bottom:12px;
}
.hu-comp__lado[data-lado="despues"] .hu-comp__et{ color:var(--hu-marca) }
.hu-comp__lado p{ margin:0 0 10px; font-size:16.5px; line-height:1.55; text-wrap:pretty }
.hu-comp__lado p:last-child{ margin-bottom:0 }
.hu-comp__lado ul{ margin:0; padding-left:20px; font-size:16px }
.hu-comp__lado li{ margin:7px 0 }
.hu-comp__lado[data-lado="antes"]{ color:var(--hu-texto-2) }
.hu-comp__lado[data-lado="antes"] b{ color:var(--hu-texto) }

/* --- 7.7 · Diagrama de flujo ---------------------------------------------
   Horizontal en escritorio, vertical en teléfono. El conector es un elemento
   propio en el HTML, así funciona en las dos direcciones sin duplicar reglas.
   Un paso no alcanzado es «en construcción», nunca roto: menos opacidad y
   contorno punteado, sin tacha ni signo de alerta. */
.hu-flujo{ display:flex; align-items:stretch; margin-top:18px }
.hu-flujo__paso{
  flex:1 1 0; min-width:0;
  background:var(--hu-superficie); border:1px solid var(--hu-linea-sutil);
  border-radius:var(--hu-radio); padding:16px 18px;
}
.hu-flujo__n{
  font-size:14px; letter-spacing:.15em; font-weight:700;
  color:var(--hu-marca); display:block; margin-bottom:8px;
}
.hu-flujo__t{ font-size:16.5px; font-weight:700; line-height:1.35; margin:0 }
.hu-flujo__d{ margin:7px 0 0; font-size:15px; color:var(--hu-texto-2); line-height:1.5; text-wrap:pretty }

/* Conector. Polvo Dorado al 30%, como las órbitas del manual. */
.hu-flujo__con{
  flex:0 0 36px; align-self:center; position:relative;
  height:1px; background:rgba(247,216,140,.30);
}
.hu-flujo__con::after{
  content:""; position:absolute; right:0; top:-3.5px;
  width:8px; height:8px; border-radius:50%;
  background:var(--hu-brillo); opacity:.6;
}
.hu-flujo__paso[data-estado="actual"]{
  border-color:rgba(224,165,61,.55);
  box-shadow:0 0 30px -14px rgba(247,216,140,.5);
}
.hu-flujo__paso[data-estado="pendiente"]{
  border-style:dashed; border-color:rgba(244,242,237,.16); background:transparent;
}
.hu-flujo__paso[data-estado="pendiente"] .hu-flujo__n{ color:var(--hu-texto-2) }
.hu-flujo__paso[data-estado="pendiente"] .hu-flujo__t{ color:var(--hu-texto-2) }

/* --- 7.8 · Barra de navegación con índice y progreso ---------------------
   Para las pantallas del cuestionario. El manual prohíbe barras de progreso
   genéricas: el progreso es un arco orbital en Polvo Dorado, con su número
   escrito al lado — el número es lo que responde «cuánto me falta», el arco
   es lo que lo hace de HU. */
.hu-nav{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:24px;
  padding:12px 20px;
  background:rgba(1,9,20,.94); border-bottom:1px solid var(--hu-linea);
}
@supports (backdrop-filter:blur(8px)){
  .hu-nav{ background:rgba(1,9,20,.78); backdrop-filter:blur(10px) }
}
/* HERÉDITAS y UNIVERSE viajan siempre juntos: aquí va el logotipo completo. */
.hu-nav__marca{ flex:none; display:block; height:30px; width:auto; margin:0 }
.hu-nav__indice{
  display:flex; align-items:center; gap:26px; flex:1;
  list-style:none; margin:0; padding:0; overflow-x:auto;
  scrollbar-width:none;
}
.hu-nav__indice::-webkit-scrollbar{ display:none }
/* Cuando el índice no cabe, la última sección se cortaría a media palabra sin
   que nada indique que hay más. El desvanecido al borde derecho es la única
   señal de que la lista sigue: la barra de desplazamiento está oculta a
   propósito para no meter un elemento de sistema en la barra de marca. */
@media (max-width:980px){
  .hu-nav__indice{
    -webkit-mask:linear-gradient(90deg,#000 calc(100% - 34px), transparent);
    mask:linear-gradient(90deg,#000 calc(100% - 34px), transparent);
  }
}
.hu-nav__indice a{
  display:flex; align-items:center; min-height:44px;
  font-size:15px; color:var(--hu-texto-2); text-decoration:none;
  white-space:nowrap; border-bottom:2px solid transparent;
}
.hu-nav__indice a:hover{ color:var(--hu-texto) }
.hu-nav__indice li[data-hecho] a{ color:var(--hu-texto) }
.hu-nav__indice li[aria-current] a{ color:var(--hu-marca); border-bottom-color:var(--hu-marca) }

/* Arco orbital. --hu-p va de 0 a 1 y lo escribe la aplicación en línea:
   es un valor vivo, el único de este kit que no puede vivir en la hoja. */
.hu-orbita{ flex:none; display:flex; align-items:center; gap:13px }
.hu-orbita__arco{ --hu-p:0; position:relative; width:64px; height:36px; overflow:hidden }
.hu-orbita__arco::before{
  content:""; position:absolute; inset:0 0 auto 0; width:64px; height:64px;
  border-radius:50%;
  background:conic-gradient(from -90deg,
    var(--hu-brillo) 0turn calc(var(--hu-p) * .5turn),
    rgba(247,216,140,.20) calc(var(--hu-p) * .5turn) .5turn,
    transparent .5turn);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
}
.hu-orbita__cifra{ font-size:16px; font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums }
.hu-orbita__cifra span{ color:var(--hu-texto-2); font-weight:400; font-size:14px }

/* ----------------------------------------------------------------------------
   8 · TELÉFONO · componentes del §7
   Se verifica a 360px de ancho, que es el piso realista de la audiencia.
   ---------------------------------------------------------------------------- */
@media (max-width:980px){
  .hu-tarjetas{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:720px){
  .hu-tarjetas{ grid-template-columns:1fr; gap:14px }
  .hu-tabla > table{ min-width:520px }

  .hu-comp{ grid-template-columns:1fr }
  .hu-comp__lado + .hu-comp__lado{ border-left:none; border-top:1px solid var(--hu-linea) }

  /* El flujo gira a vertical y el conector con él */
  .hu-flujo{ flex-direction:column }
  .hu-flujo__con{ flex:0 0 28px; width:1px; height:auto; margin-left:26px; align-self:flex-start }
  .hu-flujo__con::after{ right:auto; top:auto; bottom:0; left:-3.5px }

  /* El índice se reduce a la sección actual; el número del arco lo sustituye */
  .hu-nav{ gap:14px; padding:10px 16px }
  .hu-nav__indice{ -webkit-mask:none; mask:none }
  .hu-nav__indice li:not([aria-current]){ display:none }
  .hu-nav__marca{ height:26px }

  .hu-cifra__n{ font-size:48px }
  .hu-decision{ padding:18px 18px }
  .hu-decision__t{ font-size:22px }
}

/* ----------------------------------------------------------------------------
   9 · IMPRESIÓN
   Los documentos de decisión se imprimen y se anotan a mano. El fondo oscuro
   es identidad en pantalla; en papel se invierte para no gastar tóner y para
   que el espacio de respuesta sea escribible. El semáforo se pierde en blanco
   y negro: en papel se usa data-escala="neutra".
   ---------------------------------------------------------------------------- */
@media print{
  body{ background:#fff; color:#111; font-size:11pt }
  .hu-nav{ display:none }
  .hu-tarjeta, .hu-decision, .hu-flujo__paso, .hu-comp__lado, .panel{
    background:#fff; border-color:#bbb;
  }
  .hu-tarjeta, .hu-decision, .hu-flujo__paso{ box-shadow:none; break-inside:avoid }
  .hu-tarjeta__texto, .hu-decision__q, .hu-decision__t, .hu-cifra__n{ color:#111 }
  .hu-decision__respuesta{ min-height:34mm; border-color:#999; color:#555 }
  .hu-nivel[data-escala="neutra"]{ color:#111 }
}