/* ==========================================================================
   VIMACEDO — Cereais
   Estilos: listagem de produtos (index.html) + single de produto (produto.html)

   IDENTIDADE (site institucional novo, B2B atacadista):
   preto industrial, vermelho de marca só em ação e destaque, tipografia
   pesada em caixa alta com entrelinha curta, cantos suavemente arredondados
   (ver a escala --radius nos tokens).
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  --red: #e4322b;          /* vermelho da marca — ação, destaque, estado ativo */
  --red-dark: #c4241e;     /* hover de superfícies vermelhas */
  --red-tint: #fdf0ef;     /* fundo levíssimo para item selecionado */
  --red-line: #f3b9b6;     /* borda de hover, vermelho rebaixado */

  --ink: #0b0b0b;          /* preto do hero e das faixas escuras */
  --ink-2: #141414;
  --ink-3: #2b2b2b;        /* texto secundário sobre branco */
  --muted: #6e6e6e;
  --muted-2: #8e8e8e;
  --muted-dark: #a3a3a3;   /* texto de corpo sobre preto */

  --line: #e4e4e4;
  --line-2: #ededed;

  /* Borda de hover. O preto puro respondia ao mouse com um susto: a moldura
     saltava de #e4e4e4 para #0b0b0b, quase o contraste inteiro de uma vez.
     Este cinza é um degrau acima da linha em repouso — dá para ver que o item
     respondeu sem que ele grite. Quem carrega o hover é a sombra abaixo. */
  --line-hover: #cfcfcf;
  --sombra-hover: 0 6px 20px rgba(11, 11, 11, .09);
  --line-dark: rgba(255, 255, 255, .14);
  --white: #fff;
  --wash: #f4f4f4;         /* fundo neutro do quadro de imagem */

  /* Estados vindos do ERP (coluna `informativo`). São as ÚNICAS cores fora da
     paleta preto/vermelho, e existem porque cada uma diz uma coisa diferente:
     misturar tudo em cinza apagaria a informação. Ficam rebaixadas de propósito,
     para não competir com o vermelho da marca. */
  --st-novidade:   #8a5a00;
  --st-novidade-l: #f0d089;
  --st-novidade-b: #fdf6e6;
  --st-alterado:   #1f6b3a;
  --st-alterado-l: #b6d9c2;
  --st-alterado-b: #eef7f1;
  --st-chegou:     #9a4310;
  --st-chegou-l:   #f2c3a4;
  --st-chegou-b:   #fdf2ec;

  /* --- Tipografia ---
     Poppins é a MARCA: menu, hero, títulos, botões. É geométrica e pesada, boa
     para caixa alta grande — e ruim para tabela de dados, onde os algarismos
     dela têm pouca diferença entre si e o texto pequeno fecha.

     A tabela de preços usa IBM Plex Sans, desenhada para interface técnica.
     Os números ficam nela mesma, com `font-variant-numeric: tabular-nums`: os
     algarismos passam a ter largura fixa e as casas se empilham na vertical,
     que é o que permite comparar preço correndo o olho pela coluna.

     Chegamos aqui depois de tentar monoespaçada nos valores. Ela alinha, mas
     dá ao preço cara de terminal e abre um vão entre "R$" e o número. Preço é
     valor comercial, não string de código: tabular resolve o alinhamento sem
     mudar o que a coluna parece ser — e ainda poupa duas fontes. */
  --fonte-marca: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --fonte-dados: "IBM Plex Sans", "Segoe UI", Roboto, Arial, sans-serif;

  /* --- Cantos ---
     Arredondamento suave, em três degraus. A regra é: quanto maior a peça,
     maior o raio — um raio único em tudo faz o botão parecer pílula e o card
     parecer quadrado. Nada aqui passa de 12px: é para o canto ficar macio ao
     olho, não para o elemento virar cápsula.

     Faixas de largura total (cabeçalho, hero, faixa de benefícios, rodapé)
     continuam retas de propósito: encostam nas duas bordas da tela e um canto
     redondo ali deixa aparecer um triângulo de fundo, que lê como defeito. */
  --radius: 12px;      /* superfícies grandes: cards, quadros, painéis */
  --radius-sm: 8px;    /* controles: botões, campos, menus, abas */
  --radius-xs: 5px;    /* peças miúdas: selos, contadores, caixas de marcação */

  --container: 1520px;   /* era 1440: +80 para o card da listagem passar de ~249 para ~276 px */
  --gutter: 40px;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--fonte-marca);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, p, ul { margin: 0; }
ul { list-style: none; padding: 0; }

/* precisa vencer o display das classes de componente (ex.: .card { display: flex }) */
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

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

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.icon { width: 24px; height: 24px; flex: none; }

/* o cabeçalho é fixo: âncoras e scroll programado precisam parar abaixo dele */
html { scroll-padding-top: 96px; }

/* ==========================================================================
   CABEÇALHO
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--ink);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: 76px;
  /* padding-block, nunca o atalho `padding`: este elemento também é .container,
     e o atalho zeraria a margem lateral dele (mesma especificidade, vem depois) */
  padding-top: 12px;
  padding-bottom: 12px;
}

/* --- Marca --- */
.brand { flex: none; display: block; }

/* o logo é preto sobre transparente; forçar para branco puro é o que o
   deixa legível sobre o preto sem precisar de um segundo arquivo */
.brand img {
  height: 46px;
  width: auto;
  filter: brightness(0) invert(1);
}

/* --- Navegação --- */
.nav { margin-left: auto; }

.nav__list {
  display: flex;
  align-items: center;
  gap: 26px;
}

.nav__link {
  position: relative;
  display: block;
  padding: 6px 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
  transition: color .16s;
}

.nav__link:hover { color: var(--white); }

.nav__link[aria-current="page"] { color: var(--white); }

.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--red);
}

/* --- Seletor de idioma --- */
.lang {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none;
  padding-left: 28px;
  border-left: 1px solid rgba(255, 255, 255, .16);
}

.lang__btn {
  display: block;
  width: 25px;
  border: 0;
  padding: 0;
  background: none;
  line-height: 0;
  opacity: .55;
  transition: opacity .16s;
}

.lang__btn:hover { opacity: 1; }
.lang__btn[aria-current="true"] { opacity: 1; box-shadow: 0 2px 0 var(--red); }

/* o raio vai no SVG, não no botão: a bandeira é a única superfície visível */
.lang__btn svg { width: 100%; height: auto; display: block; border-radius: 3px; }

/* --- Botão do menu no mobile --- */
.burger {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--white);
  place-items: center;
}

.burger svg { width: 20px; height: 20px; }
.burger:hover { border-color: var(--red); color: var(--red); }

/* ==========================================================================
   RODAPÉ
   ========================================================================== */

.site-footer {
  background: var(--ink);
  color: var(--muted-dark);
  padding: 62px 0 0;
}

/* --- Chamada de atacado --- */
.footer__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  padding: 0 0 42px;
  border-bottom: 1px solid var(--line-dark);
}

.footer__cta h2 {
  font-size: 27px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--white);
  max-width: 20ch;
}

.footer__cta .eyebrow { margin-bottom: 10px; }

/* --- Colunas --- */
.footer__cols {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
  gap: 40px;
  padding: 46px 0 50px;
}

.footer__brand img {
  height: 52px;
  width: auto;
  filter: brightness(0) invert(1);
  margin-bottom: 18px;
}

.footer__about {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.75;
  max-width: 34ch;
}

.footer__head {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--red);
  display: inline-block;
}

.footer__list { display: grid; gap: 11px; }

.footer__list a,
.footer__list span {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--muted-dark);
  transition: color .16s;
}

.footer__list a:hover { color: var(--red); }

.footer__contact { display: grid; gap: 14px; }

.footer__item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--muted-dark);
}

.footer__item svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--red);
  margin-top: 2px;
}

.footer__item a:hover { color: var(--red); }

/* --- Barra inferior --- */
.footer__bottom {
  border-top: 1px solid var(--line-dark);
  padding: 22px 0 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 11.5px;
  font-weight: 300;
  color: #7a7a7a;
}

.footer__bottom a:hover { color: var(--red); }
/* a última linha precisa ficar acima do botão flutuante do WhatsApp, que cobre
   ~90 px do canto inferior direito */
.footer__bottom { padding-bottom: 100px; }
/* crédito da agência: coração amarelo com um pulso discreto */
.footer__credito { display: inline-flex; align-items: center; gap: 5px; }
.footer__coracao { color: #f5b301; font-size: 13px; line-height: 1; display: inline-block; animation: coracao-pulsa 2.4s ease-in-out infinite; }
@keyframes coracao-pulsa { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.25); } 24% { transform: scale(1); } 36% { transform: scale(1.18); } 48% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .footer__coracao { animation: none; } }
@media (max-width: 640px) { .footer__bottom { flex-direction: column; align-items: flex-start; gap: 10px; padding-bottom: 110px; } }

/* ---------- Olho-de-texto (rótulo vermelho acima dos títulos) ---------- */
.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
}

/* ==========================================================================
   Elementos compartilhados
   ========================================================================== */

/* --- Stepper de quantidade --- */
.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  overflow: hidden;
  height: 46px;
}

.qty__btn {
  width: 38px;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: color .15s, background .15s;
}

.qty__btn:hover { color: var(--white); background: var(--ink); }

.qty__input {
  width: 40px;
  height: 100%;
  border: 0;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  background: transparent;
  -moz-appearance: textfield;
  appearance: textfield;
}

.qty__input::-webkit-outer-spin-button,
.qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* --- Botões --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background .18s, color .18s, border-color .18s, filter .18s;
}

.btn--red {
  background: var(--red);
  color: var(--white);
  padding: 0 22px;
  height: 46px;
}

.btn--red .icon { width: 19px; height: 19px; }

.btn--red:hover { background: var(--red-dark); }

/* o mesmo botão, em preto — para chamadas sobre fundo vermelho (CTA da tabela na home) */
.btn--preto {
  background: var(--ink);
  color: var(--white);
  padding: 0 22px;
  height: 46px;
}
.btn--preto .icon { width: 19px; height: 19px; }
.btn--preto:hover { background: var(--ink-3); color: var(--white); }

.btn--icon {
  background: var(--red);
  color: var(--white);
  width: 52px;
  height: 46px;
}

.btn--icon:hover { background: var(--red-dark); }

.btn--outline {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  height: 48px;
  width: 100%;
  padding: 0 18px;
  justify-content: space-between;
}

.btn--outline:hover { background: var(--ink); color: var(--white); }

/* contorno compacto (largura do conteúdo), o par do vermelho quando há duas
   ações lado a lado — ex.: Excel (vermelho) e Imprimir (contorno) na tabela */
.btn--linha {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  height: 46px;
  padding: 0 20px;
}
.btn--linha:hover { background: var(--ink); color: var(--white); }

/* --- Selo/badge sobre imagem ---
   Encosta na borda esquerda do quadro: só os cantos da direita arredondam.
   Arredondar os quatro faria a etiqueta descolar da borda e boiar. */
.badge {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--red);
  color: var(--white);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.2;
}

.badge svg { width: 20px; height: 20px; flex: none; }

/* --- Faixa de benefícios (preta) --- */
.benefits {
  background: var(--ink);
  padding: 54px 0;
}

.benefits__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 34px;
}

.benefit {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.benefit svg { width: 30px; height: 30px; flex: none; color: var(--red); margin-top: 2px; }
/* a identidade não usa cor de apoio: o verde antigo vira o vermelho da marca */
.benefit svg.is-green { color: var(--red); }

.benefit__title {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--white);
  margin-bottom: 6px;
}

.benefit__text {
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--muted-dark);
  max-width: 24ch;
}

/* --- Preço --- */
.price {
  display: block;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
  line-height: 1.15;
}

/* nos CARDS o preço em evidência é o do quilo (o que se compara entre
   fornecedores); o do pacote vem abaixo, menor, como referência */
.price__unidade { font-size: .55em; font-weight: 700; letter-spacing: .02em; color: var(--muted); }
.price-pacote {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.4;
}
.price-pacote strong { font-weight: 700; color: var(--ink-3); }

.price-kg {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted-2);
  line-height: 1.5;
  margin-top: 3px;
}

/* ==========================================================================
   SINGLE DE PRODUTO (produto.html)
   ========================================================================== */

.product {
  padding: 0 0 56px;
}

.product__grid {
  display: grid;
  grid-template-columns: 1.22fr minmax(0, 1fr);
  /* linha 1: galeria | informações · linha 2: "sabor que nutre" sob a galeria.
     O 1fr na linha 2 absorve a sobra de altura da coluna de informações,
     mantendo o texto logo abaixo das miniaturas. */
  grid-template-rows: auto 1fr;
  gap: 46px;
  align-items: start;
  padding: 44px 0 60px;
}

.gallery { grid-area: 1 / 1; }
.product__info { grid-area: 1 / 2 / span 2 / 2; }

/* --- Galeria --- */
/* `overflow: hidden` para a foto seguir o canto do quadro. Não corta nada útil:
   o selo começa 26px abaixo do topo e as setas ficam a 14px das laterais, os
   dois já fora da curva. */
.gallery__main {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.gallery__main .badge {
  top: 26px;
  left: 0;
  padding: 13px 18px;
  font-size: 11.5px;
}

/* quadro quadrado com "contain": as fotos do sachê são em retrato e
   precisam aparecer inteiras, sem corte no topo nem na base.
   O multiply apaga o fundo branco da foto contra o cinza do quadro. */
.gallery__main img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* --- Carrossel: setas e contador sobre a foto ---
   Fora do `mix-blend-mode` da imagem — um elemento em multiply sobre o cinza
   do quadro perderia o branco do fundo e ficaria transparente. Por isso eles
   são irmãos da `img`, não filhos dela. */
.carrossel__seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  transition: background .18s, color .18s, border-color .18s;
}

.carrossel__seta svg { width: 22px; height: 22px; }

.carrossel__seta:hover {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}

.carrossel__seta--anterior { left: 14px; }
.carrossel__seta--proxima  { right: 14px; }

/* Zoom: botão no canto da foto, mesmo desenho das setas. Sem JavaScript é
   um link que abre a imagem grande em outra aba; com JS vira a lupa. */
.gallery__zoom {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  transition: background .18s, color .18s, border-color .18s;
}
.gallery__zoom svg { width: 22px; height: 22px; }
.gallery__zoom:hover { background: var(--red); border-color: var(--red); color: var(--white); }
.gallery__main img { cursor: zoom-in; }

/* A lupa: um <dialog> com a foto em tela cheia. Clicar na foto alterna 2×
   ancorado no ponto do clique; clicar fora, no ×, ou Esc fecha. */
.lupa {
  border: 0;
  padding: 0;
  max-width: 100vw;
  max-height: 100vh;
  width: 100vw;
  height: 100vh;
  background: rgba(10, 10, 10, .92);
  color: var(--white);
}
.lupa::backdrop { background: transparent; }
.lupa__quadro {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.lupa__img {
  max-width: min(92vw, 1000px);
  max-height: 90vh;
  background: var(--white);
  border-radius: var(--radius-sm);
  cursor: zoom-in;
  transition: transform .25s ease;
  transform-origin: center;
}
.lupa__img.is-ampliada { transform: scale(2); cursor: zoom-out; }
.lupa__fechar {
  position: fixed;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
}
.lupa__fechar svg { width: 22px; height: 22px; }
.lupa__fechar:hover { background: var(--red); border-color: var(--red); color: var(--white); }
.lupa__legenda {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .75;
}

/* Diz que há mais coisa e quantas: a seta sozinha não informa o tamanho da
   volta, e quem chega pelo buscador não sabe que existem cinco calibres. */
.carrossel__conta {
  position: absolute;
  right: 14px;
  bottom: 14px;
  background: var(--ink);
  color: var(--white);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  padding: 5px 10px;
  border-radius: var(--radius-xs);
}

/* Faixa de miniaturas: sempre CINCO à vista, o resto rola. É uma rolagem de
   verdade (dedo, roda, teclado) antes de qualquer JavaScript; as setas só a
   empurram. O `scroll-snap` faz cada parada cair numa miniatura inteira. */
.gallery__thumbs-wrap { position: relative; margin-top: 16px; }

.gallery__thumbs {
  --vao: 12px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 4 * var(--vao)) / 5);
  gap: var(--vao);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* espaço para o anel de foco/ativo não ser cortado pelo overflow */
  padding: 3px;
  margin: -3px;
}
.gallery__thumbs::-webkit-scrollbar { display: none; }
.gallery__thumbs > .thumb { scroll-snap-align: start; }
.gallery__thumbs:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }

/* Setas por cima das pontas da faixa, só quando há mais de cinco (o JS
   revela). Mesmo desenho da seta da foto grande (.carrossel__seta) — quadrada
   de canto suave, branca —, só que menor, para não brigar com as miniaturas. */
.thumbs__seta {
  position: absolute;
  top: 50%;
  width: 32px;
  height: 32px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  transition: background .18s, border-color .18s, color .18s, opacity .18s;
}
.thumbs__seta svg { width: 18px; height: 18px; }
.thumbs__seta--anterior { left: -8px; }
.thumbs__seta--proxima  { right: -8px; }
.thumbs__seta:hover:not(:disabled) { background: var(--red); border-color: var(--red); color: var(--white); }
.thumbs__seta:disabled { opacity: 0; pointer-events: none; }

/* a miniatura virou link (cada tipo tem endereço próprio), então precisa de
   display: as âncoras não são bloco por padrão */
.thumb {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  padding: 8px;
  transition: border-color .18s, box-shadow .18s;
}

.thumb img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.thumb:hover { border-color: var(--line-hover); }

.thumb.is-active {
  border-color: var(--red);
  box-shadow: inset 0 0 0 2px var(--red);
}

/* --- Bloco "Sabor que nutre" --- */
/* Texto de apoio: na coluna de informações, acima do atendimento */
.apoio {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.apoio h2 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
}

.apoio p {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--muted);
}

/* --- Informações --- */
.product__title {
  font-size: 44px;
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.025em;
  text-transform: uppercase;
  color: var(--ink);
}

.product__subtitle {
  margin-top: 14px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--red);
}

/* --- Descrição longa, em largura total no fim da página ---
   Sai da coluna de informações de propósito: lá ela empurrava a escolha de
   variação e o preço para fora da primeira tela. */
.sobre {
  padding: 44px 0 64px;
  border-top: 1px solid var(--line);
}

.sobre__titulo {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 20px;
}

.sobre__texto {
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--muted);
}

.sobre__texto p + p { margin-top: 1.1em; }

.rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 28px 0;
}

