/* Header de la landing gracias, OPCIÓN 1 "Cápsula" (6-nov; elegida por Camilo, corregida el 7-nov).
   La cápsula (radio 16, desenfoque de 24 px, borde suave, como la de la página) crece para alojar el logo, los tres
   enlaces A LA VISTA, la memoria (un destacado rosado dentro de la cápsula) y Accesibilidad. Donde los enlaces no
   caben (lo mide header-1.js: tablet vertical, celular, A++ en pantallas angostas), la cápsula queda angosta: logo,
   memoria, Accesibilidad y Menú.
   - CÁPSULA BLANCA con el LOGO ORIGINAL (7-nov, pedido de Camilo: "van a decir que el blanco parece de aplicación";
     eligió la opción 3 del artefacto DqXmUnMd): blanca casi opaca, el logo de color (círculo rojo con la cruz, letras
     negras y el corazón rojo), los enlaces, Accesibilidad y Menú en negro y la memoria en rosado suave. La hoja del
     menú y el panel de Accesibilidad siguen oscuros (la hoja, con la versión oficial del logo para fondo oscuro). Con
     Alto contraste vuelve la cápsula negra con borde blanco, con el logo blanco; con colores forzados el fondo lo
     decide el sistema y también va el logo blanco. Qué archivo de logo va en cada lugar lo decide base.js.
   - Se queda arriba al bajar (position: fixed). En el flujo deja una reserva del mismo alto que la cápsula de hoy
     (52 en celular, 60 desde 40rem y 48 + 8 en el celular apaisado), así el título no baja ni con A++.
   - Dos pieles: blanca al 96 % sobre el rojo y "noche", blanca opaca con una sombra que la despega, en cuanto
     cualquier parte de la cápsula pasa sobre el blanco de los Reportajes o el negro de los Auspiciadores (el nombre
     viene de cuando la cápsula era oscura): header-1.js marca data-sobre.
   - El header en el flujo no recibe punteros (solo la cápsula): con su z-index tapaba el Pausar del celular apaisado.
   - El vidrio va en un ::before, no en la cápsula: un elemento con backdrop-filter es "raíz de fondo" y el panel de
     Accesibilidad, que cuelga de la cápsula, no podría desenfocar la página detrás de él.
   Contrato: ../../CONTRATO.md */

