/* ==========================================================================
   Ké Lanche — sistema visual v2 (B2B revenda)
   Paleta e tipografia conforme identidade-proposta.md
   ========================================================================== */

:root {
  --ink:      #3A2A1E;   /* marrom torrado — cor do texto */
  --ink-deep: #241810;   /* escuro profundo — só rodapé e cabeçalho fino */
  --papel:    #FFFDFA;   /* quase-branco quente — fundo padrão da página */
  --cream:    #F7F0E4;   /* creme — superfície de seção alternada */
  --cream-up: #FFFFFF;   /* branco — cards sobre creme */
  --areia:    #EFE5D6;   /* creme mais fechado — faixas e realces discretos */
  --rust:     #B5502E;   /* terracota — cor de destaque única */
  --rust-dp:  #8E3D22;   /* terracota no hover */
  --gold:     #E0A34A;   /* dourado crocante — realce sobre fundo escuro */
  --muted:    #6E5A4B;   /* texto secundário sobre creme */
  --muted-dk: #C4B3A2;   /* texto secundário sobre ink */
  --line:     rgba(58, 42, 30, .11);
  --line-dk:  rgba(248, 238, 221, .16);

  /* --- Cores da marca -----------------------------------------------------
     Tiradas do logotipo: vermelho 59% da área, amarelo 20%, creme 3%. É a
     paleta do Instagram, onde o registro é popular e promocional.

     No site o uso é institucional, então a marca entra pela FORMA e não pela
     cor: o losango do logotipo vira o sinal recorrente, em vermelho e em peça
     pequena, e a ênfase do texto fica com o --gold, que já é o acento da
     página. O amarelo e o creme ficam registrados aqui para as peças que
     pedem o tom do Instagram — assinatura de e-mail, post, embalagem.       */
  --marca-vm:  #FE0000;
  --marca-am:  #FFD823;
  --marca-cr:  #FDE6BC;

  --serif: "DM Serif Display", Georgia, "Times New Roman", serif;
  --sans:  "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --wrap: 1180px;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(58, 42, 30, .04), 0 10px 24px -14px rgba(58, 42, 30, .14);
  --shadow-lg: 0 2px 5px rgba(58, 42, 30, .05), 0 20px 44px -20px rgba(58, 42, 30, .20);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 92px; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--rust); text-decoration: none; }
a:hover { color: var(--rust-dp); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -.01em;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.9rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
p  { margin: 0 0 1em; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 22px; }
.secao { padding: clamp(64px, 9vw, 124px) 0; }
/* As antigas seções escuras viraram superfícies claras. O escuro ficou
   reservado ao rodapé e à barra de topo, para o site respirar. */
.secao--cream { background: var(--cream); }
.secao--ink   { background: var(--cream); }   /* compat */
.secao--up    { background: var(--cream); }   /* compat */
.secao--deep  { background: var(--papel); }   /* compat */
.secao--carvao { background: var(--ink); color: var(--papel); }
.secao--carvao h1, .secao--carvao h2, .secao--carvao h3 { color: var(--papel); }

.centro { text-align: center; }
.limite { max-width: 46rem; }
.centro .limite { margin-inline: auto; }

/* --- Rótulo de seção ------------------------------------------------------ */
/* O marcador de seção aparece 23 vezes no site — é o elemento estrutural mais
   repetido, e por isso o melhor lugar para a marca existir fora dos banners.
   O losango entra pequeno, antes do texto, e amarra a página inteira ao
   logotipo sem nenhum gesto promocional. */
.rotulo {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: .9em;
}
.rotulo::before {
  content: "";
  flex: none;
  width: 7px; height: 7px;
  background: var(--marca-vm);
  border-radius: 2px;
  transform: rotate(45deg);
}
/* Sobre fundo escuro o vermelho cheio fica pesado; ali o losango acompanha
   o dourado do próprio rótulo. */
.banner-conteudo .rotulo::before,
.cta-final .rotulo::before { background: currentColor; }
.secao--carvao .rotulo { color: var(--gold); }

.chamada { font-size: 1.12rem; color: var(--muted); }
.secao--carvao .chamada { color: var(--muted-dk); }

/* --- Botões --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
  padding: 15px 26px;
  border: 2px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: background .18s, color .18s, border-color .18s, transform .18s;
}
.btn:hover { transform: translateY(-2px); }
.btn--rust  { background: var(--rust); color: #fff; border-color: var(--rust); }
.btn--rust:hover { background: var(--rust-dp); border-color: var(--rust-dp); color: #fff; }
.btn--linha { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--linha:hover { border-color: var(--ink); color: var(--ink); }
.btn--claro { background: var(--ink); color: var(--papel); border-color: var(--ink); }
.btn--claro:hover { background: var(--ink-deep); border-color: var(--ink-deep); color: var(--papel); }
.cta-final .btn--claro { background: #fff; color: var(--rust-dp); border-color: #fff; }
.cta-final .btn--claro:hover { background: var(--papel); border-color: var(--papel); color: var(--rust-dp); }
.btn--fantasma { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--fantasma:hover { border-color: var(--ink); color: var(--ink); }
.cta-final .btn--fantasma, .secao--carvao .btn--fantasma { color: #fff; border-color: rgba(255,255,255,.4); }
.cta-final .btn--fantasma:hover, .secao--carvao .btn--fantasma:hover { border-color: #fff; color: #fff; }
.btn--bloco { width: 100%; justify-content: center; }

.grupo-btn { display: flex; flex-wrap: wrap; gap: 14px; }
.centro .grupo-btn { justify-content: center; }

/* --- Topo ----------------------------------------------------------------- */

.cabecalho {
  position: sticky;
  top: 0;
  z-index: 80;   /* acima do botão flutuante do WhatsApp (70) */
  /* Sem backdrop-filter aqui, de propósito: filtro cria bloco de contenção
     para descendentes position:fixed, e a gaveta do menu ficava presa dentro
     da barra de 76px em vez de ocupar a tela. Fundo opaco resolve. */
  background: var(--papel);
  border-bottom: 1px solid var(--line);
}
.cabecalho .wrap { display: flex; align-items: center; gap: 20px; min-height: 76px; }
.marca { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.marca img { height: 54px; width: auto; }   /* logotipo quadrado precisa de mais altura que o antigo horizontal */
.marca b { font-family: var(--serif); font-size: 1.25rem; font-weight: 400; }
.marca span { display: block; font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--rust); }

.nav ul { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }
.nav a { color: var(--ink); font-weight: 700; font-size: .97rem; padding: 6px 0; border-bottom: 2px solid transparent; }
.nav .so-mobile { display: none; }   /* o CTA do menu só existe no mobile */
.nav a:hover, .nav a[aria-current="page"] { color: var(--rust); border-bottom-color: var(--rust); }

.abre-menu {
  display: none;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line); border-radius: 10px;
  cursor: pointer; color: var(--ink);
}
.abre-menu svg { width: 22px; height: 22px; }


/* --- Correção: [hidden] precisa vencer o display do card ------------------
   .produto usa display:flex, que sobrepõe a regra [hidden] do navegador —
   por isso o filtro do catálogo marcava mas não escondia.                   */
[hidden] { display: none !important; }

/* --- Banners rotativos ----------------------------------------------------
   Uma mensagem por tipo de negócio. Troca por opacidade, sem deslocar layout. */
.banners {
  position: relative;
  display: grid;
  background: var(--ink-deep);
  isolation: isolate;
}
.banner {
  grid-area: 1 / 1;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .7s ease;
}
.banner[data-ativo="true"] { opacity: 1; visibility: visible; }

.banner-foto { position: absolute; inset: 0; margin: 0; overflow: hidden; border-radius: inherit; }
/* O recorte de banner tem 2400x480 e o produto vive na borda direita da imagem.
   Como a faixa é mais larga que a imagem, object-position sozinho não desloca
   nada — a imagem já aparece inteira. Por isso o par zoom + deslocamento:
   amplia o suficiente para sobrar margem e puxa o produto para perto do texto. */
.banner-foto img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: var(--foco, 50% 50%);
  transform: scale(var(--zoom, 1)) translate(var(--desloca, 0%), var(--desloca-y, 0%));
  transform-origin: center;
}
.banner-foto::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(96deg, rgba(28,18,11,.94) 0%, rgba(28,18,11,.84) 32%, rgba(28,18,11,.50) 56%, rgba(28,18,11,.16) 82%, rgba(28,18,11,.05) 100%);
}

.banner-conteudo {
  position: relative;
  z-index: 2;
  min-height: clamp(300px, 40vh, 420px);
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(30px, 4vw, 52px);
  color: var(--papel);
}
.banner-conteudo > * { max-width: 34rem; }
.banner-conteudo .rotulo { color: var(--gold); }
.banner-conteudo h2 { color: var(--papel); font-size: clamp(1.85rem, 4.2vw, 3.1rem); margin-bottom: .4em; }
.banner-conteudo p { color: rgba(255,253,250,.86); font-size: 1.08rem; margin-bottom: 1.6em; }