/* --- Ícones de atributos --- */
.attrs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.attr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 4px 8px;
  position: relative;
}

.attr + .attr::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  border-left: 1px solid var(--line);
}

.attr svg { width: 28px; height: 28px; color: var(--red); }

.attr span {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.45;
}

/* --- Seletor de variação --- */
.variants__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
}

/* Segundo nível: o rótulo é subordinado ao de cima, não um irmão dele. Em
   vermelho e do mesmo peso, as duas fileiras pareceriam duas escolhas
   independentes, quando a de baixo só existe por causa da de cima. */
.variants__label--fina {
  color: var(--muted-2);
  font-weight: 600;
  margin-top: 18px;
}

/* Escolher a VARIAÇÃO (o que o produto é) antes do TAMANHO (em que embalagem
   ele vem). Some produtos têm quinze variações, então a lista quebra em linhas
   em vez de virar uma pilha de quinze faixas: aqui o nome é curto e cabe. */
.tipos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tipo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  padding: 9px 14px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  transition: border-color .18s, background .18s, color .18s;
}

/* Quantas opções há dentro do grupo. Sem isto, "12 MM" e "7,0 MM" parecem a
   mesma coisa e nada anuncia que um deles se abre em dois. */
.tipo__quantas {
  min-width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  background: var(--wash);
  color: var(--muted-2);
  font-size: 10px;
  font-weight: 700;
  padding: 0 4px;
  border-radius: var(--radius-xs);
}

.tipo.is-active .tipo__quantas { background: var(--white); color: var(--red-dark); }

.tipo:hover { border-color: var(--line-hover); }

/* Mesma marcação de escolhido que o tamanho usa: são a mesma decisão em dois
   eixos, e duas gramáticas visuais para isso confundiriam. */
.tipo.is-active {
  border-color: var(--red);
  background: var(--red-tint);
  box-shadow: inset 0 0 0 1px var(--red);
  color: var(--red-dark);
}

.variants { display: grid; gap: 8px; }

/* marca da variação dentro do chip: em cinza, para o nome continuar mandando */
.tipo__marca { font-size: 11px; font-weight: 500; color: var(--muted-2); }
.tipo.is-active .tipo__marca { color: var(--red-dark); opacity: .7; }

.variants__label-n {
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted-2);
  margin-left: 6px;
}

/* --- Lista de variações (muitas opções) --- */
.lista-tipos__filtro {
  width: 100%;
  margin-bottom: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 13px;
  background: var(--white);
}
.lista-tipos__filtro:focus { outline: none; border-color: var(--ink); }

/* Mesma linguagem do card de tamanho logo abaixo (borda, canto suave, bolinha
   de rádio, preço em negrito): são a mesma decisão em dois eixos, e duas
   gramáticas visuais confundiriam. A versão anterior — tabela com hairlines —
   parecia painel administrativo. Cerca de 4 linhas à vista; o resto rola. */
.lista-tipos {
  display: grid;
  gap: 8px;
  max-height: 306px;
  overflow-y: auto;
  padding: 2px 2px 2px;   /* o anel do item ativo não é cortado pelo overflow */
  margin: -2px;
  scrollbar-width: thin;
}

.lista-tipos__item {
  display: grid;
  grid-template-columns: 18px 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 10px 18px 10px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.25;
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.lista-tipos__item:hover { border-color: var(--line-hover); }
.lista-tipos__item.is-active {
  border-color: var(--red);
  background: var(--red-tint);
  box-shadow: inset 0 0 0 1px var(--red);
}
.lista-tipos__item.is-active .radio { border-color: var(--red); }
.lista-tipos__item.is-active .radio::after { background: var(--red); }

/* A foto é um packshot em pé com muito ar em volta: num quadrado pequeno,
   `contain` deixava o produto do tamanho de um grão. `cover` centrado um pouco
   acima do meio recorta o miolo da embalagem, que é o que identifica. */
.lista-tipos__item img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  object-position: center 42%;
  border-radius: var(--radius-xs);
  background: var(--white);
}

.lista-tipos__nome {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.lista-tipos__nome small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted-2);
}
.lista-tipos__item.is-active .lista-tipos__nome small { color: var(--red-dark); opacity: .75; }

.lista-tipos__preco {
  text-align: right;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.lista-tipos__preco small {
  display: block;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 1px;
}
.lista-tipos__item.is-active .lista-tipos__preco small { color: var(--red-dark); opacity: .75; }
/* preço por quilo em evidência; o do pacote abaixo, menor (igual aos cards) */
.lista-tipos__unidade { font-size: .68em; font-weight: 700; color: var(--muted); }
.lista-tipos__pacote {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
.lista-tipos__pacote strong { font-weight: 700; color: var(--ink-3); }
.lista-tipos__item.is-active .lista-tipos__pacote { color: var(--red-dark); opacity: .8; }
.lista-tipos__item.is-active .lista-tipos__pacote strong { color: var(--red-dark); }
.lista-tipos__vazio { font-size: 13px; color: var(--muted); padding: 10px 12px; margin: 0; }

.variant {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  cursor: pointer;
  transition: border-color .18s, background .18s, box-shadow .18s;
}

.variant:hover { border-color: var(--line-hover); }

.variant.is-active {
  border-color: var(--red);
  background: var(--red-tint);
  box-shadow: inset 0 0 0 1px var(--red);
}

.variant__left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.variant input { position: absolute; opacity: 0; pointer-events: none; }

/* redondo: é um botão de rádio, e o círculo é o que o distingue da caixa de
   marcação — que continua quadrada, de canto suave */
.radio {
  width: 18px;
  height: 18px;
  border: 1.5px solid #c4c4c4;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  transition: border-color .18s;
}

.radio::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
  transition: background .18s;
}

.variant.is-active .radio { border-color: var(--red); }
.variant.is-active .radio::after { background: var(--red); }

.variant__size {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--ink);
}

.variant__price { text-align: right; }
.variant__price .price { font-size: 21px; }

/* "Em Falta" vem do ERP, não do painel */
.variant__aviso {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red);
  border: 1px solid var(--red-line);
  border-radius: var(--radius-xs);
  background: var(--red-tint);
  padding: 3px 7px;
}

/* a listagem inteira é um formulário: não pode ganhar espaçamento próprio */
form.shop { margin: 0; }

/* --- Compra --- */
.buy {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

.buy .qty { height: 52px; }
.buy .qty__input { width: 46px; }
.buy .btn--red { height: 52px; flex: 1; }

.secure {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.secure svg { width: 26px; height: 26px; color: var(--red); flex: none; }

.secure__title {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
}

.secure__text {
  font-size: 13px;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.5;
}

/* --- Seção "Escolha a quantidade ideal" --- */
.section-head { margin-bottom: 38px; }

.section-head h2 {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink);
  max-width: 18ch;
}

.section-head::after {
  content: "";
  display: block;
  width: 46px;
  height: 3px;
  border-radius: 2px;
  background: var(--red);
  margin: 20px 0 0;
}

/* ==========================================================================
   COMPRE JUNTO — faixa rolável de produtos relacionados
   ========================================================================== */
.junto { padding: 56px 0 10px; }

.junto__topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.junto__topo .section-head { margin-bottom: 26px; }

.junto__setas { display: flex; gap: 8px; margin-bottom: 30px; }

.junto__seta {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  transition: background .18s, border-color .18s, color .18s, opacity .18s;
}

.junto__seta svg { width: 22px; height: 22px; }

.junto__seta:hover:not(:disabled) {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}

/* Fim da faixa: a seta apaga em vez de sumir, para as duas não dançarem de
   lugar quando uma delas desaparece. */
.junto__seta:disabled { opacity: .3; cursor: default; }

/* A faixa é uma rolagem horizontal de verdade: funciona com dedo, roda e
   teclado antes de qualquer JavaScript, e as setas só empurram esta rolagem.
   O `scroll-snap` faz cada parada cair num card inteiro. */
.junto__faixa {
  display: grid;
  grid-auto-flow: column;
  /* Largura FIXA, sem minmax(0, …): com minmax o grid usa o mínimo (zero) e
     espreme os doze cards dentro do container em vez de transbordar — com
     quatro dava certo por coincidência. Cinco à vista (pedido do cliente):
     4 vãos de 22 px em 5 colunas = 17,6. */
  grid-auto-columns: calc(20% - 17.6px);
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 6px;
  /* a barra some, mas a rolagem continua — o card cortado na direita é o que
     avisa que há mais coisa */
  scrollbar-width: none;
}

.junto__faixa::-webkit-scrollbar { display: none; }

.junto__faixa:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }

.junto__card { scroll-snap-align: start; }

/* Cinco colunas por padrão; entre 860 e 1200 px cabem três, abaixo de 860
   duas, e uma no celular. */
@media (max-width: 1200px) { .junto__faixa { grid-auto-columns: calc(33.333% - 14.7px); } }
@media (max-width: 860px)  { .junto__faixa { grid-auto-columns: calc(50% - 11px); } }
@media (max-width: 560px)  { .junto__faixa { grid-auto-columns: 78%; } }

/* ==========================================================================
   LISTAGEM DE PRODUTOS (index.html)
   ========================================================================== */

/* --- Hero preto --- */
.hero {
  background: var(--ink);
  position: relative;
  overflow: hidden;
}

/* brilho vermelho vindo do alto à direita, como na foto do galpão */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(115% 80% at 82% 4%, rgba(228, 50, 43, .30), transparent 58%);
  pointer-events: none;
  z-index: 0;
}

.hero__inner {
  display: flex;
  align-items: center;
  gap: 46px;
  min-height: 236px;
  padding: 56px 0;
  position: relative;
  z-index: 2;
  max-width: 63%;
}

/* o título e seu olho-de-texto formam um bloco só, que não encolhe */
.hero__inner > div { flex: none; }

.hero__title {
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: .98;
  text-transform: uppercase;
  color: var(--white);
}

.hero__text {
  border-left: 2px solid var(--red);
  padding-left: 32px;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--muted-dark);
  max-width: 46ch;
}

/* Cena escura ancorada à direita do hero preto.
   A foto é fotografada no mesmo escuro do hero, com a luz quente vindo do alto
   à direita — a mesma que o `::after` acima desenha. Por isso ela não precisa
   de bloco próprio: o degradê de máscara dissolve a borda esquerda no preto e
   as duas metades viram uma cena só, sem a emenda que a placa clara criava.

   Antes aqui havia uma placa `--wash` com a foto em `multiply`, porque a foto
   original tinha fundo branco. Fundo escuro dispensa os dois: nada a apagar. */
.hero__scene {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 480px;
  background: url("../img/hero-castanhas.webp") center right / cover no-repeat;
  z-index: 1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 45%);
          mask-image: linear-gradient(to right, transparent 0, #000 45%);
}

/* --- Corpo da listagem --- */
.shop {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);   /* filtro mais estreito e vão menor: largura para os cards */
  gap: 40px;
  padding: 40px 0 60px;
  align-items: start;
}

/* --- Sidebar de filtros --- */
.filters__head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  padding-bottom: 16px;
  border-bottom: 2px solid var(--ink);
}

/* Busca por nome, primeira linha da coluna de filtros (produtos.php).
   Precisa ser flex porque o `.campo-busca` — o mesmo componente da busca do
   blog — se estica com `flex: 1`; sem um pai flex ele encolheria para o
   tamanho do texto do placeholder. O padding e a borda repetem o ritmo das
   facetas logo abaixo. */
.filters__busca {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.filters__busca .btn--red { height: 46px; padding: 0 18px; flex: none; }

.facet { border-bottom: 1px solid var(--line); }

.facet__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 19px 0 15px;
  border: 0;
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
}

.facet__toggle svg {
  width: 15px;
  height: 15px;
  color: var(--muted);
  transition: transform .22s;
}

.facet__toggle:hover svg { color: var(--red); }

.facet.is-closed .facet__toggle svg { transform: rotate(180deg); }
.facet.is-closed .facet__body { display: none; }

.facet__body { padding-bottom: 20px; display: grid; gap: 12px; }

/* "Ver mais / Ver menos" no pé do filtro: texto em vermelho, sem moldura,
   para não competir com o botão de aplicar. As opções extras somem pelo JS
   (`hidden`), então sem JS a lista sai inteira. */
.facet__mais {
  justify-self: start;
  padding: 2px 0;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--red);
  background: none;
  border: 0;
  cursor: pointer;
}
.facet__mais:hover { text-decoration: underline; }

.check {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--ink-3);
  cursor: pointer;
}

.check input { position: absolute; opacity: 0; pointer-events: none; }

.check__box {
  width: 17px;
  height: 17px;
  border: 1.5px solid #c4c4c4;
  border-radius: 4px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--white);
  transition: background .16s, border-color .16s;
}

.check__box svg {
  width: 11px;
  height: 11px;
  color: var(--white);
  opacity: 0;
  transition: opacity .16s;
}

/* Não usa --line-hover: a caixa já repousa em #c4c4c4, e #cfcfcf a clarearia
   no hover — o inverso do que o gesto quer dizer. */
.check:hover .check__box { border-color: var(--muted-2); }

.check input:checked + .check__box {
  background: var(--red);
  border-color: var(--red);
}

.check input:checked + .check__box svg { opacity: 1; }
.check input:focus-visible + .check__box { outline: 2px solid var(--ink); outline-offset: 2px; }

.check__count { color: var(--muted-2); font-size: 12px; margin-left: auto; }

.filters .btn--outline { margin-top: 26px; }

/* --- Toolbar --- */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  /* a paginação rola até aqui: sem isto o cabeçalho fixo cobriria a barra */
  scroll-margin-top: 96px;
}

.toolbar__count {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
}

.toolbar__sort {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--muted);
}

.select {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.select select {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  padding: 0 42px 0 16px;
  height: 44px;
  min-width: 216px;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--ink);
  cursor: pointer;
}

.select select:hover { border-color: var(--line-hover); }

.select svg {
  position: absolute;
  right: 14px;
  width: 15px;
  height: 15px;
  color: var(--muted);
  pointer-events: none;
}

/* botões de modo de visualização (4 col / 3 col / lista) */
.toolbar__acoes { display: flex; align-items: center; gap: 18px; }
.vista { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--white); }
.vista__botao {
  width: 42px; height: 44px;
  display: grid; place-items: center;
  border: 0; background: transparent; color: var(--muted-2);
  cursor: pointer;
  transition: background .16s, color .16s;
}
.vista__botao + .vista__botao { border-left: 1px solid var(--line); }
.vista__botao svg { width: 18px; height: 18px; }
.vista__botao:hover { color: var(--ink); background: #f6f6f6; }
.vista__botao.is-ativa { color: var(--white); background: var(--ink); }

/* --- Grid de produtos --- */
.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}
.products--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Lista: um produto por linha, foto à esquerda, nome e descrição no meio,
   preço e botão à direita. São os mesmos filhos do card, só rearranjados em
   áreas de grid — por isso as margens do modo cartão são zeradas aqui. */
.products--lista { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.products--lista .card {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 230px;
  grid-template-areas:
    "media title  price"
    "media meta   actions";
  align-items: center;
  column-gap: 26px;
  padding: 14px 22px 14px 14px;
}
.products--lista .card__media { grid-area: media; padding: 0; }
.products--lista .card__media img { aspect-ratio: 1 / 1; }
.products--lista .card__title { grid-area: title; margin: 0; align-self: end; }
.products--lista .card__meta { grid-area: meta; margin: 6px 0 0; align-self: start; }
.products--lista .card__price { grid-area: price; margin: 0; padding: 0; border: 0; align-self: end; }
.products--lista .card__actions { grid-area: actions; margin: 10px 0 0; align-self: start; }
.products--lista .card .badge { border-radius: 0 0 var(--radius-sm) 0; }

/* `overflow: hidden` porque a foto e o selo encostam nas bordas do card: sem
   isso os dois passariam por cima da curva e o canto ficaria com um bico. */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  transition: border-color .18s, box-shadow .18s;
}

/* A sombra é o que anuncia o hover; a borda só acompanha. Trocar os papéis —
   moldura forte e nada de sombra — é o que deixava o card duro. */
.card:hover {
  border-color: var(--line-hover);
  box-shadow: var(--sombra-hover);
}

/* No canto do card, o topo-esquerdo já é recortado pelo `overflow` do card:
   aqui sobra arredondar só o canto que fica solto, o de baixo à direita. */
.card .badge {
  top: 0;
  left: 0;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  border-radius: 0 0 var(--radius-sm) 0;
  padding: 7px 11px;
  font-size: 9px;
  line-height: 1.25;
  letter-spacing: .1em;
}

.card .badge svg { width: 13px; height: 13px; }
/* o selo é uma etiqueta de canto: a quebra de linha do HTML vira espaço */
.card .badge br { display: none; }
.card .badge span { white-space: nowrap; }

/* Fundo branco, igual ao das fotos (packshots em fundo branco): o quadro cinza
   de antes, com multiply, fazia a foto parecer "com fundo cinza" — pedido do
   cliente em 18/09/2026. O multiply fica: em branco sobre branco não faz nada,
   e continua apagando o fundo de foto antiga que não seja branco puro. */
.card__media {
  display: block;
  background: #fff;
  padding-top: 15px;   /* respiro entre a borda do card e a foto */
}

.card__media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.card__title {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.005em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 20px 20px 8px;
}

.card__title a:hover { color: var(--red); }

.card__meta {
  font-size: 12px;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.6;
  margin: 0 20px 16px;
}

.card__meta .sep { color: #cfcfcf; padding: 0 2px; }

.card__price {
  margin: auto 20px 0;
  padding-top: 15px;
  border-top: 1px solid var(--line);
}

.card__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 20px 20px;
}

.card__actions .qty { flex: 1; }
.card__actions .qty__input { flex: 1; width: auto; }

/* O card é um produto, não um SKU: não há o que pôr no carrinho daqui, então
   a ação é entrar. O botão ocupa a linha inteira que o par quantidade+carrinho
   ocupava, senão sobra um vão à direita e o rodapé do card fica torto. */
.card__ver {
  width: 100%;
  justify-content: space-between;
}

/* DEMO: card que não abre (ver DEMO_PRODUTO no PHP). Continua legível — a foto,
   o nome e o preço são o que o cliente veio ver —, mas nada nele responde ao
   mouse: sem realce de borda, sem seta e com o botão apagado, para ninguém
   clicar esperando abrir. */
.card--fechado:hover { border-color: var(--line); box-shadow: none; }

.card--fechado .card__ver {
  justify-content: center;
  background: var(--wash);
  color: var(--muted);
  cursor: default;
}