html[data-header="1"] {
  --gh1-top: max(16px, env(safe-area-inset-top));
  --gh1-izq: max(16px, env(safe-area-inset-left));
  --gh1-der: max(16px, env(safe-area-inset-right));
  --gh1-alto-min: 52px;   /* el alto de la cápsula de hoy */
  --gh1-noche: #111;
  --gh1-rojo: #e12d39;    /* el rojo accesible de la página: 4,53:1 sobre blanco */
  --gh1-tinte: var(--tinte, #ffd9dc);
  --gh1-suave: rgba(255, 255, 255, 0.62);
  --gh1-linea: rgba(255, 255, 255, 0.14);
  /* el contenido que se enfoca o al que lleva un enlace queda bajo la cápsula fija (WCAG 2.4.11): header-1.js
     escribe --gh1-bajo (el borde inferior de la cápsula) */
  scroll-padding-top: calc(var(--gh1-bajo, 84px) + 12px);
}
/* celular vertical bajo: la página ya sube su barra a 12 px */
@media (max-width: 39.99rem) and (orientation: portrait) and (max-height: 700px) {
  html[data-header="1"] { --gh1-top: max(12px, env(safe-area-inset-top)); }
}
@media (min-width: 40rem) {
  html[data-header="1"] {
    --gh1-top: max(24px, env(safe-area-inset-top));
    --gh1-izq: max(24px, env(safe-area-inset-left));
    --gh1-der: max(24px, env(safe-area-inset-right));
    --gh1-alto-min: 60px;
  }
}
/* celular apaisado: la cápsula de hoy mide 44 a 12 px del borde; esta mide 48 (los botones de 44 más 2 de aire) y
   sube a 8, así el total sigue en 56 y el título no baja */
@media (orientation: landscape) and (max-height: 520px) {
  html[data-header="1"] {
    --gh1-top: max(8px, env(safe-area-inset-top));
    --gh1-izq: max(16px, env(safe-area-inset-left));
    --gh1-der: max(16px, env(safe-area-inset-right));
    --gh1-alto-min: 48px;
  }
}

/* ---------- el header en el flujo: solo la reserva ---------- */
.gh-header--1 {
  z-index: 60; /* sobre las capas de los Auspiciadores (llegan a 20) y bajo el menú (100) */
  display: block;
  padding: var(--gh1-top) 0 0;
  /* el header ocupa todo el ancho en el flujo; solo la cápsula recibe el toque (en el celular apaisado el Pausar sube
     a la altura de la cápsula y quedaba bajo el header) */
  pointer-events: none;
}
.gh1-reserva { height: var(--gh1-alto, var(--gh1-alto-min)); }
/* sin el distintivo (Camilo lo sacó el 7-nov) el título sube unos 50 a 67 px y queda justo bajo la cápsula. Con A
   el aire de la página basta (28 a 64 px); con A+ y A++ la página achica ese aire para darle lugar a Iaán y en
   1024 el título quedaba a 12 px de la cápsula: se suman 6 y 12 px. No en el celular apaisado (el texto se centra) */
@media (min-width: 40rem) and (min-height: 521px) {
  .gh-header--1 { padding-bottom: calc((var(--a11y-fs, 1) - 1) * 40px); }
}

/* ---------- la cápsula ---------- */
.gh1-barra {
  /* blanca al 96 % desde arriba (opción 3 del artefacto DqXmUnMd): apenas asoma el rojo detrás y el texto negro queda
     sobre 17:1, también al empezar a bajar, cuando la cápsula pasa sobre el título blanco desenfocado */
  --gh1-vidrio: rgba(255, 255, 255, 0.96);
  --gh1-borde: rgba(0, 0, 0, 0.08);
  --gh1-sombra: 0 10px 28px -12px rgba(0, 0, 0, 0.35);
  position: fixed;
  top: var(--gh1-top);
  left: var(--gh1-izq);
  right: var(--gh1-der);
  display: flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  min-height: var(--gh1-alto-min);
  margin-inline: auto;
  /* 2 px arriba y abajo: el alto lo da min-height (el de la cápsula de hoy). Con A++ la memoria crece a 53 y aún
     cabe en los 60, así que la cápsula no crece y el título no baja */
  padding: 2px 4px 2px 6px;
  color: var(--gh1-noche);
  font-family: inherit;
  pointer-events: auto;
}
@media (min-width: 40rem) {
  .gh1-barra { padding-inline: 8px; }
}
.gh1-barra::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 16px;
  background: var(--gh1-vidrio);
  box-shadow: inset 0 0 0 1px var(--gh1-borde), var(--gh1-sombra);
  -webkit-backdrop-filter: blur(24px);
          backdrop-filter: blur(24px);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
/* noche: sobre el blanco de los Reportajes y el negro de los Auspiciadores (y al cruzar entre ellos) blanca opaca, con
   un borde gris suave y una sombra más marcada que la despega del blanco */
.gh1-barra[data-sobre="noche"] {
  --gh1-vidrio: #fff;
  --gh1-borde: rgba(0, 0, 0, 0.1);
  --gh1-sombra: 0 12px 32px -14px rgba(0, 0, 0, 0.45);
}
/* con el menú abierto la cápsula se esconde: la hoja es más angosta que ella en la tablet vertical y asomaban dos
   logos y la hamburguesa junto a Cerrar. base.js quita data-gh-menu antes de devolver el foco a Menú */
html[data-gh-menu] .gh1-barra { visibility: hidden; }

/* el medidor: una copia invisible e inerte que header-1.js usa para saber qué cabe (nunca recibe el foco) */
.gh1-medidor {
  top: 0;
  left: 0;
  right: auto;
  width: max-content;
  margin: 0;
  visibility: hidden;
  pointer-events: none;
}
.gh1-medidor::before { display: none; }

/* ---------- el logo (vuelve al inicio) ---------- */
.gh1-logo {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 40rem) {
  .gh1-logo { padding: 0 12px; }
}
/* .gc-logo (de gracias.css) le da el alto por tamaño (26, 30 y 24) y la inversión con colores forzados claros. El
   archivo lo elige base.js (data-gh-logo dice sobre qué fondo va) */
.gh1-logo .gc-logo { pointer-events: none; }

/* el foco de los controles de la cápsula va hacia ADENTRO: hacia afuera, sobre el blanco de los Reportajes, el anillo
   se perdía en la cápsula angosta del celular. Sobre la cápsula blanca, anillo negro con una franja blanca adentro */
.gh1-barra > .gh-foco:focus-visible,
.gh1-barra .gh1-enlace:focus-visible {
  outline-offset: -3px;
  outline-color: var(--gh1-noche);
  box-shadow: inset 0 0 0 6px #fff;
}
/* la memoria (roja en la cápsula, blanca en el menú): el borde negro y una franja blanca adentro, que en la memoria
   roja se ve como un anillo negro y blanco (un anillo blanco en el borde se fundía con la cápsula) */
.gh1-barra > .gh1-memoria:focus-visible {
  outline-color: var(--gh1-noche);
  box-shadow: inset 0 0 0 5px #fff;
}

/* la raya fina que separa el logo de los enlaces */
.gh1-raya {
  flex: none;
  width: 1px;
  height: 24px;
  margin: 0 6px;
  background: rgba(0, 0, 0, 0.14);
}

/* ---------- los tres enlaces, a la vista ---------- */
.gh1-nav ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gh1-enlace {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  color: var(--gh1-noche);
  font-size: calc(15px * var(--a11y-fs, 1));
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
  .gh1-enlace:hover { background: rgba(0, 0, 0, 0.06); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
}

/* ---------- la memoria: el destacado dentro de la cápsula (blanco en el menú) ---------- */
.gh1-memoria {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  gap: calc(10px * var(--a11y-fs, 1));
  min-height: 44px;
  padding: 6px 14px 6px 10px;
  border-radius: 10px;
  background: #fff;
  color: var(--gh1-noche);
  box-shadow: inset 0 -2px 0 var(--gh1-tinte);
  white-space: nowrap;
  text-decoration: none;
  transition: box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
/* en la cápsula blanca la memoria va en el rojo accesible (7-nov, elección de Camilo entre 5 colores: el rosado
   pálido de la opción 3 no se leía como botón). Texto, ceja, libro y corazón en blanco (4,53:1, AA). Al pasar el
   mouse la raya de abajo va en blanco (la roja no se vería) */
.gh1-barra .gh1-memoria { margin-left: 6px; background: var(--gh1-rojo); color: #fff; box-shadow: none; }
.gh1-barra .gh1-memoria-ceja { color: #fff; }
@media (forced-colors: none) {
  .gh1-barra .gh1-memoria-ico path:first-child { fill: #fff; stroke: #fff; }
  .gh1-barra .gh1-memoria-ico path:last-child { stroke: #fff; }
}
@media (hover: hover) and (pointer: fine) {
  .gh1-barra .gh1-memoria:hover { box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.85); }
}
.gh1-memoria-ico { display: block; flex: none; line-height: 0; }
.gh1-memoria-ico .gh-icon { width: calc(22px * var(--a11y-fs, 1)); height: calc(22px * var(--a11y-fs, 1)); overflow: visible; }
/* el libro con corazón en dos tonos, como la solapa de la portada en vivo: el libro en negro y el corazón en rojo */
.gh1-memoria-ico path:first-child { fill: var(--gh1-rojo); stroke: var(--gh1-rojo); stroke-width: 1.2; transform-box: fill-box; transform-origin: 50% 60%; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.gh1-memoria-ico path:last-child { stroke: var(--gh1-noche); }
.gh1-memoria-textos { display: flex; flex-direction: column; gap: 1px; }
.gh1-memoria-ceja {
  color: var(--gh1-rojo);
  font-size: calc(12px * var(--a11y-fs, 1));
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.gh1-memoria-rotulo {
  font-size: calc(15px * var(--a11y-fs, 1));
  font-weight: 800;
  line-height: 1.15;
}
.gh1-corto { display: none; }
[data-memoria="corto"] .gh1-memoria .gh1-largo { display: none; }
[data-memoria="corto"] .gh1-memoria .gh1-corto { display: inline; }
/* solo el libro (celular, celular apaisado y escritorios muy angostos): la pastilla rosada de 44 px con el libro y el
   corazón; el texto queda para el lector (oculto a la vista, nunca display:none, o el enlace pierde su nombre) y el
   ícono no crece con A++, así la cápsula no sube de alto */
[data-memoria="libro"] .gh1-memoria { justify-content: center; width: 44px; padding: 0; gap: 0; }
[data-memoria="libro"] .gh1-memoria .gh1-memoria-textos {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
[data-memoria="libro"] .gh1-memoria-ico .gh-icon { width: 22px; height: 22px; }
@media (hover: hover) and (pointer: fine) {
  .gh1-memoria:hover { box-shadow: inset 0 -2px 0 var(--gh1-rojo); }
  .gh1-memoria:hover .gh1-memoria-ico path:first-child { transform: scale(1.14); }
}
.gh1-memoria:focus-visible .gh1-memoria-ico path:first-child { transform: scale(1.14); }

/* ---------- botones redondos: Accesibilidad, Menú y Cerrar ----------
   El área de toque mide 44; el círculo que se ve, 40 (::before), así respira dentro de la cápsula */
.gh1-redondo {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.gh1-redondo::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.5);
  transition: background-color 0.15s ease;
}
.gh1-redondo .gh-icon { position: relative; }
@media (hover: hover) and (pointer: fine) {
  .gh1-redondo:hover::before { background: rgba(255, 255, 255, 0.16); }
}
/* en la cápsula blanca, Accesibilidad y Menú van en negro; Cerrar, en la hoja oscura del menú, sigue blanco */
.gh1-barra .gh1-redondo { color: var(--gh1-noche); }
.gh1-barra .gh1-redondo::before { box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.32); }
@media (hover: hover) and (pointer: fine) {
  .gh1-barra .gh1-redondo:hover::before { background: rgba(0, 0, 0, 0.06); }
}
/* con el panel abierto, Accesibilidad se llena de negro (el panel que cuelga de él también es oscuro). Con el mismo
   peso que el hover y después de él: con el puntero encima no debe volver al círculo claro con el ícono blanco */
.gh1-barra .gh1-a11yboton[aria-expanded="true"] { color: #fff; }
.gh1-barra .gh1-a11yboton[aria-expanded="true"]::before { background: var(--gh1-noche); box-shadow: none; }
/* abierto y con el foco de teclado (Shift+Tab desde el panel vuelve al botón) el círculo se achica: pegado al anillo
   del foco, del mismo color, solo crecía 2 px y el foco no se notaba. Así quedan el anillo, la franja de la cápsula y
   el círculo (con Alto contraste, lo mismo en blanco) */
.gh1-barra .gh1-a11yboton[aria-expanded="true"]:focus-visible::before { inset: 6px; }
.gh1-barra .gh1-a11yboton { margin-left: 8px; }
.gh1-barra[data-modo="completo"] .gh1-a11yboton { margin-left: 6px; }

/* ---------- qué se ve en cada modo (lo decide header-1.js midiendo) ---------- */
.gh1-barra:not([data-modo="completo"]) .gh1-nav,
.gh1-barra:not([data-modo="completo"]) .gh1-raya { display: none; }
.gh1-barra[data-modo="completo"] .gh1-menuboton { display: none; }
.gh1-barra[data-memoria="no"] .gh1-memoria,
.gh1-barra:not([data-memoria]) .gh1-memoria { display: none; }

/* ---------- el panel de Accesibilidad: cuelga de la cápsula, en vidrio oscuro (como la hoja del menú) ---------- */
.gh-header--1 .gh-a11y {
  --gh-a11y-fondo: rgba(12, 12, 12, 0.86);
  --gh-a11y-pista: rgba(255, 255, 255, 0.12);
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  translate: -50% 0;
  max-height: calc(100vh - var(--gh1-bajo, 84px) - 24px);
  max-height: calc(100dvh - var(--gh1-bajo, 84px) - 24px);
  overflow-y: auto;
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(24px);
          backdrop-filter: blur(24px);
  text-align: left;
  white-space: normal;
}
/* 344 (no 320): con A, "Tamaño del texto" cabe en una línea junto a A, A+ y A++ */
.gh-header--1 .gh-a11y:not(.gh-a11y--linea) { width: min(344px, calc(100vw - 32px)); }
/* con los enlaces a la vista la cápsula es ancha: el panel se alinea a su borde derecho, bajo el botón */
.gh1-barra[data-modo="completo"] .gh-a11y { left: auto; right: 0; translate: none; }

/* ---------- el menú: la cápsula que se abre en una hoja de vidrio oscuro ---------- */
.gh1-menu {
  padding: var(--gh1-top) var(--gh1-der) max(24px, env(safe-area-inset-bottom)) var(--gh1-izq);
  background: rgba(0, 0, 0, 0.42);
  color: #fff;
  font-family: "Duplet Rounded", "Duplet Respaldo", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.gh1-menu:not([hidden]) { animation: gh1-velo 0.2s ease; }
.gh1-hoja {
  position: relative;
  isolation: isolate;
  width: min(100%, 460px);
  margin: 0 auto;
  padding: 0 0 20px;
}
.gh1-hoja::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 16px;
  background: rgba(10, 10, 10, 0.84);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 24px 60px -20px rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(28px);
          backdrop-filter: blur(28px);
}
/* sin fill-mode: una animación de opacidad que queda aplicada vuelve a la hoja "raíz de fondo" y su vidrio deja de
   desenfocar la página (se leía el título detrás del menú). Así el desenfoque vuelve al terminar la entrada */
.gh1-menu:not([hidden]) .gh1-hoja { animation: gh1-abrir 0.26s cubic-bezier(0.16, 1, 0.3, 1); transform-origin: 50% 0; }
@keyframes gh1-velo { from { background-color: rgba(0, 0, 0, 0); } }
@keyframes gh1-abrir { from { opacity: 0; transform: translateY(-6px) scale(0.97); } }

/* la fila de arriba repite la cápsula: el logo a la izquierda y Cerrar donde estaba Menú */
.gh1-hoja-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--gh1-alto-min);
  padding: 2px 4px 2px 16px;
}
@media (min-width: 40rem) {
  .gh1-hoja-cabeza { padding-inline: 20px 8px; }
}
.gh1-hoja-cuerpo { padding: 4px 20px 0; }
@media (min-width: 40rem) {
  .gh1-hoja-cuerpo { padding-inline: 24px; }
}
.gh1-grupo {
  margin: 20px 0 4px;
  color: var(--gh1-suave);
  font-size: calc(12px * var(--a11y-fs, 1));
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.gh1-grupo:first-child { margin-top: 8px; }
.gh1-lista { margin: 0; padding: 0; list-style: none; }
.gh1-lista li + li { border-top: 1px solid var(--gh1-linea); }
.gh1-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 8px 2px;
  border-radius: 8px;
  color: #fff;
  font-size: calc(17px * var(--a11y-fs, 1));
  font-weight: 400;
  line-height: 1.25;
  text-decoration: none;
}
.gh1-fila .gh-icon { flex: none; opacity: 0.7; }
@media (hover: hover) and (pointer: fine) {
  .gh1-fila:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
  .gh1-fila:hover .gh-icon { opacity: 1; }
}
/* la memoria en el menú: el mismo destacado, a lo ancho */
.gh1-menu .gh1-memoria {
  justify-content: flex-start;
  min-height: 56px;
  margin-top: 20px;
  padding: 10px 14px 10px 12px;
  white-space: normal;
}
.gh1-menu .gh1-memoria .gh1-memoria-textos { flex: 1; }
.gh1-menu .gh1-memoria > .gh-icon { flex: none; color: var(--gh1-noche); opacity: 0.6; }
.gh1-menu .gh1-memoria-rotulo { font-size: calc(16px * var(--a11y-fs, 1)); }
.gh1-menu .gh1-memoria + nav .gh1-grupo { margin-top: 28px; }
/* Accesibilidad en línea, al final */
.gh1-hoja-a11y {
  margin-top: 20px;
  padding-top: 4px;
  border-top: 1px solid var(--gh1-linea);
}
.gh1-hoja-a11y .gh-a11y { --gh-a11y-pista: rgba(255, 255, 255, 0.12); }
.gh1-hoja-a11y .gh-a11y-titulo { margin: 16px 0 4px; }

/* ---------- movimiento reducido y Pausar animaciones (base.css ya corta lo de adentro) ---------- */
@media (prefers-reduced-motion: reduce) {
  .gh1-barra::before,
  .gh1-redondo::before,
  .gh1-enlace,
  .gh1-menu:not([hidden]) { transition: none !important; animation: none !important; }
}
html[data-rm] .gh1-barra::before,
html[data-rm] .gh1-redondo::before,
html[data-rm] .gh1-enlace,
html[data-rm] .gh1-menu:not([hidden]) { transition: none !important; animation: none !important; }

/* pantallas muy bajas (zoom de 200 a 400 %, celular chico apaisado): la cápsula fija ocupaba hasta el 22 % de la
   pantalla al leer. Ahí se queda arriba del hero y se va con el scroll */
@media (max-height: 360px) {
  html[data-header="1"] { scroll-padding-top: 12px; }
  .gh1-barra { position: absolute; }
}

/* ---------- alto contraste: fondos negros y bordes blancos de 2 px ----------
   La cápsula vuelve a ser la negra de antes de la Cápsula blanca (con el logo blanco, que pone base.js): aquí se
   devuelve el texto blanco, los botones blancos y el foco blanco que la cápsula blanca cambió a negro */
html[data-contraste="1"] .gh1-barra::before {
  background: #000;
  box-shadow: inset 0 0 0 2px #fff;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}
html[data-contraste="1"] .gh1-barra,
html[data-contraste="1"] .gh1-enlace,
html[data-contraste="1"] .gh1-barra .gh1-redondo { color: #fff; }
html[data-contraste="1"] .gh1-redondo::before { box-shadow: inset 0 0 0 2px #fff; }
@media (hover: hover) and (pointer: fine) {
  html[data-contraste="1"] .gh1-barra .gh1-redondo:hover::before { background: rgba(255, 255, 255, 0.16); }
}
html[data-contraste="1"] .gh1-barra .gh1-a11yboton[aria-expanded="true"] { color: var(--gh1-noche); }
html[data-contraste="1"] .gh1-barra .gh1-a11yboton[aria-expanded="true"]::before { background: #fff; }
/* el foco, blanco hacia adentro con su sombra */
html[data-contraste="1"] .gh1-barra > .gh-foco:not(.gh1-memoria):focus-visible,
html[data-contraste="1"] .gh1-barra .gh1-enlace:focus-visible {
  outline-color: #fff;
  box-shadow: inset 0 0 0 6px rgba(0, 0, 0, 0.6);
}
/* la memoria es negra con un borde blanco de 2 px: un anillo blanco simple solo corría ese borde 3 px hacia adentro
   y el foco casi no se notaba. Va un anillo doble, blanco, negro y blanco (7 px, cabe también en el libro de 44) */
html[data-contraste="1"] .gh1-barra > .gh1-memoria:focus-visible {
  outline-color: #fff;
  box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 5px #000, inset 0 0 0 7px #fff;
}
html[data-contraste="1"] .gh1-raya { background: #fff; }
html[data-contraste="1"] .gh1-enlace:hover { background: #000; }
html[data-contraste="1"] .gh1-memoria { background: #000; color: #fff; box-shadow: inset 0 0 0 2px #fff; }
html[data-contraste="1"] .gh1-memoria-ceja { color: #fff; }
html[data-contraste="1"] .gh1-memoria-ico path:first-child { fill: #fff; stroke: #fff; }
html[data-contraste="1"] .gh1-memoria-ico path:last-child,
html[data-contraste="1"] .gh1-menu .gh1-memoria > .gh-icon { stroke: #fff; color: #fff; opacity: 1; }
html[data-contraste="1"] .gh-header--1 .gh-a11y { -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-contraste="1"] .gh1-menu { background: rgba(0, 0, 0, 0.7); }
html[data-contraste="1"] .gh1-hoja::before {
  background: #000;
  box-shadow: inset 0 0 0 2px #fff;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}
html[data-contraste="1"] .gh1-grupo { color: #fff; }
html[data-contraste="1"] .gh1-lista li + li,
html[data-contraste="1"] .gh1-hoja-a11y { border-color: #fff; }
html[data-contraste="1"] .gh1-fila .gh-icon { opacity: 1; }
/* base.css le pone caja blanca a todo panel de Accesibilidad con alto contraste; en línea (sin relleno) esa caja
   cortaba el título: aquí la separación ya la da la línea de arriba */
html[data-contraste="1"] .gh1-hoja-a11y .gh-a11y { background: none; box-shadow: none; }

/* sin transparencias (preferencia del sistema): la cápsula blanca opaca y los paneles oscuros, opacos */
@media (prefers-reduced-transparency: reduce) {
  .gh1-barra,
  .gh1-barra[data-sobre="noche"] { --gh1-vidrio: #fff; }
  .gh1-barra::before,
  .gh-header--1 .gh-a11y,
  .gh1-hoja::before { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .gh-header--1 .gh-a11y { --gh-a11y-fondo: #0d0d0d; }
  .gh1-hoja::before { background: #0d0d0d; }
}

/* sin backdrop-filter (navegadores viejos): al quedarse arriba, la cápsula pasa sobre el título blanco al bajar y,
   sin desenfoque, las letras de atrás se cruzarían con las del header. Blanca opaca */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .gh1-barra,
  .gh1-barra[data-sobre="noche"] { --gh1-vidrio: #fff; }
  .gh-header--1 .gh-a11y { --gh-a11y-fondo: #0d0d0d; }
  .gh1-hoja::before { background: #0d0d0d; }
}

/* ---------- colores forzados: bordes de sistema ----------
   El fondo de la cápsula lo pone el sistema (Canvas): base.js pone el logo blanco y gracias.css lo invierte con el
   esquema claro. Los selectores llevan también la variante con alto contraste, que pesa más */
@media (forced-colors: active) {
  .gh1-barra::before,
  .gh1-hoja::before { border: 1px solid CanvasText; }
  .gh1-redondo::before { border: 2px solid ButtonText; }
  .gh1-raya { background: CanvasText; }
  .gh1-memoria { border: 2px solid LinkText; }
  .gh1-memoria-ico path:first-child { fill: LinkText; stroke: LinkText; }
  .gh1-memoria-ico path:last-child { stroke: LinkText; }
  .gh1-barra .gh1-a11yboton[aria-expanded="true"]::before,
  html[data-contraste="1"] .gh1-barra .gh1-a11yboton[aria-expanded="true"]::before { forced-color-adjust: none; background: Highlight; }
  .gh1-barra .gh1-a11yboton[aria-expanded="true"],
  html[data-contraste="1"] .gh1-barra .gh1-a11yboton[aria-expanded="true"] { forced-color-adjust: none; color: HighlightText; }
  /* el anillo del foco, del color de sistema (el negro de la cápsula blanca lo pisaba) */
  .gh1-barra > .gh-foco:focus-visible,
  .gh1-barra .gh1-enlace:focus-visible,
  html[data-contraste="1"] .gh1-barra > .gh-foco:not(.gh1-memoria):focus-visible,
  html[data-contraste="1"] .gh1-barra > .gh1-memoria:focus-visible,
  html[data-contraste="1"] .gh1-barra .gh1-enlace:focus-visible { outline-color: Highlight; }
  .gh1-hoja-a11y .gh-a11y { border: 0; }
}