/* 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.
   No Elementor, cada token vira uma Global Variable (por isso um valor só:
   o que muda por tela muda na classe, dentro do breakpoint). */
:root {
  --cep-verde-escuro: #004A00;  /* "Ervas & Conservas" — dominante, texto, fundos */
  --cep-verde:        #008200;  /* "Frescor da Horta" — hover, tom-sobre-tom */
  --cep-verde-inst:   #008200;  /* fundo dos painéis: era #0B8140, a Cepêra pediu o Pantone 7483 C (02/10) */
  --cep-limao:        #A1D302;  /* "Toque de Limao" — destaque */
  --cep-limao-55:     #A1D302;  /* era o limão a 55% (#D2E67E); a Cepêra pediu o limão cheio, Pantone 374 C (02/10) */
  --cep-creme:        #FEF5A8;  /* "Creme da Receita" — fundo do site */
  --cep-creme-2:      #F4EDA0;  /* fundo alternativo (do design) */
  --cep-creme-3:      #F2E27A;
  --cep-paprica:      #FF9A35;  /* "Paprica Defumada" */
  --cep-laranja:      #EF3F0F;  /* "Molho Especial" — newsletter, selo */
  --cep-vinho:        #890011;  /* "Tomate Caseiro" */
  --cep-vinho-escuro: #590209;  /* "Pimenta Defumada" */
  /* linhas da home (Mais Sabor, UMAI e Collabs têm identidade própria) */
  --cep-amarelo:      #FFD21F;  /* amarelo do lettering da linha Mais Sabor */
  --cep-umai:         #8C7E52;  /* cáqui da linha UMAI (peças da marca UMAI) */
  /* quadros de dados (guia p.98): cores dos grafismos oficiais da Linha Cepêra */
  --cep-laranja-graf:  #E79017;  /* AF-Linha-Cepera-Grafismos Laranja-Escuro, fundo */
  --cep-laranja-forma: #F1BC57;  /* idem, a Forma */
  --cep-vinho-45:     #89001173;  /* lettering tom-sobre-tom da Mais Sabor */
  --cep-paprica-30:   #FF9A354D;  /* Collabs: nomes dos parceiros no banner laranja (revisão da Aléxia, 14/10) */
  --cep-laranja-35:   #EF3F0F59;  /* Collabs: a Forma em diagonal nos cartões dos parceiros */

  /* rodada 4 (03/10): paletas de cada linha, do brandbook (p.90, p.120, p.167) */
  --cep-limao-toque55: #CBE673; /* "Toque de Limão 55%" do brandbook (p.41, amostra medida; o texto da página repete o HEX do limão cheio): fundo do cabeçalho (revisão da Aléxia, 14/10) */
  --cep-limao-claro:  #C7EB67;  /* limão a ~60% sobre branco: fundo do header nos mockups do guia */
  --cep-cep-amarelo:  #FFEA80;  /* Linha Cepêra: amarelo claro */
  --cep-cep-pessego:  #FADFC6;  /* Linha Cepêra e Mais Sabor: pêssego */
  --cep-ms-laranja:   #FF662E;  /* Mais Sabor */
  --cep-ms-vinho:     #7D0028;  /* Mais Sabor */
  --cep-ms-vermelho:  #FF0000;  /* Mais Sabor */
  --cep-ms-amarelo:   #FFDE24;  /* Mais Sabor */
  --cep-ms-lima:      #CED30B;  /* Mais Sabor */
  --cep-pro-claro:    #E4FFC4;  /* Cepêra Profissional */
  --cep-pro-escuro:   #003619;  /* Cepêra Profissional */
  --cep-pro-claro-45: #E4FFC473; /* traço dos potes em contorno sobre o fundo escuro (brandbook p.173) */
  --cep-umai-claro:   #F1F0EA;  /* UMAI: fundo neutro (a UMAI não tem paleta no guia) */
  --cep-limao-22:     #A1D30238;
  --cep-limao-12:     #A1D3021F;
  --cep-limao-55a:    #A1D3028C;
  --cep-ms-laranja-16: #FF662E29;
  --cep-preto-12:     #0000001F;
  --cep-preto-06:     #0000000F;
  --cep-ms-laranja-10: #FF662E1A;
  --cep-verde-escuro-09: #004A0017;
  --cep-branco-quente-80: #FFFDF4CC;

  /* fontes: um nome de família, sem aspas nem fallback (o fallback fica no kit) */
  --cep-fonte-titulo: OverHeat;
  --cep-fonte-texto:  OutfitVar;

  --cep-faixa: 1360px;   /* largura maxima do conteudo */
  /* respiro lateral da faixa, por faixa de tela (as classes trocam no breakpoint) */
  --cep-gutter: 48px;
  --cep-gutter-tablet: 32px;
  --cep-gutter-celular: 20px;
  /* 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). O header
     responsivo do WordPress tem 81px no celular (93 no desktop): o do celular
     acompanha a mesma folga de 10px que o desktop usa. */
  --cep-topo-alt: 170px;   /* header de logo centralizado (02/10); medido a 1440 */
  --cep-topo-alt-celular: 71px;

  /* ---- 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. */
  --cep-branco: #FFFFFF;
  --cep-branco-quente: #FFFDF4;  /* fundo das categorias e dos cards (branco puro foge da paleta) */
  --cep-neutro: #F1F0EA;        /* fundo de área de catálogo */
  --cep-neutro-2: #E2E1D8;      /* bordas e divisores */
  --cep-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. */
  --cep-tinta: #3B3E37;
  --cep-tinta-fraca: #6C6F66;

  /* Tamanho ÚNICO do título de seção (o h2 .cep-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. */
  --cep-titulo-secao: clamp(32px, 4.3vw, 68px);

  /* transparências: cada cor com alfa é um token (#RRGGBBAA). No Elementor a
     Global Variable de cor não tem canal alfa, então rgba(var(--x), a) não serve. */
  --cep-preto: #000000;
  --cep-branco-quente-00: #FFFDF400;
  --cep-creme-08: #FEF5A814;
  --cep-creme-10: #FEF5A81A;
  --cep-creme-16: #FEF5A829;
  --cep-creme-22: #FEF5A838;
  --cep-creme-25: #FEF5A840;
  --cep-creme-28: #FEF5A847;
  --cep-creme-45: #FEF5A873;
  --cep-creme-50: #FEF5A880;
  --cep-creme-55: #FEF5A88C;
  --cep-creme-60: #FEF5A899;
  --cep-creme-62: #FEF5A89E;
  --cep-creme-70: #FEF5A8B3;
  --cep-creme-72: #FEF5A8B8;
  --cep-creme-75: #FEF5A8BF;
  --cep-creme-78: #FEF5A8C7;
  --cep-creme-80: #FEF5A8CC;
  --cep-creme-85: #FEF5A8D9;
  --cep-creme-86: #FEF5A8DB;
  --cep-creme-88: #FEF5A8E0;
  --cep-creme-90: #FEF5A8E6;
  --cep-creme-92: #FEF5A8EB;
  --cep-creme-94: #FEF5A8F0;
  --cep-limao-09: #A1D30217;
  --cep-limao-14: #A1D30224;
  --cep-limao-18: #A1D3022E;
  --cep-limao-20: #A1D30233;
  --cep-limao-30: #A1D3024D;
  --cep-limao-35: #A1D30259;
  --cep-limao-40: #A1D30266;
  --cep-preto-14: #00000024;
  --cep-preto-18: #0000002E;
  --cep-preto-20: #00000033;
  --cep-preto-28: #00000047;
  --cep-preto-42: #0000006B;
  --cep-verde-06: #0082000F;
  --cep-verde-09: #00820017;
  --cep-verde-10: #0082001A;
  --cep-verde-12: #0082001F;
  --cep-verde-50: #00820080;
  --cep-verde-escuro-00: #004A0000;
  --cep-verde-escuro-06: #004A000F;
  --cep-verde-escuro-07: #004A0012;
  --cep-verde-escuro-08: #004A0014;
  --cep-verde-escuro-10: #004A001A;
  --cep-verde-escuro-12: #004A001F;
  --cep-verde-escuro-14: #004A0024;
  --cep-verde-escuro-15: #004A0026;
  --cep-verde-escuro-16: #004A0029;
  --cep-verde-escuro-18: #004A002E;
  --cep-verde-escuro-20: #004A0033;
  --cep-verde-escuro-22: #004A0038;
  --cep-verde-escuro-25: #004A0040;
  --cep-verde-escuro-26: #004A0042;
  --cep-verde-escuro-28: #004A0047;
  --cep-verde-escuro-30: #004A004D;
  --cep-verde-escuro-34: #004A0057;
  --cep-verde-escuro-40: #004A0066;
  --cep-verde-escuro-42: #004A006B;
  --cep-verde-escuro-45: #004A0073;
  --cep-verde-escuro-50: #004A0080;
  --cep-verde-escuro-55: #004A008C;
  --cep-verde-escuro-60: #004A0099;
  --cep-verde-escuro-62: #004A009E;
  --cep-verde-escuro-65: #004A00A6;
  --cep-verde-escuro-68: #004A00AD;
  --cep-verde-escuro-70: #004A00B3;
  --cep-verde-escuro-78: #004A00C7;
  --cep-verde-escuro-80: #004A00CC;
  --cep-verde-escuro-82: #004A00D1;
  --cep-verde-escuro-85: #004A00D9;
  --cep-verde-escuro-90: #004A00E6;
  --cep-verde-escuro-92: #004A00EB;
}

/* Animações compartilhadas. A base do documento (box-sizing, fundo, fonte e
   cor do corpo, links, @font-face) não mora aqui: no WordPress ela vem das
   Configurações do site do Elementor, e no preview do css/preview.css. */
@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) {
  .cep-fita__pista { animation: none; }
}

/* Faixa central. Toda seção usa isto em vez de repetir max-width + padding. */
.cep-faixa {
  max-width: var(--cep-faixa);
  margin: 0 auto;
  padding: 0 var(--cep-gutter);
}
/* a faixa fica na frente do fundo decorativo da seção (palavras, grafismo, ingredientes) */
.cep-faixa--frente { position: relative; z-index: 1; }
.cep-faixa--relativa { position: relative; }

@media (max-width: 1024px) {
  .cep-faixa { padding: 0 var(--cep-gutter-tablet); }
}
@media (max-width: 767px) {
  .cep-faixa { padding: 0 var(--cep-gutter-celular); }
}

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

/* Linha curta acima do título. Sem caixa alta desde a revisão da Aléxia
   (14/10): a Cepêra não usa a Outfit em maiúscula. */
.cep-rotulo {
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--cep-verde);
}

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

/* Cabeça de seção em linha: título à esquerda, botão à direita.
   Toda cabeça-linha vive numa .cep-secao: a margem de baixo é a dela
   (as seções que pedem outra usam um modificador). */
.cep-cabeca-linha {
  margin-bottom: 36px;
  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] */
.cep-btn {
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 16px 34px;
  border-radius: 999px;
  transition: background .25s ease, color .25s ease;
}

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

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

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

/* sólido escuro com contorno claro, hover verde (PDF da política, em A Cepêra) */
.cep-btn--verde {
  border: 1.5px solid var(--cep-creme);
  background: var(--cep-verde-escuro);
  color: var(--cep-creme);
}
.cep-btn--verde:hover { background: var(--cep-verde); color: var(--cep-creme); }

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

/* Home — banner em dois atos, dirigido pelo scroll.
   Com JS, o palco fica preso na tela enquanto o scroll passa: o curso de
   scroll (o que antes era uma seção de 460vh) é criado pelo GSAP ScrollTrigger
   no js/hero.js, só no site. Sem JS (e no editor do Elementor) a seção tem a
   altura do conteúdo e os dois atos aparecem um embaixo do outro.

   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).

   Posição de repouso de cada elemento: classes geradas pelo build a partir de
   dados/hero.json (logo abaixo deste arquivo, no css/style.css).

   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. */
/* el-ok A326: o banner começa por baixo do header translúcido, como na arte aprovada; o header pinta por cima sobre o mesmo creme */
.cep-hero {
  position: relative;
  background: var(--cep-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(--cep-topo-alt));
}

.cep-hero__pin {
  /* o header 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(--cep-topo-alt);
  display: grid;
  place-items: center;
}

/* caixa da arte: mantém a proporção original do banner e centraliza na tela */
.cep-hero__palco {
  position: relative;
  width: min(100%, calc((100vh - var(--cep-topo-alt)) * 1670 / 950));
  container-type: inline-size;
}
/* no celular o header é mais baixo (71px): o banner acompanha */
@media (max-width: 767px) {
  /* el-ok A326: o banner começa por baixo do header translúcido, como na arte aprovada; o header pinta por cima sobre o mesmo creme */
  .cep-hero { margin-top: calc(-1 * var(--cep-topo-alt-celular)); }
  .cep-hero__pin { padding-top: var(--cep-topo-alt-celular); }
  .cep-hero__palco { width: min(100%, calc((100vh - var(--cep-topo-alt-celular)) * 1670 / 950)); }
}

/* sem JS: cada ato é um quadro com a proporção da arte */
.cep-hero__ato {
  position: relative;
  aspect-ratio: 1670/950;
  color: var(--cep-verde-escuro);
  --cep-hero-tinta: var(--cep-verde-escuro);
  --cep-hero-suave: var(--cep-verde-escuro-82);
  --cep-hero-fraco: var(--cep-verde-escuro-68);
  --cep-hero-fio: var(--cep-verde-escuro-22);
}

/* ---- com JS: palco preso na tela, os dois atos sobrepostos, um por vez ---- */
/* el-ok S240: o palco ocupa exatamente a janela; a arte é dimensionada pela altura da tela */
.has-js .cep-hero__pin {
  height: 100vh;
  overflow: hidden;
}
.has-js .cep-hero__palco { aspect-ratio: 1670/950; }
/* el-ok A325: os dois atos dividem o mesmo palco; o inativo fica com visibility hidden e não recebe o mouse */
.has-js .cep-hero__ato {
  position: absolute;
  inset: 0;
  /* `visibility` evita que o ato fora de cena receba clique/foco */
  visibility: hidden;
}
.has-js .cep-hero__ato.is-ativo { visibility: visible; }

/* paleta: os dois atos vivem no fundo claro */
.cep-hero__ato--ketchup  { --cep-hero-produto: var(--cep-laranja); }
.cep-hero__ato--maionese { --cep-hero-produto: var(--cep-verde); }

.cep-hero__palavra {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

/* 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. */
.cep-hero__prop {
  position: absolute;
  animation-name: cepFloat;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  pointer-events: none;
}

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

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

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

.cep-hero__copy {
  position: absolute;
  left: 11.5%;
  width: 17%;
  z-index: 5;
}
.cep-hero__kicker { font-size: 1.02cqw; font-weight: 500; color: var(--cep-hero-suave); margin: 0 0 0.7cqw; }
.cep-hero__h1 {
  font-family: var(--cep-fonte-titulo);
  font-weight: 400;
  font-size: 3.2cqw;
  line-height: 0.94;
  margin: 0 0 1.1cqw;
  color: var(--cep-hero-tinta);
}
/* o nome do produto no título: destaque inline (<em>), sem itálico */
.cep-hero__h1 em { font-style: normal; color: var(--cep-hero-produto); }
.cep-hero__texto { font-size: 1.02cqw; line-height: 1.5; color: var(--cep-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. */
.cep-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.9cqw;
  background: var(--cep-verde-escuro);
  color: var(--cep-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;
}
.cep-hero__cta:hover { background: var(--cep-hero-produto); color: var(--cep-creme); }
.cep-hero__seta { font-size: 1.15cqw; line-height: 1; }

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

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

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

/* ---- indicador de progresso do banner ---- */
.cep-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.01em;
  color: var(--cep-verde-escuro-62);
  z-index: 8;
}
/* o HUD vive no palco, fora dos atos: --cep-hero-produto não chega aqui */
.cep-hero__hud-num { color: var(--cep-verde-escuro-45); }
.cep-hero__hud-num b { color: var(--cep-verde-escuro); font-weight: 700; }
/* a trilha (::before) e o quanto já andou (::after) antecedem o nome do ato;
   o js/hero.js passa o progresso em --cep-progresso (0 a 1) */
.cep-hero__hud-rotulo {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 194px;
}
.cep-hero__hud-rotulo::before {
  content: "";
  flex: none;
  width: 118px;
  height: 2px;
  margin-right: 14px;
  background: var(--cep-verde-escuro-22);
  border-radius: 2px;
}
.cep-hero__hud-rotulo::after {
  content: "";
  position: absolute;
  left: 0;
  top: calc(50% - 1px);
  height: 2px;
  width: calc(var(--cep-progresso, 0) * 118px);
  background: var(--cep-verde-escuro);
  border-radius: 2px;
}
.cep-hero__hud-dica {
  font-weight: 500;
  letter-spacing: 0.1em;
  transition: opacity .4s ease;
}

/* ---- sem animação: sem flutuação e sem a dica de rolar ---- */
@media (prefers-reduced-motion: reduce) {
  .cep-hero__prop { animation: none; }
  .cep-hero__hud-dica { display: none; }
}

/* ---- tela em pé: celular e tablet em retrato (24/09) ----
   A arte continua sendo o MESMO quadro 1670x950 com tudo em % (hero.js e
   hero.json não mudam). O quadro cresce para --cep-hero-k vezes a largura da
   tela, preso à esquerda com margem negativa: com k <= 1,29 a palavra
   (de 11,5% a 89% do quadro) cabe inteira e o produto aparece maior.
   Texto e atributos saem das colunas laterais para BAIXO da arte, em px:
   cqw aqui seria do quadro ampliado. Só com JS: é o arranjo da cena presa. */
/* el-ok S440: arranjo da cena presa em tela de pé (celular e tablet deitado ficam no arranjo do desktop) */
@media (orientation: portrait) and (max-width: 1024px) {
  .has-js .cep-hero { --cep-hero-k: 1.1; --cep-hero-desloca: calc((var(--cep-hero-k) - 1) * 50vw); }
  .has-js .cep-hero__pin { height: 100vh; height: 100svh; place-items: start; }
  /* el-ok A326: o quadro da arte cresce além da tela e é puxado para a esquerda para centralizar a palavra */
  .has-js .cep-hero__palco {
    width: calc(var(--cep-hero-k) * 100vw);
    margin: 2vh 0 0 calc(-1 * var(--cep-hero-desloca));
  }
  /* atributos: uma linha logo abaixo da arte, com fio entre eles */
  .has-js .cep-hero__feats {
    top: calc(100% + 8px);
    left: calc(var(--cep-hero-desloca) + var(--cep-gutter-tablet));
    right: auto;
    width: calc(100vw - 2 * var(--cep-gutter-tablet));
    display: flex;
  }
  .has-js .cep-hero__feat { flex: 1 1 0; gap: 4px; padding: 2px 6px; }
  .has-js .cep-hero__feat--seguinte { border-top: 0; border-left: 1px solid var(--cep-hero-fio); }
  .has-js .cep-hero__feat-icone { width: 22px; height: 22px; }
  .has-js .cep-hero__feat-forte, .has-js .cep-hero__feat-fraco { font-size: 10px; letter-spacing: 0.08em; }
  /* texto: coluna inteira, abaixo dos atributos */
  .has-js .cep-hero__ato .cep-hero__copy {
    top: calc(100% + 86px);
    left: calc(var(--cep-hero-desloca) + var(--cep-gutter-tablet));
    width: min(560px, calc(100vw - 2 * var(--cep-gutter-tablet)));
  }
  .has-js .cep-hero__kicker { font-size: 14px; margin-bottom: 8px; }
  .has-js .cep-hero__h1 { font-size: clamp(36px, 8vw, 60px); margin-bottom: 12px; }
  .has-js .cep-hero__texto { font-size: 16px; margin-bottom: 20px; }
  .has-js .cep-hero__cta { font-size: 14px; gap: 10px; padding: 14px 24px; }
  .has-js .cep-hero__seta { font-size: 16px; }
  /* indicador: no pé da tela, alinhado ao texto */
  .has-js .cep-hero__hud {
    top: calc(100svh - var(--cep-topo-alt) - 2vh - 46px);
    bottom: auto;
    left: calc(var(--cep-hero-desloca) + var(--cep-gutter-tablet));
  }
}
@media (orientation: portrait) and (max-width: 767px) {
  .has-js .cep-hero { --cep-hero-k: 1.28; }
  .has-js .cep-hero__h1 { font-size: clamp(34px, 10.5vw, 46px); }
  .has-js .cep-hero__texto { font-size: 15px; margin-bottom: 18px; }
  .has-js .cep-hero__cta { padding: 13px 22px; }
  /* respiro e header do celular */
  .has-js .cep-hero__feats {
    left: calc(var(--cep-hero-desloca) + var(--cep-gutter-celular));
    width: calc(100vw - 2 * var(--cep-gutter-celular));
  }
  .has-js .cep-hero__hud {
    top: calc(100svh - var(--cep-topo-alt-celular) - 2vh - 46px);
    left: calc(var(--cep-hero-desloca) + var(--cep-gutter-celular));
  }
  /* os atributos da maionese quebram em 3 linhas: mais folga até o texto */
  .has-js .cep-hero__ato .cep-hero__copy {
    top: calc(100% + 104px);
    left: calc(var(--cep-hero-desloca) + var(--cep-gutter-celular));
    width: min(560px, calc(100vw - 2 * var(--cep-gutter-celular)));
  }
  .has-js .cep-hero__hud-dica { display: none; }
  .has-js .cep-hero__hud-rotulo { min-width: 166px; }
  .has-js .cep-hero__hud-rotulo::before { width: 90px; }
  .has-js .cep-hero__hud-rotulo::after { width: calc(var(--cep-progresso, 0) * 90px); }
}
/* celular baixo (iPhone SE e afins): o parágrafo sai para o botão caber */
@media (orientation: portrait) and (max-width: 767px) and (max-height: 740px) {
  .has-js .cep-hero__texto { display: none; }
}

/* ---- GERADO por build.cjs a partir de dados/hero.json (não edite aqui) ----
   Posição de repouso e vetor de movimento de cada elemento do banner. */
.cep-hero__palavra--ketchup { left: 11.5%; top: 11%; width: 77%; }
.cep-hero__prop--ketchup-1 { left: 8.5%; top: 29%; width: 7.2%; z-index: 2; animation-duration: 8s; animation-delay: 0.4s; --cep-dx: -34; --cep-dy: 26; --cep-rot: -160; --cep-prof: 0.7; }
.cep-hero__prop--ketchup-2 { left: 29.5%; top: 40%; width: 7%; z-index: 2; animation-duration: 7s; animation-delay: 0.9s; --cep-dx: -18; --cep-dy: 44; --cep-rot: 220; --cep-prof: 0.9; }
.cep-hero__prop--ketchup-3 { left: 29%; top: 48%; width: 9.5%; z-index: 4; animation-duration: 6.5s; animation-delay: 0.2s; --cep-dx: -26; --cep-dy: 62; --cep-rot: 300; --cep-prof: 1.35; }
.cep-hero__prop--ketchup-4 { left: 61.5%; top: 51%; width: 2.6%; z-index: 4; animation-duration: 5.5s; animation-delay: 1.5s; --cep-dx: 14; --cep-dy: -30; --cep-rot: -240; --cep-prof: 0.55; }
.cep-hero__prop--ketchup-5 { left: 71%; top: 32%; width: 10%; z-index: 4; animation-duration: 7.5s; animation-delay: 0.7s; --cep-dx: 30; --cep-dy: 58; --cep-rot: -280; --cep-prof: 1.25; }
.cep-hero__prop--ketchup-6 { left: 78.5%; top: 56%; width: 5.5%; z-index: 2; animation-duration: 9s; animation-delay: 0s; opacity: .92; --cep-dx: 38; --cep-dy: -18; --cep-rot: 190; --cep-prof: 0.6; }
.cep-hero__prop--ketchup-7 { left: 33%; top: 70%; width: 5%; z-index: 2; animation-duration: 11s; animation-delay: 1.2s; opacity: .9; --cep-dx: -22; --cep-dy: 34; --cep-rot: -200; --cep-prof: 0.65; }
.cep-hero__prop--ketchup-8 { left: 66.5%; top: 66%; width: 10.5%; z-index: 4; animation-duration: 8.5s; animation-delay: 0.3s; --cep-dx: 28; --cep-dy: 48; --cep-rot: 260; --cep-prof: 1.15; }
.cep-hero__garrafa--ketchup { left: 49.5%; bottom: 0.5%; height: 101%; width: auto; max-width: none; aspect-ratio: 1024/1536; }
.cep-hero__copy--ketchup { top: 52%; }
.cep-hero__palavra--maionese { left: 11.5%; top: 9%; width: 77%; }
.cep-hero__prop--maionese-1 { left: 30%; top: 37%; width: 6.5%; z-index: 4; animation-duration: 7s; animation-delay: 0.1s; --cep-dx: -46; --cep-dy: -26; --cep-rot: -150; }
.cep-hero__prop--maionese-2 { left: 35%; top: 50%; width: 6.5%; z-index: 2; animation-duration: 8s; animation-delay: 0.5s; --cep-dx: -40; --cep-dy: 30; --cep-rot: 170; }
.cep-hero__prop--maionese-3 { left: 30%; bottom: 8%; width: 15.5%; z-index: 4; animation-duration: 9s; animation-delay: 0.8s; --cep-dx: -52; --cep-dy: 40; --cep-rot: -120; }
.cep-hero__prop--maionese-4 { left: 62%; top: 41%; width: 21%; z-index: 4; animation-duration: 7.5s; animation-delay: 0.6s; --cep-dx: 56; --cep-dy: -22; --cep-rot: 140; }
.cep-hero__prop--maionese-5 { left: 61%; bottom: 12%; width: 11%; z-index: 4; animation-duration: 8.5s; animation-delay: 0.3s; --cep-dx: 48; --cep-dy: 36; --cep-rot: -190; }
.cep-hero__prop--maionese-6 { left: 74.5%; top: 55%; width: 4.5%; z-index: 2; animation-duration: 9.5s; animation-delay: 0.2s; opacity: .92; --cep-dx: 40; --cep-dy: -34; --cep-rot: 210; }
.cep-hero__prop--maionese-7 { left: 78%; bottom: 14%; width: 5.5%; z-index: 2; animation-duration: 11.5s; animation-delay: 1.4s; opacity: .9; --cep-dx: 44; --cep-dy: 28; --cep-rot: -160; }
.cep-hero__garrafa--maionese { left: 49.5%; bottom: 2%; height: 92%; width: auto; max-width: none; }
.cep-hero__copy--maionese { top: 54%; }

/* Home — filme institucional em fullbanner (bloco 02-video).
   Ocupa a tela abaixo do header, mas nunca passa da proporção 16:9 do filme:
   no desktop corta um pouco em cima e embaixo; no celular aparece inteiro. */
.cep-hvid {
  position: relative;
  height: min(calc(100svh - var(--cep-topo-alt)), 56.25vw);
  background: var(--cep-verde-escuro);
  overflow: clip;
}
.cep-hvid__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* botão de som: pílula escura translúcida no canto, com estado mudo / com som */
.cep-hvid__som {
  position: absolute;
  right: var(--cep-gutter);
  bottom: 28px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px 0 16px;
  border: 1px solid var(--cep-creme-45);
  border-radius: 999px;
  background: var(--cep-preto-42);
  backdrop-filter: blur(8px);
  color: var(--cep-creme);
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}
.cep-hvid__som:hover { background: var(--cep-verde-escuro); transform: translateY(-2px); }
.cep-hvid__som:focus-visible { outline: 3px solid var(--cep-limao); outline-offset: 3px; }
.cep-hvid__estado { display: inline-flex; align-items: center; gap: 10px; }
.cep-hvid__estado--som { display: none; }
.cep-hvid__som.is-ligado > .cep-hvid__estado--som { display: inline-flex; }
.cep-hvid__som.is-ligado > .cep-hvid__estado--mudo { display: none; }
.cep-hvid__icone { width: 20px; height: 20px; }
.cep-hvid__txt {
  font-family: var(--cep-fonte-texto);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

@media (max-width: 1024px) {
  .cep-hvid { height: min(calc(100svh - var(--cep-topo-alt-celular)), 56.25vw); }
  .cep-hvid__som { right: var(--cep-gutter-tablet); bottom: 18px; }
}
@media (max-width: 767px) {
  .cep-hvid__som { right: var(--cep-gutter-celular); bottom: 12px; padding: 0 14px 0 12px; }
}

/* Topo em estado único (header do Theme Builder, data-el-sticky="top"):
   logo grande e centralizado, menu centralizado embaixo (referência de
   proporção: Sakura). Sem colapso no scroll (decisão do cliente: mais simples).

   ATENÇÃO: sticky quebra se qualquer ancestral tiver overflow. */
.cep-topo {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--cep-limao-toque55);
  border-bottom: 1px solid var(--cep-verde-escuro-12);
}

/* ---- 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. */
.cep-topo__acoes { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }

/* seletor de idioma; o fio entre PT e EN é o ::after, posto no meio pela ordem */
.cep-idiomas {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  gap: 7px;
}
.cep-idiomas::after {
  content: "";
  order: 1;
  width: 1px;
  height: 11px;
  background: var(--cep-verde-escuro-25);
}
.cep-idiomas__op { color: var(--cep-verde-escuro-42); }
.cep-idiomas__op.is-ativo { color: var(--cep-verde-escuro); }
/* EN ainda sem destino: fica visível mas sem virar link quebrado */
.cep-idiomas__op--breve { order: 2; cursor: not-allowed; }

/* ---- estado EXPANDIDO (topo da página) ----
   Grid de 2 linhas: [esq | logo | ações] em cima e o menu ocupando a linha
   inteira embaixo. As colunas 1fr dos lados mantêm o logo no centro ótico. */
.cep-topo__barra {
  max-width: var(--cep-faixa);
  margin: 0 auto;
  padding: 26px var(--cep-gutter) 18px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas:
    "esq logo acoes"
    "nav nav  nav";
  align-items: center;
  column-gap: 20px;
  row-gap: 16px;
}
.cep-topo__logo { grid-area: logo; display: flex; align-items: center; justify-self: center; }
.cep-topo__logo-img { height: 80px; width: auto; display: block; }
.cep-nav { grid-area: nav; justify-self: center; }
.cep-topo__acoes { grid-area: acoes; justify-self: end; }

/* botão do menu mobile: só aparece quando o menu some (tablet e celular) */
.cep-topo__abre-menu {
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  color: var(--cep-verde-escuro);
  transition: background .2s ease;
}
.cep-topo__abre-menu:hover { background: var(--cep-verde-escuro-08); }
.cep-topo__abre-menu-icone { width: 24px; height: 24px; }

/* ---- menu: áreas da arquitetura de informação (sitemap de 25/08) ----
   Produtos abre megamenu de 3 colunas. Estrutura e rótulos vêm de
   dados/nav.json. O painel abre no hover e no foco do teclado, com um
   atraso curto para não piscar ao passar o mouse de raspão. */
.cep-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: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.cep-nav__item { position: relative; }
.cep-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.cep-nav__link:hover,
.cep-nav__link.is-ativo,
.cep-nav__item--menu:hover .cep-nav__link,
.cep-nav__item--menu:focus-within .cep-nav__link { border-bottom-color: var(--cep-verde-escuro); }
/* página atual: destaca de vez (cor forte + peso), para diferenciar do hover */
.cep-nav__link.is-ativo { color: var(--cep-verde-escuro); font-weight: 800; border-bottom-width: 3px; }

/* a setinha do item com painel */
.cep-nav__link--menu::after {
  content: "";
  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;
}
.cep-nav__item--menu:hover .cep-nav__link--menu::after,
.cep-nav__item--menu:focus-within .cep-nav__link--menu::after { transform: translateY(1px) rotate(225deg); opacity: 1; }

/* ---- o painel ----
   Fecha 180ms depois de o mouse sair e abre 90ms depois de entrar
   (transition-delay), para não piscar nem sumir na diagonal. */
/* el-ok A323: megamenu, o painel de links abre no hover e no foco do item "Produtos" */
.cep-mega {
  position: absolute;
  left: -28px;
  top: calc(100% + 16px);
  min-width: 268px;
  padding: 26px 28px;
  background: var(--cep-creme);
  border: 1px solid var(--cep-verde-escuro-12);
  border-radius: 18px;
  box-shadow: 0 26px 50px var(--cep-verde-escuro-18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .22s ease .18s, transform .28s cubic-bezier(.2,.8,.2,1) .18s, visibility .22s linear .18s;
  z-index: 5;
}
/* a ponte invisível: sem ela o menu fecha ao atravessar o vão do topo */
.cep-mega::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -18px;
  height: 18px;
}
.cep-nav__item--menu:hover .cep-mega,
.cep-nav__item--menu:focus-within .cep-mega {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: .09s;
}

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

.cep-mega__titulo {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  white-space: nowrap;
  color: var(--cep-verde);
}
.cep-mega__lista { margin: 0; padding: 0; list-style: none; }
.cep-mega__item + .cep-mega__item { margin-top: 9px; }
.cep-mega__link {
  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(--cep-verde-escuro);
  transition: color .2s ease, transform .2s ease;
}
.cep-mega__link:hover { color: var(--cep-laranja); transform: translateX(3px); }
/* ↗ dos links que saem do site */
.cep-mega__link em { font-style: normal; font-size: 11px; opacity: 0.5; }

/* cartão de chamada no fim do megamenu de Produtos */
.cep-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(--cep-verde-escuro);
  color: var(--cep-creme);
  text-transform: none;
  letter-spacing: 0;
  transition: background .25s ease;
}
.cep-mega__destaque:hover { background: var(--cep-verde); }
.cep-mega__destaque-titulo { font-size: 15px; font-weight: 700; }
.cep-mega__destaque-linha { font-size: 12.5px; line-height: 1.4; color: var(--cep-creme-75); }
.cep-mega__destaque-seta { font-size: 18px; margin-top: 6px; color: var(--cep-limao); }

/* ---- tablet e celular: o menu vira o botão do popup "Menu mobile" ---- */
@media (max-width: 1024px) {
  /* sem menu: a barra vira linha única (logo à esquerda, ações à direita) */
  .cep-topo__barra {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "logo esq acoes";
    padding: 14px var(--cep-gutter-tablet);
    row-gap: 0;
  }
  .cep-topo__logo { justify-self: start; }
  .cep-topo__logo-img { height: 50px; }
  .cep-nav { display: none; }
  .cep-topo__abre-menu { display: grid; }
}
@media (max-width: 767px) {
  .cep-topo__barra { padding: 18px var(--cep-gutter-celular); }
  /* o EN ainda está desligado: no celular o seletor sai para o topo caber */
  .cep-idiomas { display: none; }
}

/* ---- popup "Menu mobile" (documento data-el-doc="popup") ---- */
.cep-gaveta {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-height: 100%;
  padding: 18px 24px 32px;
  background: var(--cep-creme);
  color: var(--cep-verde-escuro);
}
.cep-gaveta__topo { display: flex; align-items: center; justify-content: space-between; }
.cep-gaveta__logo { height: 46px; width: auto; display: block; }
.cep-gaveta__fechar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: var(--cep-verde-escuro-08);
  color: var(--cep-verde-escuro);
  cursor: pointer;
}
.cep-gaveta__fechar-icone { width: 22px; height: 22px; }
.cep-gaveta__lista { display: flex; flex-direction: column; }
.cep-gaveta__grupo { border-bottom: 1px solid var(--cep-verde-escuro-12); }
.cep-gaveta__link {
  display: block;
  padding: 14px 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--cep-verde-escuro);
}
.cep-gaveta__link.is-ativo { color: var(--cep-verde); }
.cep-gaveta__sub { display: flex; flex-direction: column; gap: 10px; padding: 0 0 18px 14px; }
.cep-gaveta__titulo {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--cep-verde);
}
.cep-gaveta__sublink { font-size: 15px; font-weight: 500; color: var(--cep-verde-escuro); }
.cep-gaveta__sublink:hover { color: var(--cep-laranja); }

