/* ============================================================================
   components.css — peças reutilizáveis (DESIGN §7). Consomem tokens.
   Transposto do catálogo validado docs/preview.html para BEM pragmático.
   ============================================================================ */

/* ── Botão ────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: 44px;
  line-height: 1;
  padding: 0 var(--space-lg);
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-text);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-body);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--motion-duration-fast) var(--motion-ease-standard),
              color var(--motion-duration-fast) var(--motion-ease-standard);
}
.btn--primary,
.btn--whatsapp { background: var(--color-brand); color: var(--color-on-brand); }
.btn--primary:hover,
.btn--whatsapp:hover { background: var(--color-brand-strong); color: var(--color-on-brand); }
.btn--accent { background: var(--color-accent); color: var(--color-on-accent); } /* verde só c/ texto escuro */
.btn--accent:hover { background: var(--color-accent-strong); color: var(--color-on-accent); }
.btn--ghost { background: transparent; color: var(--color-brand); border: 1px solid var(--color-brand); }
.btn--ghost:hover { background: rgb(var(--color-brand-rgb) / 0.06); color: var(--color-brand); }
.btn--on-dark { background: var(--color-surface); color: var(--color-brand); }
.btn--on-dark:hover { background: var(--color-canvas); color: var(--color-brand-strong); }
.btn[aria-disabled="true"], .btn:disabled {
  background: var(--color-hairline); color: var(--color-ink-muted);
  cursor: not-allowed; pointer-events: none;
}

/* ── Section header (eyebrow + título + lead) ─────────────────────────────── */
.section-header { display: grid; gap: var(--space-sm); margin-bottom: var(--space-xl); max-width: 60ch; }
.section-header__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-display);
  line-height: var(--font-leading-tight);
  letter-spacing: var(--font-tracking-tight);
  color: var(--color-ink);
}
.section-header__lead { font-size: var(--font-size-lg); color: var(--color-ink-muted); max-width: 52ch; }
.section-header--on-brand .eyebrow { color: var(--color-accent); }
.section-header--on-brand .section-header__lead { color: rgb(var(--color-canvas-rgb) / 0.85); }

/* ── Filtro dinâmico por subcategoria (Agricultura/Pecuária/Portfólio) ─────── */
.listing__intro { display: none; }
.js-cats .listing__intro { display: block; }
.cat-filter__tabs { display: none; flex-wrap: wrap; gap: var(--space-sm); margin: var(--space-lg) 0 var(--space-md); }
.js-cats .cat-filter__tabs { display: flex; }
.cat-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: 999px;
  border: 1px solid var(--color-hairline); background: var(--color-surface); color: var(--color-ink);
  font-family: var(--font-text); font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background var(--motion-duration-fast) var(--motion-ease-standard),
              color var(--motion-duration-fast) var(--motion-ease-standard),
              border-color var(--motion-duration-fast) var(--motion-ease-standard);
}
.cat-tab:hover { border-color: var(--color-brand); }
.cat-tab.is-active { background: var(--color-brand); color: var(--color-on-brand); border-color: var(--color-brand); }
.cat-tab__n { font-size: 0.82em; font-weight: var(--font-weight-medium); opacity: 0.6; }
.cat-tab.is-active .cat-tab__n { opacity: 0.85; }
.cat-filter__desc { color: var(--color-ink-muted); max-width: 62ch; margin: 0 0 var(--space-lg); }
.cat-filter__empty { color: var(--color-ink-muted); padding: var(--space-xl) 0; }
/* Cards entram com stagger ao filtrar (animation-delay inline via cat-filter.js). */
.js-cats .cat-filter__grid > .product-card { opacity: 0; }
.js-cats .cat-filter__grid > .product-card.is-in { opacity: 1; animation: cardIn 0.45s var(--motion-ease-standard); }
@keyframes cardIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .js-cats .cat-filter__grid > .product-card { opacity: 1; }
  .js-cats .cat-filter__grid > .product-card.is-in { animation: none; }
}

/* ── Carrossel (scroll-snap nativo + chrome via carousel.js) ────────────────
   Track = scroller com snap: swipe/trackpad/teclado funcionam SEM JS. O JS só
   liga setas/dots (.js-car) e os esconde quando não há overflow. Cards "peek"
   no mobile (largura < 100% mostra a borda do próximo = affordance de arrasto). */
.carousel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-lg); }
.carousel__head .product-block__title { margin-bottom: 0; }
.carousel__nav { display: none; gap: var(--space-xs); }
.carousel.js-car.has-overflow .carousel__nav { display: flex; }
.carousel__arrow {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--color-surface); color: var(--color-brand);
  border: 1px solid var(--color-hairline);
  transition: background var(--motion-duration-fast) var(--motion-ease-standard),
              border-color var(--motion-duration-fast) var(--motion-ease-standard);
}
/* Sem `:disabled` desde 2026-08-01: com o giro infinito a seta nunca chega ao
   fim da faixa, então o estado apagado deixou de existir. */
.carousel__arrow:hover { border-color: var(--color-brand); }
.carousel__track {
  display: flex; gap: var(--space-md);
  overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;               /* dots são o indicador */
  padding: 4px;                        /* respiro p/ sombra/hover dos cards */
  margin: -4px;
}
.carousel__track::-webkit-scrollbar { display: none; }
/* O `position: relative` não é enfeite e não pode sair: ele é o que mantém o
   conteúdo do carrossel DENTRO do recorte do track.
   Medido em 2026-08-01: `overflow` recorta descendente em fluxo, mas NÃO recorta
   descendente `position: absolute` cujo bloco contêiner esteja fora do scroller.
   O `.visually-hidden` dos chips de nutriente é absoluto, e sem nenhum ancestral
   posicionado aqui dentro ele resolvia contra o bloco inicial e escapava: com os
   clones do giro infinito, sobravam spans a 4.625px numa janela de 1.440, e o
   `<html>` passava a declarar essa largura. A página não rolava no desktop, mas
   no toque o navegador arrasta assim mesmo. Com o item posicionado, o bloco
   contêiner passa a ser ele, que vive dentro do track, e o recorte volta a valer. */
