/* ==== /clientes native scope — tokens ported from agendor-clientes-replica.
   Scoped under .clientes-scope so the verbatim world is untouched. ==== */
.clientes-scope {
  --font-display: "Rubik", "Rubik Fallback", "Inter", "Inter Fallback", system-ui, sans-serif;
  --font-sans: "Inter", "Inter Fallback", system-ui, sans-serif;
  --brand-blue: #0030a0;
  --brand-green: #52f896;
  --brand-pink: #ec6783;
  --brand-purple: #0030a0;
  --surface: oklch(1 0 0);
  font-family: var(--font-sans);
}
.clientes-scope h1,
.clientes-scope h2,
.clientes-scope h3,
.clientes-scope h4 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.clientes-scope .font-display { font-family: var(--font-display); }
.clientes-scope .bg-surface { background-color: var(--surface); }
.clientes-scope .bg-brand-blue { background-color: var(--brand-blue); }
.clientes-scope .text-brand-blue { color: var(--brand-blue); }
.clientes-scope .hover\:bg-brand-blue:hover { background-color: var(--brand-blue); }
.clientes-scope .hover\:text-brand-blue:hover { color: var(--brand-blue); }
.clientes-scope .border-brand-blue\/30 { border-color: color-mix(in oklch, var(--brand-blue) 30%, transparent); }
.clientes-scope .bg-brand-blue\/10 { background-color: color-mix(in oklch, var(--brand-blue) 10%, transparent); }
.clientes-scope .bg-brand-blue\/5 { background-color: color-mix(in oklch, var(--brand-blue) 5%, transparent); }
.clientes-scope .from-brand-blue\/10 { --tw-gradient-from: color-mix(in oklch, var(--brand-blue) 10%, transparent); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.clientes-scope .via-brand-blue\/5 { --tw-gradient-stops: var(--tw-gradient-from), color-mix(in oklch, var(--brand-blue) 5%, transparent), var(--tw-gradient-to, transparent); }
.clientes-scope .group:hover .group-hover\:bg-brand-blue { background-color: var(--brand-blue); }
.clientes-scope .group:hover .group-hover\:border-brand-blue\/30 { border-color: color-mix(in oklch, var(--brand-blue) 30%, transparent); }
.clientes-scope .hover\:border-brand-blue\/30:hover { border-color: color-mix(in oklch, var(--brand-blue) 30%, transparent); }
.clientes-scope .hover\:bg-brand-blue\/5:hover { background-color: color-mix(in oklch, var(--brand-blue) 5%, transparent); }

@keyframes marquee-x {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.animate-marquee { animation: marquee-x 25s linear infinite; will-change: transform; }
.group:hover .animate-marquee, .animate-marquee:hover { animation-play-state: paused; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }