/*
  Estilos de los 12 componentes editoriales.
  Uno por ficha de $PAQUETE/desarrollo/sistema-diseno/componentes/.

  Ningún valor literal: todo sale de tokens.css (artículo V).
*/
@layer componentes {


/* ------------------------------------------------------------- cabecera */
.cabecera { border-bottom: var(--border-width-hairline) solid var(--color-border-subtle); }
.cabecera__interior { display: flex; align-items: center; gap: var(--space-xl);
                      padding-block: var(--space-lg); flex-wrap: wrap; }
.cabecera__lista { display: flex; gap: var(--space-xl); list-style: none; margin: 0; padding: 0;
                   flex-wrap: wrap; }
.cabecera__lista a { text-decoration: none; color: var(--color-text-primary); }
.cabecera__lista a:hover { color: var(--color-action-hover); text-decoration: underline; }
/* La sección actual NO se marca solo con color: lleva filete de 2.5 px. */
.cabecera__lista a.es-actual { border-bottom: var(--border-width-emphasis) solid var(--color-action-primary);
                               padding-bottom: var(--space-xs); }
.cabecera__conmutador { display: none; }
@media (max-width: 1099px) {
  .cabecera__conmutador { display: inline-block; background: var(--color-surface-raised);
                          border: var(--border-width-default) solid var(--color-border-strong);
                          border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md);
                          font: inherit; color: var(--color-text-primary); cursor: pointer; }
  .cabecera__nav[hidden] { display: none; }

  /* El panel ocupa el ancho entero bajo la cabecera, como pide la ficha:
     «logotipo y botón de menú; el panel se despliega a pantalla completa». */
  .cabecera__nav { flex-basis: 100%; }
  .cabecera__lista { flex-direction: column; gap: var(--space-lg); padding-block: var(--space-lg); }
  /* Con el menú abierto, el fondo no se desplaza detrás. */
  body.menu-abierto { overflow: hidden; }
}

/* A partir de `md` la ficha pide barra horizontal: logotipo a la izquierda,
   categorías a la derecha, en UNA fila. Sin esto la lista envolvía y la
   cabecera medía 156 px. */
@media (min-width: 1100px) {
  .cabecera__interior { flex-wrap: nowrap; justify-content: space-between; }
  .cabecera__nav[hidden] { display: block; }
}

/* ---------------------------------------------------------------- migas */
.migas { margin-block: var(--space-lg); }
.migas__lista { display: flex; flex-wrap: wrap; gap: var(--space-sm); list-style: none;
                margin: 0; padding: 0;
                font-size: var(--font-size-caption); line-height: var(--line-height-caption); }
.migas__item { display: flex; gap: var(--space-sm); align-items: baseline; }
.migas__actual { color: var(--color-text-secondary); }
.migas__separador { color: var(--color-border-strong); }

/* ------------------------------------------------- fecha de actualización
   Va bajo el H1 y sobre el cuerpo, que es donde un lector busca «¿de cuándo es
   esto?». Discreta a propósito: es un dato de procedencia, no un titular, y el
   día que vuelva el bloque de firma (B02) tiene que caber al lado sin
   competir con él. */
.fecha-actualizacion {
  margin-block: 0 var(--space-xl);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  color: var(--color-text-secondary);
}
.fecha-actualizacion__etiqueta::after { content: ":"; }
.fecha-actualizacion time { color: var(--color-text-primary); }

/* ------------------------------------------------------------ metadatos */
.metadatos__lista { display: flex; flex-wrap: wrap; gap: var(--space-lg) var(--space-xl);
                    margin: 0; font-size: var(--font-size-body-small);
                    line-height: var(--line-height-body-small); }
.metadatos__par dt { color: var(--color-text-secondary); font-weight: var(--font-weight-semibold); }
.metadatos__par dd { margin: 0; }
.metadatos__vencida { color: var(--color-status-caution); font-weight: var(--font-weight-semibold); }

/* Marcador de dato no aprobado. Visible a propósito: hace patente que la página
   no es publicable, en vez de dejar el hueco en blanco. */
.marcador { color: var(--color-status-caution); font-weight: var(--font-weight-semibold); }

/* --------------------------------------------------------------- byline */
.byline { border-block: var(--border-width-hairline) solid var(--color-border-subtle);
          padding-block: var(--space-lg); margin-block: var(--space-xl); }
.byline__lista { display: flex; flex-wrap: wrap; gap: var(--space-lg) var(--space-xl); margin: 0 0 var(--space-md); }
.byline__par dt { color: var(--color-text-secondary); font-size: var(--font-size-caption); }
.byline__par dd { margin: 0; }

/* -------------------------------------------------------------- fuentes */
.fuentes { margin-block: var(--space-3xl); }
.fuentes__lista { padding-left: var(--space-xl); }
.fuentes__item { margin-bottom: var(--space-md); }
.fuentes__pendiente { color: var(--color-status-caution); font-size: var(--font-size-caption); }

/* ---------------------------------------------------------------- aviso
   Tres niveles, distinguidos por icono, rótulo Y grosor de borde. El color
   nunca es el único canal. En la vía de lectura: el aviso pertenece al texto. */
.aviso { margin-block: var(--space-xl); padding: var(--space-lg);
         border-radius: var(--radius-md); background: var(--color-surface-raised); }
.aviso__cabecera { display: flex; align-items: center; gap: var(--space-sm); margin: 0 0 var(--space-sm); }
.aviso__icono { display: inline-grid; place-items: center; width: var(--space-xl); height: var(--space-xl);
                border-radius: var(--radius-sm); color: var(--color-text-inverse);
                font-weight: var(--font-weight-semibold); }
.aviso__rotulo { font-size: var(--font-size-label); letter-spacing: var(--letter-spacing-label);
                 font-weight: var(--font-weight-semibold); text-transform: uppercase; }
.aviso__cuerpo > :last-child { margin-bottom: 0; }

