/**
 * Mercadeo — Design System
 * Regras visuais por seção. Tokens em variables.css.
 *
 * LOGOS (3 variantes)
 * ─────────────────────────────────────────────────────────────
 * logo-footer.png  → Footer (logo tipografia com tagline)
 * logo-extenso     → Header / navegação (sem tagline)
 * logo-miniatura   → Favicon, PWA, avatar, áreas compactas
 */

/* ---- Logos ---- */

.logo {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
  flex-shrink: 0;
  line-height: 0;
}

.logo--extenso {
  flex-direction: row;
  align-items: center;
}

.logo--tipografia,
.logo--footer {
  display: inline-block;
}

.logo--miniatura {
  flex-direction: row;
  align-items: center;
}

.logo__img {
  display: block;
  height: auto;
  width: auto;
  max-width: 100%;
}

/* Header — logo por extenso (sem tagline) */
.logo__img--extenso {
  height: var(--logo-extenso-height);
  width: auto;
}

/* Footer — logo tipografia (com tagline na imagem) */
.logo__img--tipografia,
.logo__img--footer {
  width: min(var(--logo-footer-width), 100%);
  max-width: var(--logo-footer-width);
  height: auto;
  display: block;
}

/* Favicon / ícone compacto */
.logo__img--miniatura {
  width: var(--logo-miniatura-size);
  height: var(--logo-miniatura-size);
  border-radius: var(--radius-sm);
}

/* ---- Tipografia — utilitários ---- */

.text-display {
  font-size: var(--text-display);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text);
}

.text-h1 {
  font-size: var(--text-h1);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text);
}

.text-h2,
.section__title {
  font-size: var(--text-h2);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text);
}

.text-h3 {
  font-size: var(--text-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  color: var(--color-text);
}

.text-lead {
  font-size: var(--text-lead);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-muted);
}

.text-body {
  font-size: var(--text-body);
  line-height: var(--line-height-normal);
  color: var(--color-text);
}

.text-small {
  font-size: var(--text-small);
  line-height: var(--line-height-normal);
  color: var(--color-text-muted);
}

.text-caption {
  font-size: var(--text-caption);
  line-height: var(--line-height-normal);
  color: var(--color-gray);
}

.text-eyebrow,
.section__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-accent-light);
}

.text-gradient {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-muted { color: var(--color-text-muted); }
.text-accent { color: var(--color-accent-light); }
.text-brand { color: var(--color-brand-light); }

/* ---- Seções — cores e fundos ---- */

.section {
  padding-block: var(--section-padding-y);
}

.section--default {
  background: var(--color-bg);
  color: var(--color-text);
}

.section--alt {
  background: var(--color-bg-mid);
  color: var(--color-text);
  border-block: 1px solid var(--color-border-subtle);
}

.section--dark {
  background: var(--gradient-hero);
  color: var(--color-white);
  border-block: none;
}

.section--surface {
  background: var(--color-surface);
  color: var(--color-text);
}

.section--dark .section__title,
.section--dark .text-h2 { color: var(--color-white); }

.section--dark .section__desc,
.section--dark .text-lead { color: rgba(255, 255, 255, 0.7); }

.section--dark .section__eyebrow,
.section--dark .text-eyebrow { color: var(--color-accent); }

.section__desc {
  font-size: var(--text-lead);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-muted);
}

/* ---- Header / Footer — contexto de marca ---- */

.header {
  background: var(--header-bg);
}

.footer {
  background: var(--footer-bg);
  color: var(--footer-text);
}

.footer__heading {
  font-size: var(--text-caption);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-white);
  margin-bottom: var(--space-md);
}

.footer__link,
.footer__desc {
  font-size: var(--text-small);
}

.footer__desc {
  line-height: var(--line-height-relaxed);
  color: var(--footer-text);
}

.footer__bottom {
  font-size: var(--text-caption);
  color: rgba(255, 255, 255, 0.45);
}

/* ---- Navegação ---- */

.nav__link {
  font-size: var(--text-nav);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

.nav__link--secondary {
  font-weight: var(--font-weight-normal);
  color: var(--color-gray);
}