/* Mega menú de escritorio (Edu 25/10, referencia @detailsdotso): un solo panel de cristal oscuro que cambia
   de forma entre apartados. Paneles: «lista» (títulos + foto grande con rótulo que cambia al pasar),
   «tarjetas» (fotos con el texto encima), «texto» (lista grande sin fotos, a dos columnas).
   Los enlaces están en el HTML (los lee Google); mm.js solo anima. En ≤720 px manda la hamburguesa. */
:root { --mm-ease: cubic-bezier(.22, .9, .24, 1); --mm-t: .38s; }

/* -- barra */
.sh-nav .mm-trig { display: inline-flex; align-items: center; gap: 5px; transition: color .2s, background .2s, opacity .25s; }
.sh-nav .mm-trig .mm-flecha { width: 9px; height: 9px; opacity: .65; transition: transform var(--mm-t) var(--mm-ease), opacity .2s; }
.sh-nav .mm-trig[aria-expanded="true"] .mm-flecha { transform: rotate(180deg); opacity: 1; }
.sh-nav.mm-activo .mm-trig { opacity: .45; }                          /* como la referencia: el abierto manda */
.sh-nav.mm-activo .mm-trig[aria-expanded="true"] { opacity: 1; }
#site-header.shader-header .sh-nav a.mm-cta { background: #0a0a0a; color: #fff; font-weight: 500; margin-left: 6px; }
#site-header.shader-header .sh-nav a.mm-cta:hover { background: #2a2a2a; color: #fff; }
#site-header.shader-header.nav-on-dark .sh-nav a.mm-cta { background: #fff; color: #0a0a0a; }
#site-header.shader-header.nav-on-dark .sh-nav a.mm-cta:hover { background: rgba(255, 255, 255, .86); color: #000; }

/* -- caja que cambia de forma */
.mm { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 9990; pointer-events: none; }
/* OJO: el cristal (.mm-fondo) va FUERA de .mm-caja: si un antepasado tiene opacity/transform animados, el
   navegador no deja que backdrop-filter vea la página (no habría desenfoque). Cada uno se anima por su cuenta. */
.mm-caja { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0;
  transform: translate3d(var(--x, 0), calc(var(--y, 0px) - 8px), 0) scale(.94); transform-origin: var(--ox, 50%) -14px;
  transition: opacity .22s ease, transform var(--mm-t) var(--mm-ease); will-change: transform, opacity; }
.mm.abierto .mm-caja { opacity: 1; transform: translate3d(var(--x, 0), var(--y, 0), 0) scale(1); pointer-events: auto; }
.mm-fondo { position: absolute; left: 0; top: 0; width: var(--w, 600px); height: var(--h, 300px); border-radius: 20px; pointer-events: none;
  background: rgba(16, 16, 18, .42); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 255, 255, .06) inset;
  opacity: 0; transform: translate3d(var(--x, 0), calc(var(--y, 0px) - 8px), 0) scale(.94); transform-origin: var(--ox, 50%) -14px; will-change: transform, opacity;
  transition: opacity .22s ease, transform var(--mm-t) var(--mm-ease), width var(--mm-t) var(--mm-ease), height var(--mm-t) var(--mm-ease); }
.mm.abierto .mm-fondo { opacity: 1; transform: translate3d(var(--x, 0), var(--y, 0), 0) scale(1); }
.mm.colocando .mm-caja, .mm.colocando .mm-fondo, .mm.colocando .mm-flechita, .mm.colocando .mm-panel, .mm.colocando .mm-resalte { transition: none !important; }
.mm-flechita { position: absolute; top: -6px; left: 0; width: 12px; height: 12px; border-radius: 2px;     /* piquito hacia el apartado */
  background: rgba(30, 30, 33, .5); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); border-left: 1px solid rgba(255, 255, 255, .09); border-top: 1px solid rgba(255, 255, 255, .09);
  transform: translateX(calc(var(--px, 40px) - 6px)) rotate(45deg); transition: transform var(--mm-t) var(--mm-ease); }


.mm-panel { position: absolute; left: 0; top: 0; padding: 12px; opacity: 0; visibility: hidden; filter: blur(5px);
  transform: translate3d(var(--dx, 0), 0, 0) scale(.985); will-change: transform, opacity, filter; backface-visibility: hidden; font-family: var(--font-main, 'Inter', sans-serif);
  transition: opacity .2s ease, filter .25s ease, transform var(--mm-t) var(--mm-ease), visibility 0s linear var(--mm-t); }
.mm-panel.on { opacity: 1; visibility: visible; filter: blur(0); transform: translate3d(0, 0, 0) scale(1);
  transition: opacity .3s ease .05s, filter .3s ease .05s, transform var(--mm-t) var(--mm-ease), visibility 0s; }

