/* ==========================================================================
   Estilos del sitio divulgativo «IA y empleo en ingeniería»
   Sin dependencias externas. Ninguna petición de red.
   Paleta: 1 acento + grises. Fondo blanco.
   ========================================================================== */

:root {
  /* Color de acento único y sobrio */
  --acento: #12556c;
  --acento-medio: #1c7a95;
  --acento-fondo: #eaf2f5;

  /* Grises */
  --tinta: #191c1e;
  --tinta-suave: #484f53;
  --tenue: #666e73;
  --linea: #dcE1e4;
  --linea-fuerte: #c3cbcf;
  --fondo: #ffffff;
  --fondo-alt: #f7f8f9;

  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Contenedor: 1320 px para que el título grande y los ocho enlaces del menú
     convivan en una sola fila. La altura de la cabecera sube a 72 px porque el
     título va más grande; scroll-padding-top la compensa al saltar a anclas. */
  --ancho: 1320px;
  --alto-cabecera: 72px;
  --radio: 4px;
  /* Punto de corte del menú hamburguesa. Se documenta aquí, pero las media
     queries usan el literal 1080px: `var()` no es válido en una condición
     de @media. */
  --corte-menu: 1080px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Compensa la cabecera fija al saltar a un ancla */
  scroll-padding-top: calc(var(--alto-cabecera) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--fuente);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden; /* garantía extra de no-scroll horizontal */
}

img, svg { max-width: 100%; }

a {
  color: var(--acento);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { color: var(--acento-medio); }

/* Foco visible en toda la navegación por teclado */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--acento-medio);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Enlace de salto para lectores de pantalla y teclado */
.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--acento);
  color: #fff;
  padding: 10px 16px;
  z-index: 100;
  border-radius: 0 0 var(--radio) 0;
}
.saltar:focus {
  left: 0;
  color: #fff;
}

/* --------------------------------------------------------------------------
   Cabecera fija con la navegación principal
   -------------------------------------------------------------------------- */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--linea);
}

.cabecera-fila {
  /* `position: relative` es la referencia del panel desplegable en móvil */
  position: relative;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 24px;
  min-height: var(--alto-cabecera);
  display: flex;
  align-items: center;
  gap: 24px;
  /* En escritorio la cabecera es siempre una sola fila */
  flex-wrap: nowrap;
}

/* Título del sitio: el elemento dominante de la cabecera */
.marca {
  font-weight: 650;
  font-size: 1.45rem;
  line-height: 1.15;
  color: var(--tinta);
  text-decoration: none;
  letter-spacing: -0.01em;
  /* El título NUNCA se parte en dos líneas: si se partiera, la cabecera
     crecería por encima de --alto-cabecera y las anclas quedarían tapadas.
     Para que quepa, en la banda tensa se oculta el subtítulo (ver más abajo). */
  white-space: nowrap;
  /* Puede ceder ancho antes que desbordar: el menú nunca se comprime */
  min-width: 0;
}
.marca:hover { color: var(--acento); }
.marca span {
  display: block;
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--tenue);
  letter-spacing: 0;
  line-height: 1.25;
  /* Si el ancho aprieta se recorta el subtítulo, nunca el título ni el menú */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* El menú ocupa solo lo que necesita y se pega a la derecha */
.nav-sitio {
  flex: 0 0 auto;
  margin-left: auto;
}

