/* =======================================================================
   CAMBIA CON WIZ — layout fixes
   Load AFTER css/styles.css.
   ======================================================================= */

/* ---- DESKTOP: hero grows so the regulatory box can't overlap "Personal" ---- */
.masthead{ height:auto !important; min-height:100vh; }

/* The mobile-only hero image is hidden on desktop */
.banner-image-mobile{ display:none; }

/* =======================  MOBILE / SMALL SCREENS  ======================= */
@media (max-width: 991.98px){

  /* Hero flows naturally */
  .masthead{ min-height:0 !important; padding-top:7rem; padding-bottom:1rem;
             overflow:visible !important; position:relative; }
  .banner-container{ min-height:0 !important; }

  /* Order: hero content first, REGULATORY box LAST (just above "Personal") */
  .masthead .banner-container > .row{ display:flex; flex-wrap:wrap; }
  .masthead .banner-container > .row > div:first-child{ order:2; }   /* left col = regulatory */
  .masthead .banner-container > .row > div:last-child{ order:1; }    /* right col = list/man/cards */

  .left-banner{ position:static !important; width:100% !important;
                left:auto !important; right:auto !important; bottom:auto !important;
                float:none !important; margin-top:18px; }
  .left-banner h2{ font-size:20px !important; line-height:1.2; }   /* "Cambia con confianza y respaldo" */

  /* Man: hide the desktop backdrop, show the in-flow image between LIST and CARDS */
  .banner-image{ display:none !important; }
  .banner-image-mobile{ display:block; width:100%; max-width:460px; height:auto;
                        margin:4px auto -212px; position:relative; z-index:0; }

  /* Dólares/Colones and Comprar/Vender SIDE BY SIDE and TOP-ALIGNED (no step) */
  .masthead .banner-container .col-12.col-md-7{ flex:0 0 58% !important; max-width:58% !important; width:58% !important; }
  .masthead .banner-container .col-12.col-md-5{ flex:0 0 42% !important; max-width:42% !important; width:42% !important; }
  .masthead .banner-container .col-12.col-md-7 > .calculator,
  .masthead .banner-container .col-12.col-md-5 > .calculator{
      height:100% !important; justify-content:flex-start !important; padding:16px !important; }

  /* let the cards/contact sit on top of the man where they overlap */
  .masthead .banner-container > .row > div:last-child > .row,
  .masthead .banner-container > .row > div:last-child > .social-top{ position:relative; z-index:2; }

  /* "Cambie ahora" (HERO ONLY) 3 across — leave the Personal/Negocios buttons alone */
  .masthead .social-top-ul li{ width:32.5% !important; min-width:0 !important; margin-bottom:0 !important; }

  /* Section background images flow inline */
  .personal .background-img,
  .personal.negocios .background-img,
  .personal.negocios.nosotros .background-img{
      position:static !important; width:100% !important;
      left:auto !important; right:auto !important; bottom:auto !important;
      margin-top:12px; z-index:0 !important; }

  /* Tighter, consistent spacing between sections */
  section.personal{ padding-top:2.25rem !important; padding-bottom:1rem !important; }
  .personal h1{ font-size:44px !important; line-height:1.05; margin-bottom:.75rem; }
  .personal h2{ margin-bottom:.5rem; }
  .personal.negocios.blog h1{ font-size:32px !important; }
  .masthead-device-mockup{ margin-bottom:12px !important; padding-bottom:0 !important; }

  /* Blog cards one-per-row */
  #negocios2 .col-md-4{ width:100%; }
  .blog-content h5{ width:85%; }
}

/* Very small phones */
@media (max-width: 575.98px){
  .personal h1{ font-size:36px !important; }
  .nav-content{ padding:4px !important; }
}