/* ============================================================
   all.min.css — LA HOJA QUE FALTABA

   🔴 POR QUÉ EXISTE ESTE ARCHIVO

   25 de las 30 páginas la cargaban y no existía: ni en este
   paquete, ni en el sitio anterior, ni en producción (404
   comprobado). El home era la única página que no la pedía, así
   que el fallo no se veía entrando por la portada — sólo al abrir
   un artículo o una página de solución, donde 72 clases quedaban
   sin ninguna definición.

   No se pudo recuperar: del sitio anterior sólo 9 de esas 72
   clases eran rescatables. El resto se reconstruyó leyendo el
   marcado real de cada componente, no inventando nombres.

   ⚠️ El nombre lleva «.min» por compatibilidad con lo que las
   páginas ya enlazan, pero NO está minificada a propósito: es
   código que habrá que mantener y leerlo importa más que ahorrar
   3 KB. No renombrar sin actualizar las 25 páginas.

   🔴 NO REDEFINE NADA. Todo se apoya en las variables y clases que
   ya existen en `styles.css` e `internal.css` (--ink, --coral,
   --acid, --gold, --teal, --green, --blue, --line, --sans…). Si
   una regla de aquí choca con las suyas, la equivocada es ésta.
   ============================================================ */

/* ---------- Las variables que se usaban sin declarar ----------

   🔴 EL ALCANCE REAL: 13 variables, 976 usos.

   La primera auditoría encontró tres (`--dark-line`, `--red`, `--ease`).
   Contando también el HTML —muchas van en `style=` inline— aparecen diez
   más, y no son marginales: `--gray2` con 274 usos, `--radius` con 120,
   `--border` con 96.

   Comprobado en navegador sobre `insights.html`: las tarjetas salían con
   `background` transparente, `border-radius: 0px` y el borde en NEGRO —
   `1px solid var(--border)` sin declarar cae a `currentColor`, que ahí es
   la tinta del texto. No un matiz: un borde negro de caja.

   ⚠️ SON RESTOS DE UN TEMA OSCURO. El rediseño movió las páginas internas
   a la paleta clara y las tapó a base de `!important` en `internal.css` y
   las hojas `*-redesign.css`. Donde el `!important` llega, no se nota;
   donde no llega —sobre todo los `style=` inline del HTML— queda a la
   vista. Por eso se declaran en CLARO: el tema oscuro ya no existe, y
   darles valores oscuros rompería justo lo que hoy funciona.

   `--white` conserva el nombre que usa el marcado, pero significa «el
   color de máximo contraste sobre el fondo», que en este tema es la
   tinta. Renombrarlo obligaría a tocar 46 sitios sin ganar nada. */
:root {
  --dark-line: rgba(255, 255, 255, .18);
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* Acentos. El matiz sale de los `rgba()` que este mismo archivo ya usaba
     en `.hci-gold`, `.hci-teal`, `.hci-blue` y `.hci-green` — la paleta que
     el rediseño dio por buena. La LUMINOSIDAD, no: aquellos valores nacieron
     para fondos al 12 % de opacidad, y sobre el crema del tema claro dan
     entre 2,1:1 y 2,9:1 como texto. Se oscurecen hasta pasar 4,5:1 sobre
     `--paper`, `--paper2` y `--surf2`, que son los tres fondos posibles.
     Medido, no estimado. */
  --gold:  #7d5e1f;   /* 5,24:1 sobre --paper */
  --teal:  #1b625d;   /* 6,20:1 */
  --blue:  #3a5c8f;   /* 5,89:1 */
  --green: #2c6d4a;   /* 5,39:1 */
  --red:   #a8443a;   /* 5,15:1 */

  /* Superficies: la tarjeta tiene que separarse del fondo, y el fondo
     alterno (`--paper2`) del principal (`--paper`). */
  --surf:  #ebe7dd;
  --surf2: #faf8f3;
  --border: var(--line);

  /* Texto secundario. Parte de los grises que `internal.css` ya aplica a
     mano, ajustados igual que los acentos: `--gray2` gobierna 274 textos
     —es el gris de casi todos los párrafos de apoyo— y el primer valor
     probado (#6c7976) se quedaba en 3,51:1 sobre `--paper2`. Aquí no cabe
     tratarlo como decoración: es el cuerpo del texto. */
  --white: var(--ink);
  /* 🔴 Los tres valen lo mismo a propósito. El primer intento los graduó
     —#53615f, #5b6966, #62706d— y medido en navegador los dos más claros
     se quedaban en 4,45:1 y 4,01:1 sobre `--paper2`, el fondo alterno.
     Una gradación de gris que nadie distingue no vale un texto por debajo
     del mínimo: se igualan al único tono que pasa sobre los tres fondos. */
  --gray:  #53615f;   /* 5,64:1 sobre --paper · 5,02:1 sobre --paper2 */
  --gray2: #53615f;
  --muted: #53615f;

  --radius: 14px;
  --radius-lg: 20px;
}

