.dot {
      width: 12px;
      height: 12px;
      background-color: #e5e7eb;
      border-radius: 50%;
      display: inline-block;
      margin: 0 6px;
      transition: all 0.3s ease;
      cursor: pointer;
  }

  .dot.active {
      background-color: #dc2626;
      /* red-600 */
      transform: scale(1.2);
  }

  .card-gradient {
      background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
      /* red-600 to red-700 */
  }

  .card-hover {
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  .card-hover:hover {
      transform: translateY(-10px) scale(1.02);
      box-shadow: 0 25px 50px -12px rgba(220, 38, 38, 0.25);
      /* red-600 com opacidade */
  }

  .icon-wrapper {
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2);
  }