/* ===========================================
   ANIMATED BUTTON WIDGET - Elementor
   Animaciones modernas y suaves para botones
   =========================================== */

/* ---- Variables por defecto ---- */
.ab-button {
    --ab-bg-color: #6366f1;
    --ab-text-color: #ffffff;
    --ab-border-color: #6366f1;
    --ab-hover-bg-color: #4f46e5;
    --ab-hover-text-color: #ffffff;
    --ab-hover-border-color: #4f46e5;
    --ab-border-radius: 8px;
    --ab-duration: 300ms;
    --ab-easing: ease;
}

/* ---- Base del botón ---- */
.ab-button {
    --ab-icon-spacing: 8px;
    --ab-icon-hover-extra: 4px;
    --ab-icon-move-x: 6px;
    --ab-padding-top: 14px;
    --ab-padding-right: 32px;
    --ab-padding-bottom: 14px;
    --ab-padding-left: 32px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ab-icon-spacing);
    padding: var(--ab-padding-top) var(--ab-padding-right) var(--ab-padding-bottom) var(--ab-padding-left);
    background-color: var(--ab-bg-color);
    color: var(--ab-text-color);
    border: 2px solid var(--ab-border-color);
    border-radius: var(--ab-border-radius);
    text-decoration: none !important;
    cursor: pointer;
    overflow: hidden;
    outline: none;
    transition:
        color var(--ab-duration) var(--ab-easing),
        background-color var(--ab-duration) var(--ab-easing),
        border-color var(--ab-duration) var(--ab-easing),
        box-shadow var(--ab-duration) var(--ab-easing),
        transform var(--ab-duration) var(--ab-easing);
    -webkit-font-smoothing: antialiased;
    vertical-align: middle;
    white-space: nowrap;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    will-change: transform;
}

.ab-button .ab-text {
    position: relative;
    z-index: 2;
    transition: color var(--ab-duration) var(--ab-easing);
    pointer-events: none;
}

.ab-button .ab-icon {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    pointer-events: none;
    transition:
        color var(--ab-duration) var(--ab-easing),
        transform var(--ab-duration) var(--ab-easing);
}
.ab-button .ab-icon {
    justify-content: center;
    flex: 0 0 auto;
    line-height: 1;
    color: inherit;
}

.ab-button .ab-icon .ab-icon-inner,
.ab-button .ab-icon svg,
.ab-button .ab-icon i {
    display: block;
    width: 1em;
    height: 1em;
    color: inherit;
}

/*
 * No forzamos fill: currentColor de forma global porque rellena iconos lineales
 * como flechas SVG stroke-only. Se colorea por currentColor y se respeta
 * fill="none" cuando el SVG original es de trazo.
 */
.ab-button .ab-icon svg,
.ab-button .ab-icon svg * {
    color: inherit;
}

.ab-button .ab-icon svg [stroke] {
    stroke: currentColor;
}

.ab-button .ab-icon svg [fill="none"] {
    fill: none !important;
}

.ab-button .ab-icon svg [stroke][fill="none"],
.ab-button .ab-icon svg [stroke]:not([fill]) {
    fill: none !important;
}

.ab-button .ab-icon svg path:not([stroke]):not([fill="none"]),
.ab-button .ab-icon svg circle:not([stroke]):not([fill="none"]),
.ab-button .ab-icon svg rect:not([stroke]):not([fill="none"]),
.ab-button .ab-icon svg polygon:not([stroke]):not([fill="none"]),
.ab-button .ab-icon svg use:not([stroke]):not([fill="none"]) {
    fill: currentColor;
}


/* Icon spacing is handled via --ab-icon-spacing CSS variable on gap (set from Elementor control) */
/* No margin needed — gap on the flex container handles it cleanly */

/* Capa de efecto (usada para animaciones de relleno) */
.ab-button .ab-effect {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
}

/* ======================================
   ANIMACIÓN 1: SIN ANIMACIÓN
   ====================================== */
.ab-button.ab-anim-none:hover {
    background-color: var(--ab-hover-bg-color);
    border-color: var(--ab-hover-border-color);
    color: var(--ab-hover-text-color);
}
.ab-button.ab-anim-none:hover .ab-text {
    color: var(--ab-hover-text-color);
}

/* ======================================
   ANIMACIÓN 2: SLIDE FILL (desde abajo)
   ====================================== */
