/* =============================================================
   Microanimaciones — Grupo MD
   Extraídas y catalogadas del prototipo:
   https://staging.adviewhost.com/ia/grupomd/ (styles.css + main.js)

   10 clases independientes, cada una autocontenida (no depende
   de ninguna otra clase de este archivo). Usa custom properties
   (--gmd-*) con valores por defecto tomados del prototipo original,
   para poder ajustarlas sin editar la clase.

   Índice:
     1. .gmd-anim-reveal        — Aparece al hacer scroll (fade + slide up)
     2. .gmd-anim-stagger       — Cascada / stagger para grupos de elementos
     3. .gmd-anim-hero-intro    — Secuencia de entrada del Hero al cargar
     4. .gmd-anim-float         — Blobs decorativos flotando en loop infinito
     5. .gmd-anim-scroll-cue    — Indicador de scroll pulsante ("Explorar")
     6. .gmd-anim-parallax      — Parallax ligado al scroll (requiere GSAP)
     7. .gmd-anim-card-hover    — Tarjeta: elevación + zoom de imagen en hover
     8. .gmd-anim-link-arrow    — Flecha deslizante en botones/enlaces
     9. .gmd-anim-nav-scroll    — Encabezado que se condensa al hacer scroll
    10. .gmd-anim-counter       — Contador numérico animado (count-up)
    11. .gmd-anim-badge-pop     — Insignia circular: aparición con rebote (scale)

   Las marcadas "requiere JS" necesitan microanimaciones.js (o su propia
   lógica equivalente) para alternar la clase de estado (.is-visible,
   .is-scrolled, etc.) — el CSS por sí solo define la transición/keyframe,
   no el disparador.
   ============================================================= */

/* -------------------------------------------------------------
   1. .gmd-anim-reveal
   Fade + slide-up al entrar en el viewport.
   Origen: .reveal / .reveal-up (styles.css línea ~93)
   Requiere JS: sí (IntersectionObserver agrega .is-visible)
   ------------------------------------------------------------- */
.gmd-anim-reveal {
  --gmd-reveal-distance: 36px;
  --gmd-reveal-duration: .75s;
  --gmd-reveal-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gmd-reveal-delay: 0s;

  opacity: 0;
  transform: translateY(var(--gmd-reveal-distance));
  transition: opacity var(--gmd-reveal-duration) var(--gmd-reveal-ease) var(--gmd-reveal-delay),
              transform var(--gmd-reveal-duration) var(--gmd-reveal-ease) var(--gmd-reveal-delay);
}
.gmd-anim-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* -------------------------------------------------------------
   2. .gmd-anim-stagger
   Cascada: aplica un retraso creciente a los hijos directos de un
   contenedor, usando el índice de cada hijo (--gmd-i, seteado por JS
   o manualmente por elemento). Pensado para usarse junto con
   .gmd-anim-reveal en cada hijo.
   Origen: .reveal[data-delay="1..5"] (styles.css línea ~108)
   Requiere JS: sí, para asignar --gmd-i automáticamente (o manual
   con style="--gmd-i:2" en cada hijo)
   ------------------------------------------------------------- */
.gmd-anim-stagger > * {
  --gmd-stagger-step: .1s;
  --gmd-i: 0;
  transition-delay: calc(var(--gmd-i) * var(--gmd-stagger-step));
}

/* -------------------------------------------------------------
   3. .gmd-anim-hero-intro
   Secuencia de aparición de los elementos del Hero al cargar la
   página (no depende de scroll). Aplicar a cada elemento hijo del
   hero en orden, con --gmd-i creciente (0,1,2,3,4,5).
   Origen: heroFade keyframes + animation-delay escalonado
   (styles.css línea ~399-433)
   Requiere JS: no (solo requiere --gmd-i por elemento)
   ------------------------------------------------------------- */
@keyframes gmd-hero-fade {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.gmd-anim-hero-intro {
  --gmd-i: 0;
  --gmd-step: .15s;
  --gmd-base-delay: .1s;
  animation: gmd-hero-fade .9s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--gmd-base-delay) + (var(--gmd-i) * var(--gmd-step)));
}

