/* =====================================================================
   Página "Ferretería industrial"
   Estilos de los bloques indu-* (botones en buttons.css).
   ===================================================================== */

/* ---------- Hero ---------- */
.indu-hero {
  display: flex;
  align-items: center;
  min-height: 600px;
  padding-block: var(--fdq-space-xl);
  background-image: url("../../images/ferreteria/ferreteria-industrial-madrid.webp");
  background-size: cover;
  background-position: center;
}
.indu-hero__inner {
  width: 100%;
  max-width: var(--fdq-container-max);
  margin-inline: auto;
  padding-inline: var(--fdq-space-md);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--fdq-space-md);
}
.indu-hero__inner > * { width: 100%; max-width: 768px; }
.indu-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--fdq-space-xs);
  width: auto;
  margin: 0;
  padding: 6px var(--fdq-space-sm);
  background-color: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: var(--fdq-radius-lg);
  font-size: var(--fdq-fs-label);
  font-weight: 700;
  letter-spacing: var(--fdq-tracking-caps);
  text-transform: uppercase;
  color: #fff;
}
.indu-hero__badge .material-symbols-outlined { font-size: 16px; color: var(--fdq-secondary-container); }
.indu-hero__badge .fdq-icon-img { width: 16px; height: 16px; }
.indu-hero__title {
  margin: 0;
  color: #fff;
  font-size: clamp(36px, 5vw, 52px);
  line-height: 1.1;
  letter-spacing: var(--fdq-tracking-tight-2);
}
.indu-hero__lead { margin: 0; max-width: 42rem; font-size: var(--fdq-fs-body-lg); color: rgba(255, 255, 255, 0.9); }
.indu-hero__features { display: flex; flex-direction: column; gap: var(--fdq-space-sm); }
.indu-hero__features > * { margin-block: 0; }
.indu-feat { display: flex; align-items: center; gap: var(--fdq-space-sm); margin: 0; color: rgba(255, 255, 255, 0.85); }
.indu-feat .material-symbols-outlined { color: var(--fdq-secondary-container); font-size: 20px; }
.indu-feat .fdq-icon-img { width: 20px; height: 20px; }
.indu-hero__cta { flex-direction: column; gap: var(--fdq-space-md); }

/* ---------- Secciones de texto + imagen ---------- */
.indu-feature { padding-block: var(--fdq-space-xl); }
.indu-feature__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fdq-space-lg);
  align-items: center;
  max-width: var(--fdq-container-max);
  margin-inline: auto;
  padding-inline: var(--fdq-space-md);
}
.indu-feature__content { display: flex; flex-direction: column; gap: var(--fdq-space-md); }
.indu-feature__title { margin: 0; color: var(--fdq-primary-container); }
.indu-feature__text { margin: 0; font-size: var(--fdq-fs-body-lg); color: var(--fdq-on-surface-variant); }
.indu-feature__media {
  position: relative;
  min-height: 320px;
  border: 1px solid var(--fdq-outline-variant);
  border-radius: var(--fdq-radius-xl);
  background-color: var(--fdq-surface-dim);
  box-shadow: var(--fdq-shadow-lg);
  overflow: hidden;
}
.indu-feature__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Cabecera de sección reutilizable ---------- */
.indu-head { display: flex; flex-direction: column; gap: var(--fdq-space-sm); text-align: center; margin-bottom: var(--fdq-space-lg); }
.indu-head__title { margin: 0; color: var(--fdq-primary-container); }
.indu-head__subtitle { margin: 0 auto; max-width: 42rem; color: var(--fdq-on-surface-variant); }