.nav-principal {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-principal li { flex: 0 0 auto; }
.nav-principal a {
  display: block;
  padding: 6px 9px;
  font-size: 0.86rem;
  color: var(--tinta-suave);
  text-decoration: none;
  border-radius: var(--radio);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav-principal a:hover {
  color: var(--acento);
  background: var(--fondo-alt);
}
.nav-principal a[aria-current="page"] {
  color: var(--acento);
  font-weight: 650;
  border-bottom-color: var(--acento);
}

/* --------------------------------------------------------------------------
   Banda tensa del modo barra: 1081-1128 px.
   Con el título ya en una sola línea, a 1081 px el contenido estimado (título
   261 + separación 24 + menú 637 = 959 px) cabe en los 1033 px disponibles,
   pero solo con un 7,7 % de holgura. Por debajo de un 12 % de holgura —el
   margen que reservo para que la tipografía real sea más ancha que la tabla de
   métricas— se oculta el subtítulo en lugar de arriesgar que el título se
   recorte o que la fila empuje al menú. El umbral del 12 % se alcanza en
   1123 px; la banda cierra en 1128 px por redondeo. Fuera de ella el subtítulo
   se ve con normalidad, y la altura de la cabecera no cambia en ningún caso
   (el contenido mide 42,7 px con subtítulo y 26,7 px sin él, frente a los
   72 px de --alto-cabecera).
   -------------------------------------------------------------------------- */

@media (min-width: 1081px) and (max-width: 1128px) {
  .marca span { display: none; }
}

/* --------------------------------------------------------------------------
   Botón de menú: tres barras dibujadas con CSS.
   Sin iconos, sin fuentes de iconos y sin imágenes: nada que descargar.
   -------------------------------------------------------------------------- */

.btn-menu {
  /* Oculto por defecto. Además solo aparece con JavaScript activo, para que
     nunca quede un botón que no hace nada (ver bloque de 1080 px). */
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background-color: var(--fondo);
  /* Barra central */
  background-image: linear-gradient(var(--tinta), var(--tinta));
  background-size: 20px 2px;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--tinta);
  cursor: pointer;
}
.btn-menu:hover { border-color: var(--linea-fuerte); }
/* Barras superior e inferior */
.btn-menu::before,
.btn-menu::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 20px;
  height: 2px;
  margin-left: -10px;
  background: var(--tinta);
  transition: transform 0.18s ease, top 0.18s ease;
}
.btn-menu::before { top: 15px; }
.btn-menu::after { top: 27px; }
/* Estado abierto: las tres barras se convierten en una cruz */
.btn-menu[aria-expanded="true"] { background-image: none; }
.btn-menu[aria-expanded="true"]::before { top: 21px; transform: rotate(45deg); }
.btn-menu[aria-expanded="true"]::after { top: 21px; transform: rotate(-45deg); }

/* --------------------------------------------------------------------------
   Cabecera por debajo de 1080 px: menú hamburguesa.
   Mejora progresiva en dos capas:
     · Sin JavaScript, los ocho enlaces siguen visibles y usables, en flujo
       normal debajo del título (nada de panel flotante, nada de scroll).
     · Con JavaScript (html.js), el mismo <ul> pasa a panel desplegable que
       abre y cierra el botón. El CSS solo oculta la navegación si hay JS.
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .cabecera-fila {
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 0 16px;
  }
  .marca { font-size: 1.15rem; }
  .marca span { font-size: 0.72rem; }

  /* El botón solo existe si hay JavaScript que lo haga funcionar */
  html.js .btn-menu { display: inline-block; }

  .nav-sitio {
    flex: 1 1 100%;
    margin-left: 0;
    order: 3;
  }
  .nav-principal {
    flex-wrap: wrap;
    width: 100%;
  }

  /* --- Con JavaScript: panel desplegable --- */
  html.js .nav-sitio {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    background: var(--fondo);
    border-bottom: 1px solid var(--linea);
    box-shadow: 0 12px 24px rgba(20, 26, 30, 0.1);
    padding: 6px 16px 12px;
    z-index: 60;
  }
  /* El estado del panel se deriva del atributo del botón: una sola fuente
     de verdad, sin clases de estado duplicadas. */
  html.js .btn-menu[aria-expanded="true"] ~ .nav-sitio { display: block; }

  html.js .nav-principal {
    flex-direction: column;
    flex-wrap: nowrap;
  }
  html.js .nav-principal li { width: 100%; }
  html.js .nav-principal a {
    display: flex;
    align-items: center;
    min-height: 44px; /* altura táctil mínima */
    padding: 0 10px;
    font-size: 0.95rem;
    border-bottom: 0;
    border-left: 2px solid transparent;
    border-radius: 0;
  }
  html.js .nav-principal a[aria-current="page"] {
    border-left-color: var(--acento);
    background: var(--fondo-alt);
  }
}

@media (max-width: 560px) {
  .layout { padding: 0 16px; }
  .cabecera-fila { padding: 0 16px; }
  .pie-fila { padding: 28px 16px 40px; }
  body { font-size: 16px; }
}

