/* ═══════════════════════════════════════════════════════════════════════════
   FORCE FIX: Transiciones Suaves en Producción
   Sobrescribe variables de Tailwind con máxima prioridad
   v2.0 (prod1) - 10 octubre 2025 - HARDENED FOR PRODUCTION
   ═══════════════════════════════════════════════════════════════════════════ */

/* ===== VARIABLES GLOBALES CON MÁXIMA PRIORIDAD ===== */
/* Aplicar SIEMPRE (sin media query para asegurar parsing) */
:root,
html,
body {
  --default-transition-duration: .35s !important;
  --default-transition-timing-function: cubic-bezier(.22,.61,.36,1) !important;
  --tw-duration: .35s !important;
  --tw-ease: cubic-bezier(.22,.61,.36,1) !important;
}

/* Mobile específico con mayor especificidad */
@media (max-width: 1023.98px) {
  :root,
  html,
  body,
  * {
    --default-transition-duration: .35s !important;
    --default-transition-timing-function: cubic-bezier(.22,.61,.36,1) !important;
  }
}

/* ===== OVERRIDE DIRECTO DE CLASES DE TAILWIND ===== */
.transition-all,
.transition-colors,
.transition-opacity,
.transition-transform,
[class*="transition-"] {
  transition-duration: .35s !important;
  transition-timing-function: cubic-bezier(.22,.61,.36,1) !important;
}

/* ===== OVERRIDE DE DURACIONES ESPECÍFICAS DE TAILWIND ===== */
/* Mayor especificidad para prevenir conflictos en producción */
html body .duration-150,
.duration-150 { 
  --tw-duration: .35s !important;
  transition-duration: .35s !important; 
}

html body .duration-300,
.duration-300 { 
  --tw-duration: .50s !important;
  transition-duration: .50s !important; 
}

html body .duration-400,
.duration-400 { 
  --tw-duration: .65s !important;
  transition-duration: .65s !important; 
}

html body .duration-500,
.duration-500 { 
  --tw-duration: .80s !important;
  transition-duration: .80s !important; 
}

html body .duration-700,
.duration-700 { 
  --tw-duration: 1.00s !important;
  transition-duration: 1.00s !important; 
}

html body .duration-1000,
.duration-1000 { 
  --tw-duration: 1.40s !important;
  transition-duration: 1.40s !important; 
}

/* ===== OVERRIDE EXTRA ESPECÍFICO PARA MÓVIL ===== */
@media (max-width: 768px) {
  html body .duration-150 {
    transition-duration: .35s !important;
  }
  html body .duration-300 {
    transition-duration: .50s !important;
  }
  html body .duration-500 {
    transition-duration: .80s !important;
  }
}

/* ===== CLASES PERSONALIZADAS DEL PROYECTO ===== */
.transition-smooth,
.transition-elegant,
.hover-lift,
.hover-scale-subtle,
.hover-glow {
  transition-timing-function: cubic-bezier(.22,.61,.36,1) !important;
  transition-duration: .35s !important;
}

.transition-smooth-slow,
.transition-elegant-slow,
.transition-bounce-subtle {
  transition-timing-function: cubic-bezier(.22,.61,.36,1) !important;
  transition-duration: .6s !important;
}

/* ===== ANIMACIONES ===== */
.animate-fade-in-up,
.animate-fade-in-up-delay-1,
.animate-fade-in-up-delay-2,
.animate-fade-in-up-delay-3,
[class*="animate-fade"] {
  animation-duration: 1.1s !important;
  animation-timing-function: cubic-bezier(.22,.61,.36,1) !important;
}

.pulse-subtle,
.pulse-accent {
  animation-duration: 3s !important;
}

/* ===== MENÚ MÓVIL ===== */
#mobile-menu-overlay,
#mobile-menu-overlay .js-mobile-card {
  transition: opacity .45s cubic-bezier(.22,.61,.36,1) !important,
              transform .45s cubic-bezier(.22,.61,.36,1) !important;
}

/* ===== CARDS Y ELEMENTOS INTERACTIVOS ===== */
.card-zonit,
.card-animate,
[class*="card-"],
.hover\:scale-105:hover,
.hover\:scale-\[1\.02\]:hover,
.hover\:-translate-y-1:hover {
  transition: all .4s cubic-bezier(.22,.61,.36,1) !important;
}

/* ===== BOTONES ===== */
.btn-primary,
.btn-secondary,
button,
[role="button"],
a[class*="btn"] {
  transition: all .35s cubic-bezier(.22,.61,.36,1) !important;
}

/* ===== LINKS Y ELEMENTOS HOVER ===== */
a,
[class*="hover:"] {
  transition: all .3s cubic-bezier(.22,.61,.36,1) !important;
}

/* ===== SCROLL ANIMATIONS ===== */
[data-animate] {
  transition: opacity 0.8s cubic-bezier(.22,.61,.36,1) !important,
              transform 0.8s cubic-bezier(.22,.61,.36,1) !important;
}

/* ===== RESPETAR ACCESIBILIDAD ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ===== DEBUG (SOLO EN DESARROLLO) ===== */
/*
html::after {
  content: 'Transition Fix: Active';
  position: fixed;
  bottom: 10px;
  right: 10px;
  background: rgba(211, 216, 1, 0.9);
  color: #000;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 12px;
  z-index: 9999;
  font-family: monospace;
}
*/