.aviso--parada       { border: var(--border-width-emphasis) solid var(--color-status-stop); }
.aviso--parada .aviso__icono  { background: var(--color-status-stop); }
.aviso--parada .aviso__rotulo { color: var(--color-status-stop); }

.aviso--precaucion   { border: var(--border-width-notice) solid var(--color-status-caution); }
.aviso--precaucion .aviso__icono  { background: var(--color-status-caution); }
.aviso--precaucion .aviso__rotulo { color: var(--color-status-caution); }

.aviso--informacion  { border: var(--border-width-default) solid var(--color-action-primary); }
.aviso--informacion .aviso__icono { background: var(--color-action-primary); }

/* ----------------------------------------------------------------- tabla */
.tabla-datos { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.tabla-datos caption { text-align: left; font-weight: var(--font-weight-semibold);
                       margin-bottom: var(--space-md); }
.tabla-datos th, .tabla-datos td { border: var(--border-width-hairline) solid var(--color-border-subtle);
                                   padding: var(--space-md); text-align: left; border-radius: var(--radius-none); }
.tabla-datos thead th { background: var(--color-surface-sunken); }
/* Valor desconocido: «—» y nota. NUNCA 0, nunca celda vacía. */
.dato-desconocido { color: var(--color-text-secondary); }

/* -------------------------------------------------- lectura relacionada
   SEPARACIÓN OBLIGATORIA de cualquier región de anuncio: space-3xl y un
   separador visible. La guarda 1 prohíbe que un anuncio parezca una
   recomendación del editor. */
.relacionada { margin-block: var(--space-3xl); padding-top: var(--space-xl);
               border-top: var(--border-width-hairline) solid var(--color-border-subtle); }
.relacionada__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xl); }
.relacionada__promesa { color: var(--color-text-secondary); margin: var(--space-xs) 0 0;
                        font-size: var(--font-size-body-small); line-height: var(--line-height-body-small); }
.relacionada__inactiva { color: var(--color-text-secondary); }
.relacionada__estado { color: var(--color-status-caution); font-size: var(--font-size-caption); }

/* ------------------------------------------------------------- descarga
   Tarjeta EDITORIAL: elevada, blanca y con sombra. Es exactamente el
   tratamiento que la región de anuncio NO puede compartir. */
.descarga { background: var(--color-surface-raised);
            border: var(--border-width-hairline) solid var(--color-border-subtle);
            border-radius: var(--radius-md); box-shadow: var(--shadow-raised);
            padding: var(--space-xl); margin-block: var(--space-xl); }
.descarga--pendiente { border-style: dashed; box-shadow: var(--shadow-none); }
.descarga__estado { color: var(--color-status-caution); font-weight: var(--font-weight-semibold); }

/* ---------------------------------------------------------- corrección */
.correccion { border: var(--border-width-default) solid var(--color-status-caution);
              border-radius: var(--radius-md); padding: var(--space-lg); margin-block: var(--space-xl); }
.correccion__rotulo { font-size: var(--font-size-label); letter-spacing: var(--letter-spacing-label);
                      text-transform: uppercase; font-weight: var(--font-weight-semibold);
                      color: var(--color-status-caution); margin-right: var(--space-sm); }
.correccion__campos dt { font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); }
.correccion__campos dd { margin: 0 0 var(--space-md); }

/* ------------------------------------------------------------ formulario */
.campo { margin-bottom: var(--space-xl); }
.campo label { display: block; font-weight: var(--font-weight-semibold); margin-bottom: var(--space-sm); }
.campo__opcional { font-weight: var(--font-weight-regular); color: var(--color-text-secondary); }
.campo input, .campo select, .campo textarea {
  width: 100%; font: inherit; color: var(--color-text-primary);
  background: var(--color-surface-raised);
  border: var(--border-width-default) solid var(--color-border-strong);
  border-radius: var(--radius-md); padding: var(--space-md);
}
/* El hueco del mensaje de error se reserva SIEMPRE. Mostrarlo y ocultarlo
   desplazaba el botón de envío justo al ir a pulsarlo. */
.campo__error {
  min-height: var(--line-height-body-small);
  margin: var(--space-sm) 0 0;
  color: var(--color-status-stop);
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-body-small);
}
.campo input[aria-invalid="true"],
.campo select[aria-invalid="true"] { border-color: var(--color-status-stop); }

/* El botón de las tres calculadoras iba SIN ESTILO: heredaba el del navegador y
   medía 21 px de alto. Es el control principal de esas páginas y quedaba por
   debajo del mínimo de 24 px para un objetivo táctil.
   Recibe el mismo tratamiento que el resto de acciones del sitio. */
.calculadora button[type="submit"],
form[data-u04-form] button[type="submit"],
form[data-u09-form] button[type="submit"],
form[data-u21-form] button[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center;
  min-block-size: 48px;
  padding: var(--space-sm) var(--space-2xl);
  font: inherit; font-weight: var(--font-weight-semibold);
  color: var(--color-text-inverse); background: var(--acc-600);
  border: var(--border-width-default) solid transparent;
  border-radius: var(--radius-full); cursor: pointer;
  box-shadow: var(--sombra-sutil);
}
.calculadora button[type="submit"]:hover,
form[data-u04-form] button[type="submit"]:hover,
form[data-u09-form] button[type="submit"]:hover,
form[data-u21-form] button[type="submit"]:hover { background: var(--acc-700); box-shadow: var(--sombra-media); }

/* Los campos a 19 px: por debajo de 16 px iOS hace zoom al enfocarlos y deja la
   página desencuadrada. Heredan el cuerpo, así que ya cumplen; se deja escrito
   para que no baje nadie por error. */
.campo input, .campo select, .campo textarea { min-block-size: 48px; font-size: max(16px, 1em); }

.contacto__bloqueado { border: var(--border-width-default) solid var(--color-status-caution);
                       border-radius: var(--radius-md); padding: var(--space-md); }
.contacto button[disabled] { opacity: 0.6; cursor: not-allowed; }
.descargo { color: var(--color-text-secondary); font-size: var(--font-size-body-small); }