/* --------------------------------------------------------------------------
   Estructura: contenido + panel lateral de índice
   -------------------------------------------------------------------------- */

.layout {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 252px;
  gap: 64px;
  align-items: start;
}

.contenido {
  min-width: 0; /* evita desbordes de tablas y SVG en grid */
  padding: 48px 0 80px;
}

/* --------------------------------------------------------------------------
   Panel lateral derecho con el índice de la sección actual
   Funciona sin JavaScript: en móvil es un <details> nativo.
   -------------------------------------------------------------------------- */

.indice {
  position: sticky;
  top: calc(var(--alto-cabecera) + 24px);
  margin-top: 48px;
  font-size: 0.86rem;
}

.indice details {
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 12px 14px;
  background: var(--fondo);
}
.indice summary {
  cursor: pointer;
  font-weight: 650;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tenue);
  list-style: none;
}
.indice summary::-webkit-details-marker { display: none; }
.indice summary::after {
  content: " ▾";
  font-size: 0.9em;
}

.indice-titulo {
  display: none; /* solo visible en escritorio */
  margin: 0 0 10px;
  font-size: 0.74rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--tenue);
}

.indice-lista {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  border-left: 2px solid var(--linea);
}
.indice-lista a {
  display: block;
  padding: 5px 0 5px 12px;
  margin-left: -2px;
  border-left: 2px solid transparent;
  color: var(--tinta-suave);
  text-decoration: none;
  line-height: 1.35;
}
.indice-lista a:hover {
  color: var(--acento);
  border-left-color: var(--linea-fuerte);
}
/* Clase que añade menu.js al hacer scroll. Sin JS, el índice sigue siendo
   navegable: solo se pierde el resaltado. */
.indice-lista a.activo {
  color: var(--acento);
  font-weight: 650;
  border-left-color: var(--acento);
}

/* Escritorio: el índice se muestra siempre, abierto, sin la flecha */
@media (min-width: 961px) {
  .indice details {
    border: 0;
    padding: 0;
    background: transparent;
  }
  .indice summary { display: none; }
  .indice-titulo { display: block; }
  .indice-lista { margin-top: 0; }
}

@media (max-width: 960px) {
  .layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .contenido { padding-top: 28px; }
  .indice {
    position: static;
    margin-top: 20px;
    /* En una columna, el índice se coloca por encima del contenido para que
       sirva de tabla de contenidos desplegable. */
    order: -1;
  }
}

/* --------------------------------------------------------------------------
   Tipografía del contenido
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.9rem);
  font-weight: 700;
  margin-bottom: 0.4em;
}

h2 {
  font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.75rem);
  margin-top: 2.4em;
  padding-top: 0.7em;
  border-top: 1px solid var(--linea);
  scroll-margin-top: calc(var(--alto-cabecera) + 20px);
}

h3 {
  font-size: 1.1rem;
  margin-top: 1.8em;
  scroll-margin-top: calc(var(--alto-cabecera) + 20px);
}

h4 {
  font-size: 0.96rem;
  margin-top: 1.4em;
  color: var(--tinta-suave);
}

p { margin: 0 0 1.1em; max-width: 68ch; }

.entradilla {
  font-size: 1.16rem;
  line-height: 1.55;
  color: var(--tinta-suave);
  max-width: 62ch;
}

ul, ol { max-width: 68ch; padding-left: 1.3em; }
li { margin-bottom: 0.5em; }

strong { font-weight: 650; }

.cifra {
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

/* Cita literal del informe */
blockquote {
  margin: 1.4em 0;
  padding: 2px 0 2px 18px;
  border-left: 3px solid var(--linea-fuerte);
  color: var(--tinta-suave);
  font-style: italic;
  max-width: 64ch;
}
blockquote p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Etiquetas de naturaleza del dato (HECHO / PROYECCIÓN / OPINIÓN / INFERENCIA)
   El color no es el único portador de significado: siempre lleva texto.
   -------------------------------------------------------------------------- */

