/* ================================================================
   ANIMATIONS.CSS — Sistema de Animaciones Pro v2.0
   Scroll reveal, hover effects, parallax, floating, typing.
   ON por defecto. Body con clase .no-animations desactiva todo.
   Respeta prefers-reduced-motion automáticamente.
================================================================ */

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-up, .reveal-down, .reveal-left, .reveal-right,
  .reveal-zoom, .reveal-zoom-out, .reveal-flip,
  .section-block[data-animate],
  .hover-lift, .hover-glow, .hover-shine, .hover-border, .hover-scale, .hover-tilt,
  .animate-float, .animate-pulse, .animate-gradient {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .hover-shine::after { display: none !important; }
}

/* ================================================================
   SCROLL REVEAL SYSTEM
   Clases: .reveal + variante de dirección
   Activado: .is-visible (agregado via JS con IntersectionObserver)
================================================================ */
.reveal {
  opacity: 0;
  transition: opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1 !important;
  transform: none !important;
}

/* Variantes de entrada — .reveal-* para elementos individuales */
.reveal-up    { transform: translateY(52px); }
.reveal-down  { transform: translateY(-32px); }
.reveal-left  { transform: translateX(-64px); }
.reveal-right { transform: translateX(64px); }
.reveal-zoom  { transform: scale(0.86); }
.reveal-zoom-out { transform: scale(1.14); }
.reveal-flip  { transform: perspective(800px) rotateX(18deg) translateY(30px); transform-origin: top center; }

/* Section-block transforms via data-animate attribute (no JS class needed) */
.section-block[data-animate="fade-up"]    { transform: translateY(52px); }
.section-block[data-animate="fade-down"]  { transform: translateY(-32px); }
.section-block[data-animate="fade-left"]  { transform: translateX(-64px); }
.section-block[data-animate="fade-right"] { transform: translateX(64px); }
.section-block[data-animate="zoom"]       { transform: scale(0.86); }
.section-block[data-animate="zoom-out"]   { transform: scale(1.14); }
.section-block[data-animate="flip"]       { transform: perspective(800px) rotateX(18deg) translateY(30px); transform-origin: top center; }
.section-block[data-animate="fade"]       { /* only opacity */ }

/* ================================================================
   STAGGER CHILDREN
   El padre lleva .stagger-children, los hijos tienen .reveal
   Los delays se incrementan automáticamente por posición
================================================================ */
.stagger-children > .reveal:nth-child(1)  { transition-delay: 0ms; }
.stagger-children > .reveal:nth-child(2)  { transition-delay: 90ms; }
.stagger-children > .reveal:nth-child(3)  { transition-delay: 180ms; }
.stagger-children > .reveal:nth-child(4)  { transition-delay: 270ms; }
.stagger-children > .reveal:nth-child(5)  { transition-delay: 360ms; }
.stagger-children > .reveal:nth-child(6)  { transition-delay: 450ms; }
.stagger-children > .reveal:nth-child(7)  { transition-delay: 540ms; }
.stagger-children > .reveal:nth-child(8)  { transition-delay: 630ms; }
.stagger-children > .reveal:nth-child(n+9) { transition-delay: 700ms; }

/* ================================================================
   SECTION BLOCK ANIMATIONS
   .section-block[data-animate] se anima al entrar al viewport.
   JS agrega .reveal + .reveal-{direction} + .is-visible
   CSS maneja el estado inicial para evitar flash.
================================================================ */
.section-block[data-animate] {
  opacity: 0;
  transition: opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.section-block[data-animate].is-visible {
  opacity: 1 !important;
  transform: none !important;
}
/* Fallback: si JS no corrió (no-js / SSR) */
.no-js .section-block[data-animate] {
  opacity: 1;
  transform: none;
}

/* Animación de header de sección (título + subtítulo) */
.section-block[data-animate] .sec-title-anim {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease 0.1s, transform 0.6s ease 0.1s;
}
.section-block[data-animate] .sec-subtitle-anim {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease 0.22s, transform 0.6s ease 0.22s;
}
.section-block[data-animate].is-visible .sec-title-anim,
.section-block[data-animate].is-visible .sec-subtitle-anim {
  opacity: 1;
  transform: none;
}

/* ================================================================
   HOVER EFFECTS — Cards, products, feature items
================================================================ */

/* Lift: sube con sombra profunda */
.hover-lift {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease !important;
}
.hover-lift:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.16) !important;
}

