/* ================= CUSTOM CSS ================= */

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

/* 100vh sem scroll em ecrãs grandes */
/*@media (min-width: 1024px)*/
/*  body { overflow: hidden; }*/

/* Cortes diagonais (clip-path) */
.clip-diagonal { clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%); }
.clip-diagonal-card { clip-path: polygon(0 0, 100% 0, 100% 94%, 0 100%); }

/* Fundo de listras (Dark/Light) */
.bg-stripes {
  background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255, 200, 0, 0.05) 10px, rgba(255, 200, 0, 0.05) 20px);
}
html:not(.dark) .bg-stripes {
  background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0, 0, 0, 0.03) 10px, rgba(0, 0, 0, 0.03) 20px);
}

/* Gradiente de texto */
.text-gradient {
  background: linear-gradient(90deg, #00AEEF 0%, #EC008C 50%, #FFC800 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* Marquee de Clientes (Loop Perfeito) */
.marquee-container {
  display: flex; 
  overflow: hidden; 
  user-select: none;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.marquee-content {
  flex-shrink: 0; 
  display: flex; 
  gap: 3rem; /* Espaçamento entre logótipos */
  padding-right: 3rem; /* Importante: cria o espaçamento final para o loop perfeito */
  min-width: max-content;
  animation: scroll 30s linear infinite;
}

.marquee-container:hover .marquee-content { 
  animation-play-state: paused; 
}

/* A animação move exatamente 50% da largura total */
@keyframes scroll { 
  from { transform: translateX(0); }
  to { transform: translateX(-50%); } 
}

/* Estilo para os Logótipos dos Clientes */
.client-logo {
  height: 32px; /* Altura fixa para uniformizar */
  width: auto;
  object-fit: contain;
  filter: grayscale(100%) opacity(50%);
  transition: all 0.3s ease;
}

.client-logo:hover {
  filter: grayscale(0%) opacity(100%);
  transform: scale(1.05);
}

/* Inverter cores no Dark Mode (preto para branco) */
html.dark .client-logo {
  filter: grayscale(100%) opacity(50%) invert(1);
}

html.dark .client-logo:hover {
  filter: grayscale(0%) opacity(100%) invert(0);
}