@layer utilities {
  /* Clases Base de Scroll Reveal */
  .reveal {
    opacity: 0;
    transition: opacity var(--transition-smooth), transform var(--transition-smooth);
    will-change: opacity, transform;
  }

  .reveal.fade-in-up {
    transform: translateY(20px);
  }

  .reveal.fade-in-left {
    transform: translateY(20px);
  }

  .reveal.fade-in-right {
    transform: translateY(20px);
  }

  @media (min-width: 992px) {
    .reveal.fade-in-left {
      transform: translateX(-30px);
    }

    .reveal.fade-in-right {
      transform: translateX(30px);
    }
  }

  /* Estado Activo disparado por IntersectionObserver en JS */
  .reveal.active {
    opacity: 1;
    transform: translate(0) scale(1);
  }

  /* Retardos de animación opcionales para listas */
  .reveal.delay-1 { transition-delay: 0.1s; }
  .reveal.delay-2 { transition-delay: 0.2s; }
  .reveal.delay-3 { transition-delay: 0.3s; }
  .reveal.delay-4 { transition-delay: 0.4s; }

  /* Animación pulsante suave para el distintivo "Atención 24 HRS" */
  @keyframes pulse-glow {
    0% {
      box-shadow: 0 0 0 0 rgba(192, 113, 51, 0.5);
    }
    70% {
      box-shadow: 0 0 0 10px rgba(192, 113, 51, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(192, 113, 51, 0);
    }
  }

  .pulse-badge {
    animation: pulse-glow 2s infinite;
  }

  /* Efectos Hover (Desktop) */
  @media (hover: hover) {
    /* Hover Botones */
    .hover-btn {
      transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), background-color var(--transition-smooth), border-color var(--transition-smooth), color var(--transition-smooth);
    }

    .hover-btn:hover:not(:disabled) {
      transform: scale(1.03);
      box-shadow: 0 8px 20px rgba(192, 113, 51, 0.3);
    }

    /* Hover Tarjetas y Calendarios */
    .hover-card {
      transition: transform var(--transition-smooth), border-color var(--transition-smooth), box-shadow var(--transition-smooth);
    }

    .hover-card:hover {
      transform: translateY(-5px);
      border-color: var(--ocre-secondary) !important;
      box-shadow: var(--shadow-hover);
    }

    .hover-card-orange {
      transition: transform var(--transition-smooth), border-color var(--transition-smooth), box-shadow var(--transition-smooth);
    }

    .hover-card-orange:hover {
      transform: translateY(-5px);
      border-color: var(--orange-accent) !important;
      box-shadow: var(--shadow-hover);
    }
    
    /* Hover para Enlaces de Redes Sociales */
    .social-link {
      transition: transform var(--transition-smooth), color var(--transition-smooth);
    }
    .social-link:hover {
      transform: translateY(-3px) scale(1.15);
      color: var(--orange-accent);
    }

    /* Efecto hover sobre imágenes en galería */
    .img-zoom-container {
      overflow: hidden;
    }
    .img-zoom {
      transition: transform var(--transition-smooth);
    }
    .img-zoom-container:hover .img-zoom {
      transform: scale(1.05);
    }
  }

  /* Soporte de accesibilidad para personas que prefieren no tener movimiento */
  @media (prefers-reduced-motion: reduce) {
    .reveal,
    .hover-btn,
    .hover-card,
    .hover-card-orange,
    .social-link,
    .img-zoom {
      transition: none !important;
      transform: none !important;
      animation: none !important;
      opacity: 1 !important;
    }
    
    .pulse-badge {
      animation: none !important;
    }
  }
}