/* ---------- Categorías (bento) ---------- */
.indu-categories { padding-block: var(--fdq-space-xl); }
.indu-categories__inner { max-width: var(--fdq-container-max); margin-inline: auto; padding-inline: var(--fdq-space-md); }
.indu-categories__grid { display: grid; grid-template-columns: 1fr; gap: var(--fdq-space-md); }
.indu-categories__grid > * { margin-block: 0; }
.indu-cat {
  display: flex;
  flex-direction: column;
  gap: var(--fdq-space-xs);
  padding: var(--fdq-space-lg);
  background-color: var(--fdq-surface-container-lowest);
  border: 1px solid var(--fdq-outline-variant);
  border-radius: var(--fdq-radius-xl);
  transition: box-shadow var(--fdq-duration-base) var(--fdq-ease-out);
}
.indu-cat:hover { box-shadow: var(--fdq-shadow-lg); }
.indu-cat__icon { margin: 0 0 var(--fdq-space-xs); }
.indu-cat__icon .material-symbols-outlined { font-size: 40px; color: var(--fdq-primary); }
.indu-cat__icon .fdq-icon-img { width: 40px; height: 40px; }
.indu-cat__title { margin: 0; color: var(--fdq-primary-container); }
.indu-cat__text { margin: 0; color: var(--fdq-on-surface-variant); }

/* ---------- Públicos ---------- */
.indu-audience { padding-block: var(--fdq-space-xl); }
.indu-audience__inner { max-width: var(--fdq-container-max); margin-inline: auto; padding-inline: var(--fdq-space-md); }
.indu-audience__title { margin: 0 0 var(--fdq-space-lg); text-align: center; color: var(--fdq-primary-container); }
.indu-audience__grid { display: grid; grid-template-columns: 1fr; gap: var(--fdq-space-md); }
.indu-audience__grid > * { margin-block: 0; }
.indu-aud {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--fdq-space-sm);
  padding: var(--fdq-space-lg);
  background-color: var(--fdq-surface);
  border: 1px solid var(--fdq-outline-variant);
  border-radius: var(--fdq-radius-xl);
  transition: box-shadow var(--fdq-duration-base) var(--fdq-ease-out);
}
.indu-aud:hover { box-shadow: var(--fdq-shadow-lg); }
.indu-aud__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  margin: 0;
  background-color: rgba(31, 192, 255, 0.12);
  border-radius: var(--fdq-radius-pill);
}
.indu-aud__icon .material-symbols-outlined { font-size: 40px; color: var(--fdq-secondary); }
.indu-aud__icon .fdq-icon-img { width: 40px; height: 40px; }
.indu-aud__title { margin: 0; color: var(--fdq-primary-container); }

/* ---------- ¿Por qué elegirnos? ---------- */
.indu-why { padding-block: 96px; }
.indu-why__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fdq-space-xl);
  align-items: center;
  max-width: var(--fdq-container-max);
  margin-inline: auto;
  padding-inline: var(--fdq-space-md);
}
.indu-why__content { display: flex; flex-direction: column; gap: var(--fdq-space-md); }
.indu-why__title { margin: 0; color: #fff; font-size: clamp(32px, 4vw, 44px); letter-spacing: var(--fdq-tracking-tight-1); }
.indu-why__text { margin: 0; font-size: var(--fdq-fs-body-lg); line-height: 1.7; color: rgba(255, 255, 255, 0.9); }
.indu-why__checks { display: grid; grid-template-columns: 1fr; gap: var(--fdq-space-md); }
.indu-why__checks > * { margin-block: 0; }
.indu-check { display: flex; align-items: center; gap: var(--fdq-space-sm); margin: 0; color: #fff; }
.indu-check .material-symbols-outlined { color: var(--fdq-secondary-container); }
.indu-check .fdq-icon-img { width: 24px; height: 24px; }
.indu-why__media {
  position: relative;
  min-height: 500px;
  border-radius: var(--fdq-radius-xl);
  background-color: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.20);
  overflow: hidden;
}
.indu-why__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Banner ---------- */
.indu-banner { padding-block: 96px; }
.indu-banner__inner {
  max-width: 56rem;
  margin-inline: auto;
  padding-inline: var(--fdq-space-md);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fdq-space-md);
}
.indu-banner__title { margin: 0; color: #fff; font-size: clamp(32px, 4vw, 44px); letter-spacing: var(--fdq-tracking-tight-1); }
.indu-banner__text { margin: 0; font-size: var(--fdq-fs-body-lg); color: rgba(255, 255, 255, 0.9); }

/* ---------- Ventajas ---------- */
.indu-values { padding-block: var(--fdq-space-xl); }
.indu-values__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fdq-space-md);
  max-width: var(--fdq-container-max);
  margin-inline: auto;
  padding-inline: var(--fdq-space-md);
}
.indu-values__inner > * { margin-block: 0; }
.indu-value {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--fdq-space-xs);
  padding: var(--fdq-space-lg);
  background-color: var(--fdq-surface-container-lowest);
  border: 1px solid var(--fdq-outline-variant);
  border-radius: var(--fdq-radius-xl);
  box-shadow: var(--fdq-shadow-sm);
}
.indu-value__icon { margin: 0 0 var(--fdq-space-xs); }
.indu-value__icon .material-symbols-outlined { font-size: 48px; color: var(--fdq-secondary); }
.indu-value__icon .fdq-icon-img { width: 48px; height: 48px; }
.indu-value__title { margin: 0; color: var(--fdq-primary-container); }
.indu-value__text { margin: 0; color: var(--fdq-on-surface-variant); }

