/* Reset e fundamentos, mobile-first. */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-base);
  color: var(--color-navy);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; display: block; }

h1, h2, h3, h4, h5, p, ul, ol, figure { margin: 0; }

a { text-decoration: none; color: inherit; }

ul, ol { list-style: none; padding: 0; }

button { font-family: inherit; cursor: pointer; }

.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.text-orange { color: var(--color-orange); }
.text-center { text-align: center; }

/* Escala tipográfica confirmada via Figma (Heading/H* nas variáveis do
   arquivo). Mobile-first: tamanho reduzido abaixo de 768px. */
h1, h2, h3, h4 { text-wrap: balance; }

/* Mobile: títulos e subtítulos de todas as seções com linhas parelhas
   (sem palavra sozinha no fim). "!important" porque várias seções
   forçam "text-wrap: wrap" pra reproduzir as quebras do Figma no
   desktop — isso só vale a partir de 768px. Textos de card usam
   "pretty" (evita órfã sem igualar as linhas). */
@media (max-width: 767px) {
  h1, h2, h3, h4,
  .lead, .lead p,
  .eyebrow { text-wrap: balance !important; }
  .bento-card-text p,
  .segmento-card p,
  .stat-desc,
  .accordion-body p { text-wrap: pretty; }
}
h1 { font-size: 36px; font-weight: 700; line-height: 1.3; letter-spacing: -0.36px; }
h2 { font-size: 28px; font-weight: 600; line-height: 1.3; letter-spacing: -0.28px; }
h3 { font-size: 22px; font-weight: 700; line-height: 1.3; letter-spacing: -0.22px; }
h4 { font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: -0.18px; }

@media (min-width: 768px) {
  h1 { font-size: 64px; letter-spacing: -0.64px; }
  h2 { font-size: 44px; letter-spacing: -0.44px; }
  h3 { font-size: 32px; letter-spacing: -0.32px; }
  h4 { font-size: 24px; letter-spacing: -0.24px; }
}

.lead {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-gray-04);
}
@media (min-width: 768px) {
  .lead { font-size: 18px; max-width: 620px; }
}
.lead.text-center { margin-left: auto; margin-right: auto; }

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  overflow: hidden;
  position: absolute !important;
  word-wrap: normal !important;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999999;
  background: var(--color-navy);
  color: var(--color-white);
  padding: 12px 20px;
}

.skip-link:focus {
  left: 20px;
  top: 20px;
}