/* Baterías Mapuches — home en celular (03/09/2026). Se carga solo en la portada (mu-plugins/mp-assets.php).
   Objetivo: que el visitante de celular vea un llamado a la acción sin scrollear.
   - Hero más compacto (batería 150 px, H1 44 px) para que la primera tarjeta entre en la primera pantalla.
   - Barra fija inferior con los dos caminos y WhatsApp; la burbuja flotante se oculta en la portada móvil porque la barra ya la incluye.
   Revertir: borrar este archivo (o quitar la línea en mp-assets.php). */
@media (max-width: 860px) {
  .home .mph-hero { padding-top: 22px !important; }
  .home .mph-hero h1 { font-size: 44px !important; }
  .home .mph-hero .mph-bajada { font-size: 18px !important; }
  .home .mph-hero-img { margin: 4px auto -14px !important; }
  .home .mph-hero-img img { max-width: 150px !important; }
  .home .mph-elegi { margin-top: 16px !important; }
  .home .mph-caminos { padding-top: 34px !important; }
  body.home { padding-bottom: 72px; }
  .home .elementor-element-4ab3db8 { display: none !important; } /* burbuja flotante de WhatsApp de Elementor: la barra ya lo incluye. OJO: .mph-wa es el botón del bloque de revendedores, no se oculta */
  .home .grecaptcha-badge { bottom: 82px !important; }

  .mp-barra {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
    display: grid; grid-template-columns: 1fr 1fr 52px; gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: #111; box-shadow: 0 -6px 18px rgba(0,0,0,.25);
  }
  .mp-barra a {
    display: flex; align-items: center; justify-content: center;
    height: 44px; border-radius: 6px; font-weight: 700; font-size: 14px; line-height: 1;
    text-decoration: none; letter-spacing: .01em;
  }
  .mp-barra .mp-b1 { background: #FEDC00; color: #111; }
  .mp-barra .mp-b2 { background: transparent; color: #FEDC00; border: 2px solid #FEDC00; }
  .mp-barra .mp-b3 { background: #25D366; color: #fff; border-radius: 50%; width: 44px; justify-self: end; }
  .mp-barra a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
}
@media (min-width: 861px) { .mp-barra { display: none; } }