/* Glow: resplandor del color primario */
.hover-glow {
  transition: box-shadow 0.3s ease, border-color 0.3s ease !important;
}
.hover-glow:hover {
  box-shadow: 0 0 0 2px var(--primary-color, #6366f1),
              0 8px 40px rgba(var(--primary-rgb, 99 102 241) / 0.28) !important;
}

/* Shine: destello que cruza la tarjeta */
.hover-shine {
  position: relative;
  overflow: hidden;
}
.hover-shine::after {
  content: '';
  position: absolute;
  inset: 0;
  left: -120%;
  width: 60%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.22) 50%, transparent 100%);
  transform: skewX(-15deg);
  transition: none;
  pointer-events: none;
}
.hover-shine:hover::after {
  animation: shine-sweep 0.55s ease forwards;
}
@keyframes shine-sweep {
  0%   { left: -120%; }
  100% { left: 150%; }
}

/* Border: borde color primario al hover */
.hover-border {
  transition: border-color 0.28s ease, box-shadow 0.28s ease !important;
}
.hover-border:hover {
  border-color: var(--primary-color, #6366f1) !important;
  box-shadow: 0 0 0 1px var(--primary-color, #6366f1) !important;
}

/* Scale: escala sutil */
.hover-scale {
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.hover-scale:hover {
  transform: scale(1.04) !important;
}

/* Tilt: aplicado por JS (no CSS) */
.hover-tilt {
  transition: transform 0.4s ease;
  transform-style: preserve-3d;
}

/* ================================================================
   PRODUCT CARDS — hover effects
================================================================ */
.product-card {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease !important;
}
.product-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.13) !important;
}
.product-card .product-image img {
  transition: transform 0.45s ease !important;
}
.product-card:hover .product-image img {
  transform: scale(1.06) !important;
}

/* Feature cards */
.feature-card {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease,
              border-color 0.3s ease !important;
}
.feature-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12) !important;
  border-color: var(--primary-color, #6366f1) !important;
}

/* Review / testimonial cards */
.review-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.review-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1) !important;
}

/* ================================================================
   ICON BOX hover — para secciones de services, features
================================================================ */
.icon-box {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.3s ease !important;
}
.feature-card:hover .icon-box,
.service-card:hover .icon-box {
  transform: scale(1.12) rotate(-4deg) !important;
}

/* ================================================================
   CONTINUOUS ANIMATIONS (no dependen de scroll)
================================================================ */

/* Float: objetos decorativos */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-14px); }
}
.animate-float {
  animation: float 5s ease-in-out infinite;
}

