/* monitor-ui reference.md §§2–5. Prefijo propio: no colisionar con el HTML envuelto. */
:root{--primary:#266FE0;--blue-dark:#184D9B;--blue-light:#E7F0FF;--ink:#171B21;--muted:#626A78;--line:#E5E7EB;--bg:#F5F5F5;--ok:#10B981;--warn:#F59E0B;--err:#EF4444;--violet:#8B5CF6;--cyan:#06B6D4;--footer:#121212;--white:#fff;--header-h:64px;--positive:#166534;--negative:#991B1B}
html,body{background:var(--bg);color:var(--ink);font-family:'Hanken Grotesk',system-ui,sans-serif;font-feature-settings:'tnum' 1;scrollbar-gutter:stable}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:4px}
/* §4.2 — el skip link también respeta el padding lateral: a 16px quedaba 8px
   corrido respecto del wordmark desde 640. */
.mu-skip{position:fixed;top:-80px;left:16px;z-index:100;background:var(--white);padding:12px;color:var(--blue-dark)}.mu-skip:focus{top:8px}
@media(min-width:640px){.mu-skip{left:24px}}
.mu-wrap{max-width:1100px;margin:0 auto;padding:0 16px}
/* §5.1.1 — la franja declara que el corpus se procesó con IA. Va en TODAS las
   páginas y NO es sticky: el que se queda pegado es el header. Usa el mismo
   contenedor y el mismo padding lateral que la barra del header, así el texto se
   alinea con el wordmark. El subrayado del nombre no es decoración: en una
   franja de una línea, sin él nadie lo lee como enlace y nadie lo toca. El peso
   440 exige el eje variable de la fuente; con las instancias estáticas 400 y 500
   el navegador redondea a 500, que es +25% donde se pedía +10%. */