/* -------------------------------------------------------------
   4. .gmd-anim-float
   Loop infinito de flotación + escala sutil, para blobs/formas
   decorativas de fondo.
   Origen: .hero-blob-1/2/3 + @keyframes blobFloat1/2/3
   (styles.css línea ~353-388)
   Requiere JS: no
   ------------------------------------------------------------- */
@keyframes gmd-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(6%, 8%) scale(1.05); }
  66%      { transform: translate(-4%, 4%) scale(.97); }
}
.gmd-anim-float {
  --gmd-float-duration: 18s;
  animation: gmd-float var(--gmd-float-duration) ease-in-out infinite;
  will-change: transform;
}

/* -------------------------------------------------------------
   5. .gmd-anim-scroll-cue
   Línea vertical que pulsa (se encoge y atenúa) en loop — usada
   como indicador de "sigue bajando".
   Origen: .hero-scroll-line + @keyframes scrollLine
   (styles.css línea ~442-446)
   Requiere JS: no
   ------------------------------------------------------------- */
@keyframes gmd-scroll-cue {
  0%, 100% { transform: scaleY(1); opacity: .6; }
  50%      { transform: scaleY(0.4); opacity: .2; }
}
.gmd-anim-scroll-cue {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, rgba(255,255,255,.5), transparent);
  transform-origin: top;
  animation: gmd-scroll-cue 2s ease-in-out infinite;
}

/* -------------------------------------------------------------
   6. .gmd-anim-parallax
   Desplazamiento a distinta velocidad que el scroll (profundidad).
   Origen: initParallax() con GSAP + ScrollTrigger (main.js línea ~134)
   Requiere JS: sí — GSAP + ScrollTrigger (ver microanimaciones.js,
   función initParallax). Esta clase solo marca el elemento como
   objetivo de parallax; el movimiento lo aplica GSAP con
   scrollTrigger.scrub, no una transition CSS (por eso no hay
   keyframes aquí: el valor de yPercent se anima cuadro a cuadro
   siguiendo el scroll).
   ------------------------------------------------------------- */
.gmd-anim-parallax {
  --gmd-parallax-ypercent: 20; /* leído por JS: gsap.to(el, {yPercent: ...}) */
  will-change: transform;
}

/* -------------------------------------------------------------
   7. .gmd-anim-card-hover
   Tarjeta que se eleva con sombra al pasar el mouse, con zoom
   suave de la imagen interna (usar .gmd-anim-card-hover__img en
   el <img> hijo).
   Origen: .marca-card / .blog-card / .ubicacion-card (styles.css
   línea ~608-630)
   Requiere JS: no
   ------------------------------------------------------------- */