/* Home — fita de palavras em loop, logo abaixo do banner.
   O app.js reage à velocidade/direção do scroll (js-marquee). */
.cep-fita {
  background: var(--cep-verde-escuro);
  color: var(--cep-creme);
  overflow: hidden;
  padding: 20px 0;
  border-top: 2px solid var(--cep-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. */
.cep-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(--cep-fonte-titulo);
  font-size: 38px;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.cep-fita__w { padding-right: 52px; }
.cep-fita__w--alt { color: var(--cep-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. */
.cep-fita--prod { border-bottom: 2px solid var(--cep-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. */
.cep-fita--prod .cep-fita__w:nth-child(even) { color: var(--cep-limao); }

/* ---- celular ---- */
@media (max-width: 767px) {
  .cep-fita { padding: 14px 0; }
  .cep-fita__pista { font-size: 26px; }
  .cep-fita__w { padding-right: 34px; }
}

/* passar o mouse pausa a fita (antes era o app.js; agora é o :hover) */
.cep-fita:hover .cep-fita__pista { animation-play-state: paused; }

/* Home — "Nossas categorias": carrossel de potes com paralaxe (01/09).
   O hover (onda de cor, foto, cores) é CSS puro; 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. */
.cep-categorias {
  position: relative;
  background: var(--cep-branco-quente);
  padding: 110px 0 120px;
  overflow: hidden;
}

/* ---- ingredientes flutuantes: a paralaxe continua a do banner ----
   O app.js desloca cada um conforme a seção atravessa a tela (profundidade
   por item no próprio JS), então o movimento "vem" do hero e segue aqui.
   O grupo (.cep-cats__flutua) não tem posição: cada ingrediente se posiciona
   pela seção e fica abaixo da faixa (z-index 1), sem cobrir o conteúdo. */
.cep-cats__ing {
  position: absolute;
  opacity: 0.5;
  pointer-events: none;
  filter: drop-shadow(0 14px 18px var(--cep-verde-escuro-10));
}
.cep-cats__ing--tomate     { left: 4%;  top: 12%;    width: 7%; }
.cep-cats__ing--manjericao { right: 5%; top: 8%;     width: 8%; }
.cep-cats__ing--salsinha   { left: 12%; bottom: 14%; width: 5.5%; }
.cep-cats__ing--limao      { right: 9%; bottom: 18%; width: 5%; }
.cep-cats__ing--folha      { left: 46%; top: 4%;     width: 4%; }

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

.cep-cats {
  /* contido na faixa: um respiro curto só para a sombra dos cards não recortar */
  --cep-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(--cep-cats-respiro) 26px;
  /* SEM isto o snap encosta o 1º card na borda e come o respiro da esquerda */
  scroll-padding-left: var(--cep-cats-respiro);
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.cep-cats::-webkit-scrollbar { display: none; }

.cep-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; a onda de cor que o
   preenche no hover é o ::before, recortada pelo próprio pote */
/* el-ok A325: o pote é o fundo do card e contém a legenda (nome e subtítulo), que precisa receber o clique para ser editada; o card inteiro já é o link */
.cep-cat__pote {
  position: absolute;
  inset: 0;
  border-radius: 34% 34% 14px 14px / 22% 22% 14px 14px;
  overflow: hidden;
  background: var(--cep-creme);   /* Creme da Receita (era o verdinho --creme-2) */
}
.cep-cat__pote::before {
  content: "";
  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(--cep-verde-escuro);
  transition: transform .55s cubic-bezier(.16,1,.3,1);
}
.cep-cat:hover .cep-cat__pote::before { transform: translateX(-50%) scale(1); }

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

/* a legenda fica dentro do pote, mas por cima da foto */
.cep-cat__legenda {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 14px 24px;
}

.cep-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(--cep-fonte-texto);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.1;
  color: var(--cep-verde-escuro);
  text-align: center;
  transition: color .35s ease;
}
.cep-cat:hover .cep-cat__nome { color: var(--cep-creme); }

.cep-cat__sub {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--cep-verde-escuro-65);
  text-align: center;
  transition: color .35s ease;
}
.cep-cat:hover .cep-cat__sub { color: var(--cep-creme-80); }

/* ---- setas: sempre visíveis, para o carrossel se anunciar ---- */
.cep-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(--cep-verde-escuro);
  color: var(--cep-creme);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
  box-shadow: 0 10px 22px var(--cep-verde-escuro-28);
  transition: background .25s ease, transform .25s ease, opacity .25s ease;
}
.cep-cats-nav:hover { background: var(--cep-limao); color: var(--cep-verde-escuro); transform: translateY(-50%) scale(1.09); }
.cep-cats-nav[disabled] { opacity: .28; pointer-events: none; }
.cep-cats-nav--prev { left: -12px; }
.cep-cats-nav--next { right: -12px; }

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

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

/* ---- entrada dos cards: sobem em cascata quando a seção aparece ----
   has-cena é o JS que põe (só quando vai animar): sem JS e no editor os
   cards já estão no lugar. */
.cep-categorias.has-cena:not(.is-vivo) .cep-cat {
  opacity: 0;
  transform: translateY(46px);
}
.cep-cat {
  transition: opacity .5s ease, transform .7s cubic-bezier(.22, 1.1, .36, 1);
  transition-delay: calc(var(--cep-i, 0) * 70ms);
}

@media (prefers-reduced-motion: reduce) {
  .cep-cats { scroll-behavior: auto; }
  .cep-cat { transition: none; }
}

/* ---- celular: dois potes e meio à vista (o meio cortado avisa que rola) ---- */
@media (max-width: 767px) {
  .cep-cat { width: 42vw; }
  .cep-cat__nome { font-size: 18px; }
  .cep-cats-nav { width: 44px; height: 44px; font-size: 17px; }
  .cep-cats-nav--prev { left: -6px; }
  .cep-cats-nav--next { right: -6px; }
}

/* Home: as 5 linhas da marca (Cepêra, Mais Sabor, Profissional, UMAI e
   Collabs). Desde 03/10, estrutura D, "prateleira contínua": uma faixa única
   de ponta a ponta, as cinco cores coladas (sem vão nem canto), e cada coluna
   com a anatomia FIXA:

     palco   grafismo da linha + a dupla de produtos, pousada na LINHA DE BASE
             (a mesma altura nas cinco, então a base atravessa a faixa inteira)
     texto   nome (uma linha), frase (2 linhas reservadas) e "Ver N produtos"

   O grafismo é máscara (--g-*) com a cor da linha em --forma (tom-sobre-tom).
   Os cards anteriores estão em _tools/backup-linhas-cards-2026-10-03/. */
.cep-linhas {
  padding: clamp(56px, 6vw, 104px) 0;
  background: var(--cep-branco-quente);
  overflow: clip;
}

.cep-linhas__grade {
  margin-top: clamp(32px, 3.4vw, 52px);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: auto;
}

.cep-linha {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: clip;
  background: var(--fundo);
  color: var(--tinta);
}
.cep-linha:hover { color: var(--tinta); }
.cep-linha:focus-visible { outline: 3px solid var(--cep-limao); outline-offset: -6px; }

/* palco: a base é a borda de baixo, na mesma altura nas cinco colunas */
.cep-linha__palco {
  position: relative;
  height: clamp(300px, 26vw, 380px);
  overflow: clip;
  border-bottom: 1px solid var(--base);
}
.cep-linha__palco::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: var(--g-l, 0);
  bottom: var(--g-b, 0);
  width: var(--g-w, 100%);
  height: var(--g-h, 100%);
  aspect-ratio: var(--g-ar, auto);
  transform: var(--g-t, none);
  background: var(--forma);
  -webkit-mask: var(--g-m);
  -webkit-mask-composite: var(--g-wmc, source-over);
  mask: var(--g-m);
  mask-composite: var(--g-mc, add);
}
/* sombra de contato: uma elipse no "chão", em cima da base */
.cep-linha__palco::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 74%;
  height: 26px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, var(--cep-preto-42), transparent);
}

/* Mais Sabor: "repetição agrupada" (guia p.59 e p.127): vinho sobre vermelho.
   É texto de verdade no HTML (dados/linhas.json > ecoLinhas). */
/* el-ok A325: camada tipográfica decorativa do guia, dentro do card que já é o link */
.cep-linha__eco {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: clip;
  font-family: var(--cep-fonte-titulo);
  font-size: clamp(56px, 5.4vw, 80px);
  line-height: 0.84;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--forma);
}
.cep-linha__eco-linha--2 { margin-left: -38%; }
.cep-linha__eco-linha--4 { margin-left: -38%; }

/* a dupla, sempre RETA e em pé como nas peças do guia: o de trás um pouco
   menor, o da frente à direita. As fotos são telas padronizadas com a MESMA
   linha de base, então pousam todas na base da faixa. */
.cep-linha__produto {
  position: absolute;
  left: 50%;
  bottom: 0;
  height: 86%;
  width: auto;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 6px 8px var(--cep-preto-18));
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.cep-linha__produto--1 { transform: translateX(-72%) scale(.86); }
.cep-linha__produto--2 { z-index: 1; transform: translateX(-29%); }
.cep-linha:hover .cep-linha__produto--1 { transform: translateX(-72%) translateY(-6px) scale(.86); }
.cep-linha:hover .cep-linha__produto--2 { transform: translateX(-29%) translateY(-10px); }

/* texto: nome, frase e o link, alinhados nas cinco colunas */
.cep-linha__texto {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px clamp(20px, 2vw, 30px) 30px;
}
.cep-linha__nome {
  font-family: var(--cep-fonte-titulo);
  font-weight: 400;
  /* escala calculada para "PROFISSIONAL" (o nome mais longo) caber na coluna */
  font-size: clamp(20px, 2vw, 30px);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--nome);
}
.cep-linha__tag {
  min-height: 2.9em;
  font-family: var(--cep-fonte-texto);
  font-size: clamp(14px, 1.05vw, 15px);
  font-weight: 500;
  line-height: 1.45;
}
.cep-linha__ir {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-family: var(--cep-fonte-texto);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.cep-linha__seta { font-size: 15px; line-height: 1; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.cep-linha:hover .cep-linha__seta { transform: translateX(5px); }

.cep-linhas__rodape {
  display: flex;
  justify-content: center;
  margin-top: clamp(32px, 3vw, 48px);
}

/* ---- cada linha: cores (paleta oficial) + o seu grafismo (--g-*) ----
   Cepêra        Forma "pote" preenchida (guia p.97, Linha Cepêra)
   Mais Sabor    tipografia em repetição (acima); sem máscara
   Profissional  "repetição em outline horizontal" (guia p.174), some para cima
   UMAI          sem seção no guia: usa "repetição em outline vertical" da
                 marca guarda-chuva (p.58), os potes em diagonal
   Collabs       sem seção no guia: usa a "reverberação" em outline (p.58)
   --base é a linha de base sobre a cor da coluna */
.cep-linha--cepera {
  --fundo: var(--cep-verde); --tinta: var(--cep-creme); --nome: var(--cep-limao); --forma: var(--cep-verde-escuro-45); --base: var(--cep-creme-28);
  --g-l: 50%; --g-b: 9%; --g-w: 165%; --g-h: auto; --g-ar: 1474 / 687; --g-t: translateX(-50%);
  --g-m: url("../assets/graficos/forma-pote.svg") center / 100% 100% no-repeat;
}
.cep-linha--mais-sabor {
  --fundo: var(--cep-laranja); --tinta: var(--cep-creme); --nome: var(--cep-amarelo); --forma: var(--cep-vinho-45); --base: var(--cep-creme-28);
  --g-w: 0%;
}
.cep-linha--profissional {
  --fundo: var(--cep-limao-55); --tinta: var(--cep-verde-escuro); --nome: var(--cep-verde-escuro); --forma: var(--cep-verde-50); --base: var(--cep-verde-escuro-25);
  --g-m: url("../assets/graficos/padrao-potes.svg") 0 0 / 60px auto repeat, linear-gradient(transparent, var(--cep-preto) 45%);
  --g-mc: intersect; --g-wmc: source-in;
}
.cep-linha--umai {
  --fundo: var(--cep-umai); --tinta: var(--cep-preto); --nome: var(--cep-preto); --forma: var(--cep-preto-18); --base: var(--cep-preto-28);
  --g-l: -45%; --g-b: -45%; --g-w: 190%; --g-h: 190%; --g-t: rotate(-38deg);
  --g-m: url("../assets/graficos/padrao-potes.svg") 0 0 / 64px auto repeat;
}
.cep-linha--collabs {
  --fundo: var(--cep-vinho-escuro); --tinta: var(--cep-creme); --nome: var(--cep-creme); --forma: var(--cep-creme-22); --base: var(--cep-creme-28);
  --g-l: 50%; --g-b: -14%; --g-w: auto; --g-h: 108%; --g-ar: 2 / 1; --g-t: translateX(-50%);
  --g-m: url("../assets/graficos/forma-concentrica.svg") center / 100% 100% no-repeat;
}

/* ---- tablet e celular: a faixa vira uma fileira com scroll lateral ---- */
@media (max-width: 1024px) {
  .cep-linhas__grade {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 40%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .cep-linha { scroll-snap-align: start; }
  .cep-linha__palco { height: 340px; }
  .cep-linha__nome { font-size: 28px; }
}
@media (max-width: 767px) {
  .cep-linhas__grade { grid-auto-columns: 78%; }
  .cep-linha__palco { height: 320px; }
  .cep-linha__texto { padding: 22px 20px 26px; }
}

/* 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). */
/* el-ok A327: o selo 1947 cavalga a divisa entre categorias e institucional; a âncora sem altura não empurra o layout */
.cep-selo-ancora {
  position: relative;
  height: 0;
  z-index: 2;
  max-width: var(--cep-faixa);
  margin: 0 auto;
  padding: 0 var(--cep-gutter);
}

.cep-selo {
  position: absolute;
  right: 60px;
  top: -92px;
  width: 184px;
  height: 184px;
}
/* base (disco + 1947 + CEPÊRA) e o anel de texto por cima, que gira */
.cep-selo__base,
.cep-selo__anel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  pointer-events: none;
}

@media (max-width: 1024px) {
  .cep-selo-ancora { padding: 0 var(--cep-gutter-tablet); }
}
/* ---- celular: menor e rente à borda ---- */
@media (max-width: 767px) {
  .cep-selo-ancora { padding: 0 var(--cep-gutter-celular); }
  .cep-selo { right: 14px; top: -58px; width: 116px; height: 116px; }
}

/* Conteúdo do bloco institucional ("Feito com propósito" na home e o topo de
   A Cepêra). A moldura dos dois é a capa espelhada (cep-chero + cep-chero--esq,
   em 21-internas.css), com o GIF; aqui ficam só as peças de texto, o botão e
   o par de números. */
.cep-rotulo--inst { color: var(--cep-limao); letter-spacing: 0.18em; margin: 0 0 18px; }

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

/* CTA verde-limão */
.cep-btn--limao {
  background: var(--cep-limao);
  color: var(--cep-verde-escuro);
  font-size: 14px;
  font-weight: 700;
  padding: 16px 32px;
}
/* preenchimento "líquido" em creme subindo no hover */
.cep-btn--liquido {
  background-image: linear-gradient(var(--cep-creme), var(--cep-creme));
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% 0%;
}
.cep-btn--liquido:hover { background-size: 100% 100%; color: var(--cep-verde-escuro); }

/* par de números, com um fio (::before) que se desenha ao entrar (js-rule) */
.cep-inst__numeros {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 40px;
  padding-top: 30px;
}
.cep-inst__numeros::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background: var(--cep-limao-40);
  transform-origin: left center;
  transition: transform .65s cubic-bezier(.16,1,.3,1);
}
/* has-cena: o JS põe antes de a seção entrar; is-vivo quando ela entra */
.cep-inst__numeros.has-cena::before { transform: scaleX(0); }
.cep-inst__numeros.has-cena.is-vivo::before { transform: scaleX(1); }

.cep-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(--cep-fonte-texto);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--cep-limao);
}

.cep-inst__legenda {
  margin: 10px 0 0;
  font-size: 16px;
  color: var(--cep-creme-80);
}

/* ---- quadros de dados (home, 02/10): "Apresentar os dados em quadros
   inspirados na página 98 do Brand Guide". Mesma anatomia nos dois: rótulo,
   número na OverHeat e a legenda dentro da Forma clara, tudo centralizado. */
.cep-inst__quadros {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto;
  gap: 12px;
  margin-top: 34px;
}
.cep-quadro {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 188px;
  padding: 18px 14px 20px;
  border-radius: 16px;
  overflow: clip;
  background: var(--q-fundo);
  color: var(--q-tinta);
}
.cep-quadro::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 9%;
  width: 94%;
  aspect-ratio: 1474 / 687;
  transform: translateX(-50%);
  background: var(--q-forma);
  -webkit-mask: url("../assets/graficos/forma-pote.svg") center / 100% 100% no-repeat;
  mask: url("../assets/graficos/forma-pote.svg") center / 100% 100% no-repeat;
}
.cep-quadro--laranja { --q-fundo: var(--cep-laranja-graf); --q-forma: var(--cep-laranja-forma); --q-tinta: var(--cep-verde-escuro); --q-num: var(--cep-creme); }
.cep-quadro--verde   { --q-fundo: var(--cep-verde-escuro); --q-forma: var(--cep-verde);         --q-tinta: var(--cep-creme);       --q-num: var(--cep-limao); }
/* variantes: verde médio (o fundo do guia p.97, Forma mais escura) e GRANDE
   (Sustentabilidade, quadros em linha na largura toda) */
.cep-quadro--verde-medio { --q-fundo: var(--cep-verde); --q-forma: var(--cep-verde-escuro-45); --q-tinta: var(--cep-creme); --q-num: var(--cep-creme); }
/* GRANDE (Sustentabilidade, 02/10): o número fica DENTRO do pote, centrado,
   com o rótulo em cima e a legenda embaixo, como o produto sobre a Forma no
   guia. Onde o pote é claro (laranja) o número escurece para ter contraste. */
