/* ============================================
   Ginih — Brand (deep purple, banking, vibrant)
   ============================================ */
:root {
  --color-bg: #0c0a12;
  --color-bg-elevated: #12101a;
  --color-bg-card: #1a1624;
  --color-bg-card-soft: rgba(26, 22, 36, 0.8);
  /* Primary: vibrant purple gradient (from reference) */
  --color-accent: #a78bfa;
  --color-accent-strong: #7c3aed;
  --color-accent-dim: rgba(167, 139, 250, 0.2);
  --color-accent-glow: rgba(167, 139, 250, 0.4);
  /* Purple gradient stops */
  --color-purple: #7c3aed;
  --color-purple-light: #a78bfa;
  --color-purple-dim: rgba(124, 58, 237, 0.25);
  --color-indigo: #5b21b6;
  /* Soft blue for UI */
  --color-blue: #818cf8;
  --color-blue-dim: rgba(129, 140, 248, 0.15);
  /* Green for positive (e.g. growth) */
  --color-green: #4ade80;
  --color-green-dim: rgba(74, 222, 128, 0.12);
  /* Orange from PDF (highlight / warmth) */
  --color-orange: #f4a942;
  --color-orange-dim: rgba(244, 169, 66, 0.2);
  --color-orange-glow: rgba(244, 169, 66, 0.35);
  /* Text */
  --color-text: #f5f3f9;
  --color-text-muted: #a89bb8;
  --color-text-soft: #6b5f7a;
  /* Borders */
  --color-border: rgba(168, 155, 184, 0.12);
  --color-border-strong: rgba(168, 155, 184, 0.22);
  /* Typography */
  --font-display: 'Outfit', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  /* Container widths - tiered approach for different content types */
  --container-narrow: 720px;  /* Text-heavy sections (contact, long-form) */
  --container-max: 1120px;     /* Standard sections (hero, results, most content) */
  --container-wide: 1280px;    /* Diagrams, grids, visual sections (Cloud Connect, Automation Studio) */
  --section-padding: clamp(3rem, 8vw, 5rem);
  --radius: 12px;
  --radius-lg: 20px;
  /* Automation Studio — tonos elegantes por paso */
  --as-notify: #22d3ee;
  --as-notify-dim: rgba(34, 211, 238, 0.14);
  --as-collect: #34d399;
  --as-collect-dim: rgba(52, 211, 153, 0.14);
  --as-record: #a78bfa;
  --as-record-dim: rgba(167, 139, 250, 0.14);
  --as-reconcile: #818cf8;
  --as-reconcile-dim: rgba(129, 140, 248, 0.14);
  /* Section titles: subtle gradient (elegant, on-brand) */
  --title-gradient: linear-gradient(135deg, var(--color-text) 0%, var(--color-purple-light) 42%, var(--color-blue) 78%, #22d3ee 100%);
}

/* ============================================
   Base
   ============================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
  /* Continuidad sutil: gradiente muy suave para que el scroll no sea plano (vibra AI, elegante) */
  background:
    linear-gradient(180deg, #0c0a12 0%, #0d0b14 25%, #0e0c17 50%, #0d0b14 75%, #0c0a12 100%);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* Wider container for diagrams and visual sections */
.container-wide {
  max-width: var(--container-wide);
}

/* Narrower container for text-heavy sections */
.container-narrow {
  max-width: var(--container-narrow);
}

/* ============================================
   Animations (subtle, AI-ish)
   ============================================ */
@keyframes gradientShift {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}

@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.4; }
  33% { transform: translate(8px, -12px) scale(1.05); opacity: 0.6; }
  66% { transform: translate(-6px, 8px) scale(0.98); opacity: 0.5; }
}

@keyframes progressFill {
  0% { transform: scaleX(0); transform-origin: left; }
  60% { transform: scaleX(0.72); transform-origin: left; }
  100% { transform: scaleX(0.72); transform-origin: left; }
}

@keyframes lineFlow {
  to { stroke-dashoffset: -30; }
}

@keyframes nodePulse {
  0%, 100% { opacity: 0.9; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

@keyframes centerGlow {
  0%, 100% { filter: drop-shadow(0 0 8px var(--color-accent)); opacity: 0.9; }
  50% { filter: drop-shadow(0 0 16px var(--color-accent)); opacity: 1; }
}

/* AI-ish sparks: twinkle + slight drift */
@keyframes sparkTwinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.8); }
  50% { opacity: 0.9; transform: scale(1.2); }
}
@keyframes sparkFloat {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(3px, -4px); }
  50% { transform: translate(-2px, 2px); }
  75% { transform: translate(2px, 3px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-gradient, .hero-glow, .hero-orb,
  .hero-title .highlight,
  .hero-progress-fill, .diagram-line, .diagram-node,
  .automation-step.is-executing,
  .automation-substep,
  .automation-substep-dot,
  .section-automation-flow::before,
  .flow-snake,
  .ecosystem-center, .ecosystem-node, .eco-line,
  .hero-sparks .spark,
  .cloud-connect-center, .cloud-connect-center::before,
  .cloud-connect-flow .cloud-connect-flow-line line,
  .cloud-connect-badge-item, .cloud-connect-diagram,
  .cloud-connect-diagram .cloud-connect-row,
  .cloud-connect-diagram .cloud-connect-flow,
  .brief-spark,
  .cc-spark,
  .rediseno-bar-dot,
  .rediseno-spark,
  .hero-rediseno-chip,
  .hero-rediseno-chip-dot {
    animation: none !important;
  }
  .cloud-connect-diagram,
  .cloud-connect-diagram.is-visible {
    opacity: 1;
  }
  .hero-rediseno-chip { box-shadow: 0 0 20px rgba(244, 169, 66, 0.12); }
  .brief-spark { opacity: 0.35; }
  .cc-spark { opacity: 0.3; }
  .rediseno-spark { opacity: 0.4; }
  .spark { opacity: 0.4 !important; }
}

/* ============================================
   Header
   ============================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 101;
  padding: 1rem 0;
  background: rgba(13, 10, 20, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}

/* Barra "Estamos rediseñando" — visible al hacer scroll, se desliza desde arriba */
.rediseno-bar {
  display: none; /* Hidden for credibility; remove when re-enabling rediseño bar */
  position: fixed;
  top: 3.5rem;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text);
  background: linear-gradient(135deg, rgba(22, 18, 32, 0.98) 0%, rgba(18, 14, 28, 0.98) 50%, rgba(26, 18, 36, 0.98) 100%);
  border-bottom: 1px solid var(--color-border);
  border-left: 5px solid var(--color-orange);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.35),
    0 0 40px rgba(244, 169, 66, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
  transform: translateY(-100%);
  transition: transform 0.35s ease;
}
.rediseno-bar.is-visible {
  transform: translateY(0);
}
.rediseno-bar-text {
  position: relative;
  z-index: 1;
  text-shadow: 0 0 20px rgba(244, 169, 66, 0.15);
}
.rediseno-bar-sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.rediseno-spark {
  position: absolute;
  border-radius: 50%;
  background: var(--color-orange);
  box-shadow: 0 0 8px var(--color-orange-glow), 0 0 12px rgba(167, 139, 250, 0.3);
  opacity: 0;
  animation: redisenoSparkTwinkle 3.5s ease-in-out infinite;
}
.rediseno-spark-1 { left: 8%; top: 50%; width: 4px; height: 4px; animation-delay: 0s; }
.rediseno-spark-2 { left: 18%; top: 30%; width: 3px; height: 3px; animation-delay: -0.5s; background: var(--color-purple-light); box-shadow: 0 0 8px rgba(167, 139, 250, 0.5); }
.rediseno-spark-3 { left: 32%; top: 70%; width: 3px; height: 3px; animation-delay: -1s; }
.rediseno-spark-4 { left: 48%; top: 25%; width: 5px; height: 5px; animation-delay: -1.5s; }
.rediseno-spark-5 { left: 55%; top: 75%; width: 3px; height: 3px; animation-delay: -2s; background: var(--color-purple-light); box-shadow: 0 0 8px rgba(167, 139, 250, 0.5); }
.rediseno-spark-6 { left: 68%; top: 45%; width: 4px; height: 4px; animation-delay: -2.5s; }
.rediseno-spark-7 { left: 78%; top: 20%; width: 3px; height: 3px; animation-delay: -0.8s; }
.rediseno-spark-8 { left: 88%; top: 60%; width: 4px; height: 4px; animation-delay: -1.8s; background: var(--color-purple-light); box-shadow: 0 0 8px rgba(167, 139, 250, 0.5); }
.rediseno-spark-9 { left: 95%; top: 40%; width: 3px; height: 3px; animation-delay: -2.8s; }
.rediseno-spark-10 { left: 42%; top: 50%; width: 3px; height: 3px; animation-delay: -0.3s; }
@keyframes redisenoSparkTwinkle {
  0%, 100% { opacity: 0; transform: scale(0.6); }
  25% { opacity: 0.7; transform: scale(1.1); }
  50% { opacity: 0.4; transform: scale(0.9); }
  75% { opacity: 0.8; transform: scale(1); }
}
.rediseno-bar-dot {
  position: relative;
  z-index: 1;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-orange);
  box-shadow: 0 0 12px var(--color-orange-glow), 0 0 20px rgba(244, 169, 66, 0.25);
  animation: redisenoDotPulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes redisenoDotPulse {
  0%, 100% { opacity: 0.9; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

.header-inner {
  max-width: calc(var(--container-max) + 2rem);
  margin: 0 auto;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--color-text);
  letter-spacing: -0.02em;
}
.logo-suffix { color: var(--color-text-muted); font-weight: 500; }

.nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.nav a {
  color: var(--color-text-muted);
  font-weight: 500;
  font-size: 0.9375rem;
}
.nav a:hover { color: var(--color-text); text-decoration: none; }
.nav-cta { color: var(--color-accent) !important; }
.nav-cta:hover { text-decoration: underline !important; }

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text);
}
.menu-toggle span {
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}

@media (max-width: 768px) {
  .header-inner { position: relative; }
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--color-bg-elevated);
    padding: 1rem;
    gap: 0.75rem;
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  }
  .nav.nav-open { display: flex; }
  .menu-toggle { display: flex; }
}

/* ============================================
   Buttons
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 1.75rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn-primary {
  background: linear-gradient(135deg, var(--color-purple-light), var(--color-purple));
  color: #fff;
  box-shadow: 0 4px 20px var(--color-accent-glow);
}
.btn-primary:hover { box-shadow: 0 8px 28px var(--color-accent-glow); }
.btn-secondary {
  background: transparent;
  color: var(--color-text);
  border: 2px solid rgba(255, 255, 255, 0.35);
}
.btn-secondary:hover { border-color: rgba(255, 255, 255, 0.6); }

/* ============================================
   Hero — Coming soon
   ============================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  /* Top: header ~3.5rem + section padding (rediseño bar removed) */
  padding: calc(3.5rem + var(--section-padding)) 0 var(--section-padding);
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* Transición elegante del hero al resto: el “life” se desvanece suavemente */
.hero-bg::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40%;
  background: linear-gradient(to top, var(--color-bg) 0%, transparent 100%);
  pointer-events: none;
}
.hero-gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% -10%, var(--color-purple-dim), transparent 55%),
    radial-gradient(ellipse 50% 40% at 100% 60%, var(--color-accent-dim), transparent 50%),
    radial-gradient(ellipse 40% 30% at 0% 70%, var(--color-blue-dim), transparent 45%);
  animation: gradientShift 8s ease-in-out infinite;
}
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(168, 155, 184, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 155, 184, 0.03) 1px, transparent 1px);
  background-size: 56px 56px;
}