/* Setas e pontos */
.banner-seta {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 4;
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,253,250,.14);
  border: 1px solid rgba(255,253,250,.3);
  color: var(--papel); font-size: 1.5rem; line-height: 1;
  cursor: pointer;
  transition: background .18s, border-color .18s;
}
.banner-seta:hover { background: rgba(255,253,250,.26); border-color: var(--papel); }
.banner-seta--ant { left: clamp(10px, 2vw, 26px); }
.banner-seta--prox { right: clamp(10px, 2vw, 26px); }

.banner-pontos {
  position: absolute; z-index: 4;
  left: 50%; transform: translateX(-50%);
  bottom: clamp(62px, 6vw, 74px);
  display: flex; gap: 10px;
}
.banner-ponto {
  width: 34px; height: 4px; border-radius: 2px; border: none; padding: 0;
  background: rgba(255,253,250,.32);
  cursor: pointer;
  transition: background .2s;
}
.banner-ponto[aria-selected="true"] { background: var(--gold); }
.banner-ponto:hover { background: rgba(255,253,250,.6); }

/* === Identidade de marca no banner =========================================
   O Instagram da Ké Lanche é popular: vermelho e amarelo cheios, moldura com
   texto promocional. O site precisa do mesmo DNA em registro institucional,
   então a marca vem pela forma — o losango do logotipo — e a cor saturada
   aparece só nele. A ênfase do texto fica com o --gold, o acento que a página
   já usa: um sinal de marca e um acento, que é como identidade corporativa
   se comporta.

   Aplicadas em .banner--marca, não em todo banner: o contraste entre os dois
   tratamentos é o que impede o carrossel de virar uma coisa só.             */

/* 1. Losango — a forma do logotipo reduzida a sinal. É o único lugar em que
      o vermelho cheio da marca entra, e por isso ele registra.              */
.losango {
  display: inline-block; flex: none;
  width: .62em; height: .62em;
  background: var(--marca-vm);
  border-radius: 2px;
  transform: rotate(45deg);
}

/* 2. Selo de perfil — diz de cara com quem o banner está falando. */
.selo-perfil {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: .76rem; font-weight: 800;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}

/* 3. Ênfase — a frase que carrega o argumento, em dourado com um filete fino
      embaixo. O traço grosso de marca-texto seria o gesto do Instagram; aqui
      o filete diz a mesma coisa em voz mais baixa. Feito com background para
      atravessar a quebra de linha sem deixar rabicho pendurado.             */
.grifo {
  color: var(--gold);
  background-image: linear-gradient(rgba(224, 163, 74, .45), rgba(224, 163, 74, .45));
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: 0 100%;
  padding-bottom: .1em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* 4. Régua de dados — o número puxa o olho, o rótulo explica, o losango
      separa. Vocabulário de relatório, não de anúncio: é o que transforma o
      argumento em informação verificável.                                   */
.regua-dados {
  list-style: none; margin: 4px 0 28px; padding: 0;
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: 14px 18px;
}
.regua-dados li { display: flex; align-items: flex-start; gap: 18px; }
.regua-dados li + li::before {
  content: "";
  flex: none;
  width: 7px; height: 7px; margin-top: 12px;
  background: var(--marca-vm);
  border-radius: 2px;
  transform: rotate(45deg);
}
.regua-dados div { display: flex; flex-direction: column; }
.regua-dados b {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3.2vw, 2.15rem);
  line-height: 1;
  color: var(--gold);
}
.regua-dados span {
  font-size: .79rem; font-weight: 700; line-height: 1.35;
  color: rgba(255, 253, 250, .74);
  margin-top: 8px;
  max-width: 15ch;
}

/* No banner com tratamento de marca o texto respira mais, porque a régua de
   dados entra entre o parágrafo e o botão. */
.banner--marca .banner-conteudo p { margin-bottom: 1.1em; }

@media (max-width: 720px) {
  .regua-dados { gap: 12px 14px; }
  .regua-dados span { max-width: 12ch; font-size: .74rem; }
}

@media (max-width: 720px) {
  .banner-conteudo { min-height: 330px; padding-bottom: 62px; }
  .banner-foto img { transform: scale(1) translate(0, 0); }
  .banner-pontos { bottom: 40px; }
  .banner-seta { display: none; }
  .banner-foto::after {
    background: linear-gradient(180deg, rgba(28,18,11,.62) 0%, rgba(28,18,11,.88) 100%);
  }
}

/* Sem autoplay nem transição para quem pediu menos movimento. */
@media (prefers-reduced-motion: reduce) {
  .banner { transition: none; }
}

/* --- Hero ----------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--papel);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 33rem);
  align-content: center;
  min-height: clamp(320px, 42vh, 430px);
  padding-block: clamp(38px, 4vw, 52px);
}
.hero .wrap > div:first-child { position: relative; z-index: 2; }
.hero h1 { font-size: clamp(2rem, 3.6vw, 3rem); }
.hero h1 em { font-style: normal; color: var(--rust); }
.hero .chamada { font-size: 1.06rem; max-width: 34rem; margin-bottom: .8em; }
/* A arte sangra até a borda da tela. O enquadramento é ajustável por três
   variáveis definidas no HTML — --foco-x, --foco-y e --zoom — sem recortar
   o arquivo original. */
.hero-arte {
  position: absolute;
  inset-block: 0;
  right: 0;
  width: clamp(340px, 47vw, 900px);
  overflow: hidden;
  z-index: 0;
}
.hero-arte img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--foco-x, 50%) var(--foco-y, 50%);
  transform: scale(var(--zoom, 1));
  transform-origin: var(--foco-x, 50%) var(--foco-y, 50%);
}
/* Sem degradê: a foto encosta no fundo com corte reto. */
.hero-selo {
  position: absolute;
  right: clamp(20px, 4vw, 56px); bottom: clamp(20px, 4vw, 44px);
  z-index: 2;
  background: rgba(36, 24, 16, .78);
  backdrop-filter: blur(8px);
  color: #fff;
  border-radius: var(--radius);
  padding: 16px 22px;
  max-width: 14rem;
}
.hero-selo strong { display: block; font-family: var(--serif); font-size: 2.1rem; line-height: 1; color: var(--gold); }
.hero-selo span { font-size: .8rem; font-weight: 600; line-height: 1.4; display: block; margin-top: 6px; color: rgba(255,255,255,.86); }



/* --- Faixa de linhas de produto -------------------------------------------
   Painel branco que flutua sobre a base do carrossel, com um box por linha.
   Ícone de traço em vez de foto, para não competir com a imagem do banner.  */
.faixa-linhas {
  position: relative;
  z-index: 5;
  /* Ficava sobreposta à foto do carrossel; agora vive entre duas seções,
     então ganha respiro próprio em vez do recuo negativo. */
  padding-block: 8px 34px;
  pointer-events: none;          /* só os boxes recebem clique */
}
.faixa-linhas .wrap { pointer-events: auto; }
.faixa-linhas ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 10px;
  list-style: none; margin: 0;
  padding: 16px;
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
}
.faixa-linhas a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 9px;
  text-align: center;
  height: 100%;
  padding: 15px 6px 13px;
  border: 1px solid rgba(181, 80, 46, .3);
  border-radius: 12px;
  color: var(--ink);
  transition: border-color .18s, background .18s, transform .18s;
}
.faixa-linhas a:hover {
  border-color: var(--rust);
  background: rgba(181, 80, 46, .05);
  color: var(--ink);
  transform: translateY(-2px);
}
.faixa-linhas b { font-size: .8rem; font-weight: 700; line-height: 1.25; }
.linha-icone { color: var(--rust); display: block; }
.linha-icone svg { width: 34px; height: 34px; display: block; }

@media (max-width: 1180px) {
  .faixa-linhas ul { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 760px) {
  .faixa-linhas { margin-top: -26px; }
  .faixa-linhas ul { grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px; border-radius: 14px; }
  .faixa-linhas a { padding: 12px 4px 10px; gap: 7px; }
  .faixa-linhas b { font-size: .72rem; }
  .linha-icone svg { width: 28px; height: 28px; }
}

/* --- Faixa de públicos ----------------------------------------------------
   Índice logo abaixo do carrossel: seis atalhos para as seções que detalham
   cada tipo de negócio. Substituiu a faixa de números, que virou uma linha
   discreta no hero.                                                          */
/* Régua de públicos: uma linha só, tipográfica, com o losango separando.
   Era uma grade de seis ícones em círculo — o mesmo desenho da faixa de
   linhas, que fica poucos blocos acima. Duas grades de ícone quase iguais
   perto uma da outra pesam e não somam; aqui a diferença de formato é o que
   faz cada faixa ter função própria. */
.faixa-publicos {
  background: var(--cream);
  border-block: 1px solid var(--line);
  padding: 18px 0;
}
.faixa-publicos .wrap {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px;
}
.faixa-rotulo {
  flex: none; margin: 0;
  font-size: .71rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
.faixa-publicos ul {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px 16px;
  list-style: none; margin: 0; padding: 0;
}
.faixa-publicos li { display: flex; align-items: center; gap: 16px; }
.faixa-publicos li + li::before {
  content: "";
  flex: none;
  width: 6px; height: 6px;
  background: var(--marca-vm);
  border-radius: 1px;
  transform: rotate(45deg);
}
.faixa-publicos a {
  font-size: .93rem; font-weight: 700;
  color: var(--ink); text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color .16s, border-color .16s;
}
.faixa-publicos a:hover { color: var(--rust); border-bottom-color: currentColor; }
.faixa-publicos a:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; }

/* Linha de prova no hero, onde os números foram parar */
.hero-prova {
  margin-top: 26px;
  font-size: .84rem;
  color: var(--muted);
  letter-spacing: .01em;
}


/* --- Faixa de credibilidade ---------------------------------------------- */
.faixa-selos { background: var(--cream); border-block: 1px solid var(--line); }
.faixa-selos ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none; margin: 0; padding: 28px 0;
  text-align: center;
  align-items: start;
}
.faixa-selos li + li { border-left: 1px solid var(--line); }
.faixa-selos b { display: block; font-family: var(--serif); font-size: 2.1rem; color: var(--rust); line-height: 1.1; }
.faixa-selos span { display: block; font-size: .82rem; color: var(--muted); font-weight: 600; line-height: 1.4; max-width: 15rem; margin-inline: auto; }