.carousel__item { flex: 0 0 auto; width: 78%; scroll-snap-align: start; display: flex; position: relative; }
.carousel__item .product-card { width: 100%; }
/* Cópias que o carousel.js insere para o giro infinito. Idênticas ao original
   de propósito: é a repetição que faz o salto de uma volta ser invisível.
   Somem quando não há laço, senão inventariam rolagem onde os cards já cabem. */
.carousel:not(.has-overflow) .carousel__item--clone { display: none; }
.carousel__dots { display: none; justify-content: center; gap: 0; margin-top: var(--space-md); }
.carousel.js-car.has-overflow .carousel__dots { display: flex; }
/* O PONTO continua com 8px; quem cresce para 24 é a ÁREA CLICÁVEL, via padding.
   Medido antes: 10x10 na tela, contra os 24x24 que a WCAG 2.5.8 pede (auditoria
   2026-07-30, AUD-006). O ponto vive no `::before` para o botão poder ser grande
   sem virar uma bola grande. O `gap` foi a zero porque o padding já separa. */
.carousel__dot {
  width: 24px; height: 24px; padding: 0; cursor: pointer;
  border: 0; background: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.carousel__dot::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-hairline);
  transition: background var(--motion-duration-fast) var(--motion-ease-standard),
              transform var(--motion-duration-fast) var(--motion-ease-standard);
}
.carousel__dot.is-active::before { background: var(--color-brand); transform: scale(1.25); }

/* ── Carrossel com giro automático (Home) ─────────────────────────────────
   Rodapé de controles centralizado: seta, dots, pausa, seta. Diferente do
   `.carousel__head` das PDPs, onde os controles moram na linha do título
   porque lá existe título; aqui o cabeçalho da seção já foi usado. */
/* Cards do carrossel da Home: mesma largura com "peek" das PDPs, que é o que o
   gestor aprovou. O override de 290px que existia aqui saiu junto com o rodapé
   de controles próprio: a Home passou a usar a mesma marcação das PDPs. */


/* ── Painel de matérias-primas (aba do filtro, Portfólio) ──
   Container; o conteúdo (grupos/itens .mp-*) é estilizado em sections.css.
   Define o acento dos chips de elemento = verde-escuro calmo (não o lima). */
.cat-filter__mp { margin-top: var(--space-md); --product-accent: var(--color-accent-deep); }

/* ── Chip de nutriente — pílula de composição (supersede o círculo do DESIGN §6/§7) ── */
.nutrient-chip {
  --chip-c: var(--product-accent, var(--color-accent-deep));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  /* Pílula de composição (não círculo): a largura variável quebra a grade e lê
     como conjunto de tags — evita o efeito "cartela de bingo" quando há muitos
     nutrientes. Fundo = tint leve do acento; símbolo em tom PROFUNDO (mistura
     com o ink garante AA ≥4.5:1 mesmo em acentos claros — dourado/lima). */
  background: color-mix(in srgb, var(--chip-c) 14%, transparent);
  color: color-mix(in srgb, var(--chip-c) 55%, var(--color-ink));
  font-family: var(--font-text);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}
.nutrient-list { display: flex; flex-wrap: wrap; gap: var(--space-sm); list-style: none; padding: 0; margin: 0; }

/* ── Card de produto ──────────────────────────────────────────────────────── */
.product-card {
  --product-accent: var(--color-accent-deep);
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--motion-duration-base) var(--motion-ease-standard),
              transform var(--motion-duration-base) var(--motion-ease-standard);
}
.product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
/* Card sem palco de foto. NENHUM produto cai aqui hoje: os 28 têm packshot.
   A regra fica porque o template deixou de emitir o palco vazio, e se um
   produto novo entrar sem packshot é este `align-self` que impede o card de
   esticar até a altura da linha e abrir um vão branco embaixo do "Ver produto". */
.product-card--sem-foto { align-self: start; }
.product-card__shot {
  position: relative;
  aspect-ratio: 4 / 3;
  display: grid; place-items: center;
  /* "Palco" sutil: degradê radial quente (centro claro → borda um tom mais profunda)
     diferencia a área da foto do fundo creme da página e do corpo branco do card, e
     dá profundidade ao packshot (sem competir com o produto). */
  background: radial-gradient(130% 105% at 50% 32%,
    color-mix(in srgb, var(--color-canvas) 97%, var(--color-ink)) 0%,
    color-mix(in srgb, var(--color-canvas) 86%, var(--color-ink)) 100%);
  border-bottom: 1px solid var(--color-hairline);
  color: var(--color-ink-muted);
  font-size: var(--font-size-xs);
}
/* Imagem ABSOLUTA (inset:0) → não contribui para a altura da caixa; quem manda é o
   aspect-ratio 4/3. Assim proporções diferentes de foto (ex.: Produ-Seeds 654×900 ×
   Mito 847×900) NÃO mudam a altura da área — a linha divisória fica igual em todos os
   cards. object-fit:contain mantém a proporção; padding = respiro (packshot menor). */
.product-card__shot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: var(--space-md); }
/* Packshot ABSOLUTO (não empurra a altura → o card fica fixo em 4/3), mas ancorado
   na BASE (inset bottom) e com altura proporcional ao volume (--pack-scale por
   data-vol). Assim 1L fica menor que 20L, todas alinham pela mesma linha de base,
   e a área de imagem tem a MESMA altura em todos os cards. */
.product-card__shot .product-card__packshot {
  position: absolute; inset: auto 0 0 0;
  height: calc(90% * var(--pack-scale, 1));
  object-position: center bottom;
  padding: 0 9% 5%;
}
/* Escala da bombona por volume (data-vol no packshot) — 1L menor … 20L maior.
   Vale no card e no hero. Ajuste fino nestes 3 valores. */
[data-vol="1l"]  { --pack-scale: 0.56; }
[data-vol="5l"]  { --pack-scale: 0.78; }
[data-vol="20l"] { --pack-scale: 1; }
/* O 1L (bombona estreita) ficava pequeno demais → um pouco maior por contexto
   (o valor base 0.56 vira só fallback). Card e hero afináveis em separado. Gestor 2026-07-23. */
