/* =====================================================================
   Catálogo — "Tu Ferretería Industrial y Doméstica" (imágenes + texto)
   ===================================================================== */

.fdq-catalog {
  padding-block: 96px;
  border-block: 1px solid var(--fdq-outline-variant);
}
.fdq-catalog__grid {
  max-width: var(--fdq-container-max);
  margin-inline: auto;
  padding-inline: var(--fdq-space-md);
  display: grid;
  grid-template-columns: 1fr;
  gap: 80px;
  align-items: center;
}

/* ---------- Imágenes ---------- */
.fdq-catalog__media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--fdq-space-sm);
  align-items: start;
}
@media (max-width: 992px) {
  .fdq-catalog__media {
    order: 1;
  }
  .fdq-catalog__content {
    order: 0;
  }
}
.fdq-catalog__img {
  aspect-ratio: 1 / 1;
  border-radius: var(--fdq-radius-lg);
  background-color: var(--fdq-surface-container);
  background-image: url("../../images/home/material-ferreteria-madrid-centro.webp");
  background-size: cover;
  background-position: center;
}
.fdq-catalog__img--offset {
  margin-top: var(--fdq-space-lg);
  background-image: url("../../images/home/ferreteria-cerca-barrio-salamanca.webp");
}

/* ---------- Contenido ---------- */
.fdq-catalog__content {
  display: flex;
  flex-direction: column;
  gap: var(--fdq-space-md);
}
.fdq-catalog__eyebrow {
  margin: 0;
  font-size: var(--fdq-fs-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fdq-secondary);
}
.fdq-catalog__title { margin: 0; color: var(--fdq-primary); }
.fdq-catalog__text {
  margin: 0;
  font-size: var(--fdq-fs-body-lg);
  color: var(--fdq-on-surface-variant);
}

.fdq-catalog__features {
  display: flex;
  flex-direction: column;
  margin-top: 0;
}
.fdq-catalog__feature { gap: var(--fdq-space-xs); margin-top: 10px;}
.fdq-catalog__feature-icon { margin: 0; }
.fdq-catalog__feature-icon .material-symbols-outlined { color: var(--fdq-secondary); }
.fdq-catalog__feature-icon .fdq-icon-img { width: 22px; height: 22px; }
.fdq-catalog__feature-body > * { margin: 0; }
.fdq-catalog__feature-title { font-weight: 700; color: var(--fdq-primary); }
.fdq-catalog__feature-text { color: var(--fdq-on-surface-variant); }

@media (min-width: 992px) {
  .fdq-catalog__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .fdq-catalog__content { order: -1; }
}