.mu-ia{background:var(--ink);color:#FAFAFA}
.mu-ia .mu-wrap{display:flex;align-items:center;justify-content:center;gap:8px;
  padding-top:7px;padding-bottom:7px;
  font:440 11px/1.4 'JetBrains Mono',monospace;letter-spacing:.02em}
.mu-ia img{width:15px;height:15px;flex:none;display:block}
.mu-ia a{color:inherit;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.mu-ia a:hover{text-decoration-thickness:2px}
.mu-header{background:var(--white);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
/* §5.1 — la barra mide 64px en TODOS los anchos, y ese alto ES el token: lo
   que se pegue bajo el header (las subpestañas del host, §5.14) se ancla a
   --header-h y no a un 64 copiado a mano. Sin padding vertical: la norma
   centra en 64px y el padding empujaba el wordmark de 46px a otro renglón. */
.mu-bar{height:var(--header-h);display:flex;flex-wrap:nowrap;align-items:center;gap:16px}
.mu-brand{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);line-height:1.05;flex:0 1 auto;min-width:0}
/* Marca con logo: el ícono y el wordmark en fila. Reemplaza al par
   <strong>/<small> de texto, que no llevaba identidad gráfica. */
/* El icono se alinea con la línea «Monitor Presupuesto», NO con el centro del
   bloque de dos líneas: con «by Unholster» adentro, centrar el conjunto dejaba
   el icono mirando al hueco entre las dos líneas.
   0.2153 es el centro de esa primera línea medido sobre el SVG: su tinta va de
   la fila 0 (alto de mayúscula) a la 161 (línea de base) de 374 — lo que sigue
   hasta la 206 es el descendente de la «p», que no cuenta para el eje óptico.
   Baja el wordmark en vez de subir el icono: sin márgenes negativos la caja de
   la marca sigue siendo su alto real y .mu-bar la centra sin desbalancear. */
.mu-brand-img{flex-direction:row;align-items:flex-start;gap:9px;--ico-h:28px;--wm-h:34px}
.mu-brand-ico{width:var(--ico-h);height:var(--ico-h);display:block;flex:none}
/* §5.1 — icono 32px y wordmark en dos pasos: 26 bajo 360, 34, y 46 desde 640.
   El SVG del wordmark lleva el viewBox recortado a su tinta; sin eso
   `height:46px` dibujaba 39px de marca y 7px de aire, y el lockup quedaba 2px
   bajo el centro óptico del icono.
   El icono NO lleva el -translate-y-[20%] de la norma: ese es el ajuste óptico
   del icono de MMP. Medida la tinta de ESTE archivo, está centrada en su caja
   (10,6% arriba / 7,5% abajo); subirlo un 20% lo despegaría del wordmark.
   max-width + object-fit son red: entre 361 y 375px la marca a 34px y las dos
   acciones dejan 2px de holgura y cualquier scrollbar se la come. */
.mu-brand-wm{height:var(--wm-h);width:auto;max-width:100%;object-fit:contain;object-position:left center;display:block;
  margin-top:calc(var(--ico-h) / 2 - var(--wm-h) * 0.2153)}
@media(max-width:360px){.mu-brand-img{--wm-h:26px}}
@media(min-width:640px){.mu-brand-img{--wm-h:38px}}


.mu-nav{display:flex;align-items:center;gap:2px;flex:0 1 auto;min-width:0;margin-left:auto}
.mu-nav>*{flex:none}
/* §5.1.4 — las acciones viven FUERA del nav de escritorio: ese nav se esconde
   bajo 1024px y se llevaría el buscador con él. Los dos íconos miden 18px y su
   área táctil 44px. El selector de idioma no va: features.languages = false. */
.mu-acciones{display:flex;align-items:center;flex:none}
@media(max-width:1199px){.mu-nav{display:none}.mu-acciones{margin-left:auto}}
.mu-header .mu-pill{font-family:inherit;font-size:14px;font-weight:500;letter-spacing:normal;text-transform:none;padding:8px 12px;color:var(--muted);border-radius:6px;text-decoration:none;white-space:nowrap}
/* Valeurs de la referencia: deuda sistémica de contraste del estado activo, §2.2. */
.mu-header .mu-pill:hover{background:var(--bg);color:var(--primary)}.mu-header .mu-pill[aria-current=page]{background:var(--blue-light);color:var(--primary)}
.mu-search{position:relative;display:flex;align-items:center;justify-content:flex-end;width:44px;flex:none}
/* El disparador queda fijo a la derecha y el campo crece hacia la IZQUIERDA:
   por eso el input va absoluto anclado a `right` y no en el flujo — creciendo
   en el flujo empujaría la navegación cada vez que se abre. */
.mu-search-abrir{width:44px;height:44px;flex:none;border-radius:8px;display:inline-flex;
  align-items:center;justify-content:center;color:var(--muted);z-index:2;border:0;background:none;cursor:pointer}
.mu-search-abrir svg{width:18px;height:18px}
@media(max-width:1199px){.mu-search-abrir svg{width:20px;height:20px}}
.mu-search-abrir:hover{background:var(--bg);color:var(--ink)}
/* Con el campo abierto la lupa deja de ser un botón suelto y pasa a cerrar el
   campo: el gris de hover se leía como un bloque pegado a su borde derecho. */
.mu-search[data-abierta="1"] .mu-search-abrir,
.mu-search[data-abierta="1"] .mu-search-abrir:hover{color:var(--primary);background:none}
.mu-search input{position:absolute;right:44px;top:50%;transform:translateY(-50%);
  width:0;opacity:0;pointer-events:none;padding:7px 0;font-size:14px;
  border:1px solid var(--line);border-radius:8px;background:var(--white);
  transition:width .22s ease,opacity .16s ease,padding .22s ease}
.mu-search[data-abierta="1"] input{width:min(420px,44vw);opacity:1;pointer-events:auto;padding:7px 34px 7px 12px}
/* El foco global es un contorno a 3px de distancia: sobre un campo apretado en
   la barra se lee como una segunda caja azul suelta. Acá va pegado al campo,
   como halo, y el borde se queda gris. */
.mu-search input:focus,.mu-search input:focus-visible{outline:none;border-color:var(--line);
  box-shadow:0 0 0 3px rgb(38 111 224 / .15)}
/* El campo abierto se monta sobre la barra: con la navegación visible tapaba
   «Cadena nacional» y «Metodología» a medias. Mientras está abierto, la barra
   deja solo la marca y el propio buscador. */
.mu-bar:has(.mu-search[data-abierta="1"]) .mu-nav{display:none}
/* El `margin-left:auto` que empuja las acciones a la derecha lo pone el nav;
   sin él, el buscador abierto se pegaba a la marca y el campo la tapaba. */
.mu-bar:has(.mu-search[data-abierta="1"]) .mu-acciones{margin-left:auto}
/* La × aparece dentro del campo apenas hay texto. El campo se abre encima de la
   barra y es angosto: sin ella hay que borrar carácter por carácter para volver
   atrás. Se muestra y se esconde con el atributo `hidden`, que ya tiene su regla
   con !important arriba. */
.mu-search-limpiar{position:absolute;right:52px;top:50%;transform:translateY(-50%);
  width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;
  border:0;background:none;cursor:pointer;color:var(--muted);border-radius:6px;z-index:3}
.mu-search-limpiar:hover{color:var(--ink);background:var(--bg)}
.mu-search-limpiar svg{width:14px;height:14px;display:block}
.mu-search button,.mu-menu summary,.mu-top{font:inherit;border:0;background:none;cursor:pointer;color:var(--ink)}
.mu-suggestions{position:absolute;top:calc(100% + 4px);right:0;width:min(420px,calc(100vw - 32px));background:var(--white);border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 30px #171b211a;z-index:40;max-height:340px;overflow:auto}
.mu-suggestions a{display:block;padding:10px 12px;color:var(--ink);text-decoration:none;font-size:13px;border-bottom:1px solid var(--line)}.mu-suggestions a:hover{background:var(--blue-light)}
/* §5.1.5 y §5.2 — menú full-screen sobre <details> nativo. Antes esta hoja
   describía un menú que el generador nunca emitía: bajo 1024px las puertas se
   iban a un segundo renglón y el header pasaba de 64px a 110 (y a 167 en 320). */
.mu-menu{display:none;flex:none}
@media(max-width:1199px){.mu-menu{display:block}}
.mu-menu>summary{list-style:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;color:var(--ink)}
.mu-menu>summary::-webkit-details-marker{display:none}
.mu-menu>summary:hover{background:var(--bg)}
/* Los íconos de acción del header móvil van a 20px por decisión del equipo,
   no a los 18 de §5.1.4. La X del menú sigue a la hamburguesa: son el mismo
   control abierto y cerrado. Desvío anotado en MONITOR.md. */
.mu-menu svg,.mu-menu-cerrar svg{width:20px;height:20px;display:block}
/* El panel se apaga con `display` en vez de confiar en el <details>: con el
   menú cerrado Chrome mantiene ::details-content con contención de layout,
   que se vuelve bloque contenedor del `position:fixed` — el panel quedaba
   maquetado colgando del summary (medido: el logo del pie del menú a 78px
   fuera del padding lateral a 320px). No se ve, porque el subárbol no se
   pinta, pero el chequeo de §4.2 lo encuentra y el layout se calcula igual. */
.mu-menu-panel{display:none;position:fixed;inset:0;z-index:50;background:var(--white);flex-direction:column;overflow:auto;overscroll-behavior:contain}
.mu-menu[open]>.mu-menu-panel{display:flex}
/* §5.1.5, la trampa del margen auto: si esta barra reusara .mu-wrap heredaría
   su `margin:0 auto`, y en una columna flex un margen lateral auto anula el
   stretch — la barra se encoge al ancho de su contenido y la divisoria deja de
   llegar a los bordes de la pantalla. Por eso lleva caja y padding propios. */
.mu-menu-bar{flex:none;height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 16px;border-bottom:1px solid var(--line)}
.mu-menu-cerrar{width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;border:0;background:none;border-radius:8px;cursor:pointer;color:var(--ink)}
.mu-menu-cerrar:hover{background:var(--bg)}
/* El menú APLANA lo que el header agrupa: un submenú dentro de un submenú no
   tiene dónde abrirse, y una puerta que solo existe dentro de un desplegable
   no se encuentra. Mismo criterio que «Explorar» en el pie. */
.mu-menu-nav{flex:1 0 auto;padding:0 16px}
.mu-menu-nav h2{font:10px 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin:22px 0 2px}
.mu-menu-nav a{display:flex;align-items:center;min-height:44px;padding:11px 0;font-size:17px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.mu-menu-nav a[aria-current=page]{color:var(--primary);font-weight:600}
/* Puerta suelta: sin su propio aire queda pegada al último hijo del grupo
   anterior y se lee como parte de él. Mismo respiro que el rótulo de grupo. */
.mu-menu-nav a.mu-menu-solo{margin-top:22px}
/* §5.2 — el menú cierra con la marca de la casa, la misma de la barra inferior
   del pie. El SVG viene en #EEEEF0, hecho para fondo oscuro: sobre el panel
   blanco necesita brightness(0), no la inversión que usa el pie. */
.mu-menu-pie{flex:none;padding:28px 16px calc(28px + env(safe-area-inset-bottom))}
.mu-menu-pie img{height:24px;width:auto;display:block;filter:brightness(0);opacity:.8}
.mu-menu-pie img:hover{opacity:1}
@keyframes mu-menu-pop{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:translateX(0)}}
@keyframes mu-menu-pop-out{to{opacity:0;transform:translateX(10px)}}
/* Dos keyframes y no uno en reverse: el mismo animation-name no re-dispara,
   `animationend` no llega nunca y el overlay queda pegado bloqueando clicks.
   Llevan prefijo mu- por el chequeo de colisión con la hoja del host. */
.mu-menu[open]>.mu-menu-panel{animation:mu-menu-pop .25s cubic-bezier(.34,1.4,.64,1)}
.mu-menu[open]>.mu-menu-panel.mu-menu-pop-out{animation:mu-menu-pop-out .2s ease-in forwards}
/* Con el menú abierto, la vista de atrás no scrollea (§5.12.1). El gutter ya
   está reservado en html,body, así que bloquear no corre la página. */
html:has(.mu-menu[open]){overflow:hidden}
.mu-hero{background:var(--blue-light);border-bottom:1px solid var(--line)}.mu-hero .mu-wrap{padding-top:36px;padding-bottom:36px}.mu-hero.mu-home .mu-wrap{padding-top:48px;padding-bottom:48px}
/* El epígrafe va a 11px y no a los 10 de §5.6, y el h1 llega a 42px en vez de
   los 40 de §5.7: decisión del equipo, anotada como desvío en MONITOR.md. */
.mu-eyebrow{font:11px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-dark);margin-bottom:12px}
.mu-hero h1{font-size:clamp(26px,3.2vw,42px);font-weight:800;line-height:1.05;letter-spacing:-.025em;margin:0 0 16px}.mu-hero h1 span{color:var(--primary)}.mu-hero p{max-width:680px;font-size:16px;font-weight:300;line-height:1.6;margin:0}
.mu-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.mu-btn{display:inline-flex;justify-content:center;align-items:center;min-height:44px;padding:8px 16px;border-radius:8px;font-size:13px;font-weight:600;text-decoration:none;background:var(--white);border:1px solid var(--line);color:var(--ink)}.mu-btn-primary{background:var(--primary);color:var(--white);border-color:var(--primary)}.mu-btn-primary:hover{background:var(--blue-dark)}
.mu-footer{background:var(--footer);color:var(--white);margin-top:64px;padding:48px 0 32px;font-family:inherit;font-size:14px}.mu-footer-grid{display:grid;gap:32px}.mu-footer .mu-brand{color:var(--white)}
/* La marca del pie va sobre fondo oscuro. Como es SVG, `color` no la alcanza:
   brightness(0) la aplana a negro e invert(1) la deja blanca entera, ícono
   incluido. */
.mu-footer .mu-brand-ico,.mu-footer .mu-brand-wm{filter:brightness(0) invert(1)}.mu-footer p{font-size:13px;font-weight:300;line-height:1.7;color:#ffffffb3;margin-top:18px;max-width:340px}.mu-footer h2{font:10px 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.14em;color:#ffffffa6;margin-bottom:16px}.mu-footer ul{list-style:none;padding:0;margin:0}.mu-footer li{margin:0 0 10px}.mu-footer a{color:#ffffffcc;text-decoration:none}.mu-footer a:hover{text-decoration:underline}.mu-footer .mu-fresh{font:11px 'JetBrains Mono',monospace;color:#ffffffb3;line-height:1.6;display:block;margin-top:16px}
.mu-bottom{margin-top:32px;padding-top:24px;border-top:1px solid #ffffff33;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}.mu-social{display:flex;gap:8px;flex-wrap:wrap}.mu-social a{width:36px;height:36px;border:1px solid #ffffff66;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px}.mu-contact{margin:24px 0 0!important;max-width:none!important;font-size:10px!important;text-align:right}.mu-contact a{text-decoration:underline}
.mu-top{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom));right:16px;width:44px;height:44px;border:1px solid var(--line);border-radius:8px;background:var(--white);box-shadow:0 2px 8px #171b211a;z-index:25}
@media(min-width:640px){.mu-wrap{padding-left:24px;padding-right:24px}}
@media(min-width:768px){.mu-footer-grid{grid-template-columns:5fr 4fr 3fr}}
@media(max-width:639px){.mu-hero .mu-wrap,.mu-hero.mu-home .mu-wrap{padding-top:28px;padding-bottom:28px}.mu-contact{text-align:left}.mu-bottom{align-items:flex-start}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
[hidden]{display:none!important}
/* §5.1.4 — bajo 640px el campo abierto no cabe junto a la marca: 260 + 44 +
   147 no entran en 320. La marca se retira mientras el campo está abierto y
   vuelve al cerrarlo. Antes esto se resolvía sacando el buscador del header y
   dejando en su lugar un glifo «⌕» que navegaba al comparador: otro ícono,
   otro tamaño y otra conducta que la lupa de escritorio. */
@media(max-width:639px){
  /* Queda el ícono de la marca, que es la vuelta a casa; se van el logotipo y
     el botón de menú, que no caben junto al campo abierto. */
  .mu-bar:has(.mu-search[data-abierta="1"]) .mu-brand-wm,
  .mu-bar:has(.mu-search[data-abierta="1"]) .mu-menu{display:none}
  .mu-search[data-abierta="1"] input{width:calc(100vw - 116px)}
}

/* Hero de portada con imagen de fondo. El velo mantiene legible el texto sobre
   la foto; sin él, el título compite con el detalle de la imagen. */
.mu-hero-img{position:relative;background-image:url('hero-960.jpg');
  background-size:cover;background-position:center;border-bottom:1px solid var(--line)}
@media(min-width:961px){.mu-hero-img{background-image:url('hero.jpg')}}
.mu-hero-img::before{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.86) 52%,rgba(255,255,255,.62) 100%)}
.mu-hero-img .mu-wrap{position:relative}

/* §5.7 — las dos cifras principales, en el hero de la portada. El texto va a
   la izquierda y las cards de vidrio a la derecha, sobre la parte de la foto
   que el velo deja más abierta. Fuera de la portada el hero es solo texto: las
   cards están en el markup igual, y es `.mu-home` quien las muestra, para que
   aparezcan también al llegar por navegación de cliente y sin depender de JS.
   Se destaca UNA a la vez —monitor.js rota cada 3 s y el puntero la fija—: la
   destacada sube a opacidad plena y se corre a la izquierda, las otras quedan
   atenuadas. El padding izquierdo del panel reserva ese corrimiento para que
   la card no se salga del contenedor. */
.mu-hero-kpis{display:none}
.mu-home .mu-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(290px,370px);gap:40px;align-items:center}
.mu-home .mu-hero-kpis{display:grid;gap:12px;padding-left:14px}
.mu-kpi{position:relative;display:flex;align-items:flex-start;gap:11px;padding:18px 20px;border-radius:12px;
  border:1px solid rgb(255 255 255 / .6);background:rgb(255 255 255 / .62);backdrop-filter:blur(10px);
  box-shadow:0 8px 24px rgb(23 27 33 / .1);opacity:.7;
  transition:opacity .5s ease,transform .5s ease}
.mu-kpi.on{opacity:1;transform:translateX(-14px);z-index:3}
.mu-kpi-ico{width:22px;height:22px;flex:none;margin-top:3px;color:var(--primary)}
.mu-kpi-texto{min-width:0}
.mu-kpi-val{font-size:clamp(26px,2.5vw,30px);font-weight:800;line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.mu-kpi-lbl{display:flex;align-items:center;gap:5px;font-size:14px;font-weight:600;line-height:1.3;margin-top:9px}
.mu-kpi-per{font:11px 'JetBrains Mono',monospace;letter-spacing:.08em;color:var(--muted);margin-top:5px}
@media(prefers-reduced-motion:reduce){.mu-kpi{transition:none}}
/* §5.10 — el globo se ancla a la CARD (`.tip` queda `position:static` y la card
   es la posicionada) y no al ícono: anclado al ícono, en la card de la derecha
   crecía fuera de la pantalla y le metía scroll horizontal a la página entera.
   Y abre hacia ABAJO, con la flecha dada vuelta, porque hacia arriba la card
   de más arriba lo mandaba encima del header. Misma pieza que la variante del
   monitor en content.css, volteada igual. */
.mu-hero-kpis .tip-globo{left:0;right:auto;top:calc(100% + 10px);bottom:auto;width:max-content;max-width:100%}
.mu-hero-kpis .tip-globo::before,.mu-hero-kpis .tip-globo::after{top:auto;bottom:100%;border-top-color:transparent}
.mu-hero-kpis .tip-globo::before{border-bottom-color:var(--line)}
.mu-hero-kpis .tip-globo::after{border-bottom-color:var(--white);margin-top:0;margin-bottom:-1.5px}
/* Apiladas: el hero vuelve a una columna y las cifras quedan bajo la bajada,
   ya sin el corrimiento, que en un panel a ancho completo no significa nada. */
@media(max-width:899px){
  .mu-home .mu-hero-grid{grid-template-columns:minmax(0,1fr);gap:26px}
  .mu-home .mu-hero-kpis{padding-left:0;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
  .mu-kpi{opacity:1}
  .mu-kpi.on{transform:none}
}

/* §5.16 — puerta con submenú. El panel abre alineado bajo su disparador y
   nunca más angosto que él. El padre es un <summary>, no un enlace: una puerta
   que además navega se toca para abrir y termina navegando. */
.mu-drop{position:relative;flex:none}
.mu-drop>summary{list-style:none;display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.mu-drop>summary::-webkit-details-marker{display:none}
.mu-drop>summary svg{width:13px;height:13px;transition:transform .18s}
.mu-drop[open]>summary svg{transform:rotate(180deg)}
.mu-drop-panel{position:absolute;left:0;top:calc(100% + 6px);z-index:60;min-width:100%;
  background:var(--white);border:1px solid var(--line);border-radius:10px;padding:6px;
  box-shadow:0 10px 24px rgba(23,27,33,.12);display:flex;flex-direction:column;white-space:nowrap}
.mu-drop-op{color:var(--ink);text-decoration:none;padding:9px 14px;border-radius:6px;font-size:14px}
.mu-drop-op:hover{background:var(--bg)}
.mu-drop-op[aria-current="page"]{color:var(--primary);background:var(--blue-light)}
/* La puerta se marca si la ruta actual es suya o de una hija: si no, al entrar
   en «Focalización» el header no señala nada. */
.mu-drop[data-activa]>summary{color:var(--primary);background:var(--blue-light)}
/* Los íconos de redes eran siglas de texto; ahora son SVG y necesitan medida. */
.mu-social a svg{width:17px;height:17px;display:block}
.mu-social a{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:6px}
.mu-social a:hover{background:#ffffff1f}