/* Timeline integrada na Home - CSS escopado para evitar conflitos e harmonizado com tema */

/* Escopo da seção */
#timeline-section {
  position: relative;
  padding: 80px 0;
  color: var(--color-black);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(34, 211, 238, 0.06) 50%, rgba(249, 115, 22, 0.06) 100%);
  overflow: hidden;
}

#timeline-section .section-header {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 20px;
}
#timeline-section .section-header h2 {
  font-size: clamp(2.25rem, 4vw, 2.75rem);
  font-weight: 800;
  color: var(--color-black);
}
#timeline-section .section-header p.section-description {
  color: var(--color-muted);
  margin-top: 10px;
  max-width: 720px;
}

/* Garantir que conteúdo fique acima de quaisquer fundos globais */
#timeline-section .section-header,
#timeline-section .timeline-container { position: relative; z-index: 1; }

/* Container principal da timeline */
#timeline-section .timeline-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 100px 40px;
  position: relative;
}

/* Linha central e progresso */
#timeline-section .timeline-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-gray);
  transform: translateX(-50%);
}
#timeline-section .timeline-progress {
  position: absolute;
  left: 50%;
  top: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-primary) 100%);
  transform: translateX(-50%);
  height: 0;
  transition: height 0.12s ease-out;
  box-shadow: 0 0 20px rgba(37, 99, 235, 0.35);
}

/* Itens */
#timeline-section .timeline-item {
  position: relative;
  margin-bottom: 120px;
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
#timeline-section .timeline-item.active {
  opacity: 1;
  transform: translateY(0);
}

/* Layout do conteúdo */
#timeline-section .timeline-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
#timeline-section .timeline-item:nth-child(even) .timeline-content { direction: rtl; }
#timeline-section .timeline-item:nth-child(even) .content-text,
#timeline-section .timeline-item:nth-child(even) .content-visual { direction: ltr; }

/* Ícone central */
#timeline-section .timeline-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background: var(--color-white);
  border: 3px solid var(--color-gray);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.4s ease;
}
#timeline-section .timeline-item.active .timeline-icon {
  border-color: var(--color-primary);
  background: var(--color-white);
  box-shadow: 0 0 30px rgba(37, 99, 235, 0.35);
}
#timeline-section .timeline-icon svg {
  width: 28px;
  height: 28px;
  stroke: var(--color-muted);
  transition: stroke 0.4s ease;
}
#timeline-section .timeline-item.active .timeline-icon svg { stroke: var(--color-primary); }

/* Tipografia e texto */
#timeline-section .content-text { padding: 20px 0; }
#timeline-section .content-label {
  color: #888;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 20px;
}
#timeline-section .content-title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 30px;
  color: var(--color-black);
}
#timeline-section .content-description {
  font-size: 18px;
  line-height: 1.7;
  color: var(--color-muted);
}

/* Bloco visual */
#timeline-section .content-visual {
  background: var(--color-white);
  border: none;
  border-radius: 16px;
  padding: 20px;
  min-height: 220px;
  width: 80%;
  max-width: 520px;
  justify-self: start;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
}
#timeline-section .timeline-item.active .content-visual {
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.12);
}
/* Placeholder removido do bloco da timeline (não utilizado) */

/* Responsivo */
@media (max-width: 768px) {
  #timeline-section { padding: 60px 0; }
  #timeline-section .timeline-container { padding: 60px 20px; }
  #timeline-section .timeline-item { margin-bottom: 80px; padding-left: 72px; }
  #timeline-section .timeline-icon { width: 48px; height: 48px; border-width: 2px; top: 1.1rem; transform: translate(-50%, 0); }
  #timeline-section .content-visual { padding: 12px; min-height: 140px; width: 100%; max-width: none; }
  #timeline-section .timeline-content { grid-template-columns: 1fr; gap: 22px; }
  #timeline-section .timeline-item:nth-child(even) .timeline-content { direction: ltr; }
  #timeline-section .timeline-line, #timeline-section .timeline-progress { left: 30px; }
  #timeline-section .timeline-icon { left: 30px; }
  #timeline-section .content-title { font-size: 24px; }
  #timeline-section .content-description { font-size: 16px; }
  
  /* Performance optimizations for mobile */
  #timeline-section .icon-container * { animation-duration: 4s !important; }
  #timeline-section .timeline-item { transition: all 0.5s ease; }
  #timeline-section .icon1 .particle,
  #timeline-section .icon3 .sparkle { animation: none; opacity: 0.4; }
}