/* --- Grades genéricas ----------------------------------------------------- */
.grade { display: grid; gap: 22px; }
.grade--2 { grid-template-columns: repeat(2, 1fr); }
.grade--3 { grid-template-columns: repeat(3, 1fr); }
.grade--4 { grid-template-columns: repeat(4, 1fr); }

.cartao {
  background: var(--cream-up);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 28px;
}
.secao--up .cartao { background: #fff; }
.secao--ink .cartao, .secao--up .cartao { background: var(--cream-up); }
.secao--deep .cartao { background: var(--cream); border-color: transparent; }
.secao--carvao .cartao { background: rgba(255, 253, 250, .06); border-color: var(--line-dk); }
.cartao h3 { margin-bottom: .35em; }
.cartao p:last-child { margin-bottom: 0; }
.cartao .icone {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--areia); color: var(--rust);
  border: 1px solid rgba(181, 80, 46, .22);
  font-family: var(--serif); font-size: 1.1rem;
  margin-bottom: 18px;
}
/* Dentro do disco de 44px o traço pede um pouco mais de corpo que os 18px
   usados no card de produto e na régua de filtros. */
.cartao .icone .ico { width: 22px; height: 22px; }
.secao--carvao .cartao .icone { background: rgba(224,163,74,.12); color: var(--gold); border-color: rgba(224,163,74,.3); }

/* --- Público-alvo --------------------------------------------------------- */
/* Grade de três colunas: com seis perfis dá duas fileiras cheias. O flex
   anterior encaixava cinco na primeira e deixava o sexto sozinho embaixo. */
.publico {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.publico article { max-width: none; }
.publico article {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--cream-up);
  padding: 26px 24px;
  transition: transform .18s, box-shadow .18s;
}
.publico article:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.publico .marca-destaque { border-color: var(--rust); box-shadow: 0 0 0 1px var(--rust) inset; }
.publico h3 { font-size: 1.22rem; }
.publico p { font-size: .95rem; color: var(--muted); margin: 0; }
/* Público-herói: foto grande à esquerda, texto à direita. */
.publico-destaque {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--cream-up);
  box-shadow: var(--shadow);
}
.publico-destaque figure { margin: 0; background: var(--areia); }
.publico-destaque img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
.publico-destaque .publico-corpo {
  padding: clamp(28px, 3.4vw, 46px);
  display: flex; flex-direction: column; justify-content: center;
}
.publico-destaque h3 { font-size: clamp(1.5rem, 2.6vw, 2.05rem); margin-bottom: .5em; }
.publico-destaque p { color: var(--muted); }
.publico-destaque p:last-child { margin-bottom: 0; }

.tag-novo {
  display: inline-block; align-self: flex-start;
  font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--rust); background: rgba(181, 80, 46, .1);
  border: 1px solid rgba(181, 80, 46, .25);
  padding: 3px 9px; border-radius: 999px; margin-bottom: 10px;
}

/* Variante com foto no topo do card, para a seção de público atendido. */
.publico--foto article { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.publico--foto .publico-corpo { padding: 24px 24px 28px; }

/* A porta de cada perfil para o catálogo já filtrado pelo negócio dele. */
.leva-negocio { margin: 14px 0 0; }
.leva-negocio a {
  font-size: .88rem; font-weight: 800;
  color: var(--rust); text-decoration: none;
  border-bottom: 1px solid transparent;
}
.leva-negocio a:hover { color: var(--rust-dp); border-bottom-color: currentColor; }
.publico--foto figure { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--areia); }
.publico--foto figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.publico--foto article:hover figure img { transform: scale(1.04); }
.publico--foto .placeholder-foto {
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  aspect-ratio: 16 / 10;
  padding: 20px;
}
.placeholder-foto--larga { aspect-ratio: 16 / 10; }

.tag-destaque {
  display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: #fff; background: var(--rust);
  padding: 3px 9px; border-radius: 999px; margin-bottom: 10px;
}

/* --- Linhas de produto ---------------------------------------------------- */
.linhas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.linha-card {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--cream-up);
  border: 1px solid var(--line);
  color: var(--ink);
  transition: transform .18s, box-shadow .18s;
}
.linha-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); color: var(--ink); }
.linha-card figure { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--areia); }
.linha-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.linha-card:hover img { transform: scale(1.045); }
.linha-card .corpo { padding: 22px 24px 26px; }
.linha-card h3 { margin-bottom: .3em; }
.linha-card p { font-size: .93rem; color: var(--muted); margin-bottom: 1em; }
.linha-card .leva { font-weight: 800; font-size: .9rem; color: var(--rust); }

/* --- Passos --------------------------------------------------------------- */
.passos { counter-reset: passo; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.passos li { list-style: none; position: relative; padding-top: 62px; }
.passos li::before {
  counter-increment: passo;
  content: counter(passo, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font-family: var(--serif); font-size: 2.5rem; line-height: 1;
  color: var(--gold);
}
.passos h3 { font-size: 1.18rem; margin-bottom: .3em; }
.passos p { font-size: .95rem; margin: 0; }
.secao--carvao .passos p { color: var(--muted-dk); }
.passos li::before { color: var(--rust); }

/* Numeração dos passos sobre fundo claro precisa de mais contraste que o dourado. */
.passos--claro li::before { color: var(--rust); }

/* --- Placeholder de foto a produzir --------------------------------------
   Marca no layout o lugar de cada foto que ainda será feita, com a descrição
   do enquadramento. Some do site quando a imagem real entrar no lugar.       */
.faixa-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.foto-faixa { margin: 0; aspect-ratio: 4/3; overflow: hidden; border-radius: var(--radius); background: var(--areia); }
.foto-faixa img { width: 100%; height: 100%; object-fit: cover; }

/* Uma foto sozinha ocupando a largura do texto. Proporção panorâmica curta
   para não empurrar o resto da seção para fora da tela — o problema que a
   fachada vertical criava na home. */
.foto-larga {
  margin: 0;
  aspect-ratio: 21/9;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--areia);
}
.foto-larga img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 700px) { .foto-larga { aspect-ratio: 16/10; } }

.placeholder-foto {
  margin: 0;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 10px;
  text-align: center;
  aspect-ratio: 4 / 3;
  padding: 26px;
  border: 1px dashed rgba(181, 80, 46, .35);
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(135deg, rgba(181,80,46,.035) 0 14px, transparent 14px 28px),
    var(--areia);
  color: var(--muted);
}
.placeholder-rot { color: var(--rust); }
.placeholder-foto--alta { aspect-ratio: 4 / 4.4; }
.placeholder-rot {
  font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold);
}
.placeholder-desc { font-size: .92rem; line-height: 1.5; max-width: 26ch; }
.secao--carvao .placeholder-foto {
  border-color: rgba(224, 163, 74, .4);
  background: rgba(255, 253, 250, .05);
  color: var(--muted-dk);
}
.secao--carvao .placeholder-rot { color: var(--gold); }

/* --- Bloco institucional -------------------------------------------------- */
.duas-colunas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 64px);
  align-items: center;
}
/* height:auto e obrigatorio junto de aspect-ratio: com o atributo height do
   HTML a altura fica definida e o aspect-ratio deixa de valer. */
.duas-colunas img { border-radius: var(--radius); box-shadow: var(--shadow); aspect-ratio: 4/3; object-fit: cover; width: 100%; height: auto; }
.lista-check { list-style: none; margin: 0 0 1.4em; padding: 0; }
.lista-check li { position: relative; padding-left: 32px; margin-bottom: .7em; }
.lista-check li::before {
  content: "";
  position: absolute; left: 0; top: .45em;
  width: 18px; height: 10px;
  border-left: 3px solid var(--rust);
  border-bottom: 3px solid var(--rust);
  transform: rotate(-45deg);
}
.secao--carvao .lista-check li::before { border-color: var(--gold); }

