/* ====================================
   ANIMACIONES AVANZADAS Y MICROINTERACCIONES
   ==================================== */

/* Animación de entrada para cards */
@-webkit-keyframes cardEntrance {
  from {
    opacity: 0;
    -webkit-transform: translateY(30px) scale(0.95);
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1);
  }
}

@-moz-keyframes cardEntrance {
  from {
    opacity: 0;
    -moz-transform: translateY(30px) scale(0.95);
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    -moz-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1);
  }
}

@-o-keyframes cardEntrance {
  from {
    opacity: 0;
    -o-transform: translateY(30px) scale(0.95);
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    -o-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1);
  }
}

@keyframes cardEntrance {
  from {
    opacity: 0;
    -webkit-transform: translateY(30px) scale(0.95);
    -moz-transform: translateY(30px) scale(0.95);
    -ms-transform: translateY(30px) scale(0.95);
    -o-transform: translateY(30px) scale(0.95);
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0) scale(1);
    -moz-transform: translateY(0) scale(1);
    -ms-transform: translateY(0) scale(1);
    -o-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1);
  }
}

.article-card {
  -webkit-animation: cardEntrance 0.6s ease-out backwards;
  -moz-animation: cardEntrance 0.6s ease-out backwards;
  -o-animation: cardEntrance 0.6s ease-out backwards;
  animation: cardEntrance 0.6s ease-out backwards;
}

.article-card:nth-child(1) { -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; }
.article-card:nth-child(2) { -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; -o-animation-delay: 0.1s; animation-delay: 0.1s; }
.article-card:nth-child(3) { -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; -o-animation-delay: 0.2s; animation-delay: 0.2s; }
.article-card:nth-child(4) { -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; -o-animation-delay: 0.3s; animation-delay: 0.3s; }
.article-card:nth-child(5) { -webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; -o-animation-delay: 0.4s; animation-delay: 0.4s; }
.article-card:nth-child(6) { -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; }
.article-card:nth-child(7) { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; }
.article-card:nth-child(8) { -webkit-animation-delay: 0.7s; -moz-animation-delay: 0.7s; -o-animation-delay: 0.7s; animation-delay: 0.7s; }
.article-card:nth-child(9) { -webkit-animation-delay: 0.8s; -moz-animation-delay: 0.8s; -o-animation-delay: 0.8s; animation-delay: 0.8s; }

/* Efecto shimmer en hover para imágenes */
.article-card:hover .article-card-image-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  -webkit-animation: shimmerSlide 0.6s ease;
  -moz-animation: shimmerSlide 0.6s ease;
  -o-animation: shimmerSlide 0.6s ease;
  animation: shimmerSlide 0.6s ease;
  z-index: 1;
}

@-webkit-keyframes shimmerSlide {
  from { left: -100%; }
  to { left: 100%; }
}

@-moz-keyframes shimmerSlide {
  from { left: -100%; }
  to { left: 100%; }
}

@-o-keyframes shimmerSlide {
  from { left: -100%; }
  to { left: 100%; }
}

@keyframes shimmerSlide {
  from { left: -100%; }
  to { left: 100%; }
}

/* Animación del botón de favoritos */
@-webkit-keyframes heartBeat {
  0%, 100% { -webkit-transform: scale(1); transform: scale(1); }
  10%, 30% { -webkit-transform: scale(0.9); transform: scale(0.9); }
  20%, 40%, 60%, 80% { -webkit-transform: scale(1.1); transform: scale(1.1); }
  50%, 70% { -webkit-transform: scale(1.05); transform: scale(1.05); }
}

@-moz-keyframes heartBeat {
  0%, 100% { -moz-transform: scale(1); transform: scale(1); }
  10%, 30% { -moz-transform: scale(0.9); transform: scale(0.9); }
  20%, 40%, 60%, 80% { -moz-transform: scale(1.1); transform: scale(1.1); }
  50%, 70% { -moz-transform: scale(1.05); transform: scale(1.05); }
}