.etiqueta {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
  border: 1px solid var(--linea-fuerte);
  color: var(--tinta-suave);
  background: var(--fondo);
  white-space: nowrap;
  vertical-align: 0.12em;
}
.etiqueta--hecho {
  border-color: var(--acento);
  background: var(--acento-fondo);
  color: #0d4154;
}
.etiqueta--proyeccion {
  border-style: dashed;
  border-color: var(--tinta-suave);
  color: var(--tinta-suave);
}
.etiqueta--opinion {
  background: var(--fondo-alt);
}
.etiqueta--inferencia {
  background: var(--tinta-suave);
  border-color: var(--tinta-suave);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Tarjetas de hallazgos (home)
   -------------------------------------------------------------------------- */

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 18px;
  margin: 28px 0 12px;
  padding: 0;
  list-style: none;
}

.tarjeta {
  border: 1px solid var(--linea);
  border-top: 3px solid var(--acento);
  border-radius: var(--radio);
  padding: 18px 18px 16px;
  background: var(--fondo);
}
.tarjeta .etiqueta { margin-bottom: 10px; }
.tarjeta p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.5;
  max-width: none;
}
/* Cuando la tarjeta separa dos naturalezas distintas (p. ej. opinión + hecho) */
.tarjeta p + p { margin-top: 9px; }
.tarjeta h3 {
  margin: 0 0 6px;
  font-size: 1rem;
}

/* --------------------------------------------------------------------------
   Avisos destacados
   -------------------------------------------------------------------------- */

.aviso {
  border: 1px solid var(--linea-fuerte);
  border-left: 5px solid var(--acento);
  background: var(--acento-fondo);
  border-radius: var(--radio);
  padding: 18px 20px;
  margin: 28px 0;
}
.aviso p { margin-bottom: 0.6em; max-width: 66ch; }
.aviso p:last-child { margin-bottom: 0; }
.aviso h2, .aviso h3 {
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
  font-size: 1.05rem;
}

.aviso--alerta {
  border-left-color: var(--tinta);
  background: var(--fondo-alt);
}

/* Caja «lo esencial en tres líneas» al final de cada página */
.esencial {
  margin: 56px 0 0;
  padding: 20px 22px;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  background: var(--fondo-alt);
}
.esencial h2 {
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--tenue);
}
.esencial ol {
  margin: 0;
  padding-left: 1.2em;
}
.esencial li { margin-bottom: 0.55em; }
.esencial li:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Tablas
   -------------------------------------------------------------------------- */

.tabla-scroll {
  overflow-x: auto;
  margin: 22px 0;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  -webkit-overflow-scrolling: touch;
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.9rem;
  min-width: 460px;
}
caption {
  caption-side: top;
  text-align: left;
  padding: 12px 14px 0;
  font-size: 0.82rem;
  color: var(--tenue);
}
th, td {
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--linea);
}
thead th {
  background: var(--fondo-alt);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tenue);
  font-weight: 650;
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Gráficos: figura + ficha obligatoria
   -------------------------------------------------------------------------- */