/* AI-ish sparks layer */
.hero-sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.hero-sparks .spark {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-purple-light);
  box-shadow: 0 0 8px var(--color-accent-glow);
  animation: sparkTwinkle 2.5s ease-in-out infinite, sparkFloat 6s ease-in-out infinite;
}
.hero-sparks .spark-1 { left: 12%; top: 18%; animation-delay: 0s, 0s; }
.hero-sparks .spark-2 { left: 28%; top: 8%; animation-delay: -0.3s, -1s; width: 3px; height: 3px; }
.hero-sparks .spark-3 { left: 45%; top: 22%; animation-delay: -0.6s, -2s; }
.hero-sparks .spark-4 { left: 62%; top: 12%; animation-delay: -0.9s, -3s; width: 5px; height: 5px; }
.hero-sparks .spark-5 { left: 78%; top: 28%; animation-delay: -1.2s, -4s; }
.hero-sparks .spark-6 { left: 88%; top: 45%; animation-delay: -1.5s, -5s; width: 3px; height: 3px; }
.hero-sparks .spark-7 { left: 18%; top: 42%; animation-delay: -0.2s, -0.5s; }
.hero-sparks .spark-8 { left: 35%; top: 55%; animation-delay: -0.5s, -1.5s; width: 4px; height: 4px; }
.hero-sparks .spark-9 { left: 52%; top: 48%; animation-delay: -0.8s, -2.5s; }
.hero-sparks .spark-10 { left: 72%; top: 62%; animation-delay: -1.1s, -3.5s; width: 3px; height: 3px; }
.hero-sparks .spark-11 { left: 8%; top: 68%; animation-delay: -1.4s, -4.5s; }
.hero-sparks .spark-12 { left: 42%; top: 78%; animation-delay: -0.4s, -1.2s; }
.hero-sparks .spark-13 { left: 58%; top: 72%; animation-delay: -0.7s, -2.2s; width: 5px; height: 5px; }
.hero-sparks .spark-14 { left: 82%; top: 82%; animation-delay: -1s, -3.2s; }
.hero-sparks .spark-15 { left: 22%; top: 88%; animation-delay: -1.3s, -4.2s; width: 3px; height: 3px; }
.hero-sparks .spark-16 { left: 65%; top: 35%; animation-delay: -0.1s, -0.8s; }
.hero-sparks .spark-17 { left: 38%; top: 38%; animation-delay: -1.6s, -5.2s; width: 4px; height: 4px; }
.hero-sparks .spark-18 { left: 92%; top: 18%; animation-delay: -0.6s, -2.8s; }

.hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.45;
  animation: gradientShift 10s ease-in-out infinite;
}
.hero-glow-1 {
  width: 380px;
  height: 380px;
  background: var(--color-purple);
  top: -80px;
  right: -80px;
}
.hero-glow-2 {
  width: 280px;
  height: 280px;
  background: var(--color-purple-light);
  bottom: -60px;
  left: -60px;
}

/* Floating orbs (AI-ish) */
.hero-orb {
  position: absolute;
  border-radius: 50%;
  background: var(--color-purple-light);
  opacity: 0.35;
  filter: blur(40px);
  animation: orbFloat 12s ease-in-out infinite;
}
.hero-orb-1 { width: 120px; height: 120px; top: 20%; right: 15%; animation-delay: 0s; }
.hero-orb-2 { width: 80px; height: 80px; bottom: 25%; left: 20%; animation-delay: -4s; }
.hero-orb-3 { width: 60px; height: 60px; top: 60%; right: 30%; animation-delay: -8s; }

.hero-inner { position: relative; z-index: 1; }

.hero-badge {
  position: relative;
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 1rem;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.35) 0%, rgba(30, 27, 46, 0.9) 35%, rgba(244, 169, 66, 0.15) 65%, rgba(34, 211, 238, 0.2) 100%);
  border: 1px solid rgba(167, 139, 250, 0.4);
  box-shadow:
    0 0 24px rgba(124, 58, 237, 0.25),
    0 0 32px rgba(244, 169, 66, 0.1),
    0 0 48px rgba(34, 211, 238, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
  animation: heroBadgeGlow 4s ease-in-out infinite;
}
.hero-badge::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.06) 45%, transparent 55%, rgba(167, 139, 250, 0.04) 100%);
  background-size: 200% 100%;
  animation: heroBadgeShimmer 5s ease-in-out infinite;
  pointer-events: none;
  border-radius: inherit;
}
@keyframes heroBadgeGlow {
  0%, 100% { box-shadow: 0 0 24px rgba(124, 58, 237, 0.25), 0 0 32px rgba(244, 169, 66, 0.1), 0 0 48px rgba(34, 211, 238, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
  50% { box-shadow: 0 0 32px rgba(124, 58, 237, 0.35), 0 0 40px rgba(244, 169, 66, 0.18), 0 0 56px rgba(34, 211, 238, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
}
@keyframes heroBadgeShimmer {
  0%, 100% { background-position: 100% 0; opacity: 0.9; }
  50% { background-position: 0% 0; opacity: 1; }
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 6vw, 3.75rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0 0 1.25rem;
  color: var(--color-text);
}
.hero-title .highlight {
  background: linear-gradient(135deg, var(--color-purple-light), var(--color-orange), var(--color-purple));
  background-size: 200% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: heroHighlightGradient 12s ease-in-out infinite;
}
@keyframes heroHighlightGradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.125rem);
  color: var(--color-text-muted);
  max-width: 520px;
  margin-bottom: 2rem;
}

.hero-trust {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  margin: 0 0 1.25rem;
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin-bottom: 2.5rem;
}

/* Hero client logos - Compact inline carousel integrated with CTAs */
.hero-clients-carousel {
  margin-top: 2rem;
  padding: 0.75rem 0;
  overflow: hidden;
  position: relative;
  max-width: 100%;
}

/* Stronger fade edges - logos blend smoothly into background */
.hero-clients-carousel::before,
.hero-clients-carousel::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px; /* Wider fade zone */
  z-index: 2;
  pointer-events: none;
}

.hero-clients-carousel::before {
  left: 0;
  background: linear-gradient(to right,
    rgba(10, 7, 15, 1) 0%,
    rgba(10, 7, 15, 0.85) 30%,
    rgba(10, 7, 15, 0.4) 60%,
    transparent 100%
  );
}

.hero-clients-carousel::after {
  right: 0;
  background: linear-gradient(to left,
    rgba(10, 7, 15, 1) 0%,
    rgba(10, 7, 15, 0.85) 30%,
    rgba(10, 7, 15, 0.4) 60%,
    transparent 100%
  );
}

.hero-clients-carousel-track {
  display: flex;
  gap: 2.5rem;
  width: fit-content;
  animation: scroll-logos 40s linear infinite;
}

.hero-clients-carousel:hover .hero-clients-carousel-track {
  animation-play-state: paused;
}

@keyframes scroll-logos {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.hero-client-logo-wrapper {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 94px;
  min-width: 234px;
}

.hero-client-logo {
  max-height: 86px;
  max-width: 234px;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
  filter: grayscale(70%) brightness(0.8) contrast(0.9);
  opacity: 0.6;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-client-logo-wrapper:hover .hero-client-logo {
  filter: grayscale(20%) brightness(0.95) contrast(1);
  opacity: 0.9;
  transform: scale(1.05);
}

/* Specific logos that need to be larger */
.hero-client-logo[alt="Dídac Foods"],
.hero-client-logo[alt="COFISA"] {
  max-height: 155px; /* 124px * 1.25 */
  max-width: 421px; /* 337px * 1.25 */
}

.hero-client-logo[alt="Unitec"] {
  max-height: 124px; /* 95px * 1.3 */
  max-width: 337px; /* 259px * 1.3 */
}

.hero-client-logo[alt="Lazarus"] {
  max-height: 112px; /* 86px * 1.3 */
  max-width: 304px; /* 234px * 1.3 */
}

.hero-client-logo[alt="Ginih"] {
  max-height: 41px; /* Reduced by 50% */
  max-width: 118px; /* 2.88:1 aspect ratio */
}

@media (max-width: 768px) {
  .hero-client-logo[alt="Dídac Foods"],
  .hero-client-logo[alt="COFISA"] {
    max-height: 106px; /* 85px * 1.25 */
    max-width: 315px; /* 252px * 1.25 */
  }

  .hero-client-logo[alt="Unitec"] {
    max-height: 85px; /* 65px * 1.3 */
    max-width: 252px; /* 194px * 1.3 */
  }

  .hero-client-logo[alt="Lazarus"] {
    max-height: 77px; /* 59px * 1.3 */
    max-width: 229px; /* 176px * 1.3 */
  }

  .hero-client-logo[alt="Ginih"] {
    max-height: 28px; /* Reduced by 50% */
    max-width: 81px; /* 2.88:1 aspect ratio */
  }
}

@media (max-width: 768px) {
  .hero-clients-carousel {
    margin-top: 1.5rem;
    padding: 0.5rem 0;
  }

  .hero-clients-carousel::before,
  .hero-clients-carousel::after {
    width: 60px; /* Wider on mobile too */
  }

  .hero-clients-carousel-track {
    gap: 2rem;
    animation-duration: 30s;
  }

  .hero-client-logo-wrapper {
    height: 78px;
    min-width: 176px;
  }

  .hero-client-logo {
    max-height: 59px;
    max-width: 176px;
  }
}

/* Progress bar (building / coming soon) + chip rediseño */
.hero-progress {
  display: none; /* Hidden for credibility; remove and add display:flex when re-enabling */
  max-width: 320px;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}
.hero-rediseno-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-orange);
  background: rgba(244, 169, 66, 0.12);
  border: 1px solid rgba(244, 169, 66, 0.4);
  border-left: 3px solid var(--color-orange);
  padding: 0.5rem 1rem;
  border-radius: 999px;
  box-shadow: 0 0 20px rgba(244, 169, 66, 0.15);
  animation: heroRedisenoChipPulse 2.5s ease-in-out infinite;
}
.hero-rediseno-chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-orange);
  box-shadow: 0 0 8px var(--color-orange-glow);
  flex-shrink: 0;
  animation: redisenoDotPulse 2s ease-in-out infinite;
}
@keyframes heroRedisenoChipPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(244, 169, 66, 0.15); border-color: rgba(244, 169, 66, 0.4); }
  50% { box-shadow: 0 0 28px rgba(244, 169, 66, 0.25); border-color: rgba(244, 169, 66, 0.6); }
}
.hero-progress-bar {
  height: 6px;
  background: var(--color-bg-card);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}
.hero-progress-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--color-purple), var(--color-purple-light), var(--color-orange));
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left;
  animation: progressFill 2.5s ease-out 0.5s forwards;
}
.hero-progress-label {
  font-size: 0.8125rem;
  color: var(--color-text-soft);
  margin: 0;
}

/* Hero diagram — nodes + flowing lines */
.hero-diagram {
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(200px, 28vw, 320px);
  height: clamp(200px, 28vw, 320px);
  opacity: 0.5;
  z-index: 0;
}
.diagram-svg {
  width: 100%;
  height: 100%;
}
.diagram-line {
  stroke-dasharray: 4 6;
  stroke-dashoffset: 0;
  animation: lineFlow 4s linear infinite;
}
.diagram-line-1 { animation-delay: 0s; }
.diagram-line-2 { animation-delay: -0.8s; }
.diagram-line-3 { animation-delay: -1.6s; }
.diagram-line-4 { animation-delay: -2.4s; }
.diagram-line-5 { animation-delay: -3.2s; }
.diagram-node {
  fill: var(--color-bg-card);
  stroke: var(--color-purple-light);
  stroke-width: 1.5;
  opacity: 0.9;
  transition: fill 0.2s ease;
}
.diagram-node-center {
  fill: var(--color-accent-dim);
  stroke: var(--color-purple-light);
  stroke-width: 2;
  animation: centerGlow 3s ease-in-out infinite;
}
.diagram-node-1, .diagram-node-2, .diagram-node-3,
.diagram-node-4, .diagram-node-5 {
  animation: nodePulse 2.5s ease-in-out infinite;
}
.diagram-node-2 { animation-delay: -0.5s; }
.diagram-node-3 { animation-delay: -1s; }
.diagram-node-4 { animation-delay: -1.5s; }
.diagram-node-5 { animation-delay: -2s; }

@media (max-width: 900px) {
  .hero-diagram { display: none; }
}

/* ============================================
   Sections
   ============================================ */
.section { padding: var(--section-padding) 0; }
.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  letter-spacing: -0.02em;
  margin: 0 0 0.75rem;
  color: var(--color-text);
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .section-title {
    background: var(--title-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.section-lead {
  font-size: 1.0625rem;
  color: var(--color-text-muted);
  max-width: 640px;
  margin-bottom: 2rem;
}
.section-lead-brief { max-width: 720px; }

/* Trust strip — Quiénes confían en nosotros */
.section-trust {
  position: relative;
  padding: var(--section-padding) 0;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.section-trust::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(167, 139, 250, 0.25) 50%, transparent 100%);
  opacity: 0.8;
}
.trust-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 0 0 0.5rem;
  text-align: center;
}
.trust-lead {
  font-size: 1rem;
  color: var(--color-text-muted);
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  margin-bottom: 3rem;
}

.trust-testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.testimonial-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 2rem;
  background: linear-gradient(135deg, rgba(26, 22, 36, 0.6) 0%, rgba(18, 16, 26, 0.8) 100%);
  border: 1px solid rgba(167, 139, 250, 0.2);
  border-radius: 16px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.2);
}

