/* TIPOGRAFIA */

h1 {
  color: #EAEAEA;
  text-align: left;
  font-family: 'Codec Pro', 'HK Grotesk', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

p {
  color: #304693;
  text-align: justify;
  font-family: 'Codec Pro', 'HK Grotesk', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 18px;
}

strong, span {
  color: #EAEAEA;
  text-align: justify;
  font-family: 'Codec Pro', 'HK Grotesk', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ===================== */
/* HERO BANNER CORREGIDO */
/* ===================== */

.hero-banner {
  position: relative;
  height: 60vh;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  border-radius: 0;
  background: none;
  box-shadow: none;
  margin: 0;
}



.hero-banner .banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;

  image-rendering: auto;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.hero-banner .overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.45);
  z-index: 1;
}

/* Contenido encima de la capa oscura */
.hero-banner .hero-content {
  position: relative;
  z-index: 2;
  color: white;
  text-align: center;
  width: 100%;
  padding: 0 1rem;
  margin-top: 40px;
}

/* Responsive banner */
@media (max-width: 768px) {
  .hero-banner {
    height: 50vh;
    min-height: 240px;
  }

  .hero-banner .hero-content {
    margin-top: 20px;
    padding: 0 1rem;
    
  }

  .hero-banner h1 {
    font-size: 2rem;
  }

  .hero-banner p {
    font-size: 1rem;
  }
}

/* ===================== */
/* ESTILOS DEL CARD      */
/* ===================== */

.custom-card {
  background-color: #ffffff;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border: 1px solid #ddd;
}

.card-top {
  height: 80px;
  background-color: #fff;
}

.circle-icon {
  width: 40px;
  height: 40px;
  background-color: #2196f3;
  border-radius: 50%;
}

.card-middle {
  background-color: #f8f9fa;
}

.middle-left img {
  max-height: 200px;
  object-fit: cover;
  border-radius: 10px;
}

.card-footer {
  padding: 12px 16px;
  background-color: #fff;
  border-top: 1px solid #ddd;
}

.footer-icons {
  display: flex;
  gap: 16px;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;
}

.icon-footer {
  max-width: 80px;
  max-height: 85px;
  object-fit: contain;
}

/* ===================== */
/* SCROLL OFFSET IDS     */
/* ===================== */

/* DESENGRASES */
#CQ-100, #CQ-100E, #CQ-101, #CQ-103, #CQ-104, #CQ-105, #CQ-106, #CQ-107, #CQ-108, #CQ-109, #CQ-110, #CQ-115, #CQ-900, #CQ-901, #CQ-1003, #CQ-1008 {
  scroll-margin-top: 120px;
}

/* ABRILLANTADORES */
#CQ-200, #CQ-201, #CQ-203, #CQ-205, #CQ-207, #CQ-208, #CQ-202, #CQ-202C, #CQ-210, #CQ-212, #CQ-204, #CQ-220, #CQ-220L, #CQ-225 {
  scroll-margin-top: 120px;
}

/* PASIVADORES */
#CQ-300, #CQ-301, #CQ-303, #CQ-309, #CQ-320, #CQ-310, #CQ-312 {
  scroll-margin-top: 120px;
}

/* OXIDANTES */
#CQ-400, #CQ-401, #CQ-402, #CQ-403, #CQ-404, #CQ-406, #CQ-410, #CQ-412 {
  scroll-margin-top: 120px;
}

/* REMOVEDORES */
#CQ-601, #CQ-700 {
  scroll-margin-top: 120px;
}

/* FOSFATOS */
#CQ-801, #CQ-803, #CQ-804, #CQ-805, #CQ-806, #CQ-810, #CQ-815 {
  scroll-margin-top: 120px;
}

/* PROTECTORES */
#CQ-510, #CQ-520, #CQ-525 {
  scroll-margin-top: 120px;
}

/* AUXILIARES */
#CQ-1000, #CQ-1003, #CQ-1006, #CQ-1013 {
  scroll-margin-top: 120px;
}

/* TODOS */
html {
  scroll-behavior: smooth;
}


/* =============================== */
/* HERO CATÁLOGO PEGADO AL NAVBAR */
/* =============================== */

.hero-banner {
  margin-top: -96px;
}

/* Mobile */
@media (max-width: 991px) {
  .hero-banner {
    margin-top: -120px;
  }
}