.product-card__packshot[data-vol="1l"] { --pack-scale: 0.74; }
.product-hero__packshot[data-vol="1l"] { --pack-scale: 0.76; }
/* No CARD, o 5L ficava pequeno e o rótulo não se lia (gestor 2026-07-25). Com o
   packshot rotulado no ar, o card precisa mostrar de qual produto se trata, então
   aqui a legibilidade manda mais que a proporção real de volume. O hero segue
   em 0.78, porque lá a bombona já aparece grande. A ordem 1L < 5L < 20L continua. */
.product-card__packshot[data-vol="5l"] { --pack-scale: 0.92; }
.product-card__body { padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm); flex: 1; }
.product-card__family {
  font-size: var(--font-size-xs); text-transform: uppercase;
  letter-spacing: var(--font-tracking-wide);
  /* `--product-accent-text` e não `--product-accent`: 12px em cor de marca sobre
     branco reprovava em 12 dos 28 produtos, chegando a 1,45:1 (AUD-007). A
     variável é a mesma cor escurecida até 4,5:1; quem já passava não mudou. */
  color: var(--product-accent-text, var(--product-accent)); font-weight: var(--font-weight-semibold);
}
.product-card__name { font-family: var(--font-text); font-weight: var(--font-weight-bold); font-size: var(--font-size-h3); color: var(--color-ink); }
.product-card__line { font-size: var(--font-size-sm); color: var(--color-ink-muted); }
/* O "Ver produto" media 22px de altura e reprovava no critério 2.5.8 da WCAG 2.2,
   que exige alvo de 24x24 CSS px. A altura vinha só do conteúdo: 14px de fonte
   (--font-size-sm) x 1.6 de entrelinha = 22,4px, e o ícone de 18px não passava
   disso. `min-height` cresce a CAIXA clicável, não o texto: a fonte segue em
   14px e o `align-items: center` recentra o conteúdo dentro dos 24px. O card
   engorda no máximo 1,6px, e só naquele que for o mais alto da fileira, porque
   nos demais o `margin-top: auto` absorve a diferença. A largura já passa folgada
   (o rótulo e a seta somam mais de 100px), então só a altura precisava de conserto. */
.product-card__link {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: var(--space-xs);
  min-height: 24px;
  color: var(--color-brand); font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm);
  text-decoration: none;
}
.product-card__link:hover { text-decoration: underline; }
/* Cards de catálogo (resumido) = mesmo palco 4/3 dos demais (todos têm rótulo);
   a única diferença é não terem link de PDP. */

/* ── Stat card (prova) ────────────────────────────────────────────────────── */
.stat-card {
  background: var(--color-accent-deep);
  color: var(--color-on-brand);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  display: grid; gap: var(--space-xs);
}
.stat-card__num { font-family: var(--font-display); font-weight: var(--font-weight-light); font-size: var(--font-size-hero); line-height: 1; }
.stat-card__label { font-size: var(--font-size-lg); }
.stat-card--brand { background: var(--color-brand); }

/* ── Tag ──────────────────────────────────────────────────────────────────── */
/* `.badge`, `.badge--success` e `.badge--danger` saíram em 2026-07-26: nasceram
   no catálogo docs/preview.html e nenhum template ou script jamais os aplicou.
   `.tag` também não tem uso hoje, e FICA de propósito: é componente declarado no
   DESIGN §7 (pílula neutra), tem uma única regra e é o formato que qualquer
   rótulo novo vai reaproveitar. O critério da limpeza não é "sem uso", é "sem
   uso E sem lugar no sistema": badge dependia de cores de status que o site não
   usa em lugar nenhum. */
.tag {
  display: inline-flex; align-items: center;
  padding: 4px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--color-hairline);
  font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: var(--font-tracking-wide);
  color: var(--color-ink-muted);
}

/* Saíram em 2026-07-26, todas sem um único uso em template ou script:
   `.divider` e `.divider--accent` (nenhum <hr> no site);
   `.filter-group`, `.filter-group__label`, `.filter-group__options`,
   `.filter-chip` e `.filter-chip__count` (o filtro por facetas foi substituído
   pelas abas `.cat-tab`, lá em cima, quando o filtro virou dinâmico);
   `.category-tile` e derivadas, órfãs junto com o macro categoryTile. A
   armadilha de deixar o partial sem estilo foi fechada: o arquivo saiu de
   _includes/partials/ para tools/category-tile.njk.aposentado, fora do alcance
   do Eleventy. Volta com um mv, junto com o CSS, se o tile for retomado. */

/* ── Formulário ───────────────────────────────────────────────────────────── */
.field { display: grid; gap: 6px; margin-bottom: var(--space-md); }
.field label { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.field input, .field select, .field textarea {
  min-height: 44px; padding: var(--space-sm) var(--space-md);

  border: 1px solid var(--color-hairline); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-ink);
  font-family: var(--font-text); font-size: var(--font-size-body);
}
.field textarea { min-height: auto; resize: vertical; }
/* Seta do `select` desenhada por nós (2026-07-27). A nativa ficava colada na
   borda direita e caía dentro da curva do `border-radius: 16px`, parecendo
   espremida. Aumentar o `padding-right` NÃO resolve: medido, o Chrome desenha a
   seta na borda do elemento e ignora o padding. A única saída é desligar a
   nativa com `appearance: none` e posicionar a nossa.

   O glifo é o `chevron-down` do Lucide, o mesmo banco do sprite, com o traço
   1.75 do sistema. Vai como `data:` e não como `<use>` porque background-image
   não alcança o sprite; por isso a cor é fixa em `--color-ink` (#26231f), que é
   a mesma do texto do campo. É a única cor escrita fora dos tokens em todo o
   CSS, e existe porque `currentColor` não atravessa data-URI.

   `padding-right` de 40px: a seta ocupa 20px e fica a 16px da borda, então
   sobram 4px de folga antes do texto do campo encostar nela. */