.testimonial-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.2), rgba(34, 211, 238, 0.2));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.testimonial-card:hover {
  border-color: rgba(167, 139, 250, 0.4);
  box-shadow: 0 12px 24px -6px rgba(167, 139, 250, 0.2),
              0 4px 8px -2px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}

.testimonial-card:hover::before {
  opacity: 1;
}

.testimonial-content {
  position: relative;
  flex: 1;
}

.testimonial-quote-icon {
  position: absolute;
  top: -0.5rem;
  left: -0.5rem;
  width: 32px;
  height: 32px;
  color: rgba(167, 139, 250, 0.25);
  opacity: 0.6;
}

.testimonial-text {
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(241, 243, 246, 0.9);
  margin: 0;
  padding-left: 1.5rem;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(167, 139, 250, 0.15);
}

.testimonial-photo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(167, 139, 250, 0.3);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(167, 139, 250, 0.2);
  background: rgba(26, 22, 36, 0.8);
}

.testimonial-author-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.testimonial-name {
  font-weight: 600;
  font-size: 1rem;
  color: #ffffff;
  letter-spacing: -0.01em;
}

.testimonial-role {
  font-size: 0.875rem;
  color: rgba(167, 139, 250, 0.85);
  font-weight: 500;
}

@media (max-width: 768px) {
  .trust-testimonials {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .testimonial-card {
    padding: 1.5rem;
  }

  .testimonial-photo {
    width: 64px;
    height: 64px;
  }

  .testimonial-text {
    font-size: 0.9375rem;
  }
}

/* Results Section — Impact metrics */
.section-results {
  position: relative;
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.04), rgba(34, 211, 238, 0.02));
  padding: var(--section-padding) 0;
  overflow: hidden;
}

.section-results .section-lead {
  font-size: 1.125rem;
  line-height: 1.7;
  color: rgba(241, 243, 246, 0.9);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-results::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1400px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(167, 139, 250, 0.3) 50%, transparent 100%);
}

.section-results::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(167, 139, 250, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.results-sparkles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.result-spark {
  position: absolute;
  width: 3px;
  height: 3px;
  background: radial-gradient(circle, rgba(167, 139, 250, 0.8), rgba(34, 211, 238, 0.4));
  border-radius: 50%;
  animation: sparkFloat 8s ease-in-out infinite;
  opacity: 0;
}

.result-spark-1 { top: 15%; left: 10%; animation-delay: 0s; animation-duration: 8s; }
.result-spark-2 { top: 25%; left: 80%; animation-delay: 1.5s; animation-duration: 10s; }
.result-spark-3 { top: 40%; left: 15%; animation-delay: 3s; animation-duration: 9s; }
.result-spark-4 { top: 60%; left: 85%; animation-delay: 2s; animation-duration: 11s; }
.result-spark-5 { top: 75%; left: 20%; animation-delay: 4s; animation-duration: 7s; }
.result-spark-6 { top: 30%; left: 50%; animation-delay: 2.5s; animation-duration: 9.5s; }
.result-spark-7 { top: 50%; left: 70%; animation-delay: 1s; animation-duration: 10.5s; }
.result-spark-8 { top: 80%; left: 45%; animation-delay: 3.5s; animation-duration: 8.5s; }

@keyframes sparkFloat {
  0%, 100% {
    opacity: 0;
    transform: translateY(0) scale(1);
  }
  50% {
    opacity: 0.6;
    transform: translateY(-30px) scale(1.5);
  }
}

.section-eyebrow {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-accent);
  text-align: center;
  margin-bottom: 0.75rem;
}

.results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
  margin-bottom: 2rem;
}

.result-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  padding: 3rem 2.25rem 2.75rem;
  background: linear-gradient(135deg, rgba(26, 22, 36, 0.97) 0%, rgba(18, 16, 26, 1) 100%);
  border: 1px solid rgba(167, 139, 250, 0.28);
  border-radius: 24px;
  transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 6px 20px -6px rgba(0, 0, 0, 0.4),
              0 0 0 1px rgba(167, 139, 250, 0.12) inset,
              0 1px 3px rgba(167, 139, 250, 0.05) inset;
  overflow: hidden;
}

.result-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.35), rgba(167, 139, 250, 0.5), rgba(34, 211, 238, 0.35));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.45s ease;
}

.result-card::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle at top right, rgba(167, 139, 250, 0.08) 0%, transparent 70%);
  border-radius: 24px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s ease;
}

.result-card:hover::after {
  opacity: 1;
}

.result-card:hover {
  border-color: rgba(167, 139, 250, 0.65);
  background: linear-gradient(135deg, rgba(32, 28, 44, 1) 0%, rgba(22, 20, 32, 1) 100%);
  box-shadow: 0 24px 48px -14px rgba(167, 139, 250, 0.4),
              0 8px 16px -4px rgba(0, 0, 0, 0.3),
              0 0 0 1px rgba(167, 139, 250, 0.35) inset,
              0 2px 4px rgba(167, 139, 250, 0.1) inset;
  transform: translateY(-10px) scale(1.02);
}

.result-card:hover::before {
  opacity: 1;
}

.result-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin-bottom: 0.75rem;
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.25), rgba(34, 211, 238, 0.18));
  border-radius: 50%;
  color: #c4b5fd;
  border: 1px solid rgba(167, 139, 250, 0.3);
  box-shadow: 0 4px 12px -4px rgba(167, 139, 250, 0.35),
              0 0 0 1px rgba(167, 139, 250, 0.15) inset;
  transition: all 0.3s ease;
}

.result-card:hover .result-icon {
  transform: scale(1.1);
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.35), rgba(34, 211, 238, 0.25));
  border-color: rgba(167, 139, 250, 0.5);
  color: #e9d5ff;
  box-shadow: 0 8px 20px -6px rgba(167, 139, 250, 0.5),
              0 0 0 1px rgba(167, 139, 250, 0.3) inset;
}

.result-chart {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  width: 100%;
  max-width: 180px;
  margin-bottom: 0.75rem;
}

.result-chart-bar {
  position: relative;
  height: 6px;
  border-radius: 999px;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0.3s;
}

.result-chart-before {
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.35), rgba(239, 68, 68, 0.55));
  border: 1px solid rgba(239, 68, 68, 0.5);
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.15) inset;
}

.result-chart-after {
  background: linear-gradient(90deg, rgba(34, 211, 238, 0.45), rgba(167, 139, 250, 0.55));
  border: 1px solid rgba(167, 139, 250, 0.6);
  box-shadow: 0 0 8px rgba(167, 139, 250, 0.2) inset;
}

.result-chart-label {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.5625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.result-chart-before .result-chart-label {
  color: rgba(252, 165, 165, 0.95);
}

.result-chart-after .result-chart-label {
  color: rgba(196, 181, 253, 1);
}

.result-card:hover .result-chart-label {
  opacity: 1;
}

/* Animate chart bars on scroll */
.result-card:not(.visible) .result-chart-bar {
  width: 0 !important;
}

.result-card.visible .result-chart-bar {
  animation: chartExpand 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes chartExpand {
  from {
    width: 0;
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.result-number {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 5vw, 4rem);
  font-weight: 700;
  background: linear-gradient(135deg, #a78bfa 0%, #818cf8 50%, #22d3ee 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  position: relative;
}

.result-number::after {
  content: attr(data-value);
  position: absolute;
  inset: 0;
  background: inherit;
  -webkit-background-clip: text;
  background-clip: text;
  filter: blur(12px);
  opacity: 0.3;
  z-index: -1;
}

.result-label {
  font-size: 1.1875rem;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
  max-width: 240px;
  letter-spacing: -0.015em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.result-context {
  font-size: 0.875rem;
  color: rgba(241, 243, 246, 0.85);
  text-align: center;
  max-width: 280px;
  line-height: 1.6;
  padding: 0.625rem 1.25rem;
  background: rgba(167, 139, 250, 0.08);
  border-radius: 12px;
  border: 1px solid rgba(167, 139, 250, 0.2);
  margin-top: 0.5rem;
}

.results-note {
  text-align: center;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  max-width: 700px;
  margin: 0 auto;
  font-style: italic;
}

@media (max-width: 768px) {
  .results-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .result-card {
    padding: 2.5rem 1.75rem 2.25rem;
  }

  .result-number {
    font-size: 2.5rem;
  }

  .result-context {
    font-size: 0.8125rem;
    max-width: 100%;
    padding: 0.5rem 1rem;
  }

  .section-results .section-lead {
    font-size: 1rem;
  }
}

/* Brief — What we do + subtle AI sparkles */
.section-brief {
  position: relative;
  background: var(--color-bg-elevated);
  overflow: hidden;
}
.section-brief::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 800px;
  height: 200px;
  background: radial-gradient(ellipse 80% 100% at 50% 0%, rgba(167, 139, 250, 0.06) 0%, transparent 70%);
  pointer-events: none;
}
.section-brief::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(167, 139, 250, 0.2) 50%, transparent 100%);
  opacity: 0.7;
}
.section-brief-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.brief-spark {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--color-purple-light);
  box-shadow: 0 0 6px rgba(167, 139, 250, 0.5);
  opacity: 0;
  animation: briefSparkAppear 4s ease-in-out infinite;
}
.brief-spark-1 { left: 10%; top: 20%; animation-delay: 0s; }
.brief-spark-2 { left: 28%; top: 12%; animation-delay: -0.8s; width: 2px; height: 2px; }
.brief-spark-3 { left: 50%; top: 25%; animation-delay: -1.6s; }
.brief-spark-4 { left: 72%; top: 18%; animation-delay: -2.4s; width: 4px; height: 4px; }
.brief-spark-5 { left: 88%; top: 35%; animation-delay: -0.4s; }
.brief-spark-6 { left: 15%; top: 55%; animation-delay: -1.2s; width: 2px; height: 2px; }
.brief-spark-7 { left: 42%; top: 60%; animation-delay: -2s; }
.brief-spark-8 { left: 65%; top: 52%; animation-delay: -2.8s; }
.brief-spark-9 { left: 85%; top: 68%; animation-delay: -0.6s; width: 2px; height: 2px; }
.brief-spark-10 { left: 32%; top: 78%; animation-delay: -1.4s; }
@keyframes briefSparkAppear {
  0%, 100% { opacity: 0; transform: scale(0.6) translate(0, 0); }
  15% { opacity: 0.5; transform: scale(1) translate(2px, -3px); }
  30% { opacity: 0.8; transform: scale(1.1) translate(-1px, 2px); }
  50% { opacity: 0.4; transform: scale(0.9) translate(1px, 1px); }
  70% { opacity: 0.7; transform: scale(1) translate(-2px, -1px); }
  85% { opacity: 0.3; transform: scale(0.8) translate(0, 0); }
}
.section-brief .container { position: relative; z-index: 1; }
.section-brief-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 0.75rem;
  margin-top: 1.5rem;
}
.brief-chip {
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: rgba(167, 139, 250, 0.1);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

/* Ginih Cloud Connect diagram */
.section-cloud-connect {
  position: relative;
  background: var(--color-bg-elevated);
  overflow: hidden;
}
.section-cloud-connect::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 600px;
  height: 180px;
  background: radial-gradient(ellipse 70% 100% at 50% 0%, rgba(129, 140, 248, 0.05) 0%, rgba(34, 211, 238, 0.03) 40%, transparent 70%);
  pointer-events: none;
}
.section-cloud-connect::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(129, 140, 248, 0.18) 50%, transparent 100%);
  opacity: 0.7;
}

/* Cloud Connect — sparkles sutiles tipo AI (performante: pocos nodos, solo opacity/transform) */
.cloud-connect-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  contain: layout style paint;
}
.cc-spark {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--color-purple-light);
  box-shadow: 0 0 6px rgba(167, 139, 250, 0.4);
  opacity: 0;
  animation: ccSparkAppear 5.5s ease-in-out infinite;
}
.cc-spark-2,
.cc-spark-4,
.cc-spark-6 {
  background: #22d3ee;
  box-shadow: 0 0 6px rgba(34, 211, 238, 0.35);
}
.cc-spark-1 { left: 8%; top: 22%; animation-delay: 0s; }
.cc-spark-2 { left: 92%; top: 28%; animation-delay: -1.2s; }
.cc-spark-3 { left: 15%; top: 72%; animation-delay: -2.4s; width: 3px; height: 3px; }
.cc-spark-4 { left: 88%; top: 68%; animation-delay: -3.6s; }
.cc-spark-5 { left: 42%; top: 12%; animation-delay: -0.9s; width: 2px; height: 2px; }
.cc-spark-6 { left: 58%; top: 88%; animation-delay: -4.2s; }
@keyframes ccSparkAppear {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  20% { opacity: 0.35; transform: scale(1); }
  40% { opacity: 0.5; transform: scale(1.05); }
  60% { opacity: 0.25; transform: scale(0.9); }
  80% { opacity: 0.4; transform: scale(1); }
}
.section-cloud-connect .container { position: relative; z-index: 1; }

