/* Tino — estilos complementares ao Tailwind (CDN) */

:root {
  --color-primary: #111111;
  --color-primary-light: #333333;
  --color-primary-dark: #000000;
  --color-ink: #0D2900;
  --color-text: #1A1A1A;
  --color-text-soft: #2E2E2E;
  --color-muted: #6B6B6B;
  --color-bg: #FAFAFA;
  --color-bg-alt: #F1F1F1;
  --color-border: #E6E6E6;
  --color-accent: #FCB823;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
}

/* Carrossel de logos — rolagem contínua para a esquerda */
.logo-track {
  display: flex;
  width: max-content;
  animation: scroll-left 28s linear infinite;
}

.logo-track:hover {
  animation-play-state: paused;
}

@keyframes scroll-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.logo-fade {
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.logo-placeholder {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  padding: 0 1.75rem;
  border-radius: 9999px;
  background: var(--color-bg-alt);
  color: var(--color-muted);
  font-weight: 600;
  font-size: 0.875rem;
  white-space: nowrap;
}

.logo-card {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4rem;
  width: 9.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 1rem;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
}

.logo-card img {
  max-height: 2.25rem;
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter 0.2s ease, opacity 0.2s ease;
}

.logo-card:hover img {
  filter: grayscale(0);
  opacity: 1;
}

/* Placeholder de imagem (print do dashboard, avatares, etc.) */
.media-placeholder {
  background:
    repeating-linear-gradient(135deg, #eef1e8 0 12px, #f4f6f0 12px 24px);
  border: 1px solid var(--color-border);
}

.avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--color-primary) 14%, white);
  color: var(--color-primary-dark);
  font-weight: 700;
}

/* FAQ accordion */
details.faq-item summary {
  cursor: pointer;
  list-style: none;
}

details.faq-item summary::-webkit-details-marker {
  display: none;
}

details.faq-item[open] .faq-chevron {
  transform: rotate(180deg);
}

.faq-chevron {
  transition: transform 0.2s ease;
}