.field select {
  appearance: none; -webkit-appearance: none;
  padding-right: var(--space-xl);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2326231f'%20stroke-width='1.75'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-md) center;
  background-size: 20px 20px;
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--color-brand); }
.field input.is-error, .field select.is-error, .field textarea.is-error { border-color: var(--color-danger); }
.field__error { color: var(--color-danger); font-size: var(--font-size-sm); }
.field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Os três modificadores abaixo NÃO aparecem em nenhum HTML e mesmo assim ficam:
   quem os aplica é o scripts/form.js, que monta o nome em tempo de execução
   ("form-status--" + type, linha 19). Busca por texto no dist não acha nenhum.
   Tipos em uso hoje: loading, success, error. */
.form-status { margin-top: var(--space-md); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); font-size: var(--font-size-sm); }
.form-status--success { background: color-mix(in srgb, var(--color-success) 12%, var(--color-surface)); color: var(--color-success-strong); }
.form-status--error { background: color-mix(in srgb, var(--color-danger) 12%, var(--color-canvas)); color: var(--color-danger); }
.form-status--loading { background: var(--color-canvas); color: var(--color-ink-muted); }

.contact-grid { display: grid; gap: var(--space-2xl); }
/* A coluna da direita virou quatro blocos `.feature` empilhados (2026-07-26).
   Era uma `.contact-info`, lista de ícone pequeno mais uma linha de texto, que
   media 353px contra os 474px do formulário ao lado e deixava o pé da coluna
   vazio. Os blocos usam o mesmo componente da /sobre/, e a lista saiu do CSS
   junto com o HTML: nenhum template escreve mais `.contact-info`. */
.contact-grid__info { display: grid; gap: var(--space-lg); align-content: start; }

/* Bloco de contato (2026-07-27). Substituiu o uso do `.feature` aqui, que
   empilhava ícone, título e texto: aquilo serve a um CARTÃO de pilar, onde o
   ícone é o assunto, e numa lista criava quatro ícones soltos acima de quatro
   h2, sem régua vertical que o olho pudesse seguir.

   Agora o ícone e o rótulo dividem a mesma linha, e o dado desce alinhado com o
   RÓTULO, não com o ícone. O recuo do dado é a largura do ícone mais o vão
   (24 + 10), escrito numa variável para os dois lados não saírem de sincronia
   se o ícone mudar de tamanho. */
.contato-bloco { --ic: 24px; --vao: 10px; display: grid; gap: 6px; }
.contato-bloco__rot {
  display: flex; align-items: center; gap: var(--vao);
  font-family: var(--font-text); font-weight: var(--font-weight-bold);
  font-size: var(--font-size-body); color: var(--color-ink);
}
.contato-bloco__rot .icon { width: var(--ic); height: var(--ic); color: var(--color-accent-deep); }
.contato-bloco__dado,
.contato-bloco__lista { margin-left: calc(var(--ic) + var(--vao)); color: var(--color-ink-muted); }
.contato-bloco__lista { list-style: none; padding: 0; display: grid; gap: 2px; }
/* Link sem sublinhado fixo, como no rodapé: quatro blocos com tudo sublinhado
   viravam uma parede de traços. O sublinhado volta no hover e no foco, que é
   quando ele informa alguma coisa. */
.contato-bloco a {
  text-decoration: none;
  /* 16px de linha viravam alvo de 16px. Com o padding vai a 26 (WCAG 2.5.8) e a
     margem negativa devolve o espaço, então a coluna não muda de altura. */
  display: inline-block; padding-block: 5px; margin-block: -5px;
}
.contato-bloco a:hover,
.contato-bloco a:focus-visible { text-decoration: underline; }


/* ── Indicator panel ──────────────────────────────────────────────────────── */
/* ── Indicadores (/indicadores/) ───────────────────────────────────────────
   Os números chegam pelo indicators.js, no navegador. O que está aqui é a
   casca: enquanto o dado não chega, cada valor mostra um esqueleto pulsando,
   e não um zero nem um traço, porque número falso numa página de cotação é o
   defeito mais caro que essa página pode ter.

   RITMO (2026-07-26): a primeira versão era creme do começo ao fim e lia como
   rascunho. Agora a página alterna faixas como o resto do site: azul na
   abertura, creme nas cotações, superfície no clima, verde nos números da casa. */
/* A alternância de faixas é feita por `.section--brand`, `.clima-band` e
   `.section--tight` na própria indicadores.njk, então o modificador
   `.ind-sec--sup` nunca chegou a ser escrito no template. Removido 2026-07-26.
   Removido junto o `.ind-sec { padding-block: var(--space-2xl) }`: era regra
   MORTA. Todo `.ind-sec` do HTML também carrega `.section`, os dois seletores
   têm a mesma especificidade (0,1,0) e sections.css é carregado DEPOIS de
   components.css no base.njk, então quem sempre venceu foi `.section`. O
   respiro dessa seção vem do par `.section .section--tight` no template. */

/* ── Abertura: título à esquerda, dólar à direita ──
   Antes o topo era só título e um texto de duas linhas, com metade da tela
   vazia à direita. O dólar subiu para cá porque é o número que conversa com o
   produto: insumo é dolarizado, e o câmbio é o custo da próxima compra. */
.ind-abre__inner { display: grid; gap: var(--space-xl); align-items: center; }
.ind-abre__titulo {
  font-family: var(--font-display); text-transform: uppercase;
  font-weight: var(--font-weight-light); font-size: var(--font-size-display);
  line-height: var(--font-leading-tight); letter-spacing: var(--font-tracking-tight);
  color: var(--color-on-brand); margin-top: var(--space-xs);
}
.ind-abre__lead { font-size: var(--font-size-lg); color: rgb(var(--color-canvas-rgb) / 0.85); max-width: 34ch; margin-top: var(--space-sm); }

/* ── Destaque: o número grande da página ──
   UM componente, dois usos: o dólar na faixa azul e o clima na foto. Antes eram
   duas caixas com estruturas diferentes e a página não rimava. A variante
   `--claro` é para faixa de cor sólida, onde não há foto para o vidro desfocar
   e um `backdrop-filter` não faria nada. */
