/* Icon Background Pulse — Button extension styles */

/* Defensa: padding sobre el icono puede romper align del wrapper en buttons
 * con width fija. Forzamos single-row + center vertical. */
.elementor-button.pe-ic-active .elementor-button-content-wrapper {
  align-items: center !important;
  flex-wrap: nowrap;
}

/* Icon color idle (aplica a font-icon <i> y SVG via currentColor) */
.elementor-button.pe-ic-active[style*="--pe-ic-icon-color"] .elementor-button-icon,
.elementor-button.pe-ic-active[style*="--pe-ic-icon-color"] .elementor-button-icon svg {
  color: var(--pe-ic-icon-color);
  fill:  var(--pe-ic-icon-color);
}
/* Icon color hover */
.elementor-button.pe-ic-active[style*="--pe-ic-icon-color-hover"]:hover .elementor-button-icon,
.elementor-button.pe-ic-active[style*="--pe-ic-icon-color-hover"]:hover .elementor-button-icon svg {
  color: var(--pe-ic-icon-color-hover);
  fill:  var(--pe-ic-icon-color-hover);
}

/* Capsula del icono (idle). inline-flex para que padding no rompa el alineado vertical. */
.elementor-button.pe-ic-active .elementor-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--pe-ic-bg, rgba(255,255,255,0.15));
  padding: var(--pe-ic-pad, 0.4em);
  border-radius: var(--pe-ic-radius, 999px);
  /* Animamos background (shorthand cubre background-color) y transform. */
  transition: background var(--pe-ic-dur, 0.3s) ease,
              transform  var(--pe-ic-dur, 0.3s) ease;
  will-change: transform, background;
}

/* Hover comun: cambio de color del bg del icono. */
.elementor-button.pe-ic-active:hover .elementor-button-icon {
  background: var(--pe-ic-bg-hover, rgba(255,255,255,0.35));
}

/* Direccion derecha (icono a la derecha del texto via row normal). */
.elementor-button.pe-ic-active[data-pe-ic-dir="right"]:hover .elementor-button-icon {
  transform: translateX(var(--pe-ic-disp, 6px));
}

/* Direccion izquierda (flex row-reverse → icono visualmente a la izquierda). */
.elementor-button.pe-ic-active[data-pe-ic-dir="left"]:hover .elementor-button-icon {
  transform: translateX(calc(-1 * var(--pe-ic-disp, 6px)));
}

/* ─── Button stretches with icon (smart default) ─────────────────────────── */
/* Si stretch="yes" el lado del icono crece por el monto exacto de Hover
 * Displacement — el icono se queda dentro del boton, manteniendo el padding
 * nativo. Si stretch="no" el icono sale del boton (intencional). */
.elementor-button.pe-ic-active[data-pe-ic-stretch="yes"] {
  transition: padding-right var(--pe-ic-dur, 0.3s) ease,
              padding-left  var(--pe-ic-dur, 0.3s) ease;
}
.elementor-button.pe-ic-active[data-pe-ic-stretch="yes"][data-pe-ic-dir="right"]:hover {
  padding-right: calc(var(--pe-ic-base-pad-right, 0px) + var(--pe-ic-disp, 6px));
}
.elementor-button.pe-ic-active[data-pe-ic-stretch="yes"][data-pe-ic-dir="left"]:hover {
  padding-left:  calc(var(--pe-ic-base-pad-left,  0px) + var(--pe-ic-disp, 6px));
}

/* Accesibilidad. */
@media (prefers-reduced-motion: reduce) {
  .elementor-button.pe-ic-active .elementor-button-icon {
    transition: none !important;
    transform: none !important;
  }
}