@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;
  }

  /* Pulso dorado constante para los iconos de redes sociales del Hero */
  @keyframes pulse-gold {
    0% {
      box-shadow: 0 0 0 0 rgba(204, 145, 80, 0.6);
    }
    70% {
      box-shadow: 0 0 0 12px rgba(204, 145, 80, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(204, 145, 80, 0);
    }
  }

  /* Efectos Hover (Desktop) */
  @media (hover: hover) {
    /* Efecto "shine" (destello) al pasar el cursor, ej. logo PRESERVIA */
    .shine-hover::before {
      content: '';
      position: absolute;
      top: 0;
      left: -150%;
      width: 60%;
      height: 100%;
      background: linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.75) 50%, rgba(255,255,255,0) 100%);
      transform: skewX(-20deg);
      pointer-events: none;
    }

    .shine-hover:hover::before {
      left: 150%;
      transition: left 0.9s ease;
    }

    /* 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,
    .hero-social-links .social-link {
      animation: none !important;
    }
  }
}