/* Produto sem nenhum preço no ERP. Cinza e menor de propósito: é ausência de
   número, e no lugar do preço um texto do mesmo tamanho leria como preço. */
.price--consulta {
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
}

/* "a partir de" é um rótulo, não parte do número: precisa de peso e corpo
   próprios, senão soma 25px de peso 800 ao preço e vira outro preço. */
.price__desde {
  display: block;
  font-family: var(--fonte-marca);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 2px;
}

/* ==========================================================================
   TABELA DE PREÇOS (tabela-de-precos.php)
   ========================================================================== */

/* Altura do cabeçalho fixo do site (min-height 76px + 1px de borda): é onde o
   thead da tabela para ao rolar. Errar este número por pouco já deixa uma
   faixa de linhas passando por baixo do menu. */
:root { --tp-topo: 77px; }

/* A partir daqui é ferramenta de consulta, não vitrine: tudo herda a família
   de dados. O hero e o menu ficam de fora e seguem com a Poppins da marca. */
.tp {
  padding: 40px 0 64px;
  font-family: var(--fonte-dados);
}

/* --------------------------------------------------------------------------
   CONDIÇÕES COMERCIAIS  (painel: "Texto Cabeçalho")

   Vinha empurrando a tabela para fora da primeira dobra: dezesseis parágrafos
   de mesmo peso antes do primeiro preço. Quem abre esta página quer preço; as
   condições precisam estar acessíveis, não na frente. Fica recolhido em quatro
   linhas, com o resto a um clique.
   -------------------------------------------------------------------------- */
/* As condições são texto institucional, não dado: seguem a tipografia do
   resto do site (Poppins, rótulo vermelho), e não a família da tabela. */
.tp__condicoes {
  position: relative;
  padding-bottom: 28px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--line);
  font-family: var(--fonte-marca);
}

.tp__condicoes-rotulo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
}

.tp__rico {
  max-width: 72ch;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-3);
}

/* Estado recolhido: o JS mede e só liga quando o texto de fato transborda. */
.tp__condicoes[data-recolhido] .tp__rico {
  max-height: 6.8em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}

.tp__ver {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 0 0 3px;
  border: 0;
  border-bottom: 1.5px solid var(--ink);
  background: none;
  font-family: var(--fonte-marca);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color .18s, border-color .18s;
}

.tp__ver:hover { color: var(--red); border-color: var(--red); }
.tp__ver svg { width: 12px; height: 12px; transition: transform .2s; }
.tp__condicoes:not([data-recolhido]) .tp__ver svg { transform: rotate(180deg); }

/* Tipografia do conteúdo vindo do editor. Serve de piso: o `style` inline
   escrito no painel vence estas regras. */
.tp__rico > *:first-child { margin-top: 0; }
.tp__rico > *:last-child { margin-bottom: 0; }
.tp__rico p { margin: 0 0 8px; }
.tp__rico h3 { font-size: 16px; font-weight: 700; letter-spacing: -.01em; margin: 18px 0 6px; color: var(--ink); }
.tp__rico h4 { font-size: 15px; font-weight: 600; margin: 14px 0 4px; color: var(--ink); }
.tp__rico ul,
.tp__rico ol { margin: 0 0 10px; padding-left: 18px; }
.tp__rico ul { list-style: disc; }
.tp__rico ol { list-style: decimal; }
.tp__rico li { margin-bottom: 2px; }
.tp__rico strong, .tp__rico b { font-weight: 700; color: var(--ink); }
.tp__rico small { font-size: 11.5px; color: var(--muted); }
.tp__rico hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }
.tp__rico a { color: var(--red); text-decoration: underline; text-underline-offset: 2px; }
.tp__rico a:hover { color: var(--red-dark); }
.tp__rico span[style*="background"] { padding: 1px 5px; border-radius: 4px; }

/* --------------------------------------------------------------------------
   FILTROS

   Status, disponibilidade e unidade têm três ou quatro opções cada. Num menu
   suspenso elas ficam escondidas atrás de um clique e de um rótulo genérico
   ("Todos"), e quem chega não sabe o que existe para filtrar. Como botões,
   estão todas à vista e escolher custa um clique só — e, como cada uma é um
   link, funcionam sem JavaScript nenhum.

   Busca e faixa de preço continuam campos: são valor livre, não lista.
   -------------------------------------------------------------------------- */
/* Grade, não flex solto: as colunas ficam na mesma medida e os campos alinham
   pela base, o que é metade do acabamento de uma barra de filtros. */
/* As colunas seguem o tamanho do que cabe dentro: "Só disponíveis" é o rótulo
   mais longo, "Todas / KG / UN / LT" o mais curto, e a faixa de preço tem
   largura própria porque são dois campos e um "a" no meio. */
.tp__filtros {
  display: grid;
  grid-template-columns:
    minmax(240px, 2fr)
    minmax(0, 1fr)
    minmax(0, 1.2fr)
    minmax(0, .72fr)
    190px;
  align-items: end;
  gap: 16px;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

/* Filtros desligados no painel: sobra a busca, que então não precisa das cinco
   colunas — só da largura de leitura. */
.tp__filtros--so-busca { grid-template-columns: minmax(260px, 480px); }

.tp__f { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.tp__f-rotulo {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-2);
}

/* --- Base comum a todos os controles ---
   Uma altura só e uma moldura só. O sublinhado sozinho não dava corpo
   suficiente para o campo se ler como campo; a caixa cinza em volta de tudo
   dava corpo demais e virava painel administrativo. Fica a moldura fina. */
.tp__controle,
.tp__campo-caixa,
.tp__faixa {
  height: 46px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  transition: border-color .16s, box-shadow .16s;
}

/* Propriedades separadas, não o atalho `font`. `font: 500 14px/1 inherit` é
   inválido — `inherit` só vale na shorthand se for o valor inteiro —, e o
   navegador descartava a família: os campos caíam no Arial padrão dele.
   Campo de formulário não herda tipografia sozinho, precisa ser dito. */
.tp__controle {
  width: 100%;
  padding: 0 14px;
  font-family: var(--fonte-dados);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
}

.tp__campo-caixa:hover,
.tp__faixa:hover,
.tp__controle:hover { border-color: var(--muted-2); }

.tp__campo-caixa:focus-within,
.tp__faixa:focus-within,
.tp__controle:focus {
  outline: 0;
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

/* Filtro valendo fica com a moldura preta. É o que devolve ao `<select>` a
   única coisa que ele esconde: dá para ver o que está filtrado sem abrir. */
.tp__controle.tem-valor,
.tp__campo-caixa.tem-valor,
.tp__faixa.tem-valor { border-color: var(--ink); }
.tp__controle.tem-valor { font-weight: 600; }

/* --- Menus --- */
.tp__select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 38px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4.4l4 4 4-4' fill='none' stroke='%230b0b0b' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

/* --- Busca, com a lupa dentro --- */
.tp__campo-caixa { display: flex; align-items: center; gap: 10px; padding: 0 14px; }
.tp__campo-caixa svg { width: 16px; height: 16px; flex: none; color: var(--muted-2); transition: color .16s; }
.tp__campo-caixa:focus-within svg,
.tp__campo-caixa.tem-valor svg { color: var(--ink); }

.tp__campo {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--fonte-dados);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
}

.tp__campo:focus { outline: 0; }
.tp__campo::placeholder { color: var(--muted-2); font-weight: 400; }
.tp__campo::-webkit-search-cancel-button { cursor: pointer; }

/* Os dois campos numa moldura só: separados, viravam duas caixinhas soltas que
   não se liam como uma faixa de valores. */
.tp__faixa { display: flex; align-items: center; }

/* `min-width: 0` porque item de flex não encolhe abaixo do tamanho intrínseco
   do conteúdo por padrão — e um <input type="number"> traz um intrínseco largo,
   o bastante para furar a tela em 360 px. */
.tp__faixa input {
  width: 74px;
  min-width: 0;
  height: 100%;
  padding: 0 10px;
  border: 0;
  background: none;
  font-family: var(--fonte-dados);
  font-size: 13.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  text-align: center;
}

.tp__faixa input:focus { outline: 0; }
.tp__faixa input::placeholder { color: var(--muted-2); font-weight: 400; }
.tp__ate { color: var(--muted-2); font-size: 12px; flex: none; }
.tp__enviar { height: 46px; padding: 0 22px; }

/* Os botões já mostram o que está ativo; a fila de marcadores repetia a mesma
   informação a três centímetros de distância. Sobrou o atalho para zerar tudo. */
.tp__limpar {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-left: 4px;
  border-bottom: 1px solid transparent;
  transition: color .18s, border-color .18s;
}

.tp__limpar:hover { color: var(--red); border-color: var(--red); }

/* --------------------------------------------------------------------------
   BARRA: contagem, atualização e ações

   Uma régua só, tudo alinhado pela base. Antes eram três blocos de pesos
   diferentes flutuando sem relação entre si.
   -------------------------------------------------------------------------- */
/* Sem borda inferior: a faixa preta do cabeçalho da tabela vem logo abaixo e
   já separa. As duas juntas faziam um risco duplo a três pixels de distância. */
.tp__barra {
  display: flex;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.tp__contagem { display: flex; align-items: baseline; gap: 8px; }

.tp__contagem strong {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.tp__contagem span {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Estado da última atualização: um ponto e uma frase. A pílula com fundo
   competia com os selos da tabela por atenção que nenhuma das duas merecia. */
.tp__quando {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}

.tp__quando i { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--st-alterado); }
.tp__quando--velho { color: var(--st-novidade); }
.tp__quando--velho i { background: var(--st-novidade); }
.tp__quando--erro { color: var(--red); }
.tp__quando--erro i { background: var(--red); }

.tp__exportar { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* os botões de exportar seguem o padrão do site (.btn); aqui só o tamanho,
   um pouco mais baixo que o CTA de produto para não brigar com o número de itens */
.tp__acao { height: 42px; padding-inline: 18px; }
.tp__acao svg { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   TABELA
   -------------------------------------------------------------------------- */
/* Sem `overflow` aqui de propósito. Qualquer ancestral com overflow diferente
   de `visible` prende o `position: sticky` do thead a ESTE elemento em vez de
   ao viewport — e o cabeçalho, que deveria acompanhar a rolagem, fica parado
   dentro da caixa. Com as larguras de coluna abaixo a tabela cabe a partir de
   ~950 px, então a rolagem lateral só é ligada na faixa em que faz falta. */
.tp__rolagem { overflow: visible; }

@media (min-width: 861px) and (max-width: 1010px) {
  .tp__rolagem { overflow-x: auto; }
}

/* `separate` com espaçamento zero, e não `collapse`: no modo colapsado o
   navegador ignora border-radius nas células, e a faixa preta do cabeçalho
   ficaria de canto vivo dentro de uma página toda arredondada. Sem espaçamento
   e com só a borda de baixo nas células, o desenho é idêntico ao de antes. */
.tp__tabela {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  /* `fixed` faz o navegador respeitar as proporções abaixo em vez de medir o
     conteúdo. Sem isso o espaço que sobra vai TODO para a descrição e o resto
     das colunas se amontoa lá na direita, com um rombo no meio da linha. */
  table-layout: fixed;
}

/* Proporções, não pixels: o excedente das telas largas se distribui por todas
   as colunas. Se alguma for desligada no painel, o navegador reescala o que
   restou — por isso larguras relativas e não fixas. */
.tp__tabela .c-cod    { width: 7%; }
.tp__tabela .c-status { width: 12%; }
.tp__tabela .c-kg     { width: 12%; }
.tp__tabela .c-peso   { width: 10%; }
.tp__tabela .c-preco  { width: 13%; }
.tp__tabela .c-obs    { width: 11%; }

/* O cabeçalho acompanha a rolagem: numa tabela de centenas de linhas, perder
   os rótulos é perder a leitura de qual número é qual. */
/* A família fica aqui, e não só nas classes de coluna: `.tp--cod` e `.tp--num`
   valem para a célula E para o cabeçalho, e sem isto o título da coluna vinha
   em monoespaçada junto com os valores. Rótulo é texto, não número. */
.tp__tabela thead th {
  position: sticky;
  top: var(--tp-topo);
  z-index: 3;
  text-align: left;
  padding: 0 16px;
  height: 52px;
  font-family: var(--fonte-dados);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .88);
  background: linear-gradient(180deg, #23252b 0%, var(--ink) 100%);
  box-shadow: inset 0 -2px 0 var(--red);   /* fio vermelho da marca no pé da faixa */
  white-space: nowrap;
}

/* seta de ordenação: apagada nas colunas clicáveis, cheia na coluna ordenada */
.tp__seta { display: inline-block; margin-left: 6px; font-size: 12px; line-height: 1; vertical-align: -1px; transition: opacity .15s, transform .15s; }
.tp__seta--inativa { opacity: .3; }
.tp__tabela th a:hover .tp__seta--inativa { opacity: .75; }
.tp__tabela th a:has(.tp__seta:not(.tp__seta--inativa)) { color: #fff; }
.tp__tabela th a:has(.tp__seta:not(.tp__seta--inativa))::after {
  content: ""; display: block; height: 2px; margin-top: 5px; background: var(--red); border-radius: 2px;
}

/* Os cantos externos da faixa preta. As colunas do meio ficam retas: o raio é
   da barra inteira, não de cada rótulo. */
.tp__tabela thead th:first-child { border-top-left-radius: var(--radius-sm); }
.tp__tabela thead th:last-child { border-top-right-radius: var(--radius-sm); }

.tp__tabela th a { display: inline-block; color: inherit; transition: color .15s; padding: 6px 0; }
.tp__tabela th a:hover { color: #fff; }

.tp__tabela td {
  padding: 15px 16px;
  border-bottom: 1px solid var(--line-2);
  vertical-align: middle;
}

/* Sem zebra. As faixas cinza alternadas brigavam com os dois fundos que
   significam algo — alterado e em falta — e faziam os três virarem ruído. */
/* fundos mais firmes (21/09/2026): os tons anteriores sumiam em monitor claro */
.tp__tabela tbody tr.is-alterado { background: #dcefe2; box-shadow: inset 3px 0 0 var(--st-alterado); }
.tp__tabela tbody tr.is-falta { background: #fde3e0; box-shadow: inset 3px 0 0 var(--red); }
.tp__tabela tbody tr:hover { background: var(--wash); }
.tp__tabela tbody tr.is-alterado:hover { background: #cfe8d8; }
.tp__tabela tbody tr.is-falta:hover { background: #fbd5d1; }

.tp--cod {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* A descrição chega em CAIXA ALTA do WinThor. Caixa alta longa não se lê em
   bloco: o tracking positivo e o peso médio devolvem o espaço entre letras
   que a caixa alta come. */
.tp--desc {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .015em;
  color: var(--ink);
}

/* Tudo que é número alinha pela direita, inclusive o peso e — importante — o
   rótulo no cabeçalho. O `th` tem especificidade maior que a classe, então
   precisa ser nomeado aqui; sem isso o título fica à esquerda e os algarismos
   à direita, e a coluna parece torta. */
/* `tabular-nums` é o que faz a coluna de valores alinhar: sem ele o "1" da
   Plex é mais estreito que o "8", e as casas dançam de uma linha para a outra. */
.tp--num,
.tp--meio,
.tp__tabela thead th.tp--num,
.tp__tabela thead th.tp--meio {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.tp--kg { font-size: 12px; font-weight: 400; color: var(--muted); }
.tp--meio { font-size: 12px; font-weight: 400; color: var(--muted); }

.tp__tabela thead th.tp--num,
.tp__tabela thead th.tp--meio { font-size: 11px; }

/* Status e observação alinhados à esquerda, encostados na descrição. Centrados
   ficavam boiando no meio de um vão, com o rótulo longe do próprio dado. */
.tp--estado { white-space: nowrap; }
/* Obs. é a última coluna: alinha à direita, debaixo do próprio rótulo */
.tp--obs { text-align: right; }

/* A Plex Sans tem altura-x maior que a Poppins: no mesmo corpo, o 600 dela
   já pesa o que pesava o 700 anterior. */
.tp--preco {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
}

.tp__tabela tr.is-falta .tp--preco { color: var(--muted-2); text-decoration: line-through; font-weight: 400; }

/* --- Selos: um ponto e uma palavra ---
   A caixa com borda e fundo em volta de cada estado transformava a coluna
   numa fileira de etiquetas. O ponto carrega a cor, o texto carrega o nome. */
.tp__selo,
.tp__falta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.tp__selo::before,
.tp__falta::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
}

.tp__selo--novidade { color: var(--st-novidade); }
.tp__selo--alterado { color: var(--st-alterado); }
.tp__selo--chegou   { color: var(--st-chegou); }
.tp__falta          { color: var(--red); }

/* --- Nada encontrado ---
   Tela vazia é convite para agir, não recado de erro: diz o que houve e já
   oferece a saída. A moldura tracejada genérica do catálogo não servia aqui. */
.tp__vazio {
  padding: 56px 0 64px;
  border-top: 3px solid var(--ink);
  text-align: center;
}

.tp__vazio-titulo {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
  margin-bottom: 8px;
}

.tp__vazio-texto {
  font-size: 13.5px;
  color: var(--muted);
  max-width: 46ch;
  margin: 0 auto 24px;
}

.tp__vazio .btn { height: 44px; padding: 0 26px; }

/* --------------------------------------------------------------------------
   Celular: cada produto vira um cartão
   Sete colunas não cabem em 360 px, e rolar na horizontal esconde justamente
   o preço. Cada célula passa a mostrar o próprio rótulo, de `data-rotulo`.
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .tp { padding: 28px 0 48px; }

  /* Duas colunas: a busca toma a linha inteira e os quatro filtros se dividem
     em pares. Cinco colunas nesta largura dariam campos de 60 px. */
  .tp__filtros { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .tp__f--busca { grid-column: 1 / -1; }
  .tp__faixa input { flex: 1 1 0; width: auto; padding: 0 4px; }
  .tp__barra { gap: 12px 18px; }
  .tp__exportar { margin-left: 0; width: 100%; gap: 10px; }
  .tp__exportar .tp__acao { flex: 1; }

  .tp__rolagem { overflow: visible; }
  .tp__tabela colgroup { display: none; }
  .tp__tabela thead { display: none; }
  .tp__tabela,
  .tp__tabela tbody,
  .tp__tabela tr,
  .tp__tabela td { display: block; width: 100%; }

  .tp__tabela tbody tr {
    border: 1px solid var(--line);
    border-top: 3px solid var(--ink);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 12px;
    padding: 2px 0;
    background: var(--white);
  }

  .tp__tabela tbody tr:hover { background: var(--white); }
  .tp__tabela tbody tr.is-alterado { background: var(--st-alterado-b); border-top-color: var(--st-alterado); }
  .tp__tabela tbody tr.is-falta { background: #fff8f7; border-top-color: var(--red); }

  .tp__tabela td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    text-align: right;
    padding: 8px 14px;
    border-bottom: 1px solid var(--line-2);
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .tp__tabela td:last-child { border-bottom: 0; }

  .tp__tabela td::before {
    content: attr(data-rotulo);
    flex: 0 0 auto;
    text-align: left;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted-2);
  }

  /* Célula sem conteúdo não vira uma linha só com o rótulo. */
  .tp__tabela td:empty { display: none; }
  .tp--desc { font-size: 13.5px; }
  .tp--preco { font-size: 17px; }
}

/* --------------------------------------------------------------------------
   Impressão: sai a lista de preços, mais nada
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .hero, .benefits,
  .tp__filtros, .tp__exportar, .tp__ver, .pager, .toast { display: none !important; }

  .tp { padding: 0; }
  .tp__condicoes { padding-bottom: 10px; margin-bottom: 12px; }
  .tp__condicoes-rotulo { font-size: 8px; margin-bottom: 6px; }

  /* Recolhido na tela, inteiro no papel: quem imprime leva o documento todo. */
  .tp__condicoes[data-recolhido] .tp__rico {
    max-height: none;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .tp__rico { font-size: 9px; line-height: 1.45; max-width: none; columns: 2; column-gap: 24px; }
  .tp__rico p { margin: 0 0 2px; break-inside: avoid; }

  .tp__barra { padding-bottom: 6px; margin-bottom: 8px; border-bottom: 1px solid #000; }
  .tp__contagem strong { font-size: 13px; }
  .tp__tabela { font-size: 9.5px; }
  .tp__tabela thead th { position: static; height: auto; padding: 4px 6px; background: none; color: #000; border-bottom: 1.5px solid #000; }
  .tp__tabela td { padding: 4px 6px; }
  .tp--preco { font-size: 10px; }
  .tp__rolagem { overflow: visible; }

  /* O fundo destacado e os selos SÃO a informação — as condições dizem
     "preços com alteração em cor de fundo destacado". Sem isto o navegador
     imprime tudo branco e a legenda passa a mentir. */
  .tp__selo, .tp__falta,
  .tp__rico span[style*="background"],
  .tp__tabela tbody tr.is-alterado,
  .tp__tabela tbody tr.is-falta {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .tp__tabela tbody tr { break-inside: avoid; }
  thead { display: table-header-group; }
}
/* --- Paginação --- */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.pager__nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color .16s;
}

.pager__nav svg { width: 15px; height: 15px; }
.pager__nav:hover:not(:disabled) { color: var(--red); }

.pager__nav:disabled {
  color: #c9c9c9;
  cursor: default;
}

.pager__list {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pager__page {
  min-width: 38px;
  height: 38px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  transition: border-color .16s, background .16s, color .16s;
}

.pager__page:hover { border-color: var(--line-hover); }

.pager__page.is-active {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}

.pager__gap {
  min-width: 20px;
  text-align: center;
  color: var(--muted-2);
  font-size: 13px;
}

/* --- Estado vazio --- */
.empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  font-size: 13.5px;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}

/* --- Toast de carrinho --- */
.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--ink);
  color: var(--white);
  padding: 15px 22px;
  border-left: 3px solid var(--red);
  border-radius: var(--radius);
  font-size: 13.5px;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity .22s, transform .22s;
}

.toast.is-visible { opacity: 1; transform: translateY(0); }
.toast svg { width: 18px; height: 18px; color: var(--red); }

/* ==========================================================================
   Responsivo
   ========================================================================== */

@media (max-width: 1200px) {
  .hero__scene { width: 380px; }
  .products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  :root { --gutter: 28px; }

  /* o menu vira painel: nesta largura os sete itens não cabem numa linha */
  .burger { display: grid; }

  .nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin: 0;
    background: var(--ink);
    border-bottom: 1px solid var(--line-dark);
    padding: 8px var(--gutter) 22px;
    display: none;
  }

  .nav.is-open { display: block; }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav__link {
    padding: 15px 0;
    font-size: 12.5px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }

  .nav__link[aria-current="page"]::after { display: none; }
  .nav__link[aria-current="page"] { color: var(--red); }

  .site-header__inner { position: relative; gap: 16px; }
  .lang { margin-left: 0; padding-left: 18px; }

  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; }
  .footer__brand { grid-column: 1 / -1; }

  /* coluna única: volta à ordem do documento (galeria › informações › texto) */
  .product__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    gap: 40px;
  }

  .gallery,
  .product__info { grid-area: auto; }
  .product__title { font-size: 38px; }


  .shop { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .filters { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; }
  .filters .btn--outline { max-width: 300px; }

  .benefits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
}

@media (max-width: 860px) {
  /* a cena comeria o texto nesta largura: o hero fica só tipográfico,
     que é como o site institucional resolve o topo */
  .hero__scene { display: none; }
  .hero__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 42px 0 48px;
    max-width: none;
    min-height: 0;
  }
  .hero__title { font-size: 34px; }
  .hero__text { border-left: 0; border-top: 2px solid var(--red); padding: 18px 0 0; }

  .products, .products--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .products--lista { grid-template-columns: minmax(0, 1fr); }
  .products--lista .card {
    grid-template-columns: 96px minmax(0, 1fr);
    grid-template-areas:
      "media title"
      "media meta"
      "media price"
      "actions actions";
    column-gap: 14px;
    padding: 12px;
  }
  .products--lista .card__price { margin-top: 8px; }
  .toolbar { flex-direction: column; align-items: flex-start; }
  .toolbar__acoes { width: 100%; justify-content: space-between; }
  .section-head h2 { font-size: 26px; }
}

@media (max-width: 640px) {
  :root { --gutter: 18px; }

  .product__title { font-size: 30px; }
  /* Três colunas no celular. Os divisores do `.attr + .attr::before` só valem
     entre itens da MESMA linha: quem abre linha (1º, 4º…) não pode ter risco
     à esquerda. Com 3 colunas isso é todo `3n+1`. */
  .attrs { grid-template-columns: repeat(3, 1fr); row-gap: 20px; }
  .attr:nth-child(3n+1)::before { display: none; }
  .attr { padding: 4px 4px; gap: 8px; }
  .attr span { font-size: 10px; line-height: 1.3; }
  .attr svg { width: 24px; height: 24px; }

  /* 530 dos 608 produtos têm QUATRO benefícios, então em três colunas o
     quarto sobra sozinho na segunda linha. Centralizado ele parece intenção;
     encostado à esquerda parece defeito. Esconder não era opção: a faixa preta
     de benefícios mais abaixo na página é texto fixo do site, não os
     benefícios deste produto — o quarto item não aparece em nenhum outro
     lugar. */
  .attr:nth-child(4):last-child { grid-column: 2; }

  .buy { flex-wrap: wrap; }
  .buy .btn--red { flex: 1 1 100%; }

  .variant { padding: 13px 15px; }
  .variant__size { font-size: 16px; }
  .variant__price .price { font-size: 19px; }

  .products,
  .benefits__grid { grid-template-columns: 1fr; }

  .benefit__title { white-space: normal; }
  .section-head h2 { font-size: 23px; }

  /* nesta largura os rótulos "Anterior/Próxima" empurram os números
     para fora da tela: ficam só as setas */
  .pager { gap: 10px; }
  .pager__nav { font-size: 0; gap: 0; }
  .pager__nav svg { width: 18px; height: 18px; }
  .pager__page { min-width: 34px; height: 34px; }

  .brand img { height: 38px; }
  .site-header__inner { min-height: 64px; gap: 12px; }
  .lang { gap: 7px; padding-left: 14px; }
  .lang__btn { width: 21px; }

  .footer__cols { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .footer__cta h2 { font-size: 22px; }
  .footer__bottom { justify-content: flex-start; gap: 8px; }
  .select select { min-width: 0; width: 100%; }
  .toolbar__sort { width: 100%; }
  .toast { left: 18px; right: 18px; }
}

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* ==========================================================================
   BLOG (blog.php e artigo.php)

   Canal de aquisição por busca: quem chega aqui não conhece a marca e veio
   atrás de uma resposta. O texto manda, e tudo o mais — produto citado,
   relacionados, cotação — vem depois de a resposta ter sido dada.
   ========================================================================== */

/* O hero do blog não leva a cena da direita: o assunto muda a cada categoria,
   e uma foto fixa de castanha brigaria com um artigo sobre grão de bico. */
.hero--blog .hero__inner { max-width: none; }

.blog { padding: 40px 0 64px; }

/* --- Chips de assunto --- */
.assuntos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 26px;
  margin-bottom: 34px;
  border-bottom: 1px solid var(--line);
}

.assunto {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  transition: border-color .18s, background .18s, color .18s;
}

.assunto:hover { border-color: var(--line-hover); }

.assunto.is-ativo {
  border-color: var(--red);
  background: var(--red-tint);
  color: var(--red-dark);
}

.assunto__quantos {
  min-width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  padding: 0 4px;
  border-radius: var(--radius-xs);
  background: var(--wash);
  color: var(--muted-2);
  font-size: 10px;
  font-weight: 700;
}

.assunto.is-ativo .assunto__quantos { background: var(--white); color: var(--red-dark); }


/* --- Grade de artigos --- */
.artigos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

.artigo-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  transition: border-color .18s, box-shadow .18s;
}

.artigo-card:hover {
  border-color: var(--line-hover);
  box-shadow: var(--sombra-hover);
}

.artigo-card__foto {
  display: block;
  background: var(--wash);
  aspect-ratio: 3 / 2;
}

.artigo-card__foto img { width: 100%; height: 100%; object-fit: cover; }

.artigo-card__corpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px 22px 22px;
}

.artigo-card__assunto {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 10px;
}

.artigo-card__titulo {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ink);
  margin-bottom: 10px;
}

.artigo-card__titulo a:hover { color: var(--red); }

.artigo-card__resumo {
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--muted);
  margin-bottom: 16px;
}

.artigo-meta {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--muted-2);
}

/* ==========================================================================
   ARTIGO
   ========================================================================== */
.artigo { padding: 0 0 40px; }

/* --- Trilha --- */
.trilha {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 22px 0 0;
  font-size: 11.5px;
  color: var(--muted-2);
}

.trilha a { color: var(--muted); transition: color .16s; }
.trilha a:hover { color: var(--red); }

/* O título atual não é link, e vai cortado: manchete longa quebraria a trilha
   em três linhas. */
.trilha__atual {
  color: var(--ink);
  max-width: 34ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.artigo__topo { padding: 30px 0 24px; }

/* A medida em `ch` acompanha o corpo do texto: o título fica com duas ou três
   linhas em qualquer largura, que é o ritmo de manchete. */
.artigo__titulo {
  font-size: 44px;
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -.03em;
  color: var(--ink);
}

.artigo-meta--topo { margin-top: 18px; }

.artigo__capa {
  margin: 0 0 42px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--wash);
}

/* `max-height` porque a capa é full width: em 3:2 a 1300 px ela teria 870 px de
   altura e engoliria a primeira tela inteira antes da primeira linha de texto.
   O `cover` recorta pelo meio, que é onde o assunto da foto costuma estar. */
.artigo__capa img {
  width: 100%;
  aspect-ratio: 3 / 2;
  max-height: 520px;
  object-fit: cover;
}

/* --- Índice "Neste artigo" --- */
.indice {
  border: 1px solid var(--line);
  border-left: 3px solid var(--red);
  border-radius: var(--radius);
  background: var(--wash);
  padding: 22px 26px;
  margin-bottom: 38px;
}

.indice__titulo {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 12px;
}

.indice__lista {
  list-style: decimal;
  padding-left: 18px;
  display: grid;
  gap: 7px;
}

.indice__lista a {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-3);
  transition: color .16s;
}

.indice__lista a:hover { color: var(--red); text-decoration: underline; }

/* --- O texto ---
   Largura cheia do container, por decisão de projeto.
   A entrelinha sobe para 1.85 e o corpo para 17.5px como compensação: linha
   longa cansa porque o olho erra o retorno para a linha de baixo, e mais
   respiro vertical é o que reduz esse erro. Não elimina — só ameniza. */
.prosa {
  font-size: 17.5px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--ink-3);
}

.prosa > * + * { margin-top: 1.15em; }

/* `scroll-margin-top` porque o cabeçalho é fixo: sem isto o link do índice
   para na seção com o título escondido atrás do menu. */
.prosa h2 {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-top: 1.9em;
  scroll-margin-top: 96px;
}

.prosa h3 {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  margin-top: 1.6em;
  scroll-margin-top: 96px;
}

.prosa ul, .prosa ol { padding-left: 22px; display: grid; gap: 8px; }
.prosa ul { list-style: disc; }
.prosa ol { list-style: decimal; }
.prosa li { line-height: 1.7; }

.prosa a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.prosa a:hover { color: var(--red-dark); }

.prosa strong, .prosa b { font-weight: 600; color: var(--ink); }

.prosa blockquote {
  border-left: 3px solid var(--red);
  padding: 4px 0 4px 22px;
  margin-left: 0;
  font-size: 19px;
  font-weight: 300;
  font-style: italic;
  line-height: 1.6;
  color: var(--ink);
}

.prosa figure { margin: 2em 0; }

.prosa img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  background: var(--wash);
}

.prosa figcaption {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--muted-2);
  line-height: 1.5;
}