/* --- Catálogo ------------------------------------------------------------- */
.filtros {
  position: sticky; top: 76px; z-index: 40;
  background: rgba(255, 253, 250, .92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
}
/* Duas réguas empilhadas: primeiro o tipo de negócio, depois a linha. Quem
   chega procura o que serve para o balcão dele, não a categoria técnica.  */
.filtros .wrap { display: flex; flex-direction: column; gap: 12px; }
.filtro-linha { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.filtro-linha--busca { gap: 14px; }
.filtro-rotulo {
  flex: none; width: 132px;
  font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--sans); font-size: .88rem; font-weight: 700;
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: transparent; color: var(--ink);
  cursor: pointer; transition: background .16s, color .16s, border-color .16s;
}
.chip .ico { color: var(--rust); transition: color .16s; }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--rust); border-color: var(--rust); color: #fff; }
.chip[aria-pressed="true"] .ico { color: #fff; }
.chip--negocio { padding-left: 12px; }

/* --- Filtros no celular ---------------------------------------------------
   A régua tem três linhas e, numa tela estreita, os 18 chips quebravam em
   cinco fileiras. Grudada no topo, a barra passava de 400px e cobria o
   catálogo inteiro — não dava para ver produto nenhum. No celular ela
   rola junto com a página e cada grupo de chips vira uma faixa deslizante. */
@media (max-width: 900px) {
  .filtros { position: static; padding: 14px 0; }
  .filtro-rotulo { width: 100%; font-size: .66rem; }
  .filtro-linha { gap: 8px; }

  .filtros .chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: 100%;
    margin-inline: -22px;
    padding: 2px 22px;
  }
  .filtros .chips::-webkit-scrollbar { display: none; }
  .filtros .chip { flex: none; }

  .filtro-linha--busca { gap: 12px; }
  .busca { min-width: 0; flex: 1 1 160px; }
}
.busca {
  font-family: var(--sans); font-size: .95rem;
  padding: 11px 16px; min-width: 230px;
  border: 1px solid var(--line); border-radius: 999px;
  background: #fff; color: var(--ink);
}
.busca:focus { outline: 2px solid var(--rust); outline-offset: 1px; }
.contador { font-size: .88rem; color: var(--muted); font-weight: 700; }

.catalogo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.produto {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--cream-up);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .18s, box-shadow .18s;
}
.produto:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.produto:focus-within { outline: 2px solid var(--rust); outline-offset: 2px; }

/* O botão cobre o card inteiro: card clicável sem quebrar a semântica. */
.produto-abrir {
  margin-top: 14px;
  align-self: flex-start;
  font-family: var(--sans); font-size: .88rem; font-weight: 800;
  color: var(--rust); background: none; border: none; padding: 0;
  cursor: pointer;
}
.produto-abrir::after { content: " →"; }
.produto-abrir::before { content: ""; position: absolute; inset: 0; }
.produto:hover .produto-abrir { color: var(--rust-dp); }
.produto-abrir:focus { outline: none; }
/* A foto manda no card. Quadrada, em fundo branco e com `contain`: a foto
   recortada em fundo branco encosta na borda sem emenda visível, e a que
   vier em outra proporção fica inteira em vez de ser cortada.               */
.produto figure {
  margin: 0; aspect-ratio: 1/1; overflow: hidden;
  background: #fff; border-bottom: 1px solid var(--line);
}
.produto img {
  width: 100%; height: 100%; object-fit: contain;
  transition: transform .35s ease;
}
.produto:hover img { transform: scale(1.04); }
.produto .corpo { padding: 16px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.produto h3 { font-size: 1.06rem; margin-bottom: .3em; }
.produto .linha-nome { font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--rust); margin: 0 0 7px; }
.produto .resumo { font-size: .88rem; color: var(--muted); margin: 0 0 14px; }

/* Faixa de ícones do card: o desenho substitui o rótulo, o dado vem ao lado. */
.marcas {
  list-style: none; margin: auto 0 0; padding: 12px 0 0;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 6px 16px;
}
.marcas li { display: flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 700; color: var(--ink); }
.marcas .ico { color: var(--rust); }
.ico { width: 18px; height: 18px; flex: none; }

.pill {
  font-size: .74rem; font-weight: 700;
  padding: 4px 11px; border-radius: 999px;
  background: rgba(58, 42, 30, .07); color: var(--muted);
}
.pill--preparo { background: rgba(181, 80, 46, .12); color: var(--rust-dp); }
.vazio { text-align: center; padding: 60px 0; color: var(--muted); }

/* --- Modal de produto ----------------------------------------------------- */
.modal[hidden] { display: none; }
.modal {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(36, 24, 16, .62);
  backdrop-filter: blur(3px);
}
.modal-caixa {
  position: relative;
  width: min(880px, 100%);
  max-height: 90vh; overflow-y: auto;
  background: var(--cream-up);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.modal-fecha {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  border: none; cursor: pointer;
  background: rgba(36, 24, 16, .7); color: #fff;
  font-size: 1.3rem; line-height: 1;
}
.modal-fecha:hover { background: var(--ink); }
.modal-grade { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: start; }

/* Galeria: foto grande fixa enquanto a ficha rola, miniaturas abaixo.
   Fundo claro para acompanhar as fotos recortadas em branco — o painel
   escuro anterior criava uma moldura preta em volta do recorte.           */
.modal-fotos {
  position: sticky; top: 0;
  background: #fff;
  border-right: 1px solid var(--line);
  padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.modal-principal {
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
}
.modal-principal img { width: 100%; height: 100%; object-fit: contain; display: block; }

.modal-miniaturas { display: flex; flex-wrap: wrap; gap: 10px; }
.modal-miniatura {
  width: 60px; aspect-ratio: 1;
  padding: 0; border: 2px solid var(--line); border-radius: 8px;
  overflow: hidden; cursor: pointer; background: #fff;
  opacity: .68;
  transition: opacity .18s, border-color .18s;
}
.modal-miniatura:hover { opacity: 1; }
.modal-miniatura[aria-current="true"] { opacity: 1; border-color: var(--rust); }
.modal-miniatura img { width: 100%; height: 100%; object-fit: contain; display: block; }

.modal-legenda {
  font-size: .74rem; color: var(--muted);
  margin: 0; letter-spacing: .04em;
}
.modal-corpo { padding: 30px 32px 32px; }
.modal-corpo h2 { font-size: 1.75rem; margin-bottom: .25em; }
.ficha { list-style: none; margin: 14px 0 22px; padding: 0; border-top: 1px solid var(--line); }
.ficha li { display: flex; gap: 14px; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .91rem; }
.ficha .rot { display: flex; align-items: center; gap: 9px; color: var(--muted); font-weight: 700; }
.ficha .rot .ico { color: var(--rust); }
.ficha .val { text-align: right; font-weight: 700; }

/* --- Página do produto ---------------------------------------------------- */
/* Substituiu o modal: cada item tem endereço próprio, cabe mais foto e mais
   argumento, e o Google indexa produto a produto. */
.topo-produto { padding-bottom: 0; }

.produto-topo { padding: 26px 0 clamp(48px, 7vw, 80px); }
.produto-topo .wrap {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.galeria { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 12px; }
.galeria-principal {
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: #fff;
}
.galeria-principal img {
  width: 100%; height: 100%; display: block;
  object-fit: cover;
  object-position: 66% 50%;
}

.galeria-miniaturas { display: flex; flex-wrap: wrap; gap: 8px; }
.galeria-mini {
  width: 62px; aspect-ratio: 1;
  padding: 0; cursor: pointer;
  border: 2px solid var(--line); border-radius: 10px;
  overflow: hidden; background: #fff;
  opacity: .68;
  transition: opacity .18s, border-color .18s;
}
.galeria-mini:hover { opacity: 1; }
.galeria-mini[aria-current="true"] { opacity: 1; border-color: var(--rust); }
.galeria-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }

.produto-info h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); margin-bottom: .3em; }
.produto-info .chamada { margin-bottom: 22px; }

/* A faixa de marcas do card, em corpo maior e com moldura. */
.marcas--grande {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
  margin: 0 0 6px;
  gap: 10px 26px;
}
.marcas--grande li { font-size: .93rem; }
.marcas--grande .ico { width: 21px; height: 21px; }