@media (max-width: 480px) {
  #timeline-section { padding: 50px 0; }
  #timeline-section .section-header { padding: 0 16px 16px; }
  #timeline-section .timeline-container { padding: 40px 16px; }
  #timeline-section .timeline-line,
  #timeline-section .timeline-progress { left: 24px; width: 3px; }
  #timeline-section .timeline-item { margin-bottom: 60px; padding-left: 64px; }
  #timeline-section .timeline-icon { left: 24px; top: 0.9rem; width: 40px; height: 40px; transform: translate(-50%, 0); }
  #timeline-section .content-title { font-size: 20px; }
  #timeline-section .content-description { font-size: 15px; line-height: 1.6; }
  #timeline-section .content-visual { padding: 10px; min-height: 120px; width: 100%; max-width: none; }
  #timeline-section .timeline-item::before { content: ''; position: absolute; left: 24px; top: 1.6rem; width: 28px; height: 2px; background: var(--color-gray); }
  body.dark-mode #timeline-section .timeline-item::before { background: rgba(148, 163, 184, 0.35); }
  
  /* Heavy performance optimizations for very small screens */
  #timeline-section .icon-container * { animation: none !important; }
  #timeline-section .timeline-item { transition: opacity 0.3s ease; }
  #timeline-section .icon1 .waveform,
  #timeline-section .icon2 .speed-lines,
  #timeline-section .icon3 .lens-flare,
  #timeline-section .icon4 .cloud-arrow { display: none; }
}

/* Utilitário de fade-in */

/* Modo escuro */
body.dark-mode #timeline-section {
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.12) 0%, rgba(56, 189, 248, 0.10) 50%, rgba(15, 23, 42, 0.6) 100%);
  color: var(--color-black);
}
body.dark-mode #timeline-section .timeline-line { background: rgba(148, 163, 184, 0.35); }
body.dark-mode #timeline-section .timeline-item.active .timeline-icon { box-shadow: 0 0 30px rgba(96, 165, 250, 0.35); }
body.dark-mode #timeline-section .content-visual { background: var(--color-white); border: none; }

/* Ilustrações dos cards da timeline (escopo local) */
#timeline-section .content-visual .icon-container {
  width: 100%;
  aspect-ratio: 4/3;
  position: relative;
  margin-bottom: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-color);
}

/* Icon 1: Edição Profissional */
#timeline-section .icon1 {
  --bg-color: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
}
#timeline-section .icon1 .timeline-base {
  position: absolute;
  left: 15%;
  top: 45%;
  width: 70%;
  height: 8px;
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.2), rgba(124, 58, 237, 0.2));
  border-radius: 4px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}
