/* ARQUIVO GERADO por build.cjs. Não edite aqui: edite css/src/ e rode `node build.cjs`. */
/* Paleta da marca — nomes oficiais do Brandbook (maio/2026, p.41).
   Toda cor do site sai daqui. Nao hardcodar hex nos blocos.
   Proporcao recomendada: verde-escuro 32,5% · verde/limao/limao-55 17,5% cada
   · quentes (creme, paprica, laranja, vinhos) 15% como pontos de apoio. */
:root {
  --verde-escuro: #004A00;  /* "Ervas & Conservas" — dominante, texto, fundos */
  --verde:        #008200;  /* "Frescor da Horta" — hover, tom-sobre-tom */
  --verde-inst:   #0B8140;  /* fundo do bloco institucional (do design) */
  --limao:        #A1D302;  /* "Toque de Limao" — destaque */
  --limao-55:     #D2E67E;  /* "Toque de Limao 55%" (o brandbook usa a 55% de opacidade) */
  --creme:        #FEF5A8;  /* "Creme da Receita" — fundo do site */
  --creme-2:      #F4EDA0;  /* fundo alternativo (do design) */
  --creme-3:      #F2E27A;
  --paprica:      #FF9A35;  /* "Paprica Defumada" */
  --laranja:      #EF3F0F;  /* "Molho Especial" — newsletter, selo */
  --vinho:        #890011;  /* "Tomate Caseiro" */
  --vinho-escuro: #590209;  /* "Pimenta Defumada" */

  /* triplets para usar em rgba(...) */
  --verde-escuro-rgb: 0, 74, 0;
  --creme-rgb:        254, 245, 168;
  --verde-rgb:        0, 130, 0;

  --fonte-titulo: "OverHeat", Verdana, sans-serif;
  --fonte-texto:  "OutfitVar", Verdana, sans-serif;

  --faixa: 1360px;   /* largura maxima do conteudo */
  --gutter: 48px;    /* respiro lateral da faixa */
  /* altura do header fixo. O hero desconta isso: se mudar o header, MEDIR e
     atualizar aqui (a versão de duas barras chegou a pedir 132px). */

  /* ---- neutros de INTERFACE (02/09) ----
     O guia da marca NÃO tem cinza: a paleta oficial é verdes + creme + os
     quentes de apoio. Estes neutros existem só como superfície de interface
     (fundo de catálogo, cartão de produto, borda de campo), nunca como cor de
     marca. São quentes de propósito, para conviver com o creme. */
  --branco: #FFFFFF;
  --neutro: #F1F0EA;        /* fundo de área de catálogo */
  --neutro-2: #E2E1D8;      /* bordas e divisores */
  --neutro-3: #F7F6F1;      /* poço de foto, hover */
  /* tinta de texto longo: o verde-escuro cansa em corpo de notícia
     (Rafael, 02/09). Cinza quente, não colorido. */
  --tinta: #3B3E37;
  --tinta-fraca: #6C6F66;

  /* Tamanho ÚNICO do título de seção (o h2 .display: "NOSSAS CATEGORIAS",
     "QUANTO TEMPO VOCÊ TEM?", "VAI BEM COM"...). Padronizado em 02/09 a pedido
     do Rafael: antes cada bloco tinha o seu (92, 86, 70, 68, 52) e o site
     parecia ter cinco níveis de título. Mexer AQUI muda todas as páginas.
     Os h1 de página (capa, produto, receita) continuam maiores, à parte. */
  --titulo-secao: clamp(32px, 4.3vw, 68px);

  --topo-alt: 83px;
}

@font-face { font-family: "OverHeat"; src: url("../assets/fonts/OverHeat.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "OutfitVar"; src: url("../assets/fonts/Outfit-Variable.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--creme);
  font-family: var(--fonte-texto);
  color: var(--verde-escuro);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--verde-escuro); text-decoration: none; }
a:hover { color: var(--verde); }
input { font-family: inherit; }
::selection { background: var(--limao); color: var(--verde-escuro); }

/* placeholder de foto que o cliente ainda nao mandou */
.img-slot-empty { position: relative; display: block; width: 100%; height: 100%; background: rgba(var(--verde-escuro-rgb), 0.08); }

@keyframes cepFloat { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-15px,0); } }
@keyframes cepMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [style*="cepFloat"], [data-cep-marquee] { animation: none !important; }
}

/* Faixa central. Toda seção usa isto em vez de repetir max-width + padding. */
.faixa {
  max-width: var(--faixa);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Título de display (OverHeat). O tamanho é ÚNICO no site inteiro
   (--titulo-secao). Só os h1 de página sobrescrevem, mais adiante na cascata. */
.display {
  font-family: var(--fonte-titulo);
  font-weight: 400;
  font-size: var(--titulo-secao);
  line-height: 0.92;
  margin: 0;
  color: var(--verde-escuro);
}

/* Linha curta em caixa alta acima do título. */
.rotulo {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--verde);
}

/* Cabeça de seção centralizada (rótulo + título). */
.secao-cabeca {
  text-align: center;
  margin-bottom: 54px;
}

/* Cabeça de seção em linha: título à esquerda, botão à direita.
   A margem de baixo fica por conta da seção. */
.cabeca-linha {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

/* Botões pílula. Usados na home e em toda página interna.
   Combinar: .btn + (.btn--linha | .btn--claro | .btn--solido) [+ .btn--compacto] */
.btn {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 16px 34px;
  border-radius: 999px;
  transition: background .25s ease, color .25s ease;
}

/* contorno sobre fundo claro */
.btn--linha {
  border: 1.5px solid var(--verde-escuro);
  color: var(--verde-escuro);
}
.btn--linha:hover { background: var(--verde-escuro); color: var(--creme); }

/* contorno sobre fundo escuro */
.btn--claro {
  border: 1.5px solid var(--creme);
  color: var(--creme);
}
.btn--claro:hover { background: var(--creme); color: var(--verde-escuro); }

/* sólido escuro (CTA do header) */
.btn--solido {
  background: var(--verde-escuro);
  color: var(--creme);
}
.btn--solido:hover { background: var(--laranja); color: var(--creme); }

/* quando o botão fica ao lado do título, na mesma linha */
.btn--compacto { padding: 15px 30px; white-space: nowrap; }

/* Home — banner em dois atos, dirigido pelo scroll.
   A seção é alta (`--hero-scroll`) e o palco fica preso (`sticky`) enquanto
   ela passa. O progresso 0→1 é calculado no js/hero.js e vira uma variável
   CSS `--p` por elemento; aqui ficam só o repouso e o palco.

   Ato 1: o ketchup completa o giro 360 descendo, encolhe, tomba e mergulha.
   Ato 2: a maionese sobe endireitando e a composição dela voa das bordas.
   Os dois no MESMO fundo claro — por isso a palavra MAIONESE foi recolorida
   para verde escuro (ver _tools/recolor.py).

   O palco é um container query: todo o texto do hero é medido em `cqw` para a
   arte escalar junto com a largura. Não trocar cqw por px/rem aqui dentro. */
.hero {
  --hero-scroll: 460vh;
  position: relative;
  height: var(--hero-scroll);
  background: var(--creme);
  /* sobe para debaixo do header: assim o palco já nasce travado no topo e o
     primeiro quadro não aparece deslocado/cortado. O header pinta por cima
     (z-index 60) sobre o mesmo creme, então a emenda não aparece. */
  margin-top: calc(-1 * var(--topo-alt));
}

.hero__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  /* o header é fixo e fica por cima: descontamos a altura dele para a arte
     nunca passar por baixo do menu nem vazar pela base da tela. */
  padding-top: var(--topo-alt);
  overflow: hidden;
  display: grid;
  place-items: center;
}

/* caixa da arte: mantém a proporção original do banner e centraliza na tela */
.hero__palco {
  position: relative;
  width: min(100%, calc((100vh - var(--topo-alt)) * 1670 / 950));
  aspect-ratio: 1670/950;
  container-type: inline-size;
}

.hero__ato {
  position: absolute;
  inset: 0;
  /* `visibility` evita que o ato fora de cena receba clique/foco */
  visibility: hidden;
}
.hero__ato.is-ativo { visibility: visible; }

/* paleta: os dois atos vivem no fundo claro */
.hero__ato--ketchup  { --hero-produto: var(--laranja); }
.hero__ato--maionese { --hero-produto: var(--verde); }
.hero__ato {
  color: var(--verde-escuro);
  --hero-tinta: var(--verde-escuro);
  --hero-suave: rgba(var(--verde-escuro-rgb), 0.82);
  --hero-fraco: rgba(var(--verde-escuro-rgb), 0.68);
  --hero-fio: rgba(var(--verde-escuro-rgb), 0.22);
}

.hero__palavra {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  will-change: transform, opacity;
}

/* A flutuação NÃO é animação CSS: animação de transform e transform inline não
   convivem (a animação vence). O js/hero.js desliga o cepFloat e compõe
   scroll + queda + flutuação num transform único, por frame. O cepFloat abaixo
   fica só como fallback sem JS. */
.hero__prop {
  position: absolute;
  animation-name: cepFloat;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  pointer-events: none;
  will-change: transform, opacity;
}

.hero__garrafa {
  position: absolute;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  z-index: 3;
  pointer-events: none;
  will-change: transform;
}

/* giro 360: os quadros ficam empilhados e o JS acende um por vez */
.hero__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
}
.hero__frame:first-child { opacity: 1; }

/* no fundo claro os elementos da maionese são claros: a sombra os descola */
.hero__ato--maionese .hero__garrafa,
.hero__ato--maionese .hero__prop {
  filter: drop-shadow(0 16px 22px rgba(var(--verde-escuro-rgb), 0.20));
}

.hero__copy {
  position: absolute;
  left: 11.5%;
  width: 17%;
  z-index: 5;
  will-change: transform, opacity;
}
.hero__kicker { font-size: 1.02cqw; font-weight: 500; color: var(--hero-suave); margin: 0 0 0.7cqw; }
.hero__h1 {
  font-family: var(--fonte-titulo);
  font-weight: 400;
  font-size: 3.2cqw;
  line-height: 0.94;
  margin: 0 0 1.1cqw;
  color: var(--hero-tinta);
}
.hero__produto { color: var(--hero-produto); }
.hero__texto { font-size: 1.02cqw; line-height: 1.5; color: var(--hero-suave); margin: 0 0 1.7cqw; }

/* Pílula compacta com a seta logo depois do texto (referência do cliente,
   01/09) — antes era uma barra da largura da coluna com a seta jogada na
   ponta, que lia como campo de formulário. */
.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.9cqw;
  background: var(--verde-escuro);
  color: var(--creme);
  font-size: 0.98cqw;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 1.1cqw 2cqw;
  border-radius: 999px;
  transition: background .25s ease, color .25s ease;
}
.hero__cta:hover { background: var(--hero-produto); color: var(--creme); }
.hero__seta { font-size: 1.15cqw; line-height: 1; }

/* ---- coluna de atributos: ícone de traço + texto, com fio entre eles ---- */
.hero__feats {
  position: absolute;
  right: 4.2%;
  top: 54%;
  width: 12%;
  text-align: center;
  z-index: 5;
  will-change: transform, opacity;
}
.hero__feat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55cqw;
  padding: 1.3cqw 0;
}
.hero__feat + .hero__feat { border-top: 1px solid var(--hero-fio); }

.hero__feat-icone {
  width: 2.1cqw;
  height: 2.1cqw;
  fill: none;
  stroke: var(--hero-tinta);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
}

.hero__feat-forte {
  font-size: 0.82cqw;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hero-tinta);
  line-height: 1.45;
}
.hero__feat-fraco {
  font-size: 0.82cqw;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--hero-fraco);
  line-height: 1.45;
}

/* ---- indicador de progresso do banner ---- */
.hero__hud {
  position: absolute;
  /* mesma margem da coluna de texto: na arte do cliente o indicador fica
     embaixo à ESQUERDA, alinhado com o botão, não centrado */
  left: 11.5%;
  bottom: 2.5%;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--verde-escuro-rgb), 0.62);
  z-index: 8;
}
/* o HUD vive no palco, fora dos atos: --hero-produto não chega aqui */
.hero__hud-num { color: rgba(var(--verde-escuro-rgb), 0.45); }
.hero__hud-num b { color: var(--verde-escuro); font-weight: 700; }
.hero__hud-rotulo { min-width: 62px; }
.hero__trilha {
  position: relative;
  width: 118px;
  height: 2px;
  background: rgba(var(--verde-escuro-rgb), 0.22);
  border-radius: 2px;
}
.hero__barra {
  position: absolute;
  left: 0;
  top: 0;
  height: 2px;
  width: 0%;
  background: var(--verde-escuro);
  border-radius: 2px;
}
.hero__hud-dica {
  font-weight: 500;
  letter-spacing: 0.1em;
  transition: opacity .4s ease;
}

/* ---- sem animação: vira dois painéis estáticos, sem trilho longo ---- */
@media (prefers-reduced-motion: reduce) {
  .hero { --hero-scroll: 200vh; }
  .hero__prop { animation: none; }
  .hero__hud-dica { display: none; }
}

/* Topo fixo. O app.js aperta o padding da barra depois de 40px de scroll
   (data-cep-header), por isso o padding vive na barra e não no <header>.

   ATENÇÃO: sticky quebra se qualquer ancestral tiver overflow. Por isso o
   overflow-x do site fica no <body> e não num wrapper. */
