/* ============================================================
   07 — UTILITÁRIOS
   ============================================================ */

.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;
}

.text-center { text-align: center; }
.text-center p { margin-inline: auto; text-align: center; }

.mx-auto { margin-inline: auto; }

/* ---- RITMO VERTICAL ----
   Três passos, e só três. Antes havia nove valores de margem escolhidos caso
   a caso (mt-3 a mt-9), o que fazia o intervalo entre blocos variar de seção
   para seção sem regra. A distância entre dois elementos passa a ser uma
   decisão semântica — o quanto eles se pertencem — e não um número solto.

   · tight  (24px) — título e o parágrafo que o explica: pertencem juntos
   · flow   (40px) — elementos distintos dentro do mesmo bloco
   · block  (64px) — sub-blocos independentes dentro de uma seção

   Acima disso vem o padding de seção (--section-py), que separa assuntos. */
.flow-tight { margin-top: var(--space-5); }   /* 24px */
.flow       { margin-top: var(--space-7); }   /* 40px */
.flow-block { margin-top: var(--space-9); }   /* 64px */

.mt-0 { margin-top: 0; }

/* Título de família na listagem de produtos: mesmo intervalo sempre. */
.family-heading { margin-top: var(--space-9); margin-bottom: var(--space-5); }
.family-heading:first-of-type { margin-top: var(--space-8); }

.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }

.flex       { display: flex; }
.flex-wrap  { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }

.w-full  { width: 100%; }
.relative { position: relative; }

.text-muted   { color: var(--txt-faint); }
.text-on-dark { color: var(--txt-soft); }
.text-blue    { color: var(--color-blue); }

.fs-lead  { font-size: var(--fs-lead); line-height: var(--lh-lead); }
.fs-small { font-size: var(--fs-small); }

.font-display { font-family: var(--font-display); }
.fw-bold { font-weight: var(--fw-bold); }

.measure { max-width: 68ch; }
.measure-narrow { max-width: 54ch; }

.no-scroll { overflow: hidden; }

/* Container aninhado: herda o padding lateral do container externo. */
.container--nested { padding-inline: 0; }

/* Alinha o topo das colunas em vez de centralizá-las. */
.items-start { align-items: start; }

/* Compensa o header fixo em página que começa direto no conteúdo. */
.pt-header { padding-top: calc(var(--header-h) + var(--space-8)); }

/* Endereço sem itálico. */
address { font-style: normal; }

/* Proporções de placeholder */
.ratio-1-1   { --ph-ratio: 1 / 1; }
.ratio-4-3   { --ph-ratio: 4 / 3; }
.ratio-3-4   { --ph-ratio: 3 / 4; }
.ratio-4-5   { --ph-ratio: 4 / 5; }
.ratio-16-9  { --ph-ratio: 16 / 9; }
.ratio-16-10 { --ph-ratio: 16 / 10; }
.ratio-21-9  { --ph-ratio: 21 / 9; }

/* Ordem em telas grandes */
@media (min-width: 1024px) {
  .lg\:order-first { order: -1; }
  .lg\:order-last  { order: 1; }
}

/* Impressão */
@media print {
  .header, .footer, .wa-float, .uploader-bar, .cta-band, .drawer, .drawer-backdrop { display: none; }
  body { color: #000; background: #fff; }
  .section { padding-block: 1rem; }
}