/* -------------------------------------------------- región de anuncio
   Lo CONTRARIO de la tarjeta editorial, y a propósito:
     tarjeta  -> surface-raised, elevada, shadow-raised, border-subtle 1.65:1
     región   -> ad-region-surface, HUNDIDA, sin sombra, borde propio 3.43:1
   Compartir superficie fue el defecto de la primera versión de la ficha, y
   viola la guarda 1: un anuncio no puede parecer recomendación del editor. */
.region-anuncio {
  background: var(--color-ad-region-surface);
  border: var(--border-width-default) solid var(--color-ad-region-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-none);          /* NUNCA shadow-raised */
  /* 48 px arriba y abajo respecto al contenido editorial. */
  margin-block: var(--space-3xl);
  padding: var(--space-lg);
}
.region-anuncio__rotulo {
  color: var(--color-ad-region-label);
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
  letter-spacing: var(--letter-spacing-label);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  margin: 0 0 var(--space-sm);
}
/* Alto reservado ANTES de cargar: sin esto la región desplaza el contenido
   que la persona está leyendo, y CLS es una guarda, no una métrica. */
.region-anuncio__hueco { min-height: 250px; display: grid; place-items: center; }
.region-anuncio--inerte .region-anuncio__hueco { min-height: 90px; }
.region-anuncio--inerte .caption { text-align: center; margin: 0; max-width: 46ch; }

/* ------------------------------------------------------ índice de borradores */
.indice__lista { list-style: none; margin: 0 0 var(--space-3xl); padding: 0; display: grid; gap: var(--space-lg); }
.indice__lista li { border-bottom: var(--border-width-hairline) solid var(--color-border-subtle);
                    padding-bottom: var(--space-md); }
.indice__lista .caption { margin: var(--space-xs) 0 0; }
.pie__nota { max-width: 62ch; margin-block: 0 var(--space-lg); }

/* Marcador de dato pendiente en los borradores legales.
   Distinto de .marcador: aquel señala un campo editorial sin aprobar («not
   approved»); este señala un HECHO que todavía no existe —entidad, dominio,
   jurisdicción— y nombra su bloqueador. Se distingue del texto de la política
   para que nadie lo lea como parte de ella, y no solo por color: lleva borde
   propio, porque entre el ámbar y el cuerpo hay poco más de 3:1. */
.pendiente {
  color: var(--color-status-caution);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-2xs);
  font-size: var(--font-size-sm);
  white-space: normal;
}

/* Hoja imprimible de las tres páginas `template`.
   Se sirve como página en vez de PDF: RF-028 CA-2 pide que el enlace nombre
   archivo y formato, no que el archivo sea binario, y una hoja HTML se imprime
   a US Letter al 100 % sin generar nada que después haya que revisar. */
/* `padding-block`, NO el atajo `padding`: el atajo anula el `padding-inline` que
   la vía aplica como margen de página, y la hoja se pegaba a los dos bordes.
   Lo destapó la prueba de desbordamiento a 320 px. */
.hoja-imprimible { padding-block: var(--space-lg); }
.hoja-imprimible__volver { margin-bottom: var(--space-lg); }
.hoja-imprimible .tabla-datos td { height: 2.2rem; }