.topo {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(var(--creme-rgb), 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(var(--verde-escuro-rgb), 0.12);
  transition: padding .3s ease;
}

/* ---- ações à direita: idioma + loja (02/09) ---------------------------
   Houve uma versão com DUAS barras (uma faixa fina verde com Onde encontrar,
   News, Downloads, Contato e o idioma). O Rafael não quis: num site de marca
   as duas barras pesam. Agora "Onde encontrar" está na navegação e News,
   Downloads e Contato vivem na coluna "Mais" do menu Institucional. */
.topo__acoes { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }

/* seletor de idioma */
.idiomas {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  gap: 7px;
}
.idiomas__op { color: rgba(var(--verde-escuro-rgb), 0.42); }
.idiomas__op.is-ativo { color: var(--verde-escuro); }
/* EN ainda sem destino: fica visível mas sem virar link quebrado */
.idiomas__op--breve { cursor: not-allowed; }
.idiomas__barra { width: 1px; height: 11px; background: rgba(var(--verde-escuro-rgb), 0.25); }

/* o CTA da loja leva o ícone de sacola */
.topo__loja { display: inline-flex; align-items: center; gap: 9px; }
.topo__loja-icone {
  width: 16px; height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.topo__barra {
  max-width: var(--faixa);
  margin: 0 auto;
  padding: 18px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.topo__logo { display: flex; align-items: center; flex: 0 0 auto; }
.topo__logo img { height: 46px; width: auto; display: block; }

/* ---- menu: 6 áreas da arquitetura de informação (sitemap de 25/08) ----
   Produtos e A Cepêra abrem megamenu de 3 colunas; os outros, um painel de
   uma coluna. Estrutura e rótulos vêm de dados/nav.json; abrir/fechar é
   bindMenu no app.js (hover + teclado, com atraso pra não piscar). */
.nav {
  display: flex;
  align-items: center;
  /* 8 itens + idioma + Loja numa barra só: o respiro é apertado de propósito.
     Se entrar mais um item, ou some algo ou a barra vira menu compacto. */
  gap: 19px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.nav__item { position: relative; }
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav__link:hover,
.nav__link.is-ativo,
.nav__item.is-aberto .nav__link { border-bottom-color: var(--limao); }

.nav__seta {
  width: 6px;
  height: 6px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: 0.5;
  transition: transform .25s ease, opacity .25s ease;
}
.nav__item.is-aberto .nav__seta { transform: translateY(1px) rotate(225deg); opacity: 1; }

/* ---- o painel ---- */
.mega {
  position: absolute;
  left: -28px;
  top: calc(100% + 16px);
  min-width: 268px;
  padding: 26px 28px;
  background: var(--creme);
  border: 1px solid rgba(var(--verde-escuro-rgb), 0.12);
  border-radius: 18px;
  box-shadow: 0 26px 50px rgba(var(--verde-escuro-rgb), 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .22s ease, transform .28s cubic-bezier(.2,.8,.2,1), visibility .22s;
  z-index: 5;
}
/* a ponte invisível: sem ela o menu fecha ao atravessar o vão do topo */
.mega::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -18px;
  height: 18px;
}
.nav__item.is-aberto .mega {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.mega__caixa { display: flex; gap: 36px; }
/* largura mínima: sem ela "Doces e frutas em calda" e os títulos quebravam */
.mega__col { min-width: 172px; }
/* os largos (Produtos, A Cepêra) ancoram à direita do link para não sangrar */
.nav__item--largo .mega { left: -40px; }

.mega__titulo {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  white-space: nowrap;
  color: var(--verde);
}
.mega__lista { margin: 0; padding: 0; list-style: none; }
.mega__lista li + li { margin-top: 9px; }
.mega__lista a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.3;
  text-transform: none;
  color: var(--verde-escuro);
  transition: color .2s ease, transform .2s ease;
}
.mega__lista a:hover { color: var(--laranja); transform: translateX(3px); }
.mega__fora { font-size: 11px; opacity: 0.5; }

/* cartão de chamada no fim do megamenu de Produtos */
.mega__destaque {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  align-self: stretch;
  min-width: 200px;
  padding: 20px;
  border-radius: 14px;
  background: var(--verde-escuro);
  color: var(--creme);
  text-transform: none;
  letter-spacing: 0;
  transition: background .25s ease;
}
.mega__destaque:hover { background: var(--verde); }
.mega__destaque b { font-size: 15px; font-weight: 700; }
.mega__destaque-linha { font-size: 12.5px; line-height: 1.4; color: rgba(var(--creme-rgb), 0.75); }
.mega__destaque-seta { font-size: 18px; margin-top: 6px; color: var(--limao); }

/* o CTA do topo é menor que o botão padrão */
.topo .btn {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 14px 20px;
}

/* Home — fita de palavras em loop, logo abaixo do banner.
   O app.js reage à velocidade/direção do scroll (data-cep-marquee). */
.fita {
  background: var(--verde-escuro);
  color: var(--creme);
  overflow: hidden;
  padding: 20px 0;
  border-top: 2px solid var(--limao);
}

/* A pista anda até -50%, então as duas metades precisam ter a MESMA largura.
   Por isso os <span> ficam colados no HTML: espaço em branco entre elementos
   inline vira um espaço renderizado e desalinha a emenda do loop. */
.fita__pista {
  display: flex;
  width: max-content;
  animation: cepMarquee 26s linear(0 0%, 0.28 12%, 0.5 26%, 0.62 38%, 0.74 52%, 0.86 68%, 0.94 82%, 1 100%) infinite;
  font-family: var(--fonte-titulo);
  font-size: 38px;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.fita__w { padding-right: 52px; }
.fita__w--alt { color: var(--limao); }

/* Na página de produto a fita é uma faixa contida entre duas seções claras:
   ganha o fio de baixo também, para fechar como banda. */
.fita--prod { border-bottom: 2px solid var(--limao); }

/* fita da página de produto: palavras vêm do dado, então a cor alterna por
   posição (nth-child) em vez da classe --alt manual da home. */
.fita--prod .fita__w:nth-child(even) { color: var(--limao); }

/* Home — "Nossas categorias": carrossel de potes com paralaxe (01/09).
   O hover (fill, foto, cores) é do app.js via data-cep-cat-*; aqui ficam
   repouso, trilho, entrada dos cards e os ingredientes flutuantes.

   Fundo branco-quente: no creme do site o pote sumia no fundo e os produtos
   flutuavam soltos. Branco PURO não existe na paleta — este é o mesmo #FFFDF4
   dos cards de sustentabilidade. */
#categorias {
  position: relative;
  background: #FFFDF4;
  padding: 110px 0 120px;
  overflow: hidden;
}

/* ---- ingredientes flutuantes: a paralaxe continua a do banner ----
   data-cat-plx = profundidade; o app.js desloca conforme a seção atravessa
   a tela, então o movimento "vem" do hero e segue aqui. */
.cats__flutua { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.cats__flutua img {
  position: absolute;
  opacity: 0.5;
  will-change: transform;
  filter: drop-shadow(0 14px 18px rgba(var(--verde-escuro-rgb), 0.10));
}

#categorias .faixa, .cats-palco { position: relative; z-index: 1; }

/* ---- carrossel ---- */
.cats-palco { position: relative; margin-top: 10px; }

.cats {
  /* contido na faixa: um respiro curto só para a sombra dos cards não recortar */
  --cats-respiro: 4px;
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* ATENÇÃO: overflow-x:auto força o eixo Y a recortar. A foto do produto sobe
     ~15% acima do card, então o respiro de cima TEM que caber no padding —
     sem isso as embalagens aparecem cortadas. */
  padding: 58px var(--cats-respiro) 26px;
  /* SEM isto o snap encosta o 1º card na borda e come o respiro da esquerda */
  scroll-padding-left: var(--cats-respiro);
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.cats::-webkit-scrollbar { display: none; }

.cat {
  flex: 0 0 auto;
  width: clamp(180px, 17vw, 232px);
  scroll-snap-align: start;
  display: block;
  position: relative;
  aspect-ratio: 3/4;
}

/* o "pote": cantos arredondados no topo, reto embaixo */
.cat__pote {
  position: absolute;
  inset: 0;
  border-radius: 34% 34% 14px 14px / 22% 22% 14px 14px;
  overflow: hidden;
  background: var(--creme);   /* Creme da Receita (era o verdinho --creme-2) */
}

/* círculo que sobe preenchendo o pote no hover */
.cat__fill {
  position: absolute;
  left: 50%;
  bottom: -10%;
  width: 170%;
  padding-bottom: 170%;
  transform: translateX(-50%) scale(0);
  transform-origin: 50% 100%;
  border-radius: 50%;
  background: var(--verde-escuro);
  transition: transform .55s cubic-bezier(.16,1,.3,1);
}

/* bottom maior = produto mais alto, sem encostar no nome da categoria */
.cat__foto {
  position: absolute;
  left: 50%;
  bottom: 27%;
  width: 120%;
  height: 88%;
  object-fit: contain;
  object-position: bottom center;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  filter: drop-shadow(0 26px 30px rgba(var(--verde-escuro-rgb), 0.28));
  transition: transform .55s cubic-bezier(.16,1,.3,1), filter .55s ease;
  pointer-events: none;
}

.cat__legenda {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 14px 24px;
  pointer-events: none;
}

.cat__nome {
  /* 01/09: fonte de texto, não a OverHeat (mesma decisão dos números do
     institucional). Em caixa alta e tamanho pequeno a display fechava demais. */
  font-family: var(--fonte-texto);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.1;
  color: var(--verde-escuro);
  text-align: center;
  transition: color .35s ease;
}

.cat__sub {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(var(--verde-escuro-rgb), 0.65);
  text-align: center;
  transition: color .35s ease;
}

/* ---- setas: sempre visíveis, para o carrossel se anunciar ---- */
.cats-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: none;
  border-radius: 999px;
  background: var(--verde-escuro);
  color: var(--creme);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
  box-shadow: 0 10px 22px rgba(var(--verde-escuro-rgb), 0.28);
  transition: background .25s ease, transform .25s ease, opacity .25s ease;
}
.cats-nav:hover { background: var(--limao); color: var(--verde-escuro); transform: translateY(-50%) scale(1.09); }
.cats-nav[disabled] { opacity: .28; pointer-events: none; }
.cats-nav--prev { left: -12px; }
.cats-nav--next { right: -12px; }

/* névoa curta na direita: sinaliza que há mais categorias */
.cats-palco::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 26px;
  width: 74px;
  background: linear-gradient(to right, rgba(255,253,244,0), #FFFDF4 82%);
  pointer-events: none;
  z-index: 2;
}

.cats-rodape {
  display: flex;
  justify-content: center;
  margin-top: 26px;
}

/* ---- entrada dos cards: sobem em cascata quando a seção aparece ---- */
#categorias:not(.is-vivo) .cat {
  opacity: 0;
  transform: translateY(46px);
}
.cat {
  transition: opacity .5s ease, transform .7s cubic-bezier(.22, 1.1, .36, 1);
  transition-delay: calc(var(--i, 0) * 70ms);
}

@media (prefers-reduced-motion: reduce) {
  .cats { scroll-behavior: auto; }
  .cats__flutua img { transform: none !important; }
  #categorias:not(.is-vivo) .cat { opacity: 1; transform: none; }
  .cat { transition: none; }
}

/* Selo circular que sobra por cima da seção seguinte.
   O container tem height:0 de propósito: o selo é posicionado por cima e não
   pode empurrar o layout. O anel de texto gira com o scroll (app.js). */
.selo-ancora {
  position: relative;
  height: 0;
  z-index: 40;
  max-width: var(--faixa);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.selo {
  position: absolute;
  right: 60px;
  top: -92px;
  width: 184px;
  height: 184px;
  pointer-events: none;
}
.selo svg { width: 100%; height: 100%; display: block; overflow: visible; }

.selo__anel {
  transform-origin: 92px 92px;
  font-family: var(--fonte-texto);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.22em;
}
/* "1947": a OverHeat não tem algarismos, então vai na fonte de texto */
.selo__ano { font-family: var(--fonte-texto); font-weight: 700; font-size: 27px; letter-spacing: 0.01em; }
.selo__marca {
  font-family: var(--fonte-texto);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
}

/* Home — bloco institucional sobre o GIF de fundo.
   Entra com wipe vertical (data-cep-cut) e o título tem paralaxe (data-cep-scrub). */
/* .inst-hero: classe compartilhada pela home (#institucional) e pelo topo da
   página institucional (a-cepera), que reusa o MESMO hero (a moça no GIF). */
.inst-hero {
  position: relative;
  background: var(--verde-inst);
  color: var(--creme);
  padding: 86px 0;
  overflow: hidden;
}

.inst__fundo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  pointer-events: none;
}

.inst__grade {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 560px) 1fr;
  gap: 64px;
  align-items: center;
}

.inst-hero .rotulo { color: var(--limao); letter-spacing: 0.18em; margin: 0 0 18px; }
.inst-hero .display {
  margin: 0 0 22px;
  color: var(--creme);
}
/* migalhas claras dentro do hero (na institucional) */
.inst-hero .migalhas--claras { margin-bottom: 16px; }

.inst__texto {
  max-width: 500px;
  font-size: 18px;
  line-height: 1.55;
  color: rgba(var(--creme-rgb), 0.9);
  margin: 0 0 28px;
}

/* CTA verde-limão, com preenchimento líquido no hover (data-cep-liquid) */
.btn--limao {
  background: var(--limao);
  color: var(--verde-escuro);
  font-size: 14px;
  font-weight: 700;
  padding: 16px 32px;
}

/* par de números, com um fio que se desenha ao entrar (data-cep-rule) */
.inst__numeros {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 40px;
  padding-top: 30px;
}

.inst__fio {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background: rgba(161, 211, 2, 0.4);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .65s cubic-bezier(.16,1,.3,1);
}

.inst__num {
  /* 01/09: fonte de texto, não a OverHeat. Na display, "Desde"/"produtos"
     saíam com peso e caixa muito diferentes do número e o par ficava torto. */
  font-family: var(--fonte-texto);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--limao);
}

.inst__legenda {
  margin: 10px 0 0;
  font-size: 16px;
  color: rgba(var(--creme-rgb), 0.8);
}

.inst__fecho {
  margin: 26px 0 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--creme);
}

/* Home — sustentabilidade, redesenho "deslocado" (31/08/2026).
   Porte pra vanilla de uma referência React/Tailwind que o Rafael mandou
   (hero SocialFi do 21st.dev): tipografia gigante empilhada fora de eixo com
   sombra dura, cards tortos espalhados, setas rabiscadas e selo girando, tudo
   sobre um grid de linhas. Paleta e conteúdo são os da Cepêra — os 6 pilares
   continuam vindo de dados/sustentabilidade.json. */
.sust {
  position: relative;
  background: var(--creme);
  color: var(--verde-escuro);
  /* 01/09: seção encurtada a pedido do Rafael (era 130/150) */
  padding: 92px 0 104px;
  overflow: hidden;
}

/* Sem textura de fundo (Rafael testou o grid da referência e o grafismo
   diagonal oficial e preferiu limpo, 31/08). O fundo fica só com as palavras
   gigantes do .sust__eco. O grafismo extraído continua em
   assets/grafismo-diagonal.png para outras seções. */
.sust__grade-fundo { display: none; }

.sust__faixa { position: relative; z-index: 1; }

/* ---- palavra gigante tom sobre tom, atras de tudo ----
   Comportamento oficial do brandbook ("repeticao com texto de apoio", p.59):
   Frescor da Horta sobre Ervas & Conservas, cortando nas bordas. Cada linha
   deriva horizontalmente com o scroll (js/app.js, data-sust-deriva). */
.sust__eco {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px 0;
  overflow: hidden;
  pointer-events: none;
}

.sust__eco-linha {
  font-family: var(--fonte-titulo);
  font-size: clamp(90px, 13vw, 210px);
  line-height: 0.9;
  white-space: nowrap;
  color: var(--limao-55);
  opacity: 0.32;
  margin-left: -6%;
  will-change: transform;
}
.sust__eco-linha:nth-child(2) { align-self: flex-end; margin-right: -6%; }
.sust__eco-linha:nth-child(4) { align-self: flex-end; margin-right: -6%; }

/* ---- pilha de título fora de eixo ---- */
.sust__titulo-pilha {
  position: relative;
  margin-bottom: 54px;
}

.sust__display {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 400;
  line-height: 0.88;
  text-transform: uppercase;
}

.sust__linha { display: block; }

/* sombra dura em degraus, verde mais fundo que o fundo */
.sust__linha--1,
.sust__linha--3 {
  font-size: clamp(30px, 4.4vw, 68px);
  color: var(--verde-escuro);
  text-shadow:
    2px 2px 0 var(--limao-55), 4px 4px 0 var(--limao-55), 6px 6px 0 var(--limao-55), 8px 8px 0 var(--limao-55);
}
.sust__linha--2 {
  font-size: clamp(38px, 6.2vw, 98px);
  color: var(--verde);
  text-shadow:
    2px 2px 0 var(--limao-55), 4px 4px 0 var(--limao-55), 6px 6px 0 var(--limao-55),
    8px 8px 0 var(--limao-55), 10px 10px 0 var(--limao-55), 12px 12px 0 var(--limao-55);
}

/* o deslocamento: cada linha ancorada num ponto diferente */
.sust__linha--1 { padding-left: 8%; }
.sust__linha--2 { padding-left: 0; }
.sust__linha--3 { padding-left: 34%; }
.sust__ponto { color: var(--laranja); text-shadow: none; }

/* setas rabiscadas */
.sust__seta {
  position: absolute;
  width: clamp(64px, 8vw, 120px);
  height: clamp(64px, 8vw, 120px);
  color: var(--verde);
  overflow: visible;
  pointer-events: none;
}
.sust__seta--esq { left: -1%; bottom: -30px; transform: rotate(-8deg); }
.sust__seta--dir { right: 2%; top: -34px; transform: scaleX(-1) rotate(6deg); }

/* ---- cards tortos ---- */
.pilares {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px 22px;
  padding: 0 3%;
}

.pilar-slot { min-width: 0; }

.pilar {
  position: relative;
  height: 100%;
  border-radius: 26px;
  padding: 24px 26px 28px;
  box-shadow: 10px 12px 0 rgba(var(--verde-escuro-rgb), 0.16);
  transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease;
}
.pilar:hover {
  transform: rotate(0deg) translateY(-6px) !important;
  box-shadow: 4px 6px 0 rgba(var(--verde-escuro-rgb), 0.16);
}

/* cada card com o seu tombo; a cor e sobria: base clara unica e UMA ancora
   escura (card 1). O "deslocado" vem do tombo/sombra, nao de cor. */
.pilar { background: #FFFDF4; color: var(--verde-escuro); }  /* branco-quente (teste; puro #fff foge da paleta) */
.pilar--1 { transform: rotate(-2.5deg); background: var(--verde-escuro); color: var(--creme); }
.pilar--2 { transform: rotate(1.8deg) translateY(20px); }
.pilar--3 { transform: rotate(-1.6deg) translateY(-12px); }
.pilar--4 { transform: rotate(2.4deg) translateY(10px); }
.pilar--5 { transform: rotate(-2deg) translateY(-16px); }
.pilar--6 { transform: rotate(1.5deg) translateY(14px); }

.pilar__icone {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 34px;
  height: 34px;
  fill: none;
  stroke: var(--verde);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}
.pilar--1 .pilar__icone { stroke: var(--limao); }

.pilar__titulo {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.22;
  margin: 0 44px 12px 0;
}

.pilar__texto {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.45;
  opacity: 0.82;
}

/* o selo invade o canto do card 6: o padding extra tira o texto de baixo dele */
.pilar--6 { padding-right: 92px; }

/* ---- selo girando, invadindo a borda dos cards ---- */
.sust__selo {
  position: absolute;
  right: -1.5%;
  bottom: -84px;
  width: clamp(110px, 12vw, 168px);
  aspect-ratio: 1;
  transform: rotate(12deg);
  filter: drop-shadow(8px 10px 0 rgba(var(--verde-escuro-rgb), 0.3));
  z-index: 3;
}
.sust__selo svg { width: 100%; height: 100%; display: block; overflow: visible; }
.sust__selo-anel {
  transform-origin: 50px 50px;
  animation: sustGira 12s linear infinite;
}
.sust__selo-anel text {
  font-family: var(--fonte-texto);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

@keyframes sustGira { to { transform: rotate(360deg); } }

/* =========================================================================
   A CENA (bindSustCena no app.js): quando a secao entra na tela ela ganha
   .is-vivo e tudo se coreografa —
   - titulo: linhas deslizam de lados alternados com overshoot
   - setas: se DESENHAM (pathLength=1 + dashoffset animado)
   - cards: JOGADOS NA MESA — caem de cima girando e assentam no tombo
   - selo: CARIMBA — entra grande girando e bate no lugar
   Depois de assentar, o JS adiciona .is-assentado, que zera os delays para o
   hover dos cards responder na hora.
   ========================================================================= */

/* estado inicial (antes de .is-vivo) */
.sust:not(.is-vivo) .sust__linha--1 { opacity: 0; transform: translateX(-70px); }
.sust:not(.is-vivo) .sust__linha--2 { opacity: 0; transform: translateX(80px); }
.sust:not(.is-vivo) .sust__linha--3 { opacity: 0; transform: translateX(-60px); }
.sust:not(.is-vivo) .sust__seta path { stroke-dashoffset: 1; }
.sust:not(.is-vivo) .pilar {
  opacity: 0;
  transform: translateY(-55vh) rotate(var(--tombo-voo, 24deg)) scale(1.06);
}
.sust:not(.is-vivo) .sust__selo { opacity: 0; transform: rotate(-80deg) scale(2.1); }

/* transições (o "como" do movimento) */
.sust__linha {
  transition: opacity .5s ease, transform .8s cubic-bezier(.22, 1.4, .36, 1);
}
.sust__linha--2 { transition-delay: .1s; }
.sust__linha--3 { transition-delay: .2s; }

.sust__seta path {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .9s cubic-bezier(.6, 0, .3, 1);
}
.sust__seta--esq path { transition-delay: .55s; }
.sust__seta--dir path { transition-delay: .75s; }

.pilar {
  transition:
    transform .7s cubic-bezier(.26, 1.35, .42, 1),
    opacity .35s ease,
    box-shadow .45s ease;
  transition-delay: var(--d, 0s), var(--d, 0s), 0s;
}
/* cada card cai num tempo e com um giro de voo proprio */
.pilar--1 { --d: .30s; --tombo-voo: -26deg; }
.pilar--2 { --d: .42s; --tombo-voo: 22deg; }
.pilar--3 { --d: .54s; --tombo-voo: -18deg; }
.pilar--4 { --d: .66s; --tombo-voo: 28deg; }
.pilar--5 { --d: .78s; --tombo-voo: -22deg; }
.pilar--6 { --d: .90s; --tombo-voo: 18deg; }

.sust__selo {
  transition: opacity .3s ease, transform .55s cubic-bezier(.2, 1.6, .35, 1);
  transition-delay: 1.15s, 1.15s;
}

/* depois de assentado, hover responde na hora */
.sust.is-assentado .pilar,
.sust.is-assentado .sust__selo { transition-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
  .sust__selo-anel { animation: none; }
  .pilar, .pilar:hover { transform: none !important; opacity: 1 !important; }
  .sust__eco-linha { transform: none !important; }
  .sust:not(.is-vivo) .sust__linha--1,
  .sust:not(.is-vivo) .sust__linha--2,
  .sust:not(.is-vivo) .sust__linha--3 { opacity: 1; transform: none; }
  .sust:not(.is-vivo) .sust__seta path { stroke-dashoffset: 0; }
  .sust:not(.is-vivo) .sust__selo { opacity: 1; transform: rotate(12deg) scale(1); }
}

/* banner: vista aérea da fábrica no verde (03/09). Entre o título e os cards,
   dá o "hero" de sustentabilidade que faltava, com dado real na legenda. */
.sust__banner {
  position: relative;
  margin: 0 0 34px;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 10px 12px 0 rgba(var(--verde-escuro-rgb), 0.12);
}
.sust__banner img {
  width: 100%;
  height: clamp(240px, 34vw, 460px);
  object-fit: cover;
  display: block;
}
.sust__banner-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 40px 26px 22px;
  color: var(--creme);
  background: linear-gradient(to top, rgba(var(--verde-escuro-rgb),0.82), transparent);
}
.sust__banner-cap b { font-family: var(--fonte-texto); font-weight: 800; letter-spacing: -0.01em; font-size: clamp(20px, 2.2vw, 28px); }
.sust__banner-cap span { font-size: 13.5px; letter-spacing: 0.02em; color: rgba(var(--creme-rgb), 0.9); }

/* Home — Receitas (01/09, 4ª versão): "Quanto tempo você tem?".
   A régua de tempo filtra a tira: o que NÃO cabe no tempo escolhido sai da
   tela, em vez de ficar cinza ocupando espaço. Sobram só as que cabem, todas
   do mesmo tamanho e na mesma linha de base, em ordem de tempo, e elas crescem
   conforme a tira esvazia (flex: 1). Sem fio, sem tombo, sem faixa de altura.

   Descartadas antes desta: 1ª carrossel de cards com chips (padrão genérico),
   2ª "caderno de receitas aberto" (não quis a receita já aberta), 3ª varal com
   as fotos penduradas por fios inclinados (o Rafael achou bagunçado: fios
   cruzados, alturas diferentes e as apagadas atrapalhando).
   Dados: dados/receitas.json. Motor: bindReceitas no js/app.js. */
.recs {
  position: relative;
  background: var(--creme);
  padding: 118px 0 118px;
  overflow: hidden;
}

/* ---- palavras gigantes do fundo ---- */
.recs__eco {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  pointer-events: none;
  z-index: 0;
}
.recs__eco span {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: clamp(90px, 15vw, 230px);
  line-height: 0.86;
  color: var(--limao);
  opacity: 0.11;
  white-space: nowrap;
  will-change: transform;
}
.recs__eco span:first-child { text-align: left;  margin-left: -2vw; }
.recs__eco span:last-child  { text-align: right; margin-right: -2vw; }

/* ---- ingredientes flutuando (mesma paralaxe do banner e das categorias) ---- */
.recs__flutua {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.recs__flutua img {
  position: absolute;
  /* 0.5 é o repouso, igual às categorias: o JS baixa isso nas pontas do
     percurso. Não começar em 0, senão sem JS os ingredientes somem. */
  opacity: 0.5;
  will-change: transform, opacity;
  filter: drop-shadow(0 14px 18px rgba(var(--verde-escuro-rgb), 0.10));
}

.recs .faixa { position: relative; z-index: 1; }

/* ---- cabeça ---- */
.recs__cabeca {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 38px;
}
.recs__titulo {
  margin: 0;
  line-height: 0.84;
  color: var(--verde-escuro);
  text-shadow: 3px 3px 0 var(--limao-55), 6px 6px 0 rgba(var(--verde-escuro-rgb), 0.10);
}
.recs__t1, .recs__t2 { display: block; }
.recs__t2 { margin-left: 1.4em; color: var(--verde); }
.recs__linha {
  max-width: 32ch;
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(var(--verde-escuro-rgb), 0.78);
}

/* ---- a régua ---- */
.regua { position: relative; margin-bottom: 54px; }
.regua__leitura {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 18px;
}
.regua__leitura b {
  /* a OverHeat NAO tem algarismos: "1h30" saía com o número numa fonte e o
     "h" noutra. Todo texto com número usa a fonte de texto. */
  font-family: var(--fonte-texto);
  font-size: clamp(28px, 2.9vw, 42px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--laranja);
}
.regua__leitura span {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--verde-escuro-rgb), 0.6);
}

.regua__pista {
  position: relative;
  height: 6px;
  background: rgba(var(--verde-escuro-rgb), 0.16);
  border-radius: 99px;
}
.regua__cheia {
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  width: 23%;
  background: var(--verde-escuro);
  border-radius: 99px;
}
/* marcas em fluxo, logo abaixo da pista (posição em % vem do JS) */
.regua__marcas { position: relative; height: 20px; margin-top: 12px; }
.regua__marca {
  position: absolute;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(var(--verde-escuro-rgb), 0.42);
  white-space: nowrap;
}
.regua__marca::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -10px;
  width: 1px;
  height: 6px;
  background: rgba(var(--verde-escuro-rgb), 0.3);
}