.cep-quadro--grande { justify-content: space-between; min-height: clamp(240px, 21vw, 300px); padding: 24px 24px 26px; border-radius: 22px; }
.cep-quadro--grande::before { width: 78%; bottom: auto; top: 50%; transform: translate(-50%, -50%); }
.cep-quadro--grande .cep-quadro__num { margin: auto 0; font-size: clamp(54px, 5.6vw, 86px); line-height: 1; }
.cep-quadro--grande .cep-quadro__legenda { margin: 0; max-width: 24ch; font-size: 16px; }
.cep-quadro--grande.cep-quadro--laranja { --q-num: var(--cep-verde-escuro); }
.cep-quadro--grande.cep-quadro--verde { --q-num: var(--cep-creme); }
.cep-quadro__rotulo {
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.cep-quadro__num {
  margin: 2px 0 0;
  font-family: var(--cep-fonte-titulo);
  font-size: clamp(40px, 3.7vw, 58px);
  line-height: 0.92;
  color: var(--q-num);
}
.cep-quadro__legenda {
  margin: auto 0 0;
  max-width: 13ch;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.25;
}

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

@media (max-width: 767px) {
  .cep-inst__texto { font-size: 16px; }
  .cep-inst__numeros { gap: 20px; margin-top: 32px; padding-top: 24px; }
  .cep-inst__num { font-size: 28px; }
  .cep-inst__legenda { font-size: 14px; }
}

/* home, 04/10: o bloco "Sabor pra valer" ficou mais baixo. Os quadros ficam
   compactos (rótulo, número e legenda curta) e mais perto do botão. */
.cep-inst__quadros--compactos { margin-top: 24px; }
.cep-quadro--compacto { min-height: 0; padding: 14px 12px 16px; }
.cep-quadro--compacto::before { width: 82%; bottom: 4%; }
.cep-quadro--compacto .cep-quadro__num { font-size: clamp(34px, 3vw, 46px); }
.cep-quadro--compacto .cep-quadro__legenda { margin-top: 6px; font-size: 12.5px; }

/* revisão da Aléxia (14/10) + ajustes da entrega final (23/10): os dois quadros
   lado a lado, a Forma do logo no MEIO, grande, em cor chapada e na proporção
   certa (1474 × 687, sem distorcer), e o NÚMERO centralizado na vertical dentro
   dela. A grade 1fr | auto | 1fr deixa o número no centro exato do quadro (onde
   a Forma está centrada), com o rótulo em cima e a legenda embaixo. */
.cep-quadro--compacto { display: grid; grid-template-rows: 1fr auto 1fr; justify-items: center; min-height: 196px; padding: 14px 12px; }
.cep-quadro--compacto::before { width: 92%; bottom: auto; top: 50%; transform: translate(-50%, -50%); }
.cep-quadro--compacto .cep-quadro__rotulo { align-self: start; font-size: 13px; }
.cep-quadro--compacto .cep-quadro__num { align-self: center; margin: 0; font-size: clamp(36px, 3.2vw, 48px); line-height: 1; }
.cep-quadro--compacto .cep-quadro__legenda { align-self: end; margin: 0; max-width: 20ch; font-size: 12.5px; }
.cep-quadro--compacto.cep-quadro--laranja { --q-num: var(--cep-verde-escuro); }

/* 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.
   Paleta e conteúdo são os da Cepêra — os 6 pilares continuam vindo de
   dados/sustentabilidade.json. */
.cep-sust {
  position: relative;
  background: var(--cep-creme);
  color: var(--cep-verde-escuro);
  /* 01/09: seção encurtada a pedido do Rafael (era 130/150) */
  padding: 92px 0 104px;
  overflow: hidden;
}

.cep-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, js-deriva). */
/* el-ok A325: camada de palavras decorativas; fica abaixo da faixa (z-index 1) e não cobre o conteúdo */
.cep-sust__eco {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px 0;
  overflow: hidden;
}

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

/* ---- pilha de título fora de eixo ----
   Cada <span> do título é uma linha (spans sem classe: o Elementor mantém o
   HTML inline do título, mas não as classes dele). */
.cep-sust__titulo-pilha {
  position: relative;
  margin-bottom: 54px;
}

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

.cep-sust__display > span { display: block; }

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

/* o deslocamento: cada linha ancorada num ponto diferente */
.cep-sust__display > span:nth-child(1) { padding-left: 8%; }
.cep-sust__display > span:nth-child(2) { padding-left: 0; }
.cep-sust__display > span:nth-child(3) { padding-left: 34%; }
/* o ponto final em laranja */
.cep-sust__display em { font-style: normal; color: var(--cep-laranja); text-shadow: none; }

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

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

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

.cep-pilar {
  position: relative;
  height: 100%;
  border-radius: 26px;
  padding: 24px 26px 28px;
  box-shadow: 10px 12px 0 var(--cep-verde-escuro-16);
  transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease;
}

/* 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. */
.cep-pilar { background: var(--cep-branco-quente); color: var(--cep-verde-escuro); }  /* branco-quente (teste; puro #fff foge da paleta) */
.cep-pilar--1 { transform: rotate(-2.5deg); background: var(--cep-verde-escuro); color: var(--cep-creme); }
.cep-pilar--2 { transform: rotate(1.8deg) translateY(20px); }
.cep-pilar--3 { transform: rotate(-1.6deg) translateY(-12px); }
.cep-pilar--4 { transform: rotate(2.4deg) translateY(10px); }
.cep-pilar--5 { transform: rotate(-2deg) translateY(-16px); }
.cep-pilar--6 { transform: rotate(1.5deg) translateY(14px); }
/* no hover o card endireita e sobe (vence o tombo de cada um) */
.cep-pilar:hover {
  transform: rotate(0deg) translateY(-6px);
  box-shadow: 4px 6px 0 var(--cep-verde-escuro-16);
}

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

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

.cep-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 */
.cep-pilar--6 { padding-right: 92px; }

/* ---- selo girando, invadindo a borda dos cards ---- */
.cep-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 var(--cep-verde-escuro-30));
  z-index: 3;
}
.cep-sust__selo-img { width: 100%; height: 100%; display: block; overflow: visible; }
/* o anel de texto (grupo dentro do SVG) gira sem parar */
.cep-sust__selo-anel {
  transform-origin: 50px 50px;
  animation: sustGira 12s linear infinite;
}

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

/* =========================================================================
   A CENA (bindSust 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
   O estado inicial só existe com .has-cena, que o JS põe antes de a seção
   entrar (sem JS e no editor, tudo já está no lugar). Depois de assentar, o
   JS adiciona .is-assentado, que zera os delays para o hover responder na hora.
   ========================================================================= */

.cep-sust.has-cena:not(.is-vivo) .cep-sust__display > span:nth-child(1) { opacity: 0; transform: translateX(-70px); }
.cep-sust.has-cena:not(.is-vivo) .cep-sust__display > span:nth-child(2) { opacity: 0; transform: translateX(80px); }
.cep-sust.has-cena:not(.is-vivo) .cep-sust__display > span:nth-child(3) { opacity: 0; transform: translateX(-60px); }
.cep-sust.has-cena:not(.is-vivo) .cep-seta__traco { stroke-dashoffset: 1; }
.cep-sust.has-cena:not(.is-vivo) .cep-pilar {
  opacity: 0;
  transform: translateY(-55vh) rotate(var(--cep-tombo-voo, 24deg)) scale(1.06);
}
.cep-sust.has-cena:not(.is-vivo) .cep-sust__selo { opacity: 0; transform: rotate(-80deg) scale(2.1); }

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

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

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

.cep-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 */
.cep-sust.is-assentado .cep-pilar,
.cep-sust.is-assentado .cep-sust__selo { transition-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
  .cep-sust__selo-anel { animation: none; }
  .cep-pilares .cep-pilar,
  .cep-pilares .cep-pilar:hover { transform: none; opacity: 1; }
}

/* ---- tablet: 2 colunas · celular: 1, com o tombo mais contido ---- */
@media (max-width: 1024px) {
  .cep-pilares { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; }
}
@media (max-width: 767px) {
  .cep-sust { padding: 72px 0 96px; }
  .cep-sust__titulo-pilha { margin-bottom: 40px; }
  .cep-sust__display > span:nth-child(3) { padding-left: 22%; }
  .cep-sust__eco-linha { font-size: 88px; }
  .cep-pilares { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  /* em coluna o deslocamento vertical encavalava os cards: fica só o tombo */
  .cep-pilar--1 { transform: rotate(-1.6deg); }
  .cep-pilar--2 { transform: rotate(1.2deg); }
  .cep-pilar--3 { transform: rotate(-1deg); }
  .cep-pilar--4 { transform: rotate(1.4deg); }
  .cep-pilar--5 { transform: rotate(-1.2deg); }
  .cep-pilar--6 { transform: rotate(1deg); }
  .cep-pilar--6 { padding-right: 26px; }
  .cep-sust__selo { width: 96px; right: -6px; bottom: -62px; }
}

/* 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. */
.cep-recs {
  position: relative;
  background: var(--cep-branco);   /* era creme; branco nas 3 páginas a pedido (02/10) */
  padding: 118px 0 118px;
  overflow: hidden;
}

/* ---- palavras gigantes do fundo ---- */
/* el-ok A325: camada de palavras decorativas; fica abaixo da faixa (z-index 1) e não cobre o conteúdo */
.cep-recs__eco {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 0;
}
.cep-recs__eco-linha {
  display: block;
  font-family: var(--cep-fonte-titulo);
  font-size: clamp(90px, 13vw, 200px);
  line-height: 0.9;
  color: var(--cep-verde-09);
  white-space: nowrap;
}
/* a folha do logo entre as palavras, em limão: o contraste do guia */
.cep-recs__eco-palavra::after {
  content: "";
  display: inline-block;
  width: 0.62em;
  height: 0.32em;
  margin: 0 0.22em;
  background: var(--cep-limao-40);
  -webkit-mask: url("../assets/graficos/folha-cepera.svg") center / contain no-repeat;
  mask: url("../assets/graficos/folha-cepera.svg") center / contain no-repeat;
}
.cep-recs__eco-linha--1 { margin-left: -6vw; }
.cep-recs__eco-linha--2 { margin-left: -38vw; }

/* ---- cabeça ---- */
.cep-recs__cabeca {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 38px;
}
.cep-recs__titulo {
  margin: 0;
  /* 0.84 com a DEMO; com a oficial o acento do Ê (VOCÊ) batia no QUANTO */
  line-height: 1;
  color: var(--cep-verde-escuro);
}
/* "VOCE TEM?" é a segunda linha do título: destaque inline (<em>) */
.cep-recs__titulo em { display: block; font-style: normal; margin-left: 1.4em; color: var(--cep-verde); }
.cep-recs__linha {
  max-width: 32ch;
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--cep-verde-escuro-78);
}

/* ---- a régua ---- */
.cep-regua { position: relative; margin-bottom: 54px; }
.cep-regua__leitura {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 18px;
}
.cep-regua__valor {
  /* OverHeat oficial (02/10): agora tem algarismos, então o tempo sai na
     fonte da marca (antes, com a DEMO, ia na fonte de texto) */
  font-family: var(--cep-fonte-titulo);
  font-size: clamp(32px, 3.2vw, 48px);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--cep-laranja);
}
.cep-regua__conta {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--cep-verde-escuro-60);
}

.cep-regua__pista {
  position: relative;
  height: 6px;
  background: var(--cep-verde-escuro-16);
  border-radius: 99px;
}
/* o quanto do tempo está escolhido: o JS passa a fração em --cep-f (1h por
   padrão). O centro do polegar (28px) anda de 14px até a largura menos 14px,
   então a barra usa a mesma conta para terminar no meio da bolinha
   (revisão da Aléxia, 14/10: a barra ia à frente). */
.cep-regua__pista::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  width: calc(14px + var(--cep-f, 0.5253) * (100% - 28px));
  background: var(--cep-verde-escuro);
  border-radius: 99px;
}
/* marcas em fluxo, logo abaixo da pista, na mesma escala (log) do preenchimento */
.cep-regua__marcas { position: relative; height: 20px; margin: 12px 14px 0; }
.cep-regua__marca {
  position: absolute;
  transform: translateX(-50%);
  padding: 4px 6px;
  border: 0;
  border-radius: 6px;
  background: none;
  font-family: var(--cep-fonte-texto);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--cep-verde-escuro-42);
  white-space: nowrap;
  cursor: pointer;
  transition: color .2s ease, background .2s ease;
}
/* rodada 4: as marcas são atalhos da régua */
.cep-regua__marca:hover { color: var(--cep-verde-escuro); background: var(--cep-limao-22); }
.cep-regua__marca:focus-visible { outline: 2px solid var(--cep-verde); outline-offset: 2px; }
.cep-regua__marca::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -10px;
  width: 1px;
  height: 6px;
  background: var(--cep-verde-escuro-30);
}
.cep-regua__marca--15  { left: 0.00%; }
.cep-regua__marca--30  { left: 26.26%; }
.cep-regua__marca--60  { left: 52.53%; }
.cep-regua__marca--120 { left: 78.79%; }
.cep-regua__marca--210 { left: 100.00%; }

/* o input cobre a pista inteira; só o polegar aparece */
.cep-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;
}
.cep-regua__input:active { cursor: grabbing; }
.cep-regua__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 3px solid var(--cep-verde-escuro);
  background: var(--cep-limao);
  box-shadow: 3px 4px 0 var(--cep-verde-escuro-22);
  cursor: grab;
}
.cep-regua__input::-moz-range-thumb {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 3px solid var(--cep-verde-escuro);
  background: var(--cep-limao);
  box-shadow: 3px 4px 0 var(--cep-verde-escuro-22);
  cursor: grab;
}
.cep-regua__input:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--cep-laranja); outline-offset: 2px; }

/* ---- a tira ---- */
.cep-tira {
  display: flex;
  align-items: stretch;
  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. */
.cep-pin {
  flex: 1 1 0;
  min-width: 0;
  max-width: 332px;
  display: block;
}
.cep-pin[hidden] { display: none; }

/* rodada 4: o card da receita no estilo dos cards do guia (verde-escuro, foto
   encaixada com canto arredondado, o tempo numa etiqueta limão) */
.cep-pin {
  display: flex;
  flex-direction: column;
  padding: 12px 12px 20px;
  border-radius: 20px;
  background: var(--cep-verde-escuro);
  color: var(--cep-creme);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.cep-pin:hover { transform: translateY(-6px); color: var(--cep-creme); }
.cep-pin__foto {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 14px;
  background: var(--cep-verde-escuro-06);
}
.cep-pin__img {
  display: block;
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.cep-pin:hover .cep-pin__img { transform: scale(1.05); }
.cep-pin__tempo {
  position: absolute;
  right: 10px;
  top: 10px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--cep-limao);
  color: var(--cep-verde-escuro);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}
.cep-pin__nome {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 2.48em;
  margin-top: 14px;
  padding: 0 4px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.24;
}
.cep-pin__produto {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  margin-top: 5px;
  padding: 0 4px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--cep-creme-75);
}
.cep-pin__ir {
  display: inline-flex;
  gap: 6px;
  margin-top: auto;
  padding: 12px 4px 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--cep-limao);
}
.cep-pin__seta { transition: transform .3s ease; }
.cep-pin:hover .cep-pin__seta { transform: translateX(4px); }

/* tipo de prato, logo abaixo da régua */
.cep-recs__tipos { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 30px; }
.cep-recs .cep-regua { margin-bottom: 28px; }
.cep-recs__vazio { margin: 0; padding: 40px 0; font-size: 17px; color: var(--cep-verde-escuro-80); }

/* a que entra (troca de tempo ou sorteio) chega deslizando */
.cep-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 */
.cep-pin.is-sorteada { animation: pinPula 1.1s ease; }
.cep-pin.is-sorteada { box-shadow: 0 0 0 4px var(--cep-limao); }
@keyframes pinPula {
  0%, 100% { transform: none; }
  30%      { transform: translateY(-14px); }
  60%      { transform: translateY(-5px); }
}

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

@media (prefers-reduced-motion: reduce) {
  .cep-pin__img, .cep-pin__ir, .cep-recs-sorte { transition: none; }
  .cep-pin.is-nova, .cep-pin.is-sorteada { animation: none; }
  .cep-pin__ir { opacity: 1; transform: none; }
}

/* ---- tablet e celular: a tira vira trilho que rola de lado ----
   Oito receitas espremidas numa linha ficavam com 40px de largura cada.
   O filtro pela régua continua igual (pin[hidden] some do trilho). */
@media (max-width: 1024px) {
  /* el-ok A326: o trilho sangra até a borda da tela para o card cortado anunciar que rola */
  .cep-tira {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin: 0 calc(-1 * var(--cep-gutter-tablet));
    padding: 0 var(--cep-gutter-tablet) 6px;
    scroll-padding-left: var(--cep-gutter-tablet);
  }
  .cep-tira::-webkit-scrollbar { display: none; }
  .cep-pin { flex: 0 0 200px; max-width: none; scroll-snap-align: start; }
  .cep-pin__ir { opacity: 1; transform: none; }
}
@media (max-width: 767px) {
  .cep-recs { padding: 76px 0 84px; }
  .cep-recs__cabeca { flex-direction: column; align-items: flex-start; gap: 16px; }
  .cep-recs__pe { flex-wrap: wrap; }
  /* el-ok A326: o trilho sangra até a borda da tela para o card cortado anunciar que rola */
  .cep-tira {
    margin: 0 calc(-1 * var(--cep-gutter-celular));
    padding: 0 var(--cep-gutter-celular) 6px;
    scroll-padding-left: var(--cep-gutter-celular);
  }
  .cep-pin { flex-basis: 44vw; }
  .cep-pin__nome { font-size: 15px; }
}

/* 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: bindParcerias no js/app.js.
   As 5 fotos e os 5 textos estão no HTML: com JS aparece um de cada vez; sem
   JS (e no editor) aparecem todos. */
.cep-parcerias {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(380px, 1fr);
  min-height: calc(100vh - var(--cep-topo-alt));
  background: var(--cep-verde-inst);
  color: var(--cep-creme);
  overflow: hidden;
  outline: none;
}
.cep-parcerias:focus-visible { box-shadow: inset 0 0 0 2px var(--cep-creme-50); }

/* ---- a foto ---- */
.cep-parc-foto { position: relative; overflow: hidden; }
.cep-parc-foto__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
}
/* sem JS fica a primeira por cima das outras */
.cep-parc-foto__img--primeira { z-index: 1; }
/* com JS: só a do parceiro em foco (.is-on), com crossfade e zoom lento */
.has-js .cep-parc-foto__img {
  opacity: 0;
  transform: scale(1.16);
  transition: opacity .7s ease;
}
.has-js .cep-parc-foto__img.is-on {
  opacity: 1;
  transform: scale(1.02);
  transition: opacity .7s ease, transform 7s linear;
}

/* ---- painel ---- */
.cep-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);
}
/* recorte EXATO do institucional, tracado do gif e espelhado.
   +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. */
.cep-parc-painel::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 0;
  height: 100%;
  width: calc(clamp(150px, 13vw, 280px) + 1px);
  margin-right: -1px;
  background: url("../assets/graficos/corte-institucional-espelhado.svg") no-repeat 0 0 / 100% 100%;
  pointer-events: none;
}
.cep-rotulo--parc { color: var(--cep-limao); margin: 0 0 8px; }
.cep-parc-painel__marca { font-size: clamp(22px, 2vw, 32px); color: var(--cep-creme); }

/* lettering rotativo em loop ("SERVE SABOR," ⟷ "SERVE CEPERA.", tudo creme) */
.cep-troca {
  display: inline-flex;
  overflow: hidden;
  height: 0.98em;
  vertical-align: bottom;
}
.cep-troca__pista {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  animation: trocaRola 5.6s cubic-bezier(.76, 0, .24, 1) infinite;
}
.cep-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 ---- */
.cep-parc-painel__meio { display: flex; flex-direction: column; align-items: flex-start; }
.cep-parc-bloco { display: flex; flex-direction: column; align-items: flex-start; }
/* com JS, um bloco por vez: o do parceiro em foco */
.has-js .cep-parc-bloco:not(.is-foco) { display: none; }