#timeline-section .icon1 .timeline-progress {
  position: absolute;
  left: 15%;
  top: 45%;
  width: 48%;
  height: 8px;
  background: linear-gradient(135deg, #4F46E5, #7C3AED);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.4);
  animation: pulse 2s ease-in-out infinite;
}
#timeline-section .icon1 .playhead {
  position: absolute;
  left: 63%;
  top: 41%;
  width: 3px;
  height: 16px;
  background: linear-gradient(180deg, #4F46E5, #7C3AED);
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.5);
}
#timeline-section .icon1 .playhead::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #4F46E5;
}
#timeline-section .icon1 .tool {
  position: absolute;
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #4F46E5, #7C3AED);
  border-radius: 50%;
  filter: drop-shadow(0 4px 8px rgba(79, 70, 229, 0.3));
  transition: transform 0.3s ease;
}
#timeline-section .icon1 .tool:hover { transform: scale(1.1); }
#timeline-section .icon1 .scissors { left: 22%; top: 25%; }
#timeline-section .icon1 .scissors::before,
#timeline-section .icon1 .scissors::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 2.5px;
  background: white;
  top: 50%;
  left: 50%;
  border-radius: 2px;
}
#timeline-section .icon1 .scissors::before { transform: translate(-50%, -50%) rotate(45deg); }
#timeline-section .icon1 .scissors::after { transform: translate(-50%, -50%) rotate(-45deg); }
#timeline-section .icon1 .color-wheel { left: 50%; top: 20%; width: 32px; height: 32px; transform: translateX(-50%); animation: rotate 10s linear infinite; }
#timeline-section .icon1 .color-wheel::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2.5px solid white;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#timeline-section .icon1 .color-dot { position: absolute; width: 5px; height: 5px; background: white; border-radius: 50%; top: 50%; left: 50%; }
#timeline-section .icon1 .color-dot:nth-child(2) { transform: translate(-50%, -50%) translateY(-7px); }
#timeline-section .icon1 .color-dot:nth-child(3) { transform: translate(-50%, -50%) translateX(6px) translateY(3.5px); opacity: 0.8; }
#timeline-section .icon1 .color-dot:nth-child(4) { transform: translate(-50%, -50%) translateX(-6px) translateY(3.5px); opacity: 0.8; }
#timeline-section .icon1 .layers { left: 78%; top: 25%; }
#timeline-section .icon1 .layer-line { position: absolute; width: 12px; height: 3px; background: white; left: 50%; transform: translateX(-50%); border-radius: 1px; box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
#timeline-section .icon1 .layer-line:nth-child(1) { top: 4px; }
#timeline-section .icon1 .layer-line:nth-child(2) { top: 10px; opacity: 0.8; }
#timeline-section .icon1 .layer-line:nth-child(3) { top: 16px; opacity: 0.6; }
#timeline-section .icon1 .waveform { position: absolute; left: 18%; top: 60%; width: 25%; height: 14%; }
#timeline-section .icon1 .wave-path { width: 100%; height: 100%; stroke: url(#waveGradient); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 4px rgba(79, 70, 229, 0.2)); }
#timeline-section .icon1 .video-frame { position: absolute; left: 52%; top: 58%; width: 22%; height: 20%; border: 3px solid; border-image: linear-gradient(135deg, #4F46E5, #7C3AED) 1; border-radius: 6px; background: linear-gradient(135deg, rgba(79, 70, 229, 0.1), rgba(124, 58, 237, 0.1)); box-shadow: 0 4px 12px rgba(79, 70, 229, 0.15); }
#timeline-section .icon1 .play-icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 0; height: 0; border-left: 8px solid #4F46E5; border-top: 5px solid transparent; border-bottom: 5px solid transparent; opacity: 0.6; }
#timeline-section .icon1 .slider-container { position: absolute; width: 28%; top: 78%; }
#timeline-section .icon1 .slider-container:nth-of-type(1) { left: 15%; }
#timeline-section .icon1 .slider-container:nth-of-type(2) { left: 52%; }
#timeline-section .icon1 .slider { width: 100%; height: 4px; background: linear-gradient(90deg, #E5E7EB, #D1D5DB); border-radius: 2px; position: relative; box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); }
#timeline-section .icon1 .slider-fill { height: 100%; background: linear-gradient(90deg, #4F46E5, #7C3AED); border-radius: 2px; box-shadow: 0 1px 4px rgba(79, 70, 229, 0.3); }
#timeline-section .icon1 .slider-container:nth-of-type(1) .slider-fill { width: 70%; }
#timeline-section .icon1 .slider-container:nth-of-type(2) .slider-fill { width: 40%; }
#timeline-section .icon1 .slider-thumb { position: absolute; width: 12px; height: 12px; background: linear-gradient(135deg, #4F46E5, #7C3AED); border-radius: 50%; top: 50%; transform: translateY(-50%); right: -6px; box-shadow: 0 2px 6px rgba(79, 70, 229, 0.4); border: 2px solid white; cursor: pointer; transition: transform 0.2s ease; }
#timeline-section .icon1 .slider-thumb:hover { transform: translateY(-50%) scale(1.15); }
#timeline-section .icon1 .particle { position: absolute; width: 4px; height: 4px; background: linear-gradient(135deg, #4F46E5, #7C3AED); border-radius: 50%; opacity: 0.4; animation: float 3s ease-in-out infinite; }