@media print {
  /* Lo que no es la hoja no se imprime. */
  .no-imprimir, .cabecera, .pie, .region-anuncio, .relacionada { display: none !important; }

  /* Fondo blanco y tinta negra: el papel no tiene tokens, y Warm Paper
     gastaría tóner en cada hoja sin aportar nada. */
  :root { --color-surface-page: #FFF; --color-surface-raised: #FFF; --color-text-primary: #000; }
  body { background: #FFF; color: #000; font-size: 10.5pt; }

  /* Al 100 % en US Letter: márgenes del propio documento, no del navegador. */
  @page { size: letter; margin: 12mm; }

  /* Una fila partida entre dos hojas es una fila que nadie puede rellenar. */
  .hoja-imprimible tr, .hoja-imprimible h2, .hoja-imprimible h3 { break-inside: avoid; }
  .hoja-imprimible h2 { break-before: page; }
  .hoja-imprimible h2:first-of-type { break-before: auto; }

  /* El contenedor desplazable no tiene sentido en papel: la tabla entera. */
  .desplazable { overflow: visible !important; }
  .tabla-datos { width: 100%; border-collapse: collapse; }
  .tabla-datos th, .tabla-datos td { border: 1px solid #000; padding: 2mm; }
}

/* Consentimiento y ajustes de cookies. Ficha: componentes/consentimiento-cookies.md
   Hoy no se renderiza en ninguna página del sitio (RF-033 CA-1); se revisa en
   /_plantillas/consentimiento/. */
.consentimiento {
  position: fixed; inset: auto 0 0 0; z-index: 100;
  display: flex; flex-wrap: wrap; gap: var(--space-md);
  align-items: center; justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  background: var(--color-surface-raised);
  /* Borde superior fuerte, no sombra: el tema es claro y una sombra sobre Warm
     Paper no separa (1.10:1). Misma razón que en la tarjeta editorial. */
  border-top: var(--border-width-emphasis) solid var(--color-border-strong);
}
/* `.boton` no existía: los botones del sitio iban sin estilo. Se define con los
   tokens de acción, sin inventar valores, y se usa SOLO aquí para no cambiar de
   paso el aspecto de las tres calculadoras, que están probadas como están. */
.boton {
  display: inline-flex; align-items: center;
  padding: var(--space-sm) var(--space-lg);
  font: inherit; font-weight: var(--font-weight-semibold);
  color: var(--color-text-inverse); background: var(--color-action-primary);
  border: var(--border-width-default) solid transparent;
  border-radius: var(--radius-md); cursor: pointer;
}
.boton:hover  { background: var(--color-action-hover); }
.boton:active { background: var(--color-action-active); }
.boton:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
.boton--enlace {
  color: var(--color-action-primary); background: none;
  border-color: transparent; text-decoration: underline;
}
.boton--enlace:hover { background: none; color: var(--color-action-hover); }

/* `display: flex` en la clase gana a `[hidden]` de la hoja del navegador, que
   es un `display: none` sobre el selector de tipo. Sin esto el banner se ve
   ANTES de que corra el script —y se sigue viendo después de rechazar—, que es
   justo lo contrario de lo que hace falta. Lo destapó la prueba de CA-4. */
.consentimiento[hidden] { display: none; }

.consentimiento__texto { flex: 1 1 28rem; }

/* En teléfono el banner medía 357 px sobre una pantalla de 390: se comía casi
   media vista y dejaba el pie inalcanzable. Se compacta —texto menor, botones
   en fila que envuelve, relleno ajustado— sin tocar la regla de que aceptar y
   rechazar pesan lo mismo. */
@media (max-width: 640px) {
  .consentimiento { padding: var(--space-md); gap: var(--space-sm); }
  .consentimiento__titulo { font-size: var(--font-size-body); }
  .consentimiento__texto p {
    font-size: var(--font-size-body-small);
    line-height: var(--line-height-body-small);
    margin: 0;
  }
  .consentimiento__acciones { gap: var(--space-sm); width: 100%; }
  /* Aceptar y rechazar comparten ancho: si uno ocupara más, sería un empujón. */
  .consentimiento__acciones .boton { flex: 1 1 8rem; min-width: 0; }
  .consentimiento__acciones .boton--enlace { flex: 1 1 100%; }
}

/* Al desplazar hasta el fondo, el navegador deja el hueco del banner: sin esto
   el último elemento de la página queda justo debajo de él. */
:root { scroll-padding-bottom: 12rem; }
.consentimiento__titulo { font-size: var(--font-size-h4); margin: 0 0 var(--space-2xs); }
.consentimiento__acciones { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* Aceptar y rechazar comparten CLASE, no solo color: RF-033 CA-2 exige que
   rechazar cueste lo mismo que aceptar, y un «rechazar» en texto plano junto a
   un «aceptar» en botón sólido es el patrón oscuro que el criterio prohíbe.
   Solo «Manage» y «Close», que no son la elección, van como enlace. */
.consentimiento__acciones .boton { min-width: 9rem; justify-content: center; }

.panel-consentimiento {
  max-width: 34rem; padding: var(--space-lg);
  border: var(--border-width-default) solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised); color: var(--color-text-primary);
}
.panel-consentimiento::backdrop { background: rgb(23 50 77 / 0.55); }
.panel-consentimiento__lista { list-style: none; padding: 0; margin: var(--space-md) 0; }
.panel-consentimiento__lista li { padding: var(--space-2xs) 0; }
.panel-consentimiento__lista label { display: flex; gap: var(--space-sm); align-items: center; }

@media print { .consentimiento, .panel-consentimiento { display: none !important; } }

/* Portada. Vía completa (1200 px), pero el texto de cada bloque no se ensancha:
   el sistema fija 600 px de lectura y eso no cambia porque sea la home. */
/* Solo los párrafos llevan medida de lectura. Los títulos de sección no la
   necesitan —son cortos— y a 600 px se veían estrechos junto a unas tarjetas de
   1200: la portada corre por la vía completa, que es lo que el sistema le
   asigna. */
.portada > p { max-width: var(--via-lectura); }
.portada__figura { margin: var(--space-xl) 0; }
/* La figura mide 1200 px y su texto más pequeño 11 px: por debajo de 1000 px de
   ancho de visualización deja de leerse, así que se desplaza en vez de encoger.
   Misma regla que las 40 figuras de artículo. */
.portada__figura img { width: 100%; height: auto; }

.portada__etapas { list-style: none; padding: 0; counter-reset: etapa; }
.portada__etapa {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-sm) var(--space-md);
  padding: var(--space-md) 0;
  border-top: var(--border-width-hairline) solid var(--color-border-subtle);
}
.portada__etapa h3, .portada__etapa p { margin: 0; grid-column: 2; }
.portada__numero {
  grid-row: 1 / span 2; align-self: start;
  display: grid; place-items: center; width: 2rem; height: 2rem;
  border-radius: 50%; background: var(--color-surface-sunken);
  border: var(--border-width-default) solid var(--color-border-subtle);
  font-weight: var(--font-weight-semibold);
}

.portada__tarjetas {
  list-style: none; padding: 0; display: grid; gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
/* Toda superficie elevada lleva borde: blanco sobre Warm Paper da 1.10:1, así
   que el relleno solo no la separa del fondo. Regla del sistema, no de aquí. */
.portada__tarjeta {
  padding: var(--space-lg);
  background: var(--color-surface-raised);
  border: var(--border-width-default) solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}
.portada__tarjeta h3 { margin: 0 0 var(--space-sm); font-size: var(--font-size-h4); }
.portada__tarjeta p  { margin: 0; font-size: var(--font-size-body-small); }

.portada__categoria { padding: var(--space-md) 0; }
.portada__clusters {
  margin: var(--space-sm) 0 0;
  font-size: var(--font-size-caption); color: var(--color-text-secondary);
}


/* ============================================================ oficio · 2026-08-30
   Mejoras de IMPLEMENTACIÓN. Ningún valor del sistema de diseño se toca aquí:
   ni un color, ni un tamaño de letra, ni un componente nuevo. Todo sale de los
   tokens que ya existen. */

/* ---------------------------------------------------------- enlace de salto */
.salto {
  position: absolute; left: var(--space-md); top: var(--space-md); z-index: 200;
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-surface-raised); color: var(--color-action-primary);
  border: var(--border-width-default) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  /* Fuera de pantalla pero enfocable: `display: none` lo sacaría del orden de
     tabulación y dejaría de servir para nada. */
  transform: translateY(-200%);
}
.salto:focus-visible { transform: translateY(0); }

/* ------------------------------------------------------------ foco visible
   Un solo anillo para todo el sitio, con el token de foco. Antes cada elemento
   heredaba el del navegador, que sobre Warm Paper contrasta poco. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* -------------------------------------------------------------- enlaces
   Subrayado más fino y separado de la base de la letra: se lee mejor y no
   corta los descendentes de g, p, y. */
.cuerpo a, .portada a, .hoja-imprimible a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.cuerpo a:hover, .portada a:hover { text-decoration-thickness: 2px; }

/* ---------------------------------------------------------------- cabecera
   SIN `position: sticky`, y probado antes de descartarlo: la cabecera mide
   156 px en escritorio y 380 px en teléfono, porque el menú se despliega
   entero y el botón «Menu» no lo pliega. Fijar eso tapa un cuarto de la
   pantalla en escritorio y media en móvil.
   Compactarla exige rehacer el componente header-nav, que tiene ficha propia
   en el sistema de diseño y no se reabre desde el código. Queda como hallazgo.
   Solo se le añade el borde inferior, que sí separa cabecera de contenido. */
.cabecera { border-bottom: var(--border-width-hairline) solid var(--color-border-subtle); }

/* Aire por encima del destino de un ancla, para que el título no aterrice
   pegado al borde. Sin cabecera fija no hay que compensar ningún alto. */
:root { --desplazamiento-ancla: var(--space-xl); }

/* ------------------------------------------------- índice «On this page»
   El índice ya venía en el cuerpo de los 29 artículos, como una lista suelta.
   No es un componente nuevo: es contenido que existía y se presentaba mal.

   En pantallas anchas se va al margen izquierdo, que estaba vacío, y se queda
   fijo mientras se lee. Es lo que responde a que la columna se viera sola en un
   monitor grande, sin tocar la medida de lectura. */
.indice {
  margin-block: 0 var(--space-2xl);
  padding: var(--space-lg);
  background: var(--color-surface-sunken);
  border: var(--border-width-default) solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}
.indice h2 { font-size: var(--font-size-h4); line-height: var(--line-height-h4); margin-block-end: var(--space-md); }
.indice ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.indice a { text-decoration: none; }
.indice a:hover { text-decoration: underline; }

/* 1520 px, no 1440. Medido: a 1440 el índice quedaba a 40 px del borde y el
   margen de página de ese punto de ruptura es de 48. Por debajo se queda en el
   flujo, como caja, que también es mejor que la lista suelta de antes. */
@media (min-width: 1520px) {
  .cuerpo { position: relative; }
  .indice {
    position: absolute;
    inset-inline-start: calc(-1 * (260px + var(--space-2xl)));
    inline-size: 260px;
    margin: 0;
    font-size: var(--font-size-body-small);
    line-height: var(--line-height-body-small);
  }
  .indice__pegajoso { position: sticky; top: calc(var(--desplazamiento-ancla) + var(--space-lg)); }
}

/* --------------------------------------------------------- tarjetas · estados
   Una tarjeta que enlaza tiene que responder al puntero y al teclado. Borde y
   superficie, no sombra ni desplazamiento: el sistema no eleva con sombras y
   prohíbe rebotes. */
.portada__tarjeta { transition: border-color 120ms ease, background-color 120ms ease; }
.portada__tarjeta:hover { border-color: var(--color-border-strong); background: var(--color-surface-page); }
.portada__tarjeta:has(a:focus-visible) { border-color: var(--color-focus-ring); }

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

/* ------------------------------------------------------------- rendimiento
   Las figuras de fuera de pantalla no se maquetan hasta que hacen falta. El
   alto se reserva para que no haya desplazamiento de layout: sin
   `contain-intrinsic-size` esto MEJORA el pintado y EMPEORA el CLS. */
/* `content-visibility` con alto reservado. `auto` como primer valor hace que el
   navegador RECUERDE el alto real tras el primer pintado, en vez de quedarse
   con la estimación; el 520 px es solo el arranque, y las figuras van de 466 a
   1280 de alto. Sin esto se gana pintado y se pierde CLS. */
.figura {
  content-visibility: auto;
  contain-intrinsic-size: auto 520px;
}
/* La imagen conserva su proporción mientras carga, con las dimensiones reales
   que ahora se leen del viewBox de cada SVG. */
.figura img { aspect-ratio: attr(width type(<number>)) / attr(height type(<number>), 1); }
@supports not (aspect-ratio: attr(width type(<number>))) {
  .figura img { height: auto; }
}

/* Cifras tabulares donde el sistema las exige: tablas, resultados y hojas. */
.tabla-datos, .resultado, .hoja-imprimible { font-variant-numeric: tabular-nums; }


/* ═══════════════════════════════════════════ rediseño · 2026-08-30
   Los MATICES no cambian: están incrustados en 40 SVG. Lo que cambia es todo
   lo demás, que es donde vive de verdad la diferencia entre un sitio actual y
   uno de hace diez años: zonificación, elevación, densidad, jerarquía y ritmo.

   ------------------------------------------------------------------ cabecera
   Una sola fila, con la navegación separada del logotipo por espacio y no por
   un salto de línea. Antes envolvía a dos filas incluso a 1600 px porque
   `gap: space-xl` entre seis elementos no cabía. */
/* 1100 px, no 1024. Medido: entre 1024 y 1080 las cinco categorías no caben
   en una fila y la barra pasa a dos, con 103 px de alto fijos en pantalla. La
   ficha del componente promete «barra horizontal» a partir de `md`; entregar
   dos filas ahí no es esa barra. Se mantiene la hamburguesa hasta donde la
   barra es realmente horizontal, que es lo que la ficha describe. */
@media (min-width: 1100px) {
  /* Los espacios CEDEN con el ancho en vez de mover el punto de ruptura, que
     la ficha del componente fija en `md`. Con separaciones fijas la barra
     necesitaba 1045 px y a 1024 se salía de la página por 21. */
  .cabecera__interior {
    gap: clamp(var(--space-md), 2vw, var(--space-2xl));
    padding-block: var(--space-md);
  }
  /* `wrap`, no `nowrap`. Con `nowrap` la barra desbordaba la página al aplicar
     el espaciado de texto de WCAG 1.4.12 —interletrado 0.12em, entrepalabra
     0.16em—: quien usa una hoja de estilo propia por dislexia se encontraba
     scroll horizontal y media navegación fuera de pantalla. El contenido debe
     REFLUIR, no desbordar. Con los espacios elásticos cabe en una fila en uso
     normal, y baja a dos solo cuando el texto se ensancha de verdad. */
  .cabecera__lista { gap: clamp(var(--space-sm), 1.3vw, var(--space-lg)); flex-wrap: wrap; }
  .cabecera__lista a {
    /* El tamaño cede un poco en la franja estrecha —1024 a 1180 px— para que
       las cinco categorías quepan en una fila. Nunca por debajo de 15 px, que
       es el `body-small` del sistema. */
    font-size: clamp(15px, 0.6rem + 0.55vw, var(--font-size-body-small));
    line-height: var(--line-height-body-small);
    padding: var(--space-xs) 0;
    white-space: nowrap;
  }
}

/* ------------------------------------------------------------------ botón
   El botón deja de ser un rectángulo plano. Píldora, sombra sutil y respuesta
   al puntero: es el único elemento del sitio que pide una acción. */
.boton {
  border-radius: var(--radius-full);
  box-shadow: var(--sombra-sutil);
  transition: background-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.boton:hover { box-shadow: var(--sombra-media); }
.boton:active { transform: translateY(1px); box-shadow: var(--sombra-sutil); }
.boton--enlace { box-shadow: none; }
.boton--enlace:hover { box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  .boton { transition: none; }
  .boton:active { transform: none; }
}

/* -------------------------------------------------- llamada a la acción
   Era un enlace subrayado indistinguible del cuerpo. La acción principal de la
   portada tiene que pesar más que una nota al pie. */
.portada__guia a {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-md) var(--space-xl);
  background: var(--acc-600); color: var(--color-text-inverse);
  border-radius: var(--radius-full); text-decoration: none;
  font-weight: var(--font-weight-semibold);
  box-shadow: var(--sombra-sutil);
}
.portada__guia a::after { content: "→"; }
.portada__guia a:hover { background: var(--acc-700); box-shadow: var(--sombra-media); }

/* ---------------------------------------------------------------- figuras
   La figura se enmarca en SU PROPIO fondo, que es el que lleva incrustado.
   Deja de flotar sobre la página y gana un borde que la delimita; y si algún
   día cambia el fondo de página, no hay que regenerar 42 SVG. */
.figura {
  background: var(--color-surface-canvas);
  border: var(--border-width-hairline) solid var(--color-border-subtle-2);
  border-radius: var(--radius-lg);
  /* El marco entero —relleno Y borde— se suma al ancho. El borde de 1 px por
     lado dejaba la figura en 1198 y no en 1200: lo cazó la prueba del lienzo
     nativo, que existe justo para eso. */
  --relleno-salido: var(--space-lg);
  --borde-salido: var(--border-width-hairline);
  padding: var(--relleno-salido);
  box-shadow: var(--sombra-sutil);
}
.figura .caption { margin-block: var(--space-md) 0; }

/* --------------------------------------------------------- bloque destacado
   El `> **Etiqueta:**` que sigue al H1 es la firma editorial del paquete —un
   rótulo distinto por artículo, y hay 29 comprobados—. Se renderizaba como una
   sangría de blockquote, indistinguible de una cita. Ahora es una zona. */
.cuerpo blockquote {
  margin-inline: 0;
  padding: var(--space-lg) var(--space-xl);
  background: var(--color-surface-tinted);
  border: var(--border-width-hairline) solid var(--color-border-accent);
  border-inline-start: var(--border-width-emphasis) solid var(--acc-600);
  border-radius: var(--radius-md);
}
.cuerpo blockquote > :last-child { margin-block-end: 0; }

/* -------------------------------------------------------------- tarjetas */
.portada__tarjeta {
  border-radius: var(--radius-lg);
  box-shadow: var(--sombra-sutil);
}
.portada__tarjeta:hover { box-shadow: var(--sombra-media); border-color: var(--color-border-accent); }

/* ------------------------------------------------------------- las etapas
   Eran una lista con un número dentro de un círculo gris y una regla arriba.
   Ahora son tarjetas en rejilla: la portada enseña el camino de un vistazo en
   vez de pedir que se lea una lista de siete líneas. */
.portada__etapas {
  display: grid; gap: var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.portada__etapa {
  display: block; border: var(--border-width-hairline) solid var(--color-border-subtle-2);
  border-top: var(--border-width-emphasis) solid var(--acc-600);
  border-radius: var(--radius-lg); padding: var(--space-lg);
  background: var(--color-surface-raised); box-shadow: var(--sombra-sutil);
}
.portada__etapa h3 { font-size: var(--font-size-h4); line-height: var(--line-height-h4); margin-block-end: var(--space-xs); }
.portada__etapa h3 a { text-decoration: none; }
.portada__etapa h3 a:hover { text-decoration: underline; }
/* El título del artículo acompaña al nombre de la etapa, sin competir con él. */
.portada__etapa-pagina {
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption); line-height: var(--line-height-caption);
  margin-block-end: var(--space-md) !important;
}
/* En una tarjeta el enlace ya es la tarjeta: subrayarlo por defecto la ensucia. */
.portada__tarjeta h3 a { text-decoration: none; }
.portada__tarjeta h3 a:hover { text-decoration: underline; }
.portada__etapa p { margin: 0; font-size: var(--font-size-body-small); line-height: var(--line-height-body-small); }
.portada__numero {
  display: inline-grid; place-items: center; inline-size: 1.75rem; block-size: 1.75rem;
  margin-block-end: var(--space-md);
  border: 0; border-radius: var(--radius-full);
  background: var(--acc-600); color: var(--color-text-inverse);
  font-size: var(--font-size-caption); font-weight: var(--font-weight-semibold);
}

/* ------------------------------------------------------- índice al margen
   Corrección de un defecto de la pasada anterior: el índice aparecía a media
   página. `position: sticky` dentro de un contenedor absoluto no tiene recorrido
   —el contenedor mide lo que su contenido—, así que no se pegaba a nada: se
   quedaba donde cae en el flujo del artículo, que es después de la entradilla.
   El pegajoso va en el propio elemento posicionado, y arriba del todo. */
@media (min-width: 1520px) {
  .indice {
    inset-block-start: 0;
    background: transparent; border: 0; padding: 0;
    border-inline-start: var(--border-width-default) solid var(--color-border-subtle-2);
    padding-inline-start: var(--space-lg);
  }
  .indice__pegajoso { position: static; }

  /* Con el índice en el margen izquierdo, lo ancho crece SOLO hacia la derecha.
     Antes se ensanchaba a los dos lados por igual y se metía debajo del índice:
     en U01 la tabla del plan del propietario chocaba con las últimas entradas
     del índice en 1520, 1600 y 1920 px. Es el único artículo cuya tabla queda
     lo bastante arriba para solaparse, pero la causa era general. */
  .cuerpo:has(.indice) .figura,
  .cuerpo:has(.indice) > .desplazable {
    /* Al crecer solo hacia un lado, el tope ya no es «el viewport menos dos
       márgenes» sino «lo que queda a la derecha del borde izquierdo del texto».
       Se deriva de los tokens, no se escribe a ojo: la columna está centrada,
       así que su borde izquierdo cae en `50vw - via-lectura/2`, y de ahí al
       margen derecho quedan `50vw + via-lectura/2 - margen`. Sin esto la figura
       de 1200 px se salía de la página en 1520 y 1600. */
    --ancho-exterior: min(
      calc(var(--ancho-salido) + 2 * var(--marco-salido)),
      calc(50vw + var(--via-lectura) / 2 - var(--margen))
    );
    margin-inline: 0 calc(100% - var(--ancho-exterior));
  }
}

/* -------------------------------------------------------------- tablas */
.tabla-datos { border-radius: var(--radius-md); overflow: hidden; }
.cuerpo > .desplazable { box-shadow: var(--sombra-sutil); border-radius: var(--radius-md); }


/* ══════════════════════════════════════ cabecera fija · 2026-08-30
   Pedida por el propietario. Antes se descartó por medición —156 px de alto
   tapaban un cuarto de la pantalla—, y ahora es viable porque el logotipo pasa
   al lockup COMPACTO, que es además lo que el sistema visual exige por debajo
   de 300 px de ancho: el horizontal se mostraba a 220 px con su tagline por
   debajo de 11 px, ilegible. */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--color-surface-page) 92%, transparent);
  border-bottom: var(--border-width-hairline) solid var(--color-border-subtle-2);
}
/* Fondo translúcido solo si el navegador puede difuminar por detrás; si no,
   opaco, porque texto sobre texto no se lee. */
