/* ==========================================================================
   WebGraficos Pro — MÓDULO IMÁGENES DESPAMPANANTES
   5 efectos de alto impacto. Se activan con clases CSS en Elementor.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .wg-gallery img, .wg-tilt, .wg-distort img { transition: none !important; transform: none !important; }
  .wg-particles canvas, .wg-blobs { display: none !important; }
}

/* --------------------------------------------------------------------------
   1) GALERÍA REVELADA AL SCROLL (mosaico tipo portafolio)
   Estructura: .wg-gallery > .wg-gallery__item (img dentro)
   -------------------------------------------------------------------------- */
.wg-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.2rem;
}
.wg-gallery__item {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--wg-bg-line);
  opacity: 0;
  transform: translateY(50px) scale(.95);
  transition: opacity .9s var(--wg-ease), transform .9s var(--wg-ease);
  aspect-ratio: 4 / 3;
}
.wg-gallery.is-visible .wg-gallery__item            { opacity: 1; transform: none; }
.wg-gallery.is-visible .wg-gallery__item:nth-child(2) { transition-delay: .08s; }
.wg-gallery.is-visible .wg-gallery__item:nth-child(3) { transition-delay: .16s; }
.wg-gallery.is-visible .wg-gallery__item:nth-child(4) { transition-delay: .24s; }
.wg-gallery.is-visible .wg-gallery__item:nth-child(5) { transition-delay: .32s; }
.wg-gallery.is-visible .wg-gallery__item:nth-child(6) { transition-delay: .40s; }
.wg-gallery__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--wg-ease);
}
.wg-gallery__item:hover img { transform: scale(1.1); }
/* etiqueta opcional que sube al hover */
.wg-gallery__item .wg-gallery__label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.2rem;
  background: linear-gradient(transparent, rgba(18,27,34,.92));
  color: var(--wg-text);
  font-family: var(--wg-font-disp); font-weight: 700;
  transform: translateY(100%);
  transition: transform .5s var(--wg-ease);
}
.wg-gallery__item:hover .wg-gallery__label { transform: translateY(0); }

/* --------------------------------------------------------------------------
   2) HERO PARALLAX MULTICAPA (profundidad real con varias capas)
   Estructura: .wg-layers con .wg-layers__bg / __mid / __front
   El JS mueve cada capa a distinta velocidad según mouse + scroll
   -------------------------------------------------------------------------- */
.wg-layers {
  position: relative;
  min-height: 80vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wg-layers__layer {
  position: absolute; inset: -8%;
  background-size: cover; background-position: center;
  will-change: transform;
}
.wg-layers__content { position: relative; z-index: 5; text-align: center; padding: 2rem; }

/* --------------------------------------------------------------------------
   3) TILT 3D (la imagen se inclina siguiendo el mouse)
   Clase: wg-tilt   (ponla en el contenedor de la imagen)
   -------------------------------------------------------------------------- */
.wg-tilt {
  transform-style: preserve-3d;
  transition: transform .2s var(--wg-ease);
  will-change: transform;
}
.wg-tilt img, .wg-tilt > * { border-radius: 16px; }
.wg-tilt__glare {
  position: absolute; inset: 0;
  border-radius: 16px;
  background: radial-gradient(circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.18), transparent 55%);
  opacity: 0; transition: opacity .3s; pointer-events: none;
}
.wg-tilt:hover .wg-tilt__glare { opacity: 1; }

/* --------------------------------------------------------------------------
   4) DISTORSIÓN AL HOVER (la imagen "respira" / se deforma)
   Clase: wg-distort
   -------------------------------------------------------------------------- */
.wg-distort {
  overflow: hidden; border-radius: 16px;
  position: relative;
}
.wg-distort img {
  width: 100%; display: block;
  transition: transform 1.2s var(--wg-ease), filter 1.2s var(--wg-ease);
  filter: saturate(.9);
}
.wg-distort:hover img {
  transform: scale(1.12) rotate(-1.5deg);
  filter: saturate(1.15) contrast(1.05);
}
.wg-distort::after {
  content: ''; position: absolute; inset: 0;
  background: var(--wg-accent);
  mix-blend-mode: color;
  opacity: 0; transition: opacity .8s var(--wg-ease);
}
.wg-distort:hover::after { opacity: .12; }

/* --------------------------------------------------------------------------
   5) PARTÍCULAS / CONSTELACIÓN (canvas animado sobre fondo o imagen)
   Estructura: sección con clase .wg-particles  (el JS inyecta el canvas)
   data-wg-bg opcional = imagen de fondo bajo las partículas
   -------------------------------------------------------------------------- */
.wg-particles {
  position: relative;
  overflow: hidden;
}
.wg-particles__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: .35;
}
.wg-particles canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
}
.wg-particles > .elementor-container,
.wg-particles > .e-con-inner,
.wg-particles__content { position: relative; z-index: 2; }

/* Blobs orgánicos animados (alternativa más suave a las partículas) */
.wg-blobs {
  position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none;
}
.wg-blob {
  position: absolute; border-radius: 50%;
  filter: blur(60px); opacity: .5;
  animation: wg-float 18s ease-in-out infinite;
}
.wg-blob--1 { width: 380px; height: 380px; background: var(--wg-accent);  top: -80px; left: -60px; }
.wg-blob--2 { width: 300px; height: 300px; background: #2E6E8E;            bottom: -60px; right: -40px; animation-delay: -6s; }
.wg-blob--3 { width: 240px; height: 240px; background: var(--wg-accent-2); top: 40%; left: 55%; animation-delay: -12s; }
@keyframes wg-float {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(40px,-30px) scale(1.1); }
  66%     { transform: translate(-30px,25px) scale(.95); }
}