@-o-keyframes heartBeat {
  0%, 100% { -o-transform: scale(1); transform: scale(1); }
  10%, 30% { -o-transform: scale(0.9); transform: scale(0.9); }
  20%, 40%, 60%, 80% { -o-transform: scale(1.1); transform: scale(1.1); }
  50%, 70% { -o-transform: scale(1.05); transform: scale(1.05); }
}

@keyframes heartBeat {
  0%, 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
  10%, 30% { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); }
  20%, 40%, 60%, 80% { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); }
  50%, 70% { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); }
}

.favorite-btn.active {
  -webkit-animation: heartBeat 0.8s ease;
  -moz-animation: heartBeat 0.8s ease;
  -o-animation: heartBeat 0.8s ease;
  animation: heartBeat 0.8s ease;
}

/* Efecto shimmer para skeletons */
@-webkit-keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

@-moz-keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

@-o-keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-gray-100) 0%,
    var(--color-gray-200) 20%,
    var(--color-gray-100) 40%,
    var(--color-gray-100) 100%
  );
  background-size: 1000px 100%;
  -webkit-animation: shimmer 2s infinite linear;
  -moz-animation: shimmer 2s infinite linear;
  -o-animation: shimmer 2s infinite linear;
  animation: shimmer 2s infinite linear;
}

/* Pulse suave para badges */
@-webkit-keyframes badgePulse {
  0%, 100% {
    box-shadow: 0 4px 12px rgba(232, 93, 74, 0.3);
  }
  50% {
    box-shadow: 0 4px 20px rgba(232, 93, 74, 0.5);
  }
}

@-moz-keyframes badgePulse {
  0%, 100% {
    box-shadow: 0 4px 12px rgba(232, 93, 74, 0.3);
  }
  50% {
    box-shadow: 0 4px 20px rgba(232, 93, 74, 0.5);
  }
}

@-o-keyframes badgePulse {
  0%, 100% {
    box-shadow: 0 4px 12px rgba(232, 93, 74, 0.3);
  }
  50% {
    box-shadow: 0 4px 20px rgba(232, 93, 74, 0.5);
  }
}

@keyframes badgePulse {
  0%, 100% {
    box-shadow: 0 4px 12px rgba(232, 93, 74, 0.3);
  }
  50% {
    box-shadow: 0 4px 20px rgba(232, 93, 74, 0.5);
  }
}

.article-card-badge {
  -webkit-animation: badgePulse 3s ease-in-out infinite;
  -moz-animation: badgePulse 3s ease-in-out infinite;
  -o-animation: badgePulse 3s ease-in-out infinite;
  animation: badgePulse 3s ease-in-out infinite;
}

/* Bounce suave para iconos */
@-webkit-keyframes iconBounce {
  0%, 100% { -webkit-transform: translateY(0); transform: translateY(0); }
  50% { -webkit-transform: translateY(-5px); transform: translateY(-5px); }
}

@-moz-keyframes iconBounce {
  0%, 100% { -moz-transform: translateY(0); transform: translateY(0); }
  50% { -moz-transform: translateY(-5px); transform: translateY(-5px); }
}

@-o-keyframes iconBounce {
  0%, 100% { -o-transform: translateY(0); transform: translateY(0); }
  50% { -o-transform: translateY(-5px); transform: translateY(-5px); }
}

@keyframes iconBounce {
  0%, 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); }
  50% { -webkit-transform: translateY(-5px); -moz-transform: translateY(-5px); -ms-transform: translateY(-5px); -o-transform: translateY(-5px); transform: translateY(-5px); }
}

.navbar-link:hover i {
  -webkit-animation: iconBounce 0.6s ease;
  -moz-animation: iconBounce 0.6s ease;
  -o-animation: iconBounce 0.6s ease;
  animation: iconBounce 0.6s ease;
}

/* Rotación suave para el tema toggle */
.theme-toggle i {
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-transition: -moz-transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -ms-transition: -ms-transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -o-transition: -o-transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.theme-toggle:hover i {
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
}

/* Efecto de typing para breadcrumbs */
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

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

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

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    -moz-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    -o-transform: translateX(-20px);
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
}

