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

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

  background-image: none !important;
  background-color:#f5f9fc !important;
  background: url('../imagenes/Certificaciones_2.png?v=1') right center / auto 100% no-repeat,
              #f5f9fc !important;
}

/* quita pseudos del tema */
body .page-title.hero-cert::before,
body .page-title.hero-cert::after{
  content:none !important;
  display:none !important;
}

/* contenido por encima */
body .page-title.hero-cert > .container{
  position:relative;
  z-index:1;
}

/* quitar recuadro blanco y borde del breadcrumb SOLO aquí */
body .page-title.hero-cert .white-bg{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
body .page-title.hero-cert .page-breadcrumb{
  border-top: 0 !important;
}

/* ===== Imagen real en móvil/tablet ===== */
body .page-title.hero-cert .hero-bg-mobile{ display:none; }

@media (max-width: 991.98px){
  body .page-title.hero-cert{
    background: #f5f9fc !important;
    min-height: auto !important;
    height: auto !important;
    overflow: hidden !important;
    position: relative;
    padding: 0 !important;
  }

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

  body .page-title.hero-cert > .container{
    position:absolute !important;
    left:0; right:0;
    top:0;
    z-index:2;
  }

  body .page-title.hero-cert .white-bg{
    margin-top: 0.75rem;
  }
}

/* ===== Breadcrumb responsive ===== */
@media (max-width: 991.98px){
  body .page-title .page-breadcrumb .breadcrumb{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
  }

  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;

    /* clave: NO quitar padding-left (mantiene el separador del theme) */
    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 !important;
    float:none !important;
  }
}