/* ---------- Servicios y precios ---------- */
.indu-pricing { padding-block: var(--fdq-space-xl); }
.indu-pricing__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fdq-space-lg);
  max-width: var(--fdq-container-max);
  margin-inline: auto;
  padding-inline: var(--fdq-space-md);
}
.indu-pricing__intro { display: flex; flex-direction: column; gap: var(--fdq-space-md); }
.indu-pricing__title { margin: 0; color: var(--fdq-primary-container); }
.indu-pricing__text { margin: 0; color: var(--fdq-on-surface-variant); }
.indu-table {
  background-color: #fff;
  border: 1px solid var(--fdq-outline-variant);
  border-radius: var(--fdq-radius-xl);
  overflow: hidden;
  box-shadow: var(--fdq-shadow-sm);
}
.indu-table__head { padding: var(--fdq-space-md); background-color: var(--fdq-primary); color: #fff; }
.indu-table__h {
  margin: 0;
  font-family: var(--fdq-font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.indu-rate { padding: var(--fdq-space-md); gap: var(--fdq-space-md); border-top: 1px solid rgba(197, 198, 206, 0.4); }
.indu-rate__name { display: flex; flex-direction: column; }
.indu-rate__title { margin: 0; font-weight: 700; color: var(--fdq-primary-container); }
.indu-rate__sub { margin: 0; font-size: 12px; color: var(--fdq-on-surface-variant); }
.indu-rate__price { margin: 0; font-weight: 700; color: var(--fdq-secondary); white-space: nowrap; text-align: right; }
.indu-table__note {
  margin: 0;
  padding: var(--fdq-space-md);
  border-top: 1px solid var(--fdq-outline-variant);
  font-size: 12px;
  font-style: italic;
  color: var(--fdq-on-surface-variant);
}

/* ---------- Cita stock real ---------- */
.indu-quote { padding-block: var(--fdq-space-xl); border-block: 1px solid rgba(255, 255, 255, 0.10); }
.indu-quote__inner {
  max-width: var(--fdq-container-max);
  margin-inline: auto;
  padding-inline: var(--fdq-space-md);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fdq-space-md);
}
.indu-quote__icon { margin: 0; }
.indu-quote__icon .material-symbols-outlined { font-size: 48px; color: var(--fdq-secondary-container); }
.indu-quote__icon .fdq-icon-img { width: 48px; height: 48px; }
.indu-quote__title { margin: 0; color: #fff; }
.indu-quote__text {
  margin: 0;
  max-width: 42rem;
  text-align: left;
  padding-left: var(--fdq-space-md);
  border-left: 4px solid var(--fdq-secondary-container);
  font-size: var(--fdq-fs-body-lg);
  color: var(--fdq-primary-fixed-dim);
}

/* ---------- Marcas ---------- */
.indu-brands { padding-block: var(--fdq-space-xl); border-bottom: 1px solid var(--fdq-outline-variant); }
.indu-brands__inner { max-width: var(--fdq-container-max); margin-inline: auto; padding-inline: var(--fdq-space-md); text-align: center; }
.indu-brands__eyebrow {
  margin: 0 0 var(--fdq-space-lg);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fdq-on-surface-variant);
}
.indu-brands__logos { gap: var(--fdq-space-lg); align-items: center; }
.indu-brand { margin: 0; font-family: var(--fdq-font-heading); font-size: 28px; font-weight: 800; color: var(--fdq-primary); opacity: 0.55; }

/* ---------- WhatsApp repuesto ---------- */
.indu-whatsapp { padding-block: var(--fdq-space-xl); }
.indu-whatsapp__inner { max-width: var(--fdq-container-max); margin-inline: auto; padding-inline: var(--fdq-space-md); }
.indu-whatsapp__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--fdq-space-lg);
  padding: var(--fdq-space-lg);
  background-color: #fff;
  border: 2px solid var(--fdq-outline-variant);
  border-radius: var(--fdq-radius-xl);
  box-shadow: var(--fdq-shadow-sm);
}
.indu-whatsapp__text { display: flex; flex-direction: column; gap: var(--fdq-space-xs); }
.indu-whatsapp__title { margin: 0; color: var(--fdq-primary-container); }
.indu-whatsapp__lead { margin: 0; font-size: var(--fdq-fs-body-lg); color: var(--fdq-on-surface-variant); }
.indu-whatsapp__cta { flex-shrink: 0; }