.prosa hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }

/* --- Produtos citados e relacionados --- */
.citados,
.mais-artigos {
  padding-top: 52px;
  margin-top: 52px;
  border-top: 1px solid var(--line);
}

.citados__grade {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

/* --- Chamada de cotação --- */
.artigo__cotacao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 56px;
  padding: 34px 38px;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--muted-dark);
}

.artigo__cotacao h2 {
  font-size: 25px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 8px;
}

.artigo__cotacao p { font-size: 14px; font-weight: 300; }
.artigo__cotacao .btn--red { height: 52px; padding: 0 30px; }

/* ---------- Responsivo do blog ---------- */
@media (max-width: 1100px) {
  .citados__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .artigos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .artigo__titulo { font-size: 35px; }
}

@media (max-width: 860px) {
  .citados__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .artigos { grid-template-columns: minmax(0, 1fr); }
  .artigo__titulo { font-size: 28px; max-width: none; }
  .prosa { font-size: 16px; }
  .prosa h2 { font-size: 22px; }
  .trilha__atual { display: none; }
  .artigo__cotacao { padding: 26px 22px; }
  .artigo__cotacao .btn--red { width: 100%; }
}


/* ==========================================================================
   VITRINE — carrossel de destaques no topo do blog

   A faixa rola de verdade (overflow-x + scroll-snap): dedo, roda e teclado
   funcionam sem JavaScript nenhum, e as setas e os pontos só empurram essa
   rolagem. Mesmo mecanismo da faixa "Compre junto" na página do produto — duas
   gramáticas de carrossel no mesmo site seriam uma a mais.

   Sem rolagem automática de propósito: slide que troca sozinho tira o texto da
   frente de quem está lendo, e é a queixa mais comum sobre carrossel.
   ========================================================================== */
.vitrine {
  position: relative;
  margin-bottom: 44px;
}

.vitrine__faixa {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  border-radius: var(--radius);
  /* a barra some, mas a rolagem continua — os pontos abaixo é que avisam
     quantos destaques existem */
  scrollbar-width: none;
}

.vitrine__faixa::-webkit-scrollbar { display: none; }
.vitrine__faixa:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }

.vitrine__slide {
  position: relative;
  scroll-snap-align: start;
  display: grid;
  place-items: center;
  /* Altura do destaque, revisada em 06/11/2026.
     O `min-height` é piso, não altura: com `place-items: center`, todo pixel
     que ele passa do conteúdo vira espaço vazio dividido entre cima e baixo.
     Era 420px e sobrava faixa escura em todo destaque.
     Com o piso abaixo do conteúdo, quem passou a mandar na altura é
     `conteúdo + padding` — e o padding era METADE dela (112px de 326px). Por
     isso a segunda redução foi no padding e nas margens internas do texto,
     não no piso: baixar o piso de novo não teria efeito nenhum.
     Mexer aqui é mexer em TODAS as larguras; as regras por breakpoint, no fim
     deste arquivo, só reduzem mais. */
  min-height: 190px;
  padding: 22px 8%;
  background: var(--ink);
  overflow: hidden;
  isolation: isolate;
}

/* A foto é fundo, não conteúdo: fica atrás do texto e rebaixada, porque quem
   precisa ganhar a leitura é o título. */
.vitrine__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

/* Véu escuro sobre a foto. Sem ele o texto branco cai em cima de uma área
   clara qualquer da imagem e some — e como a foto pode ser trocada no painel,
   não dá para confiar que ela sempre terá o canto escuro no lugar certo. */
.vitrine__slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(115% 85% at 50% 50%, rgba(11, 11, 11, .30), rgba(11, 11, 11, .78)),
    linear-gradient(to bottom, rgba(11, 11, 11, .10), rgba(11, 11, 11, .52));
}

.vitrine__texto {
  text-align: center;
  max-width: 60ch;
}

.vitrine__texto .eyebrow { margin-bottom: 10px; }

.vitrine__titulo {
  font-size: 38px;
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.03em;
  color: var(--white);
  margin-bottom: 10px;
}

/* O link do título cobre o slide inteiro: a área clicável vira o bloco todo,
   mas o que o leitor de tela anuncia continua sendo só o título. */
.vitrine__titulo a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.vitrine__titulo a { transition: color .18s; }
.vitrine__slide:hover .vitrine__titulo a { color: var(--red); }

.vitrine__resumo {
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--muted-dark);
  max-width: 56ch;
  margin: 0 auto 12px;
  /* Duas linhas em qualquer largura. O resumo do destaque vem do artigo e
     pode ter o tamanho que o autor quiser — sem o limite, um resumo comprido
     volta a inflar a altura do destaque, que é justamente o que esta seção
     passou a tarde ajustando. O artigo inteiro está a um clique. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vitrine__meta {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--muted-2);
}

/* --- Setas --- */
.vitrine__seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--radius-sm);
  background: rgba(11, 11, 11, .55);
  color: var(--white);
  transition: background .18s, border-color .18s, opacity .18s;
}

.vitrine__seta svg { width: 22px; height: 22px; }
.vitrine__seta:hover:not(:disabled) { background: var(--red); border-color: var(--red); }

/* Na ponta a seta apaga em vez de sumir: as duas não dançam de lugar. */
.vitrine__seta:disabled { opacity: .25; cursor: default; }

