/* =========================================================
   Sistema de efectos para paginas con Elementor
   Se activa escribiendo una palabra en el campo CSS Classes
   de la pestana Avanzado de cualquier elemento.
   ========================================================= */

:root {
  --fx-dur: 0.7s;
  --fx-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --fx-measure: 62ch;
}

.fx-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--fx-dur) var(--fx-ease),
              transform var(--fx-dur) var(--fx-ease);
  will-change: opacity, transform;
}

.fx-reveal.fx-in {
  opacity: 1 !important;
  transform: none !important;
}

.fx-reveal-left  { transform: translateX(-32px); }
.fx-reveal-right { transform: translateX(32px); }
.fx-reveal-left.fx-in,
.fx-reveal-right.fx-in { transform: none; }

.fx-reveal-stagger > *,
.fx-reveal-stagger > .e-con-inner > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--fx-dur) var(--fx-ease),
              transform var(--fx-dur) var(--fx-ease);
  transition-delay: var(--fx-delay, 0ms);
}

.fx-reveal-stagger.fx-in > *,
.fx-reveal-stagger.fx-in > .e-con-inner > * {
  opacity: 1 !important;
  transform: none !important;
}

.fx-zoom,
.fx-zoom .elementor-widget-container,
.fx-zoom figure {
  overflow: hidden;
}

.fx-zoom img {
  transition: transform 0.7s var(--fx-ease);
  will-change: transform;
}

.fx-zoom:hover img {
  transform: scale(1.05);
}

.fx-parallax {
  background-position: center calc(50% + var(--fx-shift, 0px)) !important;
  will-change: background-position;
}

.fx-measure,
.fx-measure p {
  max-width: var(--fx-measure);
  margin-left: auto;
  margin-right: auto;
}

.fx-header {
  position: sticky;
  top: 0;
  z-index: 999;
  transition: background-color 0.3s var(--fx-ease),
              box-shadow 0.3s var(--fx-ease),
              padding 0.3s var(--fx-ease);
}

.fx-header.fx-header-scrolled {
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.fx-btn-outline .elementor-button {
  box-shadow: inset 0 0 0 2px currentColor;
}

.fx-card {
  transition: transform 0.35s var(--fx-ease),
              box-shadow 0.35s var(--fx-ease);
}

.fx-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  .fx-reveal,
  .fx-reveal-stagger > *,
  .fx-reveal-stagger > .e-con-inner > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .fx-zoom img,
  .fx-header,
  .fx-card {
    transition: none !important;
  }
  .fx-zoom:hover img,
  .fx-card:hover {
    transform: none !important;
  }
  .fx-parallax {
    background-position: center center !important;
  }
}

@media (max-width: 767px) {
  .fx-parallax {
    background-position: center center !important;
    background-attachment: scroll !important;
  }
  .fx-reveal,
  .fx-reveal-stagger > *,
  .fx-reveal-stagger > .e-con-inner > * {
    transform: translateY(16px);
  }
  .fx-card:hover {
    transform: none;
    box-shadow: none;
  }
}

.fx-no-motion,
.fx-no-motion * {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

html:not(.fx-js) .fx-reveal,
html:not(.fx-js) .fx-reveal-stagger > *,
html:not(.fx-js) .fx-reveal-stagger > .e-con-inner > * {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}