/* 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. */
.cep-parc-nome {
  font-family: var(--cep-fonte-texto);
  font-weight: 700;
  font-size: clamp(36px, 3.2vw, 56px);
  letter-spacing: -0.015em;
  line-height: 1.02;
  margin: 0;
  color: var(--cep-creme);
}
/* a janela (container em volta do título) e o nome que sobe por dentro dela */
.cep-parc-nome__janela { overflow: hidden; }
.cep-parcerias.is-trocando .cep-parc-nome { transform: translateY(112%); transition: none; }
.cep-parcerias:not(.is-trocando) .cep-parc-nome {
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
.cep-parc-sobre {
  margin: 14px 0 0;
  max-width: 42ch;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.55;
  color: var(--cep-creme-92);
  transition: opacity .45s ease .1s;
}
.cep-parcerias.is-trocando .cep-parc-sobre { opacity: 0; transition: none; }
.cep-parc-btn { margin-top: 22px; align-self: flex-start; }

/* ---- índice tipográfico ---- */
.cep-parc-indice { display: flex; flex-direction: column; }
.cep-parcI {
  display: flex;
  align-items: baseline;
  gap: 16px;
  width: 100%;
  padding: 13px 2px;
  background: none;
  border: none;
  border-top: 1px solid var(--cep-creme-22);
  color: var(--cep-creme-60);
  font-family: var(--cep-fonte-texto);
  text-align: left;
  cursor: pointer;
  transition: color .25s ease;
}
.cep-parcI--ultimo { border-bottom: 1px solid var(--cep-creme-22); }
.cep-parcI:hover { color: var(--cep-creme); }
/* no hover o texto anda 8px para a direita (a linha fica parada) */
.cep-parcI__num,
.cep-parcI__nome { transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.cep-parcI:hover .cep-parcI__num,
.cep-parcI:hover .cep-parcI__nome { transform: translateX(8px); }
.cep-parcI__num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.cep-parcI__nome {
  font-family: var(--cep-fonte-texto);
  font-weight: 600;
  font-size: clamp(16px, 1.2vw, 19px);
  letter-spacing: 0;
  line-height: 1.15;
}
/* el-ok A323: a seta do índice aparece no parceiro em foco e no hover */
.cep-parcI__seta {
  margin-left: auto;
  font-size: 16px;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .25s ease, transform .3s ease;
}
.cep-parcI.is-foco { color: var(--cep-limao); cursor: default; }
.cep-parcI.is-foco .cep-parcI__seta,
.cep-parcI:hover .cep-parcI__seta { opacity: 1; transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .cep-troca__pista { animation: none; transform: translateY(-1.35em); }
  .has-js .cep-parc-foto__img, .has-js .cep-parc-foto__img.is-on { transition: opacity .3s ease; transform: scale(1.02); }
  .cep-parcI, .cep-parcI__num, .cep-parcI__nome { transition: none; }
  .cep-parcerias:not(.is-trocando) .cep-parc-nome { transition: none; }
}

/* ---- tablet e celular: foto em cima, painel embaixo ----
   O recorte vertical (a curva do institucional) só faz sentido lado a lado:
   empilhado, sai. */
@media (max-width: 1024px) {
  .cep-parcerias { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .cep-parc-foto { height: min(72vw, 560px); }
  .cep-parc-painel::before { display: none; }
  .cep-parc-painel { padding: 36px var(--cep-gutter-tablet) 44px; }
}
@media (max-width: 767px) {
  .cep-parc-painel { padding: 36px var(--cep-gutter-celular) 44px; }
}

/* 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. */
.cep-ig {
  position: relative;
  background: var(--cep-verde-escuro);
  color: var(--cep-creme);
  padding: 96px 0 104px;
  overflow: hidden;
}
.cep-ig__tex {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: 0.4;
  pointer-events: none;
}

/* ---- cabeça: avatar + arroba, com cara de perfil ---- */
.cep-ig__marca { display: flex; align-items: center; gap: 20px; }
.cep-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(--cep-verde-escuro);
  box-shadow: 0 0 0 3px var(--cep-limao);
  flex: none;
}
.cep-ig__bio {
  margin: 8px 0 0;
  font-size: 14.5px;
  color: var(--cep-creme-85);
}

/* ---- cabeça: o arroba É a headline ---- */
.cep-ig__cabeca {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.cep-ig__arroba {
  margin: 0;
  line-height: 0.9;
  color: var(--cep-creme);
}
.cep-ig__conta {
  margin: 6px 0 0;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--cep-creme-72);
}
.cep-ig__conta b { color: var(--cep-limao); font-weight: 700; }
/* o "·" entre os dois números */
.cep-ig__conta em { font-style: normal; margin: 0 6px; color: var(--cep-creme-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. */
.cep-ig__mosaico {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.cep-ig-post {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 14px;
  background: var(--cep-preto-20);
}
.cep-ig-post--destaque { grid-column: span 2; grid-row: span 2; }

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

/* selo do tipo de publicação, como no app */
.cep-ig-post__tipo {
  position: absolute;
  right: 10px;
  top: 10px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--cep-preto-42);
  color: var(--cep-creme);
  backdrop-filter: blur(4px);
  transition: opacity .25s ease;
}
.cep-ig-post__tipo-icone {
  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 */
.cep-ig-post__tipo-icone--reel { fill: currentColor; stroke: none; }
.cep-ig-post:hover .cep-ig-post__tipo { opacity: 0; }

/* véu com a legenda e as curtidas: só no hover, como no perfil */
/* el-ok A323 A325: a legenda e as curtidas aparecem no hover, como no perfil do Instagram; o véu fica dentro do próprio link do post, então o clique continua sendo do link */
.cep-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, var(--cep-verde-escuro-92) 0%, var(--cep-verde-escuro-55) 45%, var(--cep-verde-escuro-00) 100%);
  opacity: 0;
  transition: opacity .3s ease;
}
.cep-ig-post:hover .cep-ig-post__veu,
.cep-ig-post:focus-visible .cep-ig-post__veu { opacity: 1; }

.cep-ig-post__legenda {
  font-size: 13px;
  line-height: 1.4;
  color: var(--cep-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;
}
.cep-ig-post__legenda--destaque { font-size: 15px; -webkit-line-clamp: 4; }

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

.cep-ig__nota {
  margin: 26px 0 0;
  font-size: 12.5px;
  color: var(--cep-creme-55);
}

/* ---- último tile: o convite "Viu a gente por aí?" (02/10) ----
   Fica DENTRO da grade (referência: o "Tirou foto?" do cliente): ícone do
   Instagram desenhado nas proporções do glifo oficial, título na OverHeat,
   o texto e o perfil. O tile inteiro leva ao Instagram. */
.cep-ig-post--mais {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding: clamp(16px, 1.6vw, 24px);
  background: var(--cep-limao);
  color: var(--cep-verde-escuro);
  transition: background .3s ease;
}
.cep-ig-post--mais:hover { background: var(--cep-creme); }
.cep-ig-mais__icone { width: clamp(38px, 3.6vw, 54px); height: auto; margin-bottom: auto; }
.cep-ig-mais__titulo {
  font-family: var(--cep-fonte-titulo);
  font-size: clamp(20px, 1.85vw, 28px);
  line-height: 1;
}
.cep-ig-mais__texto { font-size: clamp(12.5px, 1vw, 14.5px); font-weight: 500; line-height: 1.35; }
.cep-ig-mais__arroba {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 800;
}
.cep-ig-mais__seta { transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.cep-ig-post--mais:hover .cep-ig-mais__seta { transform: translateX(6px); }

/* ---- entrada: os tiles sobem em cascata pela diagonal ----
   has-cena é o JS que põe (só quando vai animar). */
.cep-ig.has-cena .cep-ig-post { opacity: 0; transform: translateY(26px); }
.cep-ig.has-cena.is-vivo .cep-ig-post {
  opacity: 1;
  transform: none;
  transition: opacity .55s ease var(--cep-d, 0ms), transform .55s cubic-bezier(.2,.8,.2,1) var(--cep-d, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .cep-ig-post__img, .cep-ig-post__veu, .cep-ig-post__tipo, .cep-ig-mais__seta { transition: none; }
}

/* ---- celular: arroba cabe na linha, mosaico em 3 colunas ----
   Em 3 colunas o destaque 2x2 + os 8 quadrados fecham 4 linhas exatas. */
@media (max-width: 767px) {
  .cep-ig { padding: 72px 0 84px; }
  .cep-ig__marca { gap: 12px; }
  .cep-ig__avatar { width: 60px; height: 60px; }
  /* 14 caracteres em OverHeat ~ 8,7em: divide a largura livre por 9 */
  .cep-ig__arroba { font-size: min(calc((100vw - 2 * var(--cep-gutter-celular) - 72px) / 9), 76px); }
  .cep-ig__cabeca { gap: 20px; margin-bottom: 28px; }
  .cep-ig__mosaico { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  /* o convite não cabe num quadrado de ~110px: vira a última linha inteira, e
     os 2 últimos posts saem para a grade continuar fechada (2x2 + 5 + 3) */
  .cep-ig-post--mais { grid-column: 1 / -1; aspect-ratio: auto; }
  .cep-ig-post:nth-child(7),
  .cep-ig-post:nth-child(8) { display: 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. */
.cep-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 */
.cep-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;
  z-index: 0;
}
.cep-news__pista {
  display: flex;
  width: max-content;
  font-family: var(--cep-fonte-titulo);
  font-size: clamp(70px, 11vw, 168px);
  line-height: 1;
  color: var(--cep-limao-55);
  white-space: nowrap;
  animation: newsCorre 34s linear infinite;
}
.cep-news__frase { padding-right: 60px; }
/* -50%: metade da pista, que é a primeira metade repetida */
@keyframes newsCorre {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.cep-news {
  position: relative;
  z-index: 1;
  background: var(--cep-laranja);
  color: var(--cep-creme);
  border-radius: 28px;
  overflow: hidden;
  padding: 66px 56px;
  box-shadow: 0 26px 60px var(--cep-verde-escuro-28);
}
/* o cartão só INVADE o bloco de cima quando vem logo após o Instagram (verde
   escuro, desenhado pra isso): na home e na institucional. Nas outras páginas
   ele segue normal, sem encavalar a seção anterior. */
/* el-ok A326: o cartão da newsletter sobe sobre o fim do bloco do Instagram, que foi desenhado para isso */
.cep-ig + .cep-newsletter .cep-news { margin-top: -130px; }

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

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

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

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

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

.cep-news__btn {
  flex: 0 0 auto;
  background: var(--cep-verde-escuro);
  color: var(--cep-creme);
  border: none;
  border-radius: 999px;
  padding: 18px 30px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
}
.cep-news__btn:hover { background: var(--cep-creme); color: var(--cep-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. */
.cep-news__ok {
  flex: 1 1 100%;
  margin: 2px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--cep-creme);
}

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

/* ---- tablet e celular ---- */
@media (max-width: 1024px) {
  .cep-news__grade { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 767px) {
  .cep-news { padding: 40px 24px; border-radius: 20px; }
  /* el-ok A326: o cartão da newsletter sobe sobre o fim do bloco do Instagram, que foi desenhado para isso */
  .cep-ig + .cep-newsletter .cep-news { margin-top: -80px; }
  .cep-news__lead { font-size: 18px; }
  .cep-news__texto { font-size: 15px; }
  .cep-news__btn { flex: 1 1 100%; }
}

/* Rodapé (footer do Theme Builder). Colunas, redes e links legais vêm de
   dados/footer.json: adicionar link é editar o JSON.
   02/10, pedido do cliente: logo oficial COLORIDO, altura menor e links
   reorganizados. Estrutura: marca (logo, assinatura "Vai com tudo. Vai com
   Cepêra.", redes e copyright) + 4 colunas, e uma faixa única embaixo só com
   os documentos legais. Canal de Ética, Canal da Mulher e Investidores
   passaram para Atendimento (são canais de contato). */
.cep-rodape {
  position: relative;
  background: var(--cep-verde);  /* Pantone 7731 C "Frescor da Horta" (brandbook p.41), pedido do Dante 14/10: o verde-escuro era a cor do logo */
  color: var(--cep-creme);
  padding: 52px 0 20px;
  overflow: hidden;
}

.cep-rodape__grade {
  display: grid;
  grid-template-columns: minmax(230px, 1.25fr) repeat(4, minmax(0, 0.8fr));
  gap: clamp(24px, 2.6vw, 44px);
  padding-bottom: 34px;
  border-bottom: 1px solid var(--cep-limao-30);
}

.cep-rodape__logo { height: 62px; width: auto; display: block; margin-bottom: 14px; }
.cep-rodape__tagline { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--cep-limao); }
.cep-rodape__copy { margin: 18px 0 0; font-size: 12px; line-height: 1.5; color: var(--cep-creme-60); }

/* redes sociais: pílulas de traço */
.cep-rodape__redes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.cep-rodape__rede {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--cep-creme-28);
  color: var(--cep-creme);
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.cep-rodape__rede-icone {
  width: 18px; height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cep-rodape__rede:hover,
.cep-rodape__rede:focus-visible { background: var(--cep-limao); color: var(--cep-verde-escuro); border-color: var(--cep-limao); transform: translateY(-2px); }

.cep-rodape__titulo {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--cep-limao);
  margin: 4px 0 14px;
}
.cep-rodape__links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  line-height: 1.35;
}
.cep-rodape__link { color: var(--cep-creme-86); transition: color .2s ease; }
.cep-rodape__link:hover,
.cep-rodape__link:focus-visible { color: var(--cep-limao); }

/* faixa única de baixo: documentos legais à esquerda, agência à direita */
.cep-rodape__base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px 32px;
  flex-wrap: wrap;
  padding-top: 18px;
}
.cep-rodape__legais { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.cep-rodape__legal { font-size: 12.5px; color: var(--cep-creme-70); transition: color .2s ease; }
.cep-rodape__legal:hover,
.cep-rodape__legal:focus-visible { color: var(--cep-limao); }

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

/* tablet (até 1024): a marca vira uma faixa inteira em cima das 4 colunas */
@media (max-width: 1024px) {
  .cep-rodape__grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cep-rodape__marca {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 24px;
  }
  .cep-rodape__logo { grid-row: 1 / 3; margin: 0; }
  .cep-rodape__tagline { align-self: end; }
  .cep-rodape__copy { align-self: start; margin-top: 6px; }
  .cep-rodape__redes { grid-column: 3; grid-row: 1 / 3; margin: 0; }
}

/* celular: uma coluna só */
@media (max-width: 767px) {
  .cep-rodape { padding: 44px 0 22px; }
  .cep-rodape__grade { grid-template-columns: 1fr 1fr; gap: 30px 24px; padding-bottom: 30px; }
  .cep-rodape__marca { display: block; grid-column: 1 / -1; }
  .cep-rodape__logo { height: 54px; margin-bottom: 14px; }
  .cep-rodape__redes { margin-top: 16px; }
  .cep-rodape__base { align-items: flex-start; flex-direction: column; gap: 16px; }
}

/* 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. */

.cep-faixa--estreita {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 var(--cep-gutter);
}
@media (max-width: 1024px) {
  .cep-faixa--estreita { padding: 0 var(--cep-gutter-tablet); }
}
@media (max-width: 767px) {
  .cep-faixa--estreita { padding: 0 var(--cep-gutter-celular); }
}

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

/* ---- CAPA PADRÃO DAS INTERNAS (02/09; formato do KV desde 01/10) ----
   Formato do KV da campanha: a foto ocupa os dois primeiros terços e o texto
   fica no último. O verde invade a foto com a máscara do KV (corte-kv.svg,
   medida na peça): entra em 43% da largura no topo, encosta na linha dos 2/3
   a 40% da altura e desce até 55% na base. Esse trecho (0,237 da capa, 35,5%
   da foto) é 71% da largura do painel. O texto começa logo depois dos 2/3,
   como o título da peça. Componentes: capa-interna (páginas e notícias),
   capa-categoria e capa-sust-artigo. A versão espelhada (cep-chero--esq) é o
   topo de A Cepêra e o "Feito com propósito" da home, os dois com o GIF.
   A página de produto é a exceção: tem ficha, não capa. */
.cep-chero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  background: var(--cep-verde-inst);
}
.cep-chero__foto { position: relative; overflow: hidden; }
/* a altura da capa vem da foto: clamp no lugar da proporção natural do arquivo
   (que a 1920px deixaria a capa com 800px); o min-height acompanha o painel
   quando o texto for mais alto que a foto */
.cep-chero__img {
  width: 100%;
  /* 02/10: um pouco mais baixa (era clamp(440px, 40vw, 600px), ~575px a
     1440): o conteúdo da página sobe para a primeira dobra */
  height: clamp(380px, 33vw, 500px);
  min-height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
}
.cep-chero__painel {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--cep-verde-inst);
  color: var(--cep-creme);
  padding: 54px 12% 54px 9%;
}
/* a máscara; +1px cobre a costura em pixel fracionário */
.cep-chero__painel::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 0;
  height: 100%;
  width: calc(71% + 1px);
  margin-right: -1px;
  background: url("../assets/graficos/corte-kv.svg") no-repeat 0 0 / 100% 100%;
  pointer-events: none;
}
.cep-chero__texto { position: relative; max-width: 30rem; }
.cep-migalhas--claras { color: var(--cep-creme-60); padding-top: 0; margin-bottom: 14px; flex-wrap: wrap; }
.cep-migalhas--claras b { color: var(--cep-creme); }
.cep-migalhas--claras a:hover { color: var(--cep-limao); }

/* título: 45px em TODAS as capas (decisão de 01/10). Nomes de várias palavras
   quebram em linhas; a palavra que não cabe na largura do texto é dividida
   na sílaba, com hífen (SUSTEN-TABILIDADE), e só palavras de 10 letras ou
   mais podem ser divididas. Sem dicionário de hifenização no navegador, a
   palavra quebra sem hífen em vez de vazar (overflow-wrap). */
.cep-chero__titulo {
  margin: 0 0 20px;
  font-size: 45px;
  line-height: 0.92;
  color: var(--cep-creme);
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 10 4 4;
  overflow-wrap: break-word;
}
/* título com o ponto de quebra escolhido à mão: um hífen invisível (U+00AD,
   escrito \u00ad no JSON) marca onde a palavra pode dividir, e o navegador não
   procura outros pontos. Sustentabilidade: SUSTENTA- / BILIDADE. Onde a
   palavra cabe inteira (1920px ou mais), fica numa linha só. */
.cep-chero__titulo--quebra-manual { -webkit-hyphens: manual; hyphens: manual; }
/* título de NOTÍCIA e de matéria na capa: fonte de texto (é uma frase longa e
   costuma ter número), mas a cor continua sendo a do painel; frase não ganha
   hífen */
.cep-chero__titulo--texto {
  font-family: var(--cep-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(--cep-creme);
  -webkit-hyphens: manual;
  hyphens: manual;
}
.cep-chero__chapeu { color: var(--cep-limao); margin-bottom: 10px; }

.cep-chero__lead {
  margin: 0 0 20px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--cep-creme-86);
}
.cep-chero__conta {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--cep-creme-60);
}
.cep-chero__conta b { color: var(--cep-limao); font-size: 16px; }

/* ---- ESPELHADA (A Cepêra): o texto continua à esquerda, no primeiro terço,
   e a foto vai para os dois últimos. A máscara é a mesma, virada. ---- */
.cep-chero--esq { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
/* posição explícita só no painel: a foto ocupa a célula que sobra e continua
   ANTES no DOM, então o painel (e a máscara) pinta por cima dela */
.cep-chero__painel--esq { grid-column: 1; grid-row: 1; padding: 54px 9% 54px 12%; }
.cep-chero__painel--esq::before {
  right: auto;
  left: 100%;
  margin: 0 0 0 -1px;
  transform: scaleX(-1);
}
/* foto que já traz o verde e o recorte desenhados na arte (o GIF da home):
   o dobro da largura da coluna, alinhada à direita e pelo topo, para o recorte
   do GIF cair inteiro embaixo da máscara e ficar só a pessoa à vista. Quando a
   seção é alta (tablet com bastante texto), o GIF passa a ser cortado nas
   laterais: 65% o puxa para a esquerda o bastante para o recorte continuar
   embaixo da máscara (no desktop ele não é cortado nas laterais e os 65% não
   mudam nada) */
.cep-chero__foto--arte { display: flex; flex-direction: row; justify-content: flex-end; }
.cep-chero__img--arte { width: 200%; flex-shrink: 0; object-position: 65% 0; }
/* os números do institucional no terço (A Cepêra: Desde 1947 · +15 países;
   home: Desde 1947 · +150 produtos). Cada número fica numa linha só e cada
   coluna tem a largura do seu número; o tamanho acompanha a tela para os dois
   caberem lado a lado (os dois da home somam 11,4em + 24px de vão, e o texto
   tem 26,3% da tela). No tablet o painel fica estreito demais para dois pares
   lado a lado: um embaixo do outro */
.cep-inst__numeros--capa { grid-template-columns: auto auto; gap: 24px; }
.cep-inst__num--capa { font-size: clamp(21px, calc(2.3vw - 3px), 34px); white-space: nowrap; }

/* tablet: o terço fica estreito para o texto; a foto passa a 3/5 e a máscara
   mantém a mesma invasão relativa à foto (0,355 dela = 53% do painel) */
@media (max-width: 1024px) {
  .cep-chero { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .cep-chero--esq { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .cep-chero__painel::before { width: calc(53% + 1px); }
  .cep-inst__numeros--capa { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}
/* celular: empilha, foto em cima e texto embaixo (o resto está no bloco do fim
   do arquivo, junto das grades) */
@media (max-width: 767px) {
  .cep-chero__img { height: 100%; min-height: 0; }
  .cep-chero--esq { grid-template-columns: minmax(0, 1fr); }
  .cep-chero__painel--esq { grid-column: auto; grid-row: auto; padding: 36px var(--cep-gutter-celular) 44px; }
  .cep-chero__img--arte { width: 100%; object-position: right center; }
  .cep-inst__numeros--capa { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
}

/* ---- capa simples, sem foto: a que o `node build.cjs --nova` cria ---- */
.cep-capa {
  position: relative;
  background: var(--cep-creme);
  padding: 0 0 64px;
}
.cep-capa__grade {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
  padding-top: 40px;
}
.cep-capa__titulo {
  margin: 0;
  font-size: clamp(52px, 9vw, 132px);
  line-height: 0.82;
  color: var(--cep-verde-escuro);
  text-shadow: 3px 3px 0 var(--cep-limao-55), 6px 6px 0 var(--cep-verde-escuro-10);
}
.cep-capa__lead {
  max-width: 46ch;
  margin: 22px 0 0;
  font-size: 18px;
  line-height: 1.55;
  color: var(--cep-verde-escuro-80);
}

/* ---- seções ---- */
.cep-secao { padding: 84px 0; background: var(--cep-branco-quente); }
.cep-secao + .cep-secao { border-top: 1px solid var(--cep-verde-escuro-08); }
.cep-secao--maisnews { background: var(--cep-creme); }
.cep-secao--relacionados { background: var(--cep-branco-quente); }

.cep-secao__titulo {
  margin: 0;
  /* sem font-size: usa o --cep-titulo-secao do .cep-display, como todo o resto */
  line-height: 0.92;
  color: var(--cep-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. */
.cep-secao__titulo--relacionados { font-size: clamp(24px, 2.6vw, 38px); }
.cep-secao__titulo-menor {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--cep-verde);
}

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

/* ---- grade de notícias ---- */
.cep-ngrade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 22px; }
/* na notícia, só três em uma fileira */
.cep-ngrade--tres > .cep-ncard:nth-child(n+4) { display: none; }
.cep-ncard { display: block; }
.cep-ncard__foto {
  display: block;
  overflow: hidden;
  border-radius: 16px;
  background: var(--cep-verde-escuro-06);
}
.cep-ncard__img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.cep-ncard:hover .cep-ncard__img { transform: scale(1.04); }
.cep-ncard__chapeu {
  display: block;
  margin-top: 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--cep-laranja);
}
.cep-ncard__titulo {
  display: block;
  margin-top: 8px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.28;
  color: var(--cep-verde-escuro);
}
/* el-ok A323: o "Ler →" aparece no hover do card da notícia (o card inteiro já é o link) */
.cep-ncard__ir {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--cep-verde);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .25s ease, transform .25s ease;
}
.cep-ncard__ir em { font-style: normal; }
.cep-ncard:hover .cep-ncard__ir { opacity: 1; transform: none; }
/* índice de busca do card (lido pelo JS da listagem, nunca exibido) */
.cep-ncard__busca { display: none; }

@media (prefers-reduced-motion: reduce) {
  .cep-pcard, .cep-ncard__img, .cep-ncard__ir { transition: none; }
}

/* ---- celular: a capa empilha (foto em cima, painel embaixo) e as grades
   viram uma coluna. O recorte vertical só faz sentido lado a lado: sai. ---- */
@media (max-width: 767px) {
  .cep-chero { grid-template-columns: minmax(0, 1fr); }
  .cep-chero__foto { height: min(62vw, 360px); }
  .cep-chero__painel { padding: 36px var(--cep-gutter-celular) 44px; }
  .cep-chero__painel::before { display: none; }
  .cep-ngrade { grid-template-columns: minmax(0, 1fr); }
}

/* HERO PADRÃO DAS INTERNAS (rodada 4, 03/10): componentes/capa-interna.html.
   A régua é a mesma em todas as páginas (aprovada na rodada 3):
     altura      520px a 1440 (36,1vw), mínimo 440px (era 600 até 04/10)
     coluna      490px de texto, sempre À ESQUERDA (desde 04/10), a 6,667vw da borda
     topo        o texto começa a 6,1vw (88px a 1440)
     título      OverHeat 5vw (72px a 1440), entrelinha 1 (o acento do Ê não
                 encosta na linha de cima); mínimo 44px
     apoio       Outfit 500 18px; migalha 13px; selo 13px caixa alta
   Humanizado: painel colorido à esquerda com o texto e a foto/vídeo à direita.
   O CORTE é exatamente o do bloco "Sabor pra valer" da home: corte-kv.svg
   (medido na peça KV da p.62 do brandbook), aqui espelhado
   (corte-kv-esq.svg), na MESMA proporção da home: a caixa do corte tem 0,718
   da altura de largura (na home, 341 de largura para 475 de altura).
   O painel + o corte são o ::before (retângulo + curva somados na máscara) e
   o padrão de potes é o ::after (o mesmo desenho ∩ padrao-potes-kv.svg).
   Na faixa, o ::after é o padrão na largura toda e o ::before vira o grafismo
   da variante. Cada página só troca as variáveis de cor. */
.cep-hcapa {
  --fundo: var(--cep-verde);
  --tinta: var(--cep-branco);
  --titulo: var(--cep-creme);
  --acento: var(--cep-limao);
  --cta-tx: var(--cep-verde-escuro);
  --selo: var(--cep-limao);
  --padrao: var(--cep-limao-14);
  --padrao-m: url("../assets/graficos/padrao-potes-kv.svg") 0 0 / clamp(103px, 8.95vw, 129px) clamp(45px, 3.906vw, 56px) repeat;
  --hcapa-h: clamp(440px, 36.1vw, 520px);
  /* a borda da grade (.cep-faixa): em % para o texto alinhar ao pixel; o painel
     e o corte usam a mesma conta em vw (a diferença da barra de rolagem fica
     dentro do respiro de 40px à direita do texto) */
  --borda: max(var(--cep-gutter), calc((100% - var(--cep-faixa)) / 2 + var(--cep-gutter)));
  --borda-v: max(var(--cep-gutter), calc((100vw - var(--cep-faixa)) / 2 + var(--cep-gutter)));
  --texto-w: calc(min(490px, 38vw) + 40px);
  --painel-w: calc(var(--borda-v) + var(--texto-w));
  --curva-w: calc(0.718 * var(--hcapa-h));
  --forma: linear-gradient(var(--cep-preto), var(--cep-preto)) 0 0 / calc(var(--painel-w) + 3px) 100% no-repeat,
           url("../assets/graficos/corte-kv-esq.svg") var(--painel-w) 0 / var(--curva-w) 100% no-repeat;
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: grid;
  grid-template-columns: var(--borda) var(--texto-w) minmax(0, 1fr);
  grid-template-rows: auto;
  min-height: var(--hcapa-h);
  background: var(--fundo);
  color: var(--tinta);
}
.cep-hcapa::before,
.cep-hcapa::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.cep-hcapa::before {
  background: var(--fundo);
  -webkit-mask: var(--forma);
  -webkit-mask-composite: source-over;
  mask: var(--forma);
  mask-composite: add;
}
.cep-hcapa::after {
  background: var(--padrao);
  -webkit-mask: var(--padrao-m), var(--forma);
  -webkit-mask-composite: source-in, source-over;
  mask: var(--padrao-m), var(--forma);
  mask-composite: intersect, add;
}

.cep-hcapa__midia { position: absolute; top: 0; bottom: 0; right: 0; left: var(--painel-w); z-index: 0; }
.cep-hcapa__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cep-hcapa__img--topo { object-position: 50% 25%; }
.cep-hcapa__img--baixo { object-position: 50% 68%; }
.cep-hcapa__img--esq { object-position: 30% 50%; }
.cep-hcapa__img--dir { object-position: 100% 50%; }

.cep-hcapa__texto {
  grid-column: 2;
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: clamp(48px, 6.1vw, 88px) 40px 48px 0;
}
.cep-hcapa__mig { padding: 0; font-size: 13px; font-weight: 600; color: var(--tinta); flex-wrap: wrap; }
.cep-hcapa__mig b { color: var(--tinta); }
.cep-hcapa__selo {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--selo);
}
/* Sustentabilidade (revisão do Dante, 14/10): a palavra não quebra; num corpo
   que cabe inteira na coluna de texto */
.cep-hcapa--sust .cep-hcapa__titulo { font-size: clamp(34px, 3.4vw, 50px); white-space: nowrap; }
/* título de artigo (frase longa) em OverHeat, num corpo menor que o das
   páginas, para o topo não crescer com os títulos mais longos */
.cep-hcapa__titulo.cep-hcapa__titulo--artigo { font-size: clamp(28px, 2.7vw, 40px); }
/* nas marcas a frase vem DEPOIS do título (revisão da Aléxia, 14/10:
   "deixar o título em cima"), como linha de apoio */
.cep-hcapa__selo--depois { margin-top: 6px; font-size: 20px; font-weight: 700; line-height: 1.3; }
.cep-hcapa__titulo {
  /* o acento do Ê (CEPÊRA) sobe acima da caixa da linha: respiro da migalha */
  margin: 0.22em 0 0;
  font-size: clamp(44px, 5vw, 72px);
  /* o circunflexo do Ê sobe 32% acima das maiúsculas na OverHeat: com menos
     de 1,17 ele encosta na linha de cima (RECEITAS / CEPÊRA) */
  line-height: 1.18;
  text-transform: uppercase;
  color: var(--titulo);
  -webkit-hyphens: manual;
  hyphens: manual;
  overflow-wrap: break-word;
}
/* notícia e matéria: o título é uma frase, vai na fonte de texto */
.cep-hcapa__titulo--texto {
  font-family: var(--cep-fonte-texto);
  font-weight: 700;
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-transform: none;
}
.cep-hcapa__lead { margin: 0; font-size: 18px; font-weight: 500; line-height: 1.5; color: var(--tinta); }
.cep-hcapa__conta { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.01em; color: var(--selo); }
.cep-hcapa__cta { background: var(--acento); color: var(--cta-tx); }
.cep-hcapa__cta:hover { background: var(--titulo); color: var(--cta-tx); }

/* ---- faixa: cor cheia, texto à esquerda, palco à direita ---- */
.cep-hcapa--faixa { grid-template-columns: min(490px, 40%) minmax(0, 1fr); padding: 0 0 0 var(--borda); }
.cep-hcapa--faixa .cep-hcapa__texto { grid-column: 1; padding: clamp(48px, 6.1vw, 88px) 0 48px; }
.cep-hcapa--faixa::after { z-index: 0; -webkit-mask: var(--padrao-m); -webkit-mask-composite: source-over; mask: var(--padrao-m); mask-composite: add; }
.cep-hcapa--faixa::before { display: none; }
.cep-hcapa--faixa .cep-hcapa__texto { grid-column: 1; }
/* o palco tem altura definida (absoluto na metade direita) para as embalagens
   poderem ser medidas em % da altura do hero */
.cep-hcapa__palco {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: calc(var(--borda) + min(490px, 40%));
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.cep-hcapa__pack {
  height: var(--pack-h, 62%);
  width: auto;
  margin: 0 -2.4%;
  transform: translateY(24px);
  filter: drop-shadow(0 18px 22px var(--cep-preto-28));
}
.cep-hcapa__moldura {
  position: absolute;
  right: 6.667vw;
  top: 9%;
  width: 72%;
  height: 72%;
  overflow: hidden;
  border-radius: 46% 46% 26px 26px / 38% 38% 26px 26px;
}
.cep-hcapa__moldura-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Produtos: a família de embalagens na mesma base, sobre uma curva escura */
.cep-hcapa--produtos::before {
  width: auto;
  left: 0;
  top: auto;
  height: 25%;
  z-index: 1;
  background: var(--cep-verde-escuro);
  -webkit-mask: none;
  mask: none;
  clip-path: ellipse(75% 100% at 50% 100%);
}
.cep-hcapa--produtos { --pack-h: 54%; }
/* Categoria: duas embalagens maiores */
.cep-hcapa--categoria { --pack-h: 78%; }
/* Downloads: o grafismo de fundo é o ::before (o News virou o hero padrão em 23/10) */
.cep-hcapa--downloads { --pack-h: 86%; }
.cep-hcapa--downloads::before {
  width: 42%;
  left: auto;
  right: 6%;
  top: 42%;
  bottom: -12%;
  z-index: 1;
  background: var(--cep-laranja-forma);
  -webkit-mask: none;
  mask: none;
  border-radius: 46% 46% 0 0 / 60% 60% 0 0;
}
/* fita "VAI COM TUDO" no pé (News) */
.cep-hcapa__fita {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 24px;
  height: 64px;
  padding-left: 24px;
  overflow: hidden;
  white-space: nowrap;
  background: var(--cep-limao);
  font-family: var(--cep-fonte-titulo);
  font-size: 26px;
  color: var(--cep-verde-escuro);
}
.cep-hcapa__fita-palavra { display: inline-flex; align-items: center; gap: 24px; }
.cep-hcapa__fita-palavra::after {
  content: "";
  width: 40px;
  height: 20px;
  background: var(--cep-verde-escuro);
  -webkit-mask: url("../assets/graficos/folha-cepera.svg") center / contain no-repeat;
  mask: url("../assets/graficos/folha-cepera.svg") center / contain no-repeat;
}
/* Imprensa: a assinatura em repetição ao fundo e o texto num cartão */
/* el-ok A325: camada tipográfica decorativa (z-index 0) atrás do cartão; o texto e o botão ficam acima */
.cep-hcapa__eco {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  overflow: hidden;
  font-family: var(--cep-fonte-titulo);
  font-size: 110px;
  line-height: 0.9;
  white-space: nowrap;
  color: var(--eco, var(--cep-vinho-escuro));
}
.cep-hcapa__eco-linha:nth-child(even) { margin-left: -18%; }
.cep-hcapa--cartao .cep-hcapa__texto {
  align-self: start;
  margin: clamp(28px, 4.2vw, 60px) 0 0 -44px;
  padding: 44px;
  border-radius: 28px;
  background: var(--fundo);
}

/* ---- as cores de cada página e de cada marca ---- */
.cep-hcapa--verde-escuro { --fundo: var(--cep-verde-escuro); --padrao: var(--cep-limao-09); }
.cep-hcapa--limao {
  --fundo: var(--cep-limao); --tinta: var(--cep-verde-escuro); --titulo: var(--cep-verde-escuro);
  --acento: var(--cep-verde-escuro); --cta-tx: var(--cep-limao-claro); --selo: var(--cep-verde-escuro);
  --padrao: var(--cep-verde-escuro-09);
  --padrao-m: url("../assets/graficos/padrao-potes.svg") 0 0 / 150px 105px repeat;
}
.cep-hcapa--laranja {
  --fundo: var(--cep-laranja-graf); --tinta: var(--cep-verde-escuro); --titulo: var(--cep-verde-escuro);
  --acento: var(--cep-verde-escuro); --cta-tx: var(--cep-creme); --selo: var(--cep-verde-escuro); --padrao: var(--cep-laranja-forma);
}
.cep-hcapa--vinho {
  --fundo: var(--cep-vinho); --tinta: var(--cep-branco); --titulo: var(--cep-creme);
  --acento: var(--cep-creme); --cta-tx: var(--cep-vinho); --selo: var(--cep-creme); --padrao: var(--cep-preto-06);
}
/* Linha Cepêra (revisão da Aléxia, 14/10): o fundo de cada linha é diferente;
   aqui a Forma do pote em diagonal, mais escura sobre o verde, como na peça
   "Os clássicos da geladeira" que ela mandou de referência */
.cep-hcapa--linha-cepera {
  --padrao: var(--cep-verde-escuro-34);
  --padrao-m: url("../assets/graficos/padrao-potes-diagonal.svg") 0 0 / 280px 160px repeat;
}
/* Mais Sabor (revisão da Aléxia, 14/10): título laranja e frase de cima creme */
.cep-hcapa--mais-sabor {
  --fundo: var(--cep-ms-vinho); --tinta: var(--cep-cep-pessego); --titulo: var(--cep-ms-laranja);
  --acento: var(--cep-ms-amarelo); --cta-tx: var(--cep-ms-vinho); --selo: var(--cep-creme); --padrao: var(--cep-ms-laranja-10);
  /* ajustes da entrega final (23/10): os potes na diagonal e no mesmo tamanho
     dos banners das outras linhas */
  --padrao-m: url("../assets/graficos/padrao-potes-diagonal.svg") 0 0 / 280px 160px repeat;
}
.cep-hcapa--profissional {
  /* ajustes da entrega final (23/10): o grafismo da linha como na p.173 do
     brandbook, fundo escuro da Profissional e os potes só no contorno, em
     traço fino verde-claro, na diagonal; título no verde-claro da linha */
  --fundo: var(--cep-pro-escuro); --tinta: var(--cep-pro-claro); --titulo: var(--cep-pro-claro);
  --acento: var(--cep-pro-claro); --cta-tx: var(--cep-pro-escuro); --selo: var(--cep-limao); --padrao: var(--cep-pro-claro-45);
  --padrao-m: url("../assets/graficos/padrao-potes-diagonal-linha.svg") 0 0 / 280px 160px repeat;
}
.cep-hcapa--umai {
  --fundo: var(--cep-umai); --tinta: var(--cep-preto); --titulo: var(--cep-preto);
  --acento: var(--cep-preto); --cta-tx: var(--cep-branco-quente); --selo: var(--cep-preto); --padrao: var(--cep-preto-06);
  --padrao-m: url("../assets/graficos/padrao-potes.svg") 0 0 / 150px 105px repeat;
}
/* Collabs (revisão da Aléxia, 14/10): laranja "Molho Especial" com os nomes
   dos parceiros em repetição (no lugar do "HMMMM" da referência dela) e o
   mesmo recorte curvo das outras páginas, só que sem foto: a área da foto
   fica vinho chapado. O fundo é o vinho; o painel laranja + curva é o ::before
   (a mesma máscara das outras capas) e os nomes usam essa máscara também, para
   aparecer só no laranja. */
.cep-hcapa--collabs {
  --fundo: var(--cep-laranja); --tinta: var(--cep-creme); --titulo: var(--cep-creme);
  --acento: var(--cep-creme); --cta-tx: var(--cep-laranja); --selo: var(--cep-creme); --padrao: transparent;
  --eco: var(--cep-paprica-30);
}
.cep-hcapa--collabs.cep-hcapa--faixa { background: var(--cep-vinho); }
.cep-hcapa--collabs.cep-hcapa--faixa::before { display: block; z-index: 1; }
.cep-hcapa--collabs .cep-hcapa__eco { z-index: 2; -webkit-mask: var(--forma); -webkit-mask-composite: source-over; mask: var(--forma); mask-composite: add; }

/* ---- compacta (categorias, 03/10): sem palco e mais baixa; o texto ocupa
   uma coluna larga para caber em menos linhas ---- */
.cep-hcapa--compacta { min-height: 0; grid-template-columns: minmax(0, 760px) minmax(0, 1fr); }
.cep-hcapa--compacta .cep-hcapa__texto { padding: 56px 0 52px; }

/* ---- tablet: a coluna de texto cresce ---- */
@media (max-width: 1024px) {
  .cep-hcapa { --texto-w: calc(52vw - var(--cep-gutter-tablet)); --borda: var(--cep-gutter-tablet); --borda-v: var(--cep-gutter-tablet); }
  .cep-hcapa--faixa { grid-template-columns: 50% minmax(0, 1fr); }
  .cep-hcapa__titulo { font-size: 44px; }
}
/* ---- celular: empilha (mídia em cima, texto embaixo) ---- */
@media (max-width: 767px) {
  .cep-hcapa, .cep-hcapa--faixa { display: flex; flex-direction: column; min-height: 0; padding: 0; }
  .cep-hcapa::before { display: none; }
  .cep-hcapa::after { -webkit-mask: var(--padrao-m); -webkit-mask-composite: source-over; mask: var(--padrao-m); mask-composite: add; z-index: 0; }
  .cep-hcapa__midia { position: relative; left: auto; width: 100%; height: 62vw; }
  .cep-hcapa--faixa .cep-hcapa__texto { padding: 32px var(--cep-gutter-celular) 44px; }
  .cep-hcapa--compacta .cep-hcapa__texto { padding: 36px var(--cep-gutter-celular) 40px; }
  .cep-hcapa__texto { padding: 32px var(--cep-gutter-celular) 44px; }
  .cep-hcapa__titulo { font-size: 40px; }
  .cep-hcapa__palco { position: relative; left: auto; height: 280px; overflow: hidden; }
  .cep-hcapa__moldura { right: var(--cep-gutter-celular); left: var(--cep-gutter-celular); width: auto; top: 0; height: 100%; }
  .cep-hcapa--cartao .cep-hcapa__texto { margin: 24px var(--cep-gutter-celular) 0; padding: 28px; }
  .cep-hcapa__fita { position: relative; }
  .cep-hcapa__eco { font-size: 64px; }
}


/* Collabs (04/10): sem cartão; os nomes dos parceiros em repetição ficam só na
   metade direita, sem passar por baixo do texto */
.cep-hcapa--collabs-eco .cep-hcapa__eco { left: 0; }
/* Collabs (09/10): cada linha do eco começa com um parceiro inteiro (sem o
   recuo alternado, que cortava "CHILLI BEANS" e "MADERO") e os cinco nomes
   aparecem no primeiro olhar. */
.cep-hcapa--collabs-eco .cep-hcapa__eco-linha:nth-child(even) { margin-left: 0; }

@media (max-width: 767px) {
  /* a palavra inteira numa linha também no celular */
  .cep-hcapa--sust .cep-hcapa__titulo { font-size: 28px; }
}

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

/* =========================== PRODUTO =========================== */
.cep-prod { background: var(--cep-branco); padding-bottom: 76px; }
.cep-prod__grade {
  display: grid;
  /* palco (quadrado branco) um pouco mais estreito que a ficha */
  grid-template-columns: minmax(0, 0.8fr) 1fr;
  align-items: center;
  gap: 56px;
  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. */
.cep-prod__palco {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 440px;
  padding: 34px;
  border-radius: 24px;
  background: var(--cep-branco);
  border: 1px solid var(--cep-neutro-2);
}
.cep-prod__foto {
  position: relative;
  /* a tela do asset tem 18% de respiro transparente (padroniza-fotos.py) */
  max-height: 430px;
  width: auto;
  max-width: 74%;
  object-fit: contain;
  /* sombra suave: no branco, a sombra pesada do fundo creme ficava suja */
  filter: drop-shadow(0 18px 26px var(--cep-verde-escuro-14));
}

.cep-prod__baixar {
  position: absolute; right: 16px; bottom: 16px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 999px;
  background: var(--cep-neutro); border: 1px solid var(--cep-neutro-2);
  font-family: var(--cep-fonte-texto); font-size: 12px; font-weight: 700;
  letter-spacing: 0.02em; color: var(--cep-verde-escuro);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.cep-prod__baixar-icone { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cep-prod__baixar:hover { background: var(--cep-limao); border-color: var(--cep-limao); transform: translateY(-1px); }

.cep-prod__linha { margin: 0 0 10px; color: var(--cep-verde); }
.cep-prod__nome {
  font-family: var(--cep-fonte-texto);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  font-size: clamp(26px, 2.9vw, 40px);
  line-height: 1.05;
  color: var(--cep-verde-escuro);
}
.cep-prod__bloco { margin: 0 0 20px; }
.cep-prod__rot {
  margin: 0 0 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--cep-verde);
}
.cep-prod__ing { margin: 0; font-size: 15px; line-height: 1.55; color: var(--cep-tinta); }
.cep-prod__aler { margin: 8px 0 0; font-size: 13px; color: var(--cep-tinta-fraca); }
/* a lista de embalagem fica direto na ficha (sem bloco em volta): a margem do bloco vem para ela */
.cep-prod__emb {
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.cep-prod__emb-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px 7px 10px;
  border-radius: 999px;
  background: var(--cep-neutro);
  border: 1px solid var(--cep-neutro-2);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cep-tinta);
}
.cep-prod__emb-icone {
  width: 16px; height: 16px;
  fill: none;
  stroke: var(--cep-verde);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cep-prod__base { margin-top: 26px; }
.cep-prod__desc {
  max-width: 46ch;
  margin: 0 0 12px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--cep-verde-escuro-82);
}
.cep-prod__desc.is-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cep-prod__vermais {
  border: none;
  background: none;
  padding: 0;
  margin: 0 0 26px;
  font-family: var(--cep-fonte-texto);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--cep-verde);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cep-prod__vermais:hover { color: var(--cep-laranja); }

/* seletor de tamanho: é botão porque um dia troca a ficha inteira */
.cep-prod__pesos { display: flex; gap: 10px; margin-bottom: 24px; }
.cep-prod__peso {
  border: 1.5px solid var(--cep-verde-escuro-28);
  background: none;
  color: var(--cep-verde-escuro);
  font-family: var(--cep-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;
}
.cep-prod__peso:hover { border-color: var(--cep-verde-escuro); }
.cep-prod__peso.is-ativo {
  background: var(--cep-verde-escuro);
  border-color: var(--cep-verde-escuro);
  color: var(--cep-creme);
  cursor: default;
}

.cep-prod__selos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}
.cep-prod__selo {
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--cep-verde-12);
  font-size: 12px;
  font-weight: 600;
  color: var(--cep-verde-escuro);
}
.cep-prod__acoes { display: flex; gap: 12px; flex-wrap: wrap; }

/* nutricional */
.cep-nutri { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: start; }
.cep-nutri__porcao {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--cep-verde-escuro-60);
}
.cep-nutri__t { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.cep-nutri__th, .cep-nutri__td {
  padding: 11px 4px;
  text-align: left;
  border-bottom: 1px solid var(--cep-verde-escuro-12);
}
.cep-nutri__th--col {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--cep-verde-escuro-50);
}
.cep-nutri__th--linha { font-weight: 600; color: var(--cep-verde-escuro); }
.cep-nutri__td { color: var(--cep-verde-escuro-78); }
.cep-nutri__td--vd { text-align: right; }

/* =========================== 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 (--cep-neutro), como a página de
   produto: menos amarelo e a foto do prato aparece mais. */
.cep-rec1 { background: var(--cep-neutro); padding-bottom: 64px; }
.cep-rec1__grade {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  align-items: center;
  gap: 56px;
  padding: 30px 0 20px;
}
.cep-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(--cep-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(--cep-verde-escuro);
}
.cep-rec1__meta {
  display: flex;
  gap: 34px;
  margin: 0 0 28px;
  padding: 22px 0;
  border-top: 1px solid var(--cep-verde-escuro-15);
  border-bottom: 1px solid var(--cep-verde-escuro-15);
  list-style: none;
}
.cep-rec1__meta-item { display: flex; flex-direction: column; gap: 4px; }
/* receita sem rendimento: guarda o lugar do valor que falta */
.cep-rec1__meta-item--vazio { padding-top: 4px; }
.cep-rec1__meta b { font-size: 21px; font-weight: 700; color: var(--cep-verde-escuro); }
.cep-rec1__meta span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--cep-verde-escuro-50);
}
.cep-rec1__foto { position: relative; margin: 0; transform: rotate(1.4deg); }
.cep-rec1__img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 22px;
  display: block;
  box-shadow: 14px 16px 0 var(--cep-verde-escuro-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) */
.cep-rec1__selo {
  position: absolute;
  left: -30px; top: -30px;
  width: 128px; height: 128px;
  border-radius: 50%;
  background: var(--cep-limao);
  color: var(--cep-verde-escuro);
  box-shadow: 0 10px 24px var(--cep-verde-escuro-26);
}
.cep-rec1__selo-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
/* o anel de texto (grupo dentro do SVG) gira sem parar */
.cep-rec1__selo-anel { transform-origin: 60px 60px; animation: sustGira 14s linear infinite; }
/* el-ok A325: o tempo no meio do selo; o selo é decorativo e não tem nada clicável embaixo */
.cep-rec1__selo-centro {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.cep-rec1__selo-centro b { font-family: var(--cep-fonte-texto); font-weight: 800; font-size: 26px; line-height: 0.9; letter-spacing: -0.02em; }
.cep-rec1__selo-centro span { font-size: 9px; font-weight: 700; letter-spacing: 0.01em; margin-top: 3px; }
@media (prefers-reduced-motion: reduce) { .cep-rec1__selo-anel { animation: none; } }

/* ---- faixa branca: é aqui que se cozinha ---- */
.cep-rec2 { position: relative; background: var(--cep-branco); padding: 72px 0 80px; overflow: hidden; }
/* el-ok A325: palavra decorativa ao fundo; fica abaixo da faixa (z-index 1) e não cobre o conteúdo */
.cep-rec2__eco { position: absolute; inset: 0; display: flex; align-items: center; overflow: hidden; z-index: 0; }
.cep-rec2__eco-txt {
  font-family: var(--cep-fonte-titulo);
  font-size: clamp(90px, 15vw, 230px);
  white-space: nowrap;
  color: var(--cep-limao-55);
  opacity: 0.18;
  margin-left: -3%;
}
.cep-rec1__corpo {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
}
.cep-rec1__ings, .cep-rec1__passos { margin: 0; padding: 0; list-style: none; }
.cep-rec1__dica { margin: 0 0 14px; font-size: 13px; color: var(--cep-tinta-fraca); }
.cep-rec1__ing { margin-bottom: 4px; }
.cep-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(--cep-tinta);
  cursor: pointer;
  transition: background .2s ease;
}
.cep-ing:hover { background: var(--cep-verde-06); }
/* a caixinha é o próprio checkbox, desenhado */
.cep-ing__caixa {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 20px; height: 20px;
  margin: 1px 0 0;
  border: 2px solid var(--cep-verde-escuro-30);
  border-radius: 6px;
  background: var(--cep-branco);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.cep-ing__caixa:checked {
  background: var(--cep-verde) url("../assets/icons/check-branco.svg") center/13px no-repeat;
  border-color: var(--cep-verde);
}
.cep-ing__caixa:focus-visible { outline: 2px solid var(--cep-verde); outline-offset: 2px; }
.cep-ing__caixa:checked ~ .cep-ing__txt { color: var(--cep-tinta-fraca); text-decoration: line-through; text-decoration-color: var(--cep-limao); }
.cep-rec1__mais {
  margin: 16px 0 0;
  font-size: 13.5px;
  font-style: italic;
  color: var(--cep-tinta-fraca);
}
.cep-rec1__passo {
  position: relative;
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 10px;
  align-items: start;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px dashed var(--cep-verde-escuro-16);
}
.cep-rec1__passo:last-child { border-bottom: none; }
/* número do passo em OverHeat, cheio e sem contorno (revisão da Aléxia, 14/10) */
.cep-passo__n {
  font-family: var(--cep-fonte-titulo);
  font-weight: 400;
  font-size: 44px;
  line-height: 0.9;
  color: var(--cep-verde);
}
.cep-passo__t { font-size: 16.5px; line-height: 1.6; color: var(--cep-tinta); padding-top: 6px; }
.cep-rec1__fecho {
  margin: 30px 0 0;
  padding-left: 20px;
  border-left: 3px solid var(--cep-limao);
  font-size: 16px;
  font-weight: 600;
  color: var(--cep-verde-escuro);
}

/* ---- faixa verde: o produto usado, no meio da página ---- */
.cep-usou-faixa {
  background: var(--cep-verde-inst);
  color: var(--cep-creme);
  padding: 64px 0;
}
.cep-usou {
  display: grid;
  grid-template-columns: 240px 1fr;
  align-items: center;
  gap: 52px;
}
.cep-usou__palco {
  display: grid;
  place-items: center;
  padding: 22px;
  border-radius: 20px;
  background: var(--cep-branco);
}
.cep-usou__img { max-height: 250px; max-width: 82%; object-fit: contain; }
.cep-usou__rotulo { color: var(--cep-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). */
.cep-usou__nome { font-family: var(--cep-fonte-texto); font-weight: 800; letter-spacing: -0.01em; color: var(--cep-creme); margin: 0 0 14px; }
.cep-usou__texto {
  max-width: 52ch;
  margin: 0 0 24px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--cep-creme-85);
}
.cep-usou__acoes { display: flex; gap: 12px; flex-wrap: wrap; }
.cep-btn--claro-linha { border-color: var(--cep-creme-50); color: var(--cep-creme); }
.cep-btn--claro-linha:hover { border-color: var(--cep-creme); background: var(--cep-creme-10); }

/* =========================== 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). */
.cep-post {
  background: var(--cep-branco);
  padding: 64px 0 76px;
}
.cep-post__texto {
  /* medida de leitura: ~66 caracteres por linha */
  max-width: 66ch;
  margin: 0 auto;
}
.cep-post__p {
  margin: 0 0 26px;
  font-size: 18.5px;
  line-height: 1.75;
  color: var(--cep-tinta);
  /* endereço (URL) no meio do texto não cabe na linha do celular: quebra só ele */
  overflow-wrap: break-word;
}
/* a abertura puxa o olho para dentro do texto */
.cep-post__p:first-child {
  font-size: 22px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--cep-verde-escuro);
  padding-bottom: 26px;
  border-bottom: 1px solid var(--cep-neutro-2);
}
/* fio curto em limão antes do corpo, para a coluna não começar seca */
.cep-post__p:first-child::after {
  content: "";
  display: block;
  width: 54px;
  height: 4px;
  margin-top: 26px;
  background: var(--cep-limao);
  border-radius: 2px;
}
.cep-post__pe {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 66ch;
  margin: 46px auto 0;
  padding-top: 30px;
  border-top: 1px solid var(--cep-neutro-2);
}

/* ---- celular: ficha, receita e produto usado em uma coluna ---- */
@media (max-width: 767px) {
  .cep-prod__grade { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .cep-prod__palco { min-height: 320px; }
  .cep-rec1__grade { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .cep-rec1__selo { left: -6px; top: -26px; width: 104px; height: 104px; }
  .cep-rec1__selo-centro b { font-size: 22px; }
  .cep-rec1__corpo { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .cep-usou { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .cep-usou__palco { max-width: 240px; }
  .cep-nutri { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Voltar (página de produto, 02/10): pílula à esquerda das migalhas ---- */
.cep-prod__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  padding-top: 22px;
}
.cep-migalhas--linha { padding-top: 0; }
.cep-voltar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 18px 0 14px;
  border: 1px solid var(--cep-verde-escuro-25);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--cep-verde-escuro);
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.cep-voltar:hover { background: var(--cep-verde-escuro); border-color: var(--cep-verde-escuro); color: var(--cep-creme); }
.cep-voltar:focus-visible { outline: 3px solid var(--cep-limao); outline-offset: 3px; }
.cep-voltar__seta { font-size: 16px; line-height: 1; transition: transform .18s ease; }
.cep-voltar:hover .cep-voltar__seta { transform: translateX(-3px); }

/* revisão da Aléxia (14/10): o topo da receita ganha fundo verde para não
   ficar tão branco; textos claros sobre o verde e o selo limão continua igual.
   O anel do selo deixou de repetir "capricha no molho". */
.cep-rec1 { background: var(--cep-verde); color: var(--cep-creme); }
.cep-rec1 .cep-migalhas { color: var(--cep-creme-70); }
.cep-rec1 .cep-migalhas b { color: var(--cep-creme); }
.cep-rec1 .cep-migalhas a:hover { color: var(--cep-limao); }
.cep-rec1 .cep-rotulo { color: var(--cep-limao); }
.cep-rec1__nome { color: var(--cep-creme); }
.cep-rec1__meta { border-top-color: var(--cep-creme-25); border-bottom-color: var(--cep-creme-25); }
.cep-rec1__meta b { color: var(--cep-creme); }
.cep-rec1__meta span { color: var(--cep-creme-70); }
.cep-rec1__img { box-shadow: 14px 16px 0 var(--cep-verde-escuro-26); }
.cep-rec1 .cep-btn--solido { background: var(--cep-limao); color: var(--cep-verde-escuro); }
.cep-rec1 .cep-btn--solido:hover { background: var(--cep-creme); color: var(--cep-verde-escuro); }

/* 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.

   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) */
.cep-cat2 { background: var(--cep-neutro); padding: 60px 0 84px; }
.cep-cat2__grade {
  display: grid;
  grid-template-columns: 236px 1fr;
  gap: 46px;
  align-items: start;
}

/* filtros */
/* el-ok A322: a coluna de filtros acompanha a lista longa do catálogo; nenhum ancestral corta (overflow) */
.cep-filtros {
  position: sticky;
  top: calc(var(--cep-topo-alt) + 20px);
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.cep-busca { position: relative; }
.cep-busca__icone {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  fill: none;
  stroke: var(--cep-verde-escuro-45);
  stroke-width: 1.9;
  stroke-linecap: round;
  pointer-events: none;
}
.cep-busca__campo {
  width: 100%;
  padding: 13px 14px 13px 40px;
  border: 1.5px solid var(--cep-neutro-2);
  border-radius: 999px;
  background: var(--cep-branco);
  font-family: var(--cep-fonte-texto);
  font-size: 14px;
  color: var(--cep-verde-escuro);
  transition: border-color .2s ease;
}
.cep-busca__campo:focus { outline: none; border-color: var(--cep-verde); }
.cep-busca__campo:focus-visible { box-shadow: 0 0 0 3px var(--cep-limao-30); }
.cep-busca__campo::placeholder { color: var(--cep-verde-escuro-45); }

.cep-filtro { border-top: 1px solid var(--cep-neutro-2); padding-top: 20px; }
.cep-filtro__titulo {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--cep-verde);
}
.cep-filtro__op {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  font-size: 14.5px;
  color: var(--cep-verde-escuro-85);
  cursor: pointer;
}
.cep-filtro__caixa {
  appearance: none;
  -webkit-appearance: none;
  width: 17px; height: 17px;
  flex: none;
  margin: 0;
  border: 1.5px solid var(--cep-neutro-2);
  border-radius: 5px;
  background: var(--cep-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 */
.cep-filtro__caixa:checked {
  background: var(--cep-laranja) url("../assets/icons/check-branco.svg") center / 13px no-repeat;
  border-color: var(--cep-laranja);
}
.cep-filtro__caixa:focus-visible { outline: 2px solid var(--cep-verde); outline-offset: 2px; }
.cep-filtro__op:hover .cep-filtro__rotulo { color: var(--cep-verde-escuro); }

.cep-filtro__dica {
  margin: -6px 0 12px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--cep-verde-escuro-50);
}
/* contagem por opção: é o que faz a faceta se explicar sozinha */
.cep-filtro__n {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--cep-verde-escuro-40);
}

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

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

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

/* ---- card de produto ---- */
.cep-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 %). */
.cep-pgrade--tres { max-width: 768px; gap: 24px; }
.cep-pcard {
  display: flex;
  flex-direction: column;
  padding: 14px 14px 20px;
  border-radius: 16px;
  background: var(--cep-branco);
  border: 1px solid var(--cep-neutro-2);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
.cep-pcard:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 30px var(--cep-verde-escuro-12);
}
.cep-pcard[hidden] { display: none; }
.cep-pgrade--tres > .cep-pcard:nth-child(n+4) { display: none; }

/* o poço branco: é ele que dispensa recortar a foto */
.cep-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(--cep-branco);
  border-bottom: 1px solid var(--cep-neutro-2);
  overflow: hidden;
}
.cep-pcard__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.cep-pcard:hover .cep-pcard__img { transform: scale(1.06) rotate(-1.5deg); }

.cep-pcard__linha {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--cep-verde);
}
.cep-pcard__nome {
  margin-top: 5px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--cep-verde-escuro);
}
.cep-pcard__peso {
  margin-top: 3px;
  font-size: 13px;
  color: var(--cep-verde-escuro-50);
}
/* el-ok A323: o "Ver o produto →" aparece no hover do card (o card inteiro já é o link) */
.cep-pcard__ir {
  margin-top: auto;
  padding-top: 14px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--cep-verde);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .25s ease, transform .25s ease;
}
.cep-pcard__ir em { font-style: normal; }
.cep-pcard:hover .cep-pcard__ir { opacity: 1; transform: none; }
/* índice de busca do card (lido pelo JS do catálogo, nunca exibido) */
.cep-pcard__busca { display: none; }

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

/* Chip base de filtro (04/09): a classe .cep-recs-chip só tinha overrides por
   contexto (.cep-rgfiltros/.cep-nedit) e nunca uma base — os botões caíam no
   visual padrão do navegador (canto reto, cinza). Base como pílula da marca;
   serve catálogo de receitas E página de news. */
.cep-recs-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: 999px;
  background: var(--cep-branco); border: 1.5px solid var(--cep-neutro-2);
  font-family: var(--cep-fonte-texto); font-size: 12px; font-weight: 700;
  letter-spacing: 0.02em; color: var(--cep-verde-escuro);
  cursor: pointer; white-space: nowrap;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.cep-recs-chip:hover { border-color: var(--cep-verde); transform: translateY(-1px); }
.cep-recs-chip:focus-visible { outline: none; border-color: var(--cep-verde); box-shadow: 0 0 0 3px var(--cep-limao-30); }
.cep-recs-chip.is-ativa {
  background: var(--cep-verde-escuro); border-color: var(--cep-verde-escuro); color: var(--cep-creme);
  box-shadow: 0 4px 12px var(--cep-verde-escuro-20);
}
.cep-recs-chip.is-ativa:hover { transform: translateY(-1px); }

/* ---- celular: os filtros vão para cima da lista ---- */
@media (max-width: 767px) {
  .cep-cat2__grade { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .cep-filtros { position: static; }
}
@media (max-width: 767px) {
  .cep-pgrade--tres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cep-pgrade--tres > .cep-pcard:nth-child(3) { display: none; }
}

/* linha sem produto nesta página: continua no filtro (os filtros são os mesmos
   em todo o catálogo), mas apagada e sem clique */
.cep-filtro__op--vazio { opacity: 0.4; cursor: not-allowed; }

/* 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 saem de dados/noticias.json no build (com a contagem): notícia
   nova com editoria nova aparece no filtro sozinha. */

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

/* ---- barra de busca + editorias ---- */
.cep-nbarra {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.cep-nbusca { position: relative; flex: 0 0 280px; }
.cep-nbusca__campo {
  width: 100%;
  padding: 13px 14px 13px 40px;
  border: 1.5px solid var(--cep-neutro-2);
  border-radius: 999px;
  background: var(--cep-branco);
  font-family: var(--cep-fonte-texto);
  font-size: 14px;
  color: var(--cep-verde-escuro);
  transition: border-color .2s ease;
}
.cep-nbusca__campo:focus { outline: none; border-color: var(--cep-verde); }
.cep-nbusca__campo:focus-visible { box-shadow: 0 0 0 3px var(--cep-limao-30); }
.cep-nedit { display: flex; gap: 8px; flex-wrap: wrap; }
.cep-nedit .cep-recs-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--cep-branco);
  border-color: var(--cep-neutro-2);
  font-size: 12px;
  padding: 9px 16px;
  text-transform: none;
  letter-spacing: 0.01em;
}
.cep-nedit .cep-recs-chip.is-ativa { background: var(--cep-verde-escuro); border-color: var(--cep-verde-escuro); color: var(--cep-creme); }
.cep-nedit__n { font-size: 11px; opacity: .55; font-weight: 700; }

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

/* ---- grade: o primeiro ocupa duas colunas ---- */
.cep-ncard[hidden] { display: none; }

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

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

/* ---- barra de progresso da leitura (matéria de news e de sustentabilidade) ----
   Trilho no ::before e o quanto já foi lido no ::after do artigo; o app.js
   passa o progresso em --cep-leitura (0 a 1). Só com JS. */
/* el-ok A321: barra de progresso de leitura, presa logo abaixo do header */
.has-js .cep-post::before,
.has-js .cep-post::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  top: var(--cep-topo-alt);
  height: 3px;
  z-index: 9;
  pointer-events: none;
}
.has-js .cep-post::before { background: var(--cep-verde-escuro-10); }
.has-js .cep-post::after {
  background: var(--cep-limao);
  transform-origin: left center;
  transform: scaleX(var(--cep-leitura, 0));
}
@media (max-width: 767px) {
  .has-js .cep-post::before,
  .has-js .cep-post::after { top: var(--cep-topo-alt-celular); }
}

/* ---- próxima notícia, no pé da matéria ---- */
.cep-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(--cep-neutro-2);
  border-radius: 16px;
  background: var(--cep-branco);
  transition: border-color .25s ease, transform .25s ease;
}
.cep-proxima:hover { border-color: var(--cep-verde); transform: translateY(-2px); }
.cep-proxima__img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 10px; display: block; }
.cep-proxima__rot {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--cep-laranja);
  margin-bottom: 5px;
}
.cep-proxima__tit { font-size: 17px; font-weight: 700; line-height: 1.25; color: var(--cep-verde-escuro); }
.cep-proxima__seta { font-size: 20px; color: var(--cep-verde); padding-right: 8px; }

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

