/* =====================================================================
   Hero banner reutilizable (full-width, contenido a 1280, texto izquierda)
   Usado por páginas de servicio (Fontanería, Electricistas, …).
   ===================================================================== */

.fdq-hero-banner {
  position: relative;
  min-height: 616px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.fdq-hero-banner__inner {
  width: 100%;
  max-width: var(--fdq-container-max);
  margin-inline: auto;
  padding-inline: var(--fdq-space-md);
}
.fdq-hero-banner__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--fdq-space-md);
  max-width: 672px;
}
.fdq-hero-banner__badge {
  display: inline-block;
  margin: 0;
  padding: var(--fdq-space-xs) var(--fdq-space-sm);
  background-color: var(--fdq-secondary-container);
  color: var(--fdq-primary-container);
  border-radius: var(--fdq-radius-pill);
  font-size: 14px;
  font-weight: 700;
  box-shadow: var(--fdq-shadow-sm);
}
.fdq-hero-banner__title { margin: 0; color: #fff; }
.fdq-hero-banner__lead {
  margin: 0;
  max-width: 36rem;
  font-size: var(--fdq-fs-body-lg);
  line-height: 1.625;
  color: var(--fdq-slate-100);
}
.fdq-hero-banner__cta { gap: var(--fdq-space-sm); }

@media (min-width: 640px) {
  .fdq-hero-banner__cta { flex-direction: row; }
}
@media (max-width: 639px) {
  .fdq-hero-banner__cta { flex-direction: column; align-items: flex-start; }
}