html {
  scroll-behavior: smooth;
  scroll-padding-top: 4rem;
}

body {
  font-family: 'Poppins', sans-serif;
}

/* Placeholder para Imagens */
.placeholder-img {
  background-color: #d1d5db;
  background-image:
    linear-gradient(45deg, #c7cbd1 25%, transparent 25%),
    linear-gradient(-45deg, #c7cbd1 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #c7cbd1 75%),
    linear-gradient(-45deg, transparent 75%, #c7cbd1 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
}

.hero-bg {
  background: #000000;
}

/* Animação de entrada ao rolar a tela */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.show {
  opacity: 1;
  transform: translateY(0);
}

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-stagger.show > * {
  opacity: 1;
  transform: translateY(0);
}

.reveal-stagger.show > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.show > *:nth-child(2) { transition-delay: 0.15s; }
.reveal-stagger.show > *:nth-child(3) { transition-delay: 0.25s; }
.reveal-stagger.show > *:nth-child(4) { transition-delay: 0.35s; }
.reveal-stagger.show > *:nth-child(5) { transition-delay: 0.45s; }
.reveal-stagger.show > *:nth-child(6) { transition-delay: 0.55s; }
.reveal-stagger.show > *:nth-child(7) { transition-delay: 0.65s; }
.reveal-stagger.show > *:nth-child(8) { transition-delay: 0.75s; }

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .reveal, .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* CSS do Carrossel Infinito (Marquee) */
.testimonial-marquee-wrap {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

/* Opcional: Efeito de degradê nas pontas para suavizar a entrada/saída dos cards */
.testimonial-marquee-wrap::before,
.testimonial-marquee-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  width: 80px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
.testimonial-marquee-wrap::before {
  left: 0;
  background: linear-gradient(to right, rgba(249, 250, 251, 1), transparent); /* bg-gray-50 */
}
.testimonial-marquee-wrap::after {
  right: 0;
  background: linear-gradient(to left, rgba(249, 250, 251, 1), transparent); /* bg-gray-50 */
}

.testimonial-marquee {
  display: flex;
  width: max-content; /* Força os dois grupos a ficarem lado a lado na mesma linha */
  gap: 1.5rem; /* 24px de espaçamento entre cada card */
  animation: marquee 25s linear infinite;
}

/* Pausa a animação quando o usuário passa o mouse por cima para conseguir ler */
.testimonial-marquee:hover {
  animation-play-state: paused;
}

.testimonial-card {
  flex: 0 0 320px; /* Largura fixa de cada card */
  white-space: normal; /* Permite que o texto dentro do card quebre linha normalmente */
}

/* Animação que desloca exatamente metade do container total (-50%) */
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-50% - 0.75rem)); /* Offset perfeito considerando o gap */
  }
}