@media (max-width: 767px) {
  .cep-ncard--destaque:not(.is-comum) { grid-column: auto; grid-row: auto; }
  .cep-nbusca { flex: 1 1 100%; }
}

/* Página de receitas: o catálogo único (02/10). A régua "Quanto tempo você
   tem?" fica aqui dentro e filtra TODAS as receitas, junto com a busca e o
   tipo de prato (na home a régua mostra só os 8 destaques). Cards leves: foto, tempo
   sobre a foto, nome e o produto. Motor: bindReceitasGrade. */
.cep-secao--rgrade { background: var(--cep-branco); }
/* a régua daqui vai de 15 min a 4h: cada marca dobra o tempo, 25% entre elas */
.cep-regua--rgrade { margin-bottom: 40px; }
.cep-regua__marca--p0   { left: 0%; }
.cep-regua__marca--p25  { left: 25%; }
.cep-regua__marca--p50  { left: 50%; }
.cep-regua__marca--p75  { left: 75%; }
.cep-regua__marca--p100 { left: 100%; }

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


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

.cep-rgcard__foto { position: relative; display: block; }
.cep-rgcard__img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.cep-rgcard:hover .cep-rgcard__img { transform: scale(1.05); }
.cep-rgcard__tempo {
  position: absolute;
  left: 10px; top: 10px;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--cep-creme-94);
  color: var(--cep-verde-escuro);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.cep-rgcard__corpo { padding: 15px 16px 18px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.cep-rgcard__tipo {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--cep-verde);
}
.cep-rgcard__nome {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--cep-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;
}
.cep-rgcard__prod {
  margin-top: auto;
  font-size: 13px;
  line-height: 1.35;
  color: var(--cep-tinta-fraca);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* índice de busca do card (lido pelo JS do catálogo, nunca exibido) */
.cep-rgcard__busca { display: none; }

@media (max-width: 1024px) { .cep-rgrade { grid-template-columns: repeat(3, 1fr); } }
@media (prefers-reduced-motion: reduce) { .cep-rgcard, .cep-rgcard__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 ---- */
.cep-pcard__sem, .cep-prod__sem {
  display: grid;
  place-items: center;
  width: 100%; height: 100%;
  font-family: var(--cep-fonte-titulo);
  color: var(--cep-verde-escuro-22);
  letter-spacing: 0.02em;
}
.cep-pcard__sem { font-size: 22px; }
.cep-prod__sem { font-size: 54px; }

/* ---- hub: cartões de categoria ---- */
.cep-secao--hub { background: var(--cep-neutro); padding: 60px 0 84px; }
.cep-hubgrade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cep-hubcard {
  display: grid;
  grid-template-columns: 116px 1fr;
  background: var(--cep-branco);
  border: 1px solid var(--cep-neutro-2);
  border-radius: 16px;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
.cep-hubcard:hover { transform: translateY(-5px); box-shadow: 0 16px 30px var(--cep-verde-escuro-12); }
.cep-hubcard__foto { display: grid; place-items: center; background: var(--cep-branco); padding: 12px; }
.cep-hubcard__img { max-height: 120px; max-width: 90%; object-fit: contain; }
.cep-hubcard__corpo { padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.cep-hubcard__nome { font-size: 18px; font-weight: 700; color: var(--cep-verde-escuro); line-height: 1.15; }
.cep-hubcard__n {
  font-size: 11px; font-weight: 700; letter-spacing: 0.01em;
  color: var(--cep-verde);
}
.cep-hubcard__lead {
  margin-top: 6px; font-size: 13px; line-height: 1.4; color: var(--cep-tinta-fraca);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* el-ok A323: o "Ver →" aparece no hover do cartão da categoria (o cartão inteiro já é o link) */
.cep-hubcard__ir {
  margin-top: 10px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.01em; color: var(--cep-verde);
  opacity: 0; transform: translateY(4px); transition: opacity .25s ease, transform .25s ease;
}
.cep-hubcard__ir em { font-style: normal; }
.cep-hubcard:hover .cep-hubcard__ir { opacity: 1; transform: none; }

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

@media (max-width: 1024px) { .cep-hubgrade { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) { .cep-hubcard, .cep-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. */
.cep-cat2__grade--simples { grid-template-columns: 1fr; }
.cep-busca--topo { flex: 0 0 300px; }
.cep-busca__campo--topo { padding: 12px 14px 12px 40px; }

/* 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) =================== */
.cep-secao--mvv { position: relative; background: var(--cep-creme); padding: 96px 0 88px; overflow: hidden; }

/* título empilhado torto com sombra dura, como "COMPROMISSO COM UM FUTURO MELHOR";
   cada <span> do título é uma linha */
.cep-mvv__pilha { position: relative; margin-bottom: 54px; }
.cep-mvv__display { margin: 0; display: flex; flex-direction: column; }
.cep-mvv__display > span {
  font-family: var(--cep-fonte-titulo);
  font-size: clamp(40px, 7vw, 104px);
  line-height: 1;   /* era 0,86: o acento do Ê de EXPERIÊNCIA sumia na linha de cima */
  color: var(--cep-verde-escuro);
}
.cep-mvv__display > span:nth-child(1) { padding-left: 4%; }
.cep-mvv__display > span:nth-child(2) { padding-left: 22%; color: var(--cep-verde); }
.cep-mvv__display > span:nth-child(3) { padding-left: 10%; }
.cep-mvv__display em { font-style: normal; color: inherit; }

/* ---- 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. */
.cep-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. */
.cep-mvvm__cel {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 1;
}
.cep-mvvm__cel--g2 { grid-column: span 2; grid-row: span 2; }

/* tiles só de foto */
.cep-mvvm__cel--foto { background: var(--cep-verde-escuro-06); }
.cep-mvvm__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);
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}
.cep-mvvm__cel--foto:hover .cep-mvvm__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. */
.cep-mvvm__cel--frame { background: var(--cep-branco); }
.cep-mvvm__img--frame { object-fit: contain; transform: none; }
.cep-mvvm__cel--frame:hover .cep-mvvm__img { transform: none; }

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

.cep-mvv__icone {
  width: 36px; height: 36px;
  fill: none; stroke: var(--cep-verde); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
  margin-bottom: 14px;
}
.cep-mvv__icone--verde { stroke: var(--cep-limao); }
.cep-mvv__rot { display: block; font-family: var(--cep-fonte-texto); font-weight: 800; font-size: 21px; letter-spacing: -0.01em; color: var(--cep-verde-escuro); margin-bottom: 10px; }
.cep-mvv__rot--verde { color: var(--cep-creme); }
.cep-mvv__texto { margin: 0; font-size: 14px; line-height: 1.5; color: var(--cep-tinta); }
.cep-mvv__texto--verde { color: var(--cep-creme-90); }
/* Missão (02/10): frase curta, ganha corpo */
.cep-mvv__texto--missao { font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--cep-verde-escuro); }
/* Valores: as iniciais formam CEPÊRA, como no material do cliente */
.cep-mvv__texto--valores { line-height: 1.75; }
.cep-mvv__texto--valores strong { font-weight: 800; color: var(--cep-verde); }

/* =================== HISTÓRIA: timeline HORIZONTAL =================== */
.cep-secao--tl { position: relative; background: var(--cep-neutro); padding: 80px 0 90px; overflow: hidden; }
/* título da História em OverHeat (revisão da Aléxia, 14/10): a versão
   oficial da fonte tem algarismos, então o "1947" não cai mais no fallback. */
.cep-secao__titulo--tl {
  font-family: var(--cep-fonte-titulo);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.12;
}
.cep-tl2__setas { display: flex; gap: 10px; }
.cep-tl2__seta {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border: 1.5px solid var(--cep-verde-escuro-20);
  border-radius: 999px;
  background: var(--cep-branco);
  color: var(--cep-verde-escuro);
  font-size: 18px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.cep-tl2__seta:hover { background: var(--cep-verde-escuro); color: var(--cep-creme); }
.cep-tl2__seta[disabled] { opacity: .3; pointer-events: none; }

/* trilho que rola na horizontal (arrasta/roda/setas) */
.cep-tl2 {
  position: relative;
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 40px max(24px, calc((100vw - var(--cep-faixa)) / 2 + 24px)) 20px;
  margin-top: 18px;
  scrollbar-width: none;
  scroll-behavior: smooth;
  cursor: grab;
}
.cep-tl2::-webkit-scrollbar { display: none; }
.cep-tl2.is-dragging { cursor: grabbing; scroll-behavior: auto; }
/* o fio que conecta os anos, atrás dos nós */
.cep-tl2::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 92px;
  height: 3px;
  background: repeating-linear-gradient(90deg, var(--cep-verde-escuro-20) 0 8px, transparent 8px 16px);
}
.cep-tl2c {
  position: relative;
  flex: 0 0 300px;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  padding-top: 66px;
}
/* o nó do ano, em cima do fio */
.cep-tl2c::before {
  content: "";
  position: absolute;
  top: 84px; left: 4px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--cep-limao);
  border: 3px solid var(--cep-neutro);
  box-shadow: 0 0 0 1px var(--cep-verde-escuro-20);
  z-index: 1;
}
/* big numbers em OverHeat, como no resto do site (Heber, 23/10) */
.cep-tl2c__ano {
  position: absolute;
  top: 0; left: 0;
  font-family: var(--cep-fonte-titulo);
  font-weight: 400;
  font-size: 34px;
  line-height: 1;
  color: var(--cep-verde);
}
.cep-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(--cep-branco);
  border: 1px solid var(--cep-neutro-2);
  border-radius: 18px;
  padding: 22px 22px 24px;
  box-shadow: 6px 8px 0 var(--cep-verde-escuro-08);
}
/* faixa de mídia: sangra até as bordas da caixa e arredonda o topo */
.cep-tl2c__media {
  margin: -22px -22px 16px;
  height: 128px;
  border-radius: 18px 18px 0 0;
  border-bottom: 1px solid var(--cep-neutro-2);
  overflow: hidden;
  display: grid;
  place-items: center;
}
/* a imagem ocupa a caixa exata (revisão do Dante, 14/10: as fotos e logos saíam
   cortados e fora do centro; o height:100% não valia dentro do grid e a imagem
   crescia além dos 128px) */
.cep-tl2c__media { position: relative; }
.cep-tl2c__img { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* logo antigo: contido, sobre creme, com respiro */
.cep-tl2c__media--logo { background: var(--cep-creme); }
.cep-tl2c__img--logo { object-fit: contain; padding: 20px 22px; }
/* packshot (linha de produtos): contido, sobre branco */
.cep-tl2c__media--pack { background: var(--cep-branco); }
.cep-tl2c__img--pack { object-fit: contain; padding: 14px 16px; }
/* foto real: preenche, fundo escuro */
.cep-tl2c__media--foto { background: var(--cep-verde-escuro); }
.cep-tl2c__img--foto { object-fit: cover; }
/* era sem imagem: o ano gigante tom-sobre-tom no lugar */
.cep-tl2c__media--vazio { background: var(--cep-creme); }
.cep-tl2c__media-ano {
  font-family: var(--cep-fonte-titulo);
  font-weight: 400;
  font-size: 44px;
  color: var(--cep-verde-escuro-12);
}
.cep-tl2c__titulo { display: block; font-size: 18px; font-weight: 700; color: var(--cep-verde-escuro); margin-bottom: 8px; }
.cep-tl2c__texto { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--cep-tinta); }

/* =================== EXPORTAÇÃO: split foto + painel com recorte =================== */
.cep-secao--exp { position: relative; background: var(--cep-verde-inst); color: var(--cep-creme); overflow: hidden; padding: 0; }
.cep-exp2__texto { margin: 16px 0 0; font-size: 17px; line-height: 1.55; color: var(--cep-creme-88); max-width: 42ch; }
/* o fio entre "+15 países" e "4 continentes" é o ::before, posto no meio pela ordem */
.cep-exp2__placar { display: flex; align-items: baseline; gap: 10px; }
.cep-exp2__placar::before {
  content: "";
  order: 1;
  width: 1px;
  height: 44px;
  background: var(--cep-creme-25);
  margin: 0 8px;
  align-self: center;
}
.cep-exp2__num--depois, .cep-exp2__rot--depois { order: 2; }
.cep-exp2__num { font-family: var(--cep-fonte-titulo); font-weight: 400; font-size: clamp(44px, 6vw, 72px); color: var(--cep-limao); line-height: 1; }  /* OverHeat (Heber, 23/10) */
.cep-exp2__rot { font-size: 13px; font-weight: 700; letter-spacing: 0.01em; color: var(--cep-creme-70); }

/* =================== SEGURANÇA: três pilares =================== */
.cep-secao--seg { background: var(--cep-branco-quente); padding: 88px 0; }
.cep-seg2 { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.cep-seg2__titulo {
  font-family: var(--cep-fonte-titulo);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;   /* OverHeat em caixa alta, como o resto do site (Heber, 23/10) */
  font-size: clamp(34px, 3.9vw, 56px);
  line-height: 1.12;
  color: var(--cep-verde-escuro);
  margin: 12px 0 18px;
}
.cep-seg2__lead { margin: 0 0 26px; font-size: 17px; line-height: 1.6; color: var(--cep-tinta); max-width: 46ch; }
.cep-seg2__pdf { display: inline-flex; align-items: center; gap: 10px; }
.cep-seg2__pdf-icone { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cep-seg2__pilares { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.cep-seg2__pilar {
  display: grid;
  grid-template-columns: 48px 1fr;
  grid-template-rows: auto auto;
  column-gap: 16px;
  padding: 22px 24px;
  border-radius: 16px;
  background: var(--cep-neutro);
  border: 1px solid var(--cep-neutro-2);
}
.cep-seg2__i { grid-row: 1 / 3; align-self: center; font-family: var(--cep-fonte-titulo); font-size: 30px; line-height: 1; color: var(--cep-verde); }
.cep-seg2__nome { font-size: 18px; font-weight: 700; color: var(--cep-verde-escuro); }
.cep-seg2__txt { font-size: 14px; line-height: 1.45; color: var(--cep-tinta-fraca); }

/* ---- grafismo e palavra gigante tom-sobre-tom (Quem somos / História) ---- */
/* grafismo diagonal oficial da marca ao fundo do "Quem somos" (04/09), atrás do
   conteúdo (a faixa tem z-index 1). 14/10: cobre o bloco INTEIRO, sem cortar
   no meio (revisão da Aléxia); sobra 8% de cada lado para a deriva do scroll. */
.cep-mvv__grafismo {
  position: absolute; top: 0; left: -8%; width: 116%; height: 100%;
  max-width: none;
  z-index: 0; pointer-events: none; opacity: 0.55;
  object-fit: cover;
  object-position: center;
}
/* el-ok A325: palavra decorativa ao fundo; fica abaixo da faixa (z-index 1) e não cobre o conteúdo */
.cep-inst-eco { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; overflow: hidden; z-index: 0; }
.cep-inst-eco__txt {
  font-family: var(--cep-fonte-titulo);
  font-size: clamp(90px, 14vw, 220px);
  white-space: nowrap;
  color: var(--cep-limao-55);
  opacity: 0.24;
  margin-left: -4%;
}
.cep-inst-eco__txt--claro { color: var(--cep-verde-09); opacity: 1; }

/* ---- entrada do mosaico Quem somos (tiles sobem em cascata pelo --cep-i) ----
   has-cena é o JS que põe (só quando vai animar). */
.cep-mvvm__cel { transition: opacity .55s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
.cep-mvvm__cel--i1 { --cep-i: 1; }
.cep-mvvm__cel--i2 { --cep-i: 2; }
.cep-mvvm__cel--i3 { --cep-i: 3; }
.cep-mvvm__cel--i4 { --cep-i: 4; }
.cep-secao--mvv.has-cena .cep-mvvm__cel { opacity: 0; transform: translateY(28px); }
.cep-secao--mvv.has-cena.is-vivo .cep-mvvm__cel { opacity: 1; transform: none; transition-delay: calc(var(--cep-i, 0) * 65ms); }
/* depois de assentar, zera o delay p/ o hover responder na hora */
.cep-secao--mvv.has-cena.is-assentado .cep-mvvm__cel { transition-delay: 0ms; }

@media (max-width: 767px) {
  .cep-mvvm { grid-template-columns: 1fr; grid-auto-rows: 150px; }
  .cep-mvvm__cel--g2 { grid-column: span 1; }
  .cep-seg2 { grid-template-columns: 1fr; }
  .cep-tl2c { flex-basis: 260px; }
}
@media (prefers-reduced-motion: reduce) {
  .cep-mvvm__cel, .cep-tl2 { transition: none; scroll-behavior: auto; }
}

/* Exportação: split foto + painel verde com recorte (03/09) */
.cep-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 */
.cep-expsplit--cheio { height: auto; min-height: 0; margin-bottom: 0; }
.cep-expsplit__foto { position: relative; overflow: hidden; }
.cep-expsplit__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; pointer-events: none; }
.cep-expsplit__painel {
  position: relative;
  display: flex;
  align-items: center;
  padding: 46px 0 46px 18px;
}
/* o recorte avançando sobre a foto: o MESMO das capas internas (corte-kv.svg,
   medido no KV). A largura sai da altura (aspect-ratio da máscara na capa a
   1440px: 338 x 576), então a curva tem o mesmo desenho em qualquer altura. */
.cep-expsplit__painel::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 0;
  height: 100%;
  aspect-ratio: 338 / 576;
  margin-right: -1px;
  background: url("../assets/graficos/corte-kv.svg") no-repeat 0 0 / 100% 100%;
  pointer-events: none;
}
.cep-expsplit__texto { position: relative; max-width: 30rem; }
.cep-secao__titulo--exp {
  font-family: var(--cep-fonte-titulo);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--cep-creme);
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.12;
  margin: 6px 0 0;
}
.cep-rotulo--exp { color: var(--cep-limao); }
.cep-exp2__texto--painel { color: var(--cep-creme-90); margin: 12px 0 16px; font-size: 15px; }
.cep-exp2__placar--painel { 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. */
.cep-expac { margin-top: 6px; max-width: 30rem; }
.cep-expac__item { border-top: 1px solid var(--cep-creme-16); }
.cep-expac__item--ultimo { border-bottom: 1px solid var(--cep-creme-16); }
.cep-expac__cab {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 13px 2px; background: none; border: 0; cursor: pointer;
  font-family: var(--cep-fonte-texto); color: var(--cep-creme); text-align: left;
}
.cep-expac__nome { flex: 1; font-weight: 800; font-size: 16px; letter-spacing: -0.01em; }
.cep-expac__n {
  font-weight: 800; font-size: 13px; color: var(--cep-limao);
  min-width: 26px; height: 22px; padding: 0 7px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cep-limao-14);
}
.cep-expac__seta { width: 18px; height: 18px; fill: none; stroke: var(--cep-creme-75); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s ease; }
.cep-expac__item.is-aberto .cep-expac__seta { transform: rotate(180deg); }
.cep-expac__item.is-aberto .cep-expac__nome { color: var(--cep-limao); }
/* animação de altura pelo grid-template-rows (0fr -> 1fr) */
.cep-expac__corpo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .34s cubic-bezier(.4,0,.2,1); }
.cep-expac__item.is-aberto .cep-expac__corpo { grid-template-rows: 1fr; }
.cep-expac__paises {
  overflow: hidden; list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px 8px;
}
.cep-expac__item.is-aberto .cep-expac__paises { padding: 0 0 15px; }
.cep-expac__pais {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px 5px 8px; border-radius: 999px;
  background: var(--cep-creme-08);
  border: 1px solid var(--cep-creme-16);
  font-size: 12.5px; font-weight: 600;
  color: var(--cep-creme-92);
}
.cep-expac__pf { font-size: 15px; line-height: 1; }
@media (prefers-reduced-motion: reduce) { .cep-expac__corpo { transition: none; } }
@media (max-width: 767px) {
  .cep-expsplit, .cep-expsplit--cheio { grid-template-columns: 1fr; height: auto; }
  .cep-expsplit__painel::before { display: none; }
}

/* ---- filme institucional com player (A Cepêra, 02/10) ----
   O player é o <video> nativo (controles, tela cheia). Com JS, a capa ganha o
   botão de play da marca no centro; ao clicar, ele some e o filme toca com som. */
.cep-filme__cabeca { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px 40px; margin-bottom: 30px; }
.cep-filme__linha { max-width: 36ch; margin: 0; font-size: 17px; line-height: 1.5; color: var(--cep-verde-escuro-78); }
.cep-filme__tela {
  position: relative;
  aspect-ratio: 21 / 9;
  border-radius: 24px;
  overflow: clip;
  background: var(--cep-verde-escuro);
  box-shadow: 0 30px 60px var(--cep-verde-escuro-18);
}
.cep-filme__video { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 767px) {
  .cep-filme__tela { border-radius: 16px; }
}

/* Exportação com o mapa (revisão do Dante, 14/10): fundo Ervas & Conservas, o
   mapa à esquerda da curva do painel e a legenda embaixo */
.cep-expsplit__foto--mapa { min-height: 460px; background: var(--cep-verde-escuro); }
.cep-expsplit__img.cep-expsplit__img--mapa { inset: 24% auto 14% 4%; width: 84%; height: auto; object-fit: contain; object-position: left center; }
.cep-expsplit__legenda { position: absolute; left: 5%; bottom: 36px; display: flex; flex-direction: column; gap: 8px; }
.cep-expsplit__leg { position: relative; margin: 0; padding-left: 22px; font-size: 14px; font-weight: 600; color: var(--cep-creme); }
.cep-expsplit__leg::before { content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 12px; border-radius: 50%; transform: translateY(-50%); background: var(--cep-limao); }
.cep-expsplit__leg--origem::before { background: var(--cep-paprica); }
@media (max-width: 767px) {
  .cep-expsplit__foto--mapa { min-height: 300px; }
  .cep-expsplit__img.cep-expsplit__img--mapa { inset: 0 auto 70px 5%; width: 90%; height: calc(100% - 70px); object-position: center; }
  .cep-expsplit__legenda { bottom: 20px; }
}

/* Onde encontrar (04/09, redesenho): localizador de verdade com cara de site
   premium. Faixa de números + split (painel de busca/lista à esquerda, mapa
   grande à direita). Dados em dados/lojas.json. Motor: bindOndeEncontrar/Mapa. */
.cep-oe { background: var(--cep-neutro); padding: 56px 0 84px; }

/* ---------- faixa de números com grafismo da marca ---------- */
.cep-oe__stats {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
  background: var(--cep-verde-inst); color: var(--cep-creme);
  border-radius: 22px; padding: 30px 34px; margin-bottom: 22px;
}
.cep-oe__grafismo {
  position: absolute; top: -30%; right: -6%; width: min(620px, 60%); height: 200%;
  max-width: none;
  object-fit: contain; object-position: right center;
  opacity: 0.3; pointer-events: none;
}
.cep-oe__stats-txt { position: relative; z-index: 1; }
.cep-rotulo--oe { color: var(--cep-limao); }
.cep-oe__stats-tit {
  margin: 6px 0 0; font-family: var(--cep-fonte-texto); font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(22px, 2.6vw, 34px); line-height: 1.05; color: var(--cep-creme); max-width: 16ch;
}
.cep-oe__nums { position: relative; z-index: 1; display: flex; gap: 14px; flex-wrap: wrap; }
.cep-oe__num {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 14px 22px; border-radius: 16px;
  background: var(--cep-verde-escuro-62); border: 1px solid var(--cep-creme-22);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  box-shadow: 0 6px 16px var(--cep-verde-escuro-28);
  min-width: 100px;
}
.cep-oe__num-valor { font-family: var(--cep-fonte-texto); font-weight: 800; font-size: clamp(30px, 4vw, 44px); line-height: 1; color: var(--cep-branco); }
.cep-oe__num-rot { margin-top: 5px; font-size: 12px; font-weight: 700; letter-spacing: 0.01em; color: var(--cep-creme-90); }

/* ---------- split ---------- */
.cep-oe__split {
  display: grid; grid-template-columns: minmax(320px, 400px) 1fr; gap: 20px;
  align-items: stretch;
}

/* painel esquerdo */
.cep-oe__painel {
  display: flex; flex-direction: column;
  background: var(--cep-branco); border: 1px solid var(--cep-neutro-2); border-radius: 22px;
  overflow: hidden; max-height: 640px;
}
.cep-oe__filtros { padding: 20px 20px 16px; border-bottom: 1px solid var(--cep-neutro-2); }
.cep-oe__selects { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cep-oe__campo { display: flex; flex-direction: column; gap: 7px; }
.cep-oe__rot { font-size: 11px; font-weight: 700; letter-spacing: 0.01em; color: var(--cep-verde); }
.cep-oe__select {
  appearance: none; font-family: var(--cep-fonte-texto); font-size: 14.5px; color: var(--cep-verde-escuro);
  background: var(--cep-neutro) url("../assets/icons/seta-select.svg") no-repeat right 12px center / 15px;
  border: 1.5px solid var(--cep-verde-escuro-16);
  border-radius: 11px; padding: 11px 34px 11px 13px; cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.cep-oe__select:focus-visible { outline: none; border-color: var(--cep-verde); box-shadow: 0 0 0 3px var(--cep-limao-35); }
.cep-oe__select:disabled { opacity: .55; cursor: not-allowed; }
.cep-oe__acoes { display: flex; align-items: stretch; gap: 12px; margin-top: 12px; }
.cep-btn--oe { flex: 1 1 0; min-width: 0; display: flex; height: 46px; padding: 0 12px; justify-content: center; align-items: center; border-radius: 999px; font-size: 11px; letter-spacing: 0.03em; line-height: 1; white-space: nowrap; gap: 6px; }
.cep-oe__perto-icone { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* enquanto localiza, o botão só diz "Localizando..." */
.cep-oe__perto.is-localizando .cep-oe__perto-icone { display: none; }

.cep-oe__estado-cena { padding: 12px 20px; background: var(--cep-neutro); border-bottom: 1px solid var(--cep-neutro-2); }
.cep-oe__conta { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--cep-tinta); }
.cep-oe__conta b { font-weight: 800; color: var(--cep-verde); }

/* lista rolável */
.cep-oe__lista { overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; scroll-behavior: smooth; }
.cep-oe__lista::-webkit-scrollbar { width: 8px; }
.cep-oe__lista::-webkit-scrollbar-thumb { background: var(--cep-neutro-2); border-radius: 8px; }
.cep-oe__vazio { margin: 24px 12px; font-size: 14px; line-height: 1.5; color: var(--cep-tinta-fraca); }

.cep-loja {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--cep-branco); border: 1px solid var(--cep-neutro-2); border-radius: 14px;
  padding: 13px 15px; cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.cep-loja:hover { border-color: var(--cep-verde-50); transform: translateX(2px); }
.cep-loja:focus-visible { outline: none; border-color: var(--cep-verde); box-shadow: 0 0 0 3px var(--cep-limao-30); }
.cep-loja.is-ativa { border-color: var(--cep-verde); background: var(--cep-limao-09); }
.cep-loja__pin { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--cep-verde-10); }
.cep-loja__pin-icone { width: 17px; height: 17px; fill: none; stroke: var(--cep-verde); stroke-width: 1.7; stroke-linejoin: round; }
.cep-loja.is-ativa .cep-loja__pin { background: var(--cep-verde); }
.cep-loja.is-ativa .cep-loja__pin-icone { stroke: var(--cep-limao); }
.cep-loja__corpo { min-width: 0; flex: 1; }
.cep-loja__cab { display: flex; align-items: center; gap: 8px; justify-content: space-between; margin-bottom: 3px; }
.cep-loja__rede { font-family: var(--cep-fonte-texto); font-weight: 800; font-size: 15px; color: var(--cep-verde-escuro); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cep-loja__tipo { flex: none; font-size: 10px; font-weight: 700; letter-spacing: 0.01em; color: var(--cep-verde); background: var(--cep-limao-18); padding: 3px 8px; border-radius: 999px; }
.cep-loja__nome { margin: 0 0 3px; font-size: 13px; font-weight: 600; color: var(--cep-tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cep-loja__end { margin: 0 0 5px; font-size: 12.5px; line-height: 1.4; color: var(--cep-tinta-fraca); }
.cep-loja__cidade { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.01em; color: var(--cep-verde-escuro-50); }

/* mapa (Leaflet): o .cep-oe__map isola as camadas do Leaflet (z-index 0) */
.cep-oe__mapwrap { position: relative; border-radius: 22px; overflow: hidden; border: 1px solid var(--cep-neutro-2); min-height: 640px; }
/* el-ok A325: é o próprio mapa do Leaflet (arrastar e dar zoom), dentro do bloco data-el-manual do localizador; precisa receber o mouse */
.cep-oe__map { position: absolute; inset: 0; height: 100%; background: var(--cep-neutro); z-index: 0; }
.cep-oe__map-dica {
  position: absolute; left: 14px; bottom: 14px; z-index: 1;
  background: var(--cep-verde-escuro-90); color: var(--cep-creme);
  font-size: 12px; font-weight: 600; padding: 8px 13px; border-radius: 999px;
  pointer-events: none; transition: opacity .3s ease;
}
.cep-oe__aviso { margin: 22px 0 0; font-size: 12.5px; color: var(--cep-verde-escuro-50); }

/* ---------- pino da marca (L.icon com assets/graficos/pin-mapa*.svg) ---------- */
.cep-oe-pin { filter: drop-shadow(0 4px 5px var(--cep-preto-28)); }

/* Leaflet com cara da marca (classes da biblioteca: classesPermitidas na config) */
.cep-oe__map .leaflet-control-zoom { border: 0; box-shadow: 0 4px 12px var(--cep-preto-14); border-radius: 12px; overflow: hidden; }
.cep-oe__map .leaflet-control-zoom a {
  width: 34px; height: 34px; line-height: 34px; color: var(--cep-verde-escuro);
  background: var(--cep-branco); border: 0; font-size: 20px; font-weight: 700;
}
.cep-oe__map .leaflet-control-zoom a:hover { background: var(--cep-limao); color: var(--cep-verde-escuro); }
.cep-oe__map .leaflet-bar a + a { border-top: 1px solid var(--cep-neutro-2); }
.cep-oe__map .leaflet-popup-content-wrapper { border-radius: 14px; box-shadow: 0 8px 24px var(--cep-preto-18); }
.cep-oe__map .leaflet-popup-content { font-family: var(--cep-fonte-texto); font-size: 13px; margin: 12px 14px; line-height: 1.5; }
.cep-oe__map .leaflet-popup-tip { box-shadow: 0 8px 24px var(--cep-preto-18); }
/* o balão do pino reaproveita o card da loja: nome em destaque + cidade · UF */
.cep-loja__cab--balao,
.cep-loja__end--balao { display: none; }
.cep-loja__nome--balao { margin: 0; font-weight: 800; color: var(--cep-verde-escuro); font-size: 14px; white-space: normal; overflow: visible; }
.cep-loja__cidade--balao { font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: inherit; }

@media (max-width: 767px) {
  .cep-oe__split { grid-template-columns: 1fr; }
  .cep-oe__mapwrap { min-height: 420px; order: -1; }
  .cep-oe__painel { max-height: none; }
  .cep-oe__lista { max-height: 420px; }
  .cep-oe__selects { grid-template-columns: 1fr; }
  .cep-oe__stats { padding: 24px 22px; }
}

/* ---- Onde encontrar: os três marketplaces (02/10) ----
   Card inteiro clicável (abre em nova aba). A área do logo é branca: os
   logos oficiais entram ali (por ora, o nome da loja). */
.cep-mkts { background: var(--cep-branco-quente); }
.cep-mkts__cabeca { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px 40px; margin-bottom: 30px; }
.cep-mkts__linha { max-width: 38ch; margin: 0; font-size: 17px; line-height: 1.5; color: var(--cep-verde-escuro-78); }
.cep-mkts__grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto; gap: 18px; }
.cep-mkt {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px 18px 24px;
  border: 1px solid var(--cep-verde-escuro-12);
  border-radius: 22px;
  background: var(--cep-branco);
  color: var(--cep-verde-escuro);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.cep-mkt:hover { transform: translateY(-4px); border-color: var(--cep-verde-escuro-25); box-shadow: 0 22px 44px var(--cep-verde-escuro-12); }
.cep-mkt:focus-visible { outline: 3px solid var(--cep-limao); outline-offset: 3px; }
.cep-mkt__logo {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 7;
  border-radius: 14px;
  background: var(--cep-neutro-3);
}
.cep-mkt__marca { display: block; width: auto; height: auto; max-width: 58%; max-height: 66%; }
.cep-mkt__texto { padding: 0 6px; font-size: 15.5px; line-height: 1.5; color: var(--cep-verde-escuro-78); }
.cep-mkt__botao {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin: auto 6px 0;
  padding: 13px 22px;
  border-radius: 999px;
  background: var(--cep-verde-escuro);
  color: var(--cep-creme);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: background-color .2s ease;
}
.cep-mkt:hover .cep-mkt__botao { background: var(--cep-verde); }
.cep-mkt__seta { font-size: 15px; line-height: 1; }

@media (max-width: 1024px) {
  .cep-mkts__grade { grid-template-columns: minmax(0, 1fr); }
  .cep-mkt__logo { aspect-ratio: 16 / 5; }
}

/* 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 ---- */
.cep-secao--sintro { position: relative; background: var(--cep-branco-quente); padding: 80px 0 84px; }
/* os três quadros (02/10): a peça da p.98 do guia em tamanho grande */
.cep-sintro__quadros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto; gap: 18px; margin-top: 44px; }
/* palavras gigantes tom-sobre-tom derivando com o scroll (grafismo da home) */
/* el-ok A325: palavras decorativas ao fundo; ficam abaixo da faixa (z-index 1) e não cobrem o conteúdo */
.cep-sust-eco2 {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 4vw;
  overflow: hidden; z-index: 0;
}
.cep-sust-eco2__linha {
  font-family: var(--cep-fonte-titulo);
  font-size: clamp(90px, 14vw, 220px);
  line-height: 0.9;
  white-space: nowrap;
  color: var(--cep-limao-55);
  opacity: 0.30;
}
.cep-sust-eco2__linha--dir { align-self: flex-end; margin-right: -4%; }
.cep-sust-eco2__linha--esq { margin-left: -4%; }
.cep-sintro { max-width: 60ch; }
.cep-sintro__texto {
  margin: 18px 0 0;
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--cep-tinta);
}
.cep-sintro__nums {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 44px;
  padding-top: 34px;
  border-top: 1px solid var(--cep-verde-escuro-14);
}
.cep-sintro__num { display: flex; flex-direction: column; gap: 6px; }
.cep-sintro__valor {
  font-family: var(--cep-fonte-texto);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1;
  color: var(--cep-verde);
}
.cep-sintro__rot {
  font-size: 14px;
  line-height: 1.4;
  color: var(--cep-verde-escuro-70);
}

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

/* cena de entrada: cards caem tortos e assentam em cascata (efeito da home).
   has-cena é o JS que põe (só quando vai animar). */
.cep-sart.has-cena:not(.is-vivo) .cep-sartc { opacity: 0; transform: translateY(46px) rotate(-3deg); }
.cep-sart .cep-sartc:nth-child(2) { transition-delay: .08s; }
.cep-sart .cep-sartc:nth-child(3) { transition-delay: .16s; }
.cep-sart .cep-sartc:nth-child(4) { transition-delay: .06s; }
.cep-sart .cep-sartc:nth-child(5) { transition-delay: .14s; }
.cep-sart .cep-sartc:nth-child(6) { transition-delay: .22s; }
.cep-sart .cep-sartc:nth-child(7) { transition-delay: .12s; }
.cep-sart .cep-sartc:nth-child(8) { transition-delay: .20s; }
.cep-sart .cep-sartc:nth-child(9) { transition-delay: .28s; }
.cep-sartc__chapeu {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--cep-verde);
}
/* os títulos dos artigos vêm em caixa alta: OverHeat, não Outfit (revisão da Aléxia, 14/10) */
.cep-sartc__titulo {
  margin-top: 8px;
  font-family: var(--cep-fonte-titulo);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.18;
  color: var(--cep-verde-escuro);
}
.cep-sartc__resumo {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--cep-tinta-fraca);
}
.cep-sartc__ir {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--cep-neutro-2);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--cep-verde);
}
.cep-sartc__ir em { font-style: normal; }
.cep-sartc:hover .cep-sartc__ir { color: var(--cep-laranja); }

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