/* Icon 2: Velocidade e Qualidade */
#timeline-section .icon2 { --bg-color: linear-gradient(135deg, #F0F9FF 0%, #DBEAFE 100%); }
#timeline-section .icon2 .speed-lines { position: absolute; left: 8%; top: 30%; width: 30%; height: 40%; }
#timeline-section .icon2 .speed-line { position: absolute; height: 3px; background: linear-gradient(90deg, transparent, #06B6D4, #3B82F6); border-radius: 2px; animation: speedMove 1.5s ease-in-out infinite; }
#timeline-section .icon2 .speed-line:nth-child(1) { top: 0; width: 60%; animation-delay: 0s; }
#timeline-section .icon2 .speed-line:nth-child(2) { top: 50%; width: 75%; animation-delay: 0.3s; }
#timeline-section .icon2 .speed-line:nth-child(3) { top: 100%; width: 65%; animation-delay: 0.6s; }
#timeline-section .icon2 .speedometer { position: absolute; left: 54%; top: 50%; width: 110px; height: 110px; transform: translate(-50%, -50%); }
#timeline-section .icon2 .gauge-bg { position: absolute; width: 100%; height: 100%; border-radius: 50%; border: 5px solid #E5E7EB; box-shadow: inset 0 2px 8px rgba(0,0,0,0.05); }
#timeline-section .icon2 .gauge-progress { position: absolute; width: 100%; height: 100%; border-radius: 50%; border: 5px solid transparent; border-top-color: #06B6D4; border-right-color: #06B6D4; border-bottom-color: #3B82F6; transform: rotate(-90deg); clip-path: polygon(0 0, 100% 0, 100% 60%, 70% 85%, 50% 100%, 0 100%); filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.4)); animation: gaugeGlow 2s ease-in-out infinite; }
#timeline-section .icon2 .gauge-ticks { position: absolute; width: 100%; height: 100%; }
#timeline-section .icon2 .tick { position: absolute; width: 2px; height: 8px; background: #D1D5DB; left: 50%; top: 5px; transform-origin: 50% 50px; }
#timeline-section .icon2 .tick:nth-child(1) { transform: translateX(-50%) rotate(0deg); }
#timeline-section .icon2 .tick:nth-child(2) { transform: translateX(-50%) rotate(30deg); }
#timeline-section .icon2 .tick:nth-child(3) { transform: translateX(-50%) rotate(60deg); }
#timeline-section .icon2 .tick:nth-child(4) { transform: translateX(-50%) rotate(90deg); }
#timeline-section .icon2 .tick:nth-child(5) { transform: translateX(-50%) rotate(120deg); }
#timeline-section .icon2 .tick:nth-child(6) { transform: translateX(-50%) rotate(150deg); }
#timeline-section .icon2 .tick:nth-child(7) { transform: translateX(-50%) rotate(180deg); }
#timeline-section .icon2 .needle { position: absolute; width: 4px; height: 45px; background: linear-gradient(180deg, #06B6D4, #3B82F6); left: 50%; bottom: 50%; transform-origin: bottom center; transform: translateX(-50%) rotate(-35deg); border-radius: 2px; filter: drop-shadow(0 2px 8px rgba(6, 182, 212, 0.5)); animation: needleMove 3s ease-in-out infinite; }
#timeline-section .icon2 .needle::after { content: ''; position: absolute; width: 14px; height: 14px; background: linear-gradient(135deg, #06B6D4, #3B82F6); border-radius: 50%; bottom: -7px; left: 50%; transform: translateX(-50%); box-shadow: 0 2px 8px rgba(6, 182, 212, 0.4); border: 2px solid white; }
#timeline-section .icon2 .diamond { position: absolute; width: 16px; height: 16px; background: linear-gradient(135deg, #06B6D4, #3B82F6); transform: rotate(45deg); left: 50%; top: 50%; margin-left: -8px; margin-top: -8px; filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.5)); animation: diamondSpin 4s linear infinite; }
#timeline-section .icon2 .diamond::before { content: ''; position: absolute; width: 100%; height: 50%; background: rgba(255, 255, 255, 0.4); top: 0; left: 0; }
#timeline-section .icon2 .lightning { position: absolute; left: 80%; top: 28%; width: 14px; height: 34px; background: linear-gradient(135deg, #06B6D4, #3B82F6); clip-path: polygon(50% 0%, 0% 54%, 50% 54%, 30% 100%, 100% 36%, 50% 36%); filter: drop-shadow(0 2px 10px rgba(6, 182, 212, 0.5)); animation: lightningFlash 2s ease-in-out infinite; }
#timeline-section .icon2 .quality-badge { position: absolute; left: 82%; top: 65%; width: 28px; height: 28px; background: linear-gradient(135deg, #06B6D4, #3B82F6); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3); animation: badgePulse 2s ease-in-out infinite; }
#timeline-section .icon2 .checkmark { width: 14px; height: 8px; border-left: 3px solid white; border-bottom: 3px solid white; transform: rotate(-45deg); margin-top: -3px; }