/* o input cobre a pista inteira; só o polegar aparece */
.regua__input {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 34px;
  margin: 0;
  background: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: grab;
}
.regua__input:active { cursor: grabbing; }
.regua__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 3px solid var(--verde-escuro);
  background: var(--limao);
  box-shadow: 3px 4px 0 rgba(var(--verde-escuro-rgb), 0.22);
  cursor: grab;
}
.regua__input::-moz-range-thumb {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 3px solid var(--verde-escuro);
  background: var(--limao);
  box-shadow: 3px 4px 0 rgba(var(--verde-escuro-rgb), 0.22);
  cursor: grab;
}
.regua__input:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--laranja); outline-offset: 2px; }

/* ---- a tira ---- */
.tira {
  display: flex;
  align-items: flex-start;
  gap: 22px;
}
/* flex:1 com base 0: as que ficam dividem a largura entre si, então quanto
   menos receitas cabem no tempo, MAIORES elas ficam. O max-width evita que
   uma sozinha vire um pôster. */
.pin {
  flex: 1 1 0;
  min-width: 0;
  max-width: 332px;
  display: block;
}
.pin[hidden] { display: none; }

/* o tempo é a informação que manda aqui: sai grande, na tipografia da marca,
   e os oito alinhados formam a régua visual da tira */
.pin__tempo {
  display: block;
  /* idem: número + unidade na mesma fonte (ver .regua__leitura b) */
  font-family: var(--fonte-texto);
  font-size: clamp(19px, 1.8vw, 28px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  margin-bottom: 12px;
  color: var(--laranja);
}

.pin__foto {
  display: block;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(var(--verde-escuro-rgb), 0.06);
}
.pin__foto img {
  display: block;
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.pin:hover .pin__foto img { transform: scale(1.05); }

.pin__nome {
  display: block;
  margin-top: 16px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.24;
  color: var(--verde-escuro);
}
.pin__produto {
  display: block;
  font-style: normal;
  font-size: 13.5px;
  line-height: 1.4;
  margin-top: 5px;
  color: rgba(var(--verde-escuro-rgb), 0.7);
}
.pin__rende {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 10px;
  color: rgba(var(--verde-escuro-rgb), 0.45);
}
.pin__ir {
  display: inline-block;
  margin-top: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--verde);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .25s ease, transform .25s ease;
}
.pin:hover .pin__ir { opacity: 1; transform: none; }

/* a que entra (troca de tempo ou sorteio) chega deslizando */
.pin.is-nova { animation: pinEntra .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes pinEntra {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
/* o sorteio dá um empurrão na escolhida */
.pin.is-sorteada { animation: pinPula 1.1s ease; }
.pin.is-sorteada .pin__foto { box-shadow: 0 0 0 3px var(--limao); border-radius: 8px; }
@keyframes pinPula {
  0%, 100% { transform: none; }
  30%      { transform: translateY(-14px); }
  60%      { transform: translateY(-5px); }
}

/* ---- pé ---- */
.recs__pe {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 46px;
}
.recs-sorte {
  border: none;
  background: var(--limao);
  color: var(--verde-escuro);
  font-family: var(--fonte-texto);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 15px 26px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), background .25s ease;
}
.recs-sorte:hover { background: var(--verde); color: var(--creme); transform: scale(1.03); }
.recs-sorte:active { transform: scale(.97); }

@media (prefers-reduced-motion: reduce) {
  .pin__foto img, .pin__ir, .recs-sorte { transition: none; }
  .pin.is-nova, .pin.is-sorteada { animation: none; }
  .pin__ir { opacity: 1; transform: none; }
  .recs__eco span, .recs__flutua img { transform: none !important; }
}

/* Home — Parcerias, layout split editorial (4ª iteração, 31/08):
   FOTO GIGANTE e natural à esquerda (~62%, nada por cima dela) + painel
   verde-escuro à direita com o nome do parceiro em foco e um ÍNDICE
   tipográfico dos 5 parceiros (clicável, estilo revista). Crossfade + zoom
   lento na troca. Motor: bindParceriasHero no js/app.js. */
.parcerias {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(380px, 1fr);
  min-height: calc(100vh - var(--topo-alt));
  background: var(--verde-inst);
  color: var(--creme);
  overflow: hidden;
  outline: none;
}
.parcerias:focus-visible { box-shadow: inset 0 0 0 2px rgba(var(--creme-rgb), 0.5); }

/* ---- a foto ---- */
.parc-foto { position: relative; overflow: hidden; }
.parc-foto__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.16);
  transition: opacity .7s ease;
}
.parc-foto__img.is-on {
  opacity: 1;
  transform: scale(1.02);
  transition: opacity .7s ease, transform 7s linear;
}

/* recorte EXATO do institucional, tracado do gif e espelhado */
.parc-corte {
  position: absolute;
  right: 100%;
  top: 0;
  height: 100%;
  /* +1px avançando sobre o painel: a fronteira foto/painel cai em pixel
     fracionário (ex.: 787,64) e o browser antialiasa essa coluna, deixando um
     fio visível. O corte cobre a costura. */
  width: calc(clamp(150px, 13vw, 280px) + 1px);
  margin-right: -1px;
  display: block;
  fill: var(--verde-inst);
  pointer-events: none;
}

/* ---- painel ---- */
.parc-painel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  padding: clamp(28px, 4.5vh, 52px) clamp(28px, 3vw, 56px);
}
.parc-painel .rotulo { color: var(--limao); margin: 0 0 8px; }
.parc-painel__marca { font-size: clamp(22px, 2vw, 32px); color: var(--creme); }

/* lettering rotativo em loop ("SERVE SABOR," ⟷ "SERVE CEPERA.", tudo creme) */
.troca {
  display: inline-flex;
  overflow: hidden;
  height: 0.98em;
  vertical-align: bottom;
}
.troca__pista {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  animation: trocaRola 5.6s cubic-bezier(.76, 0, .24, 1) infinite;
}
.troca__palavra {
  display: block;
  flex: none;       /* sem isso o flex-shrink esmaga o slot pra altura da janela */
  height: 1.35em;   /* maior que a janela: o ascendente da OverHeat nao vaza */
  line-height: 0.98;
  white-space: nowrap;
}
@keyframes trocaRola {
  0%, 41%   { transform: translateY(0); }
  50%, 91%  { transform: translateY(-1.35em); }
  100%      { transform: translateY(-2.7em); }
}

/* ---- nome do parceiro em foco ---- */
/* 01/09: nome do parceiro na fonte de TEXTO. A OverHeat fica reservada ao
   lettering da Cepêra ("SERVE SABOR, / SERVE CEPERA."); escrever a marca dos
   outros com a display da casa deixava o bloco todo com a mesma textura. */
