/* =====================================================================
   BeeWall · Botones: hover "tinta desde el cursor" (site-wide)
   ---------------------------------------------------------------------
   Un círculo del color contrario nace donde entra el cursor (--bwb-x/y,
   los pone beewall-header.js) y llena la píldora; el texto invierte el
   color, la flecha se desplaza 4px y el botón sube 2px. Se aplica a todos
   los botones píldora de la web (home, header, páginas, proyectos, form,
   botones de Kadence). Filtros y pestañas quedan fuera (son toggles).
   ===================================================================== */
:root { --bwb-dark: #2c2c2c; --bwb-honey: #FFCB05; --bwb-cream: #FCF6E6; }

/* Base: por defecto botón oscuro → se llena de miel y la tinta pasa a oscuro */
/* Los colores por defecto van en :where (especificidad 0) para que las variantes de abajo ganen */
:where(.bw-team__btn, .bw-404__btn, .bw-ft-cta, .bw-cta__btn, .bw-hdr-cta, .bwx-btn, .bwp2-btn, .kb-button, .wp-block-button__link, .kb-forms-submit, .bwx-form__box button[type="submit"], .bwx-hero__nav a) { --bwb-fill: var(--bwb-honey); --bwb-ink: var(--bwb-dark); }
html body :is(.bw-team__btn, .bw-404__btn, .bw-ft-cta, .bw-cta__btn, .bw-hdr-cta, .bwx-btn, .bwp2-btn, .kb-button, .wp-block-button__link, .kb-forms-submit, .bwx-form__box button[type="submit"], .bwx-hero__nav a) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0); /* capa propia: el recorte redondeado no se pierde mientras anima el círculo */
  transition: color 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease, border-color 0.35s ease, background-color 0s linear 0s;
}
/* Variantes con fondo miel o ghost → se llenan de oscuro y la tinta pasa a miel */
html body :is(.bw-hdr-cta, .bwx-btn--honey, .bwp2-btn--honey, .kb-button, .bwx-btn--ghost, .bwp2-btn--ghost) { --bwb-fill: var(--bwb-dark); --bwb-ink: var(--bwb-honey); }
/* Chips del hero de Servicios (fondo oscuro, borde crema): miel + tinta oscura */
html body .bwx-hero__nav a { --bwb-fill: var(--bwb-honey); --bwb-ink: var(--bwb-dark); }

/* La tinta: círculo grande (cubre la píldora desde cualquier punto) escalado a 0 */
html body :is(.bw-team__btn, .bw-404__btn, .bw-ft-cta, .bw-cta__btn, .bw-hdr-cta, .bwx-btn, .bwp2-btn, .kb-button, .wp-block-button__link, .kb-forms-submit, .bwx-form__box button[type="submit"], .bwx-hero__nav a)::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: var(--bwb-x, 50%);
  top: var(--bwb-y, 50%);
  width: 260%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--bwb-fill);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
html body :is(.bw-team__btn, .bw-404__btn, .bw-ft-cta, .bw-cta__btn, .bw-hdr-cta, .bwx-btn, .bwp2-btn, .kb-button, .wp-block-button__link, .kb-forms-submit, .bwx-form__box button[type="submit"], .bwx-hero__nav a):is(:hover, :focus-visible)::before { transform: translate(-50%, -50%) scale(1); }

/* Estado hover: tinta invertida, subida de 2px, sombra suave; el fondo propio no cambia (lo tapa la tinta) */
html body :is(.bw-team__btn, .bw-404__btn, .bw-ft-cta, .bw-cta__btn, .bw-hdr-cta, .bwx-btn, .bwp2-btn, .kb-button, .wp-block-button__link, .kb-forms-submit, .bwx-form__box button[type="submit"], .bwx-hero__nav a):is(:hover, :focus-visible) {
  color: var(--bwb-ink) !important;
  /* Escala mínima en vez de subir 2px: crece hacia fuera y el cursor nunca se queda fuera del botón (evitaba saltitos en el borde) */
  transform: translateZ(0) scale(1.03);
  box-shadow: 0 12px 28px rgba(44, 44, 44, 0.18);
  transition: color 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease, border-color 0.35s ease, background-color 0s linear 0.45s;
}
/* Cuando el círculo ya cubre el botón, el fondo propio pasa al color de la tinta (sin anillo del color original en el borde).
   Solo con .bwb-on, que el JS añade DESPUÉS de leer el color real del botón (si no, leería el fondo ya invertido). */
