/* ================================
   ZOROCHAQUI - SCROLL ANIMATIONS
   Sistema completo de animaciones
   ================================ */

/* ================================
   ANIMACIONES BASE AL SCROLL
   ================================ */

/* Elementos que se animan al scroll (genérico) */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Elementos que se animan al cargar (hero) */
.animate-on-load {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}

.animate-on-load.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ================================
   VARIACIONES DE DIRECCIÓN
   ================================ */

/* Desde la izquierda */
.animate-from-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-from-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Desde la derecha */
.animate-from-right {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-from-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Desde abajo (más pronunciado) */
.animate-from-bottom-large {
  opacity: 0;
  transform: translateY(100px);
  transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1),
              transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-from-bottom-large.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Scale (zoom) */
.animate-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Fade simple */
.animate-fade {
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-fade.is-visible {
  opacity: 1;
}

/* Rotate suave */
.animate-rotate {
  opacity: 0;
  transform: rotate(-3deg) scale(0.96);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-rotate.is-visible {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* ================================
   DELAYS PERSONALIZADOS
   ================================ */

.animate-delay-1 { transition-delay: 0.1s !important; }
.animate-delay-2 { transition-delay: 0.2s !important; }
.animate-delay-3 { transition-delay: 0.3s !important; }
.animate-delay-4 { transition-delay: 0.4s !important; }
.animate-delay-5 { transition-delay: 0.5s !important; }
.animate-delay-6 { transition-delay: 0.6s !important; }

/* ================================
   ANIMACIONES PARA CLASES EXISTENTES
   ================================ */

/* Títulos con .title-anim */
.title-anim {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.title-anim.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Texto con .text-anim */
.text-anim {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0.2s;
}

.text-anim.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Animación de personajes */
.animation__char_come {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1),
              transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.animation__char_come.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Animación de personajes larga */
.animation__char_come_long {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1),
              transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.animation__char_come_long.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Animación de palabras */
.animation__word_come {
  opacity: 0;
  transform: translateY(45px);
  transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1),
              transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.animation__word_come.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Fade bottom (usado en brands) */
.fade_bottom {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade_bottom.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Service animation */
.service_animation {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.service_animation.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Animation from bottom */
.animation_from_bottom {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.animation_from_bottom.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Animation from top */
.animation_from_top {
  opacity: 0;
  transform: translateY(-50px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.animation_from_top.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Animation image zoom */
.animation_image_zoom {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.animation_image_zoom.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Sub title animation top */
.sub-title-anim-top {
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.sub-title-anim-top.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Animation service page */
.animation__service_page {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.animation__service_page.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Counter animation */
.counter_animation {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.counter_animation.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Counter anim (items individuales) */
.counter__anim {
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.counter__anim.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ================================
   ANIMACIONES ESPECÍFICAS DE PÁGINAS
   ================================ */

/* CONTACTO - Trust badges */
.trust-badges .badge-item {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.trust-badges.is-visible .badge-item:nth-child(1) { 
  transition-delay: 0.1s;
}
.trust-badges.is-visible .badge-item:nth-child(2) { 
  transition-delay: 0.2s;
}
.trust-badges.is-visible .badge-item:nth-child(3) { 
  transition-delay: 0.3s;
}

.trust-badges.is-visible .badge-item {
  opacity: 1;
  transform: translateY(0);
}

/* CONTACTO - Client logos */
.client-logos .logo-item {
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.client-logos.is-visible .logo-item:nth-child(1) { transition-delay: 0.05s; }
.client-logos.is-visible .logo-item:nth-child(2) { transition-delay: 0.1s; }
.client-logos.is-visible .logo-item:nth-child(3) { transition-delay: 0.15s; }
.client-logos.is-visible .logo-item:nth-child(4) { transition-delay: 0.2s; }
.client-logos.is-visible .logo-item:nth-child(5) { transition-delay: 0.25s; }
.client-logos.is-visible .logo-item:nth-child(6) { transition-delay: 0.3s; }

.client-logos.is-visible .logo-item {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* CONTACTO - Info cards */
.info-card .info-item {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.info-card.is-visible .info-item:nth-child(1) { transition-delay: 0.1s; }
.info-card.is-visible .info-item:nth-child(2) { transition-delay: 0.2s; }
.info-card.is-visible .info-item:nth-child(3) { transition-delay: 0.3s; }
.info-card.is-visible .info-item:nth-child(4) { transition-delay: 0.4s; }

.info-card.is-visible .info-item {
  opacity: 1;
  transform: translateX(0);
}

/* CONTACTO - Features */
.contact__features .feature-item {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.contact__features.is-visible .feature-item:nth-child(1) { transition-delay: 0.1s; }
.contact__features.is-visible .feature-item:nth-child(2) { transition-delay: 0.2s; }
.contact__features.is-visible .feature-item:nth-child(3) { transition-delay: 0.3s; }

.contact__features.is-visible .feature-item {
  opacity: 1;
  transform: translateX(0);
}

/* CONTACTO - Form inputs */
.contact__form input,
.contact__form select,
.contact__form textarea {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.contact__form.is-visible input,
.contact__form.is-visible select,
.contact__form.is-visible textarea {
  opacity: 1;
  transform: translateY(0);
}

/* EXPERIENCIA - Portfolio items */
.portfolio__item-6 {
  opacity: 0;
  transform: translateY(50px) scale(0.96);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.portfolio__item-6.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* SERVICIOS - Service items */
.service__item-6 {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.service__item-6.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* NOSOTROS - Team cards */
.team-card {
  opacity: 0;
  transform: translateY(40px) scale(0.96);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.team-card.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* INDEX - Brand items */
.brand__item-2,
.brand__item {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.brand__list-3.is-visible .brand__item-2:nth-child(1),
.brand__list.is-visible .brand__item:nth-child(1) { 
  transition-delay: 0.05s; 
}
.brand__list-3.is-visible .brand__item-2:nth-child(2),
.brand__list.is-visible .brand__item:nth-child(2) { 
  transition-delay: 0.1s; 
}
.brand__list-3.is-visible .brand__item-2:nth-child(3),
.brand__list.is-visible .brand__item:nth-child(3) { 
  transition-delay: 0.15s; 
}
.brand__list-3.is-visible .brand__item-2:nth-child(4),
.brand__list.is-visible .brand__item:nth-child(4) { 
  transition-delay: 0.2s; 
}
.brand__list-3.is-visible .brand__item-2:nth-child(5),
.brand__list.is-visible .brand__item:nth-child(5) { 
  transition-delay: 0.25s; 
}
.brand__list-3.is-visible .brand__item-2:nth-child(6),
.brand__list.is-visible .brand__item:nth-child(6) { 
  transition-delay: 0.3s; 
}

.brand__list-3.is-visible .brand__item-2,
.brand__list.is-visible .brand__item {
  opacity: 1;
  transform: translateY(0);
}

/* ================================
   ANIMACIONES DE GRUPOS
   ================================ */

/* Grupos con animate-group */
.animate-group .animate-item {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-group.is-visible .animate-item:nth-child(1) { transition-delay: 0.1s; }
.animate-group.is-visible .animate-item:nth-child(2) { transition-delay: 0.2s; }
.animate-group.is-visible .animate-item:nth-child(3) { transition-delay: 0.3s; }
.animate-group.is-visible .animate-item:nth-child(4) { transition-delay: 0.4s; }
.animate-group.is-visible .animate-item:nth-child(5) { transition-delay: 0.5s; }

.animate-group.is-visible .animate-item {
  opacity: 1;
  transform: translateY(0);
}

/* ================================
   ELEMENTOS ESPECIALES
   ================================ */

/* Imágenes */
img.animate-on-scroll {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

img.animate-on-scroll.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Swiper containers */
.swiper.animate-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.swiper.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Sec title wrapper */
.sec-title-wrapper.animate-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.sec-title-wrapper.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ================================
   ANIMACIÓN DE LÍNEAS/SUBRAYADO
   ================================ */

.animate-underline {
  position: relative;
  display: inline-block;
}

.animate-underline::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, #1A89FF 0%, #00BA7F 100%);
  border-radius: 2px;
  transition: width 0.9s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0.3s;
}

.animate-underline.is-visible::after {
  width: 100%;
}

/* ================================
   CONTADORES ANIMADOS
   ================================ */

[data-counter] {
  font-variant-numeric: tabular-nums;
  transition: all 0.3s ease;
}

/* ================================
   BARRAS DE PROGRESO
   ================================ */

[data-progress] {
  width: 0%;
  transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: width;
}

/* ================================
   RESPONSIVE
   ================================ */

@media only screen and (max-width: 991px) {
  .animate-on-scroll,
  .animate-on-load {
    transform: translateY(35px);
  }
  
  .animate-from-left,
  .animate-from-right {
    transform: translateY(35px);
  }
  
  .animate-from-bottom-large {
    transform: translateY(60px);
  }
  
  .title-anim,
  .animation__char_come,
  .animation__word_come {
    transform: translateY(35px);
  }
}

@media only screen and (max-width: 767px) {
  .animate-on-scroll,
  .animate-on-load {
    transform: translateY(25px);
    transition-duration: 0.6s;
  }
  
  .animate-from-left,
  .animate-from-right {
    transform: translateY(25px);
    transition-duration: 0.6s;
  }
  
  .animate-from-bottom-large {
    transform: translateY(45px);
    transition-duration: 0.7s;
  }
  
  .animate-scale {
    transform: scale(0.96);
    transition-duration: 0.6s;
  }
  
  .title-anim,
  .animation__char_come,
  .animation__char_come_long,
  .animation__word_come {
    transform: translateY(30px);
    transition-duration: 0.7s;
  }
}

/* ================================
   REDUCED MOTION (ACCESIBILIDAD)
   ================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .animate-on-scroll,
  .animate-on-load,
  .animate-from-left,
  .animate-from-right,
  .animate-from-bottom-large,
  .animate-scale,
  .animate-fade,
  .animate-rotate,
  .title-anim,
  .text-anim,
  .animation__char_come,
  .animation__char_come_long,
  .animation__word_come,
  .fade_bottom,
  .service_animation,
  .animation_from_bottom,
  .animation_from_top,
  .animation_image_zoom {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

.reduced-motion .animate-on-scroll,
.reduced-motion .animate-on-load,
.reduced-motion .animate-from-left,
.reduced-motion .animate-from-right {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ================================
   OPTIMIZACIÓN DE PERFORMANCE
   ================================ */

.animate-on-scroll,
.animate-on-load,
.animate-from-left,
.animate-from-right,
.animate-from-bottom-large,
.animate-scale,
.title-anim,
.animation__char_come,
.animation__word_come {
  backface-visibility: hidden;
  perspective: 1000px;
  -webkit-font-smoothing: antialiased;
}

/* Limpiar will-change después de animar */
.animate-on-scroll.is-visible,
.animate-on-load.is-visible {
  will-change: auto;
}

/* ================================
   ESTADOS DE DEBUG (opcional)
   ================================ */

.debug-animations .animate-on-scroll:not(.is-visible) {
  outline: 2px dashed rgba(255, 0, 0, 0.5) !important;
}

.debug-animations .animate-on-scroll.is-visible {
  outline: 2px solid rgba(0, 255, 0, 0.5) !important;
}

.debug-animations .animate-on-load:not(.is-visible) {
  outline: 2px dashed rgba(255, 165, 0, 0.5) !important;
}

.debug-animations .animate-on-load.is-visible {
  outline: 2px solid rgba(0, 0, 255, 0.5) !important;
}