/* ===================================================================
   Optimización móvil / tablet — compartida por las páginas de producto
   Se carga después del <style> de cada página para poder ajustar.
   =================================================================== */

/* Backstop anti scroll horizontal. 'clip' (no 'hidden') para no romper
   el position:sticky de la barra de navegación. */
html, body { overflow-x: clip; }

/* Botón hamburguesa (lo inyecta _mobile.js; solo se ve en móvil) */
.nav-toggle {
  display: none; margin-left: 12px; flex-shrink: 0;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line);
  border-radius: 9px; color: var(--ink); cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .ico-close { display: none; }
.nav.open .nav-toggle .ico-open  { display: none; }
.nav.open .nav-toggle .ico-close { display: block; }

@media (max-width: 800px) {
  .nav-toggle { display: inline-flex; }
  .nav-cta { margin-left: auto; }
  .nav-cta .btn-ghost { display: none; }          /* "Iniciar sesión" fuera para dar aire */
  .nav.open .nav-links {                            /* menú desplegable */
    display: flex; flex-direction: column; gap: 2px;
    position: absolute; top: 100%; left: 0; right: 0;
    margin: 0; padding: 12px 20px 18px;
    background: var(--paper); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
  }
  .nav.open .nav-links a { padding: 12px; font-size: 15px; border-radius: 8px; }
}

@media (max-width: 600px) {
  /* Anotaciones decorativas y mockups: que no fuercen ancho */
  .mock-annot { display: none; }
  .hero-copy, .hero-visual, .mock, .mock-sheet, .mock-sheet > div,
  .apu-right, .apu-wrap, .bcalc-main, .spotlight-mock { min-width: 0; }
  .mock, .bcalc, .spotlight-mock, .apu-right { max-width: 100%; }
  /* CTAs del hero cómodas para el dedo */
  .hero-cta .btn { flex: 1 1 auto; justify-content: center; }
}