/* ===== General mobile / small tablet, <=700px ===== */
@media screen and (max-width: 700px) {
  #msp46_Header, #msp46_Middle, #msp46_Footer { max-width: 990px; width: 100% !important; }

  .wp_column, .wp_col_content, .wp_bg {
    position: static !important;
    float: none !important;
    width: 100% !important;
    left: 0 !important;
    right: auto !important;
  }
  [id$="_col_box_0"], [id$="_col_box_1"], [id$="_col_box_2"],
  [class*="_col_box_"] { width: 100% !important; left: 0 !important; }

  /* header logo / phone-icon two-column block */
  #inc47_container2, #inc47_container3 { width: 100% !important; left: 0 !important; float: none !important; }

  /* nav */
  #inc47_menucomp2.inc47_menucomp2_wp_outer { padding-left: 0 !important; padding-right: 0 !important; }
  .mlhmenu { display: block !important; width: 100%; }
  .mlhmenu li { display: block !important; float: none !important; width: 100%; }
  .inc47_menucomp2_item { display: block !important; float: none !important; text-align: center; padding: 10px 0 !important; }

  img { max-width: 100%; height: auto; }

  /* jssor gallery container (index.html + quiénes-somos.html only). aspect-ratio keeps
     a non-zero height since the slides inside are position:absolute and don't
     contribute to an auto-height parent; the slide/image overrides beat jssor's
     own JS-set inline pixel sizes so the slider visually scales down instead of
     being clipped to a 960px-wide filmstrip. */
  [id$="_newgallery1_container"] { width: 100% !important; height: auto !important; aspect-ratio: 960 / 432; }
  [id$="_newgallery1_container"] [u="slides"] { width: 100% !important; height: 100% !important; }
  [id$="_newgallery1_container"] [u="slides"] > * { width: 100% !important; height: 100% !important; }

  /* blog sidebar (blog.html only) uses its own inline-block 25%/75% layout, not
     the generic wp_column grid, so it needs its own stacking override. min-height:0
     cancels the framework's 800px placeholder height, which is harmless side-by-side
     with .right_wind at desktop width but leaves a huge empty gap once stacked. */
  .blog-container, .right_wind { display: block !important; width: 100% !important; min-height: 0 !important; }

  #inc45_columns1 .wp_column { width: 100% !important; }
}