/* -- lista + foto */
.mm-lista { display: grid; grid-template-columns: 300px 470px; gap: 12px; }
.mm-lista ul, .mm-texto ul { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.mm-resalte { position: absolute; left: 0; right: 0; top: 0; height: 0; border-radius: 14px; background: rgba(255, 255, 255, .075);
  transform: translateY(var(--ry, 0)); transition: transform .3s var(--mm-ease), height .3s var(--mm-ease), opacity .2s; pointer-events: none; }
.mm-lista li a, .mm-texto li a { position: relative; display: block; padding: 12px 14px; border-radius: 14px; text-decoration: none; color: #fff; }
.mm-lista li a b, .mm-texto li a b { display: block; font-size: 17px; font-weight: 500; letter-spacing: -.015em; }
.mm-lista li a span, .mm-texto li a span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.4; color: rgba(255, 255, 255, .8); transition: color .2s; }
.mm-lista li a.on span, .mm-texto li a:hover span { color: #fff; }
.mm-lista li a, .mm-texto li a, .mm-pie, .mm-tarjetas.yt .mm-card b, .mm-tarjetas.yt .mm-card span { text-shadow: 0 1px 2px rgba(0, 0, 0, .28); }
.mm-lista li a:focus-visible, .mm-texto li a:focus-visible, .mm-card:focus-visible { outline: 2px solid rgba(255, 255, 255, .5); outline-offset: -2px; }
.mm-fotos { position: relative; display: block; border-radius: 14px; overflow: hidden; background: #111; min-height: 360px; text-decoration: none; }
.mm-fotos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateZ(0) scale(1.06);
  will-change: transform, opacity; backface-visibility: hidden;
  transition: opacity .5s ease, transform 1.1s var(--mm-ease); }
.mm-fotos img.on { opacity: 1; transform: translateZ(0) scale(1); }
.mm-fotos::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .62), rgba(0, 0, 0, 0) 45%); pointer-events: none; }
.mm-rotulo { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 1; color: #fff; }
.mm-rotulo b { display: block; font-size: 22px; font-weight: 500; letter-spacing: -.02em; line-height: 1.15; }
.mm-rotulo i { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-style: normal; font-size: 13px; padding: 6px 12px;
  border-radius: 99px; background: rgba(255, 255, 255, .16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background .2s; }
.mm-fotos:hover .mm-rotulo i { background: rgba(255, 255, 255, .28); }
.mm-rotulo b, .mm-rotulo i { transition: opacity .25s ease, transform .35s var(--mm-ease); }
.mm-rotulo.cambia b, .mm-rotulo.cambia i { opacity: 0; transform: translateY(6px); }

/* -- tarjetas con el texto encima de la foto */
.mm-tarjetas { display: grid; grid-template-columns: repeat(var(--n, 4), auto); gap: 8px; }
.mm-card { position: relative; display: block; width: 200px; height: 260px; text-decoration: none; color: #fff; border-radius: 14px; overflow: hidden; background: #111; }
.mm-card .mm-img { position: absolute; inset: 0; }
.mm-card img { width: 100%; height: 100%; object-fit: cover; display: block; transform: translateZ(0) scale(1.001);
  will-change: transform; backface-visibility: hidden; transition: transform .8s var(--mm-ease), filter .4s; }
.mm-card:hover img { transform: translateZ(0) scale(1.05); }
.mm-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0) 55%); transition: opacity .3s; }
.mm-card b, .mm-card span { position: absolute; left: 14px; right: 14px; z-index: 1; }
.mm-card b { bottom: 32px; font-size: 16px; font-weight: 500; letter-spacing: -.015em; line-height: 1.2; }
.mm-card span { bottom: 13px; font-size: 12.5px; line-height: 1.3; color: rgba(255, 255, 255, .72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-tarjetas:hover .mm-card:not(:hover) img { filter: brightness(.72) saturate(.9); }    /* la que tocas destaca */
/* podcast: miniaturas 16:9 de YouTube (ya llevan texto), pie debajo */
.mm-tarjetas.yt .mm-card { width: 236px; height: auto; background: none; overflow: visible; }
.mm-tarjetas.yt .mm-card::after { display: none; }
.mm-tarjetas.yt .mm-card .mm-img { position: relative; height: 133px; border-radius: 12px; overflow: hidden; background: #111; }
.mm-tarjetas.yt .mm-card b, .mm-tarjetas.yt .mm-card span { position: static; display: block; margin: 0 4px; white-space: normal; }
.mm-tarjetas.yt .mm-card b { margin-top: 10px; font-size: 15px; }
.mm-tarjetas.yt .mm-card span { margin-top: 3px; color: rgba(255, 255, 255, .8); }

/* -- solo texto, dos columnas */
.mm-texto ul { display: grid; grid-template-columns: 290px 290px; gap: 2px 6px; }

/* -- pie */
.mm-pies { grid-column: 1 / -1; display: flex; gap: 4px; margin: 2px 0 -2px; }
.mm-pie { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 10px;
  font-size: 13px; color: rgba(255, 255, 255, .88); text-decoration: none; transition: color .18s, background .18s; }
.mm-pie span { transition: transform .25s var(--mm-ease); }
.mm-pie:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.mm-pie:hover span { transform: translateX(3px); }


/* -- esquinas limpias en las fotos (antes asomaba un filo oscuro del fondo #111 en las curvas, sobre todo con el zoom) */
.mm-card, .mm-fotos, .mm-tarjetas.yt .mm-card .mm-img { background: transparent; isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(white, black); mask-image: radial-gradient(white, black); }
.mm-card .mm-img, .mm-card img, .mm-fotos img { border-radius: inherit; }
.mm-tarjetas.yt .mm-card { -webkit-mask-image: none; mask-image: none; }
.mm-tarjetas.yt .mm-card .mm-img img { border-radius: 12px; }

/* -- cristal BLANCO (Edu 25/10: «blanco al fondo, semitransparente 50 % y blurry») */
.mm-fondo { background: rgba(255, 255, 255, .34); border: none;
  backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%);
  box-shadow: 0 28px 60px -26px rgba(0, 0, 0, .3); }
.mm-flechita { background: rgba(255, 255, 255, .4); border: none; }
.mm-lista li a, .mm-texto li a, .mm-pie, .mm-tarjetas.yt .mm-card b, .mm-tarjetas.yt .mm-card span { text-shadow: none; }
.mm-lista li a, .mm-texto li a { color: #0a0a0a; }
.mm-lista li a span, .mm-texto li a span { color: rgba(0, 0, 0, .58); }
.mm-lista li a.on span, .mm-texto li a:hover span { color: rgba(0, 0, 0, .78); }
.mm-resalte { background: rgba(0, 0, 0, .06); }
.mm-pie { color: rgba(0, 0, 0, .7); }
.mm-pie:hover { color: #000; background: rgba(0, 0, 0, .05); }
.mm-tarjetas.yt .mm-card { color: #0a0a0a; }
.mm-tarjetas.yt .mm-card span { color: rgba(0, 0, 0, .58); }
.mm-lista li a:focus-visible, .mm-texto li a:focus-visible, .mm-card:focus-visible { outline-color: rgba(0, 0, 0, .45); }

/* -- pies = enlace de texto con flecha, a la derecha (Edu 25/10: como la referencia) */
.mm-pies { justify-content: flex-end; gap: 22px; margin: 6px 4px 0; }
.mm-pie { position: relative; padding: 4px 0; border-radius: 0; background: none; box-shadow: none;
  font-size: 13.5px; font-weight: 500; color: #0a0a0a; }
.mm-pie::after { content: ""; position: absolute; left: 0; right: 20px; bottom: 0; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--mm-ease); }
.mm-pie:hover { color: #000; background: none; }
.mm-pie:hover::after { transform: scaleX(1); }
.mm-pie span { display: inline-block; transition: transform .3s var(--mm-ease); }
.mm-pie:hover span { transform: translateX(4px); }
.mm-pies .mm-pie:first-child:not(:last-child) { color: rgba(0, 0, 0, .55); font-weight: 400; }

/* -- contraste por pieza según lo que hay debajo (mm.js añade .mm-claro sobre fondo oscuro, foto o vídeo) */
#site-header.shader-header .sh-nav > a, #site-header.shader-header .sh-logo, #site-header.shader-header .sh-globe { transition: color .25s ease, background .25s ease, text-shadow .25s ease; }
#site-header.shader-header .sh-nav > a.mm-claro:not(.mm-cta), #site-header.shader-header .sh-logo.mm-claro,
#site-header.shader-header .sh-globe.mm-claro { color: rgba(255, 255, 255, .95) !important; text-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
#site-header.shader-header .sh-nav > a.mm-claro:not(.mm-cta):hover { background: rgba(255, 255, 255, .12); }
#site-header.shader-header .sh-nav a.mm-cta.mm-claro { background: #fff !important; color: #0a0a0a !important; text-shadow: none; }
#site-header.shader-header .sh-nav > a.mm-mixto:not(.mm-cta), #site-header.shader-header .sh-globe.mm-mixto {
  background: rgba(10, 12, 14, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); text-shadow: none; }
#site-header.shader-header .sh-logo.mm-claro img { filter: invert(1) drop-shadow(0 1px 2px rgba(0, 0, 0, .4)); }

/* -- enlaces del menú nunca en dos líneas (portátiles de 1280-1440 px los partían) */
#site-header.shader-header .sh-nav > a { white-space: nowrap; }
@media (max-width: 1480px) { #site-header.shader-header .sh-nav > a { font-size: 14.5px; padding: 7px 11px; } .sh-nav { gap: 2px; } }
@media (max-width: 1180px) { #site-header.shader-header .sh-nav > a { font-size: 13.5px; padding: 6px 8px; } .sh-nav .mm-trig .mm-flecha { display: none; } }

@media (max-width: 720px) { .mm { display: none; } .sh-nav .mm-flecha { display: none; } }
@media (prefers-reduced-motion: reduce) { .mm *, .mm-caja, .mm-fondo { transition: none !important; } }