/* =========================================================================
   Header: logo com lockup de duas partes, CTA em destaque com a
   identidade da marca. Carregado depois do design-system.css — reaproveita
   os tokens --ds-* e sobrescreve o ::after simples que ele aplica na logo.
   ========================================================================= */

/* ---------- logo: mark + nome com hierarquia ----------------------------- */

[data-framer-name="Logo"] .svgContainer.op-logo-mark::after {
  content: none;
}

.op-logo-lockup {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  font-family: var(--ds-font-display, var(--ds-font-sans));
  white-space: nowrap;
}

.op-logo-brand {
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ds-text-on-dark, #f3f6ff);
}

.op-logo-sub {
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ds-text-faint, #64748b);
}

/* ---------- CTA "Fale Conosco" -------------------------------------------- */

a.op-cta {
  background: var(--ds-brand-gradient, var(--ds-brand-500, #0052ff)) !important;
  transition: box-shadow 0.35s var(--ds-ease-out-expo, ease),
              translate 0.35s var(--ds-ease-out-expo, ease);
}

a.op-cta:hover {
  box-shadow: var(--ds-shadow-brand);
  translate: 0 -1px;
}

a.op-cta .framer-text {
  --framer-text-color: #fff !important;
  font-weight: 600 !important;
}

@media (prefers-reduced-motion: reduce) {
  a.op-cta {
    transition: none;
  }
}