.parc-nome {
  font-family: var(--fonte-texto);
  font-weight: 700;
  font-size: clamp(36px, 3.2vw, 56px);
  letter-spacing: -0.015em;
  line-height: 1.02;
  margin: 0;
  color: var(--creme);
}
.parc-nome__recorte { display: block; overflow: hidden; }
.parc-nome__recorte > span { display: block; }
.parcerias.is-trocando .parc-nome__recorte > span { transform: translateY(112%); transition: none; }
.parcerias:not(.is-trocando) .parc-nome__recorte > span {
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
.parc-sobre {
  margin: 14px 0 0;
  max-width: 42ch;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.55;
  color: rgba(var(--creme-rgb), 0.92);
  transition: opacity .45s ease .1s;
}
.parcerias.is-trocando .parc-sobre { opacity: 0; transition: none; }
.parc-btn { margin-top: 22px; align-self: flex-start; }
.parc-painel__meio { display: flex; flex-direction: column; align-items: flex-start; }

/* ---- índice tipográfico ---- */
.parc-indice { display: flex; flex-direction: column; }
.parcI {
  display: flex;
  align-items: baseline;
  gap: 16px;
  width: 100%;
  padding: 13px 2px;
  background: none;
  border: none;
  border-top: 1px solid rgba(var(--creme-rgb), 0.22);
  color: rgba(var(--creme-rgb), 0.6);
  font-family: var(--fonte-texto);
  text-align: left;
  cursor: pointer;
  transition: color .25s ease, padding-left .3s cubic-bezier(.2,.7,.2,1);
}
.parcI:last-child { border-bottom: 1px solid rgba(var(--creme-rgb), 0.22); }
.parcI:hover { color: var(--creme); padding-left: 10px; }
.parcI__num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.parcI__nome {
  font-family: var(--fonte-texto);
  font-weight: 600;
  font-size: clamp(16px, 1.2vw, 19px);
  letter-spacing: 0;
  line-height: 1.15;
}
.parcI__seta {
  margin-left: auto;
  font-size: 16px;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .25s ease, transform .3s ease;
}
.parcI.is-foco { color: var(--limao); cursor: default; }
.parcI.is-foco .parcI__seta,
.parcI:hover .parcI__seta { opacity: 1; transform: translateX(0); }

/* ---- trilho de posição ---- */
.parc-rail {
  margin-top: 22px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(var(--creme-rgb), 0.75);
}
.parc-rail__nums { display: flex; justify-content: space-between; }
.parc-rail__pista {
  position: relative;
  margin-top: 8px;
  height: 2px;
  background: rgba(var(--creme-rgb), 0.25);
}
.parc-rail__cursor {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20%;
  background: var(--limao);
  transition: left .55s cubic-bezier(.3, 1.15, .4, 1);
}

@media (prefers-reduced-motion: reduce) {
  .troca__pista { animation: none; transform: translateY(-1.35em); }
  .parc-foto__img, .parc-foto__img.is-on { transition: opacity .3s ease; transform: scale(1.02); }
  .parc-rail__cursor, .parcI { transition: none; }
  .parcerias:not(.is-trocando) .parc-nome__recorte > span { transition: none; }
}

/* Home — Instagram (@saborescepera). Substituiu o trilho de Shorts do YouTube
   em 01/09: o bloco de vídeos estava confundindo com o de receitas (mesma cara
   de card com foto + título + linha de apoio). Aqui a leitura é de rede
   social: mosaico irregular de posts quadrados, sem título por baixo, com o
   arroba gigante no lugar da headline.

   Os posts são REAIS: `dados/instagram.json` e `assets/instagram/*.webp` vieram
   das 9 publicações mais recentes do perfil (legenda, tipo e curtidas
   incluídos). Como atualizar e por que não é ao vivo: ver o CLAUDE.md. */
.ig {
  position: relative;
  background: var(--verde-escuro);
  color: var(--creme);
  padding: 96px 0 104px;
  overflow: hidden;
}
.ig__tex {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
  pointer-events: none;
}
.ig .faixa { position: relative; }

/* ---- cabeça: avatar + arroba, com cara de perfil ---- */
.ig__marca { display: flex; align-items: center; gap: 20px; }
.ig__avatar {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  object-fit: cover;
  /* o anel do story: limão sobre o verde escuro */
  border: 3px solid var(--verde-escuro);
  box-shadow: 0 0 0 3px var(--limao);
  flex: none;
}
.ig__bio {
  margin: 8px 0 0;
  font-size: 14.5px;
  color: rgba(var(--creme-rgb), 0.85);
}

/* ---- cabeça: o arroba É a headline ---- */
.ig__cabeca {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.ig__arroba {
  margin: 0;
  line-height: 0.9;
  color: var(--creme);
}
.ig__conta {
  margin: 6px 0 0;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: rgba(var(--creme-rgb), 0.72);
}
.ig__conta b { color: var(--limao); font-weight: 700; }
.ig__ponto { margin: 0 6px; color: rgba(var(--creme-rgb), 0.45); }

/* ---- mosaico irregular ---- */
/* 4 colunas de quadrados e UM destaque 2x2: 1 grande (4 células) + 8 pequenas
   = 12 células = 4 x 3 exatas, sem buraco na grade e sem esticar a seção.
   Com dois destaques dava 4 fileiras e o bloco passava de 1600px. */
.ig__mosaico {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.ig-post {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.2);
}
.ig-post:nth-child(1) { grid-column: span 2; grid-row: span 2; }

.ig-post img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}
.ig-post:hover img { transform: scale(1.06); }

/* selo do tipo de publicação, como no app */
.ig-post__tipo {
  position: absolute;
  right: 10px;
  top: 10px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.42);
  color: var(--creme);
  backdrop-filter: blur(4px);
  transition: opacity .25s ease;
}
.ig-post__tipo svg {
  width: 15px; height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* o play do reel é cheio, não de traço */
.ig-post--reel .ig-post__tipo svg { fill: currentColor; stroke: none; }
.ig-post:hover .ig-post__tipo { opacity: 0; }

/* véu com a legenda e as curtidas: só no hover, como no perfil */
.ig-post__veu {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px;
  background: linear-gradient(to top, rgba(0, 74, 0, 0.92) 0%, rgba(0, 74, 0, 0.55) 45%, rgba(0, 74, 0, 0) 100%);
  opacity: 0;
  transition: opacity .3s ease;
}
.ig-post:hover .ig-post__veu,
.ig-post:focus-visible .ig-post__veu { opacity: 1; }

.ig-post__legenda {
  font-size: 13px;
  line-height: 1.4;
  color: var(--creme);
  /* três linhas no máximo: legenda de Instagram é longa demais para o tile */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ig-post:nth-child(1) .ig-post__legenda { font-size: 15px; -webkit-line-clamp: 4; }

.ig-post__curtidas {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--limao);
}
.ig-post__curtidas svg {
  width: 14px; height: 14px;
  fill: currentColor;
  stroke: none;
}

.ig__nota {
  margin: 26px 0 0;
  font-size: 12.5px;
  color: rgba(var(--creme-rgb), 0.55);
}

/* ---- último tile: leva ao perfil ---- */
.ig-post--mais {
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 22px;
  background: var(--limao);
  color: var(--verde-escuro);
  transition: background .3s ease;
}
.ig-post--mais:hover { background: var(--creme); }
.ig-mais__arroba {
  font-family: var(--fonte-titulo);
  font-size: 52px;
  line-height: 0.8;
}
.ig-mais__texto { font-size: 15px; font-weight: 700; line-height: 1.3; }
.ig-mais__seta {
  font-size: 20px;
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.ig-post--mais:hover .ig-mais__seta { transform: translateX(6px); }

/* ---- entrada: os tiles sobem em cascata pela diagonal ---- */
.ig.tem-cena .ig-post { opacity: 0; transform: translateY(26px); }
.ig.tem-cena.is-vivo .ig-post {
  opacity: 1;
  transform: none;
  transition: opacity .55s ease var(--d, 0ms), transform .55s cubic-bezier(.2,.8,.2,1) var(--d, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .ig-post img, .ig-post__veu, .ig-post__tipo, .ig-mais__seta { transition: none; }
  .ig.tem-cena .ig-post { opacity: 1; transform: none; }
}

/* Home — bloco de cadastro. Sem backend: o app.js só revela a confirmação.
   01/09: o cartão passou a SUBIR por cima do bloco anterior (o do Instagram,
   verde escuro) e o fundo ganhou a frase gigante correndo. Se mudar a altura
   do cartão, conferir o `margin-top` negativo: quem manda no quanto ele
   invade o bloco de cima é ele. */
#newsletter {
  position: relative;
  /* respiro embaixo: a frase gigante corre AQUI, no creme, abaixo do cartão */
  padding: 0 0 176px;
  /* o cartão sobe: precisa ficar ACIMA do bloco anterior na pilha */
  z-index: 2;
}

/* a frase corre no fundo, atrás do cartão e já dentro do creme */
.news__fita {
  position: absolute;
  left: 0;
  right: 0;
  /* ancorada embaixo: a frase corre no creme, depois do cartão, e não atrás
     dele (antes ficava em top:120px e só espiava pelas laterais) */
  bottom: 26px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.news__pista {
  display: flex;
  width: max-content;
  font-family: var(--fonte-titulo);
  font-size: clamp(70px, 11vw, 168px);
  line-height: 1;
  color: var(--limao-55);
  white-space: nowrap;
  animation: newsCorre 34s linear infinite;
  will-change: transform;
}
.news__pista span { padding-right: 60px; }
/* -50%: metade da pista, que é a primeira metade repetida */
@keyframes newsCorre {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.news {
  position: relative;
  z-index: 1;
  background: var(--laranja);
  color: var(--creme);
  border-radius: 28px;
  overflow: hidden;
  padding: 66px 56px;
  box-shadow: 0 26px 60px rgba(var(--verde-escuro-rgb), 0.28);
}
/* o cartão só INVADE o bloco de cima na home, onde vem logo após o Instagram
   (verde escuro, desenhado pra isso). Em outras páginas — institucional — ele
   segue normal, sem encavalar a seção anterior. */
#instagram + #newsletter .news { margin-top: -130px; }

/* "HMMMMMM" gigante sangrando no canto */
.news__marca {
  position: absolute;
  right: -20px;
  bottom: -26px;
  font-family: var(--fonte-titulo);
  font-size: clamp(80px, 13vw, 200px);
  line-height: 1;
  color: rgba(var(--creme-rgb), 0.16);
  pointer-events: none;
  white-space: nowrap;
}

.news__grade {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

.news .display {
  line-height: 0.94;
  color: var(--creme);
  margin: 0 0 16px;
}

.news__lead { font-size: 21px; font-weight: 600; margin: 0 0 10px; }
.news__texto {
  font-size: 17px;
  line-height: 1.55;
  margin: 0;
  color: rgba(var(--creme-rgb), 0.9);
  max-width: 460px;
}

.news__form { display: flex; gap: 12px; flex-wrap: wrap; }

.news__email {
  flex: 1 1 220px;
  min-width: 0;
  background: var(--creme);
  border: none;
  border-radius: 999px;
  padding: 18px 24px;
  font-size: 16px;
  color: var(--verde-escuro);
  outline: none;
}

.news__btn {
  flex: 0 0 auto;
  background: var(--verde-escuro);
  color: var(--creme);
  border: none;
  border-radius: 999px;
  padding: 18px 30px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
}
.news__btn:hover { background: var(--creme); color: var(--laranja); }

/* confirmação: nasce com o atributo `hidden`, o app.js remove.
   Não declarar `display` aqui, senão o [hidden] do browser perde o efeito. */
.news__ok {
  flex: 1 1 100%;
  margin: 2px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--creme);
}

@media (prefers-reduced-motion: reduce) {
  .news__pista { animation: none; }
}

/* Rodapé. Colunas vêm de dados/footer.json — adicionar link é editar o JSON. */
.rodape {
  position: relative;
  background: var(--verde-escuro);
  color: var(--creme);
  padding: 90px 0 40px;
  overflow: hidden;
}
.rodape .faixa { position: relative; }

/* textura de fundo (opacidade final vem do app.js, prop `textura`) */
.rodape__tex {
  position: absolute;
  left: 50%;
  top: -10%;
  width: 120%;
  transform: translateX(-50%);
  opacity: 0.4;
  pointer-events: none;
}

.rodape__grade {
  display: grid;
  grid-template-columns: 1.1fr repeat(5, 0.8fr);
  gap: 36px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(161, 211, 2, 0.3);
}

.rodape__logo {
  height: 64px;
  width: auto;
  display: block;
  margin-bottom: 26px;
}

.rodape__assinatura {
  font-family: var(--fonte-titulo);
  font-size: 30px;
  line-height: 0.95;
  color: var(--creme);
}

.rodape__tagline {
  margin: 14px 0 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--limao);
}

/* redes sociais: pílulas de traço sob a assinatura */
.rodape__redes { display: flex; flex-wrap: nowrap; gap: 9px; margin-top: 24px; }
.rodape__rede {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(var(--creme-rgb), 0.28);
  color: var(--creme);
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.rodape__rede svg {
  width: 19px; height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rodape__rede:hover { background: var(--limao); color: var(--verde-escuro); border-color: var(--limao); transform: translateY(-2px); }

.rodape__titulo {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--limao);
  margin: 0 0 18px;
}

.rodape__links {
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-size: 15px;
}
.rodape__links a { color: rgba(var(--creme-rgb), 0.85); }
.rodape__links a:hover { color: var(--limao); }

.rodape__base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 26px;
  font-size: 13px;
  color: rgba(var(--creme-rgb), 0.7);
}
.rodape__desde { letter-spacing: 0.14em; text-transform: uppercase; }

/* assinatura da agência, como nos outros sites */
.rodape__sinnapse {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(var(--creme-rgb), 0.6);
  transition: color .2s ease;
}
.rodape__sinnapse:hover { color: var(--creme); }
.rodape__sinnapse img { height: 14px; width: auto; opacity: .6; transition: opacity .2s ease; }
.rodape__sinnapse:hover img { opacity: 1; }

/* faixa de links institucionais/legais (todos no site oficial) */
.rodape__legais {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid rgba(var(--creme-rgb), 0.16);
}
.rodape__legais a {
  font-size: 12.5px;
  color: rgba(var(--creme-rgb), 0.62);
  transition: color .2s ease;
}
.rodape__legais a:hover { color: var(--limao); }

/* Páginas internas (02/09): categoria, produto, receita, news e notícia.
   Peças COMPARTILHADAS pelas cinco. Cada página só acrescenta o que é dela.
   Conteúdo real: produtos e nutricional do MD de auditoria `06_produtos.md`,
   receita do `04_receitas.md`, notícias raspadas de cepera.com.br/news/.

   Ritmo comum: migalhas, capa clara com título display, seções alternando
   creme e branco-quente. Sem hero animado: quem chega aqui já sabe o que quer. */

/* as internas não têm o banner de 460vh, então o header precisa de espaço */
body:not([data-pagina="home"]) { padding-top: 0; }

.faixa--estreita {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---- migalhas ---- */
.migalhas {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 26px 0 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(var(--verde-escuro-rgb), 0.5);
}
.migalhas a { color: inherit; transition: color .2s ease; }
.migalhas a:hover { color: var(--laranja); }
.migalhas b { color: var(--verde-escuro); font-weight: 600; }
.migalhas span { opacity: 0.4; }

/* ---- CAPA PADRÃO DAS INTERNAS (02/09) ----
   Foto à esquerda, painel verde à direita com o recorte orgânico do banner
   institucional. Nasceu na página de categoria e virou o padrão: categoria,
   news e cada notícia usam o MESMO componente (componentes/capa-interna.html).
   A página de produto é a exceção, porque tem ficha e não capa.

   Na notícia isso também resolveu a foto que ficava "estourada": ela era
   full-bleed a 1440px a partir de um arquivo de 880px. Aqui ela ocupa uma
   coluna e nunca é ampliada além do tamanho real. */
.chero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr minmax(420px, 42%);
  /* mais baixa que o split de parcerias (que ocupa a tela toda) */
  min-height: 420px;
  background: var(--verde-inst);
}
.chero__foto { position: relative; overflow: hidden; }
.chero__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.chero__painel {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--verde-inst);
  color: var(--creme);
  padding: 54px 56px 54px 20px;
}
/* recorte EXATO do institucional; +1px cobre a costura em pixel fracionário */
.chero__corte {
  position: absolute;
  right: 100%;
  top: 0;
  height: 100%;
  width: calc(clamp(160px, 13vw, 280px) + 1px);
  margin-right: -1px;
  display: block;
  fill: var(--verde-inst);
  pointer-events: none;
}
.chero__texto { position: relative; max-width: 30rem; }
.migalhas--claras { color: rgba(var(--creme-rgb), 0.6); padding-top: 0; margin-bottom: 14px; }
.migalhas--claras b { color: var(--creme); }
.migalhas--claras a:hover { color: var(--limao); }

.chero__titulo {
  margin: 0 0 16px;
  /* teto dimensionado para a palavra mais longa ("SUSTENTABILIDADE", 16 letras)
     caber numa linha só dentro do painel. NÃO usar break-word: partia a palavra
     no meio ("SUSTENTABILIDA / DE"). */
  font-size: clamp(30px, 3.1vw, 50px);
  line-height: 0.92;
  color: var(--creme);
  padding-right: 4%;
  white-space: nowrap;
}
/* na capa da notícia o título é fonte de texto e pode quebrar em várias linhas */
.chero__titulo--texto { white-space: normal; }
/* nome de página LONGO numa palavra só (ex.: SUSTENTABILIDADE): reduz para não
   estourar o painel. */
.chero__titulo--longo { font-size: clamp(28px, 3.2vw, 50px); letter-spacing: -0.01em; }
/* título de NOTÍCIA na capa: fonte de texto (é longo e costuma ter número),
   mas a cor continua sendo a do painel */
.chero__titulo--texto {
  font-family: var(--fonte-texto);
  font-weight: 700;
  letter-spacing: -0.015em;
  font-size: clamp(24px, 2.5vw, 38px);
  line-height: 1.16;
  margin: 0 0 14px;
  color: var(--creme);
}
.chero__chapeu { color: var(--limao); margin-bottom: 10px; }

.chero__lead {
  margin: 0 0 20px;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(var(--creme-rgb), 0.86);
}
.chero__conta {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: rgba(var(--creme-rgb), 0.6);
}
.chero__conta b { color: var(--limao); font-size: 16px; }


/* ---- capa antiga, ainda usada por páginas sem foto ---- */
.capa {
  position: relative;
  background: var(--creme);
  padding: 0 0 64px;
}
.capa__grade {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
  padding-top: 40px;
}
.capa__titulo {
  margin: 0;
  font-size: clamp(52px, 9vw, 132px);
  line-height: 0.82;
  color: var(--verde-escuro);
  text-shadow: 3px 3px 0 var(--limao-55), 6px 6px 0 rgba(var(--verde-escuro-rgb), 0.10);
}
.capa__lead {
  max-width: 46ch;
  margin: 22px 0 0;
  font-size: 18px;
  line-height: 1.55;
  color: rgba(var(--verde-escuro-rgb), 0.8);
}
/* ficha técnica curta da categoria */
.capa__dados { display: flex; gap: 40px; margin: 0; }
.capa__dados dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--verde-escuro-rgb), 0.5);
}
.capa__dados dd {
  margin: 6px 0 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--verde-escuro);
}

