/* ============================================================================
   PUBLIC NAV MOBILE — CSS compartido para la barra de navegación pública
   ============================================================================
   Convierte la barra superior (logo + enlaces + botones) en un menú
   hamburguesa en pantallas pequeñas (menos de 880px). Funciona en
   mensajero_site.html, pulso.html, login.html, registro*.html y cualquier
   otra página que use la misma estructura <nav> con .nav-logo, .nav-links,
   .nav-ctas.
   No cambia nada en pantallas grandes (desktop sigue igual).
   ============================================================================ */

@media (max-width: 880px) {

  nav {
    padding: 0 20px !important;
  }

  /* Ocultamos los enlaces de texto y los botones de la nav normal... */
  .nav-links,
  .nav-ctas {
    display: none !important;
  }

  /* ...y mostramos en su lugar el botón hamburguesa */
  .nav-burger {
    display: flex !important;
    width: 38px; height: 38px;
    border-radius: 8px;
    border: 0.5px solid rgba(26,36,51,0.12);
    background: #FFFFFF;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
  }
  .nav-burger svg { width: 18px; height: 18px; stroke: #4B5868; fill: none; stroke-width: 2; }

  /* Panel desplegable con los enlaces, debajo de la nav */
  .nav-mobile-panel {
    display: none;
    position: fixed;
    top: 72px;
    left: 0; right: 0;
    background: #FFFFFF;
    border-bottom: 0.5px solid rgba(26,36,51,0.08);
    box-shadow: 0 16px 40px rgba(0,0,0,0.12);
    z-index: 150;
    padding: 8px 20px 20px;
  }
  .nav-mobile-panel.open { display: block; }
  .nav-mobile-panel a {
    display: block;
    padding: 13px 4px;
    font-size: 15px;
    color: #1A2433;
    text-decoration: none;
    border-bottom: 0.5px solid rgba(26,36,51,0.06);
  }
  .nav-mobile-panel a:last-of-type { border-bottom: none; }
  .nav-mobile-panel .nav-mobile-ctas {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
  }
  .nav-mobile-panel .nav-mobile-ctas a {
    border-bottom: none;
    text-align: center;
    border-radius: 100px;
    padding: 12px;
  }
}

/* El botón hamburguesa está oculto por defecto en desktop */
.nav-burger {
  display: none;
}

/* ── Grids de 2+ columnas que se usan en varias páginas (auth, marketing) ── */
@media (max-width: 880px) {
  .auth-page, .card {
    grid-template-columns: 1fr !important;
  }
  .page {
    padding: 88px 16px 32px !important;
  }
  .left, .right {
    padding: 28px 22px !important;
  }
  .how-grid, .form-grid, .f-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .services-grid {
    grid-template-columns: 1fr !important;
  }
  .tarifs-grid {
    grid-template-columns: 1fr !important;
    overflow-x: auto;
  }
  .footer-main {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 48px 24px 32px !important;
  }

  /* En las páginas de login/registro, la barra flotante de "Crear cuenta /
     Iniciar sesión" es redundante con el propio formulario y se solapa
     con él — se oculta en mobile en esas páginas */
  body:has(.auth-page) #auth-bar,
  body:has(.card) #auth-bar {
    display: none !important;
  }
}