/* =====================================================================
   Botones — variantes reutilizables sobre core/button (.wp-block-button)
   ===================================================================== */

.fdq-btn .wp-element-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fdq-space-xs);
  font-family: var(--fdq-font-heading);
  font-weight: 700;
  text-decoration: none;
  transition: background-color var(--fdq-duration-base) var(--fdq-ease-out),
              color var(--fdq-duration-base) var(--fdq-ease-out),
              transform var(--fdq-duration-base) var(--fdq-ease-out),
              box-shadow var(--fdq-duration-base) var(--fdq-ease-out);
}

.fdq-btn .wp-element-button:hover { text-decoration: none; }

/* Icono SVG dentro de un botón (sustituye a los material symbols) */
.fdq-btn .fdq-btn-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

/* Contacto (header): sólido oscuro, compacto */
.fdq-btn--contacto .wp-element-button {
  min-height: 44px;
  min-width: 120px;
  padding: var(--fdq-space-xs) var(--fdq-space-md);
  background-color: var(--fdq-primary);
  color: var(--fdq-on-primary);
  border-radius: var(--fdq-radius-sm);
}
.fdq-btn--contacto .wp-element-button:active { opacity: 0.8; }

/* CTA del hero: grandes, alto 56px */
.fdq-btn--llamar .wp-element-button,
.fdq-btn--presupuesto .wp-element-button {
  min-height: 56px;
  padding: var(--fdq-space-sm) 32px;
  border-radius: var(--fdq-radius-sm);
}

/* Llamar ahora: cian (secondary-container) */
.fdq-btn--llamar .wp-element-button {
  background-color: var(--fdq-secondary-container);
  color: var(--fdq-on-secondary-container);
  box-shadow: var(--fdq-shadow-lg);
}
.fdq-btn--llamar .wp-element-button:hover,
.fdq-btn--llamar .wp-element-button:focus { transform: scale(1.05); }
.fdq-btn--llamar .wp-element-button:active { transform: scale(0.95); }

/* Solicitar Presupuesto: contorno blanco sobre fondo oscuro */
.fdq-btn--presupuesto .wp-element-button {
  background-color: transparent;
  color: #fff;
  border: 2px solid #fff;
}
.fdq-btn--presupuesto .wp-element-button:hover,
.fdq-btn--presupuesto .wp-element-button:focus {
  background-color: rgba(255, 255, 255, 0.10);
}
.fdq-btn--presupuesto .wp-element-button:active { opacity: 0.8; }

/* Saber más (tarjeta destacada): contorno blanco, esquina md */
.fdq-btn--saber .wp-element-button {
  padding: 12px 32px;
  background-color: transparent;
  color: #fff;
  border: 2px solid #fff;
  border-radius: var(--fdq-radius-md);
}
.fdq-btn--saber .wp-element-button:hover,
.fdq-btn--saber .wp-element-button:focus { background-color: rgba(255, 255, 255, 0.10); }
.fdq-btn--saber .wp-element-button:active { transform: scale(0.95); }

/* Solicitar (tarjeta de servicio): contorno gris, ancho completo, se rellena al hover */
.fdq-btn--solicitar,
.fdq-btn--solicitar .wp-element-button { width: 100%; }
.fdq-btn--solicitar .wp-element-button {
  padding: 12px var(--fdq-space-md);
  background-color: transparent;
  color: var(--fdq-primary);
  border: 2px solid var(--fdq-slate-200);
  border-radius: var(--fdq-radius-md);
}
.fdq-btn--solicitar .wp-element-button:hover,
.fdq-btn--solicitar .wp-element-button:focus {
  background-color: var(--fdq-primary);
  border-color: var(--fdq-primary);
  color: var(--fdq-on-primary);
}

/* Explorar catálogo: sólido primary, alto 56px */
.fdq-btn--catalog .wp-element-button {
  min-height: 56px;
  padding: var(--fdq-space-sm) var(--fdq-space-lg);
  background-color: var(--fdq-primary);
  color: var(--fdq-on-primary);
  border-radius: var(--fdq-radius-sm);
}
.fdq-btn--catalog .wp-element-button:hover,
.fdq-btn--catalog .wp-element-button:focus { background-color: var(--fdq-tertiary); }