/* Vantagens: o bloco que o modal não tinha espaço para carregar. */
.vantagens {
  list-style: none; margin: 8px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.vantagens li {
  display: flex; gap: 14px; align-items: flex-start;
  font-size: .97rem; line-height: 1.55;
}
.vantagens .ico { width: 24px; height: 24px; color: var(--rust); margin-top: 3px; }

.produto-colunas { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.produto-colunas .ficha { margin-top: 4px; }

.aplicacoes--grande li { font-size: .93rem; padding: 11px 18px 11px 14px; background: #fff; }
.aplicacoes--grande .ico { width: 21px; height: 21px; }

/* Outros itens da mesma linha */
.irmaos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 30px; }
.irmao {
  display: flex; flex-direction: column; gap: 12px;
  color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--cream-up);
  transition: transform .18s, box-shadow .18s;
}
.irmao:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); color: var(--ink); }
.irmao figure { margin: 0; aspect-ratio: 1/1; overflow: hidden; background: #fff; border-bottom: 1px solid var(--line); }
.irmao img { width: 100%; height: 100%; object-fit: contain; }
.irmao b { font-size: .95rem; line-height: 1.3; padding: 0 16px 18px; }

@media (max-width: 900px) {
  .produto-topo .wrap { grid-template-columns: minmax(0, 1fr); }
  .galeria { position: static; }
  .vantagens { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .produto-colunas { grid-template-columns: minmax(0, 1fr); }
  .irmaos { grid-template-columns: repeat(2, 1fr); }
}

/* Indicado para: o mesmo par ícone + texto, em cartõezinhos. */
.aplicacoes {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.aplicacoes li {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 11px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--cream);
  font-size: .84rem; font-weight: 700; color: var(--ink);
}
.aplicacoes .ico { color: var(--rust); }

/* Blocos da ficha do produto */
.titulo-bloco {
  font-family: var(--sans);
  font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--rust);
  margin: 26px 0 0;
  padding-top: 4px;
}
.destaque-vitrine {
  background: rgba(224, 163, 74, .16);
  border-left: 3px solid var(--gold);
  border-radius: 0 8px 8px 0;
  padding: 12px 16px;
  font-size: .93rem;
  margin: 18px 0 0;
}
.nota-preparo {
  font-size: .9rem;
  color: var(--muted);
  margin: -8px 0 0;
}
.tags { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-top: 12px; }
.confirmar {
  background: rgba(224, 163, 74, .28);
  color: var(--ink);
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 5px;
  font-size: .84rem;
}

/* --- FAQ ------------------------------------------------------------------ */
.faq { max-width: 52rem; margin-inline: auto; }
.faq details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--cream-up);
  margin-bottom: 12px;
  overflow: hidden;
}
.faq details[open] { border-color: var(--rust); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 56px 20px 24px;
  font-weight: 800;
  font-size: 1.03rem;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute; right: 24px; top: 50%; transform: translateY(-50%);
  font-family: var(--serif); font-size: 1.6rem; line-height: 1; color: var(--rust);
}
.faq details[open] summary::after { content: "–"; }
.faq .resposta { padding: 0 24px 22px; color: var(--muted); }
.faq .resposta p:last-child { margin-bottom: 0; }

/* --- Formulário ----------------------------------------------------------- */
.form-caixa {
  background: var(--cream-up);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(26px, 4vw, 40px);
  box-shadow: var(--shadow);
}
.secao--carvao .form-caixa { color: var(--ink); }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo--largo { grid-column: 1 / -1; }
.campo label { font-size: .85rem; font-weight: 800; letter-spacing: .02em; }
.campo input, .campo select, .campo textarea {
  font-family: var(--sans); font-size: 1rem;
  padding: 13px 15px;
  border: 1px solid var(--line); border-radius: 10px;
  background: #fff; color: var(--ink);
}
.campo textarea { min-height: 110px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 2px solid var(--rust); outline-offset: 1px; }
.aviso-form { font-size: .84rem; color: var(--muted); margin-top: 14px; }

