/* =====================================================================
   Página "Fontanería"
   ===================================================================== */

/* ---------- Hero (full width) ---------- */
.fonta-hero {
  position: relative;
  min-height: 616px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-image:
    url("../../images/fontaneria/fontaneria-madrid.webp");
  background-size: cover;
  background-position: center;
}
.fonta-hero__inner {
  width: 100%;
  max-width: var(--fdq-container-max);
  margin-inline: auto;
  padding-inline: var(--fdq-space-md);
}
.fonta-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--fdq-space-md);
  max-width: 672px;
}
.fonta-hero__badge {
  display: inline-block;
  align-self: flex-start;
  margin: 0;
  padding: 6px var(--fdq-space-sm);
  background-color: var(--fdq-secondary-container);
  color: var(--fdq-primary);
  border-radius: var(--fdq-radius-sm);
  font-size: 14px;
  font-weight: 700;
}
.fonta-hero__title { margin: 0; color: #fff; }
.fonta-hero__lead {
  margin: 0;
  max-width: 36rem;
  font-size: var(--fdq-fs-body-lg);
  line-height: 1.625;
  color: var(--fdq-slate-100);
}
.fonta-hero__cta { gap: var(--fdq-space-sm); }

/* ---------- Banda de confianza ---------- */
.fonta-trust {
  padding-block: var(--fdq-space-md);
  text-align: center;
  border-bottom: 4px solid var(--fdq-secondary-container);
}
.fonta-trust__inner {
  max-width: var(--fdq-container-max);
  margin-inline: auto;
  padding-inline: var(--fdq-space-md);
}
.fonta-trust__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--fdq-space-xs);
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}
.fonta-trust__title .material-symbols-outlined { color: var(--fdq-secondary-container); font-size: 24px; }

/* ---------- Tienda física ---------- */
.fonta-store { padding-block: var(--fdq-space-lg); border-block: 1px solid var(--fdq-slate-200); }
.fonta-store__grid {
  max-width: var(--fdq-container-max);
  margin-inline: auto;
  padding-inline: var(--fdq-space-md);
  gap: var(--fdq-space-lg);
}
.fonta-store__content { display: flex; flex-direction: column; gap: var(--fdq-space-sm); }
.fonta-store__eyebrow {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fdq-secondary);
}
.fonta-store__title { margin: 0; color: var(--fdq-primary-container); }
.fonta-store__text { margin: 0; font-size: var(--fdq-fs-body-lg); color: var(--fdq-on-surface-variant); }
.fonta-store__info { gap: var(--fdq-space-md); margin-top: var(--fdq-space-xs); }
.fonta-store__item { gap: var(--fdq-space-xs); align-items: flex-start; }
.fonta-store__item-icon { margin: 0; }
.fonta-store__item-icon .material-symbols-outlined { color: var(--fdq-secondary); }
.fonta-store__item-body > * { margin: 0; }
.fonta-store__item-strong { font-weight: 700; color: var(--fdq-primary-container); }
.fonta-store__item-soft { color: var(--fdq-on-surface-variant); }
.fonta-store__media {
  height: 300px;
  border-radius: var(--fdq-radius-md);
  border: 1px solid #cbd5e1;
  background-color: var(--fdq-surface-dim);
  box-shadow: var(--fdq-shadow-md);
}

/* ---------- Servicios ---------- */
.fonta-services { padding-block: 96px; }
.fonta-services__inner {
  max-width: var(--fdq-container-max);
  margin-inline: auto;
  padding-inline: var(--fdq-space-md);
}
.fonta-services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fdq-space-lg);
  max-width: 64rem;
  margin-inline: auto;
}
.fonta-services__grid > * { margin-block: 0; }
.fonta-service-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--fdq-space-sm);
  padding: var(--fdq-space-lg);
  background-color: rgba(27, 43, 72, 0.03);
  border: 1px solid var(--fdq-slate-200);
  border-top: 4px solid var(--fdq-secondary);
  border-radius: 1rem;
  box-shadow: var(--fdq-shadow-sm);
  transition: box-shadow var(--fdq-duration-base) var(--fdq-ease-out);
}
.fonta-service-card:hover { box-shadow: var(--fdq-shadow-md); }
.fonta-service-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0;
  background-color: rgba(27, 43, 72, 0.10);
  border-radius: 1rem;
}
.fonta-service-card__icon .material-symbols-outlined { color: var(--fdq-primary-container); font-size: 30px; }
.fonta-service-card__title { margin: 0; font-size: 18px; font-weight: 700; color: var(--fdq-primary-container); }
.fonta-service-card__text { margin: 0; color: var(--fdq-on-surface-variant); }

