/* ============================================================================
   base.css — reset, primitivas, tipografia base, container, utilitários.
   Consome tokens de tokens.css. Componentes → components.css; blocos de página
   → sections.css; breakpoints → responsive.css; motion → effects.css.
   ============================================================================ */

/* ── Reset moderno ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  min-height: 100dvh;
  font-family: var(--font-text);
  font-size: var(--font-size-body);
  line-height: var(--font-leading-normal);
  color: var(--color-ink);
  background: var(--color-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }

/* ── Tipografia base ──────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-light);
  line-height: var(--font-leading-snug);
  letter-spacing: var(--font-tracking-tight);
}
/* Display uppercase é a assinatura; aplicado por classe (.section-header__title,
   .hero__title) para não forçar caixa-alta em todo heading. */
h1 { font-size: var(--font-size-display); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }

/* ── Quebra de linha: sem viúva (última linha com uma palavra só) ──────────── */
/* Duas ferramentas, usos distintos. `balance` reparte as linhas do bloco inteiro
   e vale para bloco curto: o navegador desiste acima do limite de linhas dele
   (4 a 6) e volta à quebra normal. `pretty` só reescreve as últimas linhas, é o
   certo para texto corrido, que passa desse limite.
   Sem polyfill de propósito: navegador que não suporta ignora a declaração e cai
   na quebra normal, que é o comportamento de hoje. Nada quebra, só não melhora.
   Medição: Chrome headless, varredura de 360px a 1600px de 10 em 10 nas 36
   páginas de dist/ (não só nas 9 de topo: as 28 PDPs concentravam o maior
   bolsão, os benefícios em `.pv-ben__t`). O número gravado aqui antes (135
   antes, 0 depois) era o da /sobre/ sozinha, apresentado como total do site, e
   o "0 depois" não considerava PDP nem `.cot__uni`. Contagem real na varredura
   completa está no relatório da rodada; o que vale como regra é a lista abaixo. */

/* Títulos. `.hero__title` e `.product-hero__headline` são display, mas estão
   marcados como <p> no HTML, então caíam na regra `p` abaixo e ficavam com
   `pretty`: era daí a viúva "lavoura." no hero, presente de 1160px a 1400px, e
   a "forte." no segundo slide. Os demais títulos já são h1 a h4. */
h1, h2, h3, h4,
.hero__title,
.product-hero__headline { text-wrap: balance; }

/* Texto corrido. */
p { text-wrap: pretty; }

/* Leads e blurbs: bloco curto, largura já travada em 34ch a 60ch, no máximo 4
   linhas medidas em toda a varredura. Cabe folgado no limite do `balance`, que
   resolve o que o `pretty` deixou passar. O caso teimoso era o
   `.segment-hero__intro` do Portfólio, viúva "limpa-tanque." em 104 das 125
   larguras testadas. Nenhuma largura de texto foi alterada aqui.
   `.pv-ben__t` entrou depois: é o texto de cada benefício da PDP, um item de
   grade (bloco, portanto) de 1 a 2 linhas, e era o maior bolsão de viúvas do
   site, presente nas 28 PDPs. Não pegava nenhuma regra porque não é `p` nem
   título. `.cot__uni` idem, na /indicadores/, onde "saca de 60 kg · Paranaguá"
   deixava "Paranaguá" sozinha entre 770px e 890px. */
.hero__text,
.section-header__lead,
.segment-hero__intro,
.segment-card__text,
.ind-abre__lead,
.cat-filter__desc,
.cot__uni,
.intro__text,
.listing__intro,
.pv-lead,
.pv-step__x,
.feature p,
.pv-ben__t { text-wrap: balance; }

/* `.intro__text`, `.pv-lead` e `.pv-step__x` estavam fora da lista, com a
   justificativa de que o `balance` desiste em bloco longo e piora. Medido de
   novo em Chrome headless, 12 larguras de 360px a 1600px, comparando os dois
   estados no mesmo DOM:
     .pv-lead + .pv-step__x nas 28 PDPs → 141 viúvas com `pretty`, 25 com
       `balance`, e 3162 linhas nos DOIS estados (nenhum bloco ficou mais alto);
     .intro__text em / e /sobre/ → 12 viúvas com `pretty` ("retorno.", "AGRO.",
       "pureza."), 2 com `balance`, ao custo de UMA linha a mais no total.
   Ou seja, o motivo escrito antes não se confirma na medição, e o custo de
   altura é nulo ou de uma linha.
   `.feature p` entrou pelo mesmo teste: são os quatro blurbs da /sobre/, `p`
   sem classe própria, e sozinhos respondiam por 9 das viúvas restantes.
   Placar da varredura completa (36 páginas × 12 larguras de 360 a 1600):
   163 ocorrências antes desta rodada, 27 depois. As 27 que sobram são
   descrições longas de produto (`.pv-lead`) onde o `balance` desiste de
   verdade; para elas o caminho é encurtar o copy, não mexer em CSS. */

a { color: var(--color-brand); text-decoration-thickness: from-font; text-underline-offset: 0.12em; }
a:hover { color: var(--color-brand-strong); }

/* ── Container ────────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-md);
}
@media (min-width: 768px) { .container { padding-inline: var(--space-lg); } }

/* ── Ícones (sprite i-*) ──────────────────────────────────────────────────── */
/* Padrão: outline currentColor, stroke 1.75 (DESIGN §7.1). */
.icon {
  width: var(--icon-md);
  height: var(--icon-md);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--solid { fill: currentColor; stroke: none; } /* WhatsApp (Simple Icons) */
.icon--lg { width: var(--icon-lg); height: var(--icon-lg); }
.icon--xl { width: var(--icon-xl); height: var(--icon-xl); }

/* ── Acessibilidade ───────────────────────────────────────────────────────── */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.skip-link {
  position: absolute;
  left: var(--space-md);
  top: -100px;
  z-index: var(--z-toast);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface);
  color: var(--color-brand);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  transition: top var(--motion-duration-fast) var(--motion-ease-standard);
}
.skip-link:focus { top: var(--space-md); }

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

/* ── Utilitários ──────────────────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--font-text);
  text-transform: uppercase;
  letter-spacing: var(--font-tracking-wider);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent-deep);
}
[hidden] { display: none !important; }