/* ---- seções ---- */
.secao { padding: 84px 0; background: #FFFDF4; }
.secao + .secao { border-top: 1px solid rgba(var(--verde-escuro-rgb), 0.08); }
.secao--usar, .secao--outras, .secao--maisnews { background: var(--creme); }
.secao--relacionados { background: #FFFDF4; }

.secao__titulo {
  margin: 0;
  /* sem font-size: usa o --titulo-secao do .display, como todo o resto */
  line-height: 0.92;
  color: var(--verde-escuro);
}
/* Nos relacionados o título vem menor que uma cabeça de seção cheia (até 68px):
   ele encima só três cards, então 68px pesava demais. */
.secao--relacionados .secao__titulo { font-size: clamp(24px, 2.6vw, 38px); }
.secao__titulo-menor {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--verde);
}
.secao .cabeca-linha { margin-bottom: 36px; }

/* a grade e o card de produto agora vivem no 23-catalogo.css: o card ganhou
   poço branco, selo de novo e chamas de ardência quando virou catálogo. */

/* ---- trio de receitas (usado em categoria e receita) ---- */
.usar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.usar__card {
  position: relative;
  display: block;
  padding-bottom: 4px;
}
.usar__card img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.usar__card:hover img { transform: scale(1.03); }
.usar__tempo {
  position: absolute;
  left: 14px;
  top: 14px;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--limao);
  color: var(--verde-escuro);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.usar__card b {
  display: block;
  margin-top: 14px;
  font-size: 18px;
  font-weight: 700;
  color: var(--verde-escuro);
}
.usar__linha {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  color: rgba(var(--verde-escuro-rgb), 0.65);
}

/* ---- grade de notícias ---- */
.ngrade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 22px; }
/* na notícia, só três em uma fileira */
.ngrade--tres > *:nth-child(n+4) { display: none; }
.ncard { display: block; }
.ncard__foto {
  display: block;
  overflow: hidden;
  border-radius: 16px;
  background: rgba(var(--verde-escuro-rgb), 0.06);
}
.ncard__foto img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.ncard:hover .ncard__foto img { transform: scale(1.04); }
.ncard__chapeu {
  display: block;
  margin-top: 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--laranja);
}
.ncard__titulo {
  display: block;
  margin-top: 8px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.28;
  color: var(--verde-escuro);
}
.ncard__ir {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--verde);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .25s ease, transform .25s ease;
}
.ncard:hover .ncard__ir { opacity: 1; transform: none; }
.ngrade__nota {
  margin: 34px 0 0;
  font-size: 12.5px;
  color: rgba(var(--verde-escuro-rgb), 0.5);
}

@media (prefers-reduced-motion: reduce) {
  .pcard, .pcard__foto img, .usar__card img, .ncard__foto img, .ncard__ir { transition: none; }
}

/* Páginas de PRODUTO, RECEITA e NOTÍCIA (02/09).
   O que é comum às internas está no 21-internas.css. */

/* =========================== PRODUTO =========================== */
.prod { background: var(--neutro); padding-bottom: 76px; }
.prod__grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
  padding-top: 26px;
}

/* Palco da embalagem: painel BRANCO (02/09).
   Era uma mancha orgânica em limão, que só funcionava com a foto recortada.
   Recortar não escala num catálogo com centenas de itens, então o fundo passou
   a ser branco: packshot recortado e packshot de fundo branco entram igual.
   Mesma decisão do poço do card no catálogo. */
.prod__palco {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 440px;
  padding: 34px;
  border-radius: 24px;
  background: var(--branco);
  border: 1px solid var(--neutro-2);
}
.prod__foto {
  position: relative;
  /* a tela do asset tem 18% de respiro transparente (padroniza-fotos.py) */
  max-height: 520px;
  width: auto;
  max-width: 82%;
  object-fit: contain;
  /* sombra suave: no branco, a sombra pesada do fundo creme ficava suja */
  filter: drop-shadow(0 18px 26px rgba(var(--verde-escuro-rgb), 0.14));
}

.prod__linha { margin: 0 0 10px; color: var(--verde); }
.prod__nome {
  font-family: var(--fonte-texto);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: 1.02;
  color: var(--verde-escuro);
}
.prod__bloco { margin: 0 0 20px; }
.prod__rot {
  margin: 0 0 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--verde);
}
.prod__ing { margin: 0; font-size: 15px; line-height: 1.55; color: var(--tinta); }
.prod__aler { margin: 8px 0 0; font-size: 13px; color: var(--tinta-fraca); }
.prod__emb {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.prod__emb li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px 7px 10px;
  border-radius: 999px;
  background: var(--neutro);
  border: 1px solid var(--neutro-2);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tinta);
}
.prod__emb svg {
  width: 16px; height: 16px;
  fill: none;
  stroke: var(--verde);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.prod__base { margin-top: 26px; }
.prod__desc {
  max-width: 46ch;
  margin: 0 0 12px;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(var(--verde-escuro-rgb), 0.82);
}
.prod__desc.is-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.prod__vermais {
  border: none;
  background: none;
  padding: 0;
  margin: 0 0 26px;
  font-family: var(--fonte-texto);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--verde);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prod__vermais:hover { color: var(--laranja); }

/* seletor de tamanho: é botão porque um dia troca a ficha inteira */
.prod__pesos { display: flex; gap: 10px; margin-bottom: 24px; }
.prod__peso {
  border: 1.5px solid rgba(var(--verde-escuro-rgb), 0.28);
  background: none;
  color: var(--verde-escuro);
  font-family: var(--fonte-texto);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 11px 20px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.prod__peso:hover { border-color: var(--verde-escuro); }
.prod__peso.is-ativo {
  background: var(--verde-escuro);
  border-color: var(--verde-escuro);
  color: var(--creme);
  cursor: default;
}

.prod__selos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}
.prod__selos li {
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(var(--verde-rgb), 0.12);
  font-size: 12px;
  font-weight: 600;
  color: var(--verde-escuro);
}
.prod__acoes { display: flex; gap: 12px; flex-wrap: wrap; }
.prod__alerta {
  margin: 18px 0 0;
  font-size: 13px;
  color: rgba(var(--verde-escuro-rgb), 0.55);
}

/* nutricional */
.nutri { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: start; }
.nutri__porcao {
  margin: 0 0 14px;
  font-size: 13px;
  color: rgba(var(--verde-escuro-rgb), 0.6);
}
.nutri table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.nutri th, .nutri td {
  padding: 11px 4px;
  text-align: left;
  border-bottom: 1px solid rgba(var(--verde-escuro-rgb), 0.12);
}
.nutri thead th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--verde-escuro-rgb), 0.5);
}
.nutri tbody th { font-weight: 600; color: var(--verde-escuro); }
.nutri td { color: rgba(var(--verde-escuro-rgb), 0.78); }
.nutri td:last-child { text-align: right; }
.nutri__ingredientes p {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(var(--verde-escuro-rgb), 0.82);
}
.nutri__emb {
  margin-top: 18px;
  font-size: 13px;
  color: rgba(var(--verde-escuro-rgb), 0.5);
}
.nutri__emb b { font-weight: 700; }
.nutri__nota { font-size: 13.5px !important; color: rgba(var(--verde-escuro-rgb), 0.55) !important; }

/* =========================== RECEITA ===========================
   02/09: a página inteira era creme e "ficava muito amarela" (Rafael). Agora
   ela alterna faixas, que é o que dá ritmo a uma página longa:

     hero (CINZA)  ->  ingredientes e preparo (BRANCO)  ->  o produto usado
     (VERDE ESCURO)  ->  outras receitas (creme, bloco padrão da home)

   O verde no meio é a quebra principal: corta a página em duas metades claras
   e dá um respiro antes do fecho. Hero em cinza (--neutro), como a página de
   produto: menos amarelo e a foto do prato aparece mais. */
.rec1 { background: var(--neutro); padding-bottom: 64px; }
.rec1__grade {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  align-items: center;
  gap: 56px;
  padding: 30px 0 20px;
}
.rec1__nome {
  /* fonte de texto, não OverHeat: nomes de receita têm muito acento
     ("Medalhões de Filé", "Moqueca de Cação") e a display não tem õ/é/ç,
     quebrando a palavra no meio. Mesma decisão do título de produto. */
  font-family: var(--fonte-texto);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 4px 0 22px;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.02;
  color: var(--verde-escuro);
}
.rec1__meta {
  display: flex;
  gap: 34px;
  margin: 0 0 28px;
  padding: 22px 0;
  border-top: 1px solid rgba(var(--verde-escuro-rgb), 0.15);
  border-bottom: 1px solid rgba(var(--verde-escuro-rgb), 0.15);
  list-style: none;
}
.rec1__meta li { display: flex; flex-direction: column; gap: 4px; }
.rec1__meta b { font-size: 21px; font-weight: 700; color: var(--verde-escuro); }
.rec1__meta span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--verde-escuro-rgb), 0.5);
}
.rec1__foto { position: relative; margin: 0; transform: rotate(1.4deg); }
.rec1__foto img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 22px;
  display: block;
  box-shadow: 14px 16px 0 rgba(var(--verde-escuro-rgb), 0.12);
}
/* selo de tempo "carimbado" no canto da foto: disco limão + anel de texto
   girando (mesma linguagem do selo "FEITO COM PROPÓSITO" da home) */
.rec1__selo {
  position: absolute;
  left: -30px; top: -30px;
  width: 128px; height: 128px;
  border-radius: 50%;
  background: var(--limao);
  color: var(--verde-escuro);
  box-shadow: 0 10px 24px rgba(var(--verde-escuro-rgb), 0.26);
}
.rec1__selo-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rec1__selo-anel { transform-origin: 60px 60px; animation: sustGira 14s linear infinite; }
.rec1__selo-anel text { fill: var(--verde-escuro); font-family: var(--fonte-texto); font-size: 8.5px; font-weight: 800; letter-spacing: 0.14em; }
.rec1__selo-centro {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.rec1__selo-centro b { font-family: var(--fonte-texto); font-weight: 800; font-size: 26px; line-height: 0.9; letter-spacing: -0.02em; }
.rec1__selo-centro span { font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; margin-top: 3px; }
@media (prefers-reduced-motion: reduce) { .rec1__selo-anel { animation: none; } }

/* ---- faixa branca: é aqui que se cozinha ---- */
.rec2 { position: relative; background: var(--branco); padding: 72px 0 80px; overflow: hidden; }
.rec2 .faixa { position: relative; z-index: 1; }
.rec2__eco { position: absolute; inset: 0; display: flex; align-items: center; overflow: hidden; pointer-events: none; z-index: 0; }
.rec2__eco span {
  font-family: var(--fonte-titulo);
  font-size: clamp(90px, 15vw, 230px);
  white-space: nowrap;
  color: var(--limao-55);
  opacity: 0.18;
  margin-left: -3%;
  will-change: transform;
}
.rec1__corpo {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
}
.rec1__ings, .rec1__passos { margin: 0; padding: 0; list-style: none; }
.rec1__dica { margin: 0 0 14px; font-size: 13px; color: var(--tinta-fraca); }
.rec1__ings li { margin-bottom: 4px; }
.ing {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 7px 8px;
  border-radius: 10px;
  font-size: 15.5px;
  line-height: 1.4;
  color: var(--tinta);
  cursor: pointer;
  transition: background .2s ease;
}
.ing:hover { background: rgba(var(--verde-rgb), 0.06); }
.ing input { position: absolute; opacity: 0; pointer-events: none; }
.ing__box {
  flex: none;
  width: 20px; height: 20px;
  margin-top: 1px;
  border: 2px solid rgba(var(--verde-escuro-rgb), 0.3);
  border-radius: 6px;
  background: var(--branco);
  transition: background .2s ease, border-color .2s ease;
}
.ing input:checked + .ing__box {
  background: var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 L10 17.5 L19 7'/%3E%3C/svg%3E") center/13px no-repeat;
  border-color: var(--verde);
}
.ing input:checked ~ .ing__txt { color: var(--tinta-fraca); text-decoration: line-through; text-decoration-color: var(--limao); }
.rec1__mais {
  margin: 16px 0 0;
  font-size: 13.5px;
  font-style: italic;
  color: var(--tinta-fraca);
}
.rec1__passos { margin: 0; padding: 0; list-style: none; }
.rec1__passos li {
  position: relative;
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 10px;
  align-items: start;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px dashed rgba(var(--verde-escuro-rgb), 0.16);
}
.rec1__passos li:last-child { border-bottom: none; }
.passo__n {
  font-family: var(--fonte-texto);
  font-weight: 800;
  font-size: 46px;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--limao);
  -webkit-text-stroke: 1.5px var(--verde);
}
.passo__t { font-size: 16.5px; line-height: 1.6; color: var(--tinta); padding-top: 6px; }
.rec1__fecho {
  margin: 30px 0 0;
  padding-left: 20px;
  border-left: 3px solid var(--limao);
  font-size: 16px;
  font-weight: 600;
  color: var(--verde-escuro);
}
.rec1__fonte { margin: 22px 0 0; font-size: 13.5px; }
.rec1__fonte a {
  color: var(--verde);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rec1__fonte a:hover { color: var(--laranja); }

/* ---- faixa verde: o produto usado, no meio da página ---- */
.usou-faixa {
  background: var(--verde-inst);
  color: var(--creme);
  padding: 64px 0;
}
.usou {
  display: grid;
  grid-template-columns: 240px 1fr;
  align-items: center;
  gap: 52px;
}
.usou__palco {
  display: grid;
  place-items: center;
  padding: 22px;
  border-radius: 20px;
  background: var(--branco);
}
.usou__palco img { max-height: 250px; max-width: 82%; object-fit: contain; }
.usou__rotulo { color: var(--limao); margin-bottom: 8px; }
/* fonte de texto, não OverHeat: nomes de produto têm Ê e a OverHeat não tem o
   glifo (o "ê" de Inglês caía no fallback e destoava). */
.usou__nome { font-family: var(--fonte-texto); font-weight: 800; letter-spacing: -0.01em; color: var(--creme); margin: 0 0 14px; }
.usou__texto {
  max-width: 52ch;
  margin: 0 0 24px;
  font-size: 16.5px;
  line-height: 1.6;
  color: rgba(var(--creme-rgb), 0.85);
}
.usou__acoes { display: flex; gap: 12px; flex-wrap: wrap; }
.btn--claro-linha { border-color: rgba(var(--creme-rgb), 0.5); color: var(--creme); }
.btn--claro-linha:hover { border-color: var(--creme); background: rgba(var(--creme-rgb), 0.1); }

/* =========================== NOTÍCIA ===========================
   02/09: a matéria estava fraca. O cabeçalho virou a CAPA PADRÃO das internas
   (foto na coluna + painel verde), o que também matou a foto "estourada" (ela
   era full-bleed a 1440px a partir de um arquivo de 880px de largura).
   Aqui sobrou o corpo do texto, que é o que a página tem de fazer bem:
   coluna estreita, entrelinha larga e TINTA NEUTRA — o verde-escuro cansa em
   texto longo (pedido do Rafael). */
.post {
  background: var(--branco);
  padding: 64px 0 76px;
}
.post__texto {
  /* medida de leitura: ~66 caracteres por linha */
  max-width: 66ch;
  margin: 0 auto;
}
.post__texto p {
  margin: 0 0 26px;
  font-size: 18.5px;
  line-height: 1.75;
  color: var(--tinta);
}
/* a abertura puxa o olho para dentro do texto */
.post__texto p:first-child {
  font-size: 22px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--verde-escuro);
  padding-bottom: 26px;
  border-bottom: 1px solid var(--neutro-2);
}
/* fio curto em limão antes do corpo, para a coluna não começar seca */
.post__texto p:first-child::after {
  content: "";
  display: block;
  width: 54px;
  height: 4px;
  margin-top: 26px;
  background: var(--limao);
  border-radius: 2px;
}
.post__pe {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 66ch;
  margin: 46px auto 0;
  padding-top: 30px;
  border-top: 1px solid var(--neutro-2);
}

/* Página de CATEGORIA (02/09, 2ª versão): catálogo com filtros à esquerda e
   produtos à direita, no padrão de site de categoria mesmo (busca, facetas,
   contagem, chips do que está ativo). A CAPA saiu daqui: virou o padrão das
   internas, em 21-internas.css + componentes/capa-interna.html.

   A pitada da casa é o filtro "Aguenta quanto?", que troca a escala fria de
   pimentinhas por uma pergunta. E o card mostra a ardência em chamas.

   DECISÃO IMPORTANTE (Rafael, 02/09): **não dependemos de foto recortada.**
   Recortar o fundo de cada packshot daria trabalho demais na escala do
   catálogo. Por isso o card tem um "poço" BRANCO onde a foto entra: funciona
   igual com foto recortada e com o JPG de fundo branco que vem do site.

   O ENQUADRAMENTO É PADRONIZADO NO ASSET, NÃO AQUI. Toda foto passa pelo
   `_tools/padroniza-fotos.py`, que recorta na caixa real do produto e recola
   numa tela 3:4 com 82% de altura útil e a mesma linha de base. Por isso o CSS
   abaixo é burro de propósito (só `object-fit: contain`): se ele começar a ter
   `max-height` por produto, é sinal de que alguém pulou o script. */

/* ---- catálogo ---- */
/* fundo neutro, não creme: o Rafael achou que amarelo demais (02/09) */
.cat2 { background: var(--neutro); padding: 60px 0 84px; }
.cat2__grade {
  display: grid;
  grid-template-columns: 236px 1fr;
  gap: 46px;
  align-items: start;
}