.breadcrumb-link,
.breadcrumb-separator,
.breadcrumb-current {
  -webkit-animation: fadeInLeft 0.4s ease-out backwards;
  -moz-animation: fadeInLeft 0.4s ease-out backwards;
  -o-animation: fadeInLeft 0.4s ease-out backwards;
  animation: fadeInLeft 0.4s ease-out backwards;
}

.breadcrumb-link:nth-child(1) { animation-delay: 0s; }
.breadcrumb-separator:nth-child(2) { animation-delay: 0.1s; }
.breadcrumb-link:nth-child(3) { animation-delay: 0.2s; }
.breadcrumb-separator:nth-child(4) { animation-delay: 0.3s; }
.breadcrumb-link:nth-child(5) { animation-delay: 0.4s; }
.breadcrumb-separator:nth-child(6) { animation-delay: 0.5s; }
.breadcrumb-current:nth-child(7) { animation-delay: 0.6s; }

/* Efecto parallax suave en el hero */
.article-hero-overlay {
  -webkit-transition: -webkit-transform 0.3s ease-out;
  -moz-transition: -moz-transform 0.3s ease-out;
  -ms-transition: -ms-transform 0.3s ease-out;
  -o-transition: -o-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
}

/* Efecto de glow en botones primary */
@-webkit-keyframes buttonGlow {
  0%, 100% {
    box-shadow: 0 4px 16px rgba(232, 93, 74, 0.3);
  }
  50% {
    box-shadow: 0 6px 24px rgba(232, 93, 74, 0.5);
  }
}

@-moz-keyframes buttonGlow {
  0%, 100% {
    box-shadow: 0 4px 16px rgba(232, 93, 74, 0.3);
  }
  50% {
    box-shadow: 0 6px 24px rgba(232, 93, 74, 0.5);
  }
}

@-o-keyframes buttonGlow {
  0%, 100% {
    box-shadow: 0 4px 16px rgba(232, 93, 74, 0.3);
  }
  50% {
    box-shadow: 0 6px 24px rgba(232, 93, 74, 0.5);
  }
}

@keyframes buttonGlow {
  0%, 100% {
    box-shadow: 0 4px 16px rgba(232, 93, 74, 0.3);
  }
  50% {
    box-shadow: 0 6px 24px rgba(232, 93, 74, 0.5);
  }
}

.btn-primary:hover {
  -webkit-animation: buttonGlow 2s ease-in-out infinite;
  -moz-animation: buttonGlow 2s ease-in-out infinite;
  -o-animation: buttonGlow 2s ease-in-out infinite;
  animation: buttonGlow 2s ease-in-out infinite;
}

/* Smooth scroll indicator */
@-webkit-keyframes scrollDown {
  0%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 0.7;
  }
  50% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
    opacity: 1;
  }
}

@-moz-keyframes scrollDown {
  0%, 100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
    opacity: 0.7;
  }
  50% {
    -moz-transform: translateY(10px);
    transform: translateY(10px);
    opacity: 1;
  }
}

@-o-keyframes scrollDown {
  0%, 100% {
    -o-transform: translateY(0);
    transform: translateY(0);
    opacity: 0.7;
  }
  50% {
    -o-transform: translateY(10px);
    transform: translateY(10px);
    opacity: 1;
  }
}

@keyframes scrollDown {
  0%, 100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    opacity: 0.7;
  }
  50% {
    -webkit-transform: translateY(10px);
    -moz-transform: translateY(10px);
    -ms-transform: translateY(10px);
    -o-transform: translateY(10px);
    transform: translateY(10px);
    opacity: 1;
  }
}

/* Efecto de reveal para el footer */
.footer {
  -webkit-animation: fadeInUp 0.8s ease-out;
  -moz-animation: fadeInUp 0.8s ease-out;
  -o-animation: fadeInUp 0.8s ease-out;
  animation: fadeInUp 0.8s ease-out;
}

