/* ============================================================
   Base — tipografia Poppins, container, utilitários
   ============================================================ */

html {
  scroll-padding-top: 96px;
  background: var(--bg-light);
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--color-ink);
  background: var(--bg-light);
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
}

main {
  display: block;
  position: relative;
}

/* ─── Containers ─── */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter-x);
}
.container--narrow { max-width: var(--container-narrow); }
.container--wide   { max-width: var(--container-wide); }
.container--full   { max-width: var(--container-full); }

/* ─── Tipografia base · Poppins ─── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: inherit;
}
h1 { font-size: var(--fs-h1); font-weight: 500; }
h2 { font-size: var(--fs-h2); font-weight: 500; }
h3 { font-size: var(--fs-h3); font-weight: 500; }
h4 { font-size: var(--fs-h4); font-weight: 500; }
h5 { font-size: var(--fs-h5); font-weight: 500; }
h6 { font-size: var(--fs-h6); font-weight: 500; }

.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  font-weight: 500;
}

/* Eyebrow · marcador de seção */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
}
.eyebrow::before {
  content: "";
  width: 32px;
  height: 1px;
  background: currentColor;
}
.eyebrow--no-line::before { display: none; }

/* Variante com linha em cima (vertical) */
.eyebrow--top {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}
.page-hero--center .eyebrow--top,
.section-head--center .eyebrow--top {
  align-items: center;
}
.on-dark .eyebrow,
.bg-dark .eyebrow { color: var(--color-accent); }

/* Lead · subtítulo de seção */
.lead {
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  line-height: var(--lh-relaxed);
  color: var(--color-ink-muted);
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
}
.bg-dark .lead,
.on-dark .lead { color: var(--color-text-muted); }

.body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); }
.body-sm { font-size: var(--fs-body-sm); }
.micro { font-size: var(--fs-micro); letter-spacing: 0.02em; }

.text-accent { color: var(--color-accent); }
.text-soft { color: var(--color-ink-soft); }
.text-muted { color: var(--color-ink-muted); }
.on-dark .text-soft { color: var(--color-text-soft); }
.on-dark .text-muted { color: var(--color-text-muted); }

/* Destaque inline · Poppins light italic em laranja */
em.accent,
h1 em, h2 em, h3 em, h4 em, h5 em {
  font-style: italic;
  font-weight: 300;
  color: var(--color-accent);
}
em.italic-display {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
}

/* ─── Sections ─── */
section {
  position: relative;
  padding-block: var(--section-y);
}
section.section-lg { padding-block: var(--section-y-lg); }
section.bg-dark {
  background: var(--bg-dark);
  color: var(--color-text);
}
section.bg-dark-deep {
  background: var(--bg-dark-deep);
  color: var(--color-text);
}
section.bg-light {
  background: var(--bg-light);
  color: var(--color-ink);
}
section.bg-light-warm {
  background: var(--bg-light-warm);
  color: var(--color-ink);
}

.on-dark { color: var(--color-text); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4, .on-dark h5 { color: var(--color-text); }
section.bg-dark h1, section.bg-dark h2, section.bg-dark h3, section.bg-dark h4, section.bg-dark h5,
section.bg-dark-deep h1, section.bg-dark-deep h2, section.bg-dark-deep h3, section.bg-dark-deep h4, section.bg-dark-deep h5 { color: var(--color-text); }
section.bg-light h1, section.bg-light h2, section.bg-light h3, section.bg-light h4, section.bg-light h5,
section.bg-light-warm h1, section.bg-light-warm h2, section.bg-light-warm h3, section.bg-light-warm h4, section.bg-light-warm h5 { color: var(--color-ink); }

/* ─── Section header pattern ─── */
.section-head {
  display: grid;
  gap: var(--s-3);
  margin-bottom: var(--s-12);
  max-width: 64rem;
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
}
.section-head--center .eyebrow { justify-content: center; }

/* ─── Hairline dividers ─── */
.hairline {
  display: block;
  height: 1px;
  background: var(--line-light);
  border: 0;
  width: 100%;
}
.on-dark .hairline,
.bg-dark .hairline { background: var(--line-dark); }

.hairline-accent {
  display: block;
  width: 64px;
  height: 1px;
  background: var(--color-accent);
  margin-bottom: var(--s-3);
}

/* ─── Utilidades ─── */
.flex { display: flex; }
.grid { display: grid; }
.gap-1 { gap: var(--s-1); }
.gap-2 { gap: var(--s-2); }
.gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); }
.gap-6 { gap: var(--s-6); }
.gap-8 { gap: var(--s-8); }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.text-center { text-align: center; }
.relative { position: relative; }
.full-w { width: 100%; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}