.ab-button.ab-anim-slide-fill .ab-effect {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background-color: var(--ab-hover-bg-color);
    transition: height var(--ab-duration) var(--ab-easing);
}
.ab-button.ab-anim-slide-fill:hover .ab-effect {
    height: 100%;
}
.ab-button.ab-anim-slide-fill:hover {
    border-color: var(--ab-hover-border-color);
    color: var(--ab-hover-text-color);
}
.ab-button.ab-anim-slide-fill:hover .ab-text {
    color: var(--ab-hover-text-color);
}
.ab-button.ab-anim-slide-fill:hover .ab-icon {
    color: inherit;
}

/* ======================================
   ANIMACIÓN 3: SLIDE TOP (desde arriba)
   ====================================== */
.ab-button.ab-anim-slide-top .ab-effect {
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background-color: var(--ab-hover-bg-color);
    transition: height var(--ab-duration) var(--ab-easing);
}
.ab-button.ab-anim-slide-top:hover .ab-effect {
    height: 100%;
}
.ab-button.ab-anim-slide-top:hover {
    border-color: var(--ab-hover-border-color);
    color: var(--ab-hover-text-color);
}
.ab-button.ab-anim-slide-top:hover .ab-text,
.ab-button.ab-anim-slide-top:hover .ab-icon {
    color: var(--ab-hover-text-color);
}

/* ======================================
   ANIMACIÓN 4: SLIDE LEFT (desde izquierda)
   ====================================== */
.ab-button.ab-anim-slide-left .ab-effect {
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: var(--ab-hover-bg-color);
    transition: width var(--ab-duration) var(--ab-easing);
}
.ab-button.ab-anim-slide-left:hover .ab-effect {
    width: 100%;
}
.ab-button.ab-anim-slide-left:hover {
    border-color: var(--ab-hover-border-color);
}
.ab-button.ab-anim-slide-left:hover .ab-text,
.ab-button.ab-anim-slide-left:hover .ab-icon {
    color: var(--ab-hover-text-color);
}

/* ======================================
   ANIMACIÓN 5: SLIDE RIGHT (desde derecha)
   ====================================== */
.ab-button.ab-anim-slide-right .ab-effect {
    top: 0;
    right: 0;
    width: 0%;
    height: 100%;
    background-color: var(--ab-hover-bg-color);
    transition: width var(--ab-duration) var(--ab-easing);
}
.ab-button.ab-anim-slide-right:hover .ab-effect {
    width: 100%;
}
.ab-button.ab-anim-slide-right:hover {
    border-color: var(--ab-hover-border-color);
}
.ab-button.ab-anim-slide-right:hover .ab-text,
.ab-button.ab-anim-slide-right:hover .ab-icon {
    color: var(--ab-hover-text-color);
}

/* ======================================
   ANIMACIÓN 6: GLOW (brillo pulsante)
   ====================================== */
.ab-button.ab-anim-glow {
    transition:
        background-color var(--ab-duration) var(--ab-easing),
        border-color var(--ab-duration) var(--ab-easing),
        box-shadow var(--ab-duration) var(--ab-easing);
}
.ab-button.ab-anim-glow .ab-effect { display: none; }
.ab-button.ab-anim-glow:hover {
    background-color: var(--ab-hover-bg-color);
    border-color: var(--ab-hover-border-color);
    color: var(--ab-hover-text-color);
    box-shadow:
        0 0 0 0px var(--ab-hover-bg-color),
        0 0 20px 4px color-mix(in srgb, var(--ab-hover-bg-color) 60%, transparent),
        0 0 40px 8px color-mix(in srgb, var(--ab-hover-bg-color) 30%, transparent);
    animation: ab-glow-pulse calc(var(--ab-duration) * 3) ease-in-out infinite alternate;
}
@keyframes ab-glow-pulse {
    from {
        box-shadow:
            0 0 15px 2px color-mix(in srgb, var(--ab-hover-bg-color) 50%, transparent),
            0 0 30px 6px color-mix(in srgb, var(--ab-hover-bg-color) 25%, transparent);
    }
    to {
        box-shadow:
            0 0 25px 6px color-mix(in srgb, var(--ab-hover-bg-color) 70%, transparent),
            0 0 50px 12px color-mix(in srgb, var(--ab-hover-bg-color) 35%, transparent);
    }
}
.ab-button.ab-anim-glow:hover .ab-text,
.ab-button.ab-anim-glow:hover .ab-icon {
    color: var(--ab-hover-text-color);
}

