/* =====================================================================
   Página "Electricistas"
   ===================================================================== */

/* ---------- Hero (imagen de fondo, sin degradado) ---------- */
.elec-hero.fdq-hero-banner {
  background-image: url("../../images/electricistas/electricistas-madrid.webp");
  background-size: cover;
  background-position: center;
}

/* ---------- Banda de confianza ---------- */
.elec-trust { padding-block: var(--fdq-space-xl); }
.elec-trust__grid {
  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);
}
.elec-trust__grid > * { margin-block: 0; }
.elec-trust-card {
  gap: var(--fdq-space-sm);
  align-items: flex-start;
  padding: var(--fdq-space-md);
  background-color: var(--fdq-surface-container-lowest);
  border: 1px solid var(--fdq-slate-200);
  border-radius: var(--fdq-radius-lg);
}
.elec-trust-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0;
  flex-shrink: 0;
  background-color: var(--fdq-surface-container);
  border-radius: var(--fdq-radius-pill);
}
.elec-trust-card__icon .material-symbols-outlined { color: var(--fdq-secondary); }
.elec-trust-card__body > * { margin: 0; }
.elec-trust-card__title {
  margin-bottom: var(--fdq-space-base);
  font-size: var(--fdq-fs-h3);
  font-weight: 600;
  color: var(--fdq-primary);
}
.elec-trust-card__text { font-size: 14px; color: var(--fdq-on-surface-variant); }
/* destacada */
.elec-trust-card--dark {
  position: relative;
  overflow: hidden;
  background-color: var(--fdq-primary);
  border-color: var(--fdq-primary-container);
  box-shadow: var(--fdq-shadow-lg);
}
.elec-trust-card--dark .elec-trust-card__icon,
.elec-trust-card--dark .elec-trust-card__body { position: relative; z-index: 1; }
.elec-trust-card--dark .elec-trust-card__icon { background-color: rgba(31, 192, 255, 0.20); }
.elec-trust-card--dark .elec-trust-card__icon .material-symbols-outlined { color: var(--fdq-secondary-container); }
.elec-trust-card--dark .elec-trust-card__title { color: #fff; }
.elec-trust-card--dark .elec-trust-card__text { color: var(--fdq-primary-fixed-dim); }
.elec-trust-card__wm {
  position: absolute;
  top: -24px;
  right: -24px;
  z-index: 0;
  margin: 0;
  color: var(--fdq-primary-container);
  opacity: 0.18;
  pointer-events: none;
}
.elec-trust-card__wm .material-symbols-outlined { font-size: 100px; }
.elec-trust-card__wm .fdq-icon-img { width: 96px; height: 96px; }

/* ---------- Servicios ---------- */
.elec-services { padding-block: var(--fdq-space-xl); }
.elec-services__inner {
  max-width: var(--fdq-container-max);
  margin-inline: auto;
  padding-inline: var(--fdq-space-md);
}
.elec-services__head { margin-bottom: 48px; }
.elec-services__title { margin: 0 0 var(--fdq-space-sm); font-size: var(--fdq-fs-h1); font-weight: 700; color: var(--fdq-primary); }
.elec-services__subtitle { margin: 0; max-width: 42rem; font-size: var(--fdq-fs-body-lg); color: var(--fdq-on-surface-variant); }
.elec-services__grid {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 48px;
  row-gap: var(--fdq-space-lg);
}
.elec-services__grid > * { margin-block: 0; }
.elec-service { gap: var(--fdq-space-md); align-items: flex-start; }
.elec-service__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0;
  flex-shrink: 0;
  background-color: var(--fdq-surface-container);
  border-radius: var(--fdq-radius-lg);
  transition: background-color var(--fdq-duration-base) var(--fdq-ease-out);
}
.elec-service__icon .material-symbols-outlined { color: var(--fdq-primary); font-size: 30px; transition: color var(--fdq-duration-base) var(--fdq-ease-out); }
.elec-service:hover .elec-service__icon { background-color: var(--fdq-primary); }
.elec-service:hover .elec-service__icon .material-symbols-outlined { color: #fff; }
.elec-service__body > * { margin: 0; }
.elec-service__title {
  margin-bottom: var(--fdq-space-xs);
  font-size: var(--fdq-fs-h3);
  font-weight: 600;
  color: var(--fdq-primary);
  transition: color var(--fdq-duration-base) var(--fdq-ease-out);
}
.elec-service:hover .elec-service__title { color: var(--fdq-secondary); }
.elec-service__text { color: var(--fdq-on-surface-variant); }

/* ---------- Calidad ---------- */
.elec-quality { padding-block: var(--fdq-space-xl); }
.elec-quality__inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
  max-width: var(--fdq-container-max);
  margin-inline: auto;
  padding-inline: var(--fdq-space-md);
}
.elec-quality__media { width: 100%; border-radius: 1rem; }
.elec-quality__content { display: flex; flex-direction: column; align-items: flex-start; gap: var(--fdq-space-md); }
.elec-quality__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--fdq-space-xs);
  margin: 0;
  padding: var(--fdq-space-xs) var(--fdq-space-sm);
  background-color: rgba(31, 192, 255, 0.12);
  border-radius: var(--fdq-radius-pill);
  font-size: 14px;
  font-weight: 700;
  color: var(--fdq-secondary);
}
.elec-quality__badge .material-symbols-outlined { font-size: 18px; }
.elec-quality__title { margin: 0; font-size: var(--fdq-fs-h1); font-weight: 700; color: var(--fdq-primary-container); }
.elec-quality__text { margin: 0; font-size: var(--fdq-fs-body-lg); color: var(--fdq-on-surface-variant); }