/* filtros */
.filtros {
  position: sticky;
  top: calc(var(--topo-alt) + 20px);
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.busca { position: relative; }
.busca__icone {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  fill: none;
  stroke: rgba(var(--verde-escuro-rgb), 0.45);
  stroke-width: 1.9;
  stroke-linecap: round;
}
.busca input {
  width: 100%;
  padding: 13px 14px 13px 40px;
  border: 1.5px solid var(--neutro-2);
  border-radius: 999px;
  background: var(--branco);
  font-family: var(--fonte-texto);
  font-size: 14px;
  color: var(--verde-escuro);
  transition: border-color .2s ease;
}
.busca input:focus { outline: none; border-color: var(--verde); }
.busca input::placeholder { color: rgba(var(--verde-escuro-rgb), 0.45); }

.filtro { border-top: 1px solid var(--neutro-2); padding-top: 20px; }
.filtro__titulo {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--verde);
}
.filtro__op {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  font-size: 14.5px;
  color: rgba(var(--verde-escuro-rgb), 0.85);
  cursor: pointer;
}
.filtro__op input {
  appearance: none;
  -webkit-appearance: none;
  width: 17px; height: 17px;
  flex: none;
  border: 1.5px solid var(--neutro-2);
  border-radius: 5px;
  background: var(--branco);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
/* laranja (Páprica) no selecionado: o verde escuro somia no neutro e o
   Rafael pediu outra cor na seleção */
.filtro__op input:checked {
  background: var(--laranja);
  border-color: var(--laranja);
  /* o "check" é um SVG embutido: sem ícone extra para carregar */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 L10 17.5 L19 7'/%3E%3C/svg%3E");
  background-size: 13px;
  background-repeat: no-repeat;
  background-position: center;
}
.filtro__op:hover span { color: var(--verde-escuro); }
.filtro__icone {
  width: 18px; height: 18px;
  flex: none;
  fill: none;
  stroke: rgba(var(--verde-escuro-rgb), 0.55);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .2s ease;
}
.filtro__op:hover .filtro__icone,
.filtro__op:has(input:checked) .filtro__icone { stroke: var(--laranja); }

.filtro__dica {
  margin: -6px 0 12px;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(var(--verde-escuro-rgb), 0.5);
}
/* contagem por opção: quem escreve é o bindCatalogo */
.filtro__n {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: rgba(var(--verde-escuro-rgb), 0.4);
}

/* ardência: a pergunta no lugar da escala */
.arde { display: flex; flex-direction: column; gap: 7px; }
.arde__op {
  text-align: left;
  border: 1.5px solid var(--neutro-2);
  background: var(--branco);
  color: rgba(var(--verde-escuro-rgb), 0.8);
  font-family: var(--fonte-texto);
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.arde__op:hover { border-color: var(--verde-escuro); }
.arde__op.is-ativo {
  background: var(--laranja);
  border-color: var(--laranja);
  color: var(--branco);
  cursor: default;
}
/* "Tanto faz" e o estado NEUTRO: nao pode gritar como filtro aplicado */
.arde__op[data-arde="-1"].is-ativo {
  background: var(--verde-escuro);
  border-color: var(--verde-escuro);
  color: var(--creme);
}

.filtros__limpar {
  align-self: flex-start;
  border: none;
  background: none;
  padding: 0;
  font-family: var(--fonte-texto);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--laranja);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* barra de resultados */
.cat2__barra {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
  min-height: 34px;
}
.cat2__conta {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--verde-escuro-rgb), 0.55);
}
.cat2__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--branco);
  border: 1px solid var(--neutro-2);
  color: var(--verde-escuro);
  font-size: 12.5px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background .2s ease;
}
.chip:hover { background: var(--neutro-3); border-color: var(--laranja); color: var(--laranja); }
.chip b { font-weight: 700; font-size: 13px; line-height: 1; }

.cat2__vazio {
  margin: 40px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(var(--verde-escuro-rgb), 0.7);
}
.cat2__vazio b { display: block; font-size: 20px; color: var(--verde-escuro); margin-bottom: 4px; }

/* ---- card de produto ---- */
.pgrade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
/* Relacionados na página de produto: a grade tem largura TETO e fica alinhada à
   esquerda sob o título; os três cards saem em ~240px (escala dos cards do
   catálogo). Sem esse teto o `1fr` esticava cada card por 1/3 da faixa e as
   garrafas saíam gigantes. Mantém `1fr` (e não `minmax(0,240px)`, que colapsava
   as colunas, já que a foto é dimensionada em %). */
.pgrade--tres { max-width: 768px; gap: 24px; }
.pcard {
  display: flex;
  flex-direction: column;
  padding: 14px 14px 20px;
  border-radius: 16px;
  background: var(--branco);
  border: 1px solid var(--neutro-2);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
.pcard:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 30px rgba(var(--verde-escuro-rgb), 0.12);
}
.pcard[hidden] { display: none; }
.pgrade--tres > *:nth-child(n+4) { display: none; }

/* o poço branco: é ele que dispensa recortar a foto */
.pcard__poco {
  position: relative;
  display: grid;
  place-items: center;
  /* proporção fixa: a tela do asset é 3:4 e cai aqui sempre do mesmo jeito */
  aspect-ratio: 4 / 5;
  margin-bottom: 16px;
  /* BRANCO de propósito: é o que permite usar packshot de fundo branco sem
     recortar (ver o cabeçalho deste arquivo) */
  background: var(--branco);
  border-bottom: 1px solid var(--neutro-2);
  overflow: hidden;
}
.pcard__poco img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.pcard:hover .pcard__poco img { transform: scale(1.06) rotate(-1.5deg); }

.pcard__selo {
  position: absolute;
  left: 10px;
  top: 10px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--laranja);
  color: var(--creme);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
/* chaminhas de ardência, no canto do poço */
.pcard__ardencia { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 3px; }
.pcard__ardencia i {
  width: 7px; height: 10px;
  border-radius: 60% 0 55% 55%;
  transform: rotate(-45deg);
  background: rgba(var(--verde-escuro-rgb), 0.14);
}
.pcard__ardencia i.is-on { background: var(--laranja); }

.pcard__linha {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--verde);
}
.pcard__nome {
  margin-top: 5px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--verde-escuro);
}
.pcard__peso {
  margin-top: 3px;
  font-size: 13px;
  color: rgba(var(--verde-escuro-rgb), 0.5);
}
.pcard__diz {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.42;
  color: rgba(var(--verde-escuro-rgb), 0.75);
}
.pcard__ir {
  margin-top: auto;
  padding-top: 14px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--verde);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .25s ease, transform .25s ease;
}
.pcard:hover .pcard__ir { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .pcard, .pcard__poco img, .pcard__ir, .arde__op, .chip { transition: none; }
}

/* News (02/09): a listagem virou um índice de verdade, com destaque, busca
   instantânea e editorias que se contam sozinhas. Motor: bindNews no app.
   A matéria ganhou barra de progresso de leitura e o "próxima notícia".

   As editorias NÃO estão escritas aqui nem no HTML: o JS as descobre a partir
   dos próprios cards. Notícia nova com editoria nova aparece no filtro sozinha. */

.secao--news { background: var(--neutro); }

/* ---- barra de busca + editorias ---- */
.nbarra {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.nbusca { position: relative; flex: 0 0 280px; }
.nbusca input {
  width: 100%;
  padding: 13px 14px 13px 40px;
  border: 1.5px solid var(--neutro-2);
  border-radius: 999px;
  background: var(--branco);
  font-family: var(--fonte-texto);
  font-size: 14px;
  color: var(--verde-escuro);
  transition: border-color .2s ease;
}
.nbusca input:focus { outline: none; border-color: var(--verde); }
.nbusca .busca__icone {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  fill: none;
  stroke: rgba(var(--verde-escuro-rgb), 0.45);
  stroke-width: 1.9;
  stroke-linecap: round;
}
.nedit { display: flex; gap: 8px; flex-wrap: wrap; }
.nedit .recs-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--branco);
  border-color: var(--neutro-2);
  font-size: 12px;
  padding: 9px 16px;
  text-transform: none;
  letter-spacing: 0.01em;
}
.nedit .recs-chip.is-ativa { background: var(--verde-escuro); border-color: var(--verde-escuro); color: var(--creme); }
.nedit__n { font-size: 11px; opacity: .55; font-weight: 700; }

.secao--news .cat2__conta { margin: 0 0 22px; }

/* ---- grade: o primeiro ocupa duas colunas ---- */
.ngrade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 22px; }
.ncard[hidden] { display: none; }

.ncard--destaque:not(.is-comum) {
  grid-column: span 2;
  grid-row: span 2;
  display: grid;
  grid-template-rows: 1fr auto;
  background: var(--branco);
  border: 1px solid var(--neutro-2);
  border-radius: 18px;
  overflow: hidden;
}
.ncard--destaque:not(.is-comum) .ncard__foto { border-radius: 0; height: 100%; }
.ncard--destaque:not(.is-comum) .ncard__foto img { height: 100%; aspect-ratio: auto; }
.ncard--destaque:not(.is-comum) .ncard__corpo { padding: 22px 24px 26px; }
.ncard--destaque:not(.is-comum) .ncard__titulo { font-size: 25px; line-height: 1.2; }
.ncard--destaque .ncard__resumo {
  display: block;
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--tinta-fraca);
}
/* com filtro ativo o destaque vira card comum (ver bindNews) */
.ncard--destaque.is-comum .ncard__resumo { display: none; }

.ncard__topo { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.ncard--destaque:not(.is-comum) .ncard__topo { margin-top: 0; }
.ncard__min {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--tinta-fraca);
  padding-left: 10px;
  border-left: 1px solid var(--neutro-2);
}

/* ---- barra de progresso da leitura ---- */
.leitura {
  position: fixed;
  left: 0; right: 0;
  top: var(--topo-alt);
  height: 3px;
  z-index: 70;
  pointer-events: none;
  background: rgba(var(--verde-escuro-rgb), 0.10);
}
.leitura i {
  display: block;
  height: 100%;
  background: var(--limao);
  transform-origin: left center;
  transform: scaleX(0);
}

/* ---- próxima notícia, no pé da matéria ---- */
.proxima {
  display: grid;
  grid-template-columns: 132px 1fr auto;
  align-items: center;
  gap: 22px;
  max-width: 66ch;
  margin: 34px auto 0;
  padding: 16px;
  border: 1px solid var(--neutro-2);
  border-radius: 16px;
  background: var(--branco);
  transition: border-color .25s ease, transform .25s ease;
}
.proxima:hover { border-color: var(--verde); transform: translateY(-2px); }
.proxima img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 10px; display: block; }
.proxima__rot {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--laranja);
  margin-bottom: 5px;
}
.proxima__tit { font-size: 17px; font-weight: 700; line-height: 1.25; color: var(--verde-escuro); }
.proxima__seta { font-size: 20px; color: var(--verde); padding-right: 8px; }

@media (prefers-reduced-motion: reduce) {
  .proxima { transition: none; }
}

/* Página de receitas — catálogo completo das 64 (02/09), abaixo da régua.
   A régua "Quanto tempo você tem?" mostra 8 âncoras (campo destaque); aqui
   estão TODAS, com busca e filtro por tipo de prato. Cards leves: foto, tempo
   sobre a foto, nome e o produto. Motor: bindReceitasGrade. */
.secao--rgrade { background: var(--neutro); }
.secao--rgrade .cabeca-linha { margin-bottom: 22px; }