/* Icon 3: Presets Cinematográficos */
#timeline-section .icon3 { --bg-color: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%); }
#timeline-section .icon3 .film-strip { position: absolute; left: 18%; top: 22%; width: 64%; height: 54%; background: linear-gradient(180deg, #1F2937, #374151); border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
#timeline-section .icon3 .perforation { position: absolute; width: 8px; height: 6px; background: #111827; border-radius: 1.5px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.5); }
#timeline-section .icon3 .perforation.left { left: 4px; }
#timeline-section .icon3 .perforation.right { right: 4px; }
#timeline-section .icon3 .perforation:nth-child(1),
#timeline-section .icon3 .perforation:nth-child(2) { top: 6px; }
#timeline-section .icon3 .perforation:nth-child(3),
#timeline-section .icon3 .perforation:nth-child(4) { top: 24px; }
#timeline-section .icon3 .perforation:nth-child(5),
#timeline-section .icon3 .perforation:nth-child(6) { top: 42px; }
#timeline-section .icon3 .perforation:nth-child(7),
#timeline-section .icon3 .perforation:nth-child(8) { top: 60px; }
#timeline-section .icon3 .perforation:nth-child(9),
#timeline-section .icon3 .perforation:nth-child(10) { top: 78px; }
#timeline-section .icon3 .film-content { position: absolute; left: 18px; top: 10px; right: 18px; bottom: 10px; background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(239, 68, 68, 0.25)); border-radius: 4px; overflow: hidden; box-shadow: inset 0 2px 8px rgba(0,0,0,0.2); }
#timeline-section .icon3 .landscape { position: absolute; bottom: 0; left: 0; right: 0; height: 65%; background: linear-gradient(135deg, #F59E0B, #EF4444); clip-path: polygon(0% 85%, 8% 70%, 15% 45%, 20% 50%, 25% 65%, 35% 55%, 40% 25%, 48% 30%, 55% 65%, 65% 55%, 75% 45%, 82% 58%, 90% 50%, 95% 55%, 100% 48%, 100% 100%, 0% 100%); opacity: 0.85; filter: drop-shadow(0 -2px 8px rgba(245, 158, 11, 0.3)); }
#timeline-section .icon3 .sun { position: absolute; width: 24px; height: 24px; background: radial-gradient(circle, #FCD34D 0%, #FBBF24 70%, transparent 100%); border-radius: 50%; left: 58%; top: 22%; filter: drop-shadow(0 0 12px rgba(252, 211, 77, 0.8)); animation: sunGlow 3s ease-in-out infinite; }
#timeline-section .icon3 .sun-ray { position: absolute; width: 2px; height: 8px; background: linear-gradient(180deg, #FCD34D, transparent); left: 50%; top: -10px; transform-origin: 50% 22px; }
#timeline-section .icon3 .sun-ray:nth-child(1) { transform: translateX(-50%) rotate(0deg); }
#timeline-section .icon3 .sun-ray:nth-child(2) { transform: translateX(-50%) rotate(45deg); }
#timeline-section .icon3 .sun-ray:nth-child(3) { transform: translateX(-50%) rotate(90deg); }
#timeline-section .icon3 .sun-ray:nth-child(4) { transform: translateX(-50%) rotate(135deg); }
#timeline-section .icon3 .sun-ray:nth-child(5) { transform: translateX(-50%) rotate(180deg); }
#timeline-section .icon3 .sun-ray:nth-child(6) { transform: translateX(-50%) rotate(225deg); }
#timeline-section .icon3 .sun-ray:nth-child(7) { transform: translateX(-50%) rotate(270deg); }
#timeline-section .icon3 .sun-ray:nth-child(8) { transform: translateX(-50%) rotate(315deg); }
#timeline-section .icon3 .lens-flare { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(252, 211, 77, 0.6), transparent); }
#timeline-section .icon3 .lens-flare:nth-child(1) { width: 18px; height: 18px; left: 65%; top: 18%; }
#timeline-section .icon3 .lens-flare:nth-child(2) { width: 12px; height: 12px; left: 48%; top: 32%; opacity: 0.7; }
#timeline-section .icon3 .lens-flare:nth-child(3) { width: 8px; height: 8px; left: 70%; top: 28%; opacity: 0.5; }
#timeline-section .icon3 .clapboard { position: absolute; left: 10%; top: 78%; width: 30%; height: 20%; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2)); }
#timeline-section .icon3 .clap-top { width: 100%; height: 32%; background: linear-gradient(180deg, #1F2937, #374151); position: relative; overflow: hidden; border-radius: 2px 2px 0 0; box-shadow: 0 2px 4px rgba(0,0,0,0.3); }
#timeline-section .icon3 .clap-stripe { position: absolute; width: 16px; height: 100%; background: linear-gradient(135deg, #F59E0B, #EF4444); transform: skewX(-18deg); }
#timeline-section .icon3 .clap-stripe:nth-child(1) { left: -2px; }
#timeline-section .icon3 .clap-stripe:nth-child(2) { left: 18px; }
#timeline-section .icon3 .clap-stripe:nth-child(3) { left: 38px; }
#timeline-section .icon3 .clap-stripe:nth-child(4) { left: 58px; }
#timeline-section .icon3 .clap-body { width: 100%; height: 68%; background: linear-gradient(180deg, #F3F4F6, #E5E7EB); border-radius: 0 0 3px 3px; position: relative; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
#timeline-section .icon3 .clap-line { position: absolute; height: 2.5px; background: #9CA3AF; left: 10%; border-radius: 1px; }
#timeline-section .icon3 .clap-line:nth-child(1) { top: 30%; width: 45%; }
#timeline-section .icon3 .clap-line:nth-child(2) { top: 55%; width: 60%; }
#timeline-section .icon3 .camera-lens { position: absolute; left: 64%; top: 82%; width: 42px; height: 42px; background: linear-gradient(135deg, #1F2937, #374151); border-radius: 50%; box-shadow: 0 6px 16px rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; }
#timeline-section .icon3 .lens-outer { width: 32px; height: 32px; border-radius: 50%; border: 3px solid transparent; background: linear-gradient(135deg, #F59E0B, #EF4444); background-clip: padding-box; position: relative; }
#timeline-section .icon3 .lens-outer::before { content: ''; position: absolute; inset: -3px; border-radius: 50%; padding: 3px; background: linear-gradient(135deg, #F59E0B, #EF4444); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
#timeline-section .icon3 .lens-inner { position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(245, 158, 11, 0.5); top: 50%; left: 50%; transform: translate(-50%, -50%); }
#timeline-section .icon3 .lens-aperture { position: absolute; width: 2px; height: 8px; background: rgba(245, 158, 11, 0.3); left: 50%; top: 50%; transform-origin: center; }
#timeline-section .icon3 .lens-aperture:nth-child(1) { transform: translate(-50%, -50%) rotate(0deg); }
#timeline-section .icon3 .lens-aperture:nth-child(2) { transform: translate(-50%, -50%) rotate(45deg); }
#timeline-section .icon3 .lens-aperture:nth-child(3) { transform: translate(-50%, -50%) rotate(90deg); }
#timeline-section .icon3 .lens-aperture:nth-child(4) { transform: translate(-50%, -50%) rotate(135deg); }
#timeline-section .icon3 .color-palette { position: absolute; right: 12%; top: 38%; display: flex; flex-direction: column; gap: 4px; }
#timeline-section .icon3 .color-swatch { width: 12px; height: 12px; border-radius: 2px; box-shadow: 0 2px 6px rgba(0,0,0,0.2); transition: transform 0.3s ease; }
#timeline-section .icon3 .color-swatch:hover { transform: scale(1.2); }
#timeline-section .icon3 .color-swatch:nth-child(1) { background: linear-gradient(135deg, #F59E0B, #D97706); }
#timeline-section .icon3 .color-swatch:nth-child(2) { background: linear-gradient(135deg, #EF4444, #DC2626); }
#timeline-section .icon3 .color-swatch:nth-child(3) { background: linear-gradient(135deg, #8B5CF6, #7C3AED); }
#timeline-section .icon3 .aspect-ratio { position: absolute; top: 14%; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: bold; color: #F59E0B; opacity: 0.8; text-shadow: 0 1px 3px rgba(0,0,0,0.3); font-family: 'Courier New', monospace; }
#timeline-section .icon3 .sparkle { position: absolute; width: 8px; height: 8px; background: linear-gradient(135deg, #F59E0B, #EF4444); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); opacity: 0.6; animation: sparkleFloat 3s ease-in-out infinite; }
#timeline-section .icon3 .sparkle:nth-child(1) { left: 8%; top: 15%; animation-delay: 0s; }
#timeline-section .icon3 .sparkle:nth-child(2) { right: 8%; top: 25%; animation-delay: 1s; }
#timeline-section .icon3 .sparkle:nth-child(3) { left: 6%; bottom: 12%; animation-delay: 2s; }