/* ---------- Acentos de color ----------
   `.eyebrow` ya existe; esto son sólo sus variantes cromáticas, y
   lo mismo para las tarjetas de hub de /insights/. */
.eyebrow-gold  { color: var(--gold); }
.eyebrow-teal  { color: var(--teal); }
.eyebrow-blue  { color: var(--blue); }
.eyebrow-green { color: var(--green); }
.gold          { color: var(--gold); }

.hc-gold  { border-top: 3px solid var(--gold); }
.hc-teal  { border-top: 3px solid var(--teal); }
.hc-blue  { border-top: 3px solid var(--blue); }
.hc-green { border-top: 3px solid var(--green); }

.hci-gold  { background: rgba(197, 160, 89, .12);  color: var(--gold); }
.hci-teal  { background: rgba(45, 156, 148, .12);  color: var(--teal); }
.hci-blue  { background: rgba(90, 132, 194, .12);  color: var(--blue); }
.hci-green { background: rgba(74, 165, 116, .12);  color: var(--green); }

/* ---------- Escalonado de la aparición ----------
   `.reveal` y `.visible` los gobierna el JS; esto sólo reparte el
   retardo para que los bloques no entren todos a la vez.
   Se anula con `prefers-reduced-motion`, igual que hace styles.css. */
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }
.reveal-delay-4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  .reveal-delay-1, .reveal-delay-2, .reveal-delay-3, .reveal-delay-4 { transition-delay: 0s; }
}

/* ---------- Familia de tarjetas de contenido ----------
   Diez componentes con el mismo esqueleto: una etiqueta pequeña en
   color (`-label` / `-num` / `-week`), un título y un párrafo. Se
   declaran juntos porque son el mismo objeto con distinto nombre
   según el artículo; separarlos multiplicaría el mantenimiento. */
.audit-card, .gap-card, .compare-card, .component-card, .mechanic-card,
.layer-card, .scenario-card, .diag-card, .signal-card, .tech-card {
  border: 1px solid var(--line);
  border-left: 3px solid var(--coral);
  background: #fff;
  padding: 26px 28px;
  margin: 18px 0;
}

.audit-num, .gap-label, .compare-card-label, .component-num, .mechanic-label,
.layer-label, .scenario-week, .diag-num, .tech-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 10px;
}

.audit-title, .gap-title, .component-title, .mechanic-title,
.layer-title, .scenario-state, .diag-title, .signal-title, .tech-title {
  font-family: var(--sans);
  font-size: clamp(18px, 2vw, 23px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.02em;
  margin-bottom: 10px;
}

.audit-checks, .gap-desc, .component-desc, .mechanic-desc,
.layer-desc, .scenario-desc, .diag-desc, .signal-desc, .tech-desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: #5b6966;
}

/* `audit-checks` enumera comprobaciones: se distingue del resto. */
.audit-checks {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-top: 14px;
  font-size: 14px;
}

/* ---------- Fórmulas ----------
   Una fórmula que no se puede leer no explica nada: monoespaciada,
   con contraste y separada del cuerpo. */
.formula-box {
  background: var(--ink);
  color: #fff;
  padding: 24px 26px;
  margin: 22px 0;
}
.formula {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(15px, 1.8vw, 20px);
  font-weight: 600;
  color: var(--acid);
  letter-spacing: -.01em;
}
.formula-note {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--dark-line);
  font-size: 14px;
  line-height: 1.7;
  color: var(--mist);
}

