/* Menú móvil compartido de la web de marketing (lo construye /mobile-nav.js).
   Los headers de public/ ocultan los desplegables, Precios, Blog y el idioma en móvil;
   aquí van el botón hamburguesa y el panel que los sustituyen.
   Las variables llevan fallback porque cada variante de header nombra distinto sus colores
   (--border/--line, --surface/--card, --indigo/--accent...). */

.mn-burger{display:none;flex:0 0 auto;width:40px;height:40px;padding:0;align-items:center;justify-content:center;
  border:1px solid var(--border,var(--line,#E7E8F1));border-radius:10px;
  background:var(--chip,var(--paper,#F1F2F8));color:var(--ink,#14161F);cursor:pointer}
.mn-burger-i,.mn-burger-i::before,.mn-burger-i::after{display:block;width:18px;height:2px;border-radius:2px;background:currentColor;
  transition:transform .2s ease,background .2s ease}
.mn-burger-i{position:relative}
.mn-burger-i::before,.mn-burger-i::after{content:"";position:absolute;left:0}
.mn-burger-i::before{top:-6px}
.mn-burger-i::after{top:6px}
.mn-burger[aria-expanded="true"] .mn-burger-i{background:transparent}
.mn-burger[aria-expanded="true"] .mn-burger-i::before{top:0;transform:rotate(45deg)}
.mn-burger[aria-expanded="true"] .mn-burger-i::after{top:0;transform:rotate(-45deg)}
.mn-burger:focus-visible,.mn-panel a:focus-visible{outline:2px solid var(--indigo,var(--accent,#5B5FEF));outline-offset:2px}

.mn-panel{display:none}

@media (max-width:640px){
  .mn-burger{display:inline-flex}
  .mn-hide{display:none!important}
  html.mn-lock,html.mn-lock body{overflow:hidden}

  .mn-panel:not([hidden]){display:block;position:fixed;left:0;right:0;bottom:0;z-index:100;overflow-y:auto;
    overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    background:var(--surface,var(--card,#fff));border-top:1px solid var(--border,var(--line,#E7E8F1));
    padding:6px 20px calc(28px + env(safe-area-inset-bottom,0px));
    font-family:Inter,system-ui,sans-serif;color:var(--ink,#14161F)}

  .mn-h{margin:18px 0 2px;font-family:'Space Grotesk',Inter,sans-serif;font-size:12px;font-weight:700;letter-spacing:.06em;
    text-transform:uppercase;color:var(--indigo,var(--accent,#5B5FEF))}
  .mn-lbl{margin:10px 0 2px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
    color:var(--faint,var(--ink-mute,#8A90A0))}
  .mn-panel a{display:block;padding:10px 4px;border-radius:8px;color:var(--ink,#14161F);font-size:15px;font-weight:600;
    line-height:1.3;text-decoration:none}
  .mn-panel a:active{background:var(--chip,var(--paper,#F1F2F8))}
  .mn-panel a small{display:block;margin-top:2px;font-size:12.5px;font-weight:400;color:var(--faint,var(--ink-mute,#8A90A0))}
  .mn-panel .nav-dd-pro{margin-left:6px}

  .mn-links{margin-top:14px;padding-top:6px;border-top:1px solid var(--border,var(--line,#E7E8F1))}
  .mn-lang{display:flex;align-items:center;gap:12px;margin-top:12px;padding-top:14px;
    border-top:1px solid var(--border,var(--line,#E7E8F1))}
  .mn-lang-t{font-size:13px;font-weight:600;color:var(--soft,var(--ink-soft,#5B616F))}
  .mn-lang-c{display:inline-flex;gap:2px;padding:2px;border-radius:10px;
    background:var(--chip,var(--paper,#F1F2F8));border:1px solid var(--border,var(--line,#E7E8F1))}
  .mn-panel .mn-lang-c a{padding:6px 12px;font-size:13px;font-weight:600;color:var(--soft,var(--ink-soft,#5B616F))}
  .mn-panel .mn-lang-c a[aria-current="page"]{background:var(--surface,var(--card,#fff));color:var(--ink,#14161F);
    box-shadow:0 1px 2px rgba(20,22,60,.12)}
  .mn-panel a.mn-cta{margin-top:18px;padding:14px;text-align:center;border-radius:12px;font-weight:700;
    background:var(--indigo,var(--accent,#5B5FEF));color:#fff}
}

@media (max-width:359px){
  /* con logo + tema + hamburguesa no cabe también el CTA: pasa al panel */
  .mn-cta-hdr{display:none!important}
}

@media (prefers-reduced-motion:reduce){
  .mn-burger-i,.mn-burger-i::before,.mn-burger-i::after{transition:none}
}