/* ============================================================
   EFECTO TRACK — Animations & Microanimations
   BEM: .anim-[name], .js-[state]
   ============================================================ */

/* ─── Keyframes ─────────────────────────────────────────────── */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-32px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(32px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse-ring {
  0%   { transform: scale(1);    opacity: 0.6; }
  100% { transform: scale(1.6);  opacity: 0;   }
}

@keyframes float {
  0%, 100% { transform: translateY(0);   }
  50%       { transform: translateY(-8px); }
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes countUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* ─── Clases de animación observables (Intersection Observer) ── */
/* Estado inicial: oculto */
.anim-fade-up,
.anim-fade-in,
.anim-fade-left,
.anim-fade-right,
.anim-scale-in {
  opacity: 0;
  will-change: opacity, transform;
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.anim-fade-up    { transform: translateY(28px); }
.anim-fade-left  { transform: translateX(-28px); }
.anim-fade-right { transform: translateX(28px); }
.anim-scale-in   { transform: scale(0.94); }

/* Estado visible (clase añadida por JS) */
.anim-fade-up.is-visible,
.anim-fade-in.is-visible,
.anim-fade-left.is-visible,
.anim-fade-right.is-visible,
.anim-scale-in.is-visible {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* ─── Stagger (delay progresivo para grupos) ─────────────────── */
.stagger-children > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.stagger-children.is-visible > *:nth-child(1)  { opacity: 1; transform: none; transition-delay: 0.05s; }
.stagger-children.is-visible > *:nth-child(2)  { opacity: 1; transform: none; transition-delay: 0.15s; }
.stagger-children.is-visible > *:nth-child(3)  { opacity: 1; transform: none; transition-delay: 0.25s; }
.stagger-children.is-visible > *:nth-child(4)  { opacity: 1; transform: none; transition-delay: 0.35s; }
.stagger-children.is-visible > *:nth-child(5)  { opacity: 1; transform: none; transition-delay: 0.45s; }
.stagger-children.is-visible > *:nth-child(6)  { opacity: 1; transform: none; transition-delay: 0.55s; }

/* ─── Hover Effects (Tarjetas) ───────────────────────────────── */
.hover-lift {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(11, 29, 58, 0.14);
}

/* ─── Botones — efecto ripple y hover ───────────────────────── */
.btn {
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease,
              box-shadow 0.2s ease,
              background-color 0.2s ease,
              color 0.2s ease;
}

.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0px); }

/* Ripple effect */
.btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  transform: scale(0);
  animation: ripple-expand 0.6s linear;
  pointer-events: none;
}

@keyframes ripple-expand {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* ─── Navbar scroll transition ───────────────────────────────── */
.navbar {
  transition: background-color 0.3s ease,
              box-shadow 0.3s ease,
              padding 0.3s ease;
}

.navbar.is-scrolled {
  background-color: rgba(255, 255, 255, 0.97) !important;
  box-shadow: 0 2px 20px rgba(11, 29, 58, 0.10);
  backdrop-filter: blur(12px);
}

/* ─── Mobile menu ────────────────────────────────────────────── */
.nav__menu {
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}

/* ─── Hero parallax ──────────────────────────────────────────── */
.hero__image-wrap {
  animation: float 6s ease-in-out infinite;
}

/* ─── Pulse ring (WhatsApp button) ───────────────────────────── */
.whatsapp-float::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25D366;
  animation: pulse-ring 2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
  z-index: -1;
}

/* ─── Timeline step reveal ───────────────────────────────────── */
.timeline__item {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.timeline__item.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.timeline__item:nth-child(1).is-visible { transition-delay: 0.0s; }
.timeline__item:nth-child(2).is-visible { transition-delay: 0.1s; }
.timeline__item:nth-child(3).is-visible { transition-delay: 0.2s; }
.timeline__item:nth-child(4).is-visible { transition-delay: 0.3s; }
.timeline__item:nth-child(5).is-visible { transition-delay: 0.4s; }

/* ─── Form feedback ──────────────────────────────────────────── */
.form__field {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form__message {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.form__message--hidden {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

/* ─── Loading spinner ────────────────────────────────────────── */
.spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: middle;
  margin-right: 8px;
}

/* ─── Stat counter ───────────────────────────────────────────── */
.stat__number {
  animation: countUp 0.6s ease forwards;
}

/* ─── Accessibility: Reduce motion ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .anim-fade-up,
  .anim-fade-in,
  .anim-fade-left,
  .anim-fade-right,
  .anim-scale-in,
  .stagger-children > *,
  .timeline__item {
    opacity: 1 !important;
    transform: none !important;
  }
}