.destaque {
  border-radius: var(--radius-lg); padding: var(--space-xl);
  display: grid; align-content: start; gap: var(--space-xs);
  color: #fff;
}
.destaque--claro { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.22); }
.destaque__eyebrow {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--font-size-xs); text-transform: uppercase;
  letter-spacing: var(--font-tracking-wide); color: #cfe8a0;
}
.destaque__titulo {
  display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap;
  margin-top: 4px; color: #fff;
  font-family: var(--font-display); text-transform: uppercase;
  font-weight: var(--font-weight-light); font-size: var(--font-size-h2);
  line-height: var(--font-leading-tight); letter-spacing: var(--font-tracking-tight);
}
.destaque__uf {
  font-family: var(--font-text); font-size: var(--font-size-xs);
  letter-spacing: var(--font-tracking-wide);
  border: 1px solid rgba(255,255,255,0.4); border-radius: var(--radius-pill); padding: 3px 9px;
}
.destaque__num {
  display: flex; align-items: flex-start; gap: 6px;
  margin: var(--space-md) 0 var(--space-sm);
  font-family: var(--font-display); font-weight: var(--font-weight-light);
  font-size: clamp(3.5rem, 7vw, 5.5rem); line-height: 0.9;
  font-variant-numeric: tabular-nums; color: #fff;
}
.destaque__num .grau, .destaque__num .quote__cur {
  font-size: 0.28em; margin-top: 0.3em; color: rgba(255,255,255,0.7);
}
.destaque__num .quote__num { font-size: 1em; line-height: inherit; color: #fff; }
.destaque__sub { font-size: var(--font-size-body); color: rgba(255,255,255,0.85); font-variant-numeric: tabular-nums; }
.destaque__sub.is-up { color: #cfe8a0; }
.destaque__stamp {
  margin-top: var(--space-sm);
  font-size: var(--font-size-xs); text-transform: uppercase;
  letter-spacing: var(--font-tracking-wide); color: rgba(255,255,255,0.65);
  font-variant-numeric: tabular-nums;
}

.ind-head { margin-bottom: var(--space-lg); }
.ind-head__title {
  font-family: var(--font-display); text-transform: uppercase;
  /* `--font-size-display`, não `--font-size-h1`: esse token NÃO existe em
     tokens.css e o título caía para o tamanho herdado, ficando minúsculo. */
  font-weight: var(--font-weight-light); font-size: var(--font-size-display);
  line-height: var(--font-leading-tight); letter-spacing: var(--font-tracking-tight);
  color: var(--color-ink);
}
.ind-head__stamp {
  margin-top: 6px; color: var(--color-ink-muted);
  font-size: var(--font-size-xs); text-transform: uppercase;
  letter-spacing: var(--font-tracking-wide); font-variant-numeric: tabular-nums;
}
/* `.ind-head--claro` removido em 2026-07-26: o único cabeçalho sobre faixa
   escura da página é o `.ind-abre__titulo`, que já traz a cor por conta. */

/* ── Fileira de cotações ──
   Sem caixa e sem ícone. Cartão com borda e muito respiro empurrava a fileira
   para 330 px de altura no celular e lia como peça de marketing; régua fina
   entre as colunas lê como mesa de mercado. Ícone ficou de fora de propósito:
   o banco não tem espiga de milho nem capulho de algodão, e ícone aproximado
   (trigo no lugar de milho) é pior do que ícone nenhum. */
.cot { display: grid; gap: 0; border-top: 1px solid var(--color-hairline); }
.cot__item {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  column-gap: var(--space-md); row-gap: 2px;
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-hairline);
}
.cot__nome { font-family: var(--font-text); font-weight: var(--font-weight-semibold); font-size: var(--font-size-body); color: var(--color-ink); }
/* `tabular-nums` mantém as casas decimais alinhadas entre linhas de valores
   muito diferentes (65,74 e 3.388,21), senão a coluna treme. */
.cot__valor {
  grid-column: 2; grid-row: 1 / span 2;
  display: flex; align-items: baseline; gap: 4px;
  font-family: var(--font-display); font-variant-numeric: tabular-nums;
  min-height: 32px;
}
.cot__uni { grid-column: 1; font-size: var(--font-size-sm); color: var(--color-ink-muted); }

.quote__cur { font-size: var(--font-size-sm); color: var(--color-ink-muted); }
.quote__num { font-size: var(--font-size-h2); line-height: 1; color: var(--color-ink); }
.quote__falha { font-family: var(--font-text); font-size: var(--font-size-sm); color: var(--color-ink-muted); }

/* `hairline` e não `canvas`: a fileira não tem cartão branco atrás, então um
   esqueleto da cor do fundo ficava invisível e a linha parecia quebrada. */
.quote__skeleton { display: block; width: 92px; height: 24px; border-radius: var(--radius-sm); background: var(--color-hairline); }
.quote__skeleton--claro { width: 150px; height: 44px; background: rgb(var(--color-canvas-rgb) / 0.22); }
@media (prefers-reduced-motion: no-preference) {
  .quote__skeleton { animation: ind-pulsa 1.4s ease-in-out infinite; }
}
@keyframes ind-pulsa { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* o iframe existe só para o widget do CEPEA rodar em lugar seguro */
.ind-oculto { position: absolute; width: 0; height: 0; border: 0; visibility: hidden; }


/* ── Clima: bento de vidro sobre foto ──
   Referência do gestor: widget de clima da Apple. Uma célula grande com a
   temperatura, quatro medidas do momento e uma coluna com os próximos dias.
   O vidro (véu + cartela) é o MESMO da faixa de culturas da PDP: o site tem um
   vidro só, senão viram dois parecidos e diferentes e o sistema apodrece.
   Ícones vêm do sprite (Lucide), nunca desenhados à mão. */
.clima-band {
  position: relative; overflow: hidden;
  background-color: #16281b;
  background-image: var(--clima-bg); background-size: cover;
  /* 32% e não 55%: a faixa mostra só 55% da altura da foto, e em 55% esse recorte
     caía EM CIMA do horizonte. Resultado: as nuvens, que são o assunto de uma faixa
     de clima, ficavam quase todas fora, e sobrava uma barra verde escura cortando a
     faixa em duas justo onde assentam as cartelas de vidro. Em 32% o recorte é só
     céu, com a nuvem ainda legível depois do blur de 10px, e o tom fica parelho de
     ponta a ponta, que é o que o texto branco sobre vidro precisa. Testadas 55, 42,
     32, 22 e 12: abaixo de 32 a nuvem vira mancha e a foto para de dizer algo. */
  background-position: center 32%;
}
.clima-band__frost {
  position: absolute; inset: -2px; pointer-events: none;
  -webkit-backdrop-filter: blur(10px) saturate(1.05); backdrop-filter: blur(10px) saturate(1.05);
  /* Quase parelho, e não 0.28 no topo (2026-07-27). O degradê nasceu fraco em
     cima e forte embaixo, o que casava com a foto de pastagem, escura no alto.
     Com o céu da foto de clima é o contrário: o topo é a parte MAIS clara da
     faixa, e é onde ficam as cartelas menores. Medido na página, as duas do alto
     caíam para 4,35:1 e 4,43:1 contra o mínimo AA de 4,5, enquanto as de baixo
     davam 5,33. Subir o topo empareia a faixa e resolve as duas. */
  background: linear-gradient(180deg, rgba(14,26,18,0.40), rgba(10,20,13,0.50));
}
.clima-band__inner { position: relative; z-index: 1; padding-block: var(--space-2xl); color: #fff; }

/* Vidro ESCURO na faixa de clima, e só nela (2026-07-27). O `.glass` do sistema
   é um filme BRANCO de 13%, que serve na Home porque a foto de lavoura ali é
   escura. Aqui ele clareava o fundo justamente atrás de texto branco, e o
   resultado, medido nos pixels da tela, era 2,72:1 contra o mínimo AA de 4,5.
   Não é defeito da foto nova: com a `pastagem.webp` que estava antes o mesmo
   texto media 2,03:1 e o eyebrow 1,52:1, ou seja, era pior.
   Com o filme escuro de 30%: texto branco 5,46:1 e eyebrow 4,80:1, os dois em
   AA, e as cartelas voltam a ler como cartelas em vez de sumirem no fundo.
   Escopado em `.clima-band` para não mexer nas células de vidro da Home. */
.clima-band .glass { background: rgba(10, 20, 13, 0.30); }
/* O verde do eyebrow clareia um degrau aqui: em #cfe8a0 ele dava 4,16:1 sobre o
   vidro escuro, e como é texto pequeno (--font-size-xs) o mínimo é 4,5, não 3.
   #e9f5d4 é o mesmo verde mais claro, ainda com a tinta da marca, a 4,80:1. */
.clima-band .destaque__eyebrow { color: #e9f5d4; }

/* a cartela de vidro, uma só, reutilizada por todas as células */
.glass {
  background: rgba(255,255,255,0.13);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: var(--radius-lg);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  text-shadow: 0 1px 10px rgba(0,0,0,0.35);
}

.bento { display: grid; gap: var(--space-sm); }

/* célula grande */
/* a célula grande do clima é o `.destaque` com vidro; aqui só o que é do bento */
.bento__agora { align-content: space-between; min-height: 250px; }
/* quatro medidas do momento */
.bento__medidas { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-sm); grid-template-columns: 1fr 1fr; }
/* a cartela tem altura de sobra por causa do bento: o número cresce para
   ocupá-la, em vez de flutuar no meio com vazio em cima e embaixo. */
.tile { padding: var(--space-lg); display: grid; gap: var(--space-xs); align-content: center; }
.tile__rot {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--font-size-xs); text-transform: uppercase;
  letter-spacing: var(--font-tracking-wide); color: rgba(255,255,255,0.8);
}
.tile__rot .icon { width: 15px; height: 15px; color: #cfe8a0; }
.tile__val {
  font-family: var(--font-display); font-weight: var(--font-weight-light);
  font-size: clamp(2.5rem, 4vw, 3.4rem); line-height: 1; color: #fff;
  font-variant-numeric: tabular-nums;
}
.tile__val small { font-family: var(--font-text); font-size: var(--font-size-body); opacity: 0.75; margin-left: 5px; }

/* próximos dias numa célula só, um por linha */
.bento__dias { padding: var(--space-lg) var(--space-xl); display: grid; align-content: start; gap: var(--space-xs); }
.bento__rot {
  font-size: var(--font-size-xs); text-transform: uppercase;
  letter-spacing: var(--font-tracking-wide); color: rgba(255,255,255,0.8);
  padding-bottom: var(--space-xs);
}
.bento__dias ul { list-style: none; padding: 0; margin: 0; display: grid; }
.bento__dias li {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-top: 1px solid rgba(255,255,255,0.18);
  font-variant-numeric: tabular-nums;
}
.dia__nome { text-transform: capitalize; font-size: var(--font-size-sm); color: rgba(255,255,255,0.9); }
.dia__t { font-family: var(--font-display); font-size: var(--font-size-lg); color: #fff; }
.dia__chuva { display: flex; align-items: center; gap: 5px; font-size: var(--font-size-sm); color: rgba(255,255,255,0.7); min-width: 4.5rem; justify-content: flex-end; }
.dia__chuva .icon { width: 15px; height: 15px; }
.dia__chuva.tem-chuva { color: #cfe8a0; }

@media (min-width: 768px) {
  .ind-abre__inner { grid-template-columns: 1.15fr 0.85fr; }
  /* no desktop a fileira vira COLUNAS, separadas por régua vertical */
  .cot { grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid var(--color-hairline); }
  /* Bento: a célula grande ocupa as duas linhas à esquerda, as quatro medidas
     ficam no meio e os próximos dias tomam a coluna da direita inteira. */
  .bento { grid-template-columns: 1.15fr 1.1fr 0.95fr; grid-template-rows: auto auto; }
  .bento__agora { grid-column: 1; grid-row: 1 / 3; }
  .bento__medidas { grid-column: 2; grid-row: 1 / 3; }
  .bento__dias { grid-column: 3; grid-row: 1 / 3; }
  .cot__item {
    grid-template-columns: 1fr; align-content: start; row-gap: 6px;
    padding: var(--space-lg) var(--space-md);
    border-bottom: 0; border-left: 1px solid var(--color-hairline);
  }
  .cot__item:first-child { border-left: 0; padding-left: 0; }
  .cot__valor { grid-column: 1; grid-row: auto; }
}

/* ── Feature (Sobre: ícone + título + texto) ──────────────────────────────── */
.feature { display: grid; gap: var(--space-sm); align-content: start; }
/* Ícone um degrau abaixo do `--icon-xl` (2,25em) que o template pede: com o
   título agora em caixa alta condensada, o ícone de 36px pesava mais que o
   próprio título e roubava a entrada do bloco. `--icon-lg` (1,5em, 24px) deixa
   o título como primeira coisa que o olho pega, que é o certo. Fica na classe
   `.feature .icon` e não no `.icon--xl` do HTML porque `--icon-xl` é token de
   sistema e é usado fora daqui. */
.feature .icon { color: var(--color-accent-deep); width: var(--icon-lg); height: var(--icon-lg); }
/* Título na fonte de marca (2026-07-27, pedido do gestor). Era a ÚNICA família
   de título do site em PF Square: h1, cabeçalho de seção, card de segmento e
   número grande são todos Fixture Condensed em caixa alta, e por isso estes
   quatro destoavam. Caixa alta pelo mesmo motivo: no site a Fixture nunca
   aparece em caixa alta e baixa. */
.feature__title {
  font-family: var(--font-display); text-transform: uppercase;
  font-weight: var(--font-weight-light);
  /* Um degrau abaixo do `--font-size-h2` (24 a 36px), e o motivo é medido, não
     estético: em h2 cheio o título "Matéria-prima de alta pureza" precisava de
     259px e a célula tem 242px úteis, então ele quebrava em duas linhas de 129
     e 125px e deixava 113px de largura sem uso, enquanto os outros três cabiam
     em uma linha. Com 21,6 a 30px os QUATRO cabem em uma linha em 390, 768,
     1280, 1440 e 1920, medido. Em 1024 a célula cai para 174px úteis e duas
     linhas são inevitáveis em qualquer tamanho de fonte.
     Token próprio e não `--font-size-h3` porque este título é condensado em
     caixa alta e o h3 (22px fixo) não acompanha a largura da célula. */
  font-size: clamp(1.35rem, 2.5vw, 1.875rem);
  line-height: var(--font-leading-tight); letter-spacing: var(--font-tracking-tight);
  color: var(--color-ink);
}
.feature p { color: var(--color-ink-muted); max-width: 46ch; }

/* `.about-cta` e `.about-cta__actions` saíram em 2026-07-26: a /sobre/ passou a
   fechar com o `ctaBand`, o mesmo macro das outras seis páginas. Eram o único
   CTA do site fora do macro e o único bloco centralizado numa página alinhada à
   esquerda (246px de desvio no título). Nenhum template escreve as classes. */

/* ── Lista de matérias-primas ─────────────────────────────────────────────── */
/* `.mp-list` e `.mp-list__item` saíram em 2026-07-26: a lista virou grade
   (`.mp-grid`/`.mp-item`, em partials/listing.njk) e as duas ficaram sem uso. */

/* ═══════════════════ HOME — faixa de foto com os quatro pilares ════════════
   Bloco novo (2026-07-26). Mesma receita da `.clima-band` (linha 446): foto de
   fundo + véu desfocado + conteúdo em `.glass`. O vidro é a MESMA classe, com
   os mesmos valores, então o site continua com um vidro só.

   O nome NÃO é `.clima-band` porque aqui não tem clima nenhum, e a classe não
   foi renomeada para `.foto-band` genérica porque isso mexeria no CSS de que a
   Indicadores (aprovada) depende. O custo é a duplicação de três regras curtas;
   quando alguém for dono das duas páginas, `.clima-band` vira composição em
   cima desta e a duplicação morre. */
.foto-band {
  position: relative; overflow: hidden;
  background-color: #16281b;
  /* `center 60%` com a foto da operação (2026-07-27). Os 88% eram para a foto de
     lavoura, onde só a metade de baixo servia. Aqui o assunto é a esteira de envase,
     que vive na faixa central: 60% deixa a linha de bombonas na altura das cartelas e
     mantém fora o topo, onde ficam as janelas do galpão. */
  background-image: var(--foto-bg); background-size: cover; background-position: center 60%;
}
/* Véu com MENOS desfoque que o da faixa de clima (blur 7 contra 10) e um pouco
   mais escuro no pé (0.34→0.50 contra 0.28→0.46). Quem apagava a lavoura era o
   desfoque, não o escuro: com blur 10 a foto vira textura verde. O escuro do pé
   subiu porque o texto aqui é corrido, não número gigante, e é embaixo que
   ficam as células. */
.foto-band__frost {
  position: absolute; inset: -2px; pointer-events: none;
  /* blur 4 e não 7 (2026-07-27, pedido do gestor: "deixe a imagem um pouco mais
     visível, que dê para identificar, mas mantenha o efeito"). Em 7 a foto virava
     mancha cinza-azulada e não se sabia o que era; em 4 a esteira, o operador e os
     paletes são reconhecíveis e o efeito continua. Abaixo de 3 o desfoque some e a
     faixa vira foto crua atrás de texto. O contraste que o blur deixa de dar (ele
     achatava as bombonas brancas na média) é devolvido pelo véu. */
  -webkit-backdrop-filter: blur(4px) saturate(1.06); backdrop-filter: blur(4px) saturate(1.06);
  /* Neutro e não verde: o verde (14,26,18) foi calibrado para a foto de lavoura e
     sobre a foto de galpão embarrava a imagem.
     Força 0,48/0,56, achada medindo o FUNDO PURO (com o texto das células
     escondido por CSS). Isso importa: medir com o texto no quadro contamina o
     percentil com as bordas antisserrilhadas dos glifos, e foi o que me fez ler
     6,72 e 4,39 para a MESMA configuração em duas passadas. Com o fundo limpo,
     0,48 dá 5,20 a 5,83 no título branco e 3,89 no ícone, contra os mínimos de
     4,5 e 3,0. Abaixo de 0,44 o branco cai de 4,5 e reprova. */
  background: linear-gradient(180deg, rgba(16,20,24,0.48), rgba(12,16,20,0.56));
}
/* Topo alto de propósito: as células começam 158px abaixo, e essa tira de foto
   ABERTA é o que faz a faixa ler como lavoura em vez de fundo verde borrado.
   Com o padding simétrico de 64px a faixa fechava em 332px, um corte de 4,3:1
   numa foto 16:9 — sobrava uma fatia fina demais para reconhecer qualquer coisa.
   Com o topo alto a faixa vai a 426px, mostra o horizonte com o sol e ainda
   empurra as células para a parte escura da foto. Ganha nos dois lados; a pior
   janela de 24px por célula sai de 2,19 · 1,42 · 1,69 · 1,81 para
   3,23 · 2,43 · 2,52 · 3,32 (branco sobre vidro).
   No celular o clamp cai para 64px: lá a foto é recortada na vertical, a faixa
   já tem 4 células empilhadas e não falta altura. */
/* Parallax da faixa de foto: a imagem sobe mais devagar que a rolagem, o que
   dá profundidade sem tirar o texto do lugar. Feito com `animation-timeline:
   view()`, que é animação dirigida pela rolagem NATIVA, sem ouvinte de scroll e
   sem trabalho por quadro no JS.
   Dentro de `@supports` de propósito: onde o navegador não conhece, a faixa
   simplesmente não se move, que é o comportamento de hoje. Nada quebra.
   Nada quebra. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* A foto sai do elemento e passa para o `::before`, que é o que se move. Se
       ficasse nos dois, a versão parada do pai apareceria por trás nas bordas. */
    .foto-band { background-image: none; }
    .foto-band::before {
      content: ""; position: absolute; inset: -5% 0; z-index: 0;
      background-image: var(--foto-bg); background-size: cover; background-position: center 60%;
      animation: foto-parallax linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}
/* Deslocamento pequeno (5% para cada lado) porque a faixa tem 298px de altura e
   a foto é `cover`: mais que isso e a borda da imagem entraria no quadro. */
@keyframes foto-parallax { from { transform: translateY(-5%); } to { transform: translateY(5%); } }

/* Respiro simétrico (2026-07-27, pedido do gestor: cards centrados na faixa).
   Era 158px em cima contra 64px embaixo, assimetria que servia à foto de lavoura,
   que precisava de uma tira aberta no alto para o horizonte aparecer. Com a foto
   da operação o assunto atravessa o quadro inteiro e a assimetria só empurrava as
   células para o pé da faixa. Medido depois: 64px em cima e 64px embaixo. */
.foto-band__inner {
  position: relative; z-index: 1; color: #fff;
  padding-block: var(--space-2xl);
}

/* Quatro células, uma fileira no desktop. Grade explícita e não `.grid--cards`:
   com auto-fill, entre 960 e 1090px de janela a grade cai para 3 colunas e
   sobra uma célula sozinha na segunda linha. */
.home-pilares { grid-template-columns: 1fr; }
.home-pilar { padding: var(--space-lg); }
/* O `.feature` nasce para fundo claro: título em `--color-ink`, parágrafo em
   `--color-ink-muted` e ícone em `--color-accent-deep`, os três escuros. Aqui
   ele ganha o contexto claro, do mesmo jeito que `.section--brand` já faz com o
   cabeçalho de seção. O #cfe8a0 é o verde claro que `.destaque__eyebrow` e
   `.tile__rot` já usam sobre foto. */
.foto-band .feature__title { color: #fff; }
.foto-band .feature p { color: rgba(255,255,255,0.85); }
.foto-band .feature .icon { color: #cfe8a0; }
/* Sombra um pouco mais funda que a do `.glass` (0.55 contra 0.35, 12px contra
   10). Aqui o texto é corrido e pequeno, não número gigante, e o fundo é uma
   foto de sol baixo: em algumas larguras uma célula cai sobre a parte clara e o
   contraste medido chega a 2,4:1. A sombra não conta para WCAG, mas é o que
   segura a leitura enquanto a decisão sobre vidro-sobre-foto não for tomada
   para o site inteiro (a faixa de clima da Indicadores mede 1,45:1). */
.foto-band .feature__title, .foto-band .feature p { text-shadow: 0 1px 12px rgba(0,0,0,0.55); }

@media (min-width: 768px) { .home-pilares { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .home-pilares { grid-template-columns: repeat(4, 1fr); } }

/* Aviso do <noscript> do formulário (2026-07-31). Sem JavaScript o botão não
   envia nada, de propósito, para os dados não irem parar na URL; este bloco é
   o que sobra na tela e precisa parecer informação, não erro. */
.form-status--aviso {
  display: block; margin-top: var(--space-md);
  padding: var(--space-md); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-brand) 8%, var(--color-canvas));
  border: 1px solid color-mix(in srgb, var(--color-brand) 22%, transparent);
  color: var(--color-ink);
}
.form-status--aviso a { color: var(--color-brand); }

/* Aviso do <noscript> dos Indicadores (2026-08-01). Sobre a faixa azul da
   abertura, então usa a tinta clara da marca e um filme escuro, o mesmo par do
   `.glass` daquela página. */
.ind-aviso {
  margin-top: var(--space-lg); padding: var(--space-md);
  border-radius: var(--radius-md);
  background: rgb(var(--color-ink-rgb) / 0.22);
  border: 1px solid rgb(var(--color-canvas-rgb) / 0.28);
  color: var(--color-on-brand);
}
.ind-aviso a { color: var(--color-on-brand); }