/* títulos das seções de Sustentabilidade e dos artigos em OverHeat
   (revisão da Aléxia, 14/10): a versão oficial da fonte tem acentos. */
.cep-secao__titulo--sust {
  font-family: var(--cep-fonte-titulo);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.12;
}

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

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

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

.cep-ct__redes { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.cep-ct__redes-rot { width: 100%; font-size: 12px; font-weight: 700; letter-spacing: 0.01em; color: var(--cep-verde-escuro-50); margin-bottom: 2px; }
.cep-ct__rede { font-size: 14.5px; font-weight: 600; color: var(--cep-verde-escuro); }
.cep-ct__rede:hover { color: var(--cep-verde); }

/* ---- formulário ---- */
.cep-ct__form-wrap {
  background: var(--cep-branco);
  border: 1px solid var(--cep-neutro-2);
  border-radius: 22px;
  padding: 34px 34px 30px;
  box-shadow: 8px 12px 0 var(--cep-verde-escuro-08);
}
.cep-ct__linha { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cep-ct__campo { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.cep-ct__label { font-size: 13px; font-weight: 700; color: var(--cep-verde-escuro); }
.cep-ct__label i { color: var(--cep-laranja); font-style: normal; }
.cep-ct__input {
  font-family: var(--cep-fonte-texto);
  font-size: 15px;
  color: var(--cep-verde-escuro);
  background: var(--cep-neutro);
  border: 1.5px solid var(--cep-verde-escuro-14);
  border-radius: 11px;
  padding: 12px 14px;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.cep-ct__textarea { resize: vertical; min-height: 120px; }
.cep-ct__select {
  appearance: none; cursor: pointer;
  background: var(--cep-neutro) url("../assets/icons/seta-select.svg") no-repeat right 14px center / 15px;
  padding-right: 38px;
}
.cep-ct__input:focus {
  outline: none; border-color: var(--cep-verde); background: var(--cep-branco);
  box-shadow: 0 0 0 3px var(--cep-limao-30);
}
.cep-ct__input:focus-visible { box-shadow: 0 0 0 3px var(--cep-limao-30); }
.cep-ct__input:user-invalid { border-color: var(--cep-laranja); }

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

@media (max-width: 767px) {
  .cep-ct__grade { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .cep-ct__linha { grid-template-columns: 1fr; }
}

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

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

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

.cep-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(--cep-branco);
}
.cep-dl-item__ico--PDF { background: var(--cep-laranja); }
.cep-dl-item__ico--ZIP { background: var(--cep-verde); }

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

.cep-dl__aviso { margin: 34px 0 0; font-size: 12.5px; color: var(--cep-verde-escuro-50); }

/* Grade de ações de sustentabilidade: além da grade (29), a seção herda este
   fundo e respiro (mantido como estava no layout aprovado). */
.cep-sart { background: var(--cep-neutro); padding: 56px 0 80px; }

/* Páginas legais/institucionais internas (10/09): Tabela de Fenilalanina,
   Política de Segurança dos Alimentos, Política de Privacidade e Relatório de
   Transparência. Coleção "legais" (dados/legais.json + blocos/legais/). Fundo
   branco, coluna de leitura estreita, mesma família das internas. */
.cep-doc { background: var(--cep-branco); padding: 40px 0 84px; }
.cep-doc__chapeu { color: var(--cep-verde); margin: 20px 0 0; }
.cep-doc__titulo {
  font-family: var(--cep-fonte-texto); font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(30px, 4vw, 46px); line-height: 1.05; color: var(--cep-verde-escuro);
  margin: 10px 0 0;
}
.cep-doc__lead { margin: 16px 0 0; font-size: 18px; line-height: 1.55; color: var(--cep-tinta); max-width: 66ch; }
.cep-doc__corpo { margin-top: 30px; max-width: 68ch; color: var(--cep-tinta); font-size: 16.5px; line-height: 1.75; }
.cep-doc__h2 {
  font-family: var(--cep-fonte-texto); font-weight: 800; letter-spacing: -0.01em;
  font-size: 20px; color: var(--cep-verde-escuro); margin: 32px 0 10px;
}
.cep-doc__p { margin: 0 0 14px; }
.cep-doc__corpo strong { color: var(--cep-verde-escuro); }
.cep-doc__corpo a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.cep-doc__corpo a:hover { color: var(--cep-verde-escuro); }

.cep-doc__botoes { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 8px; }
.cep-doc__botoes .cep-btn { text-decoration: none; }

/* tabela (fenilalanina): bloco manual no Elementor (data-el-manual) */
.cep-doc__tabela { overflow-x: auto; margin: 24px 0; border: 1px solid var(--cep-neutro-2); border-radius: 14px; }
.cep-doc__t { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 15px; }
.cep-doc__th, .cep-doc__td { padding: 11px 16px; text-align: left; border-bottom: 1px solid var(--cep-neutro-2); }
.cep-doc__th {
  /* só o cabeçalho usa th: a tabela de dados tem td no corpo */
  background: var(--cep-verde-inst); color: var(--cep-creme);
  font-size: 12px; letter-spacing: 0.01em; font-weight: 800;
}
.cep-doc__th:last-child, .cep-doc__td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--cep-verde-escuro); }
.cep-doc__tr:last-child .cep-doc__td { border-bottom: 0; }
.cep-doc__tr:nth-child(even) { background: var(--cep-neutro-3); }

/* Imprensa (02/10): card da assessoria (e-mail) + equipe com telefone, e a
   seção "Na mídia" (releases em dados/imprensa.json). */
.cep-impr__grade { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: auto; gap: 22px; align-items: stretch; }
.cep-impr__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(26px, 3vw, 42px);
  border-radius: 24px;
  background: var(--cep-verde-escuro);
  color: var(--cep-creme);
}
.cep-impr__icone { width: 32px; height: 32px; color: var(--cep-limao); }
.cep-impr__titulo { margin: 8px 0 0; font-size: clamp(24px, 2.2vw, 32px); font-weight: 800; letter-spacing: -0.01em; color: var(--cep-creme); }
.cep-impr__texto { margin: 0; font-size: 16px; line-height: 1.5; color: var(--cep-creme-86); }
.cep-impr__email {
  margin-top: auto;
  padding-top: 18px;
  font-size: clamp(17px, 1.6vw, 22px);
  font-weight: 700;
  color: var(--cep-limao);
  overflow-wrap: anywhere;
  transition: color .2s ease;
}
.cep-impr__email:hover { color: var(--cep-creme); }

.cep-impr__equipe { display: flex; flex-direction: column; gap: 10px; }
.cep-impr__rot { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.01em; color: var(--cep-verde); }
.cep-impr__pessoa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex: 1 1 auto;
  min-height: 64px;
  padding: 16px 22px;
  border: 1px solid var(--cep-verde-escuro-12);
  border-radius: 18px;
  background: var(--cep-branco);
  transition: border-color .2s ease, transform .2s ease;
}
.cep-impr__pessoa:hover { border-color: var(--cep-verde-escuro-25); transform: translateY(-2px); }
.cep-impr__nome { font-size: 17px; font-weight: 700; color: var(--cep-verde-escuro); }
.cep-impr__tel { font-size: 16px; font-weight: 600; color: var(--cep-verde); white-space: nowrap; }