/* ---------- Tarifas ---------- */
.elec-pricing { padding-block: var(--fdq-space-xl); }
.elec-pricing__inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
  max-width: var(--fdq-container-max);
  margin-inline: auto;
  padding-inline: var(--fdq-space-md);
}
.elec-pricing__content { display: flex; flex-direction: column; gap: var(--fdq-space-md); }
.elec-pricing__title { margin: 0; font-size: var(--fdq-fs-h1); font-weight: 700; color: var(--fdq-primary); }
.elec-pricing__text { margin: 0; color: var(--fdq-on-surface-variant); }
.elec-pricing__text:first-of-type { font-size: var(--fdq-fs-body-lg); }
.elec-pricing__text strong { color: var(--fdq-primary); font-weight: 700; }
.elec-rates {
  padding: var(--fdq-space-lg);
  background-color: var(--fdq-primary-container);
  border-radius: 1rem;
  box-shadow: var(--fdq-shadow-lg);
}
.elec-rates__title { margin: 0 0 var(--fdq-space-md); font-size: var(--fdq-fs-h2); font-weight: 600; color: #fff; }
.elec-rate {
  display: flex;
  justify-content: space-between;
  gap: var(--fdq-space-sm);
  margin: 0;
  padding-block: var(--fdq-space-sm);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  color: #fff;
}
.elec-rate__v { font-weight: 700; white-space: nowrap; }
.elec-rates__note { margin: var(--fdq-space-xs) 0 0; font-size: 13px; color: var(--fdq-primary-fixed-dim); }
.elec-rates__legal { margin: var(--fdq-space-md) 0 0; font-size: 12px; color: var(--fdq-on-primary-container); }

/* ---------- Proceso ---------- */
.elec-process { padding-block: var(--fdq-space-xl); text-align: center; }
.elec-process__inner { max-width: var(--fdq-container-max); margin-inline: auto; padding-inline: var(--fdq-space-md); }
.elec-process__title { margin: 0 0 64px; color: #fff; }
.elec-process__steps {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  max-width: 56rem;
  margin-inline: auto;
}
.elec-process__steps > * { margin-block: 0; }
.elec-step { display: flex; flex-direction: column; align-items: center; max-width: 200px; position: relative; z-index: 1; }
.elec-step__circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  margin: 0 0 var(--fdq-space-md);
  border-radius: var(--fdq-radius-pill);
  background-color: var(--fdq-primary-container);
  border: 2px solid var(--fdq-primary-fixed-dim);
  color: var(--fdq-secondary-container);
}
.elec-step__circle .material-symbols-outlined { font-size: 30px; }
.elec-step--active .elec-step__circle {
  background-color: var(--fdq-secondary-container);
  border-color: var(--fdq-secondary-container);
  color: var(--fdq-primary);
  box-shadow: 0 0 15px rgba(31, 192, 255, 0.30);
}
.elec-step__title { margin: 0 0 var(--fdq-space-xs); font-size: var(--fdq-fs-h3); color: #fff; }
.elec-step__text { margin: 0; font-size: 14px; color: var(--fdq-primary-fixed-dim); }

/* ---------- Cobertura ---------- */
.elec-coverage { padding-block: var(--fdq-space-xl); }
.elec-coverage__inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
  max-width: var(--fdq-container-max);
  margin-inline: auto;
  padding-inline: var(--fdq-space-md);
}
.elec-coverage__media {
  width: 100%;
  height: 400px;
  border-radius: 1rem;
  background-color: var(--fdq-surface-dim);
  border: 1px solid var(--fdq-outline-variant);
  box-shadow: var(--fdq-shadow-sm);
}
.elec-coverage__content { display: flex; flex-direction: column; align-items: flex-start; gap: var(--fdq-space-md); }
.elec-coverage__title { margin: 0; color: var(--fdq-primary); }
.elec-coverage__text { margin: 0; color: var(--fdq-on-surface-variant); }
.elec-coverage__zones { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fdq-space-sm); width: 100%; }
.elec-coverage__zones > * { margin-block: 0; }
.elec-zone { display: flex; align-items: center; gap: var(--fdq-space-xs); margin: 0; color: var(--fdq-on-surface); }
.elec-zone .material-symbols-outlined { color: var(--fdq-secondary); font-size: 18px; }