/* ======================================
   ANIMACIÓN 7: SCALE (zoom)
   ====================================== */
.ab-button.ab-anim-scale .ab-effect { display: none; }
.ab-button.ab-anim-scale:hover {
    transform: scale(1.06);
    background-color: var(--ab-hover-bg-color);
    border-color: var(--ab-hover-border-color);
    color: var(--ab-hover-text-color);
}
.ab-button.ab-anim-scale:active {
    transform: scale(0.97);
}
.ab-button.ab-anim-scale:hover .ab-text,
.ab-button.ab-anim-scale:hover .ab-icon {
    color: var(--ab-hover-text-color);
}

/* ======================================
   ANIMACIÓN 8: LIFT (levantar con sombra)
   ====================================== */
.ab-button.ab-anim-lift .ab-effect { display: none; }
.ab-button.ab-anim-lift:hover {
    transform: translateY(-4px);
    background-color: var(--ab-hover-bg-color);
    border-color: var(--ab-hover-border-color);
    color: var(--ab-hover-text-color);
    box-shadow: 0 12px 28px -4px color-mix(in srgb, var(--ab-hover-bg-color) 55%, transparent);
}
.ab-button.ab-anim-lift:active {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px -4px color-mix(in srgb, var(--ab-hover-bg-color) 45%, transparent);
}
.ab-button.ab-anim-lift:hover .ab-text,
.ab-button.ab-anim-lift:hover .ab-icon {
    color: var(--ab-hover-text-color);
}

/* ======================================
   ANIMACIÓN 9: BORDER DRAW (dibujar borde)
   ====================================== */
.ab-button.ab-anim-border-draw {
    background-color: transparent;
    border-color: transparent;
    color: var(--ab-bg-color);
}
.ab-button.ab-anim-border-draw .ab-text {
    color: var(--ab-bg-color);
}
.ab-button.ab-anim-border-draw::before,
.ab-button.ab-anim-border-draw::after {
    content: '';
    position: absolute;
    border-radius: inherit;
}
.ab-button.ab-anim-border-draw::before {
    top: 0; left: 0; right: 0; bottom: 0;
    border: 2px solid var(--ab-border-color);
    clip-path: inset(0 100% 0 0);
    transition: clip-path var(--ab-duration) var(--ab-easing);
}
.ab-button.ab-anim-border-draw::after {
    top: 0; left: 0; right: 0; bottom: 0;
    border: 2px solid var(--ab-border-color);
    clip-path: inset(0 0 0 100%);
    transition: clip-path var(--ab-duration) var(--ab-easing);
}
.ab-button.ab-anim-border-draw .ab-effect {
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--ab-bg-color);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--ab-duration) var(--ab-easing);
}
.ab-button.ab-anim-border-draw:hover .ab-effect {
    transform: scaleX(1);
}
.ab-button.ab-anim-border-draw:hover::before {
    clip-path: inset(0 0% 0 0);
}
.ab-button.ab-anim-border-draw:hover::after {
    clip-path: inset(0 0 0 0%);
}
.ab-button.ab-anim-border-draw:hover .ab-text {
    color: var(--ab-hover-text-color);
}
.ab-button.ab-anim-border-draw:hover .ab-icon {
    color: var(--ab-hover-text-color);
}

/* ======================================
   ANIMACIÓN 10: SHIMMER (destello)
   ====================================== */
.ab-button.ab-anim-shimmer .ab-effect {
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255,255,255,0.35) 50%,
        transparent 100%
    );
    skewX(-20deg);
    transition: left calc(var(--ab-duration) * 1.5) var(--ab-easing);
}
.ab-button.ab-anim-shimmer:hover .ab-effect {
    left: 150%;
}
.ab-button.ab-anim-shimmer:hover {
    background-color: var(--ab-hover-bg-color);
    border-color: var(--ab-hover-border-color);
    color: var(--ab-hover-text-color);
}
.ab-button.ab-anim-shimmer:hover .ab-text,
.ab-button.ab-anim-shimmer:hover .ab-icon {
    color: var(--ab-hover-text-color);
}

/* ======================================
   ANIMACIÓN 11: RIPPLE (onda circular)
   ====================================== */
