/* Ayoub Mídias: peças da marca comuns às páginas da agência.
   Carrega depois de /marca/tokens.css. Manual: ayoub-midias-design/README.md */

/* Destaque editorial: uma a três palavras de um título, nunca em corpo ou botão. */
.ay-serif {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: 1.08em; letter-spacing: -0.01em; color: var(--navy-ink);
}

/* Rótulo de seção: Kimura 11px, caixa alta, com o símbolo da marca antes. */
.ay-eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-brand); font-size: 11px; line-height: 14px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2);
}
.ay-eyebrow::before {
  content: ""; width: 10px; height: 9.65px; flex: none; background: currentColor;
  -webkit-mask: url("/marca/simbolo.svg") center / contain no-repeat;
  mask: url("/marca/simbolo.svg") center / contain no-repeat;
}
.ay-eyebrow-pilula {
  padding: 6px var(--space-3); border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 0.5px var(--line); background: var(--surface);
}

/* Logo inline: o SVG pega a cor do texto em volta. */
.ay-logo { display: inline-flex; align-items: center; color: inherit; text-decoration: none; }
.ay-logo svg { display: block; height: 24px; width: auto; }
@media (min-width: 1024px) { .ay-logo svg { height: 28px; } }

.ay-num { font-variant-numeric: tabular-nums; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 120ms !important; }
  html { scroll-behavior: auto !important; }
}