.cloud-connect-punchline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  color: var(--color-text);
  margin: 0 0 0.75rem;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.cloud-connect-value {
  font-size: 1rem;
  color: var(--color-text-muted);
  margin: 0 0 1rem;
  max-width: 520px;
  line-height: 1.6;
}

.cloud-connect-lead {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1rem, 2vw, 1.125rem);
  color: var(--color-text-muted);
  margin: 0 0 1.5rem;
  max-width: 480px;
}

.cloud-connect-diagram {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
  padding: 1rem 0;
  perspective: 1200px;
  transform-style: preserve-3d;
  border-radius: var(--radius-lg);
  box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.06);
  opacity: 1;
}
/* Path Core (bank) → center → CRM (enterprise); full width so line spans columns */
.cloud-connect-connection-path {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}
/* Snake effect: short segment travels along path (pathLength=1); thin line; very slow */
.cloud-connect-connection-path-line {
  stroke-dasharray: 0.07 0.93;
  stroke-dashoffset: 1;
  stroke-opacity: 0.92;
  opacity: 0;
  transition:
    stroke-dashoffset 18s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 1.5s ease-out;
}
.cloud-connect-diagram.flow-from-bank .cloud-connect-connection-path-line,
.cloud-connect-diagram.flow-to-enterprise .cloud-connect-connection-path-line {
  stroke-dashoffset: 0;
  opacity: 1;
}
/* When snake reaches CRM: fade out then reset (JS adds this class) */
.cloud-connect-diagram.connection-finished .cloud-connect-connection-path-line {
  opacity: 0;
  transition: opacity 0.9s ease-out;
}

/* Flowing gradient overlay - creates continuous flow effect */
.cloud-connect-flow-overlay {
  opacity: 0;
  transition: opacity 1.5s ease-out 0.5s;
}
.cloud-connect-diagram.flow-from-bank .cloud-connect-flow-overlay,
.cloud-connect-diagram.flow-to-enterprise .cloud-connect-flow-overlay {
  opacity: 1;
}

/* Highlight paths on tile hover */
.cloud-connect-diagram.path-highlighted .cloud-connect-connection-path-line {
  stroke-width: 0.45;
  stroke-opacity: 1;
  filter: drop-shadow(0 0 3px rgba(34, 211, 238, 0.3));
}
.cloud-connect-diagram.path-highlighted .cloud-connect-flow-overlay {
  opacity: 0.85;
  stroke-width: 0.6;
  filter: drop-shadow(0 0 4px rgba(167, 139, 250, 0.35));
}
.cloud-connect-diagram.path-highlighted .cc-node {
  transform: scale(1.3);
  opacity: 0.9;
  filter: drop-shadow(0 0 3px rgba(34, 211, 238, 0.4));
}

/* Pulsing connection nodes */
.cc-node {
  opacity: 0;
  transition: opacity 0.8s ease-out;
}
.cloud-connect-diagram.is-visible .cc-node {
  opacity: 0.6;
  animation: ccNodePulse 3s ease-in-out infinite;
}
.cc-node-start {
  animation-delay: 0.2s;
}
.cc-node-center {
  animation-delay: 0.5s;
}
.cc-node-end {
  animation-delay: 0.8s;
}
@keyframes ccNodePulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.15);
    opacity: 0.75;
  }
}

.cloud-connect-diagram .cloud-connect-row,
.cloud-connect-diagram .cloud-connect-flow {
  position: relative;
  z-index: 1;
}
.cloud-connect-diagram.is-visible {
  animation: cloudConnectDiagramReveal 1s ease-out forwards;
}
.cloud-connect-diagram > * {
  transform-style: preserve-3d;
}
@keyframes cloudConnectDiagramReveal {
  from { transform: translateY(12px); }
  to { transform: translateY(0); }
}
.cloud-connect-diagram .cloud-connect-row {
  animation: none;
}
.cloud-connect-diagram .cloud-connect-flow {
  animation: none;
}
.cloud-connect-diagram.is-visible .cloud-connect-row {
  animation: cloudConnectRowReveal 0.6s ease-out backwards;
}
.cloud-connect-diagram.is-visible .cloud-connect-flow {
  animation: cloudConnectFlowReveal 0.5s ease-out backwards;
}
.cloud-connect-diagram.is-visible .cloud-connect-bank { animation-delay: 0.1s; }
.cloud-connect-diagram.is-visible .cloud-connect-flow:nth-of-type(1) { animation-delay: 0.2s; }
.cloud-connect-diagram.is-visible .cloud-connect-center { animation-delay: 0.3s; }
.cloud-connect-diagram.is-visible .cloud-connect-flow:nth-of-type(2) { animation-delay: 0.4s; }
.cloud-connect-diagram.is-visible .cloud-connect-enterprise { animation-delay: 0.5s; }
@keyframes cloudConnectFlowReveal {
  from { opacity: 0; transform: scaleY(0.6); }
  to { opacity: 1; transform: scaleY(1); }
}
@keyframes cloudConnectRowReveal {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.cloud-connect-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-lg);
  text-align: center;
  transform: translateZ(0);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 1px 0 rgba(255, 255, 255, 0.03) inset;
}
.cloud-connect-stack-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  pointer-events: none;
  user-select: none;
}
.cloud-connect-stack-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--color-purple-light);
  flex-shrink: 0;
}
.cloud-connect-stack-icon svg {
  width: 100%;
  height: 100%;
}

/* Bank (top): many systems aggregated — ligero 3D */
.cloud-connect-bank {
  background: linear-gradient(180deg, var(--color-bg-card) 0%, rgba(0, 0, 0, 0.25) 100%);
  border: 1px solid var(--color-border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), 0 2px 0 rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  transform: translateZ(20px);
}
.cloud-connect-stack-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.cloud-connect-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  width: 100%;
  max-width: 280px;
}
.cloud-connect-bank .cloud-connect-tiles {
  grid-template-columns: repeat(3, 1fr);
  max-width: 320px;
}
.cloud-connect-tile {
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius);
  background: var(--color-bg);
  border: 1px dashed var(--color-border-strong);
  color: var(--color-text-muted);
  text-align: center;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
}
.cloud-connect-tile .tile-icon {
  width: 16px;
  height: 16px;
  stroke-width: 2;
  opacity: 0.7;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.cloud-connect-tile:hover {
  border-color: rgba(167, 139, 250, 0.5);
  box-shadow: 0 0 12px rgba(167, 139, 250, 0.15);
  transform: scale(1.02);
}
.cloud-connect-tile:hover .tile-icon {
  opacity: 1;
  transform: translateY(-1px);
}

/* Highlighted state when hovering related tiles */
.cloud-connect-tile.highlighted {
  border-color: rgba(34, 211, 238, 0.5);
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.15);
  transform: scale(1.01);
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.05), rgba(34, 211, 238, 0.05));
  color: var(--color-purple-light);
  transition-delay: 0.05s;
}

/* Bank section tile colors for visual consistency */
.cloud-connect-bank .cloud-connect-tile[data-service="core"] {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(99, 102, 241, 0.06));
  color: #6366f1;
  border-color: rgba(99, 102, 241, 0.4);
}
.cloud-connect-bank .cloud-connect-tile[data-service="core"]:hover {
  border-color: rgba(99, 102, 241, 0.6);
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.2);
}
.cloud-connect-bank .cloud-connect-tile[data-service="acquiring"] {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(236, 72, 153, 0.06));
  color: #ec4899;
  border-color: rgba(236, 72, 153, 0.4);
}
.cloud-connect-bank .cloud-connect-tile[data-service="acquiring"]:hover {
  border-color: rgba(236, 72, 153, 0.6);
  box-shadow: 0 0 12px rgba(236, 72, 153, 0.2);
}
.cloud-connect-bank .cloud-connect-tile[data-service="h2h"] {
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.2), rgba(167, 139, 250, 0.06));
  color: var(--color-purple-light);
  border-color: rgba(167, 139, 250, 0.45);
}
.cloud-connect-bank .cloud-connect-tile[data-service="h2h"]:hover {
  border-color: rgba(167, 139, 250, 0.65);
  box-shadow: 0 0 14px rgba(167, 139, 250, 0.2);
}

/* Fallback for tiles without data-service attribute */
.cloud-connect-tile:last-child {
  border-color: rgba(167, 139, 250, 0.45);
  color: var(--color-purple-light);
}
.cloud-connect-bank .cloud-connect-tile:last-child:not([data-service]) {
  border-color: rgba(167, 139, 250, 0.45);
  color: var(--color-purple-light);
}
.cloud-connect-tile:last-child:hover,
.cloud-connect-bank .cloud-connect-tile:last-child:not([data-service]):hover {
  border-color: rgba(167, 139, 250, 0.65);
  box-shadow: 0 0 14px rgba(167, 139, 250, 0.2);
}