/* --- CTA final ------------------------------------------------------------ */
.cta-final { background: var(--rust); color: #fff; }
.cta-final h2 { color: #fff; }
.cta-final p { color: rgba(255, 255, 255, .88); }
.cta-final .btn--claro { background: #fff; border-color: #fff; }

/* --- Rodapé --------------------------------------------------------------- */
.rodape { background: var(--ink-deep); color: var(--muted-dk); padding: 62px 0 0; font-size: .95rem; }
.rodape h4 { font-family: var(--sans); font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--cream); margin-bottom: 1.1em; }
.rodape a { color: var(--muted-dk); }
.rodape a:hover { color: var(--gold); }
.rodape ul { list-style: none; margin: 0; padding: 0; }
.rodape li { margin-bottom: .55em; }
.rodape-grade { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 34px; padding-bottom: 46px; }
.rodape .marca img { height: 68px; }
.rodape-fim {
  border-top: 1px solid var(--line-dk);
  padding: 22px 0;
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
  font-size: .85rem;
}

/* --- WhatsApp flutuante --------------------------------------------------- */
.zap-flutua {
  position: fixed; right: 20px; bottom: 20px; z-index: 70;
  display: flex; align-items: center; gap: 10px;
  background: #25D366; color: #fff;
  font-weight: 800; font-size: .95rem;
  padding: 14px 20px; border-radius: 999px;
  box-shadow: var(--shadow-lg);
  transition: transform .18s;
}
.zap-flutua:hover { transform: translateY(-3px); color: #fff; }
.zap-flutua svg { width: 22px; height: 22px; fill: currentColor; }

/* --- Página interna: cabeçalho -------------------------------------------- */
.topo-pagina { background: var(--cream); border-bottom: 1px solid var(--line); padding: clamp(48px, 6vw, 76px) 0; }
.topo-pagina h1 { margin-bottom: .3em; }
.topo-pagina .chamada { max-width: 40rem; }
/* A migalha é a única navegação que diz onde a pessoa está e devolve os dois
   degraus acima — produtos e a linha do item. Em corpo de nota de rodapé ela
   não era vista nem alcançada com o dedo, então virou faixa: texto maior,
   link em negrito e alvo de toque com folga em volta.                      */
.migalhas {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 2px 4px;
  font-size: .93rem;
  color: var(--ink);
  margin: -6px 0 1.4em -10px;
}
.migalhas a {
  color: var(--rust);
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 999px;
  transition: background .15s, color .15s;
}
.migalhas a:hover { background: var(--rust); color: #fff; }
.migalhas a:active { transform: scale(.97); }
/* O separador é decoração: sai do texto e vira pseudo-elemento para não ser
   lido em voz alta a cada degrau. */
.migalhas a + a::before,
.migalhas a + .migalha-atual::before { content: none; }
.migalha-atual { padding: 6px 4px; font-weight: 700; color: var(--muted); }

/* --- Utilidades ----------------------------------------------------------- */
.so-leitor {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.pula-para {
  position: absolute; left: -9999px;
  background: var(--rust); color: #fff; padding: 12px 20px; z-index: 100;
}
.pula-para:focus { left: 12px; top: 12px; color: #fff; }

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 1180px) {
  .hero-arte { width: 42vw; }
  .hero .wrap { grid-template-columns: minmax(0, 28rem); }
}

@media (max-width: 1080px) {
  .catalogo { grid-template-columns: repeat(3, 1fr); }
  .rodape-grade { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .publico { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faixa-fotos { grid-template-columns: 1fr; }
  .hero .wrap { grid-template-columns: 1fr; min-height: 0; padding-top: 0; }
  .hero-arte {
    position: static; width: auto; height: auto;
    aspect-ratio: 16 / 11;
    margin: 0 calc(-1 * var(--sangria, 22px)) 32px;
    order: -1;
  }
  .hero-selo { right: 20px; bottom: 52px; }
  .nav .so-mobile { display: block; }
  .linhas, .passos, .grade--3, .grade--4 { grid-template-columns: repeat(2, 1fr); }
  .publico-destaque { grid-template-columns: 1fr; }
  .publico-destaque img { min-height: 0; aspect-ratio: 16/10; }
  .duas-colunas { grid-template-columns: 1fr; }
  .modal-grade { grid-template-columns: 1fr; }
  .modal-fotos { position: static; }
  .modal-principal { aspect-ratio: 4 / 3; }

  .abre-menu { display: flex; }
  .nav {
    position: fixed; inset: 0 0 0 auto;
    width: min(320px, 84vw);
    background: var(--cream-up);
    border-left: 1px solid var(--line);
    padding: 92px 26px 26px;
    transform: translateX(100%);
    transition: transform .24s ease;
    box-shadow: var(--shadow-lg);
  }
  .nav[data-aberto="true"] { transform: translateX(0); }

  /* O menu vive dentro do cabeçalho, que é um contexto de empilhamento em
     z-index 60 — então o botão flutuante do WhatsApp, em 70, aparecia por
     cima da gaveta aberta. Subir o cabeçalho resolve na raiz; o véu escuro
     e o sumiço do botão evitam o resto da confusão. */
  body.menu-aberto { overflow: hidden; }
  body.menu-aberto::before {
    content: "";
    position: fixed; inset: 0; z-index: 75;
    background: rgba(36, 24, 16, .5);
  }
  body.menu-aberto .zap-flutua { display: none; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 4px; }
  .nav a { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--line); }
  .nav .btn { margin-top: 18px; justify-content: center; }
  .cabecalho > .wrap > .btn--rust { display: none; }
  .filtros { top: 0; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .faixa-selos ul { grid-template-columns: repeat(2, 1fr); gap: 20px 0; }
  .faixa-selos li:nth-child(odd) { border-left: none; }
  .faixa-selos li:nth-child(3), .faixa-selos li:nth-child(4) { padding-top: 20px; border-top: 1px solid var(--line-dk); }
  .catalogo, .grade--2 { grid-template-columns: repeat(2, 1fr); }
  .campos { grid-template-columns: 1fr; }
  .zap-flutua span { display: none; }
  .zap-flutua { padding: 16px; }
}

@media (max-width: 540px) {
  .catalogo, .linhas, .passos, .grade--2, .grade--3, .grade--4 { grid-template-columns: 1fr; }
  .publico { grid-template-columns: minmax(0, 1fr); }
  .rodape-grade { grid-template-columns: 1fr; }
  .hero-selo { position: static; margin-top: 18px; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --- Surgimento na rolagem -------------------------------------------------
   A classe .surge é aplicada por JavaScript, nunca no HTML: se o script não
   rodar, nada fica invisível. O movimento é curto e sobe pouco — o suficiente
   para o olho perceber que o bloco chegou, sem virar animação de apresentação.
   Quem pede menos movimento no sistema não recebe classe nenhuma.           */
.surge {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s cubic-bezier(.22, .61, .36, 1),
              transform .55s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}
.surge.visivel {
  opacity: 1;
  transform: none;
}
/* Terminada a entrada, tira a dica de composição para não segurar camada. */
.surge.visivel { will-change: auto; }

@media (prefers-reduced-motion: reduce) {
  .surge { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Movimento
   Tudo aqui é decorativo: cada bloco tem o seu par em prefers-reduced-motion
   no fim do arquivo, e nada esconde conteúdo sem JavaScript.
   ========================================================================== */

/* --- Cabeçalho que encolhe ao rolar ---------------------------------------
   Ganha espaço de tela no celular, que é onde o cabeçalho fixo mais incomoda,
   e dá ao site a resposta de que ele reage à rolagem.                       */
.cabecalho { transition: box-shadow .3s ease, background-color .3s ease; }
.cabecalho .wrap { transition: min-height .3s cubic-bezier(.22, .61, .36, 1); }
.marca img { transition: height .3s cubic-bezier(.22, .61, .36, 1); }

.rolou .cabecalho {
  box-shadow: 0 6px 24px -14px rgba(58, 42, 30, .34);
}
.rolou .cabecalho .wrap { min-height: 58px; }
.rolou .marca img { height: 40px; }
.rolou .filtros { top: 58px; }

/* --- Conteúdo do banner entrando em cascata -------------------------------
   Roda toda vez que o slide vira o ativo, então o carrossel deixa de ser um
   cruzamento de fotos e passa a apresentar cada perfil.                     */
@keyframes sobe-entra {
  from { opacity: 0; transform: translateY(20px); }
}
.banner[data-ativo="true"] .banner-conteudo > * {
  animation: sobe-entra .6s cubic-bezier(.22, .61, .36, 1) backwards;
}
.banner[data-ativo="true"] .banner-conteudo > *:nth-child(1) { animation-delay: .10s; }
.banner[data-ativo="true"] .banner-conteudo > *:nth-child(2) { animation-delay: .19s; }
.banner[data-ativo="true"] .banner-conteudo > *:nth-child(3) { animation-delay: .28s; }
.banner[data-ativo="true"] .banner-conteudo > *:nth-child(4) { animation-delay: .37s; }
.banner[data-ativo="true"] .banner-conteudo > *:nth-child(5) { animation-delay: .46s; }

/* Os números da régua entram um a um dentro da própria lista. */
.banner[data-ativo="true"] .regua-dados li {
  animation: sobe-entra .5s cubic-bezier(.22, .61, .36, 1) backwards;
}
.banner[data-ativo="true"] .regua-dados li:nth-child(1) { animation-delay: .44s; }
.banner[data-ativo="true"] .regua-dados li:nth-child(2) { animation-delay: .54s; }
.banner[data-ativo="true"] .regua-dados li:nth-child(3) { animation-delay: .64s; }

/* --- Zoom lento na foto do banner -----------------------------------------
   Sete segundos de slide com imagem parada lê como estático; o avanço quase
   imperceptível dá vida sem chamar atenção para si.                        */
@keyframes aproxima {
  from { transform: scale(var(--zoom, 1))
                    translate(var(--desloca, 0%), var(--desloca-y, 0%)); }
  to   { transform: scale(calc(var(--zoom, 1) * 1.06))
                    translate(var(--desloca, 0%), var(--desloca-y, 0%)); }
}
.banner[data-ativo="true"] .banner-foto img {
  animation: aproxima 9s ease-out both;
}

/* --- Gaveta do menu: itens entrando pela direita -------------------------- */
@keyframes entra-lado {
  from { opacity: 0; transform: translateX(22px); }
}
.nav[data-aberto="true"] li {
  animation: entra-lado .34s cubic-bezier(.22, .61, .36, 1) backwards;
}
.nav[data-aberto="true"] li:nth-child(1) { animation-delay: .06s; }
.nav[data-aberto="true"] li:nth-child(2) { animation-delay: .12s; }
.nav[data-aberto="true"] li:nth-child(3) { animation-delay: .18s; }
.nav[data-aberto="true"] li:nth-child(4) { animation-delay: .24s; }
.nav[data-aberto="true"] li:nth-child(5) { animation-delay: .30s; }

/* --- Resposta ao toque ----------------------------------------------------
   No celular não existe hover: sem isto, nada confirma que o dedo acertou. */
.btn:active { transform: translateY(1px) scale(.98); }
.produto:active, .irmao:active, .publico--foto article:active { transform: scale(.99); }
.chip:active, .galeria-mini:active { transform: scale(.96); }
.produto, .irmao, .publico--foto article, .chip, .galeria-mini { transition: transform .18s, box-shadow .18s, border-color .16s, background .16s, color .16s; }

/* A imagem do card cresce de leve quando o bloco surge, o que dá profundidade
   sem custar layout — só transform. */
.produto figure img, .irmao figure img, .publico--foto figure img { transition: transform .5s cubic-bezier(.22, .61, .36, 1); }

@media (prefers-reduced-motion: reduce) {
  .cabecalho, .cabecalho .wrap, .marca img { transition: none; }
  .banner[data-ativo="true"] .banner-conteudo > *,
  .banner[data-ativo="true"] .regua-dados li,
  .banner[data-ativo="true"] .banner-foto img,
  .nav[data-aberto="true"] li { animation: none; }
  .btn:active, .produto:active, .irmao:active,
  .publico--foto article:active, .chip:active, .galeria-mini:active { transform: none; }
}

/* --- Animações ligadas à rolagem ------------------------------------------
   Daqui para baixo é tudo `animation-timeline`: o navegador liga a animação à
   posição da barra de rolagem e roda fora da thread principal, sem um único
   evento de scroll em JavaScript. Onde o recurso não existe, o @supports
   simplesmente não aplica nada e a página segue igual.                     */

@supports (animation-timeline: scroll()) {
  /* Barra de leitura no topo, presa ao progresso da página inteira. */
  body::after {
    content: "";
    position: fixed; inset: 0 0 auto 0;
    height: 3px; z-index: 200;
    background: var(--marca-vm);
    transform-origin: 0 50%;
    animation: le-progresso linear both;
    animation-timeline: scroll(root);
  }
  @keyframes le-progresso { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

@supports (animation-timeline: view()) {
  /* Paralaxe nas fotos de seção: a imagem anda mais devagar que a página,
     o que dá profundidade. O `scale` a mais existe para o deslocamento não
     descobrir a borda do recorte.
     Ficam de fora os cards de produto e os irmãos, que já têm transform
     próprio no hover e brigariam por ele. */
  .publico-destaque figure img,
  .publico--foto figure img,
  .foto-faixa img,
  .foto-larga img {
    animation: desliza-fundo linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
    will-change: transform;
  }
  @keyframes desliza-fundo {
    from { transform: translateY(-5%) scale(1.12); }
    to   { transform: translateY(5%)  scale(1.12); }
  }

  /* Os títulos de seção ganham um respiro que abre conforme sobem. */
  .secao .centro h2 {
    animation: abre-titulo linear both;
    animation-timeline: view();
    animation-range: entry 8% entry 70%;
  }
  @keyframes abre-titulo {
    from { letter-spacing: .02em; opacity: .45; }
    to   { letter-spacing: -.01em; opacity: 1; }
  }
}

/* O reveal por IntersectionObserver continua sendo a base — é ele que roda
   em qualquer navegador. Aqui as imagens entram com um zoom curto em cima do
   deslocamento, o que dá peso à chegada do bloco. */
.surge.foto-faixa img,
.surge.foto-larga img,
.surge .publico-corpo + figure img { transform: scale(1.06); }
.surge.visivel.foto-faixa img,
.surge.visivel.foto-larga img { transform: none; transition: transform .9s cubic-bezier(.22, .61, .36, 1); }

@media (prefers-reduced-motion: reduce) {
  body::after { display: none; }
  .publico-destaque figure img, .publico--foto figure img,
  .foto-faixa img, .foto-larga img,
  .secao .centro h2 { animation: none; }
  .surge.foto-faixa img, .surge.foto-larga img { transform: none; }
}

/* --- Rodapé com ícones ---------------------------------------------------- */
/* Redes em botão redondo, junto do logotipo. No celular o rodapé vira coluna
   única e este é o primeiro bloco depois da descrição. */
.rodape .redes {
  display: flex; flex-wrap: wrap; gap: 10px;
  list-style: none; margin: 22px 0 0; padding: 0;
}
.rodape .redes a {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line-dk);
  color: var(--papel);
  transition: background .18s, border-color .18s, transform .18s;
}
.rodape .redes a:hover { background: var(--rust); border-color: var(--rust); transform: translateY(-2px); }
.rodape .redes a:active { transform: scale(.94); }
.rodape .redes a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.rodape .redes .ico { width: 21px; height: 21px; }

/* Contato: pictograma na frente de cada informação. */
.rodape .contato-icones { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.rodape .contato-icones li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; }
.rodape .contato-icones .ico { width: 18px; height: 18px; color: var(--gold); margin-top: 3px; }
.rodape .contato-icones span { color: var(--muted-dk); }

/* --- Régua de públicos em botões ------------------------------------------
   O rótulo saiu e os nomes ganharam contorno: sem a moldura, uma fileira de
   palavras separadas por losango não se lê como coisa clicável. */
.faixa-publicos .wrap { justify-content: center; }
.faixa-publicos ul { gap: 10px; justify-content: center; }
.faixa-publicos li { gap: 0; }
.faixa-publicos li + li::before { display: none; }
.faixa-publicos a {
  display: inline-flex; align-items: center;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--cream-up);
  font-size: .89rem; font-weight: 700;
  color: var(--ink);
  transition: background .16s, border-color .16s, color .16s, transform .16s;
}
.faixa-publicos a:hover {
  background: var(--rust); border-color: var(--rust); color: #fff;
  transform: translateY(-2px);
}
.faixa-publicos a:active { transform: scale(.97); }

/* Página de segmento: um banner só, sem carrossel em volta. */
.banner-solo .banner { position: relative; opacity: 1; visibility: visible; }
.banner-solo .banner-conteudo h1 {
  color: var(--papel);
  font-size: clamp(1.85rem, 4.2vw, 3.1rem);
  margin-bottom: .4em;
}
.irmaos--grade { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

/* Seção de respiro curto: usada no texto de abertura e na trilha das páginas
   de segmento, onde o padrão de 124px deixava mais vazio do que conteúdo. */
.secao--enxuta { padding-block: clamp(30px, 4vw, 48px); }

/* Trilha para os outros pontos de venda: mesma pílula da régua da home, para
   quem abriu a página errada ter saída sem voltar pelo menu. */
.trilha-negocios {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px; margin-top: 16px;
}
.trilha-negocios a {
  display: inline-flex; align-items: center;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--papel);
  font-size: .86rem; font-weight: 700; color: var(--ink);
  transition: background .16s, border-color .16s, color .16s, transform .16s;
}
.trilha-negocios a:hover {
  background: var(--rust); border-color: var(--rust); color: #fff;
  transform: translateY(-2px);
}
.trilha-negocios a:active { transform: scale(.97); }

/* ==========================================================================
   Abertura da página
   Sequência curta e encadeada: barra, régua da marca, texto e foto entram em
   ordem, cada um logo depois do anterior. O atributo data-abertura é posto
   por um script no <head> — sem ele (JS desligado, ou pedido de menos
   movimento) nada disso existe e a página chega montada.
   ========================================================================== */
/* ATENÇÃO: nada de transform, filter ou backdrop-filter em .cabecalho.
   Qualquer um dos três cria bloco de contenção para descendentes
   position:fixed, e a gaveta do menu — que é filha do cabeçalho — fica presa
   dentro da barra de 76px em vez de ocupar a tela. Foi assim que o menu do
   celular quebrou duas vezes. A barra entra só por opacidade; o gesto de
   descida fica nos filhos, que não são ancestrais da gaveta. */
html[data-abertura] .cabecalho {
  animation: revela-barra .5s ease-out both;
}
html[data-abertura] .marca,
html[data-abertura] .abre-menu,
html[data-abertura] .nav ul {
  animation: baixa-barra .62s cubic-bezier(.22, .61, .36, 1) both;
}
/* A régua vermelha risca o rodapé da barra e some: é a assinatura da marca
   aparecendo por um segundo, não um elemento fixo a mais na interface. */
html[data-abertura] .cabecalho::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--marca-vm);
  transform-origin: left center;
  animation: varre-regua 1.05s cubic-bezier(.65, 0, .35, 1) .12s both;
  pointer-events: none;
}

html[data-abertura] .hero .rotulo   { animation: sobe-foco .75s cubic-bezier(.22, .61, .36, 1) .16s both; }
html[data-abertura] .hero h1        { animation: sobe-cortina .95s cubic-bezier(.65, 0, .35, 1) .3s both; }
html[data-abertura] .hero .chamada  { animation: sobe-foco .8s cubic-bezier(.22, .61, .36, 1) .62s both; }
html[data-abertura] .hero-prova     { animation: sobe-foco .8s cubic-bezier(.22, .61, .36, 1) .76s both; }
/* A foto abre por uma cortina lateral enquanto o enquadramento recua: os dois
   juntos dão a sensação de a imagem estar chegando, e não de aparecer. */
html[data-abertura] .hero-arte      { animation: cortina-lado 1.1s cubic-bezier(.65, 0, .35, 1) .34s both; }
html[data-abertura] .hero-arte img  { animation: recua-foto 1.7s cubic-bezier(.22, .61, .36, 1) .34s both; }

/* A mesma abertura serve ao banner das páginas de segmento, que ocupa o topo
   no lugar do hero. */
html[data-abertura] .banner-solo .selo-perfil { animation: sobe-foco .75s cubic-bezier(.22, .61, .36, 1) .18s both; }
html[data-abertura] .banner-solo h1           { animation: sobe-cortina .95s cubic-bezier(.65, 0, .35, 1) .32s both; }
html[data-abertura] .banner-solo .banner-conteudo > p:not(.selo-perfil) { animation: sobe-foco .8s cubic-bezier(.22, .61, .36, 1) .6s both; }
html[data-abertura] .banner-solo .regua-dados li {
  animation: sobe-foco .7s cubic-bezier(.22, .61, .36, 1) both;
  animation-delay: calc(.72s + var(--i, 0) * .09s);
}
html[data-abertura] .banner-solo .banner-foto img { animation: recua-foto 1.9s cubic-bezier(.22, .61, .36, 1) both; }

@keyframes revela-barra {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes baixa-barra {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}
@keyframes varre-regua {
  0%   { transform: scaleX(0); opacity: 1; }
  58%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}
/* Sobe com um borrão curto: o texto parece entrar em foco, que é mais suave
   do que um fade puro em bloco grande de leitura. */
@keyframes sobe-foco {
  from { opacity: 0; transform: translateY(16px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes sobe-cortina {
  from { opacity: 0; transform: translateY(24px); clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; transform: none; clip-path: inset(0 0 -12% 0); }
}
@keyframes cortina-lado {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes recua-foto {
  from { transform: scale(1.12); }
  to   { transform: scale(1); }
}

/* ==========================================================================
   Variações de surgimento na rolagem
   O site inteiro subindo do mesmo jeito vira ruído. Cada tipo de elemento
   ganha o gesto que combina com ele: foto abre por cortina, título sobe por
   trás de uma linha, pílula estoura. A classe vem do JavaScript, nunca do
   HTML, pela mesma razão de sempre — script desligado, nada some.
   ========================================================================== */
.surge.surge--cortina {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .95s cubic-bezier(.65, 0, .35, 1);
}
.surge.surge--cortina.visivel { clip-path: inset(0 0 -14% 0); }

.surge.surge--lado {
  opacity: 1;
  transform: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1s cubic-bezier(.65, 0, .35, 1);
}
.surge.surge--lado.visivel { clip-path: inset(0 0 0 0); }
.surge.surge--lado img { transform: scale(1.09); }
.surge.surge--lado.visivel img {
  transform: none;
  transition: transform 1.4s cubic-bezier(.22, .61, .36, 1);
}

/* Estouro curto com uma pontinha de elástico: serve a pílula e a etiqueta,
   que são pequenas e aguentam um gesto mais vivo sem virar circo. */
.surge.surge--pop {
  opacity: 0;
  transform: scale(.86);
  transition: opacity .34s ease-out, transform .46s cubic-bezier(.34, 1.5, .64, 1);
}
.surge.surge--pop.visivel { opacity: 1; transform: none; }

/* Card de produto: sobe e cresce um fio, como se assentasse na grade. */
.surge.surge--carta {
  opacity: 0;
  transform: translateY(26px) scale(.96);
  transition: opacity .5s ease-out, transform .62s cubic-bezier(.22, .61, .36, 1);
}
.surge.surge--carta.visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .surge.surge--cortina, .surge.surge--lado { clip-path: none; transition: none; }
  .surge.surge--pop, .surge.surge--carta { opacity: 1; transform: none; transition: none; }
  html[data-abertura] * { animation: none !important; }
}

/* --- Controles do carrossel no celular -------------------------------------
   Oito pontos de 34px mais os vãos passavam de 340px de fileira: em tela de
   360px a régua encostava nas bordas e, com o overflow do carrossel, os das
   pontas apareciam cortados. No celular o traço encolhe para 10px e o alvo de
   toque cresce para 26x34px por fora dele — o dedo ganha área sem a régua
   ganhar largura. A fileira também deixa de ser centrada por transform e passa
   a ocupar a largura toda, que é o que garante que ela nunca vaze.          */
@media (max-width: 720px) {
  .banner-pontos {
    left: 0; right: 0;
    transform: none;
    justify-content: center;
    gap: 0;
    padding: 0 12px;
    bottom: 22px;
  }
  .banner-conteudo { padding-bottom: 68px; }

  .banner-ponto,
  .banner-ponto:hover,
  .banner-ponto[aria-selected="true"] {
    width: 26px; height: 34px;
    padding: 15px 8px;
    display: flex;
    border-radius: 0;
    background: transparent;
  }
  .banner-ponto::before {
    content: "";
    flex: 1;
    border-radius: 2px;
    background: rgba(255, 253, 250, .34);
    transition: background .2s;
  }
  .banner-ponto[aria-selected="true"]::before { background: var(--gold); }
}

/* Em tela muito estreita o vão entre alvos aperta; tirar 2px de cada lado
   devolve folga sem encostar o traço no vizinho. */
@media (max-width: 360px) {
  .banner-ponto,
  .banner-ponto:hover,
  .banner-ponto[aria-selected="true"] { width: 22px; padding-inline: 6px; }
}

/* --- Anterior e próximo na página de produto -------------------------------
   Faixa larga, dividida ao meio, do tamanho de um alvo de dedo. Ficava só o
   bloco de miniaturas "Da mesma linha", que se lê como vitrine e não como
   navegação — quem queria comparar dois sabores voltava para a lista a cada
   item. Aqui o próximo item da linha está sempre a um toque.               */
.passa-produto {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--cream-up);
}
.passa-produto .wrap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.passa {
  display: flex; flex-direction: column; gap: 4px;
  padding: 26px clamp(16px, 3vw, 34px);
  color: var(--ink);
  transition: background .16s, color .16s;
}
.passa + .passa { border-left: 1px solid var(--line); }
.passa--ant { text-align: left; }
.passa--prox { text-align: right; grid-column: 2; }
.passa span {
  font-size: .7rem; font-weight: 800; letter-spacing: .15em;
  text-transform: uppercase; color: var(--rust);
}
.passa b {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.05rem, 2.2vw, 1.4rem); line-height: 1.2;
}
/* A seta entra pelo pseudo-elemento para não virar texto lido em voz alta. */
.passa--ant span::before { content: "← "; }
.passa--prox span::after { content: " →"; }
.passa:hover { background: var(--rust); color: #fff; }
.passa:hover span { color: rgba(255, 253, 250, .82); }

.grupo-btn--centro {
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: center; margin-top: 34px;
}

@media (max-width: 620px) {
  .passa-produto .wrap { grid-template-columns: minmax(0, 1fr); }
  .passa + .passa { border-left: 0; border-top: 1px solid var(--line); }
  .passa--prox { grid-column: 1; text-align: left; }
  .passa--prox span::after { content: " →"; }
}

.migalha-sep { color: var(--muted); opacity: .55; font-size: .95em; padding-inline: 1px; }

/* --- Redes na barra fixa ---------------------------------------------------
   Dois botões redondos entre o menu e a gaveta. Ficam visíveis também no
   celular, que é onde o WhatsApp mais é usado — e ali o menu está fechado,
   então sem eles não haveria contato à mão em nenhuma página interna.

   Nada de transform no .cabecalho: aqui ele está no <a>, que é irmão da
   gaveta e não ancestral dela. Transform no cabeçalho prende o menu fixo. */
.topo-redes {
  display: flex; align-items: center; gap: 8px;
  list-style: none; margin: 0; padding: 0;
}
.topo-redes a {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--line); border-radius: 50%;
  color: var(--ink);
  transition: background .16s, border-color .16s, color .16s, transform .16s;
}
.topo-redes a:hover {
  background: var(--ink); border-color: var(--ink); color: var(--papel);
  transform: translateY(-2px);
}
.topo-redes .topo-zap:hover { background: #1FA855; border-color: #1FA855; color: #fff; }
.topo-redes a:active { transform: scale(.95); }
.topo-redes svg { width: 19px; height: 19px; }

@media (max-width: 900px) {
  .cabecalho .wrap { gap: 12px; }
  .topo-redes a { width: 38px; height: 38px; }
  .topo-redes svg { width: 18px; height: 18px; }
}
/* O corte em 360px escondia o Instagram na largura mais comum de celular
   Android, que é exatamente 360. E a conta não fechava: logotipo 54, dois
   redondos de 38, gaveta 46 e os vãos somam 208px dentro dos 316 que sobram.
   Cabe. O corte desce para 320px, onde aperta de verdade. */
@media (max-width: 320px) {
  .topo-redes li:first-child { display: none; }
}

/* --- O botão do banner no celular ------------------------------------------
   Só o primeiro slide define a altura da seção: os outros sete são
   position:absolute dentro dela. Quem tem título de três linhas empurrava o
   botão para fora dessa caixa, e o overflow do carrossel cortava — por isso
   ele sumia em alguns banners e não em outros.

   A correção não é dar mais altura, que alongaria todos por causa do pior
   caso. É tirar o botão do fluxo: ele passa a morar num degrau reservado no
   rodapé do banner, sempre na mesma altura, aconteça o que acontecer com o
   texto acima. De quebra, o olho encontra a ação no mesmo lugar ao passar de
   um slide para o outro. */
@media (max-width: 720px) {
  .banner-conteudo {
    position: relative;
    padding-bottom: 118px;   /* o degrau do botão mais a folga dos pontos */
  }
  .banner-acao {
    position: absolute;
    left: 22px; right: 22px; bottom: 66px;
    margin: 0;
  }
  .banner-acao .btn {
    font-size: .9rem;
    padding: 12px 20px;
  }
  /* A régua de números encolhe junto: é ela que empurra o texto para baixo. */
  .banner--marca .regua-dados { gap: 10px 12px; margin-top: 14px; }
  .banner-conteudo h2 { font-size: clamp(1.6rem, 6.4vw, 2.1rem); }
  .banner-conteudo p { font-size: 1rem; margin-bottom: 1.1em; }
}

/* --- Fotos dos cards de perfil no celular ----------------------------------
   O card é flex em coluna e a figura tira a altura só de aspect-ratio, sem
   altura própria. Quando a coluna única do celular dá altura definida ao
   card, o Safari encolhe essa figura até zero — flex-shrink age antes de o
   aspect-ratio virar altura, e a foto some sem erro nenhum no console.
   flex:none tira a figura da negociação de espaço. */
.publico--foto figure,
.publico-destaque figure { flex: none; }

/* Rede de segurança: se um dia a figura sair de dentro de .publico--foto por
   causa de HTML malformado, ela ainda terá proporção e a foto aparece. */
.publico figure img,
.publico-destaque figure img { display: block; }

/* Mesma armadilha dos cards de perfil: card em flex-column com a figura
   dimensionada só por aspect-ratio. Na coluna única do celular o Safari
   encolhe a figura a zero antes de o aspect-ratio virar altura. */
.irmao figure,
.produto figure { flex: none; }


/* --- A embalagem como prova -------------------------------------------------
   Ela ocupava uma coluna inteira da grade: um pacote de 750px de altura ao
   lado de tres paragrafos, e o cartao que ela ilustra empurrado para a linha
   de baixo — grande e, ao mesmo tempo, solta. Prova nao e capa. Agora a foto
   e uma faixa estreita colada no cartao "Vai junto com todo pedido": pequena
   o bastante para nao competir com o texto, grande o bastante para o rotulo,
   o peso e a advertencia continuarem legiveis. */
.prova-embalagem {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin: 26px 0 0;
  padding: 16px;
  background: var(--cream-up);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.prova-embalagem img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: none;
}
.prova-embalagem figcaption {
  font-size: .82rem;
  line-height: 1.55;
  color: var(--muted);
}
@media (max-width: 560px) {
  .prova-embalagem { grid-template-columns: 104px minmax(0, 1fr); gap: 14px; padding: 14px; }
}

/* --- Calculadora de convidados ---------------------------------------------
   Só nas páginas de catering, buffet e evento corporativo. A primeira dúvida
   de quem compra para festa é quantidade, e responder isso antes do contato
   é o que transforma visita em pedido. */
.calc { margin-top: 30px; }
.calc-campos {
  display: grid;
  grid-template-columns: minmax(0, 140px) minmax(0, 1fr);
  gap: 16px;
}
.calc-campo { display: flex; flex-direction: column; gap: 7px; }
.calc-campo > span {
  font-size: .72rem; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted);
}
.calc-campo input, .calc-campo select {
  font-family: var(--sans); font-size: 1.05rem; font-weight: 700;
  color: var(--ink); background: #fff;
  border: 1px solid var(--line); border-radius: 8px;
  padding: 13px 15px; width: 100%;
}
.calc-campo input { font-family: var(--serif); font-size: 1.5rem; font-weight: 400; text-align: center; }
.calc-campo input:focus, .calc-campo select:focus {
  outline: 2px solid var(--rust); outline-offset: 1px; border-color: var(--rust);
}

.calc-saida {
  margin-top: 26px; padding: 26px;
  background: var(--ink); color: var(--papel);
  border-radius: var(--radius);
}
.calc-numeros {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
}
.calc-numeros li { display: flex; flex-direction: column; gap: 5px; }
.calc-numeros b {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.8rem, 5vw, 2.7rem); line-height: 1;
  color: var(--gold); font-variant-numeric: tabular-nums;
}
.calc-numeros span { font-size: .78rem; color: rgba(255, 253, 250, .72); line-height: 1.35; }
.calc-nota {
  margin-top: 20px; padding-top: 18px;
  border-top: 1px solid var(--line-dk);
  font-size: .92rem; color: rgba(255, 253, 250, .86);
}
.calc-saida .grupo-btn { margin-top: 20px; }
.calc-aviso { margin-top: 18px; font-size: .84rem; color: var(--muted); }

@media (max-width: 620px) {
  .calc-campos { grid-template-columns: minmax(0, 1fr); }
  .calc-numeros { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .calc-numeros b { font-size: clamp(1.4rem, 7vw, 2rem); }
  .calc-numeros span { font-size: .7rem; }
}