/* ---------- Comparaciones a dos columnas ---------- */
.compare-row, .two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 22px 0;
}
.compare-row .compare-card { margin: 0; }
/* La segunda columna es siempre la deseable: se marca en positivo. */
.compare-row .compare-card:last-child { border-left-color: var(--green); }

.check-box {
  border: 1px solid var(--line);
  background: #fff;
  padding: 24px 26px;
}
.check-box-title {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 12px;
}
.check-box ul { margin: 0; padding-left: 18px; }
.check-box li { padding: 5px 0; font-size: 14px; line-height: 1.6; color: #5b6966; }
/* `.bad` marca la columna de lo que NO funciona. */
.check-box.bad { border-left: 3px solid var(--red); }

/* ---------- Señales de alarma ----------
   Van en rojo pero con barra lateral además del color: el criterio
   no puede depender sólo del tono. */
.red-flag {
  border-left: 3px solid var(--red);
  background: rgba(248, 113, 113, .06);
  padding: 14px 18px;
  margin: 10px 0;
  font-size: 15px;
  line-height: 1.65;
}

/* ---------- Tensión entre dos incentivos ---------- */
.tension-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--line);
  margin: 22px 0;
}
.tension-side {
  padding: 26px 28px;
  font-size: 15px;
  line-height: 1.7;
  color: #5b6966;
}
.tension-side + .tension-side { border-left: 1px solid var(--line); }
.tension-label {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* ---------- Etiquetas de caso ---------- */
.case-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

/* ---------- Piezas sueltas ---------- */
.principle-content { min-width: 0; }          /* evita el desbordamiento en grid */
.orbit-one { inset: 0; }                       /* la órbita exterior del diagrama */
.btn-sm { padding: 11px 16px; font-size: 12px; }
.recommendation-prev, .recommendation-next {
  width: 42px; height: 42px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-size: 19px;
  cursor: pointer;
  transition: .2s;
}
.recommendation-prev:hover, .recommendation-next:hover {
  background: var(--ink); color: var(--acid); transform: translateY(-2px);
}

/* ---------- 🔴 Desbordamiento horizontal en móvil ----------
   `styles.css` declara `em{white-space:nowrap}` para que el subrayado
   decorativo del hero no se parta en dos líneas. En pantallas anchas es
   correcto; por debajo de ~760px hace que los títulos que llevan <em> se
   salgan del viewport.

   Medido con iframes de ancho real (no con --window-size, que NO cambia el
   viewport CSS y da falsos verdes): a 360px, `casos-de-exito` se salía 91px
   y `sistema-de-revenue` 233px.

   ⚠️ No se ve como scroll lateral porque `body` lleva `overflow-x:hidden`.
   Es peor que un scroll: el texto queda CORTADO y nadie lo nota. */
@media (max-width: 760px) {
  h1 em, h2 em, .page-hero em, .section-head em, .inner-head em { white-space: normal; }
}

/* ---------- Móvil ---------- */
@media (max-width: 760px) {
  .compare-row, .two-col, .tension-block { grid-template-columns: 1fr; }
  .tension-side + .tension-side { border-left: 0; border-top: 1px solid var(--line); }
  .audit-card, .gap-card, .compare-card, .component-card, .mechanic-card,
  .layer-card, .scenario-card, .diag-card, .signal-card, .tech-card { padding: 22px 20px; }
  .formula-box { padding: 20px; }
}

/* ---------- «Haz tu diagnóstico»: el CTA del menú ----------
   Sustituye al antiguo enlace «Recursos». Se distingue del resto de la
   navegación a propósito: es la única acción de la barra que lleva a una
   herramienta, no a una página de lectura.

   🔴 `styles.css` esconde del menú los enlaces 4, 5 y 6 por debajo de
   1180px para que la barra no se amontone. El diagnóstico es ahora el
   cuarto — o sea, justo el que desaparecía en un portátil de 1366px con
   el navegador a media pantalla. Se repone: puede caerse Insights, puede
   caerse Contacto (está en el pie y en el WhatsApp flotante); el CTA no. */
.desktop-nav a.nav-diag {
  background: var(--acid);
  color: var(--ink);
  border-radius: 999px;
  padding: 8px 15px;
  font-weight: 700;
  white-space: nowrap;
}
.desktop-nav a.nav-diag:after { display: none; }
.desktop-nav a.nav-diag:hover { background: #c9f24a; }

@media (max-width: 1180px) {
  .desktop-nav a.nav-diag { display: inline-block; }
}

/* En el menú móvil es una lista vertical: la pastilla se queda, pero
   alineada a la izquierda como sus hermanos, sin ocupar todo el ancho. */
.mobile-menu a.nav-diag {
  align-self: flex-start;
  background: var(--acid);
  color: var(--ink);
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 700;
}

/* ---------- Variantes de `.badge` ----------
   74 badges en el sitio repartidos en cuatro colores… y ninguna de las
   cuatro variantes tenía regla: `internal.css` define `.badge` con
   `color:#53615f!important` y las cuatro salían del MISMO gris. El
   código decía cuatro categorías y la pantalla mostraba una.

   Se usa `!important` sólo porque `.badge` lo usa: sin él, la base gana
   por orden y el color de variante no llega nunca. */
.badge-gold  { color: var(--gold)  !important; border-color: rgba(197, 160, 89, .45)  !important; background: rgba(197, 160, 89, .10)  !important; }
.badge-teal  { color: var(--teal)  !important; border-color: rgba(45, 156, 148, .45)  !important; background: rgba(45, 156, 148, .10)  !important; }
.badge-blue  { color: var(--blue)  !important; border-color: rgba(90, 132, 194, .45)  !important; background: rgba(90, 132, 194, .10)  !important; }
.badge-green { color: var(--green) !important; border-color: rgba(74, 165, 116, .45) !important; background: rgba(74, 165, 116, .10) !important; }

/* Botón pequeño: 3 usos, ninguna regla. Hereda de `.btn` y sólo encoge. */
.btn-sm { padding: 10px 16px; font-size: 12.5px; }

/* ---------- Las zonas oscuras vuelven a tener texto legible ----------

   El sitio es claro, pero conserva secciones sobre `--deep`: la banda de
   logos, los bloques de caso, el pie, las tiras de CTA. Declarar en `:root`
   `--white: var(--ink)` acierta en el 95 % de la página y se equivoca justo
   ahí, donde el rol «texto de máximo contraste» significa lo contrario.

   ⚠️ `--white` no es un color, es un ROL, y su valor depende del fondo. Un
   token de rol declarado una sola vez sólo puede acertar en un tema. Aquí
   se redeclara el grupo dentro de cada contenedor oscuro.

   🔴 CUÁNTO ARREGLA, MEDIDO: en `casos-de-exito.html`, 54 → 50 elementos
   por debajo del mínimo AA. Cuatro. La primera medición decía doce, y once
   de aquellos eran contenedores SIN texto propio: heredaban un color que
   ningún píxel llegaba a pintar. Se anotan los cuatro reales y no los doce
   que parecían: una regla justificada con una cifra inflada envejece peor
   que no tener regla. */
.cases,
.logo-band,
.method-band,
.cta-strip,
.related-box,
.contact-form,
.case-cta-inline,
.case-reading-guide,
.platform-card,
.stat-card,
.other-projects-section,
.dossier-grid > aside,
.footer, .site-footer,
article[id] .grid-4 > div,
.solution-page .case-header,
.solution-page .kpi-card,
.solution-page .comp-header,
.solution-page .cta-strip,
.solution-page .footer {
  --white: #ffffff;
  --gray:  #c3ccc9;
  --gray2: #b3bfbb;   /* 8,2:1 sobre --deep */
  --muted: #9aa8a4;
  --border: var(--dark-line);
  --surf:  rgba(255, 255, 255, .05);
  --surf2: rgba(255, 255, 255, .07);
  /* Los acentos se oscurecieron para el fondo crema; sobre verde oscuro
     hay que devolverlos a su versión luminosa o desaparecen. */
  --gold:  #e0bc74;
  --teal:  #6fd0c7;
  --blue:  #93b6e8;
  --green: #7ed3a4;
  --red:   #f19a90;
}


/* ---------- Los grises que se quedaron a un pelo ----------
   Cuatro tonos escritos como literales en `styles.css`,
   `cases-redesign.css` y `methodology-redesign.css`, así que el ajuste de
   `--gray2` no los alcanzó. Medidos en navegador: entre 4,25:1 y 4,48:1.
   Todos por debajo de 4,5:1 y por poco, que es el peor sitio donde estar:
   nadie los ve mal y aun así ningún texto de apoyo cumple.

   Se igualan al mismo tono que el resto. Cambia la luminosidad, no el
   matiz — el gris verdoso de la marca se conserva. */
.section-index,
.system-list p,
.hero-evidence span,
blockquote small         { color: #53615f; }
article[id] h2 + p,
.compare-table .col-bad  { color: #53615f !important; }

/* El bloque «El operador» va sobre coral, y ahí `styles.css` pinta el
   antetítulo con `--acid`: verde lima sobre naranja, 2,41:1. En el bloque
   de casos —fondo `--deep`— ese mismo acid funciona; sobre coral, no. Se
   resuelve con tinta, que sobre coral da 6,8:1 y no rompe la identidad:
   el acid sigue siendo el acento de la marca en todos los fondos oscuros. */
.authority .section-index { color: var(--ink); }

/* ---------- El CTA de diagnóstico pasó a la barra de acciones ----------
   Dejó de ser un ítem de menú (entre «Sistema de Revenue» e «Insights») para
   ser un botón, entre el conmutador de idioma y WhatsApp.

   🔴 El estilo de pastilla estaba escrito como `.desktop-nav a.nav-diag`, con
   el selector anclado al contenedor. Al mudarlo a `.nav-tools` perdió el fondo,
   el radio y el peso: quedaba como texto suelto junto a los botones. La regla
   se repite aquí en lugar de reescribir la de arriba porque aquélla sigue
   sirviendo a las páginas que aún no se hayan migrado. */
.nav-tools a.nav-diag {
  background: var(--acid);
  color: var(--ink);
  border-radius: 999px;
  padding: 8px 15px;
  font-weight: 700;
  white-space: nowrap;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.nav-tools a.nav-diag:after { display: none; }
.nav-tools a.nav-diag:hover { background: #c9f24a; }

/* En el bloque de herramientas del móvil la fila es horizontal: el
   `align-self:flex-start` heredado de cuando era un ítem de lista vertical
   lo empujaba hacia arriba y lo descuadraba respecto a ES/EN y WhatsApp. */
.mobile-tools a.nav-diag { align-self: center; padding: 8px 15px; }

/* Entre 900 y 1000px los cinco ítems del menú y la barra de acciones caben,
   pero se rozan: «Contacto» quedaba pegado al conmutador de idioma. El menú
   respira reduciendo su propio hueco interno antes que perder secciones.
   Por debajo de 900px toma el relevo el menú hamburguesa. */
@media (max-width: 1000px) {
  .topbar { padding: 0 16px; }
  .desktop-nav { gap: 17px; font-size: 12px; }
  .nav-tools { margin-left: 10px; gap: 8px; }
  .nav-tools a.nav-diag { padding: 8px 12px; }
  .nav-tools .nav-wa { padding: 8px 12px; }
}

/* 🔴 El nombre no se parte. Al apretar la barra en pantallas medianas, «Cesar
   Baz» caía a dos líneas y la marca quedaba en «Cesar / Baz». Antes que romper
   el nombre, se aprieta cualquier otra cosa. */
.topbar .brand { white-space: nowrap; }

/* ---------- El menú pasa a hamburguesa antes: a 960px, no a 900 ----------
   Con cinco secciones y tres acciones (idioma, diagnóstico, WhatsApp), entre
   900 y 960px la barra ya no cabe: la marca se pegaba a «Casos de Éxito» y
   WhatsApp tocaba el borde. Antes cabía porque el CTA vivía dentro del menú y
   por debajo de 1180px se ocultaban tres ítems — a costa de dejar «Insights» y
   «Contacto» inalcanzables.

   Se replica aquí el bloque que `styles.css` aplica a 900px en lugar de mover
   aquel breakpoint: ese mismo media query lo comparten el explorador de casos,
   las pestañas y otros componentes que sí deben cambiar a 900. Esta hoja se
   carga la última en las seis plantillas, así que gana por orden. */
@media (max-width: 960px) {
  .desktop-nav, .nav-tools, .nav-cta { display: none !important; }
  /* Las propiedades del botón (tamaño, sin fondo, barras separadas) viven
     dentro del media de 900 en styles.css. Declarar sólo `display` dejaba
     un botón con el estilo por defecto del navegador: un óvalo gris con
     las dos barras pegadas. Se replican enteras. */
  .menu-button {
    display: flex !important; background: none; border: 0;
    width: 42px; height: 42px; flex-direction: column;
    justify-content: center; gap: 7px;
  }
  /* Y sus dos barras: fuera del media de 900 salían con altura 0 y fondo
     transparente, así que el botón existía, ocupaba sus 42px y era
     invisible. Un menú que no se ve es un menú que no está. */
  .menu-button i { height: 1px; width: 24px; background: var(--ink); display: block; }
  .mobile-menu {
    display: flex; position: fixed; z-index: 25; inset: 80px 0 auto;
    background: var(--paper); padding: 28px; flex-direction: column; gap: 22px;
    border-bottom: 1px solid var(--line); transform: translateY(-130%); transition: .3s;
  }
  .mobile-menu.open { transform: none; }
  .mobile-tools { display: flex; align-items: center; gap: 15px; padding-top: 15px; }
}

/* ============================================================
   WHATSAPP SIEMPRE VERDE — 19-ago-2026

   🔴 `.btn-wa` tenía SIETE definiciones repartidas entre cuatro hojas de
   rediseño, todas con `!important`, y ganaba la última cargada: crema en
   las landings, tinta en los casos. El botón cambiaba de color según la
   página, y en ninguna de esas era verde.

   WhatsApp es una marca reconocible por su color: si el botón no es verde,
   el usuario no sabe qué va a pasar al pulsarlo. Se fija aquí porque este
   archivo es el último que carga en TODAS las páginas — comprobado una a
   una, no supuesto.
   ============================================================ */
/* La clase se repite a propósito: reglas como `.cta-strip .btn-wa` tienen
   especificidad (0,2,0) y ganaban a un `.btn-wa` simple aunque cargara
   después. Repetirla sube a (0,3,0) sin recurrir a un ID ni a más
   !important — el !important ya lo tienen todas, así que la pelea se
   decide por especificidad. */
.btn-wa.btn-wa.btn-wa,
a.btn-wa.btn-wa,
button.btn-wa.btn-wa,
.nav-wa.nav-wa.nav-wa,
a.nav-wa.nav-wa{
  background:#31c96b!important;
  border-color:#31c96b!important;
  color:#fff!important;
}
.btn-wa.btn-wa *,
.nav-wa.nav-wa *{ color:#fff!important; }
.btn-wa.btn-wa:hover,
.nav-wa.nav-wa:hover{ background:#27ae5c!important; border-color:#27ae5c!important; }

/* ============================================================
   NAVEGACIÓN DE CASOS EN MÓVIL — 19-ago-2026

   🔴 `nav.case-jump > .container` es un flex de 5 enlaces que medía 850px
   dentro de una pantalla de 390: los casos 03, 04 y 05 quedaban fuera y
   NO se podía llegar a ellos — el contenedor no permitía desplazarse y el
   body recorta el desbordamiento. En la página que sostiene la autoridad,
   tres de los cinco casos eran invisibles en móvil.

   Se resuelve con `wrap` y no con scroll horizontal: un carrusel lateral
   sin indicación visible es fácil de no descubrir, y aquí lo que importa
   es que se vean los cinco de un vistazo.
   ============================================================ */
@media (max-width:760px){
  .case-jump .container{
    flex-wrap:wrap!important;
    gap:8px!important;
    justify-content:flex-start!important;
  }
  .case-jump .container > a{ flex:0 0 auto!important; }
}