/* Conector de flujo: línea vertical entre bloques */
.cloud-connect-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0;
  width: 100%;
  transition: opacity 0.35s ease;
}
.cloud-connect-flow-line {
  display: block;
  width: 8px;
  height: 28px;
  overflow: visible;
}
.cloud-connect-flow-line line {
  animation: cloudConnectFlowPulse 2s ease-in-out infinite;
  transition: stroke-opacity 0.35s ease, filter 0.35s ease;
}
.cloud-connect-flow:nth-of-type(2) .cloud-connect-flow-line {
  height: 22px;
}
@keyframes cloudConnectFlowPulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* Hover tile banco: resaltar flujo banco → centro → empresa (ambas líneas + centro) */
.cloud-connect-diagram.flow-from-bank .cloud-connect-flow {
  opacity: 1;
}
.cloud-connect-diagram.flow-from-bank .cloud-connect-flow-line line {
  animation: none;
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(167, 139, 250, 0.5));
}
.cloud-connect-diagram.flow-from-bank .cloud-connect-center {
  box-shadow: 0 0 24px rgba(124, 58, 237, 0.15), 0 0 40px rgba(34, 211, 238, 0.08), 0 12px 40px rgba(0, 0, 0, 0.35), 0 4px 0 rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Hover tile empresa: resaltar flujo centro → empresa (segunda línea + centro) */
.cloud-connect-diagram.flow-to-enterprise .cloud-connect-flow:nth-of-type(2) {
  opacity: 1;
}
.cloud-connect-diagram.flow-to-enterprise .cloud-connect-flow:nth-of-type(2) .cloud-connect-flow-line line {
  animation: none;
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.5));
}
.cloud-connect-diagram.flow-to-enterprise .cloud-connect-center {
  box-shadow: 0 0 24px rgba(124, 58, 237, 0.15), 0 0 40px rgba(34, 211, 238, 0.08), 0 12px 40px rgba(0, 0, 0, 0.35), 0 4px 0 rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Center: vibrant AI-ish gradient + subtle 3D + shimmer */
.cloud-connect-center {
  position: relative;
  background: linear-gradient(145deg, #1e1b2e 0%, #2a2640 30%, #252042 60%, #1f1d35 100%);
  border: 1px solid rgba(167, 139, 250, 0.25);
  box-shadow:
    0 0 40px rgba(124, 58, 237, 0.2),
    0 0 80px rgba(34, 211, 238, 0.08),
    0 12px 40px rgba(0, 0, 0, 0.35),
    0 4px 0 rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  padding: 1.5rem 1.75rem;
  overflow: hidden;
  animation: cloudConnectCenterGlow 4s ease-in-out infinite;
  transform: translateZ(30px);
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.cloud-connect-center::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 0%, rgba(167, 139, 250, 0.06) 40%, rgba(34, 211, 238, 0.06) 60%, transparent 100%);
  background-size: 200% 100%;
  animation: cloudConnectShimmer 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes cloudConnectCenterGlow {
  0%, 100% { box-shadow: 0 0 40px rgba(124, 58, 237, 0.2), 0 0 80px rgba(34, 211, 238, 0.08), 0 4px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
  50% { box-shadow: 0 0 50px rgba(124, 58, 237, 0.28), 0 0 90px rgba(34, 211, 238, 0.12), 0 4px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
}
@keyframes cloudConnectShimmer {
  0%, 100% { background-position: 100% 0; opacity: 0.8; }
  50% { background-position: 0% 0; opacity: 1; }
}
.cloud-connect-center > * { position: relative; z-index: 1; }
.cloud-connect-connector {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  color: #f1f3f6;
  letter-spacing: 0.02em;
  display: block;
  margin: 0 0 0.75rem 0;
}
.cloud-connect-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1rem;
  backface-visibility: hidden;
  transform: translateZ(0);
}
.cloud-connect-badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  animation: cloudConnectBadgeReveal 0.6s ease-out backwards;
  backface-visibility: hidden;
  transform: translateZ(0);
}
.cloud-connect-badge-item:nth-child(1) { animation-delay: 0.15s; }
.cloud-connect-badge-item:nth-child(2) { animation-delay: 0.25s; }
.cloud-connect-badge-item:nth-child(3) { animation-delay: 0.35s; }
.cloud-connect-badge-item:nth-child(4) { animation-delay: 0.45s; }
@keyframes cloudConnectBadgeReveal {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.cloud-connect-badge {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  border-radius: 8px;
  color: #0c0e14;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.cloud-connect-badge abbr {
  text-decoration: none;
  cursor: help;
}
.cloud-connect-badge-c {
  background: linear-gradient(145deg, #e9c46a, #d4a84b);
  box-shadow: 0 0 12px rgba(233, 196, 106, 0.35);
}
.cloud-connect-badge-s {
  background: linear-gradient(145deg, #4ade80, #22c55e);
  box-shadow: 0 0 12px rgba(74, 222, 128, 0.3);
}
.cloud-connect-badge-p {
  background: linear-gradient(145deg, #67b8e3, #4a9fd4);
  box-shadow: 0 0 12px rgba(103, 184, 227, 0.3);
}
.cloud-connect-badge-f {
  background: linear-gradient(145deg, #a78bfa, #7c3aed);
  box-shadow: 0 0 12px rgba(167, 139, 250, 0.35);
}
.cloud-connect-badge-label {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(241, 243, 246, 0.9);
}

/* Enterprise (bottom) */
.cloud-connect-enterprise {
  background: linear-gradient(0deg, var(--color-bg-card) 0%, rgba(0, 0, 0, 0.2) 100%);
  border: 1px solid var(--color-border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), 0 2px 0 rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  transform: translateZ(20px);
}
.cloud-connect-enterprise .cloud-connect-tiles {
  max-width: 320px;
  grid-template-columns: repeat(3, 1fr);
}
.cloud-connect-tile-erp {
  background: linear-gradient(135deg, rgba(233, 196, 106, 0.2), rgba(233, 196, 106, 0.06));
  color: #e9c46a;
  border-color: rgba(233, 196, 106, 0.4);
}
.cloud-connect-tile-erp:hover {
  border-color: rgba(233, 196, 106, 0.6);
  box-shadow: 0 0 12px rgba(233, 196, 106, 0.2);
}
.cloud-connect-tile-hrs {
  background: linear-gradient(135deg, rgba(107, 140, 206, 0.2), rgba(107, 140, 206, 0.06));
  color: var(--color-blue);
  border-color: rgba(107, 140, 206, 0.4);
}
.cloud-connect-tile-hrs:hover {
  border-color: rgba(107, 140, 206, 0.6);
  box-shadow: 0 0 12px rgba(107, 140, 206, 0.2);
}
.cloud-connect-tile-crm {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.2), rgba(34, 211, 238, 0.06));
  color: #22d3ee;
  border-color: rgba(34, 211, 238, 0.4);
}
.cloud-connect-tile-crm:hover {
  border-color: rgba(34, 211, 238, 0.6);
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.2);
}

/* Contact */
.section-contact {
  position: relative;
  background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-elevated) 50%, var(--color-bg) 100%);
  scroll-margin-top: 8rem; /* Evita que el título "Contacto" quede tapado por header + barra fija */
}
.section-contact-accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-purple-light), transparent);
  opacity: 0.5;
}

.section-lead-trust { font-weight: 600; color: var(--color-text); margin-bottom: 0.5rem; }
.section-lead-cta { max-width: 640px; }

/* Contact: single unified card */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 2.5rem;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.contact-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2rem 1.75rem;
  background: linear-gradient(145deg, var(--color-bg-card) 0%, rgba(26, 22, 36, 0.95) 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color 0.2s ease, box-shadow 0.25s ease;
  overflow: hidden;
}
.contact-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-purple-light), transparent);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.contact-card:hover {
  border-color: rgba(167, 139, 250, 0.25);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
.contact-card:hover::before { opacity: 0.6; }

/* Unified contact card sections - override flex with grid */
.contact-card.contact-unified {
  padding: 2.5rem 2rem;
  display: grid !important;
  flex-direction: unset !important;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 640px) {
  .contact-card.contact-unified {
    padding: 3rem 2.5rem;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 2.5rem 3rem;
  }
}

.contact-section {
  position: relative;
}
.contact-section:first-child .contact-card-icon {
  margin-bottom: 1.25rem;
}

/* All dividers - base styles */
.contact-unified .contact-divider {
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-border), transparent);
  position: relative;
  margin: 0;
  grid-column: 1 / -1;
}

/* Hide first divider on desktop (between contact and social) */
@media (min-width: 640px) {
  .contact-unified .contact-divider:nth-child(3) {
    display: none !important;
  }
}

/* Divider before offices section - add dot accent */
.contact-unified .contact-divider:nth-child(4)::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-purple-light);
  opacity: 0.5;
}

/* Third section (offices) spans full width on desktop */
.contact-unified .contact-section:nth-child(5) {
  grid-column: 1 / -1;
}

/* Compact office layout - display addresses in flexible row */
@media (min-width: 640px) {
  .contact-unified .contact-section:nth-child(5) {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem 1.5rem;
  }

  .contact-unified .contact-section:nth-child(5) .contact-card-icon {
    margin-bottom: 0;
    align-self: start;
  }

  .contact-unified .contact-section:nth-child(5) .contact-block-title {
    grid-column: 2;
    margin-bottom: 0.75rem;
  }

  .contact-unified .contact-section:nth-child(5) .contact-address {
    grid-column: 2;
    margin-bottom: 1rem;
  }

  .contact-unified .contact-section:nth-child(5) .contact-address:last-of-type {
    margin-bottom: 0;
  }
}

.contact-card-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  border-radius: var(--radius);
  background: rgba(167, 139, 250, 0.1);
  color: var(--color-purple-light);
}
.contact-card-icon svg { flex-shrink: 0; }

.contact-block-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--color-text);
  margin: 0 0 0.75rem;
  letter-spacing: 0.01em;
}
.contact-block-title--follow { margin-top: 0.5rem; margin-bottom: 0.5rem; }

.contact-email {
  margin: 0 0 0.5rem;
}
.contact-email a {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-purple-light);
  transition: color 0.2s ease;
}
.contact-email a:hover { color: var(--color-text); }

.contact-response-time {
  font-size: 0.8125rem;
  color: var(--color-text-soft);
  margin: 0 0 0;
}

/* Legacy divider style - keeping for backwards compatibility */
.contact-digital-divider {
  height: 1px;
  background: var(--color-border);
  margin: 1.5rem 0 0;
  max-width: 3rem;
}

.contact-social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text-muted);
  transition: color 0.2s ease;
}
.contact-social-link:hover { color: var(--color-purple-light); text-decoration: none; }
.contact-social-link .social-link-arrow {
  opacity: 0.7;
  transition: transform 0.2s ease;
}
.contact-social-link:hover .social-link-arrow { transform: translate(2px, -2px); }

/* Oficinas */
.contact-offices .contact-block-title,
.contact-section:has(.contact-address) .contact-block-title {
  margin-bottom: 1rem;
}
.contact-address {
  font-style: normal;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: 1.25rem;
  line-height: 1.55;
}
.contact-address:last-of-type { margin-bottom: 0; }
.contact-address-label {
  display: block;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-text);
  margin-bottom: 0.35rem;
}

/* Footer */
.site-footer {
  padding: 1.5rem 0;
  border-top: 1px solid var(--color-border);
}
.site-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.site-footer-copy {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-text-soft);
}
.site-footer-legal {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
}
.site-footer-legal a {
  color: var(--color-text-soft);
}
.site-footer-legal a:hover {
  color: var(--color-text-muted);
}
.site-footer-sep {
  color: var(--color-text-soft);
  opacity: 0.6;
}

/* ============================================
   Automation Studio page
   ============================================ */
.automation-hero {
  position: relative;
  padding: calc(3.5rem + var(--section-padding)) 0 var(--section-padding);
  overflow: hidden;
}
.automation-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.automation-hero-bg .hero-gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% -10%, var(--color-purple-dim), transparent 55%),
    radial-gradient(ellipse 55% 45% at 85% 45%, var(--as-notify-dim), transparent 50%),
    radial-gradient(ellipse 40% 35% at 15% 65%, var(--as-collect-dim), transparent 45%);
}
.automation-hero-bg .hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(168, 155, 184, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 155, 184, 0.03) 1px, transparent 1px);
  background-size: 56px 56px;
}
.automation-hero-inner { position: relative; z-index: 1; }

.automation-hero-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--as-collect);
  margin-bottom: 1rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: var(--as-collect-dim);
  border: 1px solid rgba(52, 211, 153, 0.25);
}
.automation-hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  letter-spacing: -0.03em;
  margin: 0 0 1rem;
  color: var(--color-text);
}
.automation-hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.125rem);
  color: var(--color-text-muted);
  max-width: 560px;
  margin-bottom: 0.75rem;
  line-height: 1.55;
}
.automation-hero-tagline {
  font-size: 0.9375rem;
  color: var(--color-text-soft);
  max-width: 520px;
  margin-bottom: 1.5rem;
}
.automation-hero-ctas { margin-top: 0.5rem; }

/* Hero Stats */
.hero-stats {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.hero-stat-number {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--color-purple-light), var(--color-accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-stat-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-muted);
  text-transform: lowercase;
}

.hero-stat-divider {
  width: 1px;
  height: 2rem;
  background: linear-gradient(to bottom, transparent, var(--color-border), transparent);
}

/* Responsive: Hero Stats */
@media (max-width: 640px) {
  .hero-stats {
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .hero-stat-divider {
    width: 3rem;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--color-border), transparent);
  }
}

/* Results Section */
.section-results {
  background: var(--color-bg-elevated);
  position: relative;
  overflow: hidden;
}

.section-results::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(167, 139, 250, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(52, 211, 153, 0.06) 0%, transparent 50%);
  pointer-events: none;
}

.section-results .container {
  position: relative;
  z-index: 1;
  text-align: center;
}

.section-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent);
  margin-bottom: 0.75rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: rgba(167, 139, 250, 0.1);
  border: 1px solid rgba(167, 139, 250, 0.2);
}

.results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.result-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 2.5rem 1.5rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  transform: translateY(20px);
}

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

.result-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.05), rgba(52, 211, 153, 0.05));
  border-radius: 16px;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.result-card:hover::before {
  opacity: 1;
}

.result-card:hover {
  transform: translateY(-4px);
  border-color: rgba(167, 139, 250, 0.3);
  box-shadow: 0 12px 24px -8px rgba(167, 139, 250, 0.2);
}

.result-number {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--color-purple-light), var(--color-accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}

.result-label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  text-align: center;
  line-height: 1.4;
}

.result-context {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  text-align: center;
  line-height: 1.5;
  max-width: 200px;
}

/* Card Schemes Variant */
.result-card--schemes {
  border-color: rgba(52, 211, 153, 0.2);
}

.result-card--schemes::before {
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.08), rgba(167, 139, 250, 0.05));
}

.result-card--schemes .result-number {
  background: linear-gradient(135deg, #34d399, #10b981);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.result-card--schemes:hover {
  border-color: rgba(52, 211, 153, 0.4);
  box-shadow: 0 12px 24px -8px rgba(52, 211, 153, 0.25);
}

/* Responsive */
@media (max-width: 768px) {
  .results-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
    margin-top: 2.5rem;
  }

  .result-card {
    padding: 2rem 1.25rem;
  }

  .result-number {
    font-size: clamp(2rem, 5vw, 2.5rem);
  }
}

@media (max-width: 480px) {
  .results-grid {
    grid-template-columns: 1fr;
  }
}

/* Integrations Section */
.section-integrations {
  background: var(--color-bg);
  position: relative;
}

.section-integrations .section-lead {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3rem;
}