.ab-button.ab-anim-ripple .ab-effect {
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background-color: var(--ab-hover-bg-color);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition:
        width calc(var(--ab-duration) * 1.5) var(--ab-easing),
        height calc(var(--ab-duration) * 1.5) var(--ab-easing),
        opacity var(--ab-duration) var(--ab-easing);
    opacity: 0;
}
.ab-button.ab-anim-ripple:hover .ab-effect {
    width: 300%;
    height: 600%;
    opacity: 1;
}
.ab-button.ab-anim-ripple:hover {
    border-color: var(--ab-hover-border-color);
    color: var(--ab-hover-text-color);
}
.ab-button.ab-anim-ripple:hover .ab-text,
.ab-button.ab-anim-ripple:hover .ab-icon {
    color: var(--ab-hover-text-color);
}

/* ======================================
   ANIMACIONES DE ÍCONOS
   ====================================== */

/* Bounce */
.ab-button[data-icon-anim="bounce"]:hover .ab-icon {
    animation: ab-icon-bounce calc(var(--ab-duration) * 2) ease infinite;
}
@keyframes ab-icon-bounce {
    0%, 100% { transform: translateY(0); }
    40%  { transform: translateY(-5px); }
    70%  { transform: translateY(-2px); }
}

/* Rotate */
.ab-button[data-icon-anim="rotate"]:hover .ab-icon {
    transform: rotate(360deg) !important;
    transition: transform calc(var(--ab-duration) * 2) var(--ab-easing);
}

/* Shake */
.ab-button[data-icon-anim="shake"]:hover .ab-icon {
    animation: ab-icon-shake var(--ab-duration) ease infinite;
}
@keyframes ab-icon-shake {
    0%, 100% { transform: translateX(0); }
    20%  { transform: translateX(-3px) rotate(-5deg); }
    40%  { transform: translateX(3px) rotate(5deg); }
    60%  { transform: translateX(-2px) rotate(-3deg); }
    80%  { transform: translateX(2px) rotate(3deg); }
}

/* Scale */
.ab-button[data-icon-anim="scale"]:hover .ab-icon {
    transform: scale(1.25) !important;
    transition: transform var(--ab-duration) var(--ab-easing);
}


/* Reserva espacio real cuando el icono de la derecha se desplaza.
   Elementor imprime el padding del widget en CSS dinámico con más prioridad que
   el CSS base del plugin. Por eso este ajuste necesita !important: si no,
   Elementor pisa el padding-right y la flecha se corta al llegar al borde. */
.ab-button.ab-icon-pos-right[data-icon-anim="move-right"],
.ab-button.ab-icon-pos-right[data-icon-anim="arrow-nudge"] {
    padding-right: calc(var(--ab-padding-right) + (var(--ab-icon-move-x) * 2) + 12px) !important;
}

/* Misma lógica para icono a la izquierda, por consistencia si se usa animación lateral. */
.ab-button.ab-icon-pos-left[data-icon-anim="move-right"],
.ab-button.ab-icon-pos-left[data-icon-anim="arrow-nudge"] {
    padding-left: calc(var(--ab-padding-left) + (var(--ab-icon-move-x) * 2) + 12px) !important;
}

/* En animaciones puramente de icono no debe recortarse el SVG. */
.ab-button[data-icon-anim="move-right"] .ab-icon,
.ab-button[data-icon-anim="arrow-nudge"] .ab-icon {
    overflow: visible;
}

/* Move right — deslizamiento simple hacia la derecha */
.ab-button[data-icon-anim="move-right"] .ab-icon {
    transform: translateX(0);
    transition: transform var(--ab-duration) var(--ab-easing);
    will-change: transform;
}
.ab-button[data-icon-anim="move-right"]:hover .ab-icon {
    transform: translateX(var(--ab-icon-move-x)) !important;
}

/* ── Separate: separa el ícono del texto aumentando el gap ── */
.ab-button[data-icon-anim="separate"] {
    transition:
        color var(--ab-duration) var(--ab-easing),
        background-color var(--ab-duration) var(--ab-easing),
        border-color var(--ab-duration) var(--ab-easing),
        box-shadow var(--ab-duration) var(--ab-easing),
        transform var(--ab-duration) var(--ab-easing),
        gap var(--ab-duration) var(--ab-easing);
}
.ab-button[data-icon-anim="separate"]:hover {
    gap: calc(var(--ab-icon-spacing) + var(--ab-icon-hover-extra));
}

/* ── Arrow slide: la flecha sale por la derecha y vuelve a entrar ──
 *
 * El truco es usar overflow:hidden en el botón (ya está) y animar
 * el ícono con un keyframe: sale hacia +100%, vuelve desde -100%
 * y se asienta. Da el efecto de "disparo" que se ve en botones modernos.
 */