html body :is(.bw-team__btn, .bw-404__btn, .bw-ft-cta, .bw-cta__btn, .bw-hdr-cta, .bwx-btn, .bwp2-btn, .kb-button, .wp-block-button__link, .kb-forms-submit, .bwx-form__box button[type="submit"], .bwx-hero__nav a).bwb-on:is(:hover, :focus-visible) { background-color: var(--bwb-fill) !important; }
/* El header define su propio transition con ID: repetimos aquí las transiciones con la misma fuerza */
#masthead .bw-hdr-cta { transition: color 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease, background-color 0s linear 0s; }
#masthead .bw-hdr-cta:is(:hover, :focus-visible) { transition: color 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease, background-color 0s linear 0.45s; }
html body :is(.bw-team__btn, .bw-404__btn, .bw-ft-cta, .bw-cta__btn, .bw-hdr-cta, .bwx-btn, .bwp2-btn, .kb-button, .wp-block-button__link, .kb-forms-submit, .bwx-form__box button[type="submit"], .bwx-hero__nav a):is(:hover, :focus-visible) :is(.kt-btn-inner-text, span, b) { color: inherit !important; }
html body :is(.bw-team__btn, .bw-404__btn, .bw-ft-cta, .bw-cta__btn, .bw-hdr-cta, .bwx-btn, .bwp2-btn, .kb-button, .wp-block-button__link, .kb-forms-submit, .bwx-form__box button[type="submit"], .bwx-hero__nav a):active { transform: translateZ(0) scale(0.98); transition-duration: 0.15s; }
/* Ghost: el borde pasa al color de la tinta de relleno para que no quede un filo distinto */
html body :is(.bwx-btn--ghost, .bwp2-btn--ghost):is(:hover, :focus-visible) { border-color: var(--bwb-fill); }
html body .bwx-hero__nav a:is(:hover, :focus-visible) { border-color: var(--bwb-fill); }
/* Kadence pinta su propio hover (fondo/color): lo neutralizamos, la tinta lo hace todo */

/* El header fija el color con selectores de ID (!important): el hover necesita la misma fuerza */
#masthead .bw-hdr-cta:is(:hover, :focus-visible), #mobile-drawer .bw-drawer-foot .bw-hdr-cta:is(:hover, :focus-visible) { color: var(--bwb-ink) !important; }
/* Fallback sin JS para botones miel sobre fondo oscuro (isla del header, drawer, sección oscura de la home): tinta crema.
   Con JS, beewall-header.js mide el fondo real detrás de cada botón y fija --bwb-fill/--bwb-ink inline. */
html.bw-hdr-stuck #masthead .bw-hdr-cta, #mobile-drawer .bw-drawer-foot .bw-hdr-cta, html body .kb-button { --bwb-fill: var(--bwb-cream); --bwb-ink: var(--bwb-dark); }

/* Flecha / icono: se desplaza con el cursor */
:is(.bw-team__btn, .bw-404__btn, .bw-ft-cta, .bw-cta__btn, .bw-hdr-cta, .bwx-btn, .bwp2-btn) :is(i, svg) { transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
:is(.bw-team__btn, .bw-404__btn, .bw-ft-cta, .bw-cta__btn, .bw-hdr-cta, .bwx-btn, .bwp2-btn):is(:hover, :focus-visible) :is(i, svg) { transform: translateX(4px); }
:is(.bw-team__btn, .bw-404__btn, .bw-ft-cta, .bw-cta__btn, .bw-hdr-cta, .bwx-btn, .bwp2-btn):is(:hover, :focus-visible) svg path, :is(.bw-team__btn, .bw-404__btn, .bw-ft-cta, .bw-cta__btn, .bw-hdr-cta, .bwx-btn, .bwp2-btn):is(:hover, :focus-visible) svg line { stroke: currentColor; }

/* El botón del CTA final de la home lleva efecto imán por GSAP (transform inline): no transicionamos su transform */
html body .bw-cta__btn { transition: color 0.35s ease, box-shadow 0.45s ease; }
html body .bw-cta__btn:is(:hover, :focus-visible) { transform: none; transition: color 0.35s ease, box-shadow 0.45s ease, background-color 0s linear 0.45s; }

/* Foco por teclado visible sin depender del hover */
html body :is(.bw-team__btn, .bw-404__btn, .bw-ft-cta, .bw-cta__btn, .bw-hdr-cta, .bwx-btn, .bwp2-btn, .kb-button, .wp-block-button__link, .kb-forms-submit, .bwx-form__box button[type="submit"]):focus-visible { outline: 2px solid var(--bwb-honey); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  html body :is(.bw-team__btn, .bw-404__btn, .bw-ft-cta, .bw-cta__btn, .bw-hdr-cta, .bwx-btn, .bwp2-btn, .kb-button, .wp-block-button__link, .kb-forms-submit, .bwx-form__box button[type="submit"], .bwx-hero__nav a),
  html body :is(.bw-team__btn, .bw-404__btn, .bw-ft-cta, .bw-cta__btn, .bw-hdr-cta, .bwx-btn, .bwp2-btn, .kb-button, .wp-block-button__link, .kb-forms-submit, .bwx-form__box button[type="submit"], .bwx-hero__nav a)::before,
  :is(.bw-team__btn, .bw-404__btn, .bw-ft-cta, .bw-cta__btn, .bw-hdr-cta, .bwx-btn, .bwp2-btn) :is(i, svg) { transition: none; }
  html body :is(.bw-team__btn, .bw-404__btn, .bw-ft-cta, .bw-cta__btn, .bw-hdr-cta, .bwx-btn, .bwp2-btn, .kb-button, .wp-block-button__link, .kb-forms-submit, .bwx-form__box button[type="submit"], .bwx-hero__nav a):is(:hover, :focus-visible) { transform: none; transition: none; }
}