.integrations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.integration-category {
  padding: 2rem 1.5rem;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.integration-category:hover {
  border-color: rgba(167, 139, 250, 0.3);
  box-shadow: 0 8px 16px -6px rgba(167, 139, 250, 0.15);
  transform: translateY(-2px);
}

.integration-category-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 1.25rem;
}

.integration-category-title svg {
  color: var(--color-accent);
  flex-shrink: 0;
}

.integration-category-description {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.integration-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.integration-logo {
  height: 36px;
  width: auto;
  max-width: 100px;
  object-fit: contain;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.integration-logo:hover {
  opacity: 1;
}

.integration-logo--text {
  display: inline-flex;
  align-items: center;
  height: auto;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  transition: all 0.3s ease;
}

.integration-logo--text:hover {
  border-color: var(--color-accent);
  background: rgba(167, 139, 250, 0.05);
  transform: translateY(-1px);
}

.integration-more {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-soft);
  background: rgba(167, 139, 250, 0.08);
  border: 1px solid rgba(167, 139, 250, 0.2);
  border-radius: 6px;
}

.integration-channels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.channel-tag {
  display: inline-block;
  padding: 0.4rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  transition: all 0.3s ease;
}

.channel-tag:hover {
  border-color: var(--color-accent);
  background: rgba(167, 139, 250, 0.05);
  transform: scale(1.05);
}

/* Card Schemes Variant */
.integration-category--schemes {
  border-color: rgba(52, 211, 153, 0.25);
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.03), var(--color-bg-elevated));
}

.integration-category--schemes:hover {
  border-color: rgba(52, 211, 153, 0.4);
  box-shadow: 0 8px 16px -6px rgba(52, 211, 153, 0.2);
}

.integration-category--schemes .integration-category-title {
  color: #10b981;
}

.integration-category--schemes .integration-category-title svg {
  color: #10b981;
}

.integration-category--schemes .integration-logo--text {
  border-color: rgba(52, 211, 153, 0.3);
  background: rgba(52, 211, 153, 0.05);
}

.integration-category--schemes .integration-logo--text:hover {
  border-color: #10b981;
  background: rgba(52, 211, 153, 0.1);
}

/* Responsive */
@media (max-width: 768px) {
  .integrations-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .integration-category {
    padding: 1.5rem 1.25rem;
  }
}

/* Card Schemes Value Proposition Section */
.section-schemes {
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.03), var(--color-bg-elevated));
  position: relative;
  overflow: hidden;
}

.section-schemes::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(52, 211, 153, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 80% 80%, rgba(167, 139, 250, 0.06) 0%, transparent 50%);
  pointer-events: none;
}

.section-schemes .container {
  position: relative;
  z-index: 1;
  text-align: center;
}

.section-schemes .section-lead {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3rem;
}

.schemes-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
}

.scheme-benefit {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1.5rem;
  background: var(--color-bg);
  border: 1px solid rgba(52, 211, 153, 0.2);
  border-radius: 12px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.scheme-benefit:hover {
  border-color: rgba(52, 211, 153, 0.4);
  box-shadow: 0 12px 24px -8px rgba(52, 211, 153, 0.2);
  transform: translateY(-4px);
}

.scheme-benefit-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.1), rgba(16, 185, 129, 0.15));
  border-radius: 50%;
  color: #10b981;
  transition: all 0.4s ease;
}

.scheme-benefit:hover .scheme-benefit-icon {
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.2), rgba(16, 185, 129, 0.25));
  transform: scale(1.1);
}

.scheme-benefit h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 1rem;
  line-height: 1.4;
}

.scheme-benefit p {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
}

/* Responsive */
@media (max-width: 968px) {
  .schemes-benefits {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .scheme-benefit {
    padding: 1.75rem 1.25rem;
  }
}

@media (max-width: 640px) {
  .scheme-benefit-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 1.25rem;
  }

  .scheme-benefit-icon svg {
    width: 28px;
    height: 28px;
  }
}

/* Industries Section */
.section-industries {
  background: var(--color-bg-elevated);
  position: relative;
}

.section-industries .section-lead {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3rem;
}

.industries-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 1rem;
}

.industry-tab {
  position: relative;
  padding: 0.75rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.industry-tab:hover {
  color: var(--color-text);
  border-color: rgba(167, 139, 250, 0.3);
  background: rgba(167, 139, 250, 0.05);
}

.industry-tab.active {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background: rgba(167, 139, 250, 0.1);
}

.industries-panels {
  position: relative;
  min-height: 400px;
}

.industry-panel {
  display: none;
  opacity: 0;
  animation: fadeIn 0.4s ease forwards;
}

.industry-panel.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.industry-panel h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 1rem;
}

.industry-panel > p {
  font-size: 1.0625rem;
  color: var(--color-text-muted);
  margin-bottom: 2rem;
  line-height: 1.6;
}

.industry-features {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

.industry-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9375rem;
  color: var(--color-text);
  line-height: 1.6;
}

.industry-features li svg {
  flex-shrink: 0;
  margin-top: 0.125rem;
  color: var(--color-accent);
}

.industry-panel .industry-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}

.industry-panel .industry-logos img {
  height: 32px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  opacity: 0.6;
  filter: grayscale(100%);
  transition: all 0.3s ease;
}

.industry-panel .industry-logos img:hover {
  opacity: 1;
  filter: grayscale(0%);
}

/* Responsive */
@media (max-width: 768px) {
  .industries-tabs {
    gap: 0.5rem;
  }

  .industry-tab {
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
  }

  .industry-features {
    grid-template-columns: 1fr;
    gap: 0.875rem;
  }

  .industry-panel h3 {
    font-size: 1.25rem;
  }

  .industry-panel > p {
    font-size: 1rem;
  }
}

/* Testimonials Section */
.section-testimonials {
  background: var(--color-bg);
  position: relative;
}

.section-testimonials .section-title {
  text-align: center;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.testimonial-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2.5rem 2rem;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.testimonial-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.03), rgba(52, 211, 153, 0.03));
  border-radius: 12px;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.testimonial-card:hover::before {
  opacity: 1;
}

.testimonial-card:hover {
  border-color: rgba(167, 139, 250, 0.3);
  box-shadow: 0 12px 24px -8px rgba(167, 139, 250, 0.15);
  transform: translateY(-4px);
}

.testimonial-quote-icon {
  color: var(--color-accent);
  opacity: 0.3;
  margin-bottom: 1.5rem;
}

.testimonial-text {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text);
  margin: 0 0 2rem;
  flex-grow: 1;
  position: relative;
  z-index: 1;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
  z-index: 1;
}

.testimonial-photo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-border);
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(167, 139, 250, 0.2);
}

.testimonial-author-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.testimonial-author-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
}

.testimonial-author-title {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

/* Responsive */
@media (max-width: 968px) {
  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .testimonial-card {
    padding: 2rem 1.5rem;
  }
}

@media (max-width: 640px) {
  .testimonial-text {
    font-size: 0.9375rem;
  }

  .testimonial-photo {
    width: 64px;
    height: 64px;
  }
}

/* Process Timeline Section */
.section-process {
  background: var(--color-bg-elevated);
  position: relative;
}

.section-process .section-title {
  text-align: center;
  margin-bottom: 4rem;
}

.process-timeline {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
}

.process-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 300px;
}

.process-step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--color-purple-light), var(--color-accent));
  border-radius: 50%;
  margin-bottom: 1.5rem;
  box-shadow: 0 8px 16px -6px rgba(167, 139, 250, 0.3);
  transition: all 0.4s ease;
}

.process-step:hover .process-step-number {
  transform: scale(1.1);
  box-shadow: 0 12px 24px -8px rgba(167, 139, 250, 0.4);
}

.process-step-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 0.75rem;
}

.process-step-description {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
}

.process-connector {
  flex-shrink: 0;
  width: 80px;
  height: 2px;
  background: linear-gradient(to right, var(--color-border), rgba(167, 139, 250, 0.3), var(--color-border));
  margin-top: 32px;
  position: relative;
}

.process-connector::after {
  content: '';
  position: absolute;
  right: -4px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid rgba(167, 139, 250, 0.5);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}

/* Responsive */
@media (max-width: 968px) {
  .process-timeline {
    flex-direction: column;
    align-items: center;
    gap: 3rem;
  }

  .process-connector {
    width: 2px;
    height: 60px;
    background: linear-gradient(to bottom, var(--color-border), rgba(167, 139, 250, 0.3), var(--color-border));
    margin-top: 0;
  }

  .process-connector::after {
    right: 50%;
    transform: translateX(50%);
    top: auto;
    bottom: -6px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid rgba(167, 139, 250, 0.5);
    border-bottom: none;
  }

  .process-step {
    max-width: 400px;
  }
}

@media (max-width: 640px) {
  .process-step-number {
    width: 56px;
    height: 56px;
    font-size: 1.25rem;
  }

  .process-step-title {
    font-size: 1.125rem;
  }

  .process-connector {
    height: 50px;
  }
}

/* FAQ Section */
.section-faq {
  background: var(--color-bg);
  position: relative;
}

.section-faq .section-title {
  text-align: center;
  margin-bottom: 3rem;
}

.faq-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq-item {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.faq-item:hover {
  border-color: rgba(167, 139, 250, 0.3);
}

.faq-item[open] {
  border-color: var(--color-accent);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-icon {
  flex-shrink: 0;
  color: var(--color-accent);
  transition: transform 0.3s ease;
}

.faq-item[open] .faq-icon {
  transform: rotate(180deg);
}

.faq-answer {
  padding: 0 1.5rem 1.5rem 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}

.faq-answer p {
  margin: 0;
}

/* Responsive */
@media (max-width: 640px) {
  .faq-question {
    padding: 1rem 1.25rem;
    font-size: 1rem;
  }

  .faq-answer {
    padding: 0 1.25rem 1.25rem 1.25rem;
    font-size: 0.875rem;
  }
}

.nav-current { color: var(--color-accent) !important; }
.nav-current:hover { text-decoration: underline !important; }

/* Automation flow — horizontal steps (cajitas) + iconografía ligera */
/* UX: fondo vivo con purple, cyan, green y un toque de naranja (hero); menos sutil */
.section-automation-flow {
  background: var(--color-bg-elevated);
  position: relative;
  overflow: hidden;
}
.section-automation-flow::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(167, 139, 250, 0.11) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 50% 50%, rgba(34, 211, 238, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse 80% 40% at 50% 100%, rgba(52, 211, 153, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse 50% 50% at 85% 30%, rgba(244, 169, 66, 0.06) 0%, transparent 55%);
  pointer-events: none;
  animation: automationFlowBg 12s ease-in-out infinite;
}
@keyframes automationFlowBg {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}
.section-automation-flow::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(167, 139, 250, 0.22) 50%, transparent 100%);
  opacity: 0.9;
  pointer-events: none;
}
.section-automation-flow .container { position: relative; z-index: 1; }
.automation-flow-lead { margin-bottom: 2rem; }

/* Canvas de flujo — sutil y elegante */
.flow-canvas {
  max-width: 940px;
  margin: 0 auto 2rem;
  padding: 0;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(168, 155, 184, 0.08);
  background: var(--color-bg);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.12);
  position: relative;
  overflow: hidden;
}
.flow-canvas::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(168, 155, 184, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 155, 184, 0.025) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}
.flow-canvas-toolbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid rgba(168, 155, 184, 0.06);
  background: transparent;
  position: relative;
  z-index: 1;
}
.flow-toolbar-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--color-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.85;
}
.flow-toolbar-item svg {
  opacity: 0.5;
  stroke-width: 1.5;
}

