/* movil-bm.css — Ajustes de móvil de la home (8-sep-2026).
   Se carga AL FINAL del <body> a propósito: los bloques <style> de index.html van
   dentro del contenido y ganarían a un <link> del <head> por orden de documento.
   Cargándolo el último, estas reglas mandan sin tener que llenar todo de !important.

   Qué arregla:
   1. .bmc-sol .bmc-row seguía a 2 columnas en móvil (el override venía después de la
      media query de 900px): la foto quedaba en 88px de ancho.
   2. Las tarjetas de producto medían 500px cada una — la sección entera 2.070px.
   3. Alturas de hero con 100vh (la barra del navegador móvil provoca saltos) → svh.
   4. Paddings verticales de 96px, demasiado aire en pantallas de 375px.
   5. Anchos laterales dispares entre secciones (24px unos, 16-20px otros). */

@media(max-width:900px){
  /* ── 1. SOLUCIONES: una columna de verdad ───────────────────────────── */
  .bmc-sol .bmc-row{grid-template-columns:1fr!important;gap:22px;max-width:none}
  .bmc-sol .bmc-row .bmc-media{order:0}
  .bmc-sol .bmc-row img{aspect-ratio:16/10;border-radius:14px}
  .bmc-sol .bmc-txt{max-width:none}
  .bmc-sol .bmc-row h3{margin-bottom:18px}
  .bmc-sol .bmc-sec-title{text-align:left;margin-bottom:36px}

  /* ── Ritmo vertical: 96px es demasiado en móvil ──────────────────────── */
  .bmc-sol{padding:56px 0 60px!important}
  .bmc-raz,.bmc-anos,.bmc-marcas{padding:56px 0}
  .bmc-vetus{padding:56px 0}
  .bmp{padding:56px 0!important}
  .bm-greviews{padding:56px 20px!important}
  .bmc-cta{padding:56px 20px}

  /* Un solo ancho lateral en toda la página: 20px */
  .bmc-wrap,.bmp-wrap{padding-left:20px;padding-right:20px}

  /* ── Tipografía de sección ───────────────────────────────────────────── */
  .bmc-sec-title,.bmc-raz h2,.bmc-anos h2,.bmp-title,.bm-greviews-head h2{
    font-size:27px!important;line-height:1.15;letter-spacing:-.2px;text-wrap:pretty}
  .bmc-vetus h2,.bmc-map-panel h2{font-size:25px!important;line-height:1.18}
  .bmc-anos p,.bmc-vetus p{font-size:15.5px;line-height:1.65}

  /* Botones: objetivo táctil y sin partirse en dos líneas */
  .bmc-btn,.bmp-btn,.bm-greviews-cta,.bm-mapa-btn{
    min-height:48px;padding-top:0;padding-bottom:0;justify-content:center;
    padding-left:26px;padding-right:26px;font-size:13px}

  /* ── HERO ────────────────────────────────────────────────────────────── */
  .bmc-hero{min-height:100svh}
  .bmc-hero-bit-inner{padding:104px 20px 52px}
  .bmc-hero-bit-coords{font-size:11px;letter-spacing:.14em;margin-bottom:24px;text-align:left}
  .bmc-hero-bit-title{font-size:clamp(30px,8.4vw,42px)!important;line-height:1.06;letter-spacing:-.6px}
  .bmc-hero-bit-side p{font-size:15.5px;margin-bottom:22px}
  .bmc-hero-bit-cta{display:grid;grid-template-columns:1fr;gap:10px}
  .bmc-hero-bit-cta .bmc-btn{width:100%}

  /* ── RAZONES ─────────────────────────────────────────────────────────── */
  .bmc-raz li{gap:14px;padding:16px 0;align-items:flex-start}
  .bmc-raz li svg{width:34px;height:34px;margin-top:2px}
  .bmc-raz li span{font-size:15px;line-height:1.5}
  .bmc-raz img{border-radius:14px}

  /* ── VETUS ───────────────────────────────────────────────────────────── */
  .bmc-vetus-grid{gap:26px}
  .bmc-vetus .bmc-logo img{width:min(230px,62%)}

  /* ── PRODUCTOS DESTACADOS: dos por fila y tarjeta compacta ──────────── */
  .bmp-grid{grid-template-columns:1fr 1fr!important;gap:14px}
  .bmp-head{margin-bottom:32px}
  .bmp-card{border-radius:14px}
  .bmp-card .bmp-media{aspect-ratio:1/1}
  .bmp-card .bmp-media img{top:14px;left:14px;width:calc(100% - 28px);height:calc(100% - 28px)}
  .bmp-brand{top:8px;left:8px;font-size:9px;padding:4px 7px;letter-spacing:.1em}
  .bmp-body{padding:14px 14px 16px;gap:7px}
  .bmp-cat{font-size:10px;letter-spacing:.1em}
  .bmp-card .bmp-name{font-size:14.5px;line-height:1.3}
  .bmp-foot{flex-direction:column;align-items:flex-start;gap:7px;padding-top:12px;margin-top:4px}
  .bmp-stock{font-size:11.5px}
  .bmp-link{font-size:11px}
  .bmp-cta{margin-top:34px}
  .bmp-btn{width:100%;text-align:center}

  /* ── MARCAS ──────────────────────────────────────────────────────────── */
  .bmc-marcas .bmc-sec-title{margin-bottom:30px;text-align:left}
  .bmc-marcas-grid{gap:22px 20px}
  .bmc-marcas-grid img{height:46px}

  /* ── MAPA ────────────────────────────────────────────────────────────── */
  .bmc-map-panel{padding:40px 20px!important;gap:12px}
  .bmc-map-panel .ico{width:38px;height:38px}
  .bmc-map-panel p{font-size:15.5px}
  .bmc-map-frame .bm-mapa{min-height:330px!important}
  .bm-mapa-ficha{padding:26px 20px!important}

  /* ── RESEÑAS ─────────────────────────────────────────────────────────── */
  .bm-greviews-head{margin-bottom:30px;gap:20px}
  .bm-greviews-grid{gap:14px}
  .bm-greview{padding:22px 20px 20px}
  .bm-greviews-cta{width:100%}

  /* ── FOOTER ──────────────────────────────────────────────────────────── */
  .bmc-footer{padding-bottom:calc(26px + env(safe-area-inset-bottom,0))}
  .bmc-footer .bmc-wrap{padding-left:20px;padding-right:20px}
  .bmc-footer-nav{justify-content:center;gap:12px 18px}
  .bmc-footer-nav a{font-size:13.5px}

  /* ── FLOTANTE DE WHATSAPP ────────────────────────────────────────────── */
  .wa-float{width:52px!important;height:52px!important;
    right:16px!important;bottom:calc(16px + env(safe-area-inset-bottom,0))!important}
  .wa-float svg{width:25px;height:25px}
}

/* Móviles estrechos: las dos columnas de producto ya no caben con dignidad */
@media(max-width:359px){
  .bmp-grid{grid-template-columns:1fr!important;max-width:300px;margin:0 auto}
  .bmc-marcas-grid{grid-template-columns:1fr;max-width:200px;margin:0 auto}
}