/* Icon 4: Produtos Digitais */
#timeline-section .icon4 { --bg-color: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%); }
#timeline-section .icon4 .efficiency-bar { position: absolute; left: 50%; top: 15%; width: 70px; height: 10px; background: linear-gradient(90deg, #E5E7EB, #D1D5DB); border-radius: 5px; transform: translateX(-50%); box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); overflow: hidden; }
#timeline-section .icon4 .efficiency-fill { position: absolute; width: 85%; height: 100%; background: linear-gradient(90deg, #10B981, #059669); border-radius: 5px; box-shadow: 0 1px 4px rgba(16, 185, 129, 0.3); animation: efficiencyPulse 2s ease-in-out infinite; }
#timeline-section .icon4 .efficiency-indicator { position: absolute; width: 14px; height: 14px; background: linear-gradient(135deg, #FBBF24, #F59E0B); border-radius: 50%; right: 8px; top: 50%; transform: translateY(-50%); filter: drop-shadow(0 2px 8px rgba(251, 191, 36, 0.5)); border: 2px solid white; animation: indicatorBounce 2s ease-in-out infinite; }
#timeline-section .icon4 .clock { position: absolute; left: 26%; top: 42%; width: 70px; height: 70px; }
#timeline-section .icon4 .clock-circle { position: absolute; width: 100%; height: 100%; border-radius: 50%; border: 5px solid #E5E7EB; box-shadow: inset 0 2px 8px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.1); }
#timeline-section .icon4 .clock-progress { position: absolute; width: 100%; height: 100%; border-radius: 50%; border: 5px solid transparent; border-top-color: #10B981; border-right-color: #10B981; border-bottom-color: #059669; transform: rotate(-90deg); clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 100%); opacity: 0.8; filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.4)); }
#timeline-section .icon4 .clock-tick { position: absolute; width: 2px; height: 6px; background: #D1D5DB; left: 50%; top: 8px; transform-origin: 50% 27px; }
#timeline-section .icon4 .clock-tick:nth-child(1) { transform: translateX(-50%) rotate(0deg); }
#timeline-section .icon4 .clock-tick:nth-child(2) { transform: translateX(-50%) rotate(90deg); }
#timeline-section .icon4 .clock-tick:nth-child(3) { transform: translateX(-50%) rotate(180deg); }
#timeline-section .icon4 .clock-tick:nth-child(4) { transform: translateX(-50%) rotate(270deg); }
#timeline-section .icon4 .clock-hand { position: absolute; background: linear-gradient(180deg, #10B981, #059669); border-radius: 2px; left: 50%; bottom: 50%; transform-origin: bottom center; box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3); }
#timeline-section .icon4 .hour-hand { width: 3.5px; height: 20px; transform: translateX(-50%) rotate(0deg); }
#timeline-section .icon4 .minute-hand { width: 3px; height: 14px; transform: translateX(-50%) rotate(90deg); }
#timeline-section .icon4 .clock-center { position: absolute; width: 10px; height: 10px; background: linear-gradient(135deg, #10B981, #059669); border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); box-shadow: 0 2px 6px rgba(16, 185, 129, 0.4); border: 2px solid white; }
#timeline-section .icon4 .arrow { position: absolute; left: 44%; top: 42%; width: 35px; height: 35px; }
#timeline-section .icon4 .arrow-line { position: absolute; width: 35px; height: 4px; background: linear-gradient(90deg, #10B981, #059669); top: 50%; border-radius: 2px; filter: drop-shadow(0 2px 6px rgba(16, 185, 129, 0.4)); animation: arrowMove 1.5s ease-in-out infinite; }
#timeline-section .icon4 .arrow-head { position: absolute; width: 10px; height: 10px; border-top: 4px solid #059669; border-right: 4px solid #059669; transform: rotate(45deg); right: -3px; top: 50%; margin-top: -5px; }
#timeline-section .icon4 .coin { position: absolute; left: 72%; top: 42%; width: 60px; height: 60px; }
#timeline-section .icon4 .coin-outer { position: absolute; width: 72px; height: 72px; background: radial-gradient(circle, rgba(251, 191, 36, 0.3), rgba(245, 158, 11, 0.1)); border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); animation: coinGlow 2s ease-in-out infinite; }
#timeline-section .icon4 .coin-main { position: absolute; width: 60px; height: 60px; background: linear-gradient(135deg, #FBBF24, #F59E0B); border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); filter: drop-shadow(0 4px 16px rgba(251, 191, 36, 0.5)); box-shadow: inset 0 2px 8px rgba(255, 255, 255, 0.3); }
#timeline-section .icon4 .coin-ring { position: absolute; width: 46px; height: 46px; border: 3px solid #FEF3C7; border-radius: 50%; opacity: 0.7; left: 50%; top: 50%; transform: translate(-50%, -50%); }
#timeline-section .icon4 .coin-shine { position: absolute; width: 20px; height: 35px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); left: -5px; top: 50%; transform: translateY(-50%); border-radius: 50%; animation: coinShine 3s ease-in-out infinite; }
#timeline-section .icon4 .dollar { position: absolute; font-size: 28px; font-weight: bold; color: white; left: 50%; top: 50%; transform: translate(-50%, -50%); margin-top: 2px; text-shadow: 0 2px 8px rgba(0,0,0,0.3); }
#timeline-section .icon4 .product-box { position: absolute; top: 68%; width: 14%; height: 22%; background: linear-gradient(135deg, #10B981, #059669); border-radius: 4px; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); transition: transform 0.3s ease; }
#timeline-section .icon4 .product-box:hover { transform: translateY(-4px); }
#timeline-section .icon4 .product-box:nth-child(1) { left: 16%; opacity: 0.85; }
#timeline-section .icon4 .product-box:nth-child(2) { left: 33%; opacity: 0.92; }
#timeline-section .icon4 .product-box:nth-child(3) { left: 50%; }
#timeline-section .icon4 .box-header { width: calc(100% - 8px); height: 5px; background: rgba(255, 255, 255, 0.35); margin: 4px; border-radius: 1.5px; }
#timeline-section .icon4 .box-icon { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 12px; height: 12px; background: rgba(255, 255, 255, 0.4); border-radius: 50%; }
#timeline-section .icon4 .cloud { position: absolute; left: 78%; top: 73%; width: 44px; height: 28px; background: linear-gradient(135deg, #10B981, #059669); border-radius: 14px; opacity: 0.8; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); }
#timeline-section .icon4 .cloud::before { content: ''; position: absolute; width: 18px; height: 18px; background: linear-gradient(135deg, #10B981, #059669); border-radius: 50%; left: 10px; top: -9px; }
#timeline-section .icon4 .cloud::after { content: ''; position: absolute; width: 14px; height: 14px; background: linear-gradient(135deg, #10B981, #059669); border-radius: 50%; right: 10px; top: -7px; }
#timeline-section .icon4 .cloud-arrow { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 3px; height: 12px; background: white; border-radius: 2px; }
#timeline-section .icon4 .cloud-arrow::before { content: ''; position: absolute; width: 6px; height: 6px; border-left: 3px solid white; border-bottom: 3px solid white; transform: rotate(-45deg); left: 50%; bottom: -1px; margin-left: -3px; }
#timeline-section .icon4 .growth-chart { position: absolute; right: 12%; top: 58%; width: 45px; height: 20px; opacity: 0.6; }
#timeline-section .icon4 .chart-line { width: 100%; height: 100%; stroke: url(#growthGradient); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 4px rgba(16, 185, 129, 0.3)); }