/* Transición suave para el back to top */
.back-to-top {
  -webkit-transform: translateY(100px) scale(0);
  -moz-transform: translateY(100px) scale(0);
  -ms-transform: translateY(100px) scale(0);
  -o-transform: translateY(100px) scale(0);
  transform: translateY(100px) scale(0);
  -webkit-transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -ms-transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -o-transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.back-to-top.visible {
  -webkit-transform: translateY(0) scale(1);
  -moz-transform: translateY(0) scale(1);
  -ms-transform: translateY(0) scale(1);
  -o-transform: translateY(0) scale(1);
  transform: translateY(0) scale(1);
}

/* Hover effect para social icons */
.social-icon {
  position: relative;
  overflow: hidden;
}

.social-icon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: width 0.5s ease, height 0.5s ease;
  -moz-transition: width 0.5s ease, height 0.5s ease;
  -ms-transition: width 0.5s ease, height 0.5s ease;
  -o-transition: width 0.5s ease, height 0.5s ease;
  transition: width 0.5s ease, height 0.5s ease;
}

.social-icon:hover::before {
  width: 100%;
  height: 100%;
}

/* Progress bar glow effect */
.reading-progress-bar {
  box-shadow: 0 0 10px rgba(232, 93, 74, 0.5);
  -webkit-transition: box-shadow 0.3s ease;
  -moz-transition: box-shadow 0.3s ease;
  -ms-transition: box-shadow 0.3s ease;
  -o-transition: box-shadow 0.3s ease;
  transition: box-shadow 0.3s ease;
}

.reading-progress-bar:hover {
  box-shadow: 0 0 20px rgba(232, 93, 74, 0.8);
}

/* Stagger animation para la newsletter */
.newsletter-box h3,
.newsletter-box p,
.newsletter-form {
  -webkit-animation: fadeInUp 0.8s ease-out backwards;
  -moz-animation: fadeInUp 0.8s ease-out backwards;
  -o-animation: fadeInUp 0.8s ease-out backwards;
  animation: fadeInUp 0.8s ease-out backwards;
}

.newsletter-box h3 { -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; }
.newsletter-box p { -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; -o-animation-delay: 0.1s; animation-delay: 0.1s; }
.newsletter-form { -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; -o-animation-delay: 0.2s; animation-delay: 0.2s; }

/* Efecto de typing para el input de búsqueda */
.search-input:focus {
  -webkit-animation: inputFocus 0.3s ease;
  -moz-animation: inputFocus 0.3s ease;
  -o-animation: inputFocus 0.3s ease;
  animation: inputFocus 0.3s ease;
}

@-webkit-keyframes inputFocus {
  0% {
    box-shadow: 0 0 0 0 rgba(232, 93, 74, 0.4);
  }
  100% {
    box-shadow: 0 0 0 3px rgba(232, 93, 74, 0.1);
  }
}

@-moz-keyframes inputFocus {
  0% {
    box-shadow: 0 0 0 0 rgba(232, 93, 74, 0.4);
  }
  100% {
    box-shadow: 0 0 0 3px rgba(232, 93, 74, 0.1);
  }
}

@-o-keyframes inputFocus {
  0% {
    box-shadow: 0 0 0 0 rgba(232, 93, 74, 0.4);
  }
  100% {
    box-shadow: 0 0 0 3px rgba(232, 93, 74, 0.1);
  }
}

@keyframes inputFocus {
  0% {
    box-shadow: 0 0 0 0 rgba(232, 93, 74, 0.4);
  }
  100% {
    box-shadow: 0 0 0 3px rgba(232, 93, 74, 0.1);
  }
}

/* Hover effect mejorado para category cards */
.category-card {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -ms-perspective: 1000px;
  perspective: 1000px;
}

.category-card:hover {
  -webkit-animation: cardFloat 0.6s ease-in-out;
  -moz-animation: cardFloat 0.6s ease-in-out;
  -o-animation: cardFloat 0.6s ease-in-out;
  animation: cardFloat 0.6s ease-in-out;
}

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

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

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