@supports (backdrop-filter: blur(8px)) {
  .cabecera { backdrop-filter: blur(8px); }
}
@supports not (backdrop-filter: blur(8px)) {
  .cabecera { background: var(--color-surface-page); }
}

.cabecera__logo { display: inline-flex; align-items: center; gap: var(--space-sm); text-decoration: none; }
.cabecera__logo img { display: block; }
.cabecera__nombre {
  font-size: var(--font-size-h4); line-height: 1;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}

/* El destino de un ancla no puede quedar debajo de la cabecera. El valor
   acompaña al alto real; si la cabecera cambia de alto, cambia aquí. */
:root { --desplazamiento-ancla: 6.5rem; }

/* WCAG 2.2 · 2.4.11 «foco no oculto».
   Una cabecera fija tapa el elemento que acaba de recibir el foco cuando el
   navegador desplaza para mostrarlo: al tabular hacia abajo, el enlace queda
   DEBAJO de la barra y no se ve dónde está el foco. `scroll-padding-top` hace
   que todo desplazamiento automático —el del foco incluido— deje ese hueco.
   Se comprobó en 7 páginas antes de corregirlo. */
:root { scroll-padding-top: var(--desplazamiento-ancla); }

@media (max-height: 480px) {
  /* En apaisado de teléfono una cabecera fija se come media pantalla. */
  .cabecera { position: static; }
  :root { --desplazamiento-ancla: var(--space-xl); }
}

