/* ═══════════════════════════════════════════════════════════════════════════
   AIMA · assets/aima-menu.css — EL MENÚ A PANTALLA COMPLETA, UNO SOLO
   ───────────────────────────────────────────────────────────────────────────
   06/10/2026 · Bratney: «unifica este menú para todos los HTML, que hay muchos
   que tienen el antiguo».

   QUÉ HABÍA. Cada página llevaba su propia copia del CSS de #mmenu, y las
   copias se habían ido separando: unas con Poppins 600 (el antiguo), otras con
   AIMA Negra 800 (el de la piel de la app), tamaños de 34, 36 y 38 px, huecos
   de 2 y de 4 px, y dos páginas con el fondo gris en vez del cristal blanco.

   QUÉ ES AHORA. La del menú de la captura de Contacto: 7 px de aire arriba y
   abajo, 4 px entre filas y el cristal con 26 px de desenfoque. Un solo sitio
   donde cambiarlo. 17/10/2026: la letra pasa de AIMA Negra 800 a Cormorant
   Garamond 500 (31–48 px), la de los titulares de Packs; la fila en la que
   estás o la que señalas, en cursiva roja. Ver «LA LETRA AIMA» al final.

   🔴 Lo que NO toca, a propósito: los COLORES. Las páginas oscuras (la portada)
      llevan el menú oscuro y la letra clara; las claras, cristal blanco. Aquí
      sólo se unifica la forma: letra, tamaño, huecos y desenfoque.
   🔴 Va con `html` delante para ganarles a las copias que quedan dentro de cada
      página sin tener que usar !important.
   ═══════════════════════════════════════════════════════════════════════════ */
@font-face{font-family:'AIMA Negra';font-weight:800;font-display:swap;
  src:url(mazo/fuentes/poppins-latin-800-normal.woff2) format('woff2')}

html #mmenu{-webkit-backdrop-filter:blur(26px) saturate(1.6);backdrop-filter:blur(26px) saturate(1.6)}
html #mmenu nav{gap:4px}
html #mmenu nav a{
  font:500 clamp(31px,7vw,48px)/1.06 'Cormorant Garamond','AIMA Cormorant','Iowan Old Style','Times New Roman',serif;
  letter-spacing:-.012em;padding:5px 20px;
}
html #mmenu nav a:hover,
html #mmenu nav a.act{color:var(--red,#C1272D);font-style:italic}

/* el cierre: el círculo de 38 px abajo del todo a la derecha, igual en todas */
html #mmenu .mmenu-close{
  position:absolute;top:56px;right:clamp(20px,5vw,48px);width:38px;height:38px;
  display:grid;place-items:center;border-radius:50%;border:0;background:none;cursor:pointer;
  color:inherit;transition:background .3s;
}
html #mmenu .mmenu-close:hover{background:var(--bone,rgba(11,11,13,.06))}

/* la entrada: las filas suben una a una (la demora de cada una va en su
   style="--d:…" y, donde la página no la trae, la ponen estas) */
html #mmenu nav a{
  opacity:0;transform:translateY(18px);
  transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--d,0s);
}
html #mmenu.open nav a{opacity:1;transform:none}
html #mmenu nav a:nth-child(1){--d:.03s}
html #mmenu nav a:nth-child(2){--d:.07s}
html #mmenu nav a:nth-child(3){--d:.11s}
html #mmenu nav a:nth-child(4){--d:.13s}
html #mmenu nav a:nth-child(5){--d:.15s}
html #mmenu nav a:nth-child(6){--d:.19s}
html #mmenu nav a:nth-child(7){--d:.27s}
html #mmenu nav a:nth-child(8){--d:.31s}
@media (prefers-reduced-motion:reduce){
  html #mmenu nav a{transition:none;transform:none}
}

/* la fila de redes de abajo (Instagram · TikTok · YouTube · sala de juegos ·
   silencio): anclada a 44 px del borde, círculos de 34 px. Es la misma que ya
   llevaban casi todas; Material tenía una vieja, en el flujo y con 30 px. */
html #mmenu .mmenu-social{position:absolute;bottom:44px;left:0;right:0;margin:0;
  display:flex;justify-content:center}
html #mmenu .social{display:flex;gap:6px}
html #mmenu .social a,
html #mmenu .social button.sonido{width:34px;height:34px;border-radius:50%;display:grid;
  place-items:center;background:none;border:0;padding:0;cursor:pointer;opacity:1;
  transition:background .35s cubic-bezier(.22,1,.36,1),color .35s,transform .35s cubic-bezier(.22,1,.36,1),opacity .31s}
html #mmenu .social svg{width:14px;height:14px}
html #mmenu .social button.sonido svg{width:13px;height:13px}
html #mmenu .social button.sonido.mudo{opacity:.42}

