/* ======================================================
   MOTION EDITORIAL – SINTEGRAD
   Especificidad reforzada para convivir con módulos
   ====================================================== */

/* ===============================
   SECCIONES EDITORIALES
   =============================== */

.section-proceso .motion-item,
.process-timeline .motion-item,
.proceso .motion-item {
  opacity: 0;
  transform: translateX(-48px);
  transition:
    opacity 1s ease,
    transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}

.section-proceso .motion-item.is-visible,
.process-timeline .motion-item.is-visible,
.proceso .motion-item.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* ===============================
   MOBILE
   =============================== */

@media (max-width: 768px) {
  .section-proceso .motion-item,
  .process-timeline .motion-item,
  .proceso .motion-item {
    transform: translateX(-32px);
    transition:
      opacity 0.9s ease,
      transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
}
/* ======================================================
   MOTION EDITORIAL – DESLIZAMIENTO REAL (PREMIUM)
   ====================================================== */

/* Estado inicial */
.motion-item {
  opacity: 0;
  transform: translateX(0);
  transition:
    transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.6s ease;
  will-change: transform, opacity;
}

/* Variantes direccionales */
.motion-item.motion-left {
  transform: translateX(-48px);
}

.motion-item.motion-right {
  transform: translateX(48px);
}

.motion-item.motion-fade {
  transform: none;
}

/* Estado visible */
.motion-item.is-visible {
  transform: translateX(0);
  opacity: 1;
  transition-delay: 0s, 0.12s; /* CLAVE: primero movimiento, luego opacidad */
}

/* ======================================================
   ACENTO EDITORIAL (LÍNEA)
   ====================================================== */

.audience-item {
  position: relative;
}

.audience-item::before {
  content: "";
  position: absolute;
  left: -1.25rem;
  top: 0.35rem;
  bottom: 0.35rem;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(255,255,255,0.14),
    transparent
  );
  opacity: 0;
  transition: opacity 0.6s ease 0.25s;
}

.audience-item.motion-item.is-visible::before {
  opacity: 1;
}

/* ======================================================
   MOBILE – MÁS CORTO, MISMA LÓGICA
   ====================================================== */

@media (max-width: 768px) {
  .motion-item.motion-left {
    transform: translateX(-20px);
  }

  .motion-item.motion-right {
    transform: translateX(20px);
  }
}
/* ======================================================
   MOTION – VARIANTES DIRECCIONALES
   Editorial, no promocional
   ====================================================== */

.motion-item {
  opacity: 0;
  transition:
    opacity 0.9s ease,
    transform 0.9s ease;
  will-change: opacity, transform;
}

/* Fade puro */
.motion-fade {
  transform: none;
}

/* Entrada lateral */
.motion-left {
  transform: translateX(-28px);
}

.motion-right {
  transform: translateX(28px);
}

/* Estado visible */
.motion-item.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Mobile: aún más sutil */
@media (max-width: 768px) {
  .motion-left,
  .motion-right {
    transform: translateY(12px);
  }
}