/* Pedir presupuesto (bloque premium): sólido blanco, esquina md */
.fdq-btn--premium .wp-element-button {
  padding: var(--fdq-space-sm) var(--fdq-space-lg);
  background-color: #fff;
  color: var(--fdq-primary);
  border-radius: var(--fdq-radius-md);
  box-shadow: var(--fdq-shadow-lg);
}
.fdq-btn--premium .wp-element-button:hover,
.fdq-btn--premium .wp-element-button:focus { background-color: var(--fdq-secondary-container); }
.fdq-btn--premium .wp-element-button:active { transform: scale(0.95); }

/* Llamar (hero manitas): contenedor primary con borde blanco -> invierte al hover */
.fdq-btn--call-outline .wp-element-button {
  padding: var(--fdq-space-sm) 32px;
  background-color: var(--fdq-primary-container);
  color: #fff;
  border: 2px solid #fff;
  border-radius: var(--fdq-radius-md);
}
.fdq-btn--call-outline .wp-element-button:hover,
.fdq-btn--call-outline .wp-element-button:focus {
  background-color: #fff;
  color: var(--fdq-primary-container);
}

/* WhatsApp (hero manitas): cian, blanco al hover */
.fdq-btn--wa .wp-element-button {
  padding: var(--fdq-space-sm) 32px;
  background-color: var(--fdq-secondary-container);
  color: var(--fdq-primary);
  border-radius: var(--fdq-radius-md);
}
.fdq-btn--wa .wp-element-button:hover,
.fdq-btn--wa .wp-element-button:focus {
  background-color: #fff;
  box-shadow: var(--fdq-shadow-lg);
}