@keyframes cardFloat {
  0%, 100% {
    -webkit-transform: translateY(-8px);
    -moz-transform: translateY(-8px);
    -ms-transform: translateY(-8px);
    -o-transform: translateY(-8px);
    transform: translateY(-8px);
  }
  50% {
    -webkit-transform: translateY(-12px);
    -moz-transform: translateY(-12px);
    -ms-transform: translateY(-12px);
    -o-transform: translateY(-12px);
    transform: translateY(-12px);
  }
}

/* Efecto de ondas en clicks */
@-webkit-keyframes ripple {
  from {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  to {
    -webkit-transform: scale(4);
    transform: scale(4);
    opacity: 0;
  }
}

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

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

@keyframes ripple {
  from {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  to {
    -webkit-transform: scale(4);
    -moz-transform: scale(4);
    -ms-transform: scale(4);
    -o-transform: scale(4);
    transform: scale(4);
    opacity: 0;
  }
}

.btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  -webkit-transform: translate(-50%, -50%) scale(0);
  -moz-transform: translate(-50%, -50%) scale(0);
  -ms-transform: translate(-50%, -50%) scale(0);
  -o-transform: translate(-50%, -50%) scale(0);
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
}

.btn:active::after {
  -webkit-animation: ripple 0.6s ease-out;
  -moz-animation: ripple 0.6s ease-out;
  -o-animation: ripple 0.6s ease-out;
  animation: ripple 0.6s ease-out;
}

/* Mejora del dropdown menu */
.dropdown-menu {
  -webkit-transform-origin: top;
  -moz-transform-origin: top;
  -ms-transform-origin: top;
  -o-transform-origin: top;
  transform-origin: top;
}

.navbar-dropdown:hover .dropdown-menu {
  -webkit-animation: dropdownSlide 0.3s ease-out;
  -moz-animation: dropdownSlide 0.3s ease-out;
  -o-animation: dropdownSlide 0.3s ease-out;
  animation: dropdownSlide 0.3s ease-out;
}

@-webkit-keyframes dropdownSlide {
  from {
    -webkit-transform: translateY(-10px) scaleY(0.8);
    transform: translateY(-10px) scaleY(0.8);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(0) scaleY(1);
    transform: translateY(0) scaleY(1);
    opacity: 1;
  }
}

@-moz-keyframes dropdownSlide {
  from {
    -moz-transform: translateY(-10px) scaleY(0.8);
    transform: translateY(-10px) scaleY(0.8);
    opacity: 0;
  }
  to {
    -moz-transform: translateY(0) scaleY(1);
    transform: translateY(0) scaleY(1);
    opacity: 1;
  }
}

@-o-keyframes dropdownSlide {
  from {
    -o-transform: translateY(-10px) scaleY(0.8);
    transform: translateY(-10px) scaleY(0.8);
    opacity: 0;
  }
  to {
    -o-transform: translateY(0) scaleY(1);
    transform: translateY(0) scaleY(1);
    opacity: 1;
  }
}

@keyframes dropdownSlide {
  from {
    -webkit-transform: translateY(-10px) scaleY(0.8);
    -moz-transform: translateY(-10px) scaleY(0.8);
    -ms-transform: translateY(-10px) scaleY(0.8);
    -o-transform: translateY(-10px) scaleY(0.8);
    transform: translateY(-10px) scaleY(0.8);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(0) scaleY(1);
    -moz-transform: translateY(0) scaleY(1);
    -ms-transform: translateY(0) scaleY(1);
    -o-transform: translateY(0) scaleY(1);
    transform: translateY(0) scaleY(1);
    opacity: 1;
  }
}

/* Text gradient animation para títulos especiales */
@-webkit-keyframes gradientShift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@-moz-keyframes gradientShift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@-o-keyframes gradientShift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes gradientShift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.gradient-text {
  background: linear-gradient(
    90deg,
    var(--color-accent-primary),
    var(--color-accent-secondary),
    var(--color-accent-tertiary),
    var(--color-accent-primary)
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -ms-background-clip: text;
  -o-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
  -webkit-animation: gradientShift 6s ease infinite;
  -moz-animation: gradientShift 6s ease infinite;
  -o-animation: gradientShift 6s ease infinite;
  animation: gradientShift 6s ease infinite;
}