.grafico {
  margin: 36px 0;
  padding: 22px 22px 20px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--fondo);
}
.grafico-titulo {
  margin: 0 0 4px;
  font-size: 1.02rem;
  font-weight: 650;
  line-height: 1.35;
}
.grafico-num {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tenue);
  margin-bottom: 4px;
}
.grafico-lienzo {
  margin: 18px 0 8px;
  /* En pantallas muy estrechas el gráfico conserva un ancho mínimo para que el
     texto siga siendo legible, y se desplaza dentro de su propia caja.
     La página nunca produce scroll horizontal. */
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.grafico-lienzo svg {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 680px) {
  .grafico-lienzo svg { min-width: 520px; }
}

/* Texto dentro de los SVG */
.grafico svg text {
  font-family: var(--fuente);
  fill: var(--tinta-suave);
  font-size: 13px;
}
.grafico svg .eje-titulo {
  fill: var(--tinta);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.02em;
}
.grafico svg .marca {
  fill: var(--tinta);
  font-size: 13px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.grafico svg .categoria {
  fill: var(--tinta);
  font-size: 13px;
}
.grafico svg .nota {
  fill: var(--tenue);
  font-size: 11.5px;
}
.grafico svg .rejilla { stroke: var(--linea); stroke-width: 1; }
.grafico svg .eje { stroke: var(--linea-fuerte); stroke-width: 1.5; }
.grafico svg .barra { fill: var(--acento); }
.grafico svg .barra-tenue { fill: #aeb9be; }
.grafico svg .linea-dato {
  fill: none;
  stroke: var(--acento);
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* Ficha de cada gráfico: qué muestra, unidades, periodo, fuente, NO dice */
.ficha {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--linea);
  font-size: 0.85rem;
  line-height: 1.55;
}
.ficha dl {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 4px 12px;
  margin: 0 0 10px;
}
.ficha dt {
  font-weight: 650;
  color: var(--tenue);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-top: 2px;
}
.ficha dd { margin: 0; color: var(--tinta-suave); }
.ficha .no-dice {
  margin: 0;
  padding: 10px 12px;
  background: var(--fondo-alt);
  border-left: 3px solid var(--tinta-suave);
  border-radius: 0 var(--radio) var(--radio) 0;
  color: var(--tinta);
  max-width: none;
}
.ficha .no-dice strong { color: var(--tinta); }

@media (max-width: 560px) {
  .ficha dl { grid-template-columns: minmax(0, 1fr); gap: 1px; }
  .ficha dt { margin-top: 8px; }
  .grafico { padding: 16px 14px; }
}

/* --------------------------------------------------------------------------
   Dos columnas contrapesadas (AECOM contra Jacobs y WSP)
   -------------------------------------------------------------------------- */

.columnas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin: 26px 0;
}
.columna {
  border: 1px solid var(--linea);
  border-top: 3px solid var(--linea-fuerte);
  border-radius: var(--radio);
  padding: 18px 20px;
  background: var(--fondo);
}
.columna--a { border-top-color: var(--acento); }
.columna h3 {
  margin-top: 0;
  font-size: 1rem;
}
.columna ul { font-size: 0.93rem; padding-left: 1.1em; }
.columna p { font-size: 0.93rem; }

/* --------------------------------------------------------------------------
   Bloques de escenarios
   -------------------------------------------------------------------------- */

.escenario {
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 22px 24px;
  margin: 26px 0;
  background: var(--fondo);
}
.escenario > h2 {
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
}
.escenario h3 {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tenue);
  margin-top: 1.6em;
}
.escenario ul, .escenario ol { font-size: 0.95rem; }

/* --------------------------------------------------------------------------
   Listado de referencias
   -------------------------------------------------------------------------- */

.referencias {
  padding-left: 0;
  list-style: none;
  counter-reset: ref;
  max-width: none;
}
.referencias li {
  counter-increment: ref;
  position: relative;
  padding: 12px 0 12px 44px;
  border-bottom: 1px solid var(--linea);
  font-size: 0.88rem;
  line-height: 1.55;
  max-width: none;
}
.referencias li::before {
  content: counter(ref);
  position: absolute;
  left: 0;
  top: 12px;
  width: 32px;
  text-align: right;
  color: var(--tenue);
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
  font-weight: 650;
}
.referencias li:last-child { border-bottom: 0; }
.referencias .url {
  display: block;
  margin-top: 3px;
  font-size: 0.8rem;
  word-break: break-all;
}
.referencias .tipo {
  color: var(--tenue);
  font-size: 0.78rem;
}

/* --------------------------------------------------------------------------
   Pie de página
   -------------------------------------------------------------------------- */

.pie {
  border-top: 1px solid var(--linea);
  margin-top: 40px;
  background: var(--fondo-alt);
}
.pie-fila {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 32px 24px 44px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px 48px;
  font-size: 0.85rem;
  color: var(--tinta-suave);
}
.pie-fila p { margin: 0 0 6px; max-width: 52ch; }
.pie-fila strong { color: var(--tinta); }
.pie nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}

/* --------------------------------------------------------------------------
   Utilidades
   -------------------------------------------------------------------------- */

.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.pie-nota {
  font-size: 0.82rem;
  color: var(--tenue);
  margin-top: 28px;
}

.enlace-fuerte {
  font-weight: 650;
}

/* Respeto por quien pide menos movimiento */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* --------------------------------------------------------------------------
   Impresión: sin panel lateral, sin cabecera pegajosa
   -------------------------------------------------------------------------- */

@media print {
  .cabecera { position: static; }
  .indice { display: none; }
  .layout { display: block; max-width: none; }
  a { color: var(--tinta); text-decoration: none; }
}