/* ---------- Precios ---------- */
.fonta-pricing { padding-block: 96px; border-top: 1px solid var(--fdq-slate-200); }
.fonta-pricing__grid {
  max-width: var(--fdq-container-max);
  margin-inline: auto;
  padding-inline: var(--fdq-space-md);
  gap: var(--fdq-space-lg);
}
.fonta-pricing__content { display: flex; flex-direction: column; }
.fonta-pricing__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 0 var(--fdq-space-md);
  background-color: rgba(27, 43, 72, 0.10);
  border-radius: var(--fdq-radius-pill);
}
.fonta-pricing__icon .material-symbols-outlined { color: var(--fdq-primary-container); font-size: 30px; }
/* Encabezado (título + texto) por encima de las dos columnas, a todo el ancho */
.fonta-pricing__head {
  max-width: var(--fdq-container-max);
  margin: 0 auto var(--fdq-space-xl);
  padding-inline: var(--fdq-space-md);
}
.fonta-pricing__title { margin: 0 0 var(--fdq-space-md); color: var(--fdq-primary-container); }
.fonta-pricing__text { margin: 0 0 var(--fdq-space-lg); font-size: var(--fdq-fs-body-lg); color: var(--fdq-on-surface-variant); }
.fonta-pricing__head .fonta-pricing__text { margin-bottom: 0; max-width: 60rem; }
.fonta-pricing__chips {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fdq-space-sm);
  width: 100%;
}
.fonta-pricing__chips > * { margin-block: 0; }
.fonta-chip {
  display: flex;
  align-items: center;
  gap: var(--fdq-space-sm);
  margin: 0;
  padding: var(--fdq-space-sm);
  background-color: #fff;
  border: 1px solid var(--fdq-slate-200);
  border-radius: 1rem;
  font-size: 15px;
  font-weight: 700;
  color: var(--fdq-primary-container);
  box-shadow: var(--fdq-shadow-sm);
}
.fonta-chip__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background-color: var(--fdq-primary);
  border-radius: var(--fdq-radius-md);
}
.fonta-chip__ico .material-symbols-outlined { color: #fff; font-size: 20px; }
.fonta-pricing__table { width: 100%; margin: var(--fdq-space-lg) 0 0; }
.fonta-pricing__table table {
  width: 100%;
  border-collapse: collapse;
  background-color: #fff;
  border: 1px solid var(--fdq-slate-200);
  border-radius: var(--fdq-radius-lg);
  overflow: hidden;
}
.fonta-pricing__table thead { background-color: var(--fdq-primary-container); color: #fff; }
.fonta-pricing__table th {
  padding: var(--fdq-space-sm) var(--fdq-space-md);
  text-align: left;
  font-family: var(--fdq-font-heading);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.fonta-pricing__table td {
  padding: var(--fdq-space-sm) var(--fdq-space-md);
  border-top: 1px solid var(--fdq-slate-200);
  color: var(--fdq-on-surface);
}
.fonta-pricing__table tbody tr:nth-child(even) { background-color: #f8fafc; }
.fonta-pricing__table td:last-child { font-weight: 700; color: var(--fdq-primary-container); white-space: nowrap; }
.fonta-pricing__table figcaption {
  margin-top: var(--fdq-space-xs);
  font-size: 12px;
  text-align: left;
  color: var(--fdq-on-surface-variant);
}
.fonta-pricing__media {
  width: 100%;
  min-height: 400px;
  height: 100%;
  border-radius: 1.5rem;
  border: 1px solid var(--fdq-slate-200);
  background-color: var(--fdq-surface-dim);
  box-shadow: var(--fdq-shadow-lg);
}

/* ---------- Cobertura ---------- */
.fonta-coverage {
  min-height: 616px;
  display: flex;
  align-items: center;
  padding-block: var(--fdq-space-xl);
  padding-inline: var(--fdq-space-md);
  border-top: 1px solid var(--fdq-slate-200);
}
.fonta-coverage__card {
  display: flex;
  flex-direction: column;
  gap: var(--fdq-space-lg);
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding: var(--fdq-space-lg);
  background-color: var(--fdq-surface-container-low);
  border: 1px solid #cbd5e1;
  border-radius: 1.5rem;
  box-shadow: var(--fdq-shadow-sm);
}
.fonta-coverage__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 0 var(--fdq-space-md);
  background-color: rgba(27, 43, 72, 0.10);
  border-radius: var(--fdq-radius-md);
}
.fonta-coverage__icon .material-symbols-outlined { color: var(--fdq-primary-container); font-size: 24px; }
.fonta-coverage__title { margin: 0 0 var(--fdq-space-sm); color: var(--fdq-primary-container); }
.fonta-coverage__bar { width: 64px; min-height: 0; height: 4px; margin: 0 0 var(--fdq-space-md); background-color: var(--fdq-secondary); }
.fonta-coverage__text { margin: 0; font-size: var(--fdq-fs-body-lg); color: var(--fdq-on-surface-variant); }
.fonta-coverage__zones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--fdq-space-sm);
}
.fonta-coverage__zones > * { margin-block: 0; }
.fonta-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--fdq-space-base);
  margin: 0;
  padding: var(--fdq-space-sm);
  background-color: #fff;
  border: 1px solid #cbd5e1;
  border-radius: var(--fdq-radius-md);
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  color: var(--fdq-on-surface);
  box-shadow: var(--fdq-shadow-sm);
}
.fonta-zone .material-symbols-outlined { color: var(--fdq-secondary); font-size: 24px; }
.fonta-zone--main {
  grid-column: 1 / -1;
  flex-direction: row;
  background-color: var(--fdq-primary);
  color: #fff;
  font-weight: 700;
}
.fonta-zone--main .material-symbols-outlined { color: var(--fdq-secondary-container); font-size: 20px; }