.ab-button[data-icon-anim="arrow-slide"] .ab-icon {
    display: inline-flex;
    transition: transform var(--ab-duration) var(--ab-easing);
}
.ab-button[data-icon-anim="arrow-slide"]:hover .ab-icon {
    animation: ab-arrow-slide calc(var(--ab-duration) * 1.8) var(--ab-easing) forwards;
}
@keyframes ab-arrow-slide {
    0%   { transform: translateX(0);      opacity: 1; }
    40%  { transform: translateX(120%);   opacity: 0; }
    41%  { transform: translateX(-120%);  opacity: 0; }
    100% { transform: translateX(0);      opacity: 1; }
}

/* ── Arrow nudge: la flecha hace un pequeño empujón hacia la derecha
 *    y vuelve con efecto rebote — sutil pero elegante ──
 */
.ab-button[data-icon-anim="arrow-nudge"] .ab-icon {
    display: inline-flex;
    transition: transform var(--ab-duration) var(--ab-easing);
}
.ab-button[data-icon-anim="arrow-nudge"]:hover .ab-icon {
    animation: ab-arrow-nudge calc(var(--ab-duration) * 2) cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes ab-arrow-nudge {
    0%   { transform: translateX(0); }
    40%  { transform: translateX(calc(var(--ab-icon-move-x) + 2px)); }
    70%  { transform: translateX(calc(var(--ab-icon-move-x) / 2)); }
    100% { transform: translateX(var(--ab-icon-move-x)); }
}

/* ======================================
   ESTADOS FOCUS Y ACTIVO
   ====================================== */
.ab-button:focus-visible {
    outline: 3px solid var(--ab-bg-color);
    outline-offset: 3px;
}
.ab-button:active {
    transition-duration: 80ms;
}

/* ======================================
   ANCHO COMPLETO
   ====================================== */

/*
 * El botón con ancho completo necesita que TODAS las capas
 * superiores sean block/width:100%, no solo el propio botón.
 * Elementor envuelve el widget en:
 *   .elementor-widget-container  (puede ser inline-block)
 *     .ab-wrapper
 *       .ab-button
 *
 * Forzamos display:block en toda la cadena cuando ab-full-width está activo.
 */

/* 1. El propio botón */
.ab-button.ab-full-width {
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box;
}

/* 2. El wrapper inmediato */
.ab-wrapper:has(.ab-full-width) {
    display: block !important;
    width: 100% !important;
}

/* 3. Contenedor de Elementor (elementor-widget-container) */
.elementor-widget-container:has(.ab-full-width) {
    display: block !important;
    width: 100% !important;
}

/* 4. Fallback para navegadores sin soporte :has() — usamos la clase en el wrapper */
.ab-wrapper.ab-wrapper-full {
    display: block !important;
    width: 100% !important;
}

/* Base: el wrapper es inline por defecto para no romper botones normales */
.ab-wrapper {
    display: inline-block;
    line-height: 1;
}

/* ======================================
   GLASSMORPHISM / BLUR
   ====================================== */

/* Cuando el blur está activo el fondo debe ser semitransparente.
   El backdrop-filter se aplica vía Elementor selectors + inline style.
   Esta clase añade una transición suave al cambio de blur en hover. */
.ab-button.ab-has-blur {
    transition:
        color var(--ab-duration) var(--ab-easing),
        background-color var(--ab-duration) var(--ab-easing),
        border-color var(--ab-duration) var(--ab-easing),
        box-shadow var(--ab-duration) var(--ab-easing),
        transform var(--ab-duration) var(--ab-easing),
        -webkit-backdrop-filter var(--ab-duration) var(--ab-easing),
        backdrop-filter var(--ab-duration) var(--ab-easing);
}

/* Compatibilidad: asegurar que el pseudo-elemento ::before no bloquee el blur */
.ab-button.ab-has-blur::before,
.ab-button.ab-has-blur::after {
    pointer-events: none;
}

/* ======================================
   RESPONSIVE
   ====================================== */
@media (max-width: 768px) {
    .ab-button {
        white-space: normal;
        text-align: center;
    }
}

/* ======================================
   FIX ELEMENTOR EDITOR
   ====================================== */
.elementor-editor-active .ab-button {
    pointer-events: all;
}