/* ============================================================
   Proactiva Textil — Unified Button System (theme source of truth)
   Loaded after style.css + plugin CSS. Every button surface — native
   .pt-btn, Elementor, Gutenberg, Kadence, WooCommerce — shares ONE
   shape / typography / interaction / accessibility base. Color comes from
   brand variants. This replaces per-page CSS/JS button overrides.

   Variants (apply the class on Elementor "CSS Classes", or use .pt-btn--*):
     .pt-primary / .pt-btn--primary   lime bg, petrol text  (brand CTA)
     .pt-wa      / .pt-btn--wa         WhatsApp green gradient, white text
     .pt-dark    / .pt-btn--dark       petrol bg, white text (secondary)
     .pt-ghost   / .pt-btn--ghost      transparent + border (on dark)
     .pt-on-dark / .pt-btn--on-dark    white bg, petrol text (on dark)
   ============================================================ */

/* ---- 1. Cross-surface BASE: shape, type, interaction (color-neutral) ---- */
.pt-btn,
.pt-header-cta,
.pt-footer__cta-wa,
.pt-cc-cta,
.elementor-button.elementor-button,
.wp-block-button__link,
.kb-btn,
.kb-button .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce .button {
  font-family: var(--pt-btn-font) !important;
  font-weight: 600;
  border-radius: var(--pt-btn-radius) !important;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease-out, background-color .18s ease-out,
              box-shadow .18s ease-out, color .18s ease-out, background .18s ease-out;
}

/* Touch target + flex centering (surfaces that accept it) */
.pt-btn,
.pt-header-cta,
.pt-footer__cta-wa,
.pt-cc-cta,
.elementor-button.elementor-button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--pt-btn-min);
}

/* ---- 2. Accessible focus ring for EVERY button ---- */
.pt-btn:focus-visible,
.pt-header-cta:focus-visible,
.pt-footer__cta-wa:focus-visible,
.pt-cc-cta:focus-visible,
.elementor-button:focus-visible,
.wp-block-button__link:focus-visible,
.kb-btn:focus-visible,
.woocommerce .button:focus-visible {
  outline: none !important;
  box-shadow: var(--pt-focus-ring) !important;
}

/* ---- 3. PRIMARY (brand lime, accessible PETROL text) ----
   Default for Elementor / Gutenberg / Kadence / Woo buttons that carry no
   explicit variant class. Petrol-on-lime ~7:1 contrast (white was ~1.6:1). */
/* Gutenberg / Kadence / Woo default buttons (no per-instance design) -> lime.
   Elementor buttons are intentionally designed per-widget, so they are NOT
   force-colored here — they keep their colors and opt into variants via
   .pt-primary / .pt-wa / .pt-dark / .pt-ghost / .pt-on-dark. */
body .pt-btn--primary,
body .pt-primary,
.elementor-button.pt-primary,
.wp-block-button:not(.is-style-outline) .wp-block-button__link,
.kb-btn:not(.kb-btn-outline),
.kb-button .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit {
  background: var(--pt-lime) !important;
  background-image: none !important;
  color: var(--pt-petrol) !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(165, 200, 63, .28);
}
body .pt-btn--primary:hover, body .pt-btn--primary:focus-visible,
body .pt-primary:hover, body .pt-primary:focus-visible,
.elementor-button.pt-primary:hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.kb-btn:not(.kb-btn-outline):hover,
.kb-button .button:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce #respond input#submit:hover {
  background: var(--pt-lime-600) !important;
  color: var(--pt-petrol) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(165, 200, 63, .35);
}

/* Header CTA -> primary (was white-on-lime, now accessible petrol-on-lime) */
.pt-header-cta {
  background: var(--pt-lime) !important;
  color: var(--pt-petrol) !important;
}
.pt-header-cta:hover, .pt-header-cta:focus-visible {
  background: var(--pt-lime-600) !important;
  color: var(--pt-petrol) !important;
}

/* ---- 4. WHATSAPP (unified premium gradient, white text) ---- */
body .pt-btn--wa,
.pt-footer__cta-wa,
.elementor-button.pt-wa,
a.pt-wa {
  background: var(--pt-wa-grad) !important;
  background-color: #25D366 !important;
  color: #fff !important;
  border: none !important;
  box-shadow: var(--pt-wa-shadow);
}
body .pt-btn--wa:hover, body .pt-btn--wa:focus-visible,
.pt-footer__cta-wa:hover, .pt-footer__cta-wa:focus-visible,
.elementor-button.pt-wa:hover, a.pt-wa:hover {
  background: var(--pt-wa-grad-hover) !important;
  color: #fff !important;
  transform: translateY(-2px);
}

/* ---- 5. DARK (petrol) — e.g. "Ver detalles del modelo" / secondary ---- */
body .pt-btn--dark,
.elementor-button.pt-dark,
a.pt-dark {
  background: var(--pt-petrol) !important;
  background-image: none !important;
  color: #fff !important;
  border: 2px solid var(--pt-petrol) !important;
}
body .pt-btn--dark:hover, body .pt-btn--dark:focus-visible,
.elementor-button.pt-dark:hover, a.pt-dark:hover {
  background: var(--pt-lime) !important;
  color: var(--pt-petrol) !important;
  border-color: var(--pt-lime) !important;
  transform: translateY(-2px);
}

/* ---- 6. GHOST / OUTLINE on dark backgrounds ---- */
.elementor-button.pt-ghost,
a.pt-ghost {
  background: transparent !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55) !important;
}
.elementor-button.pt-ghost:hover,
a.pt-ghost:hover,
.elementor-button.pt-ghost:focus-visible {
  background: rgba(255, 255, 255, .12) !important;
  box-shadow: inset 0 0 0 2px #fff !important;
  color: #fff !important;
}

/* ---- 7. ON-DARK white (e.g. "Ver catálogo" over hero) ---- */
.elementor-button.pt-on-dark,
a.pt-on-dark {
  background: #fff !important;
  color: var(--pt-petrol) !important;
  border: none !important;
}
.elementor-button.pt-on-dark:hover,
a.pt-on-dark:hover {
  background: var(--pt-cream) !important;
  color: var(--pt-petrol) !important;
  transform: translateY(-2px);
}

/* ---- 8. Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .pt-btn, .pt-header-cta, .pt-footer__cta-wa, .pt-cc-cta,
  .elementor-button, .wp-block-button__link, .kb-btn, .woocommerce .button {
    transition: none !important;
  }
  .pt-btn:hover, .pt-header-cta:hover, .pt-footer__cta-wa:hover,
  .elementor-button:hover, .wp-block-button__link:hover, .woocommerce .button:hover {
    transform: none !important;
  }
}