/* ============================================================
   MENÚ ÚNICO DE OMNIDATA — 19-ago-2026

   🔴 POR QUÉ EXISTE

   Había CUATRO menús distintos conviviendo:

     · el home            6 entradas
     · biblioteca.html    4 entradas y otro CTA
     · las de recursos    2 entradas… y ocultas: su hoja traía
                          `.nav .lk{display:none}` declarado dos
                          veces, así que en esas landings el menú
                          era sólo el logo

   ⚠️ NO ESCRIBIR RUTAS CON COMODÍN EN ESTE COMENTARIO. Poner
   «recursos/» seguido de asterisco y barra cierra el comentario
   ahí mismo: la hoja sigue cargando, casi todo sigue funcionando
   y sólo desaparece la primera regla que venga detrás. Pasó el
   19-ago-2026 — se perdió `.om-nav` entera, el menú se quedó sin
   fondo ni z-index, y en móvil el panel salía transparente con
   el texto de la página leyéndose por debajo.
     · los 15 artículos   NINGUNA entrada, sólo un CTA

   Es decir: quien entraba por un artículo —la puerta natural
   desde buscadores— no tenía forma de recorrer el sitio. No es
   una molestia estética; es tráfico que llega y no puede avanzar.

   🔴 POR QUÉ CLASES `om-` Y NO LAS EXISTENTES

   Cada página trae su propio CSS embebido con `.nav`, `.nav-in`
   y `.nav-cta`, y no significan lo mismo en todas. Reutilizar
   esos nombres habría hecho que el menú heredara reglas
   distintas según dónde se pintara —incluido ese `display:none`
   que ya escondía los enlaces—. Con un prefijo propio, el
   componente se ve idéntico en las 22 páginas y no hay que
   auditar la hoja de cada una.

   🔴 EL DESPLIEGUE MÓVIL NO USA JAVASCRIPT

   Va con checkbox + `:checked`. Estas páginas no cargan
   `main.js`, así que un menú que dependiera de JS habría que
   portarlo 22 veces; y si el script fallara, el visitante se
   quedaría sin navegación en el sitio entero.

   ⚠️ El CTA vive DENTRO del `<ul>`, como último elemento. Es lo
   que permite que en escritorio quede a la derecha y en móvil
   caiga dentro del panel desplegable sin duplicar el marcado ni
   sacarlo de flujo.

   El home mantiene su propio `<nav>` porque está atado al motor
   de idioma de `main.js` — pero muestra las mismas 6 entradas,
   el mismo orden y el mismo CTA.
   ============================================================ */

.om-nav {
  position: sticky; top: 0; z-index: 200;
  background: rgba(6, 9, 10, .88);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border, #1c2420);
  font-family: 'Inter', system-ui, sans-serif;
}
.om-nav-in {
  max-width: 1120px; margin: 0 auto; padding: 0 32px;
  display: flex; align-items: center; height: 70px;
}

.om-logo { display: flex; align-items: center; flex: 0 0 auto; }
.om-logo img { height: 30px; display: block; }