.vitrine__seta--anterior { left: 18px; }
.vitrine__seta--proxima  { right: 18px; }

/* --- Pontos --- */
.vitrine__pontos {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}

.vitrine__ponto {
  width: 26px;
  height: 4px;
  border: 0;
  padding: 0;
  border-radius: 2px;
  background: var(--line);
  transition: background .18s, width .18s;
}

.vitrine__ponto:hover { background: var(--muted-2); }
.vitrine__ponto.is-ativo { background: var(--red); width: 40px; }

/* ==========================================================================
   ARTIGO — coluna lateral de relacionados
   ========================================================================== */
/* Com a lateral, a coluna de texto volta a ter medida de leitura sem que a
   página perca a largura cheia: o que sobrava vazio à direita agora trabalha. */
.artigo__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 56px;
  align-items: start;
}

/* `sticky` porque num artigo de dez minutos uma barra parada sai da tela no
   primeiro terço e não serve mais para nada. O topo é a altura do cabeçalho
   fixo mais uma folga. */
.artigo__lado {
  position: sticky;
  top: 96px;
}

.lado {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px;
  background: var(--white);
}

.lado__titulo {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.lado__lista { display: grid; gap: 18px; }

.lado__item {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.lado__foto {
  display: block;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--wash);
  aspect-ratio: 3 / 2;
}

.lado__foto img { width: 100%; height: 100%; object-fit: cover; }

.lado__assunto {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 5px;
}

.lado__nome {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

.lado__nome a:hover { color: var(--red); }

.lado__todos {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  width: 100%;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color .18s;
}

.lado__todos svg { width: 14px; height: 14px; }
.lado__todos:hover { color: var(--red); }

/* ---------- Responsivo ---------- */
@media (max-width: 1100px) {
  /* A lateral vira um bloco embaixo do texto. `sticky` sai junto: grudado no
     topo depois de virar bloco, ele cobriria o fim do artigo. */
  .artigo__grade { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .artigo__lado { position: static; }
  .lado__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .vitrine__slide { min-height: 200px; padding: 26px 7%; }
  .vitrine__titulo { font-size: 28px; }
  .vitrine__seta { width: 40px; height: 40px; }
  .vitrine__seta--anterior { left: 10px; }
  .vitrine__seta--proxima  { right: 10px; }
}

@media (max-width: 640px) {
  /* O piso fica baixo de propósito: o texto já passa disso sozinho, então o
     conteúdo manda na altura e não sobra faixa escura em cima nem embaixo. */
  .vitrine__slide { min-height: 150px; padding: 16px 22px; }
  .vitrine__titulo { font-size: 23px; }

  /* O limite de duas linhas subiu para a regra base (vale em toda largura);
     aqui fica só o corpo menor. */
  .vitrine__resumo { font-size: 14px; }
  .lado__lista { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   BLOG — barra de assuntos e busca
   ========================================================================== */
.blog__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px 28px;
  flex-wrap: wrap;
  padding-bottom: 24px;
  margin-bottom: 34px;
  border-bottom: 1px solid var(--line);
}

/* A borda saiu para a barra que agora envolve as duas coisas: mantê-la aqui
   desenharia um segundo risco a poucos pixels do primeiro. */
.assuntos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}

.blog__busca,
.assuntos-menu {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 1 380px;
}

.assuntos-menu { flex-basis: 300px; }

/* Campo com o ícone dentro — o mesmo desenho da busca da tabela de preços,
   para o site não ter dois tipos de campo de busca. */
.campo-busca {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  transition: border-color .16s, box-shadow .16s;
}

.campo-busca svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--muted-2);
  transition: color .16s;
}

.campo-busca:hover { border-color: var(--line-hover); }

.campo-busca:focus-within {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.campo-busca:focus-within svg,
.campo-busca.tem-valor svg { color: var(--ink); }
.campo-busca.tem-valor { border-color: var(--ink); }

.campo-busca__campo {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}

.campo-busca__campo:focus { outline: 0; }
.campo-busca__campo::placeholder { color: var(--muted-2); font-weight: 400; }

/* O <select> do menu de assuntos usa o mesmo campo, sem a seta nativa. */
select.campo-busca__campo {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4.4l4 4 4-4' fill='none' stroke='%230b0b0b' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right center;
  padding-right: 20px;
}

.blog__busca .btn--red { height: 46px; padding: 0 20px; flex: none; }

/* --- Linha de resultado da busca --- */
.blog__resultado {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: -18px 0 30px;
  font-size: 13.5px;
  color: var(--muted);
}

.blog__resultado strong {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}

.blog__limpar {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid transparent;
  transition: color .18s, border-color .18s;
}

.blog__limpar:hover { color: var(--red); border-color: var(--red); }

/* ==========================================================================
   Paginação do blog

   O `.pager` original foi desenhado para "Anterior · números · Próxima" com
   22px entre os três grupos. Aqui os números ficam na própria lista, com
   espaçamento curto, e o vão maior sobra só entre os grupos — que é o que
   deixava os números parecendo soltos no meio da linha.
   ========================================================================== */
.pager--blog { flex-wrap: wrap; }

.pager--blog .pager__list {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Ponta da paginação: o link fica apagado e não recebe clique, em vez de
   sumir — as duas pontas sumindo fariam os números dançarem de lugar. */
.pager--blog .pager__nav[aria-disabled="true"] {
  color: #c9c9c9;
  pointer-events: none;
}

@media (max-width: 640px) {
  .blog__barra { gap: 16px; }
  .blog__busca,
  .assuntos-menu { flex-basis: 100%; }

  /* Nesta largura os rótulos empurram os números para fora da tela. */
  .pager--blog .pager__nav { font-size: 0; gap: 0; }
  .pager--blog .pager__nav svg { width: 18px; height: 18px; }
}

/* ==========================================================================
   FALE CONOSCO e VAGAS
   ========================================================================== */

/* O campo-armadilha do anti-spam. Fora da tela em vez de `display:none`:
   parte dos robôs ignora campo escondido por display, e leitor de tela não
   chega nele porque o contêiner tem aria-hidden. */
.isca {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Recado de sucesso e de erro --- */
.recado {
  display: block;
  padding: 14px 18px;
  margin-bottom: 24px;
  border-radius: var(--radius-sm);
  border-left: 3px solid;
  font-size: 14px;
  line-height: 1.5;
}

.recado--ok {
  border-color: var(--st-alterado);
  background: var(--st-alterado-b);
  color: var(--st-alterado);
}

.recado--erro {
  border-color: var(--red);
  background: var(--red-tint);
  color: var(--red-dark);
}

/* --- Abas --- */
.contato { padding: 36px 0 64px; }

.abas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 24px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--line);
}

.aba {
  padding: 11px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  transition: border-color .18s, background .18s, color .18s;
}

.aba:hover { border-color: var(--line-hover); }

.aba.is-ativa {
  border-color: var(--red);
  background: var(--red-tint);
  color: var(--red-dark);
}

/* --- Formulário ao lado do bloco de contato --- */
.contato__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 56px;
  align-items: start;
}

.contato__ajuda {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: 28px;
  max-width: 60ch;
}

/* Os campos do site reaproveitam as classes do painel (`.campo`, `.entrada`),
   que aqui ganham a tipografia e a altura da vitrine. */
.contato .campo,
.vaga .campo { margin-bottom: 18px; }

.contato .campo__rotulo,
.vaga .campo__rotulo {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}

.contato .campo__rotulo span,
.vaga .campo__rotulo span { color: var(--red); }

.contato .entrada,
.vaga .entrada {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-family: inherit;
  font-size: 14.5px;
  color: var(--ink);
  transition: border-color .16s, box-shadow .16s;
}

.contato textarea.entrada,
.vaga textarea.entrada { line-height: 1.6; resize: vertical; }

.contato .entrada:hover,
.vaga .entrada:hover { border-color: var(--line-hover); }

.contato .entrada:focus,
.vaga .entrada:focus {
  outline: 0;
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.contato .entrada.tem-erro,
.vaga .entrada.tem-erro { border-color: var(--red); }

.contato .campo__erro,
.vaga .campo__erro {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--red-dark);
}

.contato .campo__dica,
.vaga .campo__dica {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--muted-2);
  line-height: 1.5;
}

.contato .linha-campos,
.vaga .linha-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.contato .linha-campos--3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; }

/* --- Marcações --- */
.contato .grupo-marcas,
.vaga .grupo-marcas { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-bottom: 18px; }

.contato .marca,
.vaga .marca {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--ink-3);
  cursor: pointer;
  line-height: 1.5;
}

.contato .marca input,
.vaga .marca input { position: absolute; opacity: 0; pointer-events: none; }

.contato .marca i,
.vaga .marca i {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 1px;
  border: 1.5px solid #c4c4c4;
  border-radius: 4px;
  background: var(--white);
  transition: background .16s, border-color .16s;
  position: relative;
}

/* Rádio é redondo; caixa de marcação é quadrada de canto suave. */
.contato .marca input[type="radio"] + i,
.vaga .marca input[type="radio"] + i { border-radius: 50%; }

.contato .marca input:checked + i,
.vaga .marca input:checked + i { border-color: var(--red); background: var(--red); }

.contato .marca input:checked + i::after,
.vaga .marca input:checked + i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: no-repeat center/11px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>");
}

.contato .marca input:focus-visible + i,
.vaga .marca input:focus-visible + i { outline: 2px solid var(--ink); outline-offset: 2px; }

/* O aceite da LGPD é texto corrido, não rótulo curto: precisa de medida. */
.marca--consentimento { align-items: flex-start; max-width: 62ch; font-size: 13px; }
.marca--consentimento a { color: var(--red); text-decoration: underline; text-underline-offset: 2px; }

.contato__enviar,
.vaga__enviar { height: 52px; padding: 0 32px; margin-top: 8px; }
.vaga__enviar { width: 100%; }

.contato__linha {
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--muted);
  margin-bottom: 18px;
}

.contato__linha strong {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 5px;
}

.contato__linha a { display: block; color: var(--muted); transition: color .16s; }
.contato__linha a:hover { color: var(--red); }

/* ==========================================================================
   VAGAS
   ========================================================================== */
.vagas { padding: 40px 0 64px; }

.vagas__lista { display: grid; gap: 14px; margin-bottom: 56px; }

.vaga-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  padding: 26px 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  transition: border-color .18s, box-shadow .18s;
}

.vaga-card:hover {
  border-color: var(--line-hover);
  box-shadow: var(--sombra-hover);
}

.vaga-card__area {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 8px;
}

.vaga-card__titulo {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--ink);
  margin-bottom: 8px;
}

.vaga-card__titulo a:hover { color: var(--red); }

.vaga-card__resumo {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--muted);
  max-width: 62ch;
  margin-bottom: 14px;
}

.vaga-card__selos { display: flex; flex-wrap: wrap; gap: 8px; }

.selo {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: var(--radius-xs);
  background: var(--wash);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink-3);
}

/* O prazo é a única informação do bloco que muda de valor com o tempo. */
.selo--prazo { background: var(--st-novidade-b); color: var(--st-novidade); }

.vaga-card__botao { flex: none; height: 48px; padding: 0 24px; }

/* --- Banco de talentos --- */
.talentos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  padding: 34px 38px;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--muted-dark);
}

.talentos h2 {
  font-size: 25px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 8px;
}

.talentos p { font-size: 14px; font-weight: 300; max-width: 52ch; }
.talentos .btn--red { height: 52px; padding: 0 30px; flex: none; }

/* --- A vaga aberta --- */
.vaga { padding: 0 0 64px; }
.vaga__topo { padding: 26px 0 30px; }

.vaga__titulo {
  font-size: 38px;
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.028em;
  color: var(--ink);
  max-width: 24ch;
  margin-bottom: 16px;
}

.vaga__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 56px;
  align-items: start;
}

.vaga__secao {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 2em 0 .8em;
}

/* O formulário acompanha a rolagem: em vaga longa, quem se convenceu no meio
   do texto não deveria ter que voltar ao topo para se candidatar. */
.vaga__lado { position: sticky; top: 96px; }

/* ==========================================================================
   PAINEL — ficha de mensagem e candidatura
   ========================================================================== */
.ficha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; margin: 0; }
.ficha > div { min-width: 0; }

.ficha dt {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 4px;
}

.ficha dd { margin: 0; font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }

.ficha__texto {
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  background: var(--wash);
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-3);
  white-space: pre-line;
}

/* Contador ao lado do item da lateral do painel. */
.lateral__conta {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin: -34px 0 0 auto;
  position: relative;
  top: -26px;
  left: calc(100% - 46px);
  border-radius: 10px;
  background: var(--red, #e4322b);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

/* ---------- Responsivo ---------- */
@media (max-width: 1100px) {
  .contato__grade,
  .vaga__grade { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .vaga__lado { position: static; }
}

@media (max-width: 760px) {
  .contato .linha-campos,
  .contato .linha-campos--3,
  .vaga .linha-campos { grid-template-columns: minmax(0, 1fr); }
  .ficha { grid-template-columns: minmax(0, 1fr); }
  .vaga__titulo { font-size: 28px; max-width: none; }
  .vaga-card { padding: 22px; }
  .vaga-card__botao { width: 100%; }
  .talentos { padding: 26px 22px; }
  .talentos .btn--red { width: 100%; }
}

/* ==========================================================================
   QUEM SOMOS (quem-somos.php)
   ========================================================================== */

/* O título é longo ("A maior importadora e distribuidora…"): com `flex: none`
   herdado do hero, o bloco do título tomava a linha inteira e o parágrafo de
   apoio ficava com largura zero. Aqui ele pode encolher e quebra em três
   linhas, e o texto fica ao lado. */
.hero--sobre .hero__inner > div { flex: 0 1 600px; }
.hero--sobre .hero__title { font-size: 42px; }

/* Hero "largo" (Quem somos, Tabela de preços, Blog, Fale e Trabalhe conosco — todos menos Produtos, que tem a foto à direita): o miolo ocupa o container
   inteiro, título à esquerda e o texto com a barra vermelha encostado na borda
   direita. Abaixo de 980px empilha à esquerda como os outros. */
.hero--largo .hero__inner { max-width: none; justify-content: space-between; }
.hero--largo .hero__text { flex: 0 1 52ch; margin-left: auto; }
@media (max-width: 980px) {
  .hero--largo .hero__inner { flex-direction: column; align-items: flex-start; gap: 26px; }
  .hero--largo .hero__inner > div { flex: none; }
  .hero--largo .hero__text { flex: none; margin-left: 0; }   /* em coluna, o flex-basis viraria altura */
  .hero--sobre .hero__title { font-size: 34px; }
}

/* Números: uma faixa branca logo sob o hero preto, cinco colunas com o
   algarismo grande em vermelho. É o resumo que o texto antigo escondia em
   seis parágrafos. */
.numeros { border-bottom: 1px solid var(--line); }
.numeros__lista {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.numero {
  padding: 44px 28px;
  border-left: 1px solid var(--line);
}
.numero:first-child { border-left: 0; padding-left: 0; }
.numero strong {
  display: block;
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--red);
  font-variant-numeric: tabular-nums;
}
.numero span {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.bloco { padding: 104px 0; }
.bloco--escuro { background: var(--ink); color: var(--white); }
.bloco--escuro .eyebrow { color: var(--red); }

.bloco__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}
.bloco__titulo {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 22px;
}
.bloco__texto p {
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--muted);
}
.bloco__texto p + p { margin-top: 1em; }
.bloco__lead {
  max-width: none;   /* ocupa toda a largura do container (pedido do cliente, 21/09/2026) */
  margin: -14px 0 30px;
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--muted);
}

/* As fotos vieram do site antigo em 398×299: nunca maiores do que isso no
   layout, senão embaçam. O quadro vermelho atrás dá corpo sem esticar. */
.bloco__foto {
  position: relative;
  margin: 0;
  justify-self: end;
  max-width: 440px;
  width: 100%;
}
.bloco__foto::before {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  background: var(--red);
  border-radius: var(--radius);
  z-index: 0;
}
.bloco__foto img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  display: block;
}

.section-head--claro h2 { color: var(--white); }

.estrutura {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

/* Poster do vídeo com botão de play; o iframe entra no lugar ao clicar */
.video {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  aspect-ratio: 16 / 9;
}
.video img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .9; transition: transform .4s, opacity .3s; }
.video:hover img { transform: scale(1.03); opacity: 1; }
.video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 76px;
  height: 76px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  transition: transform .18s, background .18s;
}
.video__play svg { width: 34px; height: 34px; margin-left: 4px; }
.video:hover .video__play { transform: translate(-50%, -50%) scale(1.06); }
.video__legenda {
  position: absolute;
  left: 18px;
  bottom: 16px;
  padding: 7px 12px;
  background: rgba(11, 11, 11, .78);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: var(--radius-xs);
}
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.estrutura__itens { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.estrutura__itens li {
  padding-left: 22px;
  border-left: 2px solid var(--red);
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--muted-dark);
}
.estrutura__itens strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 2px;
}

/* Carrossel de fotos da estrutura: três à vista, o resto rola */
.galeria-estrutura { margin-top: 84px; }
.galeria-estrutura__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.galeria-estrutura__topo .eyebrow { margin: 0; }
.galeria-estrutura__topo .junto__setas { margin: 0; }
.galeria-estrutura__faixa {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(33.333% - 14.7px);
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 6px;
  scrollbar-width: none;
}
.galeria-estrutura__faixa::-webkit-scrollbar { display: none; }
.galeria-estrutura__faixa:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
.galeria-estrutura__item {
  margin: 0;
  scroll-snap-align: start;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
}
.galeria-estrutura__item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Famílias de produto: cards com ícone, no mesmo desenho da faixa de
   benefícios do produto (ícone vermelho em traço, título em caixa alta, linha
   de apoio), cada um um link para a categoria. */
.familias {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.familia {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  height: 100%;
  padding: 24px 24px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.familia svg { width: 32px; height: 32px; flex: none; color: var(--red); margin-top: 2px; }
.familia__nome {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.familia__texto {
  display: block;
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--muted);
}
.familia:hover { border-color: var(--line-hover); box-shadow: 0 10px 26px rgba(0, 0, 0, .07); transform: translateY(-2px); }

.compromisso { background: var(--wash); padding: 96px 0; }
.compromisso__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto;
  gap: 48px;
  align-items: center;
}
.compromisso__titulo {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 14px;
}
.compromisso__texto { font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--muted); max-width: 60ch; }
.compromisso__acoes { display: flex; flex-direction: column; gap: 12px; min-width: 260px; }
/* o contorno aqui não tem ícone: texto centralizado, igual ao vermelho de cima */
.compromisso__acoes .btn--outline { justify-content: center; }