/* Hero Fontanería: botones grandes (20px), esquina sm */
.fdq-btn--fonta-call .wp-element-button,
.fdq-btn--fonta-quote .wp-element-button {
  padding: var(--fdq-space-sm) var(--fdq-space-lg);
  border-radius: var(--fdq-radius-sm);
}
.fdq-btn--fonta-call .wp-element-button {
  background-color: var(--fdq-secondary-container);
  color: var(--fdq-primary);
  box-shadow: var(--fdq-shadow-sm);
}
.fdq-btn--fonta-call .wp-element-button:hover,
.fdq-btn--fonta-call .wp-element-button:focus { opacity: 0.92; }
.fdq-btn--fonta-quote .wp-element-button {
  background-color: #fff;
  color: var(--fdq-primary-container);
}
.fdq-btn--fonta-quote .wp-element-button:hover,
.fdq-btn--fonta-quote .wp-element-button:focus { background-color: #f8fafc; }

/* CTA con icono (persianas): sólidos, esquina lg */
.fdq-btn--cta-dark .wp-element-button,
.fdq-btn--cta-cyan .wp-element-button {
  padding: var(--fdq-space-sm) 32px;
  border-radius: var(--fdq-radius-lg);
  font-size: 18px;
  box-shadow: var(--fdq-shadow-md);
}
.fdq-btn--cta-dark .wp-element-button { background-color: var(--fdq-primary-container); color: var(--fdq-on-primary); }
.fdq-btn--cta-cyan .wp-element-button { background-color: var(--fdq-secondary-container); color: var(--fdq-primary-container); }
.fdq-btn--cta-dark .wp-element-button:hover, .fdq-btn--cta-dark .wp-element-button:focus,
.fdq-btn--cta-cyan .wp-element-button:hover, .fdq-btn--cta-cyan .wp-element-button:focus { opacity: 0.9; }

/* Píldoras CTA (cerrajería): rounded-full, 20px, con icono */
.fdq-btn--pill-cyan .wp-element-button,
.fdq-btn--pill-white .wp-element-button {
  padding: var(--fdq-space-sm) var(--fdq-space-xl);
  border-radius: var(--fdq-radius-pill);
  font-size: 20px;
}
.fdq-btn--pill-cyan .wp-element-button {
  background-color: var(--fdq-secondary-container);
  color: var(--fdq-primary);
}
.fdq-btn--pill-white .wp-element-button {
  background-color: #fff;
  color: var(--fdq-primary-container);
}
.fdq-btn--pill-cyan .wp-element-button:hover, .fdq-btn--pill-cyan .wp-element-button:focus,
.fdq-btn--pill-white .wp-element-button:hover, .fdq-btn--pill-white .wp-element-button:focus { opacity: 0.9; }

/* Teléfono (CTA): píldora grande cian */
.fdq-btn--phone .wp-element-button {
  gap: var(--fdq-space-sm);
  padding: var(--fdq-space-md) 48px;
  background-color: var(--fdq-secondary-container);
  color: var(--fdq-primary);
  border-radius: var(--fdq-radius-pill);
  font-size: 24px;
  font-weight: 700;
  box-shadow: var(--fdq-shadow-lg);
}
.fdq-btn--phone .wp-element-button:hover,
.fdq-btn--phone .wp-element-button:focus {
  background-color: #fff;
  transform: scale(1.05);
}

/* Ferretería industrial: sólidos esquina lg, con icono */
.fdq-btn--indu-cyan .wp-element-button,
.fdq-btn--indu-primary .wp-element-button,
.fdq-btn--indu-outline-dark .wp-element-button,
.fdq-btn--indu-outline-light .wp-element-button {
  padding: var(--fdq-space-sm) var(--fdq-space-lg);
  border-radius: var(--fdq-radius-lg);
  font-size: 18px;
}
.fdq-btn--indu-cyan .wp-element-button {
  background-color: var(--fdq-secondary-container);
  color: var(--fdq-primary);
  box-shadow: var(--fdq-shadow-md);
}
.fdq-btn--indu-primary .wp-element-button {
  background-color: var(--fdq-primary);
  color: var(--fdq-on-primary);
}
.fdq-btn--indu-outline-dark .wp-element-button {
  background-color: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.30);
}
.fdq-btn--indu-outline-dark .wp-element-button:hover,
.fdq-btn--indu-outline-dark .wp-element-button:focus { background-color: rgba(255, 255, 255, 0.10); }
.fdq-btn--indu-outline-light .wp-element-button {
  background-color: #fff;
  color: var(--fdq-primary-container);
  border: 1px solid var(--fdq-outline-variant);
}
.fdq-btn--indu-outline-light .wp-element-button:hover,
.fdq-btn--indu-outline-light .wp-element-button:focus { background-color: var(--fdq-surface-container); }
.fdq-btn--indu-cyan .wp-element-button:hover, .fdq-btn--indu-cyan .wp-element-button:focus,
.fdq-btn--indu-primary .wp-element-button:hover, .fdq-btn--indu-primary .wp-element-button:focus { filter: brightness(1.08); }
/* Normaliza el color del icono según el fondo del botón (los SVG tienen relleno fijo) */
.fdq-btn--indu-primary .fdq-btn-icon { filter: brightness(0) invert(1); }
.fdq-btn--indu-outline-light .fdq-btn-icon { filter: brightness(0); }

/* WhatsApp: verde oficial de marca. Modificador de SOLO color, pensado para
   combinarse con cualquier variante de forma/tamaño (pill, fonta, cta, wa…).
   Definido al final para imponerse por orden de cascada. */
.fdq-btn--whatsapp .wp-element-button {
  background-color: #25d366;
  color: #fff;
  border-color: #25d366;
}
.fdq-btn--whatsapp .wp-element-button:hover,
.fdq-btn--whatsapp .wp-element-button:focus {
  background-color: #1da851;
  color: #fff;
}
/* Icono siempre blanco sobre el verde de WhatsApp (los SVG tienen relleno fijo) */
.fdq-btn--whatsapp .fdq-btn-icon { filter: brightness(0) invert(1); }