/* ---------- Ubicación y CTA final ---------- */
.indu-location { padding-block: var(--fdq-space-xl); }
.indu-location__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fdq-space-xl);
  max-width: var(--fdq-container-max);
  margin-inline: auto;
  padding-inline: var(--fdq-space-md);
}
.indu-location__info { display: flex; flex-direction: column; gap: var(--fdq-space-md); }
.indu-location__title { margin: 0; color: var(--fdq-primary-container); }
.indu-location__text { margin: 0; color: var(--fdq-on-surface-variant); }
.indu-location__quote {
  margin: 0;
  padding-left: var(--fdq-space-sm);
  border-left: 4px solid var(--fdq-secondary-container);
  font-style: italic;
  color: var(--fdq-on-surface-variant);
}
.indu-location__box {
  margin-top: var(--fdq-space-xs);
  padding: var(--fdq-space-lg);
  background-color: var(--fdq-surface-container-low);
  border: 1px solid var(--fdq-outline-variant);
  border-radius: var(--fdq-radius-xl);
}
.indu-location__box-title { margin: 0 0 var(--fdq-space-md); color: var(--fdq-primary-container); }
.indu-location__buttons { flex-direction: column; gap: var(--fdq-space-sm); }
.indu-location__buttons .wp-block-button,
.indu-location__buttons .wp-element-button { width: 100%; }
.indu-location__map-col { display: flex; flex-direction: column; gap: var(--fdq-space-sm); }
.indu-location__map {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  border: 1px solid var(--fdq-outline-variant);
  border-radius: var(--fdq-radius-xl);
  background-color: var(--fdq-surface-dim);
  overflow: hidden;
}
.indu-location__map-pin { margin: 0; }
.indu-location__map-pin .material-symbols-outlined { font-size: 64px; color: var(--fdq-primary); }
.indu-location__map-pin .fdq-icon-img { width: 64px; height: 64px; }

/* ---------- Responsive ---------- */
@media (min-width: 640px) {
  .indu-hero__cta { flex-direction: row; }
  .indu-why__checks { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 768px) {
  .indu-feature__inner { grid-template-columns: 1fr 1fr; }
  .indu-feature--reverse .indu-feature__content { order: 2; }
  .indu-feature--reverse .indu-feature__media { order: 1; }
  .indu-categories__grid { grid-template-columns: repeat(2, 1fr); }
  .indu-audience__grid { grid-template-columns: repeat(3, 1fr); }
  .indu-values__inner { grid-template-columns: repeat(3, 1fr); }
  .indu-why__inner { grid-template-columns: 1fr 1fr; }
  .indu-whatsapp__card { flex-direction: row; align-items: center; justify-content: space-between; }
  .indu-location__inner { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .indu-categories__grid { grid-template-columns: repeat(3, 1fr); }
  .indu-cat--wide { grid-column: span 2; }
  .indu-pricing__inner { grid-template-columns: 1fr 2fr; align-items: start; }
}