.automation-flow {
  max-width: 100%;
  margin: 0;
  padding: 1.25rem 1rem;
  position: relative;
  z-index: 1;
}
.automation-flow-track {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  position: relative;
}
.automation-step {
  flex: 1 1 150px;
  min-width: 130px;
  max-width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.25rem 1rem 1rem;
  border-radius: 16px;
  background: rgba(26, 22, 36, 0.5);
  border: 1px solid rgba(168, 155, 184, 0.06);
  cursor: pointer;
  transition: border-color 0.25s ease, box-shadow 0.3s ease, transform 0.25s ease;
  position: relative;
  text-align: center;
}
/* Puntos de conexión — sutiles */
.flow-step-in,
.flow-step-out {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 1px solid rgba(168, 155, 184, 0.2);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.flow-step-in { left: -3px; }
.flow-step-out { right: -3px; left: auto; }
.automation-step:hover .flow-step-in,
.automation-step:hover .flow-step-out,
.automation-step.is-active .flow-step-in,
.automation-step.is-active .flow-step-out {
  border-color: var(--as-collect);
  background: var(--color-bg);
  box-shadow: 0 0 0 1px var(--as-collect-dim);
}
.automation-step:hover {
  border-color: rgba(168, 155, 184, 0.12);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}
.automation-step--notify:hover { border-color: rgba(34, 211, 238, 0.2); }
.automation-step--collect:hover { border-color: rgba(52, 211, 153, 0.2); }
.automation-step--record:hover { border-color: rgba(167, 139, 250, 0.2); }
.automation-step--reconcile:hover { border-color: rgba(129, 140, 248, 0.2); }
.automation-step:focus {
  outline: 1px solid var(--color-accent);
  outline-offset: 2px;
}
.automation-step.is-active {
  border-color: rgba(52, 211, 153, 0.35);
  background: linear-gradient(165deg, rgba(52, 211, 153, 0.06) 0%, rgba(26, 22, 36, 0.5) 50%);
  box-shadow: 0 0 20px rgba(52, 211, 153, 0.08);
}
.automation-step.is-active .automation-step-icon { color: var(--as-collect); }
.automation-step.is-active .automation-step-check {
  opacity: 1;
  color: var(--as-collect);
  background: rgba(52, 211, 153, 0.1);
}
.automation-step.is-active .automation-step-integrations {
  opacity: 1;
  transform: translateY(0);
}

/* Simulación de ejecución — estado "ejecutando" sutil */
.automation-step.is-executing {
  animation: flowStepExecuting 1.8s ease-in-out infinite;
}
@keyframes flowStepExecuting {
  0%, 100% { box-shadow: 0 0 20px rgba(52, 211, 153, 0.06); }
  50% { box-shadow: 0 0 24px rgba(52, 211, 153, 0.1); }
}

/* Mensaje de estado del flujo (Notificando…, Cobrando…, etc.) */
.flow-status-msg {
  margin: 0;
  padding: 0.6rem 0 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-align: center;
  min-height: 1.75rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: relative;
  z-index: 2;
}
.flow-status-msg.is-visible {
  opacity: 1;
  transform: translateY(0);
  color: var(--as-collect);
}

/* Icono del paso — línea fina */
.automation-step-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.6rem;
  border-radius: 12px;
  color: var(--color-text-muted);
  transition: color 0.25s ease, background 0.25s ease;
}
.automation-step-icon svg {
  flex-shrink: 0;
  stroke-width: 1.25;
}
.automation-step--notify .automation-step-icon { color: var(--as-notify); background: var(--as-notify-dim); }
.automation-step--collect .automation-step-icon { color: var(--as-collect); background: var(--as-collect-dim); }
.automation-step--record .automation-step-icon { color: var(--as-record); background: var(--as-record-dim); }
.automation-step--reconcile .automation-step-icon { color: var(--as-reconcile); background: var(--as-reconcile-dim); }
.automation-step:hover .automation-step-icon { color: var(--color-text); }

.automation-step-check {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  opacity: 0.25;
  color: var(--color-text-muted);
  background: transparent;
  transition: opacity 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.automation-step-check svg { stroke-width: 2; }
.automation-step-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--color-text);
  margin-bottom: 0.15rem;
  letter-spacing: -0.01em;
}
.automation-step-desc {
  font-size: 0.625rem;
  color: var(--color-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.4rem;
  opacity: 0.9;
}
.automation-step-outcome {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--color-accent);
  margin-bottom: 0.7rem;
  opacity: 0;
  transform: translateY(-4px);
  transition: all 0.3s ease;
}
.automation-step:hover .automation-step-outcome,
.automation-step.is-active .automation-step-outcome {
  opacity: 1;
  transform: translateY(0);
}
.automation-step-integrations {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
  opacity: 0.7;
  transform: translateY(1px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.automation-step:hover .automation-step-integrations,
.automation-step.is-active .automation-step-integrations {
  opacity: 1;
  transform: translateY(0);
}
/* Substeps (integraciones) se destacan cuando el paso está en ejecución */
.automation-step.is-executing .automation-step-integrations {
  opacity: 1;
  transform: translateY(0);
}
.automation-step.is-executing .automation-int-icon {
  border-color: rgba(52, 211, 153, 0.25);
  color: var(--color-text-soft);
  background: rgba(52, 211, 153, 0.06);
}
.automation-int-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.625rem;
  font-weight: 500;
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
  background: rgba(168, 155, 184, 0.05);
  color: var(--color-text-muted);
  border: 1px solid rgba(168, 155, 184, 0.08);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.automation-step:hover .automation-int-icon,
.automation-step.is-active .automation-int-icon {
  border-color: rgba(168, 155, 184, 0.12);
  color: var(--color-text-soft);
}
.automation-int-svg {
  flex-shrink: 0;
  opacity: 0.75;
  stroke-width: 1.5;
}

/* Substeps: 3 micro-pasos por stage; secuencia vía CSS animation-delay (sin JS) */
.automation-step-substeps {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-top: 0.5rem;
  padding-top: 0.4rem;
  border-top: 1px solid rgba(168, 155, 184, 0.06);
  font-size: 0.65rem;
  line-height: 1.35;
  color: var(--color-text-soft);
  opacity: 0.7;
  transition: opacity 0.25s ease;
}
.automation-step:hover .automation-step-substeps,
.automation-step.is-active .automation-step-substeps {
  opacity: 0.85;
}
.automation-step.is-executing .automation-step-substeps {
  opacity: 1;
}
.automation-substep {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.automation-substep-dot {
  flex-shrink: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
}
/* Secuencia al ejecutar: 0s, 1s, 2s; paso dura 2.6s en JS para que el tercero se vea */
.automation-step--notify { --substep-accent: var(--as-notify); }
.automation-step--collect { --substep-accent: var(--as-collect); }
.automation-step--record { --substep-accent: var(--as-record); }
.automation-step--reconcile { --substep-accent: var(--as-reconcile); }
.automation-step.is-executing .automation-substep:nth-child(1) {
  animation: substepTextDone 0.01s 0s forwards;
}
.automation-step.is-executing .automation-substep:nth-child(2) {
  animation: substepTextDone 0.01s 1s forwards;
}
.automation-step.is-executing .automation-substep:nth-child(3) {
  animation: substepTextDone 0.01s 2s forwards;
}
@keyframes substepTextDone {
  to { color: var(--substep-accent); }
}
.automation-step.is-executing .automation-substep:nth-child(1) .automation-substep-dot {
  animation: substepDotDone 0.01s 0s forwards;
}
.automation-step.is-executing .automation-substep:nth-child(2) .automation-substep-dot {
  animation: substepDotDone 0.01s 1s forwards;
}
.automation-step.is-executing .automation-substep:nth-child(3) .automation-substep-dot {
  animation: substepDotDone 0.01s 2s forwards;
}
@keyframes substepDotDone {
  to { opacity: 1; }
}
.automation-step.is-executing .automation-substep .automation-substep-dot {
  color: var(--substep-accent);
}

.automation-connector {
  flex: 0 0 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  align-self: stretch;
  min-height: 72px;
  position: relative;
}
/* Snake: punto que recorre visiblemente el conector durante la simulación */
.flow-snake {
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--as-collect);
  box-shadow: 0 0 8px rgba(52, 211, 153, 0.5);
  opacity: 0;
  transform: translateY(-50%);
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.flow-canvas.is-simulating .automation-connector.snake-active .flow-snake {
  opacity: 0.95;
  animation: flowSnakeRun 0.85s ease-out forwards;
}
@keyframes flowSnakeRun {
  from { transform: translateY(-50%) translateX(0); }
  to { transform: translateY(-50%) translateX(44px); }
}
.automation-connector-line {
  width: 100%;
  max-width: 44px;
  height: 1px;
  background: transparent;
  border-radius: 0;
  opacity: 0.6;
  transition: opacity 0.3s ease, background 0.3s ease;
  background-image: repeating-linear-gradient(90deg, rgba(168, 155, 184, 0.25) 0, rgba(168, 155, 184, 0.25) 2px, transparent 2px, transparent 6px);
  background-size: 44px 1px;
}
.automation-step.is-active + .automation-connector .automation-connector-line,
.automation-connector:has(+ .automation-step.is-active) .automation-connector-line {
  opacity: 0.9;
  height: 1px;
  background: linear-gradient(90deg, var(--as-collect), var(--as-record));
  background-image: none;
}

.automation-flow-note {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--color-text-soft);
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
  opacity: 0.9;
}

.section-automation-cta {
  padding-bottom: calc(var(--section-padding) + 1rem);
}

.automation-cta-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.automation-cta-actions .btn svg {
  margin-right: 0.5rem;
}

.cta-note {
  text-align: center;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-top: 1.5rem;
  margin-bottom: 0;
}

@media (max-width: 700px) {
  .automation-flow-track {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
  .automation-connector {
    width: 2px;
    min-width: 2px;
    min-height: 32px;
    padding: 8px 0;
  }
  .flow-snake {
    left: 50%;
    top: 0;
    transform: translateX(-50%);
  }
  .flow-canvas.is-simulating .automation-connector.snake-active .flow-snake {
    animation: flowSnakeRunVertical 0.85s ease-out forwards;
  }
  @keyframes flowSnakeRunVertical {
    from { transform: translateX(-50%) translateY(0); }
    to { transform: translateX(-50%) translateY(28px); }
  }
  .automation-connector-line {
    width: 2px;
    max-width: none;
    height: 100%;
    min-height: 32px;
    background: transparent;
    background-image: repeating-linear-gradient(180deg, rgba(168, 155, 184, 0.35) 0, rgba(168, 155, 184, 0.35) 4px, transparent 4px, transparent 8px);
    background-size: 2px 32px;
  }
  .automation-step.is-active + .automation-connector .automation-connector-line,
  .automation-connector:has(+ .automation-step.is-active) .automation-connector-line {
    background: linear-gradient(180deg, var(--as-collect), var(--as-record));
    background-image: none;
  }
  .automation-step {
    max-width: 280px;
    width: 100%;
  }
  .flow-integrations-row {
    flex-wrap: wrap;
    padding: 1rem 0.5rem;
    gap: 0.5rem;
  }
  .flow-int-wire {
    width: 100%;
    min-width: 0;
    height: 12px;
    min-height: 12px;
    border-top: none;
    border-left: none;
    background-image: repeating-linear-gradient(180deg, rgba(168, 155, 184, 0.2) 0, rgba(168, 155, 184, 0.2) 1px, transparent 1px, transparent 4px);
    background-size: 1px 12px;
  }
}

/* Fila de integraciones — tarjetas sutiles, líneas finas */
.flow-integrations-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0 0.4rem;
  padding: 1rem 1rem;
  border-top: 1px solid rgba(168, 155, 184, 0.06);
  background: transparent;
  position: relative;
  z-index: 1;
}
.flow-int-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.65rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(168, 155, 184, 0.08);
  color: var(--color-text-muted);
  white-space: nowrap;
  transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: none;
}
.flow-int-node:hover {
  border-color: rgba(167, 139, 250, 0.18);
  color: var(--color-text);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.flow-int-logo {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  opacity: 0.75;
}
.flow-int-logo svg {
  width: 100%;
  height: 100%;
  stroke-width: 1.25;
}
.flow-int-name {
  font-size: 0.5625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: inherit;
  opacity: 0.9;
}
.flow-int-wire {
  width: 20px;
  min-width: 20px;
  height: 0;
  border-top: 1px dashed rgba(168, 155, 184, 0.2);
  flex-shrink: 0;
}

/* ============================================
   Heroicons Integration - Phase 1
   ============================================ */

/* Result card icon group positioning */
.result-icon-group {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  z-index: 1;
}

/* Lightning bolt icon styling */
.result-icon-bolt {
  filter: drop-shadow(0 0 8px rgba(244, 169, 66, 0.4));
  animation: pulse-bolt 2s ease-in-out infinite;
}

/* Sparkles icon styling */
.result-icon-sparkles {
  filter: drop-shadow(0 0 6px rgba(167, 139, 250, 0.4));
  animation: sparkle 2.5s ease-in-out infinite;
}

/* Bolt pulse animation */
@keyframes pulse-bolt {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.75;
    transform: scale(1.05);
  }
}

/* Sparkle animation (from existing, enhanced) */
@keyframes sparkle {
  0%, 100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.08) rotate(5deg);
  }
}

/* Icon sparkles animate class for title icons */
.icon-sparkles-animate {
  animation: sparkle 2.5s ease-in-out infinite;
}