/* Pulse: indicadores, botones de atención */
@keyframes pulse-glow {
  0%   { box-shadow: 0 0 0 0 var(--primary-color, #6366f1); }
  70%  { box-shadow: 0 0 0 14px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.animate-pulse {
  animation: pulse-glow 2.2s ease infinite;
}

/* Gradient shift: fondos animados */
@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.animate-gradient {
  background-size: 200% 200%;
  animation: gradient-shift 7s ease infinite;
}

/* Spin: loaders, decorativos */
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.animate-spin {
  animation: spin-slow 8s linear infinite;
}

/* ================================================================
   TYPING EFFECT
   El JS escribe el texto, el CSS añade cursor parpadeante
================================================================ */
@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
.typing-cursor::after {
  content: '|';
  animation: blink-cursor 0.9s step-end infinite;
  margin-left: 2px;
  font-weight: 300;
}

/* ================================================================
   COUNT-UP
================================================================ */
.count-up {
  font-variant-numeric: tabular-nums;
  display: inline-block;
}

/* ================================================================
   SECTION-BLOCK CSS VAR SYSTEM
   Las variables --sec-* se aplican al contenido de la sección.
   Solo se aplican cuando están explícitamente definidas en el style.
================================================================ */
.section-block {
  /* Variables por defecto (se heredan si no se definen por sección) */
  --sec-bg: transparent;
  --sec-text: inherit;
  --sec-max-width: 1200px;
  --sec-pt: var(--section-padding, 80px);
  --sec-pb: var(--section-padding, 80px);
}

/* Solo aplicar background cuando está explícitamente configurado */
.section-block[style*="--sec-bg"] > section,
.section-block[style*="--sec-bg"] > .section {
  background-color: var(--sec-bg) !important;
}

/* Padding override */
.section-block[style*="--sec-pt"] > section,
.section-block[style*="--sec-pt"] > .section {
  padding-top: var(--sec-pt) !important;
}
.section-block[style*="--sec-pb"] > section,
.section-block[style*="--sec-pb"] > .section {
  padding-bottom: var(--sec-pb) !important;
}

/* Text color override */
.section-block[style*="--sec-text"] > section,
.section-block[style*="--sec-text"] > .section {
  color: var(--sec-text) !important;
}

/* Max width override (sobre el .container interno) */
.section-block[style*="--sec-max-width"] > section .container,
.section-block[style*="--sec-max-width"] > .section .container {
  max-width: var(--sec-max-width) !important;
}

/* ================================================================
   DISABLE ANIMATIONS OVERRIDE
   Agrega .no-animations al body para desactivar todo
================================================================ */
body.no-animations .reveal,
body.no-animations .reveal-up,
body.no-animations .reveal-down,
body.no-animations .reveal-left,
body.no-animations .reveal-right,
body.no-animations .reveal-zoom,
body.no-animations .reveal-flip,
body.no-animations .section-block[data-animate] .sec-title-anim,
body.no-animations .section-block[data-animate] .sec-subtitle-anim {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

body.no-animations .hover-lift:hover,
body.no-animations .hover-scale:hover,
body.no-animations .product-card:hover,
body.no-animations .feature-card:hover,
body.no-animations .review-card:hover {
  transform: none !important;
  box-shadow: inherit !important;
}

body.no-animations .hover-shine::after,
body.no-animations .hover-glow:hover,
body.no-animations .hover-border:hover {
  animation: none !important;
  box-shadow: none !important;
  border-color: inherit !important;
}

body.no-animations .animate-float,
body.no-animations .animate-pulse,
body.no-animations .animate-gradient,
body.no-animations .animate-spin {
  animation: none !important;
}

/* ================================================================
   LEGACY SUPPORT — viejo sistema .section.visible
   Secciones sin section-block usan el sistema anterior
================================================================ */
/* (El JS de animations.js mantiene backward-compat) */

/* ================================================================
   NEW PRO SECTIONS — animaciones específicas
================================================================ */

/* Timeline */
.timeline-item {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.timeline-item.is-visible {
  opacity: 1;
  transform: none;
}

/* Pricing cards hover */
.pricing-card {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.35s ease !important;
}
.pricing-card:hover {
  transform: translateY(-10px) !important;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.18) !important;
}
.pricing-card.featured {
  transform: translateY(-8px);
}
.pricing-card.featured:hover {
  transform: translateY(-16px) !important;
}

/* Team cards */
.team-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.team-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.14) !important;
}
.team-card .team-overlay {
  opacity: 0;
  transition: opacity 0.3s ease !important;
}
.team-card:hover .team-overlay {
  opacity: 1 !important;
}

/* Service cards */
.service-card {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease,
              border-color 0.3s ease !important;
}
.service-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.14) !important;
  border-color: var(--primary-color, #6366f1) !important;
}
.service-card .service-number {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              color 0.3s ease !important;
}
.service-card:hover .service-number {
  transform: scale(1.2) !important;
  color: var(--primary-color, #6366f1) !important;
}

/* Masonry gallery */
.masonry-item {
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  overflow: hidden;
}
.masonry-item img {
  transition: transform 0.5s ease !important;
}
.masonry-item:hover img {
  transform: scale(1.06) !important;
}
.masonry-item:hover {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2) !important;
}

/* Hero split */
.hero-split-content {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s ease 0.2s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}
.hero-split-image-wrap {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s ease 0.35s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.35s;
}
.section-block.is-visible .hero-split-content,
.section-block.is-visible .hero-split-image-wrap {
  opacity: 1;
  transform: none;
}

/* Split content existing section */
.split-section .split-content {
  transition: opacity 0.7s ease 0.2s, transform 0.7s ease 0.2s;
}
.split-section .split-image {
  transition: opacity 0.7s ease 0.1s, transform 0.7s ease 0.1s;
}
.section-block[data-animate] .split-section .split-content {
  opacity: 0;
  transform: translateX(40px);
}
.section-block[data-animate] .split-section.reverse .split-content {
  transform: translateX(-40px);
}
.section-block[data-animate] .split-section .split-image {
  opacity: 0;
  transform: translateX(-40px);
}
.section-block[data-animate] .split-section.reverse .split-image {
  transform: translateX(40px);
}
.section-block[data-animate].is-visible .split-section .split-content,
.section-block[data-animate].is-visible .split-section .split-image {
  opacity: 1;
  transform: none;
}

/* ================================================================
   HERO PROGRESSIVE IMAGE LOADING (blur-up)
   El .hero-bg empieza difuminado; JS quita .hero-bg-loading
   cuando la imagen termina de cargar → transición suave
================================================================ */
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -4;
  transition: filter 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-bg.hero-bg-loading {
  filter: blur(14px);
  transform: scale(1.06); /* oculta bordes borrosos */
}

/* Carousel slides also support blur-up when .hero-bg-loading class is added */
.carousel-slide.hero-bg-loading {
  filter: blur(14px);
  transform: scale(1.06);
  transition: filter 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}