.cep-impr-midia { background: var(--cep-branco-quente); }
.cep-impr__vazio { max-width: 60ch; margin: 18px 0 0; font-size: 17px; line-height: 1.55; color: var(--cep-verde-escuro-78); }
.cep-impr__vazio a { font-weight: 700; color: var(--cep-verde); text-decoration: underline; text-underline-offset: 3px; }
.cep-impr__releases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto; gap: 16px; margin-top: 24px; }
.cep-impr__release { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 18px; background: var(--cep-branco); border: 1px solid var(--cep-verde-escuro-12); }
.cep-impr__veiculo { font-size: 12px; font-weight: 700; letter-spacing: 0.01em; color: var(--cep-verde); }
.cep-impr__rtitulo { font-size: 17px; font-weight: 700; line-height: 1.35; color: var(--cep-verde-escuro); }
.cep-impr__data { margin-top: auto; font-size: 13px; color: var(--cep-verde-escuro-60); }

@media (max-width: 1024px) {
  .cep-impr__grade { grid-template-columns: minmax(0, 1fr); }
  .cep-impr__releases { grid-template-columns: minmax(0, 1fr); }
}

/* PÁGINAS DE MARCA (rodada 4, 03/10): marcas/{slug}.html, coleção "marcas"
   (blocos/marca/ + dados/marcas.json). Mesma estrutura nas cinco; cada marca
   só troca as variáveis da classe cep-mt--{slug}, com a paleta do brandbook
   (Linha Cepêra p.90, Mais Sabor p.120, Profissional p.167). UMAI e Collabs
   não têm paleta no guia: usam o cáqui UMAI e os vinhos da casa. */
.cep-mt--cepera {
  --m-tint: var(--cep-cep-pessego);  /* Pantone 7506 C "Creme Caseiro" (brandbook p.90), pedido do Dante 14/10 */
  --m-tint-tx: var(--cep-verde-escuro); --m-titulo: var(--cep-verde-escuro);
  --m-selo: var(--cep-verde); --m-escuro: var(--cep-verde-escuro); --m-escuro-tx: var(--cep-creme);
  --m-acento: var(--cep-limao); --m-acento-tx: var(--cep-verde-escuro); --m-chip: var(--cep-verde); --m-chip-tx: var(--cep-branco);
}
.cep-mt--mais-sabor {
  --m-tint: var(--cep-ms-vinho); --m-tint-tx: var(--cep-cep-pessego); --m-titulo: var(--cep-ms-amarelo);
  --m-selo: var(--cep-ms-laranja); --m-escuro: var(--cep-ms-vinho); --m-escuro-tx: var(--cep-cep-pessego);
  --m-acento: var(--cep-ms-amarelo); --m-acento-tx: var(--cep-ms-vinho); --m-chip: var(--cep-ms-vinho); --m-chip-tx: var(--cep-cep-pessego);
}
.cep-mt--profissional {
  --m-tint: var(--cep-pro-claro); --m-tint-tx: var(--cep-pro-escuro); --m-titulo: var(--cep-verde-escuro);
  --m-selo: var(--cep-verde); --m-escuro: var(--cep-pro-escuro); --m-escuro-tx: var(--cep-pro-claro);
  --m-acento: var(--cep-limao); --m-acento-tx: var(--cep-pro-escuro); --m-chip: var(--cep-pro-claro); --m-chip-tx: var(--cep-pro-escuro);
}
.cep-mt--umai {
  --m-tint: var(--cep-umai-claro); --m-tint-tx: var(--cep-preto); --m-titulo: var(--cep-preto);
  --m-selo: var(--cep-umai); --m-escuro: var(--cep-preto); --m-escuro-tx: var(--cep-branco-quente);
  --m-acento: var(--cep-umai); --m-acento-tx: var(--cep-preto); --m-chip: var(--cep-umai); --m-chip-tx: var(--cep-preto);
}
.cep-mt--collabs {
  --m-tint: var(--cep-creme); --m-tint-tx: var(--cep-vinho-escuro); --m-titulo: var(--cep-vinho-escuro);
  --m-selo: var(--cep-vinho); --m-escuro: var(--cep-vinho); --m-escuro-tx: var(--cep-creme);
  --m-acento: var(--cep-paprica); --m-acento-tx: var(--cep-vinho-escuro); --m-chip: var(--cep-vinho-escuro); --m-chip-tx: var(--cep-creme);
}

/* cabeça das seções: título à esquerda, ação à direita */
.cep-mcab { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px 40px; margin-bottom: 44px; }
.cep-mcab__linha { max-width: 44ch; margin: 0; font-size: 17px; line-height: 1.55; }

/* ---- a proposta (03/10): respiro de texto depois do hero, como na rodada 2.
   Título à esquerda, texto/atributos/botão à direita, fundo claro da marca, e
   embaixo uma fileira de fotos arredondadas (UMAI: os frascos em pé). ---- */
.cep-mt--cepera { --m-prop-bg: var(--cep-creme); --m-prop-tx: var(--cep-verde-escuro); --m-prop-selo: var(--cep-verde); }
/* Mais Sabor: "A linha" no laranja da marca (revisão da Aléxia, 14/10: "fundo laranja, cheddar cremoso") */
.cep-mt--mais-sabor { --m-prop-bg: var(--cep-ms-laranja); --m-prop-tx: var(--cep-ms-vinho); --m-prop-selo: var(--cep-ms-vinho); }
.cep-mt--profissional { --m-prop-bg: var(--cep-branco-quente); --m-prop-tx: var(--cep-pro-escuro); --m-prop-selo: var(--cep-verde); }
.cep-mt--umai { --m-prop-bg: var(--cep-umai-claro); --m-prop-tx: var(--cep-preto); --m-prop-selo: var(--cep-preto); }
.cep-mprop { padding: 104px 0 96px; background: var(--m-prop-bg); color: var(--m-prop-tx); }
.cep-mprop__grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; gap: 64px; align-items: start; margin-bottom: 56px; }
.cep-mprop__col { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.cep-mprop__selo { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: 0.01em; color: var(--m-prop-selo); }
.cep-mprop__titulo { margin: 0; font-size: clamp(34px, 3.9vw, 56px); line-height: 1.12; color: var(--m-prop-tx); }
.cep-mprop__fecho { margin: 8px 0 0; font-family: var(--cep-fonte-titulo); font-size: 24px; line-height: 1.1; color: var(--m-prop-selo); }
.cep-mprop__sub { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.4; }
.cep-mprop__txt { margin: 0; font-size: 17px; line-height: 1.6; }
.cep-mprop__attrs { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: 16px; line-height: 1.5; }
.cep-mprop__attr { position: relative; padding-left: 26px; }
.cep-mprop__attr::before { content: ""; position: absolute; left: 0; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--m-prop-selo); }
.cep-mprop__pilares { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; gap: 12px; width: 100%; }
.cep-mprop__pilar { padding: 22px; border-radius: 20px; background: var(--m-escuro); color: var(--m-escuro-tx); }
.cep-mprop__pilar-nome { margin: 0 0 8px; font-family: var(--cep-fonte-titulo); font-size: 20px; line-height: 1; color: var(--m-acento); }
.cep-mprop__pilar-desc { margin: 0; font-size: 15px; line-height: 1.5; }
.cep-mprop__btn { margin-top: 6px; background: var(--m-escuro); color: var(--m-escuro-tx); }
.cep-mprop__btn:hover { background: var(--m-prop-selo); color: var(--m-prop-bg); }
.cep-mprop__fotos { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: auto; gap: 16px; }
.cep-mprop__foto { width: 100%; height: 340px; object-fit: cover; border-radius: 22px; display: block; }
.cep-mprop__fila { display: flex; justify-content: center; align-items: flex-end; gap: 0; padding-top: 12px; overflow: clip; }
.cep-mprop__pack { height: 400px; width: auto; margin: 0 -78px; filter: drop-shadow(0 18px 22px var(--cep-preto-20)); }
.cep-mprop__pack:nth-child(3) { position: relative; z-index: 1; height: 450px; }

/* ---- os pôsteres (formato dos totens) ---- */
.cep-mposters { padding: 96px 0; background: var(--cep-branco-quente); }
.cep-mposters__grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto; gap: 20px; }
.cep-mposter {
  --p-fundo: var(--cep-verde);
  --p-tinta: var(--cep-limao-claro);
  position: relative;
  isolation: isolate;
  height: 600px;
  overflow: hidden;
  border-radius: 26px;
  background: var(--p-fundo);
  color: var(--p-tinta);
}
.cep-mposter__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: -1; pointer-events: none; }
.cep-mposter__frase { position: absolute; left: 24px; right: 24px; margin: 0; text-align: center; font-size: 38px; font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; }
.cep-mposter__frase--topo { top: 40px; }
.cep-mposter__frase--pe { bottom: 108px; }
.cep-mposter__frase--meio { position: relative; left: auto; right: auto; margin-top: 18px; font-size: 22px; font-weight: 700; }
.cep-mposter__linha { display: block; margin: 0; }
.cep-mposter__tipo { display: flex; flex-direction: column; align-items: center; margin: 0; padding-top: 64px; font-family: var(--cep-fonte-titulo); font-size: 100px; line-height: 0.86; text-align: center; }
.cep-mposter__rep {
  position: absolute;
  inset: -16% -30% 6%;
  z-index: -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto;
  gap: 2% 8%;
  transform: rotate(-28deg);
}
.cep-mposter__rep-img { width: 100%; height: auto; filter: drop-shadow(0 14px 16px var(--cep-preto-28)); }
.cep-mposter__logo { position: absolute; left: 50%; bottom: 30px; height: 54px; width: auto; transform: translateX(-50%); }
.cep-mposter--laranja-graf { --p-fundo: var(--cep-laranja-graf); --p-tinta: var(--cep-verde-escuro); }
/* "Tempera" (brandbook p.98, Linha Cepêra): a Forma do pote em amarelo claro
   no meio, o ketchup de pé sobre ela, TEMPERA embaixo e a frase; sem logo */