/* Keyframes para animações dos ícones */
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.8; } }
@keyframes rotate { from { transform: translateX(-50%) rotate(0deg); } to { transform: translateX(-50%) rotate(360deg); } }
@keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } }
@keyframes speedMove { 0% { opacity: 0; transform: translateX(-20px); } 50% { opacity: 0.4; } 100% { opacity: 0; transform: translateX(0); } }
@keyframes gaugeGlow { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
@keyframes needleMove { 0%, 100% { transform: translateX(-50%) rotate(-35deg); } 50% { transform: translateX(-50%) rotate(-25deg); } }
@keyframes diamondSpin { from { transform: rotate(45deg); } to { transform: rotate(405deg); } }
@keyframes lightningFlash { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
@keyframes badgePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@keyframes sunGlow { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.1); opacity: 1; } }
@keyframes sparkleFloat { 0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.6; } 50% { transform: translateY(-8px) rotate(180deg); opacity: 1; } }
@keyframes efficiencyPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.8; } }
@keyframes indicatorBounce { 0%, 100% { transform: translateY(-50%) scale(1); } 50% { transform: translateY(-50%) scale(1.15); } }
@keyframes arrowMove { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@keyframes coinGlow { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 50% { transform: translate(-50%, -50%) scale(1.05); opacity: 0.8; } }
@keyframes coinShine { 0% { left: -5px; opacity: 0; } 50% { opacity: 1; } 100% { left: 45px; opacity: 0; } }

/* ---- Tema Escuro: ajustes de fundo e contraste dos ícones ---- */
body.dark-mode #timeline-section .icon1,
body.dark-mode #timeline-section .icon2,
body.dark-mode #timeline-section .icon3,
body.dark-mode #timeline-section .icon4 {
  --bg-color: linear-gradient(135deg, #0F172A 0%, #1F2937 100%);
}

/* Icon 1 (Edição Profissional) - leves ajustes para fundo escuro */
body.dark-mode #timeline-section .icon1 .timeline-base {
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.15), rgba(124, 58, 237, 0.15));
}
body.dark-mode #timeline-section .icon1 .video-frame {
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.08), rgba(124, 58, 237, 0.08));
  border-image: linear-gradient(135deg, #7C3AED, #4F46E5) 1;
}