.rgbarra {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.rgbarra .nbusca { flex: 0 0 280px; }
.rgfiltros { display: flex; gap: 8px; flex-wrap: wrap; }
.rgfiltros .recs-chip {
  background: var(--branco);
  border-color: var(--neutro-2);
  font-size: 12px;
  padding: 9px 18px;
}
.rgfiltros .recs-chip.is-ativa { background: var(--verde-escuro); border-color: var(--verde-escuro); color: var(--creme); }

.secao--rgrade .cat2__conta { margin: 0 0 20px; }

.rgrade {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.rgcard {
  display: flex;
  flex-direction: column;
  background: var(--branco);
  border: 1px solid var(--neutro-2);
  border-radius: 16px;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
.rgcard:hover { transform: translateY(-5px); box-shadow: 0 16px 30px rgba(var(--verde-escuro-rgb), 0.12); }
.rgcard[hidden] { display: none; }

.rgcard__foto { position: relative; display: block; }
.rgcard__foto img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.rgcard:hover .rgcard__foto img { transform: scale(1.05); }
.rgcard__tempo {
  position: absolute;
  left: 10px; top: 10px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(var(--creme-rgb), 0.94);
  color: var(--verde-escuro);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.rgcard__corpo { padding: 15px 16px 18px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.rgcard__tipo {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--verde);
}
.rgcard__nome {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--verde-escuro);
  /* nomes vêm do site e variam de tamanho: corta em 2 linhas */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rgcard__prod {
  margin-top: auto;
  font-size: 13px;
  line-height: 1.35;
  color: var(--tinta-fraca);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 1100px) { .rgrade { grid-template-columns: repeat(3, 1fr); } }
@media (prefers-reduced-motion: reduce) { .rgcard, .rgcard__foto img { transition: none; } }

/* Hub de produtos (índice das 16 categorias) + grade de categoria + placeholder
   de foto (03/09). 152 produtos, 123 com packshot casado dos mockups; os 29 sem
   foto mostram um selo Cepêra neutro em vez de buraco. */

/* ---- placeholder quando não há foto ---- */
.pcard__sem, .prod__sem {
  display: grid;
  place-items: center;
  width: 100%; height: 100%;
  font-family: var(--fonte-titulo);
  color: rgba(var(--verde-escuro-rgb), 0.22);
  letter-spacing: 0.02em;
}
.pcard__sem { font-size: 22px; }
.prod__sem { font-size: 54px; }

/* ---- hub: cartões de categoria ---- */
.secao--hub { background: var(--neutro); padding: 60px 0 84px; }
.hubgrade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.hubcard {
  display: grid;
  grid-template-columns: 116px 1fr;
  background: var(--branco);
  border: 1px solid var(--neutro-2);
  border-radius: 16px;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
.hubcard:hover { transform: translateY(-5px); box-shadow: 0 16px 30px rgba(var(--verde-escuro-rgb), 0.12); }
.hubcard__foto { display: grid; place-items: center; background: #fff; padding: 12px; }
.hubcard__foto img { max-height: 120px; max-width: 90%; object-fit: contain; }
.hubcard__corpo { padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.hubcard__nome { font-size: 18px; font-weight: 700; color: var(--verde-escuro); line-height: 1.15; }
.hubcard__n {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--verde);
}
.hubcard__lead {
  margin-top: 6px; font-size: 13px; line-height: 1.4; color: var(--tinta-fraca);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hubcard__ir {
  margin-top: 10px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--verde);
  opacity: 0; transform: translateY(4px); transition: opacity .25s ease, transform .25s ease;
}
.hubcard:hover .hubcard__ir { opacity: 1; transform: none; }

/* ---- grade de produtos numa categoria (auto-fit para categorias grandes) ---- */
.pgrade--auto { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.secao--rgrade .pgrade { margin-top: 4px; }

@media (max-width: 1100px) { .hubgrade { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) { .hubcard, .hubcard__ir { transition: none; } }

/* categoria homogênea (Pimentas, Mamma D'oro): sem faceta útil, só busca no
   topo e grade em largura cheia. Um filtro de opção única não filtra nada. */
.cat2--simples .cat2__grade { grid-template-columns: 1fr; }
.busca--topo { flex: 0 0 300px; }
.busca--topo input {
  width: 100%;
  padding: 12px 14px 12px 40px;
  border: 1.5px solid var(--neutro-2);
  border-radius: 999px;
  background: var(--branco);
  font-family: var(--fonte-texto);
  font-size: 14px;
  color: var(--verde-escuro);
}
.busca--topo input:focus { outline: none; border-color: var(--verde); }

/* Página institucional única (03/09, 2ª versão — mais criativa, cara da home).
   Quatro seções numa página: Quem somos, História (timeline horizontal),
   Exportação (continentes + bandeiras) e Segurança (três pilares). */

/* =================== QUEM SOMOS (estilo sustentabilidade) =================== */
.secao--mvv { position: relative; background: var(--creme); padding: 96px 0 88px; overflow: hidden; }

/* título empilhado torto com sombra dura, como "COMPROMISSO COM UM FUTURO MELHOR" */
.mvv__pilha { position: relative; margin-bottom: 54px; }
.mvv__display { margin: 0; display: flex; flex-direction: column; }
.mvv__linha {
  font-family: var(--fonte-titulo);
  font-size: clamp(40px, 7vw, 104px);
  line-height: 0.86;
  color: var(--verde-escuro);
  text-shadow: 3px 3px 0 var(--limao-55), 6px 6px 0 var(--limao-55), 9px 9px 0 rgba(var(--verde-escuro-rgb), 0.10);
}
.mvv__linha--1 { padding-left: 4%; }
.mvv__linha--2 { padding-left: 22%; color: var(--verde); }
.mvv__linha--3 { padding-left: 10%; }
.mvv__ponto { color: var(--laranja); }
.mvv__seta {
  position: absolute;
  right: 4%;
  top: -6%;
  width: clamp(70px, 8vw, 120px);
  height: clamp(70px, 8vw, 120px);
  color: var(--laranja);
  opacity: 0.9;
}

/* ---- mosaico: textos + fotos, no ritmo do mosaico do Instagram ----
   4 colunas de tiles quadrados; os blocos de texto e o destaque ocupam 2x2.
   grid-auto-flow: dense fecha os buracos com os tiles pequenos de foto. */
.mvvm {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
/* todos os tiles são quadrados (mesma altura de box, como no mosaico do IG);
   o destaque é um quadrado 2x2 e os pequenos 1x1. */
.mvvm__cel {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 1;
}
.mvvm__cel--g2 { grid-column: span 2; grid-row: span 2; }

/* tiles só de foto */
.mvvm__cel--foto { background: rgba(var(--verde-escuro-rgb), 0.06); }
.mvvm__cel--foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  /* um pouco maior que o tile: sobra curso para o parallax deslocar sem cortar */
  transform: scale(1.12);
  will-change: transform;
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}
.mvvm__cel--foto:hover img { transform: scale(1.16); }
/* moldura: foto com produto nas pontas (embalagens) NÃO pode ser cortada.
   contain mostra a imagem inteira; o parallax fica só na vertical, dentro das
   faixas de respiro, então as embalagens laterais nunca somem. */
.mvvm__cel--frame { background: var(--branco); }
.mvvm__cel--frame img { object-fit: contain; transform: none; }
.mvvm__cel--frame:hover img { transform: none; }

/* tiles de texto (Missão / Visão / Valores) */
.mvvm__cel--txt {
  display: flex;
  flex-direction: column;
  padding: 26px;
  background: #FFFDF4;
  border: 1px solid rgba(var(--verde-escuro-rgb), 0.08);
  box-shadow: 8px 10px 0 rgba(var(--verde-escuro-rgb), 0.10);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.mvvm__cel--txt:hover { transform: translateY(-6px) rotate(-1deg); }
.mvvm__cel--verde { background: var(--verde-inst); color: var(--creme); }

.mvv__icone {
  width: 36px; height: 36px;
  fill: none; stroke: var(--verde); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
  margin-bottom: 14px;
}
.mvvm__cel--verde .mvv__icone { stroke: var(--limao); }
.mvv__rot { display: block; font-family: var(--fonte-texto); font-weight: 800; font-size: 21px; letter-spacing: -0.01em; color: var(--verde-escuro); margin-bottom: 10px; }
.mvvm__cel--verde .mvv__rot { color: var(--creme); }
.mvv__texto { margin: 0; font-size: 14px; line-height: 1.5; color: var(--tinta); }
.mvvm__cel--verde .mvv__texto { color: rgba(var(--creme-rgb), 0.9); }

/* =================== HISTÓRIA: timeline HORIZONTAL =================== */
.secao--tl { position: relative; background: var(--neutro); padding: 80px 0 90px; overflow: hidden; }
.secao--tl .cabeca-linha { align-items: flex-end; }
/* título com número (1947): a OverHeat não tem algarismos e o "1947" caía na
   serifada de fallback, destoando do resto. Fonte de texto no título inteiro,
   como manda a regra da casa para título com número. */
.secao--tl .secao__titulo {
  font-family: var(--fonte-texto);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}
.tl2__setas { display: flex; gap: 10px; }
.tl2__seta {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border: 1.5px solid rgba(var(--verde-escuro-rgb), 0.2);
  border-radius: 999px;
  background: var(--branco);
  color: var(--verde-escuro);
  font-size: 18px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.tl2__seta:hover { background: var(--verde-escuro); color: var(--creme); }
.tl2__seta[disabled] { opacity: .3; pointer-events: none; }

/* trilho que rola na horizontal (arrasta/roda/setas) */
.tl2 {
  position: relative;
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 40px max(24px, calc((100vw - var(--faixa)) / 2 + 24px)) 20px;
  margin-top: 18px;
  scrollbar-width: none;
  scroll-behavior: smooth;
  cursor: grab;
}
.tl2::-webkit-scrollbar { display: none; }
.tl2.is-dragging { cursor: grabbing; scroll-behavior: auto; }
/* o fio que conecta os anos, atrás dos nós */
.tl2__fio {
  position: absolute;
  left: 0; right: 0;
  top: 92px;
  height: 3px;
  background: repeating-linear-gradient(90deg, rgba(var(--verde-escuro-rgb),0.2) 0 8px, transparent 8px 16px);
}
.tl2c {
  position: relative;
  flex: 0 0 300px;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  padding-top: 66px;
}
.tl2c__ano {
  position: absolute;
  top: 0; left: 0;
  font-family: var(--fonte-texto);
  font-weight: 800;
  font-size: 34px;
  letter-spacing: -0.02em;
  color: var(--verde);
}
.tl2c__no {
  position: absolute;
  top: 84px; left: 4px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--limao);
  border: 3px solid var(--neutro);
  box-shadow: 0 0 0 1px rgba(var(--verde-escuro-rgb), 0.2);
  z-index: 1;
}
.tl2c__caixa {
  /* flex:1 + os cards esticando (align-items:stretch do trilho) dá a MESMA
     altura de caixa a todos, independente do tamanho do texto. */
  flex: 1;
  background: var(--branco);
  border: 1px solid var(--neutro-2);
  border-radius: 18px;
  padding: 22px 22px 24px;
  box-shadow: 6px 8px 0 rgba(var(--verde-escuro-rgb), 0.08);
}
/* faixa de mídia: sangra até as bordas da caixa e arredonda o topo */
.tl2c__media {
  margin: -22px -22px 16px;
  height: 128px;
  border-radius: 18px 18px 0 0;
  border-bottom: 1px solid var(--neutro-2);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.tl2c__media img { width: 100%; height: 100%; }
/* logo antigo: contido, sobre creme, com respiro */
.tl2c__media--logo { background: var(--creme); }
.tl2c__media--logo img { object-fit: contain; padding: 20px 22px; }
/* packshot (linha de produtos): contido, sobre branco */
.tl2c__media--pack { background: var(--branco); }
.tl2c__media--pack img { object-fit: contain; padding: 14px 16px; }
/* foto real: preenche, fundo escuro */
.tl2c__media--foto { background: var(--verde-escuro); }
.tl2c__media--foto img { object-fit: cover; }
/* era sem imagem: o ano gigante tom-sobre-tom no lugar */
.tl2c__media--vazio { background: var(--creme); }
.tl2c__media--vazio span {
  font-family: var(--fonte-texto);
  font-weight: 800;
  font-size: 44px;
  letter-spacing: -0.02em;
  color: rgba(var(--verde-escuro-rgb), 0.12);
}
.tl2c__titulo { display: block; font-size: 18px; font-weight: 700; color: var(--verde-escuro); margin-bottom: 8px; }
.tl2c__texto { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--tinta); }

/* =================== EXPORTAÇÃO: continentes + bandeiras =================== */
.secao--exp { position: relative; background: var(--verde-inst); color: var(--creme); overflow: hidden; padding: 0; }
.expeco { position: absolute; inset: 0; display: flex; align-items: center; overflow: hidden; pointer-events: none; }
.expeco span {
  font-family: var(--fonte-titulo);
  font-size: clamp(90px, 15vw, 240px);
  white-space: nowrap;
  color: rgba(var(--creme-rgb), 0.06);
  will-change: transform;
}
.exp2 { position: relative; z-index: 1; }
.exp2__topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; margin-bottom: 40px; }
.exp2__topo .rotulo { color: var(--limao); }
.exp2__topo .secao__titulo { color: var(--creme); }
.exp2__texto { margin: 16px 0 0; font-size: 17px; line-height: 1.55; color: rgba(var(--creme-rgb), 0.88); max-width: 42ch; }
.exp2__placar { display: flex; align-items: baseline; gap: 10px; }
.exp2__num { font-family: var(--fonte-texto); font-weight: 800; font-size: clamp(44px, 6vw, 72px); color: var(--limao); line-height: 1; }
.exp2__rot { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(var(--creme-rgb), 0.7); }
.exp2__sep { width: 1px; height: 44px; background: rgba(var(--creme-rgb), 0.25); margin: 0 8px; align-self: center; }

.exp2__mapa { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.expc {
  background: rgba(var(--creme-rgb), 0.06);
  border: 1px solid rgba(var(--creme-rgb), 0.14);
  border-radius: 16px;
  padding: 20px 20px 22px;
}
.expc__cabeca { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid rgba(var(--creme-rgb), 0.14); }
.expc__nome { font-family: var(--fonte-texto); font-weight: 800; font-size: 20px; letter-spacing: -0.01em; color: var(--creme); }
.expc__n { font-size: 13px; font-weight: 700; color: var(--limao); background: rgba(var(--limao-rgb, 161,211,2), 0.15); }
.expc__n { color: var(--limao); font-weight: 800; font-size: 15px; }
.expc__paises { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.expc__paises li { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; }
.expc__flag { font-size: 20px; line-height: 1; }
.exp2__pe { margin-top: 34px; }

/* =================== SEGURANÇA: três pilares =================== */
.secao--seg { background: #FFFDF4; padding: 88px 0; }
.seg2 { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.seg2__titulo {
  font-family: var(--fonte-texto);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.05;
  color: var(--verde-escuro);
  margin: 12px 0 18px;
}
.seg2__lead { margin: 0 0 26px; font-size: 17px; line-height: 1.6; color: var(--tinta); max-width: 46ch; }
.seg2__pdf { display: inline-flex; align-items: center; gap: 10px; }
.seg2 .btn--claro { background: var(--verde-escuro); color: var(--creme); }
.seg2 .btn--claro:hover { background: var(--verde); }
.seg2__pdf svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.seg2__pilares { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.seg2__pilares li {
  display: grid;
  grid-template-columns: 48px 1fr;
  grid-template-rows: auto auto;
  column-gap: 16px;
  padding: 22px 24px;
  border-radius: 16px;
  background: var(--neutro);
  border: 1px solid var(--neutro-2);
}
.seg2__i { grid-row: 1 / 3; align-self: center; font-family: var(--fonte-titulo); font-size: 26px; color: var(--limao); -webkit-text-stroke: 1px var(--verde); }
.seg2__pilares b { font-size: 18px; color: var(--verde-escuro); }
.seg2__pilares span:last-child { font-size: 14px; line-height: 1.45; color: var(--tinta-fraca); }

/* ---- palavra gigante tom-sobre-tom (Quem somos / História) ---- */
.secao--mvv .faixa, .secao--tl .faixa { position: relative; z-index: 1; }
.inst-eco { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; overflow: hidden; pointer-events: none; z-index: 0; }
.inst-eco span {
  font-family: var(--fonte-titulo);
  font-size: clamp(90px, 14vw, 220px);
  white-space: nowrap;
  color: var(--limao-55);
  opacity: 0.24;
  margin-left: -4%;
  will-change: transform;
}
.inst-eco--claro span { color: rgba(var(--verde-rgb), 0.09); opacity: 1; }

/* ---- entrada do mosaico Quem somos (tiles sobem em cascata pelo --i) ---- */
.mvvm__cel { transition: opacity .55s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
[data-mvv-cena].tem-cena .mvvm__cel { opacity: 0; transform: translateY(28px); }
[data-mvv-cena].tem-cena.is-vivo .mvvm__cel { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 65ms); }
/* depois de assentar, zera o delay p/ o hover responder na hora */
[data-mvv-cena].tem-cena.is-assentado .mvvm__cel { transition-delay: 0ms; }

@media (max-width: 860px) {
  .mvvm { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .seg2 { grid-template-columns: 1fr; }
  .tl2c { flex-basis: 260px; }
}
@media (max-width: 520px) {
  .mvvm { grid-template-columns: 1fr; }
  .mvvm__cel--g2 { grid-column: span 1; }
}
@media (prefers-reduced-motion: reduce) {
  .mvvm__cel, .tl2 { transition: none; scroll-behavior: auto; }
  [data-mvv-cena].tem-cena .mvvm__cel { opacity: 1; transform: none; }
}

/* Exportação: split foto + painel verde com recorte (03/09) */
.expsplit {
  display: grid;
  grid-template-columns: 1fr minmax(440px, 48%);
  height: clamp(280px, 34vw, 380px);
  margin-bottom: 46px;
}
/* variante com os países dentro do painel: deixa a altura acompanhar o conteúdo */
.expsplit--cheio { height: auto; min-height: 0; margin-bottom: 0; }
.expsplit__foto { position: relative; overflow: hidden; }
.expsplit__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.expsplit__painel {
  position: relative;
  display: flex;
  align-items: center;
  padding: 46px 0 46px 18px;
}
.expsplit__corte {
  position: absolute;
  right: 100%;
  top: 0;
  height: 100%;
  width: calc(clamp(120px, 10vw, 220px) + 1px);
  margin-right: -1px;
  fill: var(--verde-inst);
  pointer-events: none;
}
.expsplit__texto { position: relative; max-width: 30rem; }
.expsplit__texto .secao__titulo {
  font-family: var(--fonte-titulo);
  color: var(--creme);
  font-size: clamp(26px, 2.8vw, 40px);
  line-height: 0.94;
  margin: 6px 0 0;
}
.expsplit__texto .rotulo { color: var(--limao); }
.expsplit__texto .exp2__texto { color: rgba(var(--creme-rgb), 0.9); margin: 12px 0 16px; font-size: 15px; }
.expsplit__texto .exp2__placar { margin-bottom: 18px; }
/* acordeão de continentes dentro do painel (03/09): clica no continente e
   revela os países. Fecha a lista compacta sem estourar a altura do bloco. */
.expac { margin-top: 6px; max-width: 30rem; }
.expac__item { border-top: 1px solid rgba(var(--creme-rgb), 0.16); }
.expac__item:last-child { border-bottom: 1px solid rgba(var(--creme-rgb), 0.16); }
.expac__cab {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 13px 2px; background: none; border: 0; cursor: pointer;
  font-family: var(--fonte-texto); color: var(--creme); text-align: left;
}
.expac__nome { flex: 1; font-weight: 800; font-size: 16px; letter-spacing: -0.01em; }
.expac__n {
  font-weight: 800; font-size: 13px; color: var(--limao);
  min-width: 26px; height: 22px; padding: 0 7px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(var(--limao-rgb, 161,211,2), 0.14);
}
.expac__seta { width: 18px; height: 18px; fill: none; stroke: rgba(var(--creme-rgb), 0.75); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s ease; }
.expac__item.is-aberto .expac__seta { transform: rotate(180deg); }
.expac__item.is-aberto .expac__nome { color: var(--limao); }
/* animação de altura pelo grid-template-rows (0fr -> 1fr) */
.expac__corpo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .34s cubic-bezier(.4,0,.2,1); }
.expac__item.is-aberto .expac__corpo { grid-template-rows: 1fr; }
.expac__paises {
  overflow: hidden; list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px 8px;
}
.expac__item.is-aberto .expac__paises { padding: 0 0 15px; }
.expac__paises li {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px 5px 8px; border-radius: 999px;
  background: rgba(var(--creme-rgb), 0.08);
  border: 1px solid rgba(var(--creme-rgb), 0.16);
  font-size: 12.5px; font-weight: 600;
  color: rgba(var(--creme-rgb), 0.92);
}
.expac__pf { font-size: 15px; line-height: 1; }
@media (prefers-reduced-motion: reduce) { .expac__corpo { transition: none; } }
@media (max-width: 860px) { .expsplit, .expsplit--cheio { grid-template-columns: 1fr; height: auto; } .expsplit__corte { display: none; } }

/* Onde encontrar: localizador simulado (Estado -> Cidade -> lojas).
   Dados em dados/lojas.json (fictícios, protótipo). Motor: bindOndeEncontrar. */
.oe { background: var(--neutro); padding: 64px 0 84px; }

.oe__topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.oe__selects { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; flex: 1 1 460px; }
.oe__campo { display: flex; flex-direction: column; gap: 8px; }
.oe__rot {
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--verde);
}
.oe__select {
  appearance: none;
  font-family: var(--fonte-texto);
  font-size: 16px;
  color: var(--verde-escuro);
  background: var(--branco);
  border: 1.5px solid rgba(var(--verde-escuro-rgb), 0.18);
  border-radius: 12px;
  padding: 14px 40px 14px 16px;
  cursor: pointer;
  /* seta */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23004A00' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.oe__select:focus-visible { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px rgba(var(--limao-rgb, 161,211,2), 0.35); }
.oe__select:disabled { opacity: .55; cursor: not-allowed; background-color: var(--neutro-2); }

.oe__online { display: flex; align-items: center; gap: 14px; }
.oe__online-txt { margin: 0; font-size: 15px; font-weight: 600; color: var(--tinta); }

/* cena de estado (hint / contagem) */
.oe__estado-cena { margin: 34px 0 18px; }
.oe__hint, .oe__conta { display: flex; align-items: center; gap: 10px; margin: 0; }
.oe__hint { font-size: 16px; color: var(--tinta-fraca, #6b6b60); }
.oe__hint svg, .loja__end svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.oe__conta { font-size: 15px; font-weight: 700; color: var(--verde-escuro); }
.oe__conta b { color: var(--verde); }

/* lista de lojas */
.oe__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.loja {
  background: var(--branco);
  border: 1px solid var(--neutro-2);
  border-radius: 16px;
  padding: 20px 22px 22px;
  box-shadow: 4px 6px 0 rgba(var(--verde-escuro-rgb), 0.06);
  transition: transform .25s ease, box-shadow .25s ease;
}
.loja:hover { transform: translateY(-4px); box-shadow: 6px 10px 0 rgba(var(--verde-escuro-rgb), 0.1); }
.loja__cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.loja__rede { font-family: var(--fonte-texto); font-weight: 800; font-size: 18px; color: var(--verde-escuro); }
.loja__tipo {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--verde); background: rgba(var(--limao-rgb, 161,211,2), 0.18);
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.loja__nome { margin: 0 0 8px; font-size: 15.5px; font-weight: 600; color: var(--tinta); }
.loja__end { margin: 0 0 10px; font-size: 14px; line-height: 1.45; color: var(--tinta-fraca, #6b6b60); display: flex; gap: 8px; align-items: flex-start; }
.loja__end svg { margin-top: 1px; color: var(--laranja); }
.loja__cidade { margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(var(--verde-escuro-rgb), 0.5); }

.oe__aviso { margin: 26px 0 0; font-size: 12.5px; color: rgba(var(--verde-escuro-rgb), 0.5); }

@media (max-width: 720px) {
  .oe__selects { grid-template-columns: 1fr; }
  .oe__topo { flex-direction: column; align-items: stretch; }
  .oe__online { justify-content: space-between; }
}

/* mapa Leaflet (03/09) */
.oe__map {
  height: 420px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--neutro-2);
  margin: 8px 0 26px;
  background: var(--neutro);
  z-index: 0;
}
.oe__acoes { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
/* pino da marca */
.oe-pin span {
  display: block; width: 20px; height: 20px;
  border-radius: 50% 50% 50% 0;
  background: var(--verde-escuro);
  border: 2px solid var(--limao);
  transform: rotate(-45deg);
  box-shadow: 0 3px 6px rgba(0,0,0,.3);
}
.oe-pin.is-off { opacity: .35; filter: grayscale(1); }
.leaflet-popup-content { font-family: var(--fonte-texto); font-size: 13px; }

/* Página de Sustentabilidade (03/09): intro com números + grade dos 9 artigos.
   (A página reusa a capa padrão das internas; aqui só o conteúdo próprio.) */

/* ---- intro: texto + três números ---- */
.secao--sintro { position: relative; background: var(--creme); padding: 80px 0 70px; overflow: hidden; }
.secao--sintro .faixa { position: relative; z-index: 1; }
/* palavras gigantes tom-sobre-tom derivando com o scroll (grafismo da home) */
.sust-eco2 {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 4vw;
  overflow: hidden; pointer-events: none; z-index: 0;
}
.sust-eco2 span {
  font-family: var(--fonte-titulo);
  font-size: clamp(90px, 14vw, 220px);
  line-height: 0.9;
  white-space: nowrap;
  color: var(--limao-55);
  opacity: 0.30;
  will-change: transform;
}
.sust-eco2 span:last-child { align-self: flex-end; margin-right: -4%; }
.sust-eco2 span:first-child { margin-left: -4%; }
.sintro { max-width: 60ch; }
.sintro__texto {
  margin: 18px 0 0;
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--tinta);
}
.sintro__nums {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 44px;
  padding-top: 34px;
  border-top: 1px solid rgba(var(--verde-escuro-rgb), 0.14);
}
.sintro__nums div { display: flex; flex-direction: column; gap: 6px; }
.sintro__nums b {
  font-family: var(--fonte-texto);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1;
  color: var(--verde);
}
.sintro__nums span {
  font-size: 14px;
  line-height: 1.4;
  color: rgba(var(--verde-escuro-rgb), 0.7);
}

/* ---- grade dos 9 artigos ---- */
.secao--sart { background: var(--neutro); padding: 76px 0 88px; }
.secao--sart .cabeca-linha { margin-bottom: 30px; }
.sart {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.sartc {
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  background: var(--branco);
  border: 1px solid var(--neutro-2);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
.sartc__foto { display: block; background: var(--verde-inst); }
.sartc__foto img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.sartc:hover .sartc__foto img { transform: scale(1.04); }
.sartc__corpo { display: flex; flex-direction: column; padding: 22px 22px 22px; }
.sartc:hover { transform: translateY(-6px) rotate(-1.2deg); box-shadow: 0 16px 30px rgba(var(--verde-escuro-rgb), 0.12); }

/* cena de entrada: cards caem tortos e assentam em cascata (efeito da home) */
.sart[data-cena]:not(.is-vivo) .sartc { opacity: 0; transform: translateY(46px) rotate(-3deg); }
.sart[data-cena] .sartc { transition: opacity .5s ease, transform .7s cubic-bezier(.22,1.1,.36,1), box-shadow .3s ease; }
.sart[data-cena] .sartc:nth-child(2) { transition-delay: .08s; }
.sart[data-cena] .sartc:nth-child(3) { transition-delay: .16s; }
.sart[data-cena] .sartc:nth-child(4) { transition-delay: .06s; }
.sart[data-cena] .sartc:nth-child(5) { transition-delay: .14s; }
.sart[data-cena] .sartc:nth-child(6) { transition-delay: .22s; }
.sart[data-cena] .sartc:nth-child(7) { transition-delay: .12s; }
.sart[data-cena] .sartc:nth-child(8) { transition-delay: .20s; }
.sart[data-cena] .sartc:nth-child(9) { transition-delay: .28s; }
.sartc__chapeu {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--verde);
}
.sartc__titulo {
  margin-top: 8px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--verde-escuro);
}
.sartc__resumo {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--tinta-fraca);
}
.sartc__ir {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--neutro-2);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--verde);
}
.sartc:hover .sartc__ir { color: var(--laranja); }

@media (max-width: 980px) { .sart { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .sart, .sintro__nums { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .sartc { transition: none; } }

/* títulos das seções desta página na fonte de TEXTO: "O QUE JÁ ESTAMOS
   FAZENDO" tem Á e a OverHeat não tem acento, quebrando a palavra. */
.secao--sintro .secao__titulo,
.secao--sart .secao__titulo {
  font-family: var(--fonte-texto);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  /* menor que o título display global: em fonte de texto o mesmo corpo pesa mais */
  font-size: clamp(26px, 3vw, 40px);
}

/* Contato: canais (DAC, Comercial, WhatsApp, redes) + formulário.
   Sem backend: o submit só revela a confirmação (bindContato). */
.ct { background: var(--neutro); padding: 64px 0 88px; }
.ct__grade { display: grid; grid-template-columns: minmax(0, 360px) 1fr; gap: 56px; align-items: start; }

/* ---- canais ---- */
.ct__rotulo { color: var(--verde); }
.ct__h2 {
  font-family: var(--fonte-texto);
  font-weight: 800;
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--verde-escuro);
  margin: 0 0 26px;
}
.ct__deps { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.ct__dep { padding-left: 16px; border-left: 3px solid var(--limao); }
.ct__dep b { display: block; font-size: 17px; color: var(--verde-escuro); margin-bottom: 3px; }
.ct__dep span { font-size: 14.5px; line-height: 1.5; color: var(--tinta); }

.ct__wpp {
  display: flex; align-items: center; gap: 14px;
  background: var(--limao); color: var(--verde-escuro);
  border-radius: 16px; padding: 16px 20px; margin-bottom: 26px;
  transition: transform .25s ease;
}
.ct__wpp:hover { transform: translateY(-3px); }
.ct__wpp svg { width: 34px; height: 34px; flex: none; }
.ct__wpp span { display: flex; flex-direction: column; font-size: 14px; line-height: 1.3; }
.ct__wpp b { font-size: 17px; }

.ct__redes { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.ct__redes-rot { width: 100%; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(var(--verde-escuro-rgb), 0.5); margin-bottom: 2px; }
.ct__redes a { font-size: 14.5px; font-weight: 600; color: var(--verde-escuro); }
.ct__redes a:hover { color: var(--verde); }

/* ---- formulário ---- */
.ct__form-wrap {
  background: var(--branco);
  border: 1px solid var(--neutro-2);
  border-radius: 22px;
  padding: 34px 34px 30px;
  box-shadow: 8px 12px 0 rgba(var(--verde-escuro-rgb), 0.08);
}
.ct__linha { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ct__campo { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.ct__label { font-size: 13px; font-weight: 700; color: var(--verde-escuro); }
.ct__label i { color: var(--laranja); font-style: normal; }
.ct__campo input, .ct__campo select, .ct__campo textarea {
  font-family: var(--fonte-texto);
  font-size: 15px;
  color: var(--verde-escuro);
  background: var(--neutro);
  border: 1.5px solid rgba(var(--verde-escuro-rgb), 0.14);
  border-radius: 11px;
  padding: 12px 14px;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.ct__campo textarea { resize: vertical; min-height: 120px; }
.ct__campo select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23004A00' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 15px; padding-right: 38px; }
.ct__campo input:focus, .ct__campo select:focus, .ct__campo textarea:focus {
  outline: none; border-color: var(--verde); background: var(--branco);
  box-shadow: 0 0 0 3px rgba(var(--limao-rgb, 161,211,2), 0.3);
}
.ct__campo input:user-invalid, .ct__campo select:user-invalid, .ct__campo textarea:user-invalid { border-color: var(--vermelho, #EF3F0F); }

.ct__pe { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 6px; flex-wrap: wrap; }
.ct__obrig { font-size: 12.5px; color: var(--tinta); }
.ct__obrig i { color: var(--laranja); font-style: normal; }
.ct__ok {
  margin: 18px 0 0; padding: 14px 16px;
  background: rgba(var(--limao-rgb, 161,211,2), 0.2);
  border-radius: 12px; font-size: 15px; font-weight: 600; color: var(--verde-escuro);
}

@media (max-width: 820px) {
  .ct__grade { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 520px) {
  .ct__linha { grid-template-columns: 1fr; }
}

/* Downloads: documentos reais agrupados por tema. Dados em dados/downloads.json. */
.dl { background: var(--neutro); padding: 64px 0 88px; }
.dl__grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 34px 40px; align-items: start; }

.dl-grupo__titulo {
  font-family: var(--fonte-texto);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--verde-escuro);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(var(--verde-escuro-rgb), 0.12);
}
.dl-grupo__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.dl-item {
  display: flex; align-items: center; gap: 14px;
  background: var(--branco);
  border: 1px solid var(--neutro-2);
  border-radius: 12px;
  padding: 12px 14px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.dl-item:hover { transform: translateX(3px); border-color: rgba(var(--verde-escuro-rgb), 0.25); box-shadow: 3px 5px 0 rgba(var(--verde-escuro-rgb), 0.07); }

.dl-item__ico {
  flex: none; width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 10px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.04em;
  color: var(--branco);
}
.dl-item__ico--PDF { background: var(--vermelho, #EF3F0F); }
.dl-item__ico--ZIP { background: var(--verde); }

.dl-item__nome { flex: 1; font-size: 15px; font-weight: 600; color: var(--verde-escuro); line-height: 1.3; }
.dl-item__seta { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--verde); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.dl-item:hover .dl-item__seta { transform: translateY(2px); }

.dl__aviso { margin: 34px 0 0; font-size: 12.5px; color: rgba(var(--verde-escuro-rgb), 0.5); }

/* Página Sustentabilidade (prefixo .sustpg para NÃO colidir com a seção .sust
   da home). Intro com números + grade dos 9 artigos reais. */
/* faixa clara (creme), NÃO verde: assim não encosta/conflita com o verde do banner */
.sustpg-intro { background: var(--creme); color: var(--verde-escuro); padding: 60px 0; }
.sustpg-intro__grade { display: grid; grid-template-columns: 1fr minmax(0, 380px); gap: 48px; align-items: center; }
.sustpg-intro__rot { color: var(--verde); }
.sustpg-intro__texto { margin: 0; font-size: clamp(17px, 2vw, 20px); line-height: 1.6; color: var(--tinta); max-width: 52ch; }
.sustpg-num { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.sustpg-num li { display: flex; align-items: baseline; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid rgba(var(--verde-escuro-rgb), 0.15); }
.sustpg-num li:last-child { border-bottom: 0; padding-bottom: 0; }
.sustpg-num b { font-family: var(--fonte-texto); font-weight: 800; font-size: clamp(34px, 4vw, 48px); line-height: 1; color: var(--verde); flex: none; min-width: 2.6em; }
.sustpg-num span { font-size: 14.5px; line-height: 1.4; color: var(--tinta); }

.sustpg { position: relative; overflow: hidden; background: var(--neutro); padding: 70px 0 88px; }
.sustpg > .faixa { position: relative; z-index: 1; }
.sustpg .cabeca-linha { margin-bottom: 30px; }
.sustpg__grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }

/* palavra gigante tom-sobre-tom no fundo cinza (mesmo grafismo da home) */
.sustpg__eco {
  position: absolute; inset: 0; z-index: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 0.02em;
  overflow: hidden; pointer-events: none;
}
.sustpg__eco span {
  font-family: var(--fonte-titulo);
  font-size: clamp(90px, 15vw, 240px);
  line-height: 0.86; white-space: nowrap;
  color: rgba(var(--verde-escuro-rgb), 0.055);
  will-change: transform;
}
.sustpg__eco span:nth-child(2) { align-self: flex-end; margin-right: -4%; }

.sustpg-card {
  display: flex; flex-direction: column;
  background: var(--branco);
  border: 1px solid var(--neutro-2);
  border-radius: 18px;
  padding: 24px 24px 22px;
  box-shadow: 6px 8px 0 rgba(var(--verde-escuro-rgb), 0.07);
  /* transição da CENA (jogados na mesa) + do hover */
  transition:
    transform .7s cubic-bezier(.26, 1.35, .42, 1),
    opacity .35s ease,
    box-shadow .45s ease;
  transition-delay: var(--d, 0s), var(--d, 0s), 0s;
}
.sustpg-card:hover { transform: translateY(-5px); box-shadow: 8px 12px 0 rgba(var(--verde-escuro-rgb), 0.11); }

/* ---- CENA: os cards caem girando e assentam, escalonados (mesmo efeito da home) ---- */
.sustpg:not(.is-vivo) .sustpg-card {
  opacity: 0;
  transform: translateY(-42vh) rotate(var(--voo, 18deg)) scale(1.05);
}
.sustpg.is-assentado .sustpg-card { transition-delay: 0s; }
.sustpg-card:nth-child(1) { --d: .28s; --voo: -22deg; }
.sustpg-card:nth-child(2) { --d: .37s; --voo: 20deg; }
.sustpg-card:nth-child(3) { --d: .46s; --voo: -16deg; }
.sustpg-card:nth-child(4) { --d: .55s; --voo: 24deg; }
.sustpg-card:nth-child(5) { --d: .64s; --voo: -20deg; }
.sustpg-card:nth-child(6) { --d: .73s; --voo: 18deg; }
.sustpg-card:nth-child(7) { --d: .82s; --voo: -24deg; }
.sustpg-card:nth-child(8) { --d: .91s; --voo: 16deg; }
.sustpg-card:nth-child(9) { --d: 1s; --voo: -18deg; }

@media (prefers-reduced-motion: reduce) {
  .sustpg-card, .sustpg-card:hover { transform: none !important; }
  .sustpg:not(.is-vivo) .sustpg-card { opacity: 1; }
  .sustpg__eco span { transform: none !important; }
}
.sustpg-card__tag {
  align-self: flex-start;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--verde); background: rgba(var(--limao-rgb, 161,211,2), 0.18);
  padding: 5px 11px; border-radius: 999px; margin-bottom: 14px;
}
.sustpg-card__titulo { font-family: var(--fonte-texto); font-weight: 800; font-size: 19px; letter-spacing: -0.01em; color: var(--verde-escuro); margin-bottom: 10px; line-height: 1.2; }
.sustpg-card__resumo { margin: 0 0 18px; font-size: 14.5px; line-height: 1.55; color: var(--tinta); }
.sustpg-card__link { margin-top: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: var(--verde); }
.sustpg-card__link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.sustpg-card:hover .sustpg-card__link svg { transform: translateX(4px); }

@media (max-width: 820px) {
  .sustpg-intro__grade { grid-template-columns: 1fr; gap: 32px; }
}

/* Página de matéria de sustentabilidade (coleção). Topo verde + coluna de leitura. */
.sart-topo { background: var(--verde-inst); color: var(--creme); padding: 46px 0 52px; }
.sart-topo .migalhas--claras { color: rgba(var(--creme-rgb), 0.65); margin-bottom: 18px; }
.sart-topo .migalhas--claras a:hover { color: var(--limao); }
.sart-topo .migalhas--claras b { color: var(--creme); }
.sart-topo__tag { color: var(--limao); margin: 0 0 12px; }
.sart-topo__titulo {
  font-family: var(--fonte-texto);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 46px);
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--creme);
  margin: 0 0 14px;
  max-width: 20ch;
}
.sart-topo__lead { margin: 0; font-size: clamp(16px, 1.8vw, 19px); line-height: 1.55; color: rgba(var(--creme-rgb), 0.9); max-width: 60ch; }

.sart { background: var(--neutro); padding: 56px 0 80px; }
.sart__wrap { display: flex; flex-direction: column; }
.sart__texto { max-width: 66ch; }
.sart__p { margin: 0 0 20px; font-size: 17.5px; line-height: 1.75; color: var(--tinta); }
.sart__p:first-child { font-size: 20px; line-height: 1.6; color: var(--verde-escuro); }
.sart__voltar { align-self: flex-start; margin-top: 22px; }