.gmd-anim-card-hover {
  --gmd-lift: -6px;
  --gmd-shadow: 0 24px 60px rgba(58, 64, 100, .18);
  transition: box-shadow .35s cubic-bezier(0.16, 1, 0.3, 1),
              transform .35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
.gmd-anim-card-hover:hover {
  box-shadow: var(--gmd-shadow);
  transform: translateY(var(--gmd-lift));
}
.gmd-anim-card-hover__img {
  transition: transform .6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.gmd-anim-card-hover:hover .gmd-anim-card-hover__img {
  transform: scale(1.05);
}

/* -------------------------------------------------------------
   8. .gmd-anim-link-arrow
   Flecha (u otro ícono) que se desliza hacia la derecha y el gap
   crece al pasar el mouse sobre el enlace/botón. Poner esta clase
   en el <span>/<i> de la flecha, dentro de un elemento con
   display:inline-flex.
   Origen: .btn .arrow (styles.css línea ~194) y .marca-link (línea ~648)
   Requiere JS: no
   ------------------------------------------------------------- */
.gmd-anim-link-arrow {
  display: inline-block;
  transition: transform .25s cubic-bezier(0.16, 1, 0.3, 1);
}
a:hover > .gmd-anim-link-arrow,
button:hover > .gmd-anim-link-arrow,
.gmd-anim-link-arrow:hover {
  transform: translateX(4px);
}

/* -------------------------------------------------------------
   9. .gmd-anim-nav-scroll
   Encabezado que gana fondo/blur/sombra después de superar un
   umbral de scroll (por defecto 30px). Alternar la clase de estado
   ".is-scrolled" vía JS (ver microanimaciones.js, initNavScroll).
   Origen: .nav / .nav.is-scrolled (styles.css línea ~131-145,
   main.js función initNav)
   Requiere JS: sí
   ------------------------------------------------------------- */
.gmd-anim-nav-scroll {
  --gmd-nav-bg: rgba(255, 255, 255, 0.95);
  --gmd-nav-blur: 16px;
  transition: background .4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow .4s cubic-bezier(0.16, 1, 0.3, 1),
              backdrop-filter .4s cubic-bezier(0.16, 1, 0.3, 1);
}
.gmd-anim-nav-scroll.is-scrolled {
  background: var(--gmd-nav-bg);
  backdrop-filter: blur(var(--gmd-nav-blur));
  -webkit-backdrop-filter: blur(var(--gmd-nav-blur));
  box-shadow: 0 1px 0 rgba(38, 45, 70, .12), 0 4px 20px rgba(38, 45, 70, .08);
}

/* -------------------------------------------------------------
   10. .gmd-anim-counter
   Marca un número para que main.js/microanimaciones.js lo anime de
   0 al valor final (data-count) cuando entra en el viewport, con
   easing ease-out cúbico. El CSS aquí solo evita el "salto" visual
   mientras el número no ha iniciado su conteo.
   Origen: [data-count] + initCounters() (main.js línea ~107-131)
   Requiere JS: sí
   Uso: <span class="gmd-anim-counter" data-count="500" data-suffix="+">0</span>
   ------------------------------------------------------------- */
.gmd-anim-counter {
  font-variant-numeric: tabular-nums;
  display: inline-block;
}

/* -------------------------------------------------------------
   11. .gmd-anim-badge-pop
   Aparición tipo "pop" con rebote (scale + opacity), pensada para
   insignias circulares (ej. años en una línea del tiempo). Usar
   SIEMPRE junto con .gmd-anim-reveal (el JS solo observa esa
   clase para el disparo por scroll) — esta clase se agrega después
   en la cascada y sobreescribe su opacity/transform con el rebote.
   Origen: .timeline-badge (línea del tiempo, export del diseñador)
   Requiere JS: sí (mismo .gmd-anim-reveal / initReveal)
   Uso: class="gmd-anim-reveal gmd-anim-badge-pop"
   ------------------------------------------------------------- */
.gmd-anim-badge-pop {
  --gmd-badge-scale-from: .6;
  --gmd-badge-duration: .5s;
  --gmd-badge-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
  --gmd-badge-delay: .15s;

  opacity: 0;
  transform: scale(var(--gmd-badge-scale-from));
  transition: opacity var(--gmd-badge-duration) var(--gmd-badge-ease) var(--gmd-badge-delay),
              transform var(--gmd-badge-duration) var(--gmd-badge-ease) var(--gmd-badge-delay);
}
.gmd-anim-badge-pop.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* -------------------------------------------------------------
   Modificadores de retraso (delay) — utilidades opcionales
   Para usar junto con .gmd-anim-reveal o .gmd-anim-hero-intro en
   Elementor: se agregan como una clase MÁS en el campo nativo
   "Clases CSS" (pestaña Avanzado) de cada widget/contenedor, ej.
   "gmd-anim-reveal gmd-delay-2". Reproducen la misma escala que
   el prototipo (data-delay="1..5", pasos de .1s).
   ------------------------------------------------------------- */
.gmd-delay-1 { --gmd-reveal-delay: .1s; }
.gmd-delay-2 { --gmd-reveal-delay: .2s; }
.gmd-delay-3 { --gmd-reveal-delay: .3s; }
.gmd-delay-4 { --gmd-reveal-delay: .4s; }
.gmd-delay-5 { --gmd-reveal-delay: .5s; }

.gmd-hero-i-0 { --gmd-i: 0; }
.gmd-hero-i-1 { --gmd-i: 1; }
.gmd-hero-i-2 { --gmd-i: 2; }
.gmd-hero-i-3 { --gmd-i: 3; }
.gmd-hero-i-4 { --gmd-i: 4; }

/* -------------------------------------------------------------
   Visibilidad forzada dentro del editor de Elementor
   Elementor carga este CSS/JS también dentro del iframe de vista
   previa del editor, pero el IntersectionObserver de
   microanimaciones.js no siempre llega a disparar ahí (el iframe
   no dispara los eventos de scroll/intersección igual que una
   pestaña real), dejando los bloques en opacity:0 mientras se
   edita. Body.elementor-editor-active es la clase que Elementor
   agrega al <body> del iframe SOLO en modo edición — nunca en el
   sitio publicado — así que esta regla no afecta la animación real.
   ------------------------------------------------------------- */
body.elementor-editor-active .gmd-anim-reveal,
body.elementor-editor-active .gmd-anim-hero-intro {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* -------------------------------------------------------------
   Compatibilidad con Transform > Hover de Elementor
   .gmd-anim-reveal.is-visible fija "transform: none" para anular
   el desplazamiento inicial del reveal — pero esa regla empata en
   especificidad con la que Elementor usa para su propio transform
   dinámico (--e-transform-*), y como este archivo se carga después
   del CSS de cada página, le gana y bloquea cualquier hover-transform
   (ej. "elevar" un botón) en elementos que también tengan la clase
   .e-transform. Esta regla reproduce exactamente la fórmula de
   Elementor pero con mayor especificidad, solo durante hover/focus,
   para que el efecto de Elementor vuelva a tener prioridad ahí.
   ------------------------------------------------------------- */
.gmd-anim-reveal.is-visible.e-transform:hover,
.gmd-anim-reveal.is-visible.e-transform:focus-within {
  transform: perspective(var(--e-transform-perspective, 0)) rotateZ(var(--e-transform-rotateZ, 0)) rotateX(var(--e-transform-rotateX, 0)) rotateY(var(--e-transform-rotateY, 0)) translate(var(--e-transform-translate, 0)) translateX(var(--e-transform-translateX, 0)) translateY(var(--e-transform-translateY, 0)) scaleX(calc(var(--e-transform-flipX, 1) * var(--e-transform-scaleX, var(--e-transform-scale, 1)))) scaleY(calc(var(--e-transform-flipY, 1) * var(--e-transform-scaleY, var(--e-transform-scale, 1)))) skewX(var(--e-transform-skewX, 0)) skewY(var(--e-transform-skewY, 0));
}

/* -------------------------------------------------------------
   prefers-reduced-motion
   Usuarios que activaron "reducir movimiento" en su sistema no
   deben recibir desplazamientos, parpadeos ni loops infinitos.
   Se conserva el estado final (opacity:1, sin transform) para que
   el contenido siga siendo visible, solo se quita el movimiento.
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .gmd-anim-reveal {
    transition: none;
  }
  .gmd-anim-reveal.is-visible {
    opacity: 1;
    transform: none;
  }
  .gmd-anim-hero-intro {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .gmd-anim-float,
  .gmd-anim-scroll-cue {
    animation: none;
  }
  .gmd-anim-card-hover,
  .gmd-anim-card-hover__img,
  .gmd-anim-link-arrow,
  .gmd-anim-nav-scroll,
  .gmd-anim-badge-pop {
    transition: none;
  }
  .gmd-anim-badge-pop.is-visible {
    opacity: 1;
    transform: none;
  }
  .gmd-anim-card-hover:hover {
    transform: none;
  }
  .gmd-anim-card-hover:hover .gmd-anim-card-hover__img {
    transform: none;
  }
  a:hover > .gmd-anim-link-arrow,
  button:hover > .gmd-anim-link-arrow,
  .gmd-anim-link-arrow:hover {
    transform: none;
  }
}