/* 06/10/2026 · LINKEDIN EN LA CABECERA. Con cinco iconos de 34 px (más la sesión y
   el menú) la fila no cabe en una ventana de menos de ~480 px y el logo de AIMA
   se encogía hasta desaparecer (a 320 px medía 0). Por debajo de 480 px los
   iconos de la cabecera pasan a 28 px y 2 px de hueco: la fila queda 6 px más
   corta que con los cuatro de antes. El menú desplegable no se toca: ahí sobra
   sitio. Los móviles de verdad no pasan por aquí (usan la barra de la demo
   móvil, sin redes: LinkedIn va en su botón ⓘ). */
@media (max-width:480px){
  .brandbar .social{gap:2px}
  .brandbar .social a,.brandbar .social button.sonido{width:28px;height:28px}
}


/* ═══════════════════════════════════════════════════════════════════════════
   17/10/2026 · LA LETRA AIMA EN LAS PIEZAS COMUNES (skill estilo-aima)
   ───────────────────────────────────────────────────────────────────────────
   Bratney: «adaptar portafolio, asistencia, desarrolladores… y el bot de la
   web a las tipografías de los productos, para que sea uniforme».
   Las piezas que salen en todas las páginas dejan Poppins y pasan a las tres
   letras de Packs: Cormorant Garamond (titulares), Anton (cartel y nombres) y
   Montserrat (lo demás). Van con `html` y su id delante para ganarles a las
   copias que cada página lleva dentro, sin !important. Los colores no cambian.
   · El menú: arriba (Cormorant; la fila activa, en cursiva roja).
   · El aviso de cookies: el titular en Cormorant y los botones en Montserrat.
   · El pie: rótulos de columna y «¿Qué es un plug?» en Montserrat. Las tres
     rayas grises de «notas legales (por rellenar)» se esconden mientras no
     haya texto: en cuanto se escriba, salen solas.
   · La cabecera: «Comienza gratis» y «Volver a…» en Montserrat.
   · AMI, el bot: el bocadillo «Pregúntale a AMI» en Montserrat y su nombre,
     en la cabecera del chat, en Cormorant.
   Las letras propias (assets/fuentes/, OFL 1.1) cubren las páginas que no
   piden Cormorant o Anton a Google: ninguna cae en una letra del sistema.
   3ª versión (20:38): lo que no es titular (menú, cookies, nombre de AMI) va
   en Cormorant; Anton se queda para los titulares y las cifras.
   ═══════════════════════════════════════════════════════════════════════════ */
@font-face{font-family:'AIMA Cormorant';font-style:normal;font-weight:500;font-display:swap;src:url(fuentes/cormorant-garamond-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'AIMA Cormorant';font-style:italic;font-weight:500;font-display:swap;src:url(fuentes/cormorant-garamond-latin-500-italic.woff2) format('woff2')}
@font-face{font-family:'AIMA Cormorant';font-style:normal;font-weight:600;font-display:swap;src:url(fuentes/cormorant-garamond-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'AIMA Cormorant';font-style:italic;font-weight:600;font-display:swap;src:url(fuentes/cormorant-garamond-latin-600-italic.woff2) format('woff2')}
@font-face{font-family:'AIMA Anton';font-style:normal;font-weight:400;font-display:swap;src:url(fuentes/anton-latin-400-normal.woff2) format('woff2')}
/* el aviso de cookies */
html #cookies .ck-caja h2{font:500 clamp(29px,4vw,38px)/1.06 'Cormorant Garamond','AIMA Cormorant','Iowan Old Style',serif;letter-spacing:-.012em}
html #cookies .ck-ops button{font-family:'Montserrat','Helvetica Neue',Arial,sans-serif;font-weight:600;letter-spacing:.005em}
/* el pie */
html #pie .pie-col b{font-family:'Montserrat','Helvetica Neue',Arial,sans-serif;font-weight:600;font-size:10.5px;letter-spacing:.26em}
html .pie-plug summary{font-family:'Montserrat','Helvetica Neue',Arial,sans-serif;font-weight:600;font-size:10.5px;letter-spacing:.26em}
html .pie-plug summary::after{font-family:'Montserrat','Helvetica Neue',Arial,sans-serif;font-weight:400}
html #pie .pie-legal:has(> .ph-group:only-child){display:none}
/* la cabecera y el «volver» */
html .brandbar .cta-alta,
html .volver-prod,
html .volver-prod .lbl{font-family:'Montserrat','Helvetica Neue',Arial,sans-serif;font-weight:600}
/* AMI, el bot */
html #ami-widget .ami-tip{font:600 12.5px 'Montserrat','Helvetica Neue',Arial,sans-serif;letter-spacing:.005em}
html #ami-widget .ami-head-txt b{font:600 24px/1 'Cormorant Garamond','AIMA Cormorant','Iowan Old Style',serif;letter-spacing:-.005em}