/* ---------- Responsive ---------- */
@media (min-width: 640px) {
  .elec-coverage__zones { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 768px) {
  .elec-trust__grid { grid-template-columns: repeat(3, 1fr); }
  .elec-services__grid { grid-template-columns: repeat(2, 1fr); }
  .elec-process__steps { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: var(--fdq-space-sm); }
  .elec-process__steps::before {
    content: "";
    position: absolute;
    top: 40px;
    left: 10%;
    right: 10%;
    height: 2px;
    background-color: rgba(183, 199, 235, 0.30);
    z-index: 0;
  }
}
@media (min-width: 1024px) {
  .elec-quality__inner { flex-direction: row-reverse; align-items: center; }
  .elec-quality__media,
  .elec-quality__content { flex: 1; }
  .elec-pricing__inner { flex-direction: row; align-items: center; }
  .elec-pricing__content,
  .elec-rates { flex: 1; }
  .elec-coverage__inner { flex-direction: row; align-items: center; }
  .elec-coverage__media,
  .elec-coverage__content { flex: 1; }
}

/* =====================================================================
   Iconos SVG (sustituyen a los material symbols) y fotos con <img>
   ===================================================================== */
.elec-trust-card__icon .fdq-icon-img { width: 26px; height: 26px; }
.elec-service__icon .fdq-icon-img { width: 30px; height: 30px; }
/* En hover el círculo del servicio se oscurece; el icono (azul oscuro) pasa a blanco */
.elec-service:hover .elec-service__icon .fdq-icon-img { filter: brightness(0) invert(1); }
.elec-quality__badge .fdq-icon-img { width: 18px; height: 18px; }
.elec-step__circle .fdq-icon-img { width: 30px; height: 30px; }
.elec-zone .fdq-icon-img { width: 18px; height: 18px; }

/* Foto de calidad y mapa de cobertura */
.elec-quality__media,
.elec-coverage__media { overflow: hidden; }
.elec-quality__img,
.elec-coverage__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}