/* ---------- Responsive ---------- */
@media (min-width: 640px) {
  .fonta-hero__cta { flex-direction: row; }
  .fonta-pricing__chips { grid-template-columns: 1fr 1fr; }
  .fonta-coverage__zones { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 639px) {
  .fonta-hero__cta { flex-direction: column; align-items: flex-start; }
}
@media (min-width: 768px) {
  .fonta-services__grid { grid-template-columns: repeat(2, 1fr); }
  .fonta-coverage__card { flex-direction: row; align-items: center; gap: var(--fdq-space-xl); }
  .fonta-coverage__intro,
  .fonta-coverage__zones { flex: 1; }
}

/* =====================================================================
   Iconos SVG (sustituyen a los material symbols) y fotos con <img>
   ===================================================================== */
.fonta-trust__title .fdq-icon-img { width: 24px; height: 24px; }
.fonta-service-card__icon .fdq-icon-img { width: 30px; height: 30px; }
.fonta-chip__ico .fdq-icon-img { width: 20px; height: 20px; }
.fonta-coverage__icon .fdq-icon-img { width: 24px; height: 24px; }
.fonta-zone .fdq-icon-img { width: 24px; height: 24px; }
.fonta-zone--main .fdq-icon-img { width: 20px; height: 20px; }
.fonta-store__item-icon .fdq-icon-img { width: 22px; height: 22px; }

/* Foto de la sección de precios (llave inglesa) */
.fonta-pricing__media { overflow: hidden; }
.fonta-pricing__img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 400px;
  object-fit: cover;
}

/* Foto de la tienda física (fachada) */
.fonta-store__media { overflow: hidden; }
.fonta-store__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}