/* Responsive: stack icons vertically on mobile */
@media (max-width: 768px) {
  .result-icon-group {
    position: static;
    margin-bottom: 1rem;
    justify-content: center;
  }
}

/* Ensure result cards accommodate icons properly */
.result-card {
  position: relative;
  padding-top: 4rem; /* More space for icons */
}

/* On hover, icons glow more */
.result-card:hover .result-icon-bolt {
  filter: drop-shadow(0 0 12px rgba(244, 169, 66, 0.6));
}

.result-card:hover .result-icon-sparkles {
  filter: drop-shadow(0 0 10px rgba(167, 139, 250, 0.6));
}

/* ============================================
   Heroicons Integration - Phase 2 (Mobile-First)
   ============================================ */

/* Hero AI Badge */
.hero-badge-wrapper {
  text-align: center;
  margin-bottom: 1.5rem;
}

.hero-ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.15) 0%, rgba(34, 211, 238, 0.15) 100%);
  border: 1px solid rgba(167, 139, 250, 0.3);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #a78bfa;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(167, 139, 250, 0.2);
  transition: all 0.3s ease;
}

.hero-ai-badge:hover {
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.2) 0%, rgba(34, 211, 238, 0.2) 100%);
  box-shadow: 0 6px 16px rgba(167, 139, 250, 0.3);
  transform: translateY(-2px);
}

/* Mobile: Smaller badge */
@media (max-width: 640px) {
  .hero-ai-badge {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
    gap: 0.375rem;
  }
  
  .hero-ai-badge svg {
    width: 14px;
    height: 14px;
  }
  
  .hero-badge-wrapper {
    margin-bottom: 1rem;
  }
}

/* Cloud Connect Icons */
.cloud-connect-connector {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.cc-icon-left,
.cc-icon-right {
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.cc-icon-left {
  color: #f4a942;
  filter: drop-shadow(0 0 6px rgba(244, 169, 66, 0.4));
}

.cc-icon-right {
  color: #a78bfa;
  filter: drop-shadow(0 0 6px rgba(167, 139, 250, 0.4));
}

/* Hover effect on Cloud Connect center */
.cloud-connect-center:hover .cc-icon-left {
  filter: drop-shadow(0 0 10px rgba(244, 169, 66, 0.6));
  transform: scale(1.1);
}

.cloud-connect-center:hover .cc-icon-right {
  filter: drop-shadow(0 0 10px rgba(167, 139, 250, 0.6));
  transform: scale(1.1);
}

/* Mobile: Hide icons on very small screens or make them smaller */
@media (max-width: 640px) {
  .cc-icon-left,
  .cc-icon-right {
    width: 16px;
    height: 16px;
  }
  
  .cloud-connect-connector {
    gap: 0.375rem;
    font-size: 0.875rem;
  }
}

/* Tablet: Adjust sizing */
@media (min-width: 641px) and (max-width: 1024px) {
  .cc-icon-left,
  .cc-icon-right {
    width: 18px;
    height: 18px;
  }
}

/* Ensure text doesn't wrap awkwardly on mobile */
@media (max-width: 480px) {
  .cloud-connect-connector {
    flex-wrap: nowrap;
    white-space: nowrap;
  }
}

/* Additional mobile refinements for Phase 1 icons */
@media (max-width: 480px) {
  /* Make result icons slightly smaller on very small phones */
  .result-icon-group svg {
    width: 20px !important;
    height: 20px !important;
  }
  
  /* Ensure proper spacing */
  .result-card {
    padding-top: 3.5rem;
  }
}

/* ============================================
   Heroicons Integration - Phase 3 (Final Polish)
   ============================================ */

/* Enhanced Chips with Icons */
.brief-chip-enhanced {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  position: relative;
}

.brief-chip-enhanced .chip-icon {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.brief-chip-enhanced:hover .chip-icon {
  transform: scale(1.15) rotate(5deg);
}

/* Mobile: Ensure chips don't overflow */
@media (max-width: 640px) {
  .section-brief-chips {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  .brief-chip-enhanced .chip-icon {
    width: 12px;
    height: 12px;
  }
}

/* CTA Button Icons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-icon {
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  margin-left: 0.25rem;
}

/* Primary button: arrow slides right on hover */
.btn-primary:hover .btn-icon {
  transform: translateX(4px);
}

/* Secondary button: down arrow bounces */
.btn-secondary:hover .btn-icon {
  animation: bounce-down 0.6s ease-in-out;
}

@keyframes bounce-down {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(4px);
  }
}

/* Mobile: Slightly smaller button icons */
@media (max-width: 640px) {
  .btn-icon {
    width: 14px;
    height: 14px;
  }
  
  .btn {
    gap: 0.375rem;
    font-size: 0.875rem;
  }
}

/* Additional micro-interactions */

/* Smooth color transitions for all interactive elements */
.btn,
.hero-ai-badge,
.brief-chip,
.result-card,
.cloud-connect-center {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Subtle lift on interactive cards */
.result-card:hover,
.testimonial-card:hover {
  transform: translateY(-4px);
}

/* Icon glow pulse (for all sparkles icons) */
@keyframes glow-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 6px rgba(167, 139, 250, 0.4));
  }
  50% {
    filter: drop-shadow(0 0 10px rgba(167, 139, 250, 0.7));
  }
}

.icon-sparkles-animate {
  animation: sparkle 2.5s ease-in-out infinite, glow-pulse 2s ease-in-out infinite;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .icon-sparkles-animate {
    animation: none;
  }
}

/* Performance optimization: will-change for animated elements */
.result-icon-bolt,
.result-icon-sparkles,
.icon-sparkles-animate,
.btn-icon {
  will-change: transform;
}

/* Focus states for accessibility */
.btn:focus-visible {
  outline: 2px solid #a78bfa;
  outline-offset: 4px;
}

.hero-ai-badge:focus-visible,
.brief-chip:focus-visible {
  outline: 2px solid #a78bfa;
  outline-offset: 2px;
}

/* Final polish: ensure proper z-index layering */
.result-icon-group {
  z-index: 2;
}

.hero-badge-wrapper {
  z-index: 10;
  position: relative;
}
/* ========================================
   TESTIMONIALS SECTION - HEROICONS ENHANCEMENTS
   ======================================== */

/* Section positioning for sparkles background */
.section-trust {
  position: relative;
  overflow: hidden;
}

/* Sparkles background */
.trust-sparkles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.3;
  z-index: 0;
}

.trust-spark {
  position: absolute;
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, #a78bfa 0%, transparent 70%);
  border-radius: 50%;
  animation: float-spark 12s ease-in-out infinite;
}

/* Stagger animation delays for sparkles */
.trust-spark-1 {
  top: 10%;
  left: 5%;
  animation-delay: 0s;
  animation-duration: 10s;
}

.trust-spark-2 {
  top: 25%;
  right: 8%;
  animation-delay: 2s;
  animation-duration: 14s;
}

.trust-spark-3 {
  top: 60%;
  left: 12%;
  animation-delay: 4s;
  animation-duration: 11s;
}

.trust-spark-4 {
  bottom: 30%;
  right: 15%;
  animation-delay: 6s;
  animation-duration: 13s;
}

.trust-spark-5 {
  bottom: 15%;
  left: 20%;
  animation-delay: 3s;
  animation-duration: 12s;
}

.trust-spark-6 {
  top: 45%;
  right: 25%;
  animation-delay: 8s;
  animation-duration: 15s;
}

/* Star rating */
.testimonial-rating {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1rem;
}

.star-icon {
  color: #f4a942;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.testimonial-card:hover .star-icon {
  transform: scale(1.1);
}

/* Star animation on hover - cascade effect */
.testimonial-card:hover .star-icon:nth-child(1) {
  animation: star-pop 0.3s ease;
  animation-delay: 0s;
}

.testimonial-card:hover .star-icon:nth-child(2) {
  animation: star-pop 0.3s ease;
  animation-delay: 0.05s;
}

.testimonial-card:hover .star-icon:nth-child(3) {
  animation: star-pop 0.3s ease;
  animation-delay: 0.1s;
}

.testimonial-card:hover .star-icon:nth-child(4) {
  animation: star-pop 0.3s ease;
  animation-delay: 0.15s;
}

.testimonial-card:hover .star-icon:nth-child(5) {
  animation: star-pop 0.3s ease;
  animation-delay: 0.2s;
}

@keyframes star-pop {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

/* Company logo in testimonials */
.testimonial-company {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.testimonial-company-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  opacity: 0.6;
  filter: grayscale(100%);
  transition: all 0.3s ease;
}

.testimonial-card:hover .testimonial-company-logo {
  opacity: 1;
  filter: grayscale(0%);
  transform: scale(1.05);
}

/* Enhanced testimonial cards */
.testimonial-card {
  position: relative;
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.02) 0%, rgba(34, 211, 238, 0.02) 100%);
  border: 1px solid rgba(167, 139, 250, 0.08);
  border-radius: 1rem;
  padding: 2rem;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  transform: translateY(20px);
}

/* Scroll animation */
.testimonial-card.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger effect for cards */
.testimonial-card:nth-child(1) {
  transition-delay: 0ms;
}

.testimonial-card:nth-child(2) {
  transition-delay: 150ms;
}

.testimonial-card:nth-child(3) {
  transition-delay: 300ms;
}

/* Hover effect - gradient border */
.testimonial-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 1rem;
  padding: 1.5px;
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.4), rgba(34, 211, 238, 0.4));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.testimonial-card:hover::before {
  opacity: 1;
}

.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(167, 139, 250, 0.15);
}

/* Testimonial content adjustments */
.testimonial-content {
  position: relative;
  z-index: 1;
}

.testimonial-text {
  line-height: 1.7;
  color: rgba(241, 243, 246, 0.92); /* Excellent contrast on dark background */
}

/* Mobile optimizations */
@media (max-width: 640px) {
  .star-icon {
    width: 16px;
    height: 16px;
  }

  .testimonial-rating {
    gap: 0.2rem;
    margin-bottom: 0.75rem;
  }

  .testimonial-company-logo {
    width: 24px;
    height: 24px;
  }

  .testimonial-card {
    padding: 1.5rem;
  }

  .trust-spark {
    width: 6px;
    height: 6px;
  }
}

/* Tablet */
@media (max-width: 768px) {
  .testimonial-card::before {
    padding: 1px;
  }
}

/* Accessibility - reduce motion */
@media (prefers-reduced-motion: reduce) {
  .trust-spark {
    animation: none;
  }

  .testimonial-card {
    transition-duration: 0.01ms;
    opacity: 1;
    transform: none;
  }

  .star-icon {
    transition: none;
  }

  .testimonial-card:hover .star-icon {
    animation: none;
    transform: none;
  }
}

/* Performance optimization */
.trust-spark,
.star-icon,
.testimonial-company-logo,
.testimonial-card {
  will-change: transform;
}

/* Focus states for accessibility */
.testimonial-card:focus-within {
  outline: 2px solid #a78bfa;
  outline-offset: 4px;
}

/* ═══════════════════════════════════════════════════
   MEJORAS RAPIDAS — Conversion Optimizations
   ═══════════════════════════════════════════════════ */

/* Hero clarification line */
.hero-clarification {
  font-size: 0.9rem;
  opacity: 0.85;
  margin-top: 0.5rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.8);
}

/* Cloud Connect tooltips */
.cloud-connect-tile[data-tooltip] {
  cursor: help;
  position: relative;
}
.cloud-connect-tile[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a2e;
  color: white;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.8rem;
  white-space: nowrap;
  z-index: 10;
  pointer-events: none;
  border: 1px solid rgba(167, 139, 250, 0.2);
}

/* Cloud Connect plain-language summary */
.cloud-connect-simple {
  text-align: center;
  font-size: 1rem;
  opacity: 0.85;
  margin-top: 2rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

/* FAQ Section */
.section-faq {
  padding: 4rem 0;
}
.faq-grid {
  max-width: 800px;
  margin: 2rem auto 0;
}
.faq-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1rem 0;
}
.faq-item summary {
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.05rem;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::after {
  content: '+';
  font-size: 1.5rem;
  font-weight: 300;
  transition: transform 0.2s;
  flex-shrink: 0;
  margin-left: 1rem;
}
.faq-item[open] summary::after {
  transform: rotate(45deg);
}
.faq-item p {
  margin-top: 1rem;
  opacity: 0.85;
  line-height: 1.6;
}
.faq-item a {
  color: #a78bfa;
  text-decoration: underline;
}

/* Urgency note */
.urgency-note {
  font-size: 0.95rem;
  opacity: 0.9;
  margin-bottom: 1.5rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-style: italic;
}