/* ==============================
   FQC - Compromiso (solo esta vista)
   ============================== */

/* ===== HERO COMPROMISO (banner panorámico fijo) ===== */
body .page-title.hero-compromiso{
  --hero-h: clamp(360px, 45vh, 520px);
  min-height: var(--hero-h);
  display:flex;
  align-items:center;
  width:100%;
  overflow:hidden;

  /* limpia fondos del tema y coloca nuestro banner */
  background-image:none !important;
  background-color:#f5f9fc !important;
  background: url('../imagenes/Compromiso_2.png?v=1') right center / auto 100% no-repeat,
              #f5f9fc !important;
}

/* quita pseudos del theme en este hero */
body .page-title.hero-compromiso::before,
body .page-title.hero-compromiso::after{
  content:none !important;
  display:none !important;
}

/* texto por encima del fondo */
body .page-title.hero-compromiso > .container{
  position:relative;
  z-index:1;
}

/* quitar caja y borde del título/breadcrumb solo aquí */
body .page-title.hero-compromiso .white-bg{
  background:transparent !important;
  box-shadow:none !important;
}
body .page-title.hero-compromiso .page-breadcrumb{
  border-top:0 !important;
}

/* ===== NUEVO: imagen real para móvil/tablet ===== */
body .page-title.hero-compromiso .hero-bg-mobile{
  display:none;
}

@media (max-width: 991.98px){
  /* En móvil/tablet quitamos el background-imagen y usamos <img> */
  body .page-title.hero-compromiso{
    background: #f5f9fc !important;
    min-height: auto !important;
    height: auto !important;
    overflow: hidden !important;
    position: relative;
    padding: 0 !important;
  }

  body .page-title.hero-compromiso .hero-bg-mobile{
    display:block;
    width:100%;
    height:auto;
    max-width:100%;
    object-fit:contain;
    display:block;
  }

  /* Pone el contenido encima del banner */
  body .page-title.hero-compromiso > .container{
    position:absolute !important;
    left:0;
    right:0;
    top:0;
    z-index:2;
  }

  /* aire al texto encima */
  body .page-title.hero-compromiso .white-bg{
    margin-top: 0.75rem;
  }
}

/* =========================================================
   Breadcrumb responsive (móvil + tablet)
   - El último item (active) baja a nueva línea
   - CONSERVA el separador (icono) del theme
   ========================================================= */
@media (max-width: 991.98px){

  body .page-title .page-breadcrumb .breadcrumb{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center;
  }

  body .page-title .page-breadcrumb .breadcrumb .breadcrumb-item.active{
    flex:0 0 100% !important;
    width:100% !important;
    display:inline-flex !important;
    align-items:center !important;
    margin-top:.25rem !important;
    padding-left: inherit !important;
    white-space: normal !important;
  }

  body .page-title .page-breadcrumb .breadcrumb .breadcrumb-item.active::before{
    display:inline-block !important;
    float:none !important;
  }

  body .page-title .page-breadcrumb .breadcrumb .breadcrumb-item + .breadcrumb-item::before{
    display:inline-block;
    float:none;
  }
}