.cep-mposter--laranja-graf::before {
  content: "";
  position: absolute;
  left: 11%;
  right: 11%;
  top: 39%;
  height: 27%;
  z-index: -1;
  background: var(--cep-cep-amarelo);
  -webkit-mask: url("../assets/graficos/forma-pote.svg") center / 100% 100% no-repeat;
  mask: url("../assets/graficos/forma-pote.svg") center / 100% 100% no-repeat;
}
.cep-mposter__tipo--forma { position: absolute; left: 0; right: 0; top: 70%; padding: 0; font-size: clamp(44px, 4.3vw, 64px); color: var(--cep-cep-amarelo); }
.cep-mposter__frase--forma { top: 83%; font-size: clamp(16px, 1.45vw, 21px); font-weight: 800; color: var(--cep-verde-escuro); }
.cep-mposter--ms-laranja { --p-fundo: var(--cep-ms-laranja); --p-tinta: var(--cep-ms-vinho); }
/* a Forma do logo (forma-pote.svg) na proporção certa, centrada atrás do
   "UM HM" (revisão da Aléxia, 14/10: a curva desenhada à mão saiu) */
.cep-mposter--ms-laranja::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 92%;
  aspect-ratio: 1474 / 687;
  z-index: -1;
  transform: translate(-50%, -50%);
  background: var(--cep-paprica);
  -webkit-mask: url("../assets/graficos/forma-pote.svg") center / 100% 100% no-repeat;
  mask: url("../assets/graficos/forma-pote.svg") center / 100% 100% no-repeat;
}
.cep-mposter--pro-escuro { --p-fundo: var(--cep-pro-escuro); --p-tinta: var(--cep-limao); }
.cep-mposter--pro-escuro .cep-mposter__tipo { padding-top: 120px; font-size: 64px; line-height: 1; }
.cep-mposter--pro-claro { --p-fundo: var(--cep-pro-claro); --p-tinta: var(--cep-pro-escuro); }

/* ---- vitrine ---- */
.cep-mvit { background: var(--m-tint); color: var(--m-tint-tx); }
.cep-mvit .cep-secao__titulo { color: var(--m-titulo); }
.cep-mvit__btn { background: var(--m-escuro); color: var(--m-escuro-tx); }
.cep-mt--mais-sabor .cep-mvit__btn { background: var(--cep-ms-amarelo); color: var(--cep-ms-vinho); }
.cep-mvit__grade { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: auto; gap: 24px; align-items: end; }
.cep-mvit__prod { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: inherit; }
.cep-mvit__prod:hover { color: inherit; }
.cep-mvit__img { height: 260px; width: 100%; object-fit: contain; filter: drop-shadow(0 14px 16px var(--cep-preto-18)); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.cep-mvit__prod:hover .cep-mvit__img { transform: translateY(-8px); }
.cep-mvit__nome { margin-top: 10px; font-size: 16px; font-weight: 700; line-height: 1.3; }
.cep-mvit__peso { font-size: 14px; }

/* ---- receitas da linha ---- */
.cep-mrec__todas { font-size: 13px; font-weight: 700; letter-spacing: 0.01em; text-decoration: underline; text-underline-offset: 5px; }
.cep-mrec__grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto; gap: 28px; }
.cep-mrec__card { display: flex; flex-direction: column; gap: 20px; padding: 16px 16px 26px; border-radius: 22px; background: var(--m-escuro); color: var(--m-escuro-tx); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.cep-mrec__card:hover { transform: translateY(-6px); color: var(--m-escuro-tx); }
.cep-mrec__foto { position: relative; display: block; height: 250px; overflow: hidden; border-radius: 16px; }
.cep-mrec__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cep-mrec__tempo { position: absolute; right: 14px; top: 14px; padding: 7px 12px; border-radius: 8px; background: var(--m-acento); color: var(--m-acento-tx); font-size: 13px; font-weight: 800; }
.cep-mrec__titulo { padding: 0 6px; font-size: 22px; line-height: 1.25; }
.cep-mrec__btn { align-self: center; padding: 13px 30px; border-radius: 99px; background: var(--m-acento); color: var(--m-acento-tx); font-size: 14px; font-weight: 700; }

/* ---- parceiros (Collabs) ---- */
.cep-mparc { background: var(--m-tint); color: var(--m-tint-tx); }
.cep-mparc .cep-secao__titulo { color: var(--m-titulo); }
/* seis parceiros desde 14/10 (entrou a UNO): uma linha só no desktop */
.cep-mparc__grade { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: auto; gap: 14px; }
/* cards só de tipografia (03/10): as fotos das embalagens parceiras não têm
   qualidade; o nome do parceiro manda, com a forma concêntrica ao fundo */
.cep-mparc__card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  height: 260px;
  padding: 24px 20px;
  overflow: hidden;
  border-radius: 24px;
  background: var(--m-escuro);
  color: var(--m-escuro-tx);
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
/* revisão da Aléxia (14/10): a Forma do pote grande, em diagonal, no cartão
   inteiro (a da referência da Linha Cepêra) e as cores da referência da
   Collabs: vinho com a Forma em laranja */
.cep-mparc__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--cep-laranja-35);
  -webkit-mask: url("../assets/graficos/padrao-potes-diagonal.svg") 0 0 / 280px 160px repeat;
  mask: url("../assets/graficos/padrao-potes-diagonal.svg") 0 0 / 280px 160px repeat;
}
.cep-mparc__card:hover { transform: translateY(-6px); color: var(--m-escuro-tx); }
.cep-mparc__nome { font-family: var(--cep-fonte-titulo); font-size: 28px; line-height: 1; text-transform: uppercase; }
.cep-mparc__n { margin-top: auto; font-size: 14px; font-weight: 600; }
.cep-mparc__ir { font-size: 13px; font-weight: 700; letter-spacing: 0.01em; color: var(--m-acento); }

/* ---- outras marcas ---- */
.cep-mout { position: relative; isolation: isolate; padding: 88px 0; background: var(--cep-verde-escuro); overflow: clip; }
.cep-mout::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--cep-limao-09);
  -webkit-mask: url("../assets/graficos/padrao-potes-kv.svg") 0 0 / 129px 56px repeat;
  mask: url("../assets/graficos/padrao-potes-kv.svg") 0 0 / 129px 56px repeat;
}
.cep-mout__faixa { display: flex; flex-direction: column; align-items: center; gap: 26px; text-align: center; }
.cep-mout__titulo { margin: 0; font-size: clamp(34px, 3.9vw, 56px); line-height: 1.12; color: var(--cep-creme); }
.cep-mout__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.cep-mout__chip { display: inline-flex; align-items: center; height: 50px; padding: 0 24px; border-radius: 99px; background: var(--m-chip); color: var(--m-chip-tx); font-size: 15px; font-weight: 700; transition: transform .25s ease; }
.cep-mout__chip:hover { transform: translateY(-3px); color: var(--m-chip-tx); }
.cep-mout__assina { display: flex; align-items: center; gap: 14px; }
.cep-mout__logo { height: 42px; width: auto; }
.cep-mout__frase { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.2; text-align: left; color: var(--cep-creme); }

@media (max-width: 1024px) {
  .cep-mvit__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cep-mparc__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cep-mposter { height: 520px; }
  .cep-mposter__tipo { font-size: 72px; }
}
@media (max-width: 767px) {
  .cep-mprop { padding: 64px 0; }
  .cep-mprop__grade { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-bottom: 36px; }
  .cep-mprop__pilares { grid-template-columns: minmax(0, 1fr); }
  .cep-mprop__fotos { grid-template-columns: minmax(0, 1fr); }
  .cep-mprop__foto { height: 240px; }
  .cep-mprop__pack { height: 180px; margin: 0 -26px; }
  .cep-mprop__pack:nth-child(3) { height: 210px; }
  .cep-mposters { padding: 56px 0; }
  .cep-mposters__grade { grid-template-columns: minmax(0, 1fr); }
  .cep-mvit__grade, .cep-mparc__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cep-mvit__img { height: 200px; }
  .cep-mrec__grade { grid-template-columns: minmax(0, 1fr); }
}

/* ---- home: os cinco pôsteres de "Nossas marcas" (rodada 4) ---- */
.cep-mposters__grade--home { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: clamp(32px, 3.4vw, 52px); }
.cep-mposter--home { display: block; height: 520px; transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease; }
.cep-mposter--home:hover { transform: translateY(-8px); box-shadow: 0 26px 44px var(--cep-preto-20); color: var(--p-tinta); }
.cep-mposter--home .cep-mposter__foto { transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.cep-mposter--home:hover .cep-mposter__foto { transform: scale(1.05); }
.cep-mposter--home .cep-mposter__frase { display: block; font-size: 26px; }
.cep-mposter--home .cep-mposter__frase--pe { bottom: 92px; }
.cep-mposter--home .cep-mposter__tipo { padding-top: 56px; font-size: 64px; }
/* o nome da marca numa pílula clara no pé: lê bem sobre foto ou cor */
.cep-mposter__marca {
  position: absolute;
  left: 50%;
  bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 99px;
  white-space: nowrap;
  transform: translateX(-50%);
  background: var(--cep-branco-quente);
  color: var(--cep-verde-escuro);
  font-size: 14px;
  font-weight: 700;
}
.cep-mposter__seta { transition: transform .3s ease; }
.cep-mposter--home:hover .cep-mposter__seta { transform: translateX(4px); }
.cep-mposter--umai { --p-fundo: var(--cep-umai); --p-tinta: var(--cep-preto); }
.cep-mposter--collabs { --p-fundo: var(--cep-vinho-escuro); --p-tinta: var(--cep-creme); }
@media (max-width: 1024px) {
  .cep-mposters__grade--home { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 42%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; }
  .cep-mposter--home { scroll-snap-align: start; }
}
@media (max-width: 767px) {
  .cep-mposters__grade--home { grid-auto-columns: 74%; }
  .cep-mposter--home { height: 460px; }
}
/* pôster com foto: um véu verde-escuro no topo garante a leitura da frase */
.cep-mposter--foto::before {
  content: "";
  position: absolute;
  inset: 0 0 45%;
  z-index: 0;
  background: linear-gradient(var(--cep-verde-escuro-62), var(--cep-verde-escuro-00));
  pointer-events: none;
}
.cep-mposter--foto .cep-mposter__frase { z-index: 1; }

/* ---- pôsteres da home, ajustes de 03/10 (tarde) ----
   Mais Sabor ganha a embalagem; UMAI vira uma fila de frascos em pé (a
   diagonal espalhada não funcionou); Collabs vira tipografia com os nomes
   dos parceiros (as fotos das embalagens parceiras não têm qualidade). */
.cep-mposter__pack {
  position: absolute;
  left: 50%;
  bottom: 70px;
  height: 46%;
  width: auto;
  transform: translateX(-50%) rotate(-8deg);
  filter: drop-shadow(0 18px 22px var(--cep-preto-28));
}
.cep-mposter__fila { position: absolute; left: 0; right: 0; bottom: 78px; display: flex; justify-content: center; align-items: flex-end; }
.cep-mposter__fila-img { height: 240px; width: auto; margin: 0 -64px; filter: drop-shadow(0 16px 18px var(--cep-preto-28)); }
.cep-mposter__fila-img:nth-child(2) { position: relative; z-index: 1; height: 272px; }
.cep-mposter__selo { position: absolute; left: 0; right: 0; top: 40px; text-align: center; font-size: 13px; font-weight: 800; letter-spacing: 0.01em; color: var(--cep-paprica); }
.cep-mposter__lista { position: absolute; left: 12px; right: 12px; top: 50%; display: flex; flex-direction: column; align-items: center; gap: 6px; transform: translateY(-58%); }
.cep-mposter__nome { font-family: var(--cep-fonte-titulo); font-size: 30px; line-height: 1; text-align: center; color: var(--cep-creme); }
.cep-mposter__nome:nth-child(even) { color: var(--cep-paprica); }
.cep-mposter--collabs::before {
  content: "";
  position: absolute;
  inset: -20% -60%;
  z-index: -1;
  background: var(--cep-creme-10);
  -webkit-mask: url("../assets/graficos/forma-concentrica.svg") center / contain no-repeat;
  mask: url("../assets/graficos/forma-concentrica.svg") center / contain no-repeat;
}

/* TEMPERA: o ketchup em pé, do tamanho da peça (17% a 64% da altura); vem
   depois da regra geral .cep-mposter__pack, que gira e reduz */
.cep-mposter__pack.cep-mposter__pack--forma { top: 11.8%; bottom: auto; height: 57.3%; transform: translateX(-50%); }

/* pôsteres da home com as fotos novas (09/10): Linha Cepêra (maionese),
   Mais Sabor (mostarda com mel), Profissional (food service) e Collabs
   (Chilli Beans). Na maionese o frasco fica à direita da foto; na Chilli
   Beans o enquadramento puxa um pouco para mostrar o rosto. */
.cep-mposter--home[href$="cepera.html"] .cep-mposter__foto { object-position: 80% 50%; }
.cep-mposter--home[href$="collabs.html"] .cep-mposter__foto { object-position: 62% 50%; }
/* UMAI (09/10): foto de sushi com o Tarê e o Shoyu Gengibre; o corte puxa
   para a esquerda, onde estão os frascos. */
.cep-mposter--home[href$="umai.html"] .cep-mposter__foto { object-position: 25% 50%; }

/* pôsteres da home, leitura (09/10): a frase desce para o pé, alinhada à
   esquerda junto com a pílula da marca, sobre um degradê verde-escuro que
   sobe do rodapé. O topo da foto fica limpo (produto à mostra) e os cinco
   pôsteres usam a mesma régua: 22px, mesma margem, mesma distância da pílula. */
.cep-mposter--home.cep-mposter--foto::before {
  inset: 38% 0 0;
  background: linear-gradient(0deg, var(--cep-verde-escuro-92) 0%, var(--cep-verde-escuro-70) 42%, var(--cep-verde-escuro-00) 100%);
}
.cep-mposter--home .cep-mposter__frase--topo { top: auto; bottom: 82px; left: 24px; right: 24px; text-align: left; font-size: 22px; line-height: 1.15; }
.cep-mposter--home .cep-mposter__marca { left: 24px; transform: none; }
/* Linha Cepêra, fotos da proposta (09/10): o pastel entra no lugar do
   cachorro-quente; o corte sobe para mostrar o rosto e a mordida. */
.cep-mprop__foto[src$="cep-foto1.webp"] { object-position: 50% 32%; }
/* Mais Sabor: a mostarda com mel no lugar do nacho (a foto tinha uma mancha
   preta do recorte). Linha Cepêra: a maionese no lugar do rapaz com o
   sanduíche, que já aparece no pôster logo abaixo. */
.cep-mprop__foto[src$="home-ms-mostarda-mel.webp"] { object-position: 50% 45%; }
.cep-mprop__foto[src$="home-cep-maionese.webp"] { object-position: 50% 25%; }
/* frases da home sempre em duas linhas, mesma caixa e mesma altura (09/10) */
.cep-mposter--home .cep-mposter__frase--topo { display: flex; align-items: flex-end; min-height: 2.3em; text-wrap: balance; }

/* ---- páginas de marca, ajustes de 09/10 ----
   Pôster de embalagens: três produtos da linha de pé, lado a lado, com o do
   meio na frente; a frase no topo como nos pôsteres de foto. */
.cep-mposter__fila3 { position: absolute; left: 0; right: 0; bottom: 104px; display: flex; justify-content: center; align-items: flex-end; }
.cep-mposter__fila3-img { height: 330px; width: auto; max-width: 50%; margin: 0 -10%; object-fit: contain; filter: drop-shadow(0 16px 18px var(--cep-preto-28)); }
.cep-mposter__fila3-img:nth-child(2) { position: relative; z-index: 1; height: 380px; }
.cep-mposter--pro-claro .cep-mposter__frase, .cep-mposter--verde .cep-mposter__frase { font-size: clamp(28px, 2.6vw, 38px); }
/* Profissional, TEMPERA TRANSFORMA TURBINA: as três palavras no meio do
   pôster (antes ficavam no alto, com a metade de baixo vazia) e o padrão dos
   potes do guia ao fundo, sutil, como nos heros. */
.cep-mposter--pro-escuro .cep-mposter__tipo { position: absolute; left: 0; right: 0; top: 46%; padding: 0; font-size: clamp(44px, 4.1vw, 58px); transform: translateY(-50%); }
.cep-mposter--pro-escuro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--cep-limao-09);
  -webkit-mask: url("../assets/graficos/padrao-potes-kv.svg") 0 0 / 129px 56px repeat;
  mask: url("../assets/graficos/padrao-potes-kv.svg") 0 0 / 129px 56px repeat;
}
/* vitrine: os nomes alinhados na mesma linha, qualquer que seja a embalagem */
.cep-mvit__grade { align-items: start; }
/* UMAI: a Maionese Wasabi (bisnaga, foto sem respiro) na escala dos frascos */
.cep-mprop__pack[src$="molho-wasabi.webp"] { height: 318px; margin-left: -96px; }
/* Collabs (09/10): cada cartão mostra um produto do parceiro e o que a linha
   tem; nome em caixa de duas linhas para os cartões ficarem alinhados. */
.cep-mparc__card { justify-content: flex-start; height: auto; min-height: 460px; }
.cep-mparc__nome { min-height: 2em; }
.cep-mparc__pack { display: block; align-self: center; height: 170px; width: auto; max-width: 100%; margin: 6px 0 10px; object-fit: contain; filter: drop-shadow(0 14px 16px var(--cep-preto-42)); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.cep-mparc__card:hover .cep-mparc__pack { transform: translateY(-6px) rotate(-3deg); }
.cep-mparc__desc { font-size: 14px; line-height: 1.45; opacity: .9; }
/* Mais Sabor, 3º pôster (ajustes da entrega final, 23/10): o grafismo de
   reverberação atrás das embalagens para preencher o fundo, como na peça verde
   da Mais Sabor no brandbook (p.128); anéis em verde mais escuro. Num tamanho
   em que as curvas aparecem e o miolo surge acima dos frascos (maior, os
   anéis viravam faixas retas). Sem o anel externo: na arte oficial ele é
   cortado reto em cima e embaixo (feito para sangrar), e o corte aparecia
   acima da frase; aqui ficam o miolo e os dois anéis fechados */
.cep-mt--mais-sabor .cep-mposter--verde::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--cep-verde-escuro-45);
  -webkit-mask: url("../assets/graficos/grafismo-concentrico-miolo.svg") 50% 12% / 145% auto no-repeat;
  mask: url("../assets/graficos/grafismo-concentrico-miolo.svg") 50% 12% / 145% auto no-repeat;
  pointer-events: none;
}

/* Home, rodada 4 (03/10): duas faixas tiradas das peças do brandbook.
   cep-manif   "Abriu / Sentiu / Turbinou" (Mais Sabor, aplicações)
   cep-assina  "Vai com tudo. Vai com Cepêra." com os frascos (mockup de site) */
.cep-manif { position: relative; isolation: isolate; height: clamp(480px, 44vw, 660px); overflow: clip; }
.cep-manif__foto { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 55% 30%; display: block; pointer-events: none; }
.cep-manif__palavra {
  position: absolute;
  margin: 0;
  font-family: var(--cep-fonte-titulo);
  font-size: clamp(56px, 7.6vw, 118px);
  line-height: 1;
  color: var(--cep-limao-claro);
}
.cep-manif__palavra--1 { left: 6.667%; top: 9%; }
.cep-manif__palavra--2 { right: 6.667%; top: 40%; }
.cep-manif__palavra--3 { left: 6.667%; bottom: 9%; }
.cep-manif__cta { position: absolute; right: 6.667%; bottom: 9%; background: var(--cep-limao-claro); color: var(--cep-verde-escuro); }
.cep-manif__cta:hover { background: var(--cep-branco-quente); color: var(--cep-verde-escuro); }

.cep-assina { position: relative; isolation: isolate; overflow: clip; background: var(--cep-verde); }
.cep-assina::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--cep-limao-22);
  -webkit-mask: url("../assets/graficos/padrao-potes-kv.svg") 0 0 / 129px 56px repeat;
  mask: url("../assets/graficos/padrao-potes-kv.svg") 0 0 / 129px 56px repeat;
}
.cep-assina__faixa {
  position: relative;
  max-width: var(--cep-faixa);
  height: clamp(520px, 50vw, 720px);
  margin: 0 auto;
  padding: 0 var(--cep-gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: auto;
  align-items: center;
}
.cep-assina__frase { position: relative; z-index: 1; margin: 0; font-family: var(--cep-fonte-titulo); font-size: clamp(56px, 8vw, 116px); line-height: 0.92; color: var(--cep-limao-claro); }
.cep-assina__frase--dir { justify-self: end; }
.cep-assina__frascos { position: relative; align-self: stretch; width: clamp(360px, 36vw, 540px); }
.cep-assina__frasco { position: absolute; bottom: -6%; height: 84%; width: auto; filter: drop-shadow(0 24px 30px var(--cep-preto-28)); }
.cep-assina__frasco--1 { left: -10%; }
.cep-assina__frasco--3 { right: -10%; }
.cep-assina__frasco--2 { left: 50%; height: 94%; transform: translateX(-50%); z-index: 2; }

@media (max-width: 767px) {
  .cep-manif__palavra--2 { top: 38%; }
  .cep-manif__cta { left: 6.667%; right: auto; bottom: 4%; }
  .cep-manif__palavra--3 { bottom: 18%; }
  .cep-assina__faixa { grid-template-columns: minmax(0, 1fr); height: auto; padding: 56px var(--cep-gutter-celular) 0; text-align: center; }
  .cep-assina__frase--dir { justify-self: center; }
  .cep-assina__frascos { width: 100%; height: 380px; order: 3; }
}

/* A Cepêra, rodada 4 (03/10): a narrativa e o posicionamento do brandbook
   (p.8 e p.9) entre o hero e Missão/Visão/Valores. */
.cep-acmanif { padding: 104px 0 96px; background: var(--cep-creme); color: var(--cep-verde-escuro); }
.cep-acmanif__grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; gap: 64px; align-items: end; margin-bottom: 56px; }
.cep-acmanif__titulo { margin: 0; font-size: clamp(34px, 3.9vw, 56px); line-height: 1.12; }
.cep-acmanif__texto { display: flex; flex-direction: column; gap: 14px; }
.cep-acmanif__p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--cep-verde-escuro-80); }
.cep-acmanif__p--assina { font-weight: 800; color: var(--cep-verde-escuro); }
.cep-acmanif__fotos { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: auto; gap: 16px; }
.cep-acmanif__foto { width: 100%; height: 320px; object-fit: cover; border-radius: 22px; display: block; }

.cep-acprop { position: relative; isolation: isolate; padding: 120px 0; overflow: clip; background: var(--cep-verde-escuro); color: var(--cep-creme); }
/* o grafismo de reverberação do brandbook (revisão da Aléxia, 14/10). Desde
   23/10 é a ARTE OFICIAL que ela ajustou (AF-Cepera-Grafismos-RGB_Verde-Claro-
   Reverb.eps, convertida para SVG): ocupa a altura do bloco, com o anel externo
   inteiro nas laterais */
.cep-acprop::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--cep-verde);
  -webkit-mask: url("../assets/graficos/grafismo-concentrico.svg") center / auto 100% no-repeat;
  mask: url("../assets/graficos/grafismo-concentrico.svg") center / auto 100% no-repeat;
}
.cep-acprop__grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; gap: 64px; align-items: center; }
.cep-acprop__col { display: flex; flex-direction: column; gap: 16px; }
.cep-acprop__rot { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: 0.01em; color: var(--cep-limao); }
.cep-acprop__titulo { margin: 0; font-size: clamp(34px, 3.9vw, 56px); line-height: 1.12; color: var(--cep-creme); }
.cep-acprop__txt { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.45; color: var(--cep-branco); }

@media (max-width: 767px) {
  .cep-acmanif { padding: 64px 0; }
  .cep-acmanif__grade, .cep-acprop__grade { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .cep-acmanif__fotos { grid-template-columns: minmax(0, 1fr); }
  .cep-acmanif__foto { height: 240px; }
  .cep-acprop { padding: 72px 0; }
}

/* Sustentabilidade, rodada 4 (03/10): números, frase e as três frentes. */
.cep-snum { position: relative; isolation: isolate; padding: 64px 0 72px; overflow: clip; background: var(--cep-verde-escuro); }
/* 23/10 (Heber): a faixa dos números ficou sem grafismo; o padrão dela não
   emendava com o do banner logo acima */
/* dois números desde 14/10 (saiu o 22%, que era da parceria com a eureciclo) */
.cep-snum__grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; gap: 48px; }
.cep-snum__item { padding-top: 24px; border-top: 2px solid var(--cep-limao-40); }
.cep-snum__num { margin: 0; font-family: var(--cep-fonte-titulo); font-size: clamp(64px, 7.6vw, 110px); line-height: 0.9; color: var(--cep-limao); }
.cep-snum__leg { margin: 10px 0 0; font-size: 17px; font-weight: 600; color: var(--cep-creme); }

.cep-sfrase { padding: 96px 0; background: var(--cep-branco-quente); color: var(--cep-verde-escuro); }
.cep-sfrase__grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; gap: 64px; align-items: end; }
.cep-sfrase__col { display: flex; flex-direction: column; gap: 16px; }
.cep-sfrase__titulo { margin: 0; font-size: clamp(34px, 3.9vw, 56px); line-height: 1.12; }
.cep-sfrase__texto { margin: 0; font-size: 18px; line-height: 1.6; color: var(--cep-verde-escuro-80); }

/* 14/10: as frentes ficaram mais baixas (revisão do Dante: "muito grande para pouca informação") */
.cep-spilar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; min-height: 400px; background: var(--cep-pro-claro); color: var(--cep-verde-escuro); }
.cep-spilar--dir { background: var(--cep-creme); }
.cep-spilar__foto { width: 100%; height: 100%; min-height: 400px; object-fit: cover; display: block; }
.cep-spilar--dir .cep-spilar__foto { order: 2; }
.cep-spilar__texto { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 56px 8% 52px 7%; }
.cep-spilar__n { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: 0.1em; color: var(--cep-verde); }
.cep-spilar__titulo { margin: 0; font-size: clamp(34px, 3.9vw, 56px); line-height: 1.12; }
.cep-spilar__p { margin: 0; font-size: 17px; line-height: 1.6; }
.cep-spilar__lista { margin: 8px 0 0; padding: 0; list-style: none; }
.cep-spilar__item { border-top: 1px solid var(--cep-verde-escuro-20); }
.cep-spilar__link { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; font-size: 16px; font-weight: 600; color: var(--cep-verde-escuro); }
.cep-spilar__link:hover { color: var(--cep-verde); }
.cep-spilar__seta { transition: transform .25s ease; }
.cep-spilar__link:hover .cep-spilar__seta { transform: translateX(4px); }

@media (max-width: 767px) {
  .cep-snum__grade, .cep-sfrase__grade, .cep-spilar { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .cep-snum { padding: 56px 0; }
  .cep-spilar__foto { min-height: 260px; height: 260px; }
  .cep-spilar--dir .cep-spilar__foto { order: 0; }
  .cep-spilar__texto { padding: 36px var(--cep-gutter-celular) 44px; }
}