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

/* ===== HERO NOSOTROS (banner panorámico fijo) ===== */

/* 1) Altura y layout base del hero */
body .page-title.hero-nosotros{
  --hero-h: clamp(360px, 45vh, 520px);
  min-height: var(--hero-h);
  display: flex;
  align-items: center;
  width: 100%;
  overflow: hidden;
}

/* 2) Anula por completo cualquier fondo/pseudo del tema en ESTE hero */
body .page-title.hero-nosotros::before,
body .page-title.hero-nosotros::after{
  content: none !important;
  display: none !important;
}
body .page-title.hero-nosotros{
  background-image: none !important;
  background-color: #f5f9fc !important;
}

/* 3) Aplica el BANNER como background “real” del hero (derecha, alto 100%) */
body .page-title.hero-nosotros{
  background: url('../imagenes/First_Quality_Chemicals1.png?v=2') right center / auto 100% no-repeat,
              #f5f9fc !important;
}

/* 4) Contenido por encima del fondo */
body .page-title.hero-nosotros > .container{
  position: relative;
  z-index: 1;
}

/* 5) Quita el recuadro blanco del título sólo aquí */
body .page-title.hero-nosotros .white-bg{
  background: transparent !important;
  box-shadow: none !important;
}
body .page-title.hero-nosotros .page-breadcrumb{
  border-top: 0 !important;
}

/* 6) Pantallas MUY anchas */
@media (min-width: 1700px){
  body .page-title.hero-nosotros{
    background-image: url('../imagenes/First_Quality_Chemicals1.png?v=2') !important;
    background-position: right center;
    background-size: auto 100%;
  }
}

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

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

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

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

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

/* ===== Breadcrumbs en CELULAR ===== */
@media (max-width: 575.98px){

  body .page-title .page-breadcrumb .breadcrumb.fqc-bc{
    display:flex !important;
    flex-wrap:wrap !important;
    row-gap:.25rem;
  }

  body .page-title .page-breadcrumb .breadcrumb.fqc-bc .breadcrumb-item{
    display:inline-flex !important;
    align-items:center !important;
  }

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

  /* EN: 2 líneas -> Home solo */
  body .page-title .page-breadcrumb .breadcrumb.fqc-bc.bc-en .breadcrumb-item:first-child{
    flex:0 0 100% !important;
    width:100% !important;
  }

  /* ES: cada crumb en su propia línea */
  body .page-title .page-breadcrumb .breadcrumb.fqc-bc.bc-es .breadcrumb-item{
    flex:0 0 100% !important;
    width:100% !important;
  }
}

/* ===== KPIs: grilla en partes iguales ===== */
.kpis-grid{
  display:grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: clamp(12px, 2vw, 28px);
  align-items: stretch;
}
@media (max-width:1199.98px){ .kpis-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width:767.98px){  .kpis-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:479.98px){  .kpis-grid{ grid-template-columns: 1fr; } }

.kpi-card{
  display:flex; align-items:center; gap:14px;
  padding:12px 8px; height:100%;
}
.kpi-card .icon{
  flex:0 0 56px; width:56px; height:56px;
  display:flex; align-items:center; justify-content:center;
}
.kpi-card .icon img{ width:56px; height:56px; object-fit:contain; display:block; }
@media (max-width:575.98px){
  .kpi-card .icon{ flex-basis:48px; width:48px; height:48px; }
  .kpi-card .icon img{ width:48px; height:48px; }
}
.kpi-card .data .num{ line-height:1; font-size:clamp(1.75rem,3vw,2.2rem); }
.kpi-card .data h6{ margin:4px 0 0; font-size:clamp(.9rem,1.6vw,1.05rem); }

/* ================= CERTIFICATIONS ================= */
.cert-grid .cert-col{ display:flex; }
.cert-card{
  display:flex; flex-direction:column; align-items:center;
  justify-content:flex-start; width:100%;
}

/* Imágenes alineadas y con altura unificada */
.cert-img{
  height:240px;
  width:100%;
  display:flex; align-items:flex-end; justify-content:center;
}
.cert-img img{
  max-height:100%; width:auto; display:block;
}

/* Títulos a misma altura */
.cert-title{
  min-height:56px;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
}
.cert-title h5{ margin:0; }

/* Subtítulos a misma altura */
.cert-sub{
  min-height:26px;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
}

@media (max-width: 991.98px){
  .cert-img{ height:200px; }
}

/* GPTW: título solo texto (sin selección ni cursor de enlace) */
.cert-card .cert-title,
.cert-card .cert-title *{
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  cursor: default;
}
.cert-card .cert-title .no-link{
  text-decoration: none;
  color: inherit;
  pointer-events: none;
  display: inline-block;
}

/* ===== Carrusel: miniaturas sin recorte ===== */
.owl-carousel .cases-item{
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #f5f8fd;
}
.owl-carousel .cases-item img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}