.om-links {
  display: flex; align-items: center; gap: 30px;
  list-style: none; margin: 0 0 0 auto; padding: 0;
}
.om-links > li { display: flex; align-items: center; }
.om-links a {
  font-size: 13px; font-weight: 500; letter-spacing: .3px;
  color: var(--gr, #8ea09a); text-decoration: none;
  transition: color .2s; white-space: nowrap;
}
.om-links a:hover { color: var(--wh, #f0ece4); }
/* La página en la que estás se marca en bronce: sin esto, en un sitio
   de una sola columna se pierde la noción de dónde se está. */
.om-links a.om-act { color: var(--acc, #c8845a); }

.om-cta-li { margin-left: 4px; }
.om-links a.om-cta {
  font-size: 12px; font-weight: 600;
  color: #1a0e08; background: var(--acc, #c8845a);
  padding: 11px 22px; border-radius: 100px;
  transition: opacity .2s;
}
.om-links a.om-cta:hover { opacity: .88; color: #1a0e08; }

/* ---------- Interruptor del móvil ---------- */
.om-menu-t { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.om-burger { display: none; }

@media (max-width: 900px) {
  .om-nav-in { padding: 0 20px; height: 62px; }

  .om-burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    margin-left: auto; width: 40px; height: 40px; padding: 9px 8px;
    cursor: pointer; border-radius: 8px;
  }
  .om-burger span {
    display: block; height: 1.5px; width: 100%;
    background: var(--wh, #f0ece4); border-radius: 2px;
    transition: transform .25s, opacity .2s;
  }
  /* Aspa al abrir: da el estado sin necesidad de leer nada. */
  .om-menu-t:checked ~ .om-burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .om-menu-t:checked ~ .om-burger span:nth-child(2) { opacity: 0; }
  .om-menu-t:checked ~ .om-burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  .om-links {
    position: fixed; left: 0; right: 0; top: 62px;
    flex-direction: column; align-items: stretch; gap: 0;
    margin: 0; padding: 0;
    background: var(--bg, #06090a);
    border-bottom: 1px solid var(--border, #1c2420);
    /* Se pliega con `max-height` en vez de `display` para que la
       apertura tenga transición; `display` no se puede animar. */
    max-height: 0; overflow: hidden;
    transition: max-height .3s ease;
  }
  .om-menu-t:checked ~ .om-links { max-height: 85vh; overflow-y: auto; }
  .om-links > li { border-top: 1px solid var(--border, #1c2420); display: block; }
  .om-links a { display: block; padding: 16px 20px; font-size: 15px; }

  .om-cta-li { margin: 0; padding: 16px 20px 22px; }
  .om-links a.om-cta {
    display: block; text-align: center;
    padding: 14px 20px; font-size: 13px;
  }
}

/* ============================================================
   SELECTOR DE IDIOMA — 19-ago-2026

   🔴 POR QUÉ ESTÁ AQUÍ Y NO EN CADA PÁGINA

   El multilenguaje existía sólo en el home. Al entrar a la
   biblioteca o a un artículo desaparecía el selector, y como la
   elección se guarda en `localStorage`, quien había puesto EN
   seguía leyendo español SIN forma de cambiarlo: la preferencia
   quedaba registrada y desatendida.

   Va dentro del `<ul>`, delante del CTA, por lo mismo que el CTA:
   en escritorio queda a la derecha y en móvil cae dentro del panel
   desplegable sin duplicar marcado.

   ⚠️ CLASE PROPIA (`om-lang`) Y NO `.lang-btn`. El home tiene
   `.lang-btn` definido en `styles.css` con sus propios colores y
   tamaños. Reutilizar el nombre haría que el selector se viera de
   una forma en el home y de otra en las internas, o peor: que
   heredara reglas de la hoja embebida de cada página.

   🔴 COLORES EN LITERAL, NO `var(--acc)`. Es la cicatriz del pie
   (19-ago): `--gr` vale `#8ea09a` en las internas y `#3a4c44` en
   `styles.css`. Con `var(--gr, respaldo)` el respaldo NUNCA entra
   —la variable existe en ambas— y el componente sale con el color
   equivocado justo donde la variable difiere. Un componente que se
   inserta en páginas ajenas no usa las variables de la página.
   ============================================================ */

.om-lang-li { margin-left: 6px; }

.om-lang-sw {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 8px;
  border: 1px solid #1c2420; border-radius: 100px;
}

.om-links .om-lang,
.om-lang {
  /* `button` no hereda tipografía del documento: sin esto el selector
     sale en la fuente del sistema junto a un menú en Inter. */
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11.5px; font-weight: 600; letter-spacing: .6px;
  background: none; border: 0; padding: 3px 4px;
  /* 🔴 #8ea09a y no #5f716b. El gris apagado daba 3.9:1 sobre el fondo del
     menú —por debajo del 4.5 de AA— y el idioma INACTIVO es justo el que hay
     que poder leer: es el que el visitante busca para cambiarse a él. */
  color: #8ea09a; cursor: pointer;
  line-height: 1; transition: color .2s;
}
.om-lang:hover { color: #f0ece4; }
.om-lang.active { color: #c8845a; }
/* La barra separadora se midió en 1.58:1: invisible. Sube a 4.5:1 en vez de
   ampararse en que es decorativa —un separador que no se ve no separa. */
.om-lang-sep { color: #71807b; font-size: 11px; line-height: 1; }

.om-lang:focus-visible {
  outline: 2px solid #c8845a; outline-offset: 2px; border-radius: 4px;
}

/* En pantallas muy estrechas el logo sigue siendo el ancla de vuelta. */
@media (max-width: 360px) {
  .om-nav-in { padding: 0 14px; }
  .om-logo img { height: 26px; }
}

@media (max-width: 900px) {
  /* Dentro del panel desplegable el selector deja de ser un adorno de la
     barra y pasa a ser una fila más: se centra y se separa del CTA, que
     va justo debajo. El `padding` de `.om-links a` no le alcanza —es un
     `button`, no un enlace—, así que se le da el suyo. */
  .om-lang-li { margin: 0; padding: 14px 20px 4px; }
  .om-links .om-lang-sw { justify-content: center; padding: 6px 12px; }

  /* 🔴 `.om-links .om-lang` Y NO `.om-lang` A SECAS.
     La regla de arriba se declara como `.om-links .om-lang, .om-lang` —(0,2,0)
     y (0,1,0)—. Un `.om-lang` suelto aquí dentro pesa (0,1,0) y PIERDE contra
     la primera, aunque venga después y dentro de una media query: el orden
     sólo decide cuando la especificidad empata. El resultado eran botones de
     18px de alto en móvil, con el CSS móvil escrito y sin efecto.

     Es la misma cicatriz del 19-ago con `.mob-nav a` (0,1,1) ganándole a
     `.btn-p` (0,1,0). Segunda vez.

     El tamaño no es estético: 24px es el mínimo de WCAG 2.2 (2.5.8) para algo
     que se pulsa con el dedo. 13px de texto + 6px de relleno arriba y abajo. */
  .om-links .om-lang { font-size: 13px; padding: 6px 10px; }
}