/* Icon 2 (Velocidade e Qualidade) - melhorar contraste no gauge */
body.dark-mode #timeline-section .icon2 .gauge-bg { border: 5px solid rgba(255, 255, 255, 0.15); }
body.dark-mode #timeline-section .icon2 .tick { background: rgba(255, 255, 255, 0.35); }

/* Icon 3 (Presets Cinematográficos) - manter elementos com base escura */
body.dark-mode #timeline-section .icon3 .film-strip { background: linear-gradient(180deg, #111827, #1F2937); }
body.dark-mode #timeline-section .icon3 .film-content { background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(239, 68, 68, 0.18)); }
body.dark-mode #timeline-section .icon3 .clap-body { background: linear-gradient(180deg, #374151, #1F2937); }
body.dark-mode #timeline-section .icon3 .clap-line { background: rgba(156, 163, 175, 0.6); }

/* Icon 4 (Produtos Digitais) - contraste nos elementos circulares */
body.dark-mode #timeline-section .icon4 .clock-circle { border-color: rgba(255, 255, 255, 0.18); }

/* SVG gradient definition containers - hidden but available for gradient references */
#timeline-section .svg-gradient-defs {
  position: absolute;
  width: 0;
  height: 0;
}

/* SVG gradient stop colors - moved from inline styles for CSP compliance */
#timeline-section .gradient-stop-wave-start {
  stop-color: #4F46E5;
}

#timeline-section .gradient-stop-wave-end {
  stop-color: #7C3AED;
}

#timeline-section .gradient-stop-growth-start {
  stop-color: #10B981;
}

#timeline-section .gradient-stop-growth-end {
  stop-color: #059669;
}
body.dark-mode #timeline-section .icon4 .clock-tick { background: rgba(255, 255, 255, 0.35); }