/* ------------------------------------------------------------ hamburguesa */
.solo-lector {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.cabecera__conmutador { display: none; }
@media (max-width: 1099px) {
  .cabecera__conmutador {
    display: inline-grid; place-items: center;
    inline-size: 44px; block-size: 44px;   /* objetivo táctil de 44 px */
    padding: 0; border-radius: var(--radius-md);
  }
}
.hamburguesa line {
  stroke: var(--color-text-primary); stroke-width: 2; stroke-linecap: round;
  transform-origin: center;
  transition: transform 160ms ease, opacity 120ms ease;
}
/* Abierta, las tres líneas se convierten en aspa. */
[aria-expanded="true"] .hamburguesa__sup { transform: translateY(5px) rotate(45deg); }
[aria-expanded="true"] .hamburguesa__med { opacity: 0; }
[aria-expanded="true"] .hamburguesa__inf { transform: translateY(-5px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .hamburguesa line { transition: none; }
}


/* ══════════════════════════════════════════════ pie · 2026-08-30
   Era una lista con viñetas sobre la misma superficie que el cuerpo, así que no
   cerraba la página: se leía como un párrafo más. Ahora es una zona inversa con
   cuatro columnas.

   Los enlaces van en `text-inverse`, NO en el color de acción: medido, el
   acento sobre el inverso da 4.47:1 y no llega a AA. El texto inverso da 11.94. */
.pie {
  margin-block-start: var(--space-4xl);
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
}
.pie__interior {
  display: grid; gap: var(--space-2xl);
  padding-block: var(--space-3xl) var(--space-2xl);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.pie__marca { display: grid; gap: var(--space-sm); align-content: start; }
.pie__pastilla {
  display: inline-grid; place-items: center;
  inline-size: 44px; block-size: 44px;
  background: var(--color-surface-page); border-radius: var(--radius-md);
}
.pie__nombre {
  margin: 0; font-size: var(--font-size-h4); line-height: 1;
  font-weight: var(--font-weight-semibold); letter-spacing: -0.01em;
}
.pie__tagline {
  margin: 0;
  /* 6.97:1 sobre el inverso. */
  color: color-mix(in oklab, var(--color-text-inverse) 72%, var(--color-surface-inverse));
  font-size: var(--font-size-body-small); line-height: var(--line-height-body-small);
}

.pie__columna { min-width: 0; }
.pie__titulo {
  margin: 0 0 var(--space-md);
  font-size: var(--font-size-caption); line-height: var(--line-height-caption);
  letter-spacing: var(--letter-spacing-label); text-transform: uppercase;
  font-weight: var(--font-weight-semibold);
  color: color-mix(in oklab, var(--color-text-inverse) 72%, var(--color-surface-inverse));
}
.pie__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.pie__lista a {
  color: var(--color-text-inverse); text-decoration: none;
  font-size: var(--font-size-body-small); line-height: var(--line-height-body-small);
}
.pie__lista a:hover { text-decoration: underline; text-underline-offset: 0.18em; }
/* Objetivo táctil. Los enlaces del pie son navegación, no van dentro de una
   frase, así que NO están exentos de la pauta de tamaño: medían 22 px, por
   debajo incluso del mínimo de 24. Los del cuerpo sí están exentos —«el destino
   está en una frase»— y no se tocan: agrandarlos rompería el interlineado. */
.pie__lista a, .pie__privacidad a {
  display: inline-block;
  min-block-size: 44px;
  padding-block: calc((44px - var(--line-height-body-small)) / 2);
}
.pie__inactivo {
  color: color-mix(in oklab, var(--color-text-inverse) 72%, var(--color-surface-inverse));
  font-size: var(--font-size-body-small);
}

.pie__base {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: var(--space-lg);
  align-items: center; justify-content: space-between;
  margin-block-start: var(--space-lg);
  padding-block-start: var(--space-lg);
  /* 3.05:1 sobre el inverso. */
  border-block-start: var(--border-width-hairline) solid
    color-mix(in oklab, var(--color-text-inverse) 38%, var(--color-surface-inverse));
}
.pie__privacidad { margin: 0; }
.pie__privacidad a { color: var(--color-text-inverse); font-size: var(--font-size-body-small); }

/* El anillo de foco por defecto es `focus-ring`, que sobre el inverso no se ve:
   sobre superficie oscura el anillo tiene que ser claro. */
.pie :where(a, button):focus-visible { outline-color: var(--color-text-inverse); }

@media print { .pie { display: none !important; } }


/* ------------------------------------------------- bloques de código
   Los artículos traen diagramas ASCII del proceso. No tenían NINGÚN estilo:
   heredaban la fuente del cuerpo, que es proporcional, así que un diagrama
   alineado con espacios salía torcido. Y sin contenedor empujaban la página a
   894 px en una pantalla de 390. */
.cuerpo pre {
  margin: 0;
  padding: var(--space-lg);
  background: var(--color-surface-sunken);
  border: var(--border-width-hairline) solid var(--color-border-subtle-2);
  border-radius: var(--radius-md);
}
.cuerpo pre code {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-body-small);
  /* Un diagrama alineado con espacios NO se puede envolver: rompe el dibujo.
     Por eso su contenedor se desplaza, que es la excepción a la regla general
     de `overflow-wrap: break-word`. */
  white-space: pre;
  overflow-wrap: normal;
}
/* `code` en línea, dentro de una frase. */
.cuerpo :not(pre) > code {
  font-family: var(--font-family-mono);
  font-size: 0.92em;
  padding: 0.1em 0.35em;
  background: var(--color-surface-sunken);
  border-radius: var(--radius-sm);
}


/* ═══════════════════════════════════ colores forzados · 2026-08-31
   En modo de alto contraste el sistema operativo SUSTITUYE los colores de
   fondo. Todo lo que se identifica solo por `background` desaparece.
   
   Medido en ese modo antes de escribir esto: el pie inverso, el botón
   principal de la portada y los números de etapa se quedaban en blanco sobre
   blanco, sin borde. Un usuario de alto contraste perdía una zona entera de la
   página y dejaba de ver dónde estaba la acción principal.
   
   Las tarjetas y las figuras ya pasaban, porque el sistema exige borde en toda
   superficie elevada —blanco sobre Warm Paper da 1.10:1— y esa regla resulta
   ser también la que las salva aquí. */
@media (forced-colors: active) {
  /* El botón deja de ser un botón sin su relleno: recupera silueta con borde.
     `ButtonText` es el color de sistema para el texto de un control. */
  .boton,
  .portada__guia a,
  .calculadora button[type="submit"],
  form[data-u04-form] button[type="submit"],
  form[data-u09-form] button[type="submit"],
  form[data-u21-form] button[type="submit"] {
    /* `border-style` también: `.portada__guia a` nunca declaró ninguno, y sin
       estilo el ancho no pinta nada. Se veía como borde 0 aunque el color
       estuviera puesto. */
    border-style: solid;
    border-color: ButtonText;
    border-width: var(--border-width-default);
  }

  /* El número de etapa era un círculo relleno; sin relleno, un dígito suelto. */
  .portada__numero { border: var(--border-width-default) solid CanvasText; }

  /* El pie era una zona entera definida por su fondo inverso. */
  .pie { border-block-start: var(--border-width-emphasis) solid CanvasText; }

  /* La cabecera fija se vuelve opaca: translúcida sobre texto no se lee, y
     `backdrop-filter` no se aplica en este modo. */
  .cabecera { background: Canvas; }

  /* Las líneas de la hamburguesa se pintan con el color de texto del sistema. */
  .hamburguesa line { stroke: CanvasText; }

  /* La región de anuncio no puede confundirse con contenido editorial ni aquí:
     la guarda 1 vale en todos los modos de color. */
  .region-anuncio { border: var(--border-width-emphasis) solid CanvasText; }
}

}