@media (max-width: 1200px) {
  .numeros__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .numero { padding: 26px 22px; }
  .numero:nth-child(4) { border-left: 0; padding-left: 0; }
}
@media (max-width: 980px) {
  .bloco__grid, .estrutura, .compromisso__inner { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .familias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .galeria-estrutura__faixa { grid-auto-columns: calc(50% - 11px); }
  .bloco__foto { justify-self: start; }
  .compromisso__acoes { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 640px) {
  .bloco { padding: 64px 0; }
  .compromisso { padding: 64px 0; }
  .familias { grid-template-columns: minmax(0, 1fr); }
  .numeros__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .numero { padding: 20px 16px; }
  .numero:nth-child(4) { border-left: 1px solid var(--line); padding-left: 16px; }
  .numero:nth-child(odd) { border-left: 0; padding-left: 0; }
  .numero strong { font-size: 32px; }
  .bloco__titulo, .compromisso__titulo { font-size: 26px; }
  .galeria-estrutura__faixa { grid-auto-columns: 82%; }
}

/* aviso "artigo só em português" nas versões en/es do blog */
.aviso-idioma {
  margin: 0 0 22px;
  padding: 12px 16px;
  border-left: 3px solid var(--red);
  background: var(--wash);
  font-size: 13.5px;
  color: var(--muted);
}

/* ==========================================================================
   BOTÃO FLUTUANTE DO WHATSAPP (partials/whatsapp.php)
   Canto inferior direito, em toda página. O painel abre acima do botão.
   ========================================================================== */
.wa { position: fixed; right: 22px; bottom: 22px; z-index: 70; }

/* pílula: ícone + texto, no verde do WhatsApp; aberto, vira preto e diz "Fechar" */
.wa__botao {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 22px 0 16px;
  border-radius: 999px;
  background: #25d366;
  color: var(--white);
  font-family: var(--fonte-marca);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
  transition: transform .18s, box-shadow .18s, background .18s;
}
.wa__botao svg { width: 28px; height: 28px; flex: none; }
.wa__botao:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0, 0, 0, .32); background: #1ebe5b; }
.wa[data-wa-aberto] .wa__botao { background: var(--ink); }

.wa__painel {
  position: absolute;
  right: 0;
  bottom: 70px;
  width: min(340px, calc(100vw - 44px));
  padding: 22px 22px 18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .22);
}
.wa__fechar {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--muted);
}
.wa__fechar svg { width: 16px; height: 16px; }
.wa__fechar:hover { background: var(--wash); color: var(--ink); }
.wa__titulo {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.2;
  color: var(--ink);
  padding-right: 28px;
  margin: 0 0 6px;
}
.wa__texto { font-size: 13px; color: var(--muted); margin: 0 0 16px; }
.wa__erro {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-left: 3px solid var(--red);
  background: var(--red-tint);
  font-size: 12.5px;
  color: var(--red-dark);
}
.wa__form .campo { margin-bottom: 12px; }
.wa__form .entrada { min-height: 42px; padding: 9px 12px; font-size: 14px; }
.wa__enviar { width: 100%; justify-content: center; margin-top: 4px; }
.wa__nota { margin: 12px 0 0; font-size: 11px; line-height: 1.5; color: var(--muted-2); }
@media (max-width: 640px) {
  .wa { right: 14px; bottom: 14px; }
  .wa__botao { height: 52px; padding: 0 18px 0 14px; font-size: 11px; }
  .wa__botao svg { width: 26px; height: 26px; }

  /* ---- Painel em tela cheia no celular ----
     O painel de 340px ancorado acima do botão deixava o formulário apertado
     num canto, com o teclado do celular cobrindo metade dele. Em tela cheia o
     campo em foco tem para onde subir.

     ATENÇÃO: nada de `display` aqui. O painel é escondido pelo atributo
     `hidden` do HTML (`display: none` do navegador), e qualquer `display`
     nesta regra venceria — o painel ficaria visível SEMPRE. Por isso o layout
     continua em bloco; quem precisar de flex/grid tem de usar
     `.wa__painel:not([hidden])`.

     `position: fixed` aqui vale em relação à janela, não ao `.wa`: nenhum
     ancestral tem transform. E `z-index: 70` do `.wa` cobre o cabeçalho
     (que é 40). */
  .wa__painel {
    position: fixed;
    inset: 0;
    width: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow-y: auto;
    /* sem isto, arrastar dentro do painel rola a página atrás dele */
    overscroll-behavior: contain;
    /* respeita a barra de status e a faixa do gesto do iPhone */
    padding:
      calc(env(safe-area-inset-top, 0px) + 62px)
      max(20px, env(safe-area-inset-right, 0px))
      calc(env(safe-area-inset-bottom, 0px) + 24px)
      max(20px, env(safe-area-inset-left, 0px));
  }

  /* Alvo de toque maior e fora da área da barra de status. */
  .wa__fechar {
    top: calc(env(safe-area-inset-top, 0px) + 14px);
    right: 14px;
    width: 40px;
    height: 40px;
  }

  .wa__fechar svg { width: 20px; height: 20px; }

  /* Com o painel ocupando a tela, a pílula verde flutuaria por cima do
     formulário — e fechar já é o X no topo. */
  .wa[data-wa-aberto] .wa__botao { display: none; }

  .wa__titulo { font-size: 19px; }
  .wa__texto { font-size: 14px; margin-bottom: 20px; }
  .wa__form .entrada { min-height: 48px; font-size: 15px; }
  .wa__enviar { height: 50px; }

  /* A classe entra em `<html>` pelo main.js sempre que o painel abre, mas só
     trava a rolagem aqui, no celular: no desktop o painel é um balão e a
     página tem de continuar rolando. */
  .wa-aberto, .wa-aberto body { overflow: hidden; }
}

/* ==========================================================================
   HOME — página de apresentação (index.php)
   Cabeçalho transparente sobre a foto: fixo, com um véu escuro só no topo.
   Ao rolar, o JS liga `.is-solido` e ele volta ao preto do resto do site.
   ========================================================================== */
body.home .site-header {
  position: fixed;
  left: 0; right: 0; top: 0;
  padding-top: 36px;                          /* respiro do topo, como no layout */
  background: linear-gradient(180deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .35) 60%, transparent 100%);
  border-bottom-color: transparent;
  transition: background .25s, border-color .25s, padding .25s;
}
body.home .site-header.is-solido {
  padding-top: 0;
  background: var(--ink);
  border-bottom-color: rgba(255, 255, 255, .09);
}
/* logo maior sobre a foto; volta ao tamanho normal quando o cabeçalho fica sólido */
body.home .site-header .brand img { height: 64px; transition: height .25s; }
body.home .site-header.is-solido .brand img { height: 46px; }
@media (max-width: 640px) {
  body.home .site-header { padding-top: 10px; }
  body.home .site-header .brand img { height: 48px; }
}

/* ==========================================================================
   HOME — página de apresentação (index.php)
   Hero "capa": galpão escuro, chamada à esquerda, vídeo à direita.
   Sem a foto (`assets/img/home-hero.*`), o fundo é o preto com o brilho
   vermelho, o mesmo dos outros heros. Com a foto, ela entra por trás e um
   degradê garante a leitura do texto na metade esquerda.
   ========================================================================== */
.capa {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--white);
  isolation: isolate;
}
/* Scrub + cortina: em tela larga o wrapper é mais alto que a tela e o hero
   gruda no topo. A rolagem tem duas fases: --capa-pin-extra é o curso em que
   o main.js traduz rolagem em tempo do vídeo; --capa-pin-espera (uma tela) é
   quanto o hero continua preso enquanto a seção seguinte (o portfólio, com
   margem negativa dessa mesma altura) sobe por cima dele. No celular o
   wrapper não tem altura própria e nada disso acontece. */
/* as duas medidas ficam no body porque o portfólio (irmão do pin, não filho)
   também precisa delas — variável CSS só desce para descendentes */
body.home { --capa-pin-extra: 150vh; --capa-pin-espera: 100svh; }
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .capa-pin { height: calc(100svh + var(--capa-pin-extra) + var(--capa-pin-espera)); }
  .capa-pin .capa { position: sticky; top: 0; }
  .capa-pin + .portfolio {
    margin-top: calc(-1 * var(--capa-pin-espera));
    box-shadow: 0 -24px 60px rgba(0, 0, 0, .45);   /* borda de cima ganha relevo ao cobrir o escuro */
  }
  /* TUDO o que vem depois do pin (portfólio, seções futuras, rodapé) pinta por
     cima do hero — não só o portfólio: como ele é mais baixo que uma tela, o
     pin ainda sobra um trecho embaixo dele, e sem isto o hero reaparecia por
     trás do que vem em seguida. Irmãos posicionados depois no fluxo ganham
     do hero preso. Só blocos de conteúdo: o dialog é top-layer e o botão
     flutuante do WhatsApp (div.wa) precisa continuar fixed. */
  .capa-pin ~ :is(section, main, article, footer) {
    position: relative;
    z-index: 2;
  }
}
.capa::before {
  content: "";
  position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(110% 85% at 88% 8%, rgba(228, 50, 43, .32), transparent 58%);
}
/* A foto cobre o hero inteiro (galpão à esquerda, caminhão nas docas à
   direita); o degradê do ::after escurece a metade esquerda para o texto. */
.capa--foto::before {
  background: var(--capa-foto) center / cover no-repeat;
}
@media (max-width: 900px) {
  .capa--foto::before { background-position: 62% center; }
}
/* Com vídeo, em tela larga, a camada de fundo já é o primeiro quadro dele
   (--capa-poster): foto de fundo, poster e vídeo são a mesma imagem, e nada
   pula enquanto os arquivos chegam. */
@media (min-width: 901px) {
  .capa--video.capa--foto::before { background-image: var(--capa-poster, var(--capa-foto)); }
}
/* O vídeo de fundo do hero (`.capa__fundo` — `.capa__video` é o link "Assista
   ao vídeo") fica na mesma camada da foto, acima dela por vir depois no fluxo,
   e abaixo do degradê do ::after. Só aparece em tela larga; no celular o
   main.js nem carrega o arquivo e fica a foto. */
.capa__fundo {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: none;
}
@media (min-width: 901px) {
  .capa__fundo { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .capa__fundo { display: none; }
}
.capa::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    /* névoa escura em volta do quadro inteiro (vinheta): o centro fica limpo
       e as quatro bordas afundam no preto, fechando a cena do vídeo */
    radial-gradient(ellipse 62% 55% at 50% 48%, transparent 12%, rgba(0, 0, 0, .6) 56%, rgba(0, 0, 0, .94) 84%, #000 100%),
    linear-gradient(90deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .55) 40%, rgba(0, 0, 0, .12) 70%, rgba(0, 0, 0, .04) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, transparent 30%, transparent 70%, rgba(0, 0, 0, .55) 100%);
}
.capa:not(.capa--foto)::after { background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, .5) 100%); }

.capa__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  /* o hero ocupa a tela inteira abaixo do cabeçalho, como no layout (1920×1080);
     o conteúdo fica ancorado no terço inferior */
  min-height: 100svh;
  padding-top: calc(var(--tp-topo) + 72px);   /* espaço do cabeçalho fixo */
  padding-bottom: 26vh;                        /* botões terminam a ~74% da tela, como no layout */
}

/* Régua miúda de números, entre o texto de apoio e os botões: credencial em
   letra pequena, sem competir com o título. */
.capa__numeros {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0 26px;
  margin: 0 0 30px;
  --capa-atraso: .82s;
}
.capa__numero { padding-left: 26px; border-left: 1px solid var(--line-dark); }
.capa__numero:first-child { border-left: 0; padding-left: 0; }
.capa__numero strong {
  display: block;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--red);
}
.capa__numero span {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-dark);
  margin-top: 4px;
}
@media (max-width: 640px) {
  /* três colunas de largura igual: em linha só, com o rótulo quebrando */
  .capa__numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-bottom: 22px; }
  .capa__numero { padding-left: 12px; }
  .capa__numero strong { font-size: 22px; }
  .capa__numero span { font-size: 8.5px; letter-spacing: .04em; line-height: 1.35; }
}

}

.capa__texto { max-width: 640px; }
.capa__texto .eyebrow { margin-bottom: 18px; }

.capa__titulo {
  /* título longo ("A maior importadora e distribuidora de cereais do Brasil"):
     um degrau menor que o anterior, para caber em três linhas sem espremer */
  font-size: clamp(36px, 4.6vw, 70px);
  font-weight: 800;
  line-height: .96;
  letter-spacing: -.03em;
  text-transform: uppercase;
  margin: 0 0 22px;
}
.capa__destaque { display: block; }
.capa__vermelho { color: var(--red); }

.capa__lead {
  max-width: 52ch;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(255, 255, 255, .88);
  margin: 0 0 34px;
}

.capa__acoes { display: flex; flex-wrap: wrap; gap: 14px; }
.capa__btn { height: 54px; padding: 0 44px; font-size: 12px; }

/* botão vazado sobre fundo escuro — o par do vermelho no hero */
.btn--vazado {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255, 255, 255, .85);
}
.btn--vazado:hover { background: var(--white); color: var(--ink); border-color: var(--white); }

/* chamada do vídeo: play redondo + duas linhas */
.capa__video {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  color: var(--white);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.45;
  flex: none;
  padding-bottom: 4px;
}
.capa__play {
  width: 74px; height: 74px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .9);
  transition: background .18s, transform .18s;
}
.capa__play svg { width: 34px; height: 34px; }
.capa__video:hover .capa__play { background: var(--red); border-color: var(--red); transform: scale(1.05); }
/* pulso suave: dois anéis saem do círculo e se dissolvem, defasados, num
   ciclo de 3 s — chama o olho sem gritar; some ao passar o mouse (o hover
   já responde) e com prefers-reduced-motion */
.capa__play { position: relative; isolation: isolate; }
.capa__play::before,
.capa__play::after {
  content: "";
  position: absolute; inset: -3px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .55);
  animation: play-pulso 3s cubic-bezier(.2, .6, .3, 1) infinite;
  pointer-events: none;
  z-index: -1;
}
.capa__play::after { animation-delay: 1.2s; }
.capa__video:hover .capa__play::before,
.capa__video:hover .capa__play::after { animation-play-state: paused; opacity: 0; }
@keyframes play-pulso {
  0%   { transform: scale(1);    opacity: .7; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .capa__play::before, .capa__play::after { animation: none; display: none; } }

/* indicador de rolagem: mouse desenhado em CSS, rodinha que desce e some */
.capa__rolar {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, .8);
  text-decoration: none;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: color .18s;
}
.capa__rolar:hover { color: var(--white); }
.mouse {
  display: block;
  width: 26px;
  height: 42px;
  border: 2px solid currentColor;
  border-radius: 14px;
  position: relative;
}
.mouse__roda {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: currentColor;
  animation: mouse-roda 1.8s ease-in-out infinite;
}
@keyframes mouse-roda {
  0%   { transform: translateY(0); opacity: 1; }
  60%  { transform: translateY(14px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .mouse__roda { animation: none; } }
@media (max-width: 640px) { .capa__rolar { display: none; } }

/* Entrada do hero: cada peça sobe e aparece, em cascata de cima para baixo
   (olho-de-texto → título → destaque → lead → botões → link do vídeo →
   indicador de rolagem). O título entra em duas partes: as linhas brancas e
   depois a vermelha, cada uma revelada de baixo para cima por trás de uma
   máscara (overflow hidden no bloco). Só roda uma vez, no carregamento. */
@keyframes capa-sobe {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes capa-aparece {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes capa-revela {
  from { opacity: 0; transform: translateY(105%); }
  to   { opacity: 1; transform: translateY(0); }
}
.capa__texto > *,
.capa__video,
.capa__numeros,
.capa__rolar {
  --capa-atraso: 0s;
  animation: capa-sobe .9s cubic-bezier(.2, .7, .2, 1) both;
  animation-delay: var(--capa-atraso);
}
.capa__texto .eyebrow { --capa-atraso: .15s; }
.capa__titulo   { --capa-atraso: .3s; }
.capa__lead     { --capa-atraso: .75s; }
.capa__acoes    { --capa-atraso: .9s; }
.capa__video    { --capa-atraso: 1.15s; }
.capa__rolar    { --capa-atraso: 1.5s; animation-duration: 1.2s; }
/* o título em si só aparece (sem subir): quem sobe são as linhas, por trás da máscara */
.capa__titulo { animation-name: capa-aparece; overflow: hidden; padding-bottom: .08em; margin-bottom: calc(22px - .08em); }
.capa__titulo .capa__linhas,
.capa__titulo .capa__destaque {
  display: block;
  animation: capa-revela 1s cubic-bezier(.2, .7, .2, 1) both;
}
.capa__titulo .capa__linhas   { animation-delay: .35s; }
.capa__titulo .capa__destaque { animation-delay: .55s; }
/* os dois botões entram um atrás do outro */
.capa__acoes .capa__btn { animation: capa-sobe .8s cubic-bezier(.2, .7, .2, 1) both; }
.capa__acoes .capa__btn:nth-child(1) { animation-delay: .9s; }
.capa__acoes .capa__btn:nth-child(2) { animation-delay: 1.02s; }
@media (prefers-reduced-motion: reduce) {
  .capa__texto > *, .capa__video, .capa__numeros, .capa__rolar,
  .capa__titulo .capa__linhas, .capa__titulo .capa__destaque, .capa__acoes .capa__btn { animation: none; }
}

/* --------------------------------------------------------------------------
   PORTFÓLIO — texto à esquerda, quatro cards altos de categoria à direita
   -------------------------------------------------------------------------- */
.portfolio { background: var(--white); color: var(--ink); padding: 120px 0; }
.portfolio__inner {
  display: grid;
  grid-template-columns: minmax(280px, 440px) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 80px);
  align-items: center;   /* texto e carrossel centrados na mesma linha */
}
.portfolio__texto { padding-top: 62px; }   /* mesmo recuo das setas: centro do texto = centro dos cards */
.portfolio__texto .eyebrow { margin-bottom: 18px; }
.portfolio__titulo { scroll-margin-top: 150px; }   /* o "role para ver mais" para abaixo do cabeçalho fixo */
.portfolio__titulo {
  font-size: clamp(34px, 3.4vw, 50px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--muted);   /* cinza: o vermelho da última linha é o que acende */
  margin: 0 0 26px;
}
.portfolio__destaque { display: block; color: var(--red); }
.portfolio__lead {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.9;
  color: var(--ink-3);
  max-width: 48ch;
  margin: 0 0 34px;
}
.portfolio__ver {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1.5px solid var(--ink);
  color: var(--ink);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: color .18s, border-color .18s;
}
.portfolio__ver svg { width: 16px; height: 16px; transition: transform .18s; }
.portfolio__ver:hover { color: var(--red); border-color: var(--red); }
.portfolio__ver:hover svg { transform: translateX(4px); }

/* carrossel de categorias: sai do container e vai até a borda direita da tela
   (o quarto card fica espiando, dizendo que há mais). As setas ficam no canto
   direito da TELA (só a margem lateral), acima da faixa, no mesmo desenho do
   "Compre junto". */
.portfolio { overflow-x: clip; }
.portfolio__carrossel {
  min-width: 0;
  position: relative;
  padding-top: 62px;   /* as setas ficam aqui em cima, fora do fluxo, para o
                          texto centralizar com os CARDS e não com setas+cards */
  /* o espaço entre a borda do conteúdo e a borda da tela: metade da sobra do
     container mais a margem lateral */
  --sangria: calc((100vw - min(100vw, var(--container))) / 2 + var(--gutter));
  margin-right: calc(-1 * var(--sangria));
}
.portfolio__setas { position: absolute; top: 0; right: var(--gutter); margin: 0; }
.portfolio__cards {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(230px, 17vw, 320px);
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 8px;
  padding-right: var(--sangria);     /* o último card para alinhado ao conteúdo */
  scroll-padding-right: var(--sangria);
  scrollbar-width: none;
}
.portfolio__cards::-webkit-scrollbar { display: none; }
.portfolio__cards:focus-visible { outline: 2px solid var(--red); outline-offset: 6px; }
.portfolio__cards .cat { scroll-snap-align: start; }
.cat__media video {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .35s ease;
}
.cat:hover .cat__media video { transform: scale(1.05); }
.cat--video .cat__media { background: #000; }

/* card de categoria: foto do produto em quadro alto, nome no pé sobre degradê */
.cat {
  position: relative;
  display: block;
  aspect-ratio: 275 / 405;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
  color: var(--white);
  text-decoration: none;
  isolation: isolate;
}
.cat__media { position: absolute; inset: 0; display: block; background: var(--white); }
.cat__media img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 10% 10% 32%;
  transition: transform .35s ease;
}
.cat:hover .cat__media img { transform: scale(1.05); }
.cat::after {
  content: "";
  position: absolute; inset: 0;
  /* o escuro fica só no pé, atrás do nome; o resto do card é branco puro */
  background: linear-gradient(180deg, transparent 66%, rgba(0, 0, 0, .55) 84%, rgba(0, 0, 0, .8) 100%);
  pointer-events: none;
}
.cat__pe {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 0 18px 20px;
  display: flex; flex-direction: column; gap: 4px;
}
.cat__nome {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.cat__conta { font-size: 11px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .75); }
.cat::before {
  content: "";
  position: absolute; left: 18px; bottom: 0; z-index: 2;
  width: 0; height: 3px; background: var(--red);
  transition: width .3s ease;
}
.cat:hover::before { width: calc(100% - 36px); }

/* --------------------------------------------------------------------------
   Modal do vídeo
   -------------------------------------------------------------------------- */
.video-modal {
  width: min(1100px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: #000;
  overflow: visible;
}
.video-modal::backdrop { background: rgba(0, 0, 0, .82); }
.video-modal__quadro { aspect-ratio: 16 / 9; width: 100%; background: #000; }
.video-modal__quadro iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-modal__fechar {
  position: absolute; right: 0; top: -46px;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: var(--white);
  cursor: pointer;
  transition: background .18s;
}
.video-modal__fechar:hover { background: var(--red); }
.video-modal__fechar svg { width: 18px; height: 18px; }

@media (max-width: 1100px) {
  .capa__inner { min-height: min(680px, 100svh); padding-top: calc(var(--tp-topo) + 56px); padding-bottom: 72px; }
  .portfolio { padding: 88px 0; }
  .portfolio__inner { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .portfolio__lead { margin-bottom: 36px; }
  .portfolio__cards { grid-auto-columns: clamp(220px, 36vw, 320px); }
}
@media (max-width: 640px) {
  .capa__inner { flex-direction: column; align-items: flex-start; padding-top: calc(64px + 48px); padding-bottom: 56px; gap: 34px; }
  .capa__btn { width: 100%; }
  .capa__play { width: 60px; height: 60px; }
  .capa__play svg { width: 28px; height: 28px; }
  .portfolio { padding: 64px 0; }
  .portfolio__cards { gap: 10px; grid-auto-columns: 66vw; }
  .cat__pe { padding: 0 12px 14px; }
  .cat__nome { font-size: 13px; }
}

/* ==========================================================================
   HOME — seções abaixo do portfólio (partials/home/*.php), na ordem da página
   ========================================================================== */

/* Entrada ao rolar (só na home). O main.js marca cada [data-entra] com
   .vai-entrar e liga/desliga .entrou conforme a seção entra e SAI da tela —
   então a entrada se desfaz ao voltar e acontece de novo ao descer. Dentro da
   seção, cada [data-entra-item] sobe e aparece; os filhos de [data-entra-itens]
   fazem o mesmo em cascata (--entra-i vem do JS). Na saída a volta é rápida e
   sem atraso, para não ficar "sumindo" enquanto a pessoa rola para cima. O
   fundo da seção nunca anima. Sem JS nada disso existe e tudo nasce visível. */
.vai-entrar .entra {
  opacity: 0;
  transform: translateY(30px);
  /* saída (ao subir): afunda e some, do último bloco para o primeiro */
  transition: opacity .45s ease, transform .45s cubic-bezier(.4, 0, .8, .4);
  transition-delay: calc(var(--entra-rev, 0) * 60ms);
}
.vai-entrar.entrou .entra {
  opacity: 1;
  transform: none;
  /* entrada (ao descer): sobe e aparece, do primeiro para o último */
  transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--entra-i, 0) * 90ms);
}
/* a faixa de logos não sobe (deslocaria a máscara), só aparece */
.vai-entrar .marcas__faixa.entra { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .vai-entrar .entra { opacity: 1; transform: none; transition: none; }
}

/* ---- Marcas que confiam: faixa de logos em rolagem contínua ---- */
.marcas { background: var(--white); padding: 72px 0 100px; overflow: hidden; text-align: center; }
.marcas__eyebrow { text-align: center; margin-bottom: 40px; }

.marcas__faixa {
  width: 100%;
  overflow: hidden;   /* o trilho é bem mais largo que o container; o corte é aqui, com as pontas dissolvidas */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marcas__trilho {
  display: flex; align-items: center; gap: 72px;
  width: max-content;
  list-style: none; margin: 0; padding: 0;
  animation: marcas-rola 90s linear infinite;   /* -50% agora são três listas: mais longo para manter a velocidade */
}
.marcas__faixa:hover .marcas__trilho { animation-play-state: paused; }
.marcas__item { flex: none; }
.marcas__item img {
  display: block; height: 44px; width: auto; max-width: 180px; object-fit: contain;
  filter: grayscale(1); opacity: .6;
  transition: filter .25s, opacity .25s;
}
.marcas__item:hover img { filter: none; opacity: 1; }
@keyframes marcas-rola { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marcas__trilho { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .marcas__item[aria-hidden] { display: none; }
}
@media (max-width: 640px) {
  .marcas { padding: 48px 0 64px; }
  .marcas__trilho { gap: 44px; }
  .marcas__item img { height: 34px; max-width: 130px; }
}

/* ---- Por que a VIMACEDO: números grandes + três argumentos, fundo escuro ---- */
.porque {
  position: relative;
  background: var(--ink);
  color: var(--white);
  padding: 110px 0;
  overflow: hidden;
}
/* fundo: aveia em grão bem apagada (assets/img/porque-fundo.webp — quadro do
   vídeo da categoria Cereais, dessaturado e desfocado) com parallax por background-attachment fixed — em
   tela larga; no celular e com prefers-reduced-motion a foto rola junto, que é
   o que funciona em todo navegador. O brilho vermelho vai por cima. */
.porque::before {
  content: "";
  position: absolute; inset: 0;
  background: url("../img/porque-fundo.webp") center / cover no-repeat;
  opacity: .14;
  pointer-events: none;
}
.porque::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(110% 85% at 88% 8%, rgba(228, 50, 43, .28), transparent 58%),
    linear-gradient(180deg, rgba(11, 11, 11, .55) 0%, transparent 25%, transparent 75%, rgba(11, 11, 11, .55) 100%);
  pointer-events: none;
}
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .porque::before { background-attachment: fixed; }
}
.porque .container { position: relative; z-index: 1; }
.porque__cabeca { margin-bottom: 56px; }
.porque__cabeca h2 { max-width: 22ch; }
.porque__numeros {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none; margin: 0 0 64px; padding: 0;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}
.porque__numero { padding: 34px 28px; border-left: 1px solid var(--line-dark); }
.porque__numero:first-child { border-left: 0; padding-left: 0; }
.porque__numero strong {
  display: block;
  font-size: clamp(40px, 4.6vw, 64px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--red);
  margin-bottom: 10px;
}
.porque__numero span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-dark);
}

.porque__argumentos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  list-style: none; margin: 0; padding: 0;
}
.porque__icone { display: block; width: 30px; height: 30px; color: var(--red); margin-bottom: 18px; }
.porque__icone svg { width: 100%; height: 100%; }
.porque__argumento h3 { font-size: 16px; font-weight: 700; margin: 0 0 8px; color: var(--white); }
.porque__argumento p { font-size: 14.5px; line-height: 1.75; color: var(--muted-dark); margin: 0; max-width: 34ch; }
@media (max-width: 900px) {
  .porque { padding: 80px 0; }
  .porque__numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 48px; }
  .porque__numero { padding: 24px 20px; }
  .porque__numero:nth-child(odd) { border-left: 0; padding-left: 0; }
  .porque__numero:nth-child(n + 3) { border-top: 1px solid var(--line-dark); }
  .porque__argumentos { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 640px) { .porque { padding: 64px 0; } }

/* ---- Destaques: grade de cards da vitrine + link para o catálogo ---- */
.destaques { background: var(--white); padding: 110px 0; }
.destaques__topo {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  margin-bottom: 40px;
}
.destaques__topo .section-head { margin-bottom: 0; }
.destaques__topo .portfolio__ver { margin-bottom: 6px; }
.destaques__grade {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}
@media (max-width: 1100px) { .destaques__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .destaques { padding: 72px 0; }
  .destaques__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 640px) {
  .destaques__topo { flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 28px; }
}

/* ---- CTA tabela de preços: faixa vermelha ---- */
.cta-tabela { background: var(--red); color: var(--white); padding: 64px 0; }
.cta-tabela__inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.cta-tabela__eyebrow { color: rgba(255, 255, 255, .75); margin-bottom: 12px; }
.cta-tabela__titulo {
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.02;
  text-transform: uppercase;
  max-width: 22ch;
  margin: 0 0 12px;
}
.cta-tabela__texto { font-size: 15.5px; color: rgba(255, 255, 255, .85); margin: 0; }
.cta-tabela__btn { flex: none; }
@media (max-width: 760px) {
  .cta-tabela { padding: 56px 0; }
  .cta-tabela__inner { flex-direction: column; align-items: flex-start; gap: 26px; }
}

/* ---- Quem somos (sutil): foto com play + texto + link ---- */
.sobre { background: var(--white); padding: 110px 0; border-top: 1px solid var(--line); }
.sobre__inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 72px;
  align-items: center;
}
.sobre__foto {
  position: relative; margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .14);
}
.sobre__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sobre__foto::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, .35) 100%);
  pointer-events: none;
}
.sobre__play {
  position: absolute; left: 50%; top: 50%; z-index: 1;
  width: 78px; height: 78px; margin: -39px 0 0 -39px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  transition: background .18s, color .18s, transform .18s;
}
.sobre__play svg { width: 34px; height: 34px; margin-left: 3px; }
.sobre__play:hover { background: var(--red); color: var(--white); transform: scale(1.06); }
.sobre__texto .eyebrow { margin-bottom: 16px; }
.sobre__titulo {
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 24px;
}
.sobre__texto p:not(.eyebrow) { font-size: 15.5px; line-height: 1.8; color: var(--muted); margin: 0 0 16px; max-width: 56ch; }
.sobre__texto .portfolio__ver { margin-top: 12px; }
@media (max-width: 900px) {
  .sobre { padding: 80px 0; }
  .sobre__inner { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}
@media (max-width: 640px) { .sobre { padding: 64px 0; } }

/* ---- Depoimentos + selo Google ---- */
.depoimentos { background: #f6f6f6; padding: 110px 0; }
.depoimentos__topo {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  margin-bottom: 40px;
}
.depoimentos__topo .section-head { margin-bottom: 0; }
.selo-google {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 12px 18px 12px 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  margin-bottom: 6px;
  transition: border-color .18s, box-shadow .18s;
}
a.selo-google:hover { border-color: var(--line-hover); box-shadow: var(--sombra-hover); }
.selo-google__g { width: 26px; height: 26px; flex: none; }
.selo-google__texto { display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: baseline; line-height: 1.1; }
.selo-google__texto strong { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.selo-google__estrelas { color: #f5a623; font-size: 13px; letter-spacing: .05em; }
.selo-google__texto small { grid-column: 1 / -1; font-size: 12px; color: var(--muted); margin-top: 3px; }
.depoimentos__lista {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.depoimento {
  position: relative; margin: 0;
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 30px 30px;
}
.depoimento::before {
  content: "\201C";
  position: absolute; top: 18px; left: 26px;
  font-size: 84px; line-height: 1; font-weight: 800;
  color: var(--red);
  opacity: .18;
  pointer-events: none;
}
.depoimento__texto {
  margin: 0 0 26px; padding-top: 22px;
  font-size: 15.5px; line-height: 1.8;
  color: var(--ink-3);
  flex: 1;
}
.depoimento__autor { display: flex; align-items: center; gap: 12px; }
.depoimento__autor img,
.depoimento__inicial {
  width: 48px; height: 48px; flex: none;
  border-radius: 50%;
  object-fit: cover;
}
.depoimento__inicial {
  display: grid; place-items: center;
  background: var(--red-tint);
  color: var(--red);
  font-weight: 800; font-size: 18px;
}
.depoimento__autor strong { display: block; font-size: 14px; font-weight: 700; color: var(--ink); }
.depoimento__autor small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
@media (max-width: 900px) {
  .depoimentos { padding: 80px 0; }
  .depoimentos__lista {
    display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(82vw, 420px);
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    padding-bottom: 8px; scrollbar-width: none;
    margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter);
  }
  .depoimentos__lista::-webkit-scrollbar { display: none; }
  .depoimento { scroll-snap-align: start; }
}
@media (max-width: 640px) {
  .depoimentos { padding: 64px 0; }
  .depoimentos__topo { flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 28px; }
}

/* ---- Peça sua cotação: texto + canais à esquerda, formulário à direita ---- */
.cotacao {
  position: relative;
  background: #f6f6f6;   /* mesma cor da seção de depoimentos, logo acima: as duas formam um bloco só */
  color: var(--ink);
  padding: 110px 0;
  overflow: hidden;
  scroll-margin-top: 90px;
}
.cotacao .container { position: relative; }
.cotacao__inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 72px;
  align-items: start;
}
.cotacao__texto .eyebrow { margin-bottom: 16px; }
.cotacao__titulo {
  font-size: clamp(34px, 4.2vw, 60px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: .98;
  text-transform: uppercase;
  margin: 0 0 20px;
}
.cotacao__lead { font-size: 16px; line-height: 1.75; color: var(--muted); margin: 0 0 36px; max-width: 46ch; }
.cotacao__canais { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.cotacao__canal { display: flex; align-items: flex-start; gap: 14px; }
.cotacao__canal-icone { width: 22px; height: 22px; flex: none; color: var(--red); margin-top: 2px; }
.cotacao__canal-icone svg { width: 100%; height: 100%; }
.cotacao__canal a { color: var(--ink); text-decoration: none; font-weight: 700; font-size: 15.5px; }
.cotacao__canal a:hover { color: var(--red); }
.cotacao__canal small { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.cotacao__form {
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .08);
}
.cotacao__linha { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cotacao__form .campo { margin-bottom: 16px; }
.cotacao__form .campo__rotulo {
  display: block;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.cotacao__form .campo__rotulo span { color: var(--red); }
.cotacao__form .entrada {
  width: 100%; min-height: 48px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--white); font-family: inherit; font-size: 14.5px; color: var(--ink);
  transition: border-color .16s, box-shadow .16s;
}
.cotacao__form textarea.entrada { line-height: 1.6; resize: vertical; }
.cotacao__form .entrada:hover { border-color: var(--line-hover); }
.cotacao__form .entrada:focus { outline: 0; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.cotacao__form .isca { position: absolute; left: -9999px; }
.cotacao__erro {
  background: var(--red-tint); color: var(--red-dark);
  border: 1px solid var(--red-line); border-radius: var(--radius-sm);
  padding: 10px 14px; font-size: 14px; margin: 0 0 16px;
}
.cotacao__enviar { width: 100%; height: 50px; margin-top: 6px; }
.cotacao__nota { font-size: 12.5px; color: var(--muted-2); text-align: center; margin: 12px 0 0; }
.cotacao__ok { text-align: center; padding: 16px 8px; }
.cotacao__ok svg { width: 52px; height: 52px; color: var(--red); margin-bottom: 14px; }
.cotacao__ok h3 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 10px; }
.cotacao__ok p { font-size: 15px; line-height: 1.7; color: var(--muted); margin: 0 0 22px; }
.cotacao__outro { display: block; margin-top: 16px; font-size: 13px; color: var(--muted); }
@media (max-width: 900px) {
  .cotacao { padding: 80px 0; }

  /* Em coluna única o formulário tem de vir ANTES dos canais de contato (para
     não ficar enterrado sob eles) mas DEPOIS do título — e título, lead e
     canais moram todos dentro do mesmo `.cotacao__texto`. Era isso que o
     `order: -1` no formulário, sozinho, não dava conta: ele empurrava o
     título junto com os canais para baixo, e o celular perdia o "Peça sua
     cotação" de cima do formulário.
     `display: contents` dissolve o invólucro SÓ nesta largura, promovendo os
     filhos a itens do grid para poderem ser ordenados um a um. O espaçamento
     passa a vir da margem própria de cada filho (a lead já tem 36px), por
     isso o `gap` vai a zero. */
  .cotacao__inner { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cotacao__texto { display: contents; }

  .cotacao__texto .eyebrow { order: 1; }
  .cotacao__titulo         { order: 2; }
  .cotacao__lead           { order: 3; }
  .cotacao__form           { order: 4; margin-bottom: 40px; }
  .cotacao__canais         { order: 5; }
}
@media (max-width: 640px) {
  .cotacao { padding: 64px 0; }
  .cotacao__form { padding: 24px 18px; }
  .cotacao__linha { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* ---- acessibilidade: "pular para o conteúdo" (só aparece com Tab) e foco visível ---- */
.pular {
  position: absolute; left: 16px; top: -100px; z-index: 1000;
  padding: 10px 16px;
  background: var(--red); color: var(--white);
  border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 700; text-decoration: none;
  transition: top .15s;
}
.pular:focus { top: 16px; outline: 3px solid var(--white); outline-offset: 2px; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--red); outline-offset: 3px;
}
.capa :where(a, button):focus-visible,
.cotacao__texto a:focus-visible,
.porque :focus-visible { outline-color: var(--white); }

/* linha de consentimento sob os formulários */
.form-lgpd { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); }
.form-lgpd a { color: inherit; text-decoration: underline; }
.form-lgpd a:hover { color: var(--red); }
.cotacao__nota a { color: inherit; text-decoration: underline; }

/* ---- módulo de cookies (assets/js/cookies.js) ---- */
/* banner compacto, no canto inferior esquerdo (o botão do WhatsApp fica no direito) */
.vmc-cookies__banner {
  position: fixed; left: 16px; bottom: 16px; z-index: 900;
  width: min(380px, calc(100vw - 32px));
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px 18px;
  background: var(--ink); color: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}
.vmc-cookies__texto { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted-dark); }
.vmc-cookies__texto a { color: inherit; font-weight: inherit; text-decoration: none; opacity: .85; }
.vmc-cookies__texto a:hover { color: var(--white); opacity: 1; }
.vmc-cookies__acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* no banner: os dois botões lado a lado com a mesma largura; "Preferências" vira
   uma linha de texto abaixo deles (order joga para o fim, basis 100% quebra) */
.vmc-cookies__banner .vmc-cookies__btn--contorno,
.vmc-cookies__banner .vmc-cookies__btn--cheio { flex: 1 1 0; padding: 0 10px; white-space: nowrap; }
.vmc-cookies__banner .vmc-cookies__btn--link { order: 9; flex: 1 1 100%; height: auto; padding: 2px 0 0; text-align: left; font-size: 11px; }
.vmc-cookies__btn {
  height: 36px; padding: 0 14px;
  border-radius: var(--radius-sm); border: 1.5px solid transparent;
  font: inherit; font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  cursor: pointer; transition: background .16s, color .16s, border-color .16s;
}
.vmc-cookies__btn--cheio { background: var(--red); color: var(--white); }
.vmc-cookies__btn--cheio:hover { background: var(--red-dark); }
.vmc-cookies__btn--contorno { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, .6); }
.vmc-cookies__btn--contorno:hover { background: var(--white); color: var(--ink); }
.vmc-cookies__btn--link { background: transparent; color: var(--muted-dark); text-decoration: underline; padding: 0 6px; }
.vmc-cookies__btn--link:hover { color: var(--white); }
.vmc-cookies__fundo { position: fixed; inset: 0; z-index: 950; background: rgba(0, 0, 0, .55); display: grid; place-items: center; padding: 16px; }
.vmc-cookies__modal {
  position: relative; width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto;
  background: var(--white); color: var(--ink);
  border-radius: var(--radius); padding: 30px 30px 24px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .4);
}
.vmc-cookies__modal h2 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px; text-transform: uppercase; }
.vmc-cookies__modal > p { font-size: 14px; color: var(--muted); line-height: 1.6; margin: 0 0 18px; }
.vmc-cookies__fechar { position: absolute; top: 12px; right: 14px; width: 36px; height: 36px; border: 0; background: transparent; font-size: 26px; line-height: 1; color: var(--muted); cursor: pointer; }
.vmc-cookies__fechar:hover { color: var(--ink); }
.vmc-cookies__cat {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 0; border-top: 1px solid var(--line); cursor: pointer;
}
.vmc-cookies__cat--fixa { cursor: default; }
.vmc-cookies__cat strong { display: block; font-size: 14px; }
.vmc-cookies__cat small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; line-height: 1.45; }
.vmc-cookies__cat em { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); flex: none; }
.vmc-cookies__cat input { position: absolute; opacity: 0; width: 0; height: 0; }
.vmc-cookies__cat i {
  flex: none; width: 44px; height: 26px; border-radius: 13px; background: #d6d6d6; position: relative; transition: background .18s;
}
.vmc-cookies__cat i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--white); transition: transform .18s; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.vmc-cookies__cat input:checked + i { background: var(--red); }
.vmc-cookies__cat input:checked + i::after { transform: translateX(18px); }
.vmc-cookies__cat input:focus-visible + i { outline: 3px solid var(--red); outline-offset: 2px; }
.vmc-cookies__acoes--modal { justify-content: flex-end; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.vmc-cookies__acoes--modal .vmc-cookies__btn--contorno { color: var(--ink); border-color: var(--ink); }
.vmc-cookies__acoes--modal .vmc-cookies__btn--contorno:hover { background: var(--ink); color: var(--white); }
@media (max-width: 640px) {
  .vmc-cookies__banner { bottom: 84px; }   /* acima do botão flutuante do WhatsApp */
  .vmc-cookies__modal { padding: 24px 18px 18px; }
}

/* ---- alerta: pop-up de imagem (Painel › Alertas) ---- */
.alerta-modal {
  padding: 0; border: 0; background: transparent;
  max-width: min(92vw, 720px); max-height: 92vh;
  overflow: visible;
}
.alerta-modal::backdrop { background: rgba(0, 0, 0, .8); backdrop-filter: blur(2px); }
.alerta-modal[open] { animation: alerta-entra .45s cubic-bezier(.2, .7, .2, 1); }
@keyframes alerta-entra { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
.alerta-modal__quadro { display: block; border-radius: var(--radius); overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); background: var(--ink); }
.alerta-modal__quadro img { display: block; max-width: min(92vw, 720px); max-height: 84vh; width: auto; height: auto; }
a.alerta-modal__quadro { cursor: pointer; transition: transform .2s; }
a.alerta-modal__quadro:hover { transform: scale(1.01); }
.alerta-modal__fechar {
  position: absolute; right: -6px; top: -46px;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .14); color: var(--white);
  cursor: pointer; transition: background .18s;
}
.alerta-modal__fechar:hover { background: var(--red); }
.alerta-modal__fechar svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .alerta-modal[open] { animation: none; } }
@media (max-width: 640px) {
  .alerta-modal__fechar { right: 0; top: -44px; }
  .alerta-modal__quadro img { max-height: 76vh; }
}

/* e-mail do RH no bloco do banco de talentos */
.talentos__email { margin-top: 8px; font-size: 14px; color: var(--muted); }
.talentos__email a { color: var(--ink); text-decoration: underline; }
.talentos__email a:hover { color: var(--red); }

/* ===========================================================================
   AJUSTES DE MOBILE — 06/11/2026
   Tudo aqui vive dentro de `@media (max-width: …)`: por construção, nenhuma
   destas regras alcança o desktop. Nada foi alterado fora deste bloco além da
   ordem da seção de cotação (ver o comentário em `@media (max-width: 900px)`).
   =========================================================================== */

/* ---- 1. Bandeiras antes do hamburguer ----
   O hamburguer só existe abaixo de 980px (`.burger { display: grid }`), então
   esta é a faixa exata onde a troca faz sentido — acima dela não há botão para
   reordenar. O `margin-left: auto` muda de elemento junto com a ordem: ele é o
   que empurra o conjunto para a direita, e tem de estar em quem vem primeiro,
   senão as bandeiras colariam no logo e só o botão iria para a borda. */
@media (max-width: 980px) {
  .lang   { order: 2; margin-left: auto; }
  .burger { order: 3; margin-left: 0; }
}

/* ---- 2. Cards de produto da home ----
   A grade da home fica em 2 colunas a partir de 760px (`.destaques__grade`),
   o que no celular dá cerca de 150px por card. O conteúdo, porém, seguia com
   as medidas de desktop: 20px de margem em cada lado do texto e preço em 25px.
   Sobravam ~110px para "R$ 102,50 / kg" em 25px bold — daí a quebra de linha.
   A correção é devolver espaço (margens 20→12px) e ajustar a tipografia ao
   que a coluna comporta. Mantive as 2 colunas de propósito: catálogo em duas
   colunas se compara melhor no celular do que uma lista de um por linha. */
@media (max-width: 760px) {
  .destaques__grade .card__title  { font-size: 13px; margin: 14px 12px 6px; }
  .destaques__grade .card__meta   { font-size: 11.5px; line-height: 1.45; margin: 0 12px 10px; }
  .destaques__grade .card__price  { margin: auto 12px 0; padding-top: 11px; }
  .destaques__grade .card__actions{ margin: 10px 12px 12px; }

  .destaques__grade .price        { font-size: 18px; letter-spacing: -.025em; }
  .destaques__grade .price__desde { font-size: 9px; letter-spacing: .07em; }
  .destaques__grade .price-pacote { font-size: 10.5px; line-height: 1.35; }

  /* O preço é a linha mais larga do card: sem isto, um valor de quatro dígitos
     volta a estourar a coluna em telas de 320–360px. */
  .destaques__grade .price        { overflow-wrap: break-word; }
}

/* Celular estreito: a coluna cai para ~140px e a tipografia precisa de um
   degrau a mais. */
@media (max-width: 400px) {
  .destaques__grade { gap: 10px; }
  .destaques__grade .card__title { font-size: 12px; margin: 12px 10px 5px; }
  .destaques__grade .card__meta  { margin: 0 10px 8px; }
  .destaques__grade .card__price { margin: auto 10px 0; }
  .destaques__grade .price       { font-size: 16px; }
}

/* ---- 3. A seta da CTA "Ver catálogo completo" ----
   `.portfolio__ver` é um inline-flex com o texto em caixa alta e
   `letter-spacing: .1em`. No celular o texto não cabe numa linha, quebra em
   duas, e a seta — que é o segundo item do flex — fica centralizada ao lado
   das duas linhas, parecendo solta. Duas medidas: apertar o rastreamento e o
   corpo para o texto caber numa linha, e impedir a seta de encolher ou ser
   empurrada. */
@media (max-width: 640px) {
  .portfolio__ver {
    font-size: 11px;
    letter-spacing: .05em;
    gap: 8px;
    flex-wrap: nowrap;
  }

  .portfolio__ver svg { flex: none; width: 15px; height: 15px; }
}

/* Abaixo disto nem apertado o texto cabe numa linha; então deixo quebrar de
   propósito, mas alinho a seta ao topo para ela acompanhar a primeira linha
   em vez de flutuar no meio do bloco. */
@media (max-width: 360px) {
  .portfolio__ver { align-items: flex-start; }
  .portfolio__ver svg { margin-top: 2px; }
}

/* ---- 4. Quem somos: CTAs de larguras diferentes ----
   A partir de 980px as ações viram `flex-direction: row` com `wrap`, e como
   `.btn` é inline-flex com `white-space: nowrap` cada botão fica com a largura
   do próprio texto — "Ver tabela de preços" é mais curto que "Falar com o
   comercial". No celular eles acabam um sob o outro mas desalinhados.
   `flex: 1 1 100%` dá uma linha inteira a cada um, igualando as larguras.
   Só no celular: no tablet os dois ainda cabem lado a lado, e ali a largura
   por conteúdo está correta. */
@media (max-width: 640px) {
  .compromisso__acoes .btn { flex: 1 1 100%; }
}

/* ---- 5. Quem somos: a foto da fachada e a sombra vermelha ----
   A moldura é uma sombra deslocada — o `::before` avança 18px ALÉM da borda
   direita da foto (`inset: 18px -18px -18px 18px`). No desktop sobra espaço na
   coluna e o avanço não incomoda. No celular a figura ocupa a largura toda do
   container, cujo respiro lateral é justamente 18px: o vermelho encosta na
   borda direita da tela enquanto, à esquerda, a foto ainda tem o respiro
   inteiro — a assimetria que se vê.
   Reservando 18px à direita, o conjunto (foto + sombra) volta a ter a mesma
   folga dos dois lados: a foto começa no respiro da esquerda e o vermelho
   termina no respiro da direita. O 18px é o mesmo do `::before`, não do
   gutter — se o deslocamento da sombra mudar, este valor muda com ele. */
@media (max-width: 640px) {
  .bloco__foto {
    justify-self: stretch;
    margin-right: 18px;
  }
}

/* ---- 6. Painel recolhível no celular (filtros, assuntos do blog) ----
   Blocos de navegação lateral — os filtros da vitrine, os assuntos do blog —
   viram caixas altas quando a página passa a uma coluna, e no celular
   empurram o conteúdo para fora da primeira tela. Aqui eles passam a abrir
   por botão.

   É UM mecanismo para todos: `.recolher` é o botão, `.recolhivel` é o painel,
   e o `data-recolhe` do botão aponta o painel (ver main.js). Um segundo
   recolhedor com outro nome seria uma gramática a mais no mesmo site.

   O botão é o único elemento novo na marcação, e nasce com `display: none`
   fora do celular — a regra base abaixo não altera o desktop porque o
   elemento não existia antes dela. O `hidden` do HTML sai pelo JS: sem script
   o botão não aparece e o painel fica aberto, que é o certo. */
.recolher { display: none; }

@media (max-width: 640px) {
  .recolher {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--ink);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    cursor: pointer;
  }

  .recolher svg:first-child { width: 17px; height: 17px; flex: none; }

  /* A seta vai para a direita e gira quando o painel abre. */
  .recolher__seta { width: 16px; height: 16px; flex: none; margin-left: auto; transition: transform .18s; }
  .recolher[aria-expanded="true"] .recolher__seta { transform: rotate(180deg); }

  /* Quantos filtros estão aplicados — a informação que não pode se perder
     junto com o painel recolhido. */
  .recolher__conta {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--red);
    color: var(--white);
    font-size: 11px;
    letter-spacing: 0;
  }

  /* O painel só recolhe quando o JS assumiu (`tem-recolher`). Sem script a
     classe nunca entra e os filtros seguem visíveis. */
  .recolhivel.tem-recolher { display: none; }
  .recolhivel.tem-recolher.is-aberto { display: block; }

  .shop { gap: 16px; }
}

/* ---- 7. Produtos: o modo "2 colunas" do seletor de visualização ----
   Os dois primeiros botões ficavam idênticos no celular. Motivo: em 860px a
   regra é `.products, .products--3 { repeat(2, …) }`, mas em 640px vem
   `.products { 1fr }` — mais adiante no arquivo e com a mesma especificidade,
   então ela vencia também para quem tinha a classe `.products--3`. Resultado:
   "4 colunas" e "3 colunas" caíam os dois em uma coluna só.
   No celular os três modos passam a ser: um card por linha, dois por linha e
   lista (esta já funcionava). */
@media (max-width: 640px) {
  .products--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

  /* Em duas colunas no celular a coluna tem ~150px, e o conteúdo do card vinha
     com as medidas de desktop (margens de 20px, preço em 25px) — a mesma causa
     da quebra nos cards da home, tratada no item 2. */
  .products--3 .card__title   { font-size: 13px; margin: 14px 12px 6px; }
  .products--3 .card__meta    { font-size: 11.5px; line-height: 1.45; margin: 0 12px 10px; }
  .products--3 .card__price   { margin: auto 12px 0; padding-top: 11px; }
  .products--3 .card__actions { margin: 10px 12px 12px; }

  .products--3 .price         { font-size: 18px; letter-spacing: -.025em; overflow-wrap: break-word; }
  .products--3 .price__desde  { font-size: 9px; letter-spacing: .07em; }
  .products--3 .price-pacote  { font-size: 10.5px; line-height: 1.35; }
}

@media (max-width: 400px) {
  .products--3 { gap: 10px; }
  .products--3 .card__title { font-size: 12px; margin: 12px 10px 5px; }
  .products--3 .card__meta  { margin: 0 10px 8px; }
  .products--3 .card__price { margin: auto 10px 0; }
  .products--3 .price       { font-size: 16px; }
}

/* ---- 8. Blog: assuntos recolhidos e artigos em duas colunas ---- */
@media (max-width: 640px) {
  /* `.assuntos` é um flex de chips: abrir com `display: block` (o padrão do
     recolhedor) empilharia os chips um por linha. Esta regra vem depois da
     genérica, com a mesma especificidade, para devolver o flex. */
  .assuntos.tem-recolher.is-aberto { display: flex; }

  /* O selo do blog carrega o NOME do assunto, não um número: precisa de
     largura para texto, e de reticências em vez de estourar o botão. */
  .recolher__conta--texto {
    max-width: 11ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    line-height: 20px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
  }

  /* Os artigos ficam em UMA coluna no celular — é a regra que já existia em
     `@media (max-width: 640px)`, mantida de propósito. Em duas colunas o card
     de artigo ficava com ~150px: cabe o título, mas o resumo virava quatro
     linhas de 11px e o cartão perdia a função. Diferente do card de produto,
     onde a foto e o preço bastam para escolher, aqui é o texto que vende o
     clique. */
}

/* ---- 9. Parallax da foto do hero no celular ----
   No desktop o hero tem o vídeo rebobinado pela rolagem (ver main.js). No
   celular isso sairia caro: 5,6 MB de WebM baixados antes de o efeito existir,
   mais 3,5 telas de rolagem do `.capa-pin` antes de chegar aos produtos — e
   scrub de vídeo engasga em celular. A foto que já está lá ganha movimento por
   `transform`: nenhuma requisição nova, e roda na GPU.

   O fundo do hero é um PSEUDO-ELEMENTO (`.capa--foto::before`), e pseudo-
   elemento não tem nó no DOM para o JS transformar. A saída é o JS escrever
   `--capa-parallax` no `.capa`, que o `::before` lê — variável CSS desce para
   descendentes e para pseudo-elementos.

   A classe `tem-parallax` é posta pelo main.js: sem JS nada disto se aplica,
   nem o `scale`, e a foto fica exatamente como está hoje.

   O `scale(1.16)` não é enfeite: ele dá os ~8% de folga de cada lado que o
   deslocamento vertical consome. Sem ele, arrastar a camada mostraria a borda.
   `.capa` já tem `overflow: hidden`, então nada vaza. */
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  .capa.tem-parallax::before {
    transform: translate3d(0, var(--capa-parallax, 0px), 0) scale(1.16);
    will-change: transform;
  }
}