/* ==========================================================================
   WebGraficos Pro — MOTOR DE EFECTOS
   Todo se activa con clases CSS que pones en Elementor:
   Avanzado → CSS Classes  (en widget, columna o sección)
   ========================================================================== */

/* Respeta a quien pide menos movimiento (accesibilidad) */
@media (prefers-reduced-motion: reduce) {
  .wg-reveal, .wg-zoom, .wg-parallax > *, .wg-stagger > * {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* --------------------------------------------------------------------------
   1) REVEAL ON SCROLL — el contenido aparece al bajar
   Clase: wg-reveal   (+ opcional dirección: wg-reveal--up / --left / --right)
   -------------------------------------------------------------------------- */
.wg-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .9s var(--wg-ease), transform .9s var(--wg-ease);
  will-change: opacity, transform;
}
.wg-reveal--left  { transform: translateX(-50px); }
.wg-reveal--right { transform: translateX(50px); }
.wg-reveal--up    { transform: translateY(60px); }

.wg-reveal.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* --------------------------------------------------------------------------
   2) ZOOM ON APPEAR — efecto de zoom cuando entra en pantalla
   Clase: wg-zoom   (entra desde pequeño)   |   wg-zoom--out (entra desde grande)
   -------------------------------------------------------------------------- */
.wg-zoom {
  opacity: 0;
  transform: scale(.82);
  transition: opacity 1s var(--wg-ease), transform 1.1s var(--wg-ease);
  will-change: opacity, transform;
}
.wg-zoom--out { transform: scale(1.18); }

.wg-zoom.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Zoom permanente y sutil sobre imágenes al pasar el mouse (tarjetas) */
.wg-img-zoom { overflow: hidden; }
.wg-img-zoom img {
  transition: transform 1.2s var(--wg-ease);
  transform: scale(1);
}
.wg-img-zoom:hover img { transform: scale(1.08); }

/* --------------------------------------------------------------------------
   3) STAGGER — los hijos aparecen uno tras otro (listas, grids de servicios)
   Clase en el CONTENEDOR: wg-stagger
   -------------------------------------------------------------------------- */
.wg-stagger > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s var(--wg-ease), transform .7s var(--wg-ease);
}
.wg-stagger.is-visible > *        { opacity: 1; transform: translateY(0); }
.wg-stagger.is-visible > *:nth-child(1) { transition-delay: .00s; }
.wg-stagger.is-visible > *:nth-child(2) { transition-delay: .10s; }
.wg-stagger.is-visible > *:nth-child(3) { transition-delay: .20s; }
.wg-stagger.is-visible > *:nth-child(4) { transition-delay: .30s; }
.wg-stagger.is-visible > *:nth-child(5) { transition-delay: .40s; }
.wg-stagger.is-visible > *:nth-child(6) { transition-delay: .50s; }
.wg-stagger.is-visible > *:nth-child(7) { transition-delay: .60s; }
.wg-stagger.is-visible > *:nth-child(8) { transition-delay: .70s; }

/* --------------------------------------------------------------------------
   4) PARALLAX — el fondo se mueve más lento que el scroll
   Clase en la SECCIÓN: wg-parallax
   (el JS lee data-wg-speed; por defecto 0.25; valores 0.1–0.5 recomendados)
   -------------------------------------------------------------------------- */
.wg-parallax {
  position: relative;
  overflow: hidden;
}
.wg-parallax__bg {
  position: absolute;
  inset: -15% 0 -15% 0;   /* margen extra para que no se vea el borde al moverse */
  background-size: cover;
  background-position: center;
  will-change: transform;
  z-index: 0;
}
.wg-parallax > .elementor-container,
.wg-parallax > .e-con-inner { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   5) MARQUEE — franja que se desplaza horizontalmente (ej: Servicios)
   Estructura:  contenedor .wg-marquee  >  pista .wg-marquee__track  >  items
   El JS duplica el contenido para loop infinito sin saltos.
   -------------------------------------------------------------------------- */
.wg-marquee {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.wg-marquee__track {
  display: flex;
  width: max-content;
  gap: 3rem;
  align-items: center;
  animation: wg-scroll-x var(--wg-marquee-dur, 28s) linear infinite;
}
.wg-marquee:hover .wg-marquee__track { animation-play-state: paused; }
.wg-marquee--reverse .wg-marquee__track { animation-direction: reverse; }

.wg-marquee__item {
  flex: 0 0 auto;
  font-family: var(--wg-font-disp);
  font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 2.6rem);
  color: var(--wg-text-mut);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 3rem;
}
/* viñeta separadora entre palabras */
.wg-marquee__item::after {
  content: '';
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--wg-accent);
  display: inline-block;
}

@keyframes wg-scroll-x {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }  /* -50% porque el track se duplica */
}

/* --------------------------------------------------------------------------
   6) Detalles premium extra (gratis, suman mucho)
   -------------------------------------------------------------------------- */

/* Línea de acento animada bajo títulos. Clase: wg-underline */
.wg-underline { position: relative; display: inline-block; }
.wg-underline::after {
  content: '';
  position: absolute; left: 0; bottom: -.15em;
  width: 0; height: 3px;
  background: var(--wg-accent);
  transition: width .8s var(--wg-ease);
}
.wg-underline.is-visible::after { width: 100%; }

/* Tarjeta con elevación al hover. Clase: wg-card */
.wg-card {
  background: var(--wg-bg-soft);
  border: 1px solid var(--wg-bg-line);
  border-radius: 16px;
  transition: transform .4s var(--wg-ease), border-color .4s var(--wg-ease), box-shadow .4s var(--wg-ease);
}
.wg-card:hover {
  transform: translateY(-6px);
  border-color: var(--wg-accent);
  box-shadow: 0 20px 50px -20px rgba(0,0,0,.6);
}