/* ==========================================================================
   Biscoitos Andriolli, folha de estilo unica do site
   --------------------------------------------------------------------------
   A identidade vem das 31 embalagens do cliente e do logotipo: vermelho como
   campo cheio, amarelo como acento, preto no contorno, mascotes presentes.

   O ponto de equilibrio deste arquivo e a DOSAGEM. A embalagem usa fonte
   comic, contorno preto grosso e sombra dura, e quando tudo isso aparece em
   todos os elementos ao mesmo tempo, o site fica com cara de material
   infantil, o que nao serve para quem compra volume. Entao:

     - LUCKIEST GUY (a fonte do lettering) fica so em h1, h2, na declaracao e
       no lema do rodape. Todo o resto (subtitulo, nome de produto, numero,
       tabela) usa Archivo 700, que sustenta ficha tecnica e formulario.
     - CONTORNO PRETO GROSSO e SOMBRA DURA ficam so nos selos, que sao
       carimbos pequenos. Cartao, botao e campo usam borda fina e sombra suave.
     - O EMPILHAMENTO DE COR do logotipo (preto + amarelo + vermelho) nao se
       repete em cada titulo: o logotipo ja faz isso no topo da pagina.
     - VERMELHO segue sendo campo cheio nas faixas; o amarelo continua
       aparecendo, mas como detalhe medido.

   As fotos de embalagem tem fundo branco, entao o site e claro: elas se
   recortam sozinhas em bloco branco ou creme. Sobre o vermelho e sobre o
   preto entram apenas os recortes de assets/img/recortes/.

   Organizacao:
     01. Fontes            07. Home
     02. Tokens            08. Produtos: cartoes e grade
     03. Base              09. Catalogo
     04. Tipografia        10. Ficha de produto
     05. Botoes            11. Orcamento
     06. Cabecalho         12. Institucional e formularios
                           13. Rodape
                           14. Utilitarios e responsivo
   ========================================================================== */

/* 01. Fontes ============================================================== */

@font-face {
  font-family: 'Luckiest Guy';
  src: url('../fonts/luckiest-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/*
 * UMA declaracao so para a Archivo, com FAIXA de peso.
 *
 * O arquivo e a Archivo VARIAVEL do Google (tem as tabelas HVAR e STAT
 * dentro): um so woff2 de 35 KB que cobre de 100 a 900.
 *
 * Ate 25/08/2026 havia duas declaracoes aqui, uma com font-weight 400 e outra
 * com 700, e as duas apontavam para o MESMO arquivo: `archivo-400.woff2` e
 * `archivo-700.woff2` tinham md5 identico. Com peso fixo declarado, o
 * navegador nao tinha de onde tirar o negrito e engrossava o desenho da letra
 * por conta propria (negrito sintetico), que e sempre mais sujo que o
 * verdadeiro. Declarando a faixa, o eixo de peso da fonte passa a ser usado e
 * o 600/700/800 saem desenhados, sem baixar um byte a mais.
 *
 * O titulo do site pede 800, entao isso deixou de ser detalhe.
 */
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-400.woff2') format('woff2-variations'),
       url('../fonts/archivo-400.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* 02. Tokens ============================================================== */

:root {
  /* Vermelho de campo cheio. Um tom abaixo do #D4001C anterior: nas faixas
     grandes (barra de numeros, bloco de distribuidor) o tom antigo vibrava
     contra o creme e cansava; este assenta e deixa o amarelo aparecer. */
  --vermelho: #C60019;
  --vermelho-escuro: #98000F;
  --vermelho-vivo: #E4002A;

  /* O amarelo virou AMBAR. O #F5CE00 anterior era limao e sumia sobre o creme;
     as embalagens usam um amarelo mais quente, e e ele que segura o contraste
     tanto no vermelho quanto no marrom do rodape. */
  --amarelo: #FFB70E;
  --amarelo-claro: #FFD75E;
  --dourado: #D8AC5E;

  --preto: #17130E;
  /* Marrom quase preto do rodape: preto puro ao lado do creme fica duro. */
  --marrom: #1F0E0C;

  /* Base creme. Mais quente que a anterior (#FDFBF6): e o fundo do desenho
     do cliente e o que faz a pagina parecer papel, nao tela branca. */
  --fundo: #FFF9ED;
  --fundo-2: #F7ECD9;
  --fundo-3: #FDF3E2;
  --branco: #FFFFFF;

  --texto: #201712;
  --texto-fraco: #6E6257;
  --texto-claro: #FFFFFF;
  --texto-claro-fraco: rgba(255, 255, 255, .82);

  --display: 'Luckiest Guy', 'Trebuchet MS', Impact, sans-serif;
  --corpo: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Contorno grosso: reservado para os selos. */
  --borda-marca: 2px solid var(--preto);
  --borda: 1px solid #EADFCB;
  --borda-forte: 1.5px solid #D8C9AE;

  --sombra: 0 1px 2px rgba(32, 23, 18, .04), 0 6px 16px rgba(32, 23, 18, .06);
  --sombra-alta: 0 2px 4px rgba(32, 23, 18, .05), 0 18px 38px rgba(32, 23, 18, .10);
  --sombra-cartao: 0 2px 3px rgba(32, 23, 18, .04), 0 12px 30px rgba(32, 23, 18, .07);

  /* Raios generosos: e o que mais separa o desenho novo do anterior. Cartao,
     botao e painel sao todos arredondados; o botao e pilula inteira. */
  --raio: 14px;
  --raio-g: 22px;
  --raio-gg: 30px;
  --pilula: 999px;

  --largura: 1220px;

  /* Espaço vertical de cada seção: vale em cima E embaixo, então o vão entre
     duas seções é o dobro deste número. Era clamp(3.5rem, 7vw, 6rem), que dava
     191 px de vazio entre uma seção e outra num monitor comum e fazia a página
     parecer esburacada. */
  --respiro: clamp(3rem, 5.5vw, 4.5rem);
  --transicao: 170ms cubic-bezier(.2, .7, .3, 1);

  /* O festao do topo (ver .faixa-marca) mais a barra do cabecalho.
     O festao foi de 26 para 13 px em 26/08/2026, porque com 26 ele era uma
     tarja grossa atravessando a tela antes de qualquer conteudo, e voltou a
     17 em 27/08/2026, quando as bandeirinhas ficaram redondas: a altura agora
     e o raio do circulo da mascara, e as duas nao podem divergir.

     A ALTURA DA BARRA VIROU VARIAVEL em 26/08/2026, junto com o logotipo
     maior. O numero estava escrito em quatro lugares (o min-height da barra,
     este total, e o `inset` e o `max-height` do menu do celular), e os quatro
     tinham de concordar: o menu suspenso e `position: fixed` e nasce colado
     na barra, entao errar aqui deixa uma fresta entre os dois ou faz o menu
     comer o cabecalho. Com um valor so, crescer a barra move tudo junto. */
  --altura-festao: 17px;
  --altura-barra: 88px;
  --altura-topo: calc(var(--altura-festao) + var(--altura-barra));

  /*
   * QUANTO A BARRA VERMELHA DE NUMEROS SOBE sobre a abertura.
   *
   * Ela monta na divisa entre as duas secoes, e e isso que costura a home em
   * vez de empilhar dois retangulos (ver .faixa-numeros--montada).
   *
   * ESTE NUMERO E LIDO EM TRES LUGARES e os tres precisam concordar: a margem
   * negativa da barra, o recuo de baixo da abertura (que reserva o espaco que a
   * barra vai ocupar) e o teto de altura da vitrine (que desconta os dois
   * recuos). Estava escrito so na barra, e o recuo da abertura nao sabia dele:
   * a barra subia 35 px numa janela de 1366 e a abertura reservava 30, entao
   * em tela baixa (600 a 640 px de altura, medido) a barra passava 5 px por
   * cima e os dois botoes da abertura nasciam colados nela.
   *
   * Como valor unico, o erro nao volta: quem mexer aqui move as tres coisas
   * juntas.
   */
  --montagem-numeros: clamp(1.75rem, 2.6vw, 3rem);
}

/* 03. Base ================================================================ */

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

/*
 * O atributo `hidden` tem de esconder DE VERDADE.
 *
 * O navegador ja traz `[hidden] { display: none }`, mas essa regra e da folha
 * do proprio navegador e perde para qualquer regra nossa que declare `display`.
 * Como `.card` e `display: flex`, `.grade-produtos` e `.orcamento` sao
 * `display: grid`, o `hidden` nesses elementos nao surtia efeito nenhum:
 *
 *   - o filtro por linha do catalogo nao filtrava (os 31 produtos continuavam
 *     na tela, com ou sem JavaScript, e /produtos?categoria=polvilho tambem);
 *   - o aviso de "nao achamos esse produto" convivia com a grade;
 *   - a pagina de orcamento mostrava a lista vazia E o bloco de conteudo.
 *
 * O `!important` aqui e proposital e e o uso classico dele: `hidden` e uma
 * afirmacao sobre a existencia do elemento na pagina, nao uma sugestao de
 * estilo, entao nada deve poder contraria-la.
 */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--corpo);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--vermelho); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--vermelho-escuro); }

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

.pular-para-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--preto);
  color: #fff;
  padding: .85rem 1.4rem;
  font-weight: 700;
}
.pular-para-conteudo:focus { left: 0; }

.container {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 4.5vw, 3rem);
}

.secao { padding-block: var(--respiro); }
.secao--curta { padding-block: clamp(2.25rem, 4.5vw, 3.5rem); }

.bloco-claro { background: var(--branco); }
.bloco-creme { background: var(--fundo-2); }

.bloco-vermelho { background: var(--vermelho); color: var(--texto-claro); }
.bloco-vermelho p { color: var(--texto-claro-fraco); }

/*
 * Link dentro de bloco colorido fica branco, MENOS botao.
 *
 * O `:not(.btn)` nao e enfeite. Sem ele, `.bloco-vermelho a` (especificidade
 * 0,1,1) vencia `.btn--claro` (0,1,0) e pintava de branco o texto de um botao
 * que tem fundo branco: o "Ver meu orçamento" do catalogo, o "Ser um
 * distribuidor" da home e o "Seja um distribuidor" da pagina da fabrica ficavam
 * como retangulos brancos vazios. Tres chamadas principais invisiveis.
 */
.bloco-vermelho a:not(.btn) { color: #fff; }

.bloco-preto { background: var(--preto); color: var(--texto-claro); }
.bloco-preto a:not(.btn) { color: var(--amarelo); }   /* mesmo motivo do bloco vermelho */
.bloco-preto p { color: rgba(255, 255, 255, .78); }

/*
 * O FESTAO DO TOPO
 *
 * Meias-luas sobrepostas em preto, vermelho e ambar. E a listra tricolor da
 * embalagem virada bandeirola, e e a primeira coisa que o visitante ve: era
 * exatamente a "presenca de topo" que faltava, quando isto era um fio de 7 px.
 *
 * Como e feito, sem imagem nenhuma:
 *
 *   1. o FUNDO e uma listra vertical que se repete a cada 24 px, dividida em
 *      preto / vermelho / ambar. Cada repeticao pinta uma meia-lua;
 *   2. a MASCARA e um circulo por repeticao, encostado no topo. Onde a
 *      mascara e opaca o fundo aparece; onde nao e, some e o creme da pagina
 *      atravessa, que e o que forma a onda entre uma meia-lua e outra.
 *
 * OS TRES NUMEROS ANDAM JUNTOS: passo 30px, raio 17px, altura 17px. Mexer em
 * um sem os outros quebra o desenho, de dois jeitos diferentes:
 *
 *   RAIO x PASSO decide o alto da faixa. O raio (17) tem de passar da metade
 *   do passo (15) para as meias-luas se sobreporem; sobrepostas, elas se
 *   tocam la em cima e a faixa fecha sem furo. Com raio igual ou menor que
 *   meio passo, abre um fio de creme entre uma e outra bem na borda de cima.
 *
 *   RAIO x ALTURA decide o embaixo, e e o que mudou em 27/08/2026, a pedido do
 *   cliente ("um pouco maiores e mais redondas"). Antes o raio era 15 e a
 *   altura 13: como o circulo descia ate 15 e a faixa acabava em 13, cada
 *   meia-lua era CORTADA e terminava num fundo reto de 15 px. De longe eram
 *   abas achatadas, nao bandeirinhas. Agora a altura alcanca o raio, entao o
 *   circulo cabe inteiro e cada bandeirinha termina na propria curva.
 *
 * A ONDA FICOU MAIS FUNDA em consequencia. As duas meias-luas vizinhas se
 * cruzam em y = raiz(raio^2 - (passo/2)^2): 8 px aqui, contra 9 px antes. Como
 * o fundo desceu de 13 para 17, a curva visivel foi de 4 px (e reta) para 9 px
 * (e redonda), que e o dobro de barriga.
 *
 * A listra colorida repete no MESMO passo da mascara, senao a cor escorrega de
 * uma bandeirinha para a outra ao longo da faixa. Os cortes acompanharam a
 * escala: eram 5/8/11 em 24, agora 6/10/14 em 30.
 *
 * O -webkit-mask acompanha o mask porque o Safari ainda pede o prefixo, e sem
 * ele o festao vira um retangulo listrado.
 */
.faixa-marca {
  height: var(--altura-festao);
  background: repeating-linear-gradient( 90deg, var(--preto) 0 10px, var(--vermelho) 0px 20px, var(--amarelo) 15px 30px );
  -webkit-mask-image: radial-gradient(circle 17px at 50% 0, #000 99%, transparent 100%);
  mask-image: radial-gradient(circle 15px at 50% 2px, #000 93%, transparent 100%);
  -webkit-mask-size: 30px 100%;
  mask-size: 30px 100%;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
}

/*
 * Navegador sem mascara CSS (Firefox antigo, IE) receberia a faixa inteira, um
 * retangulo listrado grosso, que fica pior do que o fio fino de antes. Nesse
 * caso voltamos ao fio: @supports so entra onde a mascara funciona.
 */
@supports not ((mask-image: radial-gradient(#000, #000)) or (-webkit-mask-image: radial-gradient(#000, #000))) {
  .faixa-marca {
    height: 8px;
    background: repeating-linear-gradient(
      -60deg,
      var(--preto) 0 14px,
      var(--branco) 14px 28px,
      var(--vermelho) 28px 42px,
      var(--amarelo) 42px 56px
    );
  }
}

/* 04. Tipografia ========================================================== */

/*
 * TITULO EM ARCHIVO 800, NAO NA LUCKIEST GUY.
 *
 * Mudou em 25/08/2026, com o desenho aprovado pelo cliente. Ate aqui h1 e h2
 * usavam a Luckiest Guy, a fonte do lettering da embalagem. Ela e simpatica em
 * uma linha curta e cansa em tres, e principalmente empurra o site para o lado
 * infantil justamente na parte que fala com quem compra volume.
 *
 * A grotesca pesada resolve os dois lados: o peso 800 da a presenca que
 * faltava (o titulo era fino demais e a pagina parecia um documento), e o
 * desenho da letra continua serio o bastante para ficha tecnica e proposta.
 *
 * A Luckiest Guy nao saiu do site: ela e a assinatura da marca no logotipo e
 * no rodape (.marca-palavra). E onde ela vale, e uma vez por tela.
 */
h1, h2 {
  font-family: var(--corpo);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.022em;
  color: var(--texto);
  margin: 0 0 .5em;
  text-wrap: balance;
}

/* h3 e menores voltam para a fonte de texto: e o que sustenta leitura de
   nome de produto, ficha tecnica e formulario sem parecer material infantil. */
h3 {
  font-family: var(--corpo);
  font-weight: 700;
  font-size: 1.06rem;
  line-height: 1.35;
  letter-spacing: -.005em;
  margin: 0 0 .4em;
}

h1 { font-size: clamp(2.3rem, 5.2vw, 3.75rem); }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); }

.bloco-vermelho h1, .bloco-vermelho h2, .bloco-vermelho h3,
.bloco-preto h1, .bloco-preto h2, .bloco-preto h3 { color: var(--texto-claro); }

h4 {
  font-family: var(--corpo);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin: 0 0 1.1rem;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* O empilhamento de cor do logotipo nao se repete aqui: o logotipo ja faz
   isso no cabecalho. A classe permanece por compatibilidade com o HTML. */
.titulo-marca { color: var(--texto); }
.bloco-vermelho .titulo-marca, .bloco-preto .titulo-marca { color: var(--texto-claro); }

/* A palavra ANDRIOLLI escrita, no rodape e onde a marca assina. E o unico
   lugar do site em que a Luckiest Guy aparece fora do logotipo. */
.marca-palavra {
  font-family: var(--display);
  font-weight: 400;
  color: var(--vermelho-vivo);
  letter-spacing: .02em;
  line-height: 1;
  font-size: clamp(1.9rem, 3vw, 2.4rem);
  margin: 0;
}

/*
 * Etiqueta de secao: caixa alta vermelha com um rabisco depois.
 *
 * O rabisco vem DEPOIS do texto, nao antes: e assim no desenho, e faz
 * diferenca de leitura. Antes era um tracinho antes do texto, que empurrava
 * todo rotulo para a direita e desalinhava o comeco da coluna com o titulo
 * logo abaixo. Agora rotulo e titulo comecam na mesma vertical.
 *
 * O desenho do rabisco e um SVG em mascara, pintado com currentColor, entao
 * ele acompanha a cor do rotulo em qualquer fundo sem precisar de variante.
 *
 * O `viewBox` COMECA EM y=1.5, e nao em 0, de proposito.
 *
 * A curva oscila entre y 2,625 e 9,375, e o traco de 1,8 acrescenta 0,9 de cada
 * lado: o desenho ocupa de 1,725 a 10,275. Com o `viewBox` em `0 0 30 9` isso
 * deixava 1,725 de vazio em cima e CORTAVA 1,275 embaixo, entao as duas ondas
 * que descem sairam com a barriga achatada, como se o rabisco tivesse sido
 * apoiado numa mesa.
 *
 * Deslocar a janela em 1,5 centraliza o desenho e sobra 0,225 de folga dos dois
 * lados. A altura continua 9, entao a proporcao do SVG nao muda e a caixa de
 * 30x9 px da regra abaixo continua valendo: nada mais na pagina se mexe.
 *
 * Se um dia mexer no `stroke-width` ou nos pontos da curva, refaca a conta: o
 * corte volta em silencio, porque mascara nao avisa que estourou.
 */
.rotulo {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--vermelho);
  margin: 0 0 1rem;
}
.rotulo::after {
  content: '';
  width: 30px;
  height: 9px;
  flex: none;
  background: currentColor;
  opacity: .55;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 1.5 30 9'%3E%3Cpath d='M1 6C3.5 1.5 6 1.5 8.5 6S13.5 10.5 16 6s5-4.5 7.5 0 5 4.5 5.5 0' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 1.5 30 9'%3E%3Cpath d='M1 6C3.5 1.5 6 1.5 8.5 6S13.5 10.5 16 6s5-4.5 7.5 0 5 4.5 5.5 0' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.bloco-vermelho .rotulo { color: var(--amarelo); }
.bloco-preto .rotulo { color: var(--amarelo); }

.destaque { color: var(--vermelho); }
.bloco-vermelho .destaque, .bloco-preto .destaque { color: var(--amarelo); }

.entrada {
  font-size: clamp(1.02rem, 1.5vw, 1.15rem);
  color: var(--texto-fraco);
  max-width: 58ch;
}
.bloco-vermelho .entrada, .bloco-preto .entrada { color: var(--texto-claro-fraco); }

.cabecalho-secao { margin-bottom: clamp(2rem, 4vw, 3rem); max-width: 44rem; }
.cabecalho-secao .entrada { margin-top: 1rem; max-width: 52ch; }

/* Titulo a esquerda e uma acao a direita, na mesma linha (secao de destaques).
   Vira duas linhas empilhadas quando nao ha largura, e ai o botao volta para o
   comeco: um botao sozinho alinhado a direita, sem nada em frente, fica
   parecendo perdido. */
.cabecalho-secao--lado {
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem 2rem;
}
.cabecalho-secao--lado > div { max-width: 44rem; }
.cabecalho-secao--lado h2 { margin-bottom: 0; }

/* 05. Botoes ============================================================== */

/*
 * BOTAO PILULA.
 *
 * Passou de retangulo de canto 8 px para pilula inteira em 25/08/2026, com o
 * desenho novo. Nao e so gosto: com o cartao, o painel e o campo todos
 * arredondados, um botao de canto quase reto era a peca que denunciava o
 * layout antigo.
 *
 * O texto deixou de ser CAIXA ALTA. Em caixa alta, "Conheça nossos produtos"
 * ocupa quase o dobro e vira uma barra de texto; em caixa mista o rotulo cabe,
 * le mais rapido e e o que esta no desenho.
 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-family: var(--corpo);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: -.005em;
  line-height: 1;
  padding: 1.02rem 1.9rem;
  border: 1.5px solid transparent;
  border-radius: var(--pilula);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transicao), border-color var(--transicao),
              color var(--transicao), box-shadow var(--transicao),
              transform var(--transicao);
}
.btn:hover { transform: translateY(-1px); }

.btn--principal {
  background: var(--vermelho);
  border-color: var(--vermelho);
  color: #fff;
  box-shadow: 0 6px 18px rgba(198, 0, 25, .22);
}
.btn--principal:hover {
  background: var(--vermelho-vivo);
  border-color: var(--vermelho-vivo);
  color: #fff;
  box-shadow: 0 10px 26px rgba(198, 0, 25, .32);
}

.btn--amarelo {
  background: var(--amarelo);
  border-color: var(--amarelo);
  color: var(--preto);
  box-shadow: 0 6px 18px rgba(255, 183, 14, .3);
}
.btn--amarelo:hover { background: var(--amarelo-claro); border-color: var(--amarelo-claro); color: var(--preto); }

.btn--contorno { background: transparent; border-color: #E0CFB4; color: var(--texto); }
.btn--contorno:hover { background: var(--branco); border-color: var(--vermelho); color: var(--vermelho); }

/* Contorno vermelho, para o "Ver todos os produtos" ao lado do titulo. */
.btn--contorno-vermelho { background: transparent; border-color: rgba(198, 0, 25, .35); color: var(--vermelho); }
.btn--contorno-vermelho:hover { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }

.btn--claro { background: #fff; border-color: #fff; color: var(--vermelho); }
.btn--claro:hover { background: var(--fundo); border-color: var(--fundo); color: var(--vermelho-escuro); }

.btn--escuro { background: var(--preto); border-color: var(--preto); color: #fff; }
.btn--escuro:hover { background: #322A20; border-color: #322A20; color: #fff; }

.bloco-vermelho .btn--contorno { border-color: rgba(255, 255, 255, .55); color: #fff; }
.bloco-vermelho .btn--contorno:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }

.btn--pequeno { padding: .68rem 1.25rem; font-size: .84rem; }
.btn--bloco { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

.grupo-botoes { display: flex; flex-wrap: wrap; gap: .75rem; }

.icone { width: 1.1em; height: 1.1em; flex: none; fill: currentColor; }

.link-seta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  font-size: .84rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--vermelho);
  text-decoration: none;
  border-bottom: 2px solid var(--amarelo);
  padding-bottom: .25rem;
  transition: gap var(--transicao), border-color var(--transicao);
}
.link-seta:hover { gap: .85rem; border-color: var(--vermelho); }

/* 06. Cabecalho =========================================================== */

/*
 * O cabecalho e o creme da pagina, nao branco.
 *
 * Antes era branco com blur: contra o creme do corpo ele aparecia como uma
 * faixa mais clara atravessada na tela, dividindo a pagina em duas. Sendo a
 * mesma cor do fundo, ele so se destaca quando ha conteudo rolando por baixo,
 * e a sombra entra so nessa hora (ver [data-rolou]).
 */
.cabecalho {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--fundo);
  transition: box-shadow var(--transicao);
}
.cabecalho[data-rolou='sim'] { box-shadow: 0 6px 22px rgba(32, 23, 18, .09); }

.cabecalho__barra { display: flex; align-items: center; gap: 1.25rem; min-height: var(--altura-barra); }

/*
 * O LOGOTIPO, maior desde 26/08/2026.
 *
 * Estava com 156 px de largura, o que da 35 px de altura na arte 400x89: numa
 * barra de 74 px ele ocupava menos da metade e ficava com cara de marca
 * d'agua. Ele e a unica peca da pagina que carrega a fonte comic e o
 * empilhamento de cor da embalagem, entao encolhe-lo e jogar fora a parte da
 * identidade que o cliente reconhece de longe.
 *
 * A barra cresceu junto (ver --altura-barra): so aumentar a arte dentro dos
 * 74 px deixaria 13 px de folga em cima e embaixo, e um logotipo colado nas
 * duas bordas parece que nao coube, nao que e grande.
 *
 * O TETO E O ESPACO HORIZONTAL, nao o vertical, e por isso a largura e um
 * clamp e nao um numero fixo.
 *
 * A FAIXA APERTADA E DE 861 A 1000 px: ali o menu de cinco itens ainda esta
 * aberto (ele so vira menu suspenso em 860) e divide a barra com o botao de
 * orcamento. Medido com a pagina no ar, num iframe da largura exata: em 870 px
 * o logotipo de 208 empurrava 33 px para fora da janela, e o de 176 ainda
 * empurrava 1. Fixo em 208 o site ganhava barra de rolagem horizontal em
 * qualquer notebook com a janela nao maximizada.
 *
 * Com `clamp`, o piso de 170 px atende a faixa apertada, o `14.5vw` faz a
 * subida e o teto de 208 e o tamanho cheio, que entra por volta de 1435 px.
 * Num 1366 comum da 198. Em todos eles o transbordo medido e zero.
 */
.cabecalho__logo { flex: none; display: flex; }
.cabecalho__logo img { width: clamp(170px, 14.5vw, 208px); }

.cabecalho__nav { margin-left: auto; display: flex; align-items: center; gap: clamp(.75rem, 2.1vw, 2rem); }

/*
 * Menu em caixa MISTA, peso 600.
 *
 * Era caixa alta com espacamento largo, o que num menu de cinco itens ocupava
 * a largura toda e obrigava a fonte a encolher para .8rem. Em caixa mista os
 * mesmos cinco itens cabem folgados a .96rem, que e o tamanho do desenho e o
 * que da para ler de longe.
 */
.cabecalho__link {
  position: relative;
  font-size: .96rem;
  font-weight: 600;
  letter-spacing: -.008em;
  color: var(--texto);
  text-decoration: none;
  padding-block: .55rem;
  white-space: nowrap;
  transition: color var(--transicao);
}
.cabecalho__link:hover { color: var(--vermelho); }
.cabecalho__link[aria-current='page'] { color: var(--vermelho); font-weight: 700; }
.cabecalho__link[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
  opacity: .5;
}

.cabecalho__acoes { display: flex; align-items: center; gap: .7rem; flex: none; }

.botao-orcamento { position: relative; }
.botao-orcamento__contador {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 21px;
  height: 21px;
  padding-inline: 5px;
  border-radius: 999px;
  background: var(--amarelo);
  color: var(--preto);
  border: 2px solid #fff;
  font-size: .7rem;
  font-weight: 700;
  display: none;
  align-items: center;
  justify-content: center;
}
.botao-orcamento__contador[data-visivel='sim'] { display: flex; }

.abrir-menu {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  background: transparent;
  border: var(--borda-forte);
  border-radius: 8px;
  cursor: pointer;
}
.abrir-menu span { display: block; height: 2px; background: var(--preto); border-radius: 2px; transition: transform var(--transicao), opacity var(--transicao); }
.abrir-menu[aria-expanded='true'] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.abrir-menu[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.abrir-menu[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 07. Home ================================================================ */

/*
 * A ABERTURA CABE NA PRIMEIRA DOBRA, EM QUALQUER LARGURA.
 *
 * Mede o que sobra da tela abaixo do cabeçalho e centraliza o conteúdo ali
 * dentro. Antes só o desktop fazia isso; do tablet para baixo a abertura ia a
 * 1.230 px numa tela de 1.024 e o pacote de biscoito nascia cortado.
 *
 * `svh`, não `vh`: no celular a barra de endereço encolhe e cresce conforme a
 * rolagem. `vh` mede a tela GRANDE, a de barra recolhida, então a abertura
 * nasceria mais alta do que a tela realmente mostra no primeiro quadro, que é
 * justamente o quadro que precisa caber. `svh` é a menor das duas alturas.
 */
/*
 * A ABERTURA DEIXOU DE SER "UMA TELA CHEIA".
 *
 * Ate 25/08/2026 ela media `100svh - cabecalho` e centralizava o conteudo ali
 * dentro. A intencao era boa (caber na primeira dobra), mas o efeito num
 * monitor de 1440x900 era o contrario do pretendido: o conteudo ocupava uns
 * 480 px e os outros 300 viravam creme vazio em cima e embaixo. Era a maior
 * fonte da queixa de "site vazio".
 *
 * Agora a altura sai do conteudo, com um piso generoso. Em tela alta sobra
 * menos vao; em tela baixa a abertura encolhe sozinha em vez de empurrar tudo
 * para fora da dobra. A vitrine continua limitada pela altura disponivel, que
 * era o problema real que a conta anterior resolvia.
 */
.hero {
  /* Recuo de cima e de baixo da abertura. Entra duas vezes na conta do teto da
     vitrine (ver .hero__pack img), entao cada pixel aqui custa dois de arte.
     Era clamp(1.5rem, 3.4vw, 3rem), 48 px numa janela de 1440: 96 px que saiam
     da imagem. */
  --respiro-hero: clamp(1.15rem, 2.2vw, 2rem);

  position: relative;
  /* A ABERTURA OCUPA A PRIMEIRA DOBRA INTEIRA.
     Era `min(92svh - topo, 720px)`: numa janela de 1440x900 dava 720 px e o
     cabecalho comia 100, entao sobravam 80 px de outra secao aparecendo por
     baixo. O teto de 720 tambem fazia a abertura parar de crescer em qualquer
     tela alta. Agora a conta e exata: o que a janela tem, menos o topo.
     Continua `svh` (a altura pequena, com as barras do celular abertas), senao
     no celular a dobra prometida some quando o navegador recolhe a barra. */
  min-height: calc(100svh - var(--altura-topo));
  display: flex;
  align-items: center;
  padding-block: var(--respiro-hero);
  /* O recuo de baixo carrega, alem do respiro, o pedaco que a barra de numeros
     vai ocupar quando subir. Sem isso a barra passa por cima do conteudo da
     abertura assim que ele chega perto do pe da secao, que e o que acontece em
     tela baixa. Ver --montagem-numeros. */
  padding-bottom: calc(var(--respiro-hero) + var(--montagem-numeros));
  /* Sem `overflow: hidden`: o selo redondo pousa um pouco fora da coluna, de
     proposito, e cortado ao meio ele parece defeito. Quem impede a barra de
     rolagem horizontal e o `overflow-x: hidden` do body. */

  /* Calor vindo da direita, atras da vitrine: e o que tira o creme da
     impressao de "fundo de formulario" sem custar imagem nenhuma. */
  background:
    radial-gradient(58% 78% at 82% 42%, rgba(255, 214, 138, .40) 0%, rgba(255, 214, 138, 0) 62%),
    radial-gradient(46% 60% at 8% 100%, rgba(255, 183, 14, .14) 0%, rgba(255, 183, 14, 0) 70%),
    var(--fundo);
}

/* A COLUNA DA VITRINE E A MAIOR, a pedido do cliente em 26/08/2026: a arte
   tinha de ganhar destaque e a coluna de texto encolher.

   O texto cai de 563 para 471 px numa janela de 1440, e os dois botoes da
   abertura, que sao um par no desenho, precisavam de ~550 px com o recuo
   cheio. Por isso o recuo interno deles diminuiu (ver `.hero .grupo-botoes`
   mais abaixo): com 1.1rem os dois somam ~460 px e continuam lado a lado. Sem
   esse ajuste eles empilhavam, que foi o que aconteceu na primeira tentativa
   de estreitar esta coluna. */
.hero__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
  /* O vao entre as colunas encolheu de novo em 26/08/2026 (era clamp(.75rem,
     1.4vw, 1.25rem), 20 px numa janela de 1440). Cada pixel dele vira largura
     de arte, e a separacao visual nao depende dele: o pacote mais a esquerda
     comeca a 6,2% da largura da arte, entao a propria composicao ja traz uma
     faixa vazia que afasta o pacote do texto. */
  gap: clamp(.4rem, .8vw, .75rem);
  align-items: center;
  width: 100%;
}

.hero h1 { margin-bottom: 1.25rem; font-size: clamp(2.05rem, 4.5vw, 3.55rem); }

/* Pilula "Desde 1999". Uma so, discreta: o desenho troca as tres etiquetas
   antigas por esta, e os numeros que elas repetiam passaram para a barra
   vermelha logo abaixo, onde eles cabem melhor. */
.hero__marca-tempo {
  display: inline-block;
  margin: 0 0 1.4rem;
  background: rgba(255, 255, 255, .75);
  border: 1px solid #E8D7B8;
  border-radius: var(--pilula);
  padding: .42rem 1.15rem;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

.hero__texto { max-width: 44ch; color: var(--texto-fraco); margin-bottom: 2rem; font-size: 1.06rem; }

/*
 * A VITRINE AVANCA SOBRE A MARGEM DA PAGINA.
 *
 * A arte e quase quadrada (1220x1203), entao a altura dela e refem da largura:
 * presa na sua coluna do container de 1220 px, ela nunca passava de 558 px de
 * largura e sobravam 170 px de vao em cima e embaixo numa abertura de 720 px.
 * Roubar largura da coluna de texto nao servia: os dois botoes da abertura
 * precisam de ~550 px para caber lado a lado, e eles sao um par no desenho.
 *
 * `--sangria` e a distancia entre a borda direita do CONTEUDO do container e a
 * borda direita da JANELA. Sao duas parcelas: a margem que sobra quando o
 * container atinge o maximo de 1220 px, e o recuo interno dele. Numa janela de
 * 1440 sao 110 + 48 = 158 px, ate aqui vazios.
 *
 * A vitrine cresce so para a direita: `justify-self: end` ancora a borda
 * direita e a margem negativa de mesmo tamanho a empurra para fora, entao a
 * borda ESQUERDA continua exatamente na coluna e nunca encosta no texto.
 *
 * `min(var(--largura), 100vw)` impede a conta de dar negativo em janela mais
 * estreita que o container: ali a sangria e so o recuo interno.
 *
 * Ate 26/08/2026 isto era `--avanco`, que parava em 6rem e ainda descontava uma
 * folga para o selo. O selo saiu de cima da borda (ver .hero__selo) e o teto
 * saiu junto: a arte vai ate o fim da janela, como no desenho do cliente.
 *
 * ----------------------------------------------------------------------
 * E AVANCA UM POUCO SOBRE A COLUNA DE TEXTO (`--avanco`).
 *
 * A largura que a arte pode ter e, no fim das contas, uma conta so:
 *
 *     arte = janela - (onde o bloco de texto termina)
 *
 * A sangria ja tomou toda a margem da direita, entao para a arte crescer mais
 * so restam duas fontes: estreitar o texto (feito, ver o piso da coluna mais
 * abaixo) ou passar por cima dele. O `--avanco` e a segunda.
 *
 * PASSAR POR CIMA E SEGURO AQUI, e nao seria em qualquer arte. O perfil
 * esquerdo desta composicao, medido no proprio arquivo (vitrine-261027.png):
 *
 *     altura 0 a 65%    o pacote mais a esquerda, de 4,4% (no topo) a 7,8%
 *     altura 65 a 70%   3,6%
 *     altura 70 a 85%   a ponta da tabua, a 0,1%
 *     altura 85 a 95%   os biscoitos soltos, de 3,7% a 7%
 *     altura 95 a 100%  22,7%
 *
 * Ou seja: o que avanca sobre o texto e a PONTA DA TABUA, uma cunha fina de
 * madeira no pe da composicao, e ela cruza a altura dos dois botoes. Pacote
 * nenhum chega no texto. Com as fotos reais de 27/10/2026 o Caseiro ficou mais
 * largo que a maquete e o perfil passou de 6,2% para 4,4%: a folga entre o fim
 * do titulo e o pacote, que era de uns 25 px, ficou em uns 14 px a 900 e 17 a
 * 1024, as larguras mais apertadas, conferido em captura. Trocada a arte, esta
 * conta precisa ser refeita.
 *
 * O valor sai de `vw` e nao de `px` porque em janela estreita a coluna de texto
 * ja e apertada e nao tem de onde ceder: a 1280 o avanco vale 38 px, a 900 vale
 * 27 e abaixo de 760 a abertura empilha e ele nao existe.
 */
/*
 * E PARA ANTES DE ENCOSTAR NA BORDA (`--recuo`).
 *
 * A sangria leva a arte ate o fim da janela, e encostada ali a tabua parecia
 * atropelada pela borda em vez de sangrada de proposito. O recuo devolve uma
 * faixa fina de creme na direita: 35 px numa janela de 1440, o bastante para a
 * composicao respirar sem perder o efeito de continuar para fora da tela.
 *
 * Ele sai da DIREITA, nunca da esquerda: a borda esquerda da arte e a que
 * chega perto do texto, e mexer nela e que abriria colisao. Por isso o mesmo
 * valor entra na largura e na margem, e o resultado e a arte inteira deslizando
 * para o centro, com o lado do texto parado onde estava.
 */
.hero__pack {
  --sangria: calc((90vw - min(var(--largura), 100vw)) / 2 + clamp(1.15rem, 4.5vw, 3rem));
  --avanco: clamp(0px, 3vw, 48px);
  --recuo: clamp(.75rem, 2.4vw, 2.25rem);
  position: relative;
  justify-self: end;
  align-self: end;
  width: calc(100% + var(--sangria) + var(--avanco) - var(--recuo));
  margin-right: calc(var(--recuo) - var(--sangria));
}
.hero__pack img {
  width: 100%;
  height: auto;
  /* O TETO E EXATAMENTE A ALTURA UTIL DA ABERTURA.
     A abertura promete ocupar a primeira dobra (`min-height: 100svh - topo`),
     mas `min-height` e piso, nao teto: imagem mais alta que isso empurra a
     secao para fora da dobra e desfaz a promessa. A conta aqui e a mesma, menos
     o recuo de cima e de baixo, entao a vitrine cresce ate encostar nesse
     limite e para. A 1440x900: 900 - 87 - 96 = 717 px.

     `right`, e nao `center`: com a sangria a caixa da imagem chega ate a borda
     da janela, mas quando a ALTURA e quem limita sobra folga na horizontal, e
     `contain` centralizaria a arte deixando vao dos dois lados. Ancorada a
     direita, a folga toda vai para o lado do texto e a arte encosta na borda,
     que e o que o desenho pede.

     `bottom` na vertical: alinhado pelo pe, o que sobra de altura fica sempre
     em cima, junto com o selo.

     A FAIXA VAZIA DO ARQUIVO ENCOLHEU em 26/08/2026, de 18,8% da altura para
     4,5% (ver ferramentas/enquadrar-vitrine.py). Ela existia para o selo pousar
     sem encostar no pacote, mas 18,8% era folga de sobra: numa janela de
     1440x900 eram 193 px de creme entre o cabecalho e o primeiro pacote, e a
     abertura parecia vazia por causa do ARQUIVO, nao do CSS. O navegador
     reserva a caixa inteira, arte e vazio, e desenha a composicao la no pe.
     O selo perdeu o colchao e ganhou outro: o canto de cima a direita da
     propria arte, que esta livre por 72% da altura (ver .hero__selo). */
  max-height: calc(100svh - var(--altura-topo) - 2 * var(--respiro-hero) - var(--montagem-numeros));
  object-fit: contain;
  object-position: right bottom;
  filter: drop-shadow(0 26px 34px rgba(32, 23, 18, .20));
}

/*
 * O SELO REDONDO, com o texto correndo na borda.
 *
 * O texto curvo e um <textPath> num SVG: nao ha jeito em CSS puro de correr
 * texto por uma circunferencia, e imagem nao serve porque a frase e editavel
 * pelo painel.
 */
.selo-redondo {
  position: absolute;
  z-index: 3;
  width: clamp(96px, 11vw, 138px);
  aspect-ratio: 1;
  color: var(--vermelho);
}
.selo-redondo svg { width: 100%; height: 100%; display: block; }

/*
 * O ANEL DE TEXTO GIRA SOZINHO, sem parar.
 *
 * Ate 27/08/2026 o angulo saia da rolagem da pagina (uma volta a cada 1500 px)
 * e quem movia era o site.js. O cliente achou que nao ficou bom: preso a
 * rolagem o carimbo so mexe enquanto a pessoa rola, entao ele passa a maior
 * parte do tempo parado, e num monitor alto a abertura inteira cabe na tela e
 * ele nunca chega a girar. Agora e movimento continuo.
 *
 * VIROU CSS E SAIU DO JAVASCRIPT. Sem depender da rolagem nao ha o que
 * calcular por quadro: o navegador anima isto na camada de composicao, sem
 * passar pelo JavaScript, e o site.js perdeu um ouvinte de scroll. Um enfeite
 * que gira sozinho nao tem por que custar trabalho a cada rolagem da pagina.
 *
 * `transform-box: view-box` NAO E OPCIONAL. Em SVG, sem ele o `transform-origin`
 * se mede pela caixa de desenho do proprio <g>, que aqui e o retangulo do
 * texto curvo e nao o circulo: o anel giraria em volta de um ponto fora do
 * centro e sairia passeando pela tela. Com `view-box` a origem passa a ser
 * medida no sistema de coordenadas do SVG (0 0 100 100), e 50% e o centro do
 * carimbo, que e onde o coracao esta.
 *
 * 22 SEGUNDOS POR VOLTA. E devagar de proposito: o carimbo divide a tela com o
 * titulo e com a vitrine, e um giro rapido puxa o olho para o canto errado da
 * abertura. Nesse ritmo o movimento se percebe sem competir com a leitura.
 *
 * Quem pediu menos movimento no sistema nao ve nada disso: a regra universal do
 * bloco `prefers-reduced-motion`, no fim deste arquivo, zera a duracao e a
 * repeticao de toda animacao, e o selo fica na posicao em que esta escrito no
 * HTML, que e a de leitura.
 */
[data-selo-giro] {
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: selo-girando 22s linear infinite;
}

@keyframes selo-girando {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.selo-redondo__fundo { fill: #FCEAC4; stroke: rgba(198, 0, 25, .3); stroke-width: 1; stroke-dasharray: 4 4; }
.selo-redondo__texto { fill: currentColor; font-family: var(--corpo); font-weight: 700; font-size: 9.4px; letter-spacing: .16em; text-transform: uppercase; }
.selo-redondo__miolo { fill: currentColor; }

/*
 * O SELO DA ABERTURA.
 *
 * ENTROU PARA DENTRO DA JANELA em 26/08/2026. Ele pousava um pouco para fora
 * da coluna (`right` negativo), o que funcionava enquanto a vitrine parava
 * antes da margem da pagina. Com a sangria a coluna vai ate a borda da janela,
 * e o `overflow-x: hidden` do body cortaria metade do carimbo.
 *
 * NAO TEM MAIS LARGURA PROPRIA, a pedido do cliente em 27/08/2026: ele quis
 * este selo do mesmo tamanho do que fecha a pagina, no bloco de distribuidor.
 * Entao os dois usam a largura de `.selo-redondo` e nao ha o que sincronizar.
 *
 * O QUE SE PERDEU NA TROCA, para quem for mexer aqui depois. A largura antiga
 * era `clamp(54px, 9.5%, 96px)`, uma porcentagem da ARTE e nao da janela,
 * calibrada no canto de cima a direita do arquivo da vitrine: medido, os 10%
 * da direita estao transparentes por 72% da altura, que e a tabua vazia ao
 * lado do ultimo pacote. Naquele tamanho o selo pousava sobre nada.
 *
 * No tamanho cheio ele encosta no topo do ultimo pacote: conferido em captura
 * a 1440, 1200, 1000 e 820 px, o carimbo cobre um pedaco do alto da embalagem
 * e o texto continua legivel. E uma sobreposicao de proposito, nao um
 * descuido; se um dia parecer atrapalhar, o caminho de volta e devolver a
 * largura em porcentagem aqui, e nao mexer em `.selo-redondo`, que vale para
 * os dois selos.
 *
 * ATRAPALHOU, e foi pela posicao, nao pelo tamanho (27/10/2026). Com as fotos
 * reais das embalagens, o canto de cima do ultimo pacote deixou de ser faixa
 * vermelha e passou a ter a LUPA da rotulagem ("Alto em gordura saturada /
 * sodio"), e o carimbo cobria o "ALTO EM" a 1440 e encostava nela a 1366.
 * Esconder a advertencia nutricional na vitrine de uma fabrica de alimentos e
 * pior do que um carimbo um pouco mais para o lado.
 *
 * Subir resolveria, mas a 1366x768 o selo chegaria ao botao "Montar Orcamento"
 * do cabecalho. Entao ele DESLIZA PARA A DIREITA, sobre a faixa creme do
 * `--recuo` (a folga entre a arte e a borda da janela, definida em
 * .hero__pack), e sobe so um rem. A lupa fica no quadrante de baixo a esquerda
 * do circulo, que e o que mais se afasta dela com esse movimento. Conferido
 * em captura a 1920, 1440, 1366, 1280 e 1024: a lupa fica inteira a mostra e
 * o carimbo cobre so a quina da solda do pacote. A 900 e por pouco, mas sem
 * encostar. Abaixo de 760 vale a regra do celular, la embaixo. Ancorado no
 * proprio `--recuo`, a borda do selo para sempre a meio rem da janela, sem
 * chegar no `overflow-x: hidden` do body em nenhuma largura.
 */
.hero__selo {
  top: -1rem;
  right: calc(.5rem - var(--recuo));
}

/* ------------------------------------------------------------------ *
 * A BARRA DE NUMEROS
 *
 * Era uma secao vermelha de largura inteira, colada na abertura. Virou uma
 * barra arredondada que MONTA sobre a divisa das duas secoes: e o que amarra
 * a abertura ao resto da pagina em vez de empilhar dois retangulos.
 *
 * A margem negativa e a razao de o bloco existir dentro de um .container.
 * ------------------------------------------------------------------ */
.faixa-numeros {
  position: relative;
  z-index: 2;
  background: var(--vermelho);
  border-radius: var(--raio-g);
  padding: clamp(1.2rem, 2.4vw, 1.75rem) clamp(1rem, 2.5vw, 2.25rem);
  box-shadow: 0 18px 40px rgba(198, 0, 25, .22);
}

/* So na home: a barra sobe e encosta na abertura, costurando as duas secoes.
   Na pagina da fabrica ela e uma secao como outra qualquer e nao sobe.
   A margem de baixo era `-1 * --respiro` e comia o respiro inteiro da secao
   seguinte: o rotulo "SOBRE A EMPRESA" nascia colado na barra. */
.faixa-numeros--montada { margin-top: calc(-1 * var(--montagem-numeros)); }

.dados {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(.5rem, 1.6vw, 1.5rem);
}

/* Divisa fina entre as celulas, menos antes da primeira. */
.dado {
  display: flex;
  align-items: center;
  gap: clamp(.5rem, 1.1vw, .9rem);
  padding-left: clamp(.5rem, 1.6vw, 1.5rem);
  border-left: 1px solid rgba(255, 255, 255, .22);
}
.dado:first-child { border-left: 0; padding-left: 0; }

.dado__icone { width: clamp(26px, 2.5vw, 34px); height: auto; flex: none; color: var(--amarelo); }
.dado__icone svg { width: 100%; height: auto; display: block; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.dado__valor {
  display: block;
  font-family: var(--corpo);
  font-weight: 800;
  font-size: clamp(1.3rem, 2.4vw, 1.95rem);
  line-height: 1;
  letter-spacing: -.03em;
  color: #fff;
  /* Digitos de largura igual: o numero sobe de zero ate o valor final (ver
     data-contar no site.js) e, com a largura natural de cada algarismo, o "1"
     e estreito e o "0" e largo, entao o texto balancava a cada quadro. O que
     nao se mexe e o bloco todo: quem manda na largura da celula e o rotulo,
     que e mais comprido que qualquer um dos numeros. */
  font-variant-numeric: tabular-nums;
}
.dado__rotulo {
  display: block;
  margin-top: .3rem;
  font-size: clamp(.6rem, .78vw, .7rem);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
  line-height: 1.25;
}

/* Sumario das linhas de produto. */
.linhas { display: grid; gap: .75rem; }

.linha {
  position: relative;
  display: grid;
  /* numero | miniatura | texto | quantidade */
  grid-template-columns: auto 58px minmax(0, 1fr) auto;
  gap: 1.25rem;
  align-items: center;
  background: var(--branco);
  border: var(--borda);
  border-radius: var(--raio-g);
  padding: 1rem 1.4rem;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}
.linha:hover { border-color: #D6C9B2; box-shadow: var(--sombra); transform: translateY(-2px); color: inherit; }

.linha__numero {
  font-family: var(--corpo);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .06em;
  color: var(--vermelho);
  width: 1.75rem;
  flex: none;
}

.linha__nome {
  display: block;
  font-family: var(--corpo);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.9vw, 1.3rem);
  line-height: 1.25;
  letter-spacing: -.01em;
}
.linha:hover .linha__nome { color: var(--vermelho); }

.linha__desc {
  display: block;
  margin-top: .2rem;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--texto-fraco);
  max-width: 56ch;
}

.linha__fim {
  display: flex;
  align-items: center;
  gap: .9rem;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-fraco);
  white-space: nowrap;
}
.linha__seta { color: var(--vermelho); transition: transform var(--transicao); }
.linha:hover .linha__seta { transform: translateX(4px); }

.linha__foto { width: 58px; flex: none; }
.linha__foto img { width: 100%; aspect-ratio: 3 / 4; object-fit: contain; }

/* ------------------------------------------------------------------ *
 * Tres qualidades com icone redondo (bloco "a empresa" e bloco B2B).
 * ------------------------------------------------------------------ */
.qualidades {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  margin: clamp(1.75rem, 3vw, 2.5rem) 0;
  padding: 0;
  list-style: none;
}
.qualidade { display: flex; flex-direction: column; gap: .75rem; }
.qualidade__icone {
  width: 58px;
  height: 58px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid rgba(198, 0, 25, .3);
  color: var(--vermelho);
}
.qualidade__icone svg { width: 27px; height: 27px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.qualidade__texto { font-size: .92rem; font-weight: 600; line-height: 1.35; color: var(--texto); max-width: 15ch; }

/* Em faixa colorida o circulo fica no amarelo e deita numa linha so. */
.bloco-vermelho .qualidades { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 0; }
.bloco-vermelho .qualidade { flex-direction: row; align-items: center; gap: 1rem; }
.bloco-vermelho .qualidade__icone { border: 0; width: 40px; height: 40px; color: var(--amarelo); }
.bloco-vermelho .qualidade__icone svg { width: 32px; height: 32px; }
.bloco-vermelho .qualidade__texto { color: #fff; max-width: 18ch; }

/* ------------------------------------------------------------------ *
 * O BLOCO "SOBRE A EMPRESA"
 *
 * Tres ajustes de 26/08/2026, todos para fechar o vao branco que sobrava
 * embaixo do video: media a 1440 px, a coluna de texto tinha 730 px de altura
 * contra 370 do video, ou seja, 360 px de nada.
 *
 * 1. Os tres selos sairam da coluna de texto para a largura inteira (no HTML),
 *    o que tirou ~190 px de la e ainda deu ar aos icones.
 * 2. A coluna do video ficou maior que a do texto. E o contrario do resto do
 *    site, e de proposito: o que sobra de altura aqui e do lado do video.
 * 3. O cartao passou de 16/10 para 3/2, que rende ~50 px a mais de altura na
 *    mesma largura. Nao fui alem disso porque o quadro corta o video pelas
 *    laterais (`object-fit: cover`) e a arte e uma tomada aerea de drone: em
 *    16/9 original, 3/2 ja descarta 16% da largura, e a marca d'agua do canto
 *    fica no limite.
 * ------------------------------------------------------------------ */
/* Fila de largura inteira: os tres cabem lado a lado com folga, entao o item
   deita (icone ao lado do texto) como no bloco vermelho, em vez de empilhar. */
.empresa .qualidades { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 0; }
.empresa .qualidade { flex-direction: row; align-items: center; gap: 1rem; }
.empresa .qualidade__texto { max-width: 20ch; }

/* So a partir de 901 px. Abaixo disso o bloco fica exatamente como sempre foi:
   as colunas iguais que o `.duas-colunas` monta sozinho e o quadro 16/10. Nao
   ha o que corrigir la, porque o vao branco era um problema de tela larga, e
   estreitar ainda mais a coluna de texto num tablet so pioraria a leitura.

   AS DUAS CLASSES JUNTAS, e nao so `.empresa__grade`, de proposito:
   `.duas-colunas` mora ~700 linhas abaixo daqui, na secao de utilitarios, e com
   um seletor de uma classe so as duas empatam em especificidade (0,1,0). Quem
   decidiria seria a ordem no arquivo, e a de baixo ganha: medido, a coluna do
   video continuava com 534 px em vez dos 578 esperados. Com as duas classes
   (0,2,0) a ordem deixa de importar. */
@media (min-width: 901px) {
  .duas-colunas.empresa__grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr); }
  .empresa__grade .video-cartao { aspect-ratio: 3 / 2; }

  /* O corte sai da ESQUERDA, nao dos dois lados.
     O arquivo e 16/9 e o quadro e 3/2, entao `cover` descarta 15,6% da largura.
     Centralizado, some a marca d'agua "Biscoitos Andriolli" do canto inferior
     direito, que fica entre 82% e 97% da largura: pela metade ela parece
     imagem mal cortada. Puxando o enquadramento para a direita, o que sai e a
     faixa da esquerda (estacionamento e rua) e a placa da fabrica, em 36% da
     largura, continua na tela. */
  .empresa__grade .video-cartao video,
  .empresa__grade .video-cartao img { object-position: right bottom; }
}

/* ------------------------------------------------------------------ *
 * O video da fabrica, em cartao arredondado com botao de play por cima.
 *
 * O <video> so recebe `controls` depois do primeiro clique (ver site.js):
 * assim a capa fica limpa, com o botao redondo do desenho, e quem realmente
 * for assistir ganha a barra completa do navegador.
 * ------------------------------------------------------------------ */
.video-cartao {
  position: relative;
  border-radius: var(--raio-gg);
  overflow: hidden;
  box-shadow: var(--sombra-alta);
  background: var(--preto);
  aspect-ratio: 16 / 10;
}
.video-cartao video,
.video-cartao img { width: 100%; height: 100%; object-fit: cover; display: block; }

.video-cartao__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: clamp(62px, 7vw, 86px);
  height: clamp(62px, 7vw, 86px);
  border: 0;
  border-radius: 50%;
  background: var(--vermelho);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  transition: transform var(--transicao), background-color var(--transicao);
}
.video-cartao__play:hover { transform: scale(1.07); background: var(--vermelho-vivo); }
.video-cartao__play svg { width: 34%; height: 34%; fill: currentColor; margin-left: 8%; }
.video-cartao[data-tocando='sim'] .video-cartao__play { display: none; }

/* ------------------------------------------------------------------ *
 * CARROSSEL DE PRODUTOS
 *
 * E uma faixa com rolagem horizontal nativa e encaixe (scroll-snap), nao um
 * carrossel de JavaScript. O JS so move a faixa quando alguem clica nas setas.
 *
 * Isso importa: no celular a pessoa arrasta com o dedo, que e o gesto que ela
 * ja espera, e o teclado percorre os cartoes na ordem sem nenhum tratamento
 * especial. Sem JavaScript continua tudo funcionando; so as setas somem.
 * ------------------------------------------------------------------ */
.carrossel { position: relative; }

/*
 * A LARGURA DA COLUNA E FIXA, sem minmax.
 *
 * Com `minmax(0, X)` o grid pode encolher a coluna ate 0, e foi o que ele fez:
 * os oito destaques se espremiam nos 1124 px do container em vez de quatro
 * caberem e o resto ficar para a rolagem. Cada cartao saia com 120 px, a foto
 * do produto virava uma tarja e o nome quebrava em quatro linhas.
 *
 * Com um comprimento fixo, o trilho nao cede: o conteudo passa da largura do
 * container, e passar da largura e exatamente o que faz o carrossel rolar.
 */
.carrossel__faixa {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 210px;
  gap: clamp(.9rem, 1.6vw, 1.35rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Espaco para a sombra dos cartoes nao ser cortada pela rolagem. */
  padding: .5rem .25rem 1.5rem;
  margin: -.5rem -.25rem -1.5rem;
  scrollbar-width: none;
}
.carrossel__faixa::-webkit-scrollbar { display: none; }
.carrossel__faixa > * { scroll-snap-align: start; }

/*
 * QUATRO CARTOES INTEIROS na largura do container. O calculo desconta os tres
 * vaos entre eles, senao o ultimo nasce cortado pela borda.
 *
 * Eram cinco a partir de 900 px e SEIS a partir de 1180, a pedido do cliente em
 * 27/08/2026: com seis, cada cartao ficava com 169 px num container de 1124 e a
 * embalagem aparecia pequena demais para se reconhecer o produto, que e a
 * unica coisa que esta secao precisa fazer. Com quatro o cartao vai a 262 px, e
 * os oito destaques passam a ocupar duas telas de rolagem em vez de uma e um
 * terco, o que tambem da o que fazer para as setas.
 */
@media (min-width: 900px) { .carrossel__faixa { grid-auto-columns: calc((100% - 3 * 1.35rem) / 4); } }

/*
 * NO CELULAR A FAIXA ATRAVESSA A TELA INTEIRA.
 *
 * O DEFEITO QUE ISTO CONSERTA. Com os 210 px fixos, num aparelho de 390 px
 * cabiam 1,68 cartoes: aparecia um inteiro e o segundo era cortado no meio do
 * botao, com o rotulo partido em "+ Orçame". E o corte caia 14 px ANTES da
 * borda da tela, porque a faixa parava no recuo do container. Aquela sobra de
 * fundo depois do cartao cortado e o que fazia a secao parecer quebrada em vez
 * de rolavel: corte na borda da tela o olho le como "tem mais para o lado";
 * corte no meio do nada ele le como bug.
 *
 * O QUE MUDA. A faixa ganha margem negativa do tamanho do recuo lateral e
 * devolve o mesmo valor em padding. Resultado: a caixa que rola vai de ponta a
 * ponta da tela, mas o primeiro cartao continua alinhado com o titulo e com o
 * resto da pagina. O `scroll-padding` faz o encaixe respeitar esse alinhamento,
 * senao o cartao encostado no snap colava na borda da tela.
 *
 * A LARGURA. 40vw poe DOIS cartoes inteiros e uma fatia de ~25% do terceiro em
 * qualquer aparelho comum (34 px de fatia num 360, 40 num 390, 47 num 430). Dois
 * inteiros e tambem o que a pagina de catalogo mostra na mesma tela, entao as
 * duas telas passam a ter o mesmo tamanho de cartao.
 *
 * O piso de 142 px protege o botao "+ Orçamento": ele mede ~103 px e o miolo do
 * cartao desconta 24 de recuo, entao abaixo disso a pilula comecaria a espremer.
 * So entra em aparelho de 320 px ou menos, onde a fatia do terceiro some e ficam
 * os dois cartoes.
 */
@media (max-width: 620px) {
  .carrossel__faixa {
    --recuo-pagina: clamp(1.15rem, 4.5vw, 3rem);

    grid-auto-columns: max(142px, 40vw);
    gap: .6rem;
    padding-inline: var(--recuo-pagina);
    margin-inline: calc(-1 * var(--recuo-pagina));
    scroll-padding-inline-start: var(--recuo-pagina);
  }
}

.carrossel__seta {
  position: absolute;
  top: 42%;
  z-index: 4;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--vermelho);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(198, 0, 25, .3);
  transition: background-color var(--transicao), opacity var(--transicao), transform var(--transicao);
}
.carrossel__seta:hover { background: var(--vermelho-vivo); transform: scale(1.06); }
.carrossel__seta svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* Fora da faixa, nao em cima dela: encostadas no cartao, as setas escondiam a
   foto do primeiro e do ultimo produto justamente onde o olho chega. O recuo
   cabe dentro do respiro lateral do container. */
.carrossel__seta--antes { left: clamp(-2.4rem, -2.2vw, -1.1rem); }
.carrossel__seta--depois { right: clamp(-2.4rem, -2.2vw, -1.1rem); }
/* Ponta da faixa: a seta apaga em vez de sumir, para o bloco nao "pular". */
.carrossel__seta[disabled] { opacity: .28; cursor: default; transform: none; }

/* ------------------------------------------------------------------ *
 * AS LINHAS EM ABAS
 *
 * Lista de linhas a esquerda, painel da linha escolhida a direita. Sao
 * <button> de verdade num container com role="tablist": leitor de tela anuncia
 * "aba 2 de 6" e as setas do teclado andam entre elas.
 *
 * Sem JavaScript todos os paineis ficam visiveis, empilhados, cada um com o
 * seu titulo. Fica mais longo, e continua sendo a informacao inteira.
 * ------------------------------------------------------------------ */
.linhas-abas {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
}

.abas { display: flex; flex-direction: column; gap: .55rem; }

.aba {
  display: flex;
  align-items: center;
  gap: .85rem;
  width: 100%;
  text-align: left;
  background: var(--branco);
  border: 1px solid #EEE2CC;
  border-radius: var(--pilula);
  padding: .85rem 1.35rem;
  font-family: var(--corpo);
  font-size: 1rem;
  font-weight: 600;
  color: var(--texto-fraco);
  cursor: pointer;
  transition: background-color var(--transicao), color var(--transicao),
              border-color var(--transicao), box-shadow var(--transicao);
}
.aba:hover { border-color: var(--amarelo); color: var(--texto); }
.aba__icone { width: 24px; height: 24px; flex: none; color: var(--amarelo); }
.aba__icone svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.aba[aria-selected='true'] {
  background: var(--vermelho);
  border-color: var(--vermelho);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 8px 22px rgba(198, 0, 25, .25);
}
.aba[aria-selected='true'] .aba__icone { color: var(--amarelo); }

.painel-linha {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
  background: var(--branco);
  border-radius: var(--raio-gg);
  padding: clamp(1.25rem, 2.5vw, 2rem);
  box-shadow: var(--sombra-cartao);
}

/*
 * A CAIXA DA FOTO E BRANCA, e nao creme.
 *
 * E a regra visual do projeto que nao pode ser quebrada: as 31 fotos de
 * produto tem fundo BRANCO. Sobre o creme, a foto aparecia como um retangulo
 * branco recortado no meio do bloco, exatamente o efeito que o LEIA-ME avisa.
 * Branca, o fundo da foto encosta no fundo da caixa e some, que e o que faz o
 * pacote parecer solto.
 *
 * A moldura fica por conta da borda creme e do raio, nao da cor de dentro.
 */
.painel-linha__foto {
  border-radius: var(--raio-g);
  background: var(--branco);
  border: 1px solid #F0E4CD;
  padding: clamp(1rem, 2vw, 1.75rem);
}
.painel-linha__foto img { width: 100%; aspect-ratio: 3 / 4; object-fit: contain; }

.painel-linha h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 800; letter-spacing: -.022em; line-height: 1.1; margin-bottom: .5rem; }
.painel-linha__desc { color: var(--texto-fraco); font-size: 1rem; margin-bottom: 1.25rem; }

.marcas-linha { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: .6rem; }
.marcas-linha li { display: flex; align-items: center; gap: .65rem; font-size: .95rem; font-weight: 600; color: var(--texto); }
.marcas-linha svg { width: 18px; height: 18px; flex: none; color: var(--amarelo); stroke: currentColor; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------------ *
 * BLOCO "SEJA DISTRIBUIDOR"
 * ------------------------------------------------------------------ */
.b2b { position: relative; overflow: hidden; }
.b2b__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.b2b h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
.b2b__texto { max-width: 42ch; margin-bottom: 2rem; }
/* O selo desceu para o pe do expositor em 26/08/2026. Ele ficava no alto, a
   direita, onde antes so havia o toldo listrado que o CSS desenhava. O render
   novo tem o nome ANDRIOLLI escrito nesse toldo, e o selo passava por cima
   dele: um carimbo tapando a marca. Embaixo ele pousa na base do movel, que e
   area chapada, e continua sendo a primeira coisa a entrar no campo de visao
   junto com o botao amarelo. */
.b2b__selo { top: auto; bottom: clamp(-.5rem, 1.5vw, 1rem); right: clamp(-2rem, -1.5vw, -.5rem); color: var(--vermelho-escuro); }
.b2b__selo .selo-redondo__fundo { fill: #FBE3B8; stroke: rgba(152, 0, 15, .35); }

.b2b__vitrine { position: relative; }

/*
 * O EXPOSITOR E SO A IMAGEM.
 *
 * Ate 26/08/2026 a arte trazia apenas os pacotes soltos (montados por
 * ferramentas/montar-vitrine.py) e o movel era desenhado em CSS: fundo escuro,
 * toldo listrado no ::before e duas ripas vermelhas posicionadas por
 * porcentagem sobre a imagem. Fazia sentido enquanto nao havia foto de
 * expositor.
 *
 * Agora ha: o cliente mandou o render do expositor inteiro, com o toldo, o
 * movel e as tres prateleiras, em PNG com fundo transparente. Manter o CSS por
 * cima significava dois moveis no mesmo lugar, e as ripas, presas a 54,5% e a
 * 10px do fim, cruzavam o render em altura nenhuma das prateleiras dele.
 *
 * Sobrou uma regra: a sombra. Ela acompanha o recorte porque e `drop-shadow`
 * em filtro, e nao `box-shadow`, que desenharia um retangulo em volta de uma
 * imagem que nao e retangular. Sem ela o expositor fica colado no vermelho.
 */
.b2b__foto {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 24px 34px rgba(0, 0, 0, .34));
}

/* ------------------------------------------------------------------ *
 * ARCO ENTRE SECOES
 *
 * O desenho passa do creme para o vermelho com uma curva, nao com uma reta.
 * Feito com border-radius num pseudo-elemento largo: pesa nada e acompanha
 * qualquer largura. O `left: -10%; width: 120%` e o que mantem a curva suave
 * em tela larga; sem isso a barriga fica alta demais.
 * ------------------------------------------------------------------ */
.arco-topo { position: relative; }
.arco-topo::before {
  content: '';
  position: absolute;
  left: -10%;
  top: -1px;
  width: 120%;
  height: clamp(40px, 5vw, 80px);
  background: var(--fundo);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  pointer-events: none;
}
/* Quando a secao de cima e branca, a curva precisa ser branca tambem. */
.arco-topo--branco::before { background: var(--branco); }

/*
 * OS MASCOTES CORRENDO NA DIVISA
 *
 * Um GIF de 320x180, 11 quadros, 370 ms de volta. Eles correm PARADOS: medido
 * quadro a quadro, a caixa util anda uns 13 px no eixo x e volta, entao e
 * ciclo de corrida, nao travessia. Quem quiser faze-los atravessar a tela um
 * dia precisa animar a posicao aqui, no CSS; o arquivo sozinho nao sai do
 * lugar.
 *
 * MORAM NA SECAO CLARA DE CIMA, e nao na vermelha para onde correm. Duas
 * razoes:
 *
 *   1. `.b2b` tem `overflow: hidden`. Pendurados nela com `bottom: 100%` eles
 *      ficavam inteiramente fora da caixa e eram recortados: nao apareciam, e
 *      o HTML e o CSS estavam os dois certos. Foi assim na primeira tentativa.
 *   2. O vermelho chapado engole a menina, que veste vermelho. Vale aqui a
 *      mesma regra das fotos de produto: arte da marca pede fundo claro.
 *
 * ONDE ELES PISAM, e por que o `bottom` e negativo.
 *
 * O fim da secao clara NAO e a linha que se ve. A secao vermelha comeca ali,
 * mas os primeiros 40 a 80 px dela sao cobertos pelo arco creme do
 * `.arco-topo`, que e da cor do fundo. Entao a troca de cor visivel acontece
 * bem ABAIXO da divisa real, e quanto, depende da curva e da posicao
 * horizontal.
 *
 * Com `bottom: 0` eles ficavam boiando: medido em captura, 58 px de creme
 * entre o pe e o vermelho, o que parecia defeito e nao enfeite. O
 * `clamp(38px, 5vw, 72px)` negativo desce essa distancia e ainda planta o pe
 * uns poucos pixels DENTRO do vermelho. A sobreposicao e de proposito: a borda
 * do arco sobe uns 15 px ao longo da largura deles, entao nao ha um valor que
 * encoste exato nos dois pes. Pisar um pouco na linha absorve essa inclinacao;
 * uma folga, nao.
 *
 * Eles passam por cima da secao seguinte, e o `z-index: 2` e o que garante
 * isso: `.b2b` e `position: relative` com `z-index: auto`, ou seja, nao abre
 * contexto de empilhamento proprio, entao quem declara z-index ganha dela.
 *
 * A LARGURA E `vw` COM TETO, e o teto e o que importa: acima de ~220 px eles
 * passam a competir com o expositor da secao seguinte, que e a imagem que
 * precisa ser vista ali. Nesse teto o desenho fica com 106 px de altura
 * visivel (a arte ocupa 154 dos 180 px do arquivo; o resto e transparente).
 *
 * Somem abaixo de 620 px: naquela largura o vao entre as secoes encolhe, o
 * carimbo do distribuidor sobe e os tres se amontoam no mesmo canto. Enfeite
 * que atrapalha o conteudo sai da tela pequena.
 */
.secao--mascotes { position: relative; }

.mascotes-correndo {
  position: absolute;
  right: clamp(4%, 8vw, 14%);
  bottom: calc(-1 * clamp(38px, 5vw, 72px));
  width: clamp(150px, 16vw, 220px);
  height: auto;
  pointer-events: none;
  user-select: none;
  z-index: 2;
}

@media (max-width: 620px) {
  .mascotes-correndo { display: none; }
}

/* 08. Produtos: cartoes e grade =========================================== */

.grade-produtos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: clamp(.9rem, 1.8vw, 1.4rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
 * O CARTAO PERDEU A BORDA E GANHOU SOMBRA.
 *
 * Borda fina de 1 px sobre creme desenhava uma grade de retangulos, e com 31
 * deles na tela o catalogo parecia uma planilha. Com sombra suave e sem borda,
 * cada cartao flutua sobre o creme e a foto do produto, que e o que interessa,
 * passa a ser a coisa mais forte da celula.
 */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--branco);
  border: 0;
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-cartao);
  transition: box-shadow var(--transicao), transform var(--transicao);
}
.card:hover { box-shadow: var(--sombra-alta); transform: translateY(-4px); }

.card__foto { display: block; padding: 1.35rem 1.25rem .35rem; }
.card__foto img { width: 100%; aspect-ratio: 3 / 4; object-fit: contain; }

.card__corpo {
  padding: .35rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: .3rem;
}

.card__nome {
  font-family: var(--corpo);
  font-weight: 700;
  font-size: .97rem;
  line-height: 1.32;
  letter-spacing: -.012em;
  margin: 0;
}
.card__nome a { color: var(--texto); text-decoration: none; }
.card__nome a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.card:hover .card__nome { color: var(--vermelho); }

.card__meta { margin: 0; font-size: .85rem; color: var(--texto-fraco); }

/*
 * O "+ Orcamento" virou um botao redondo no canto.
 *
 * Era um botao de largura inteira embaixo do nome. Numa grade de 31 cartoes,
 * 31 retangulos vazados repetindo a mesma frase competiam com as fotos e
 * faziam a pagina parecer um formulario. O redondo diz a mesma coisa, ocupa um
 * canto e deixa a foto mandar.
 *
 * O rotulo continua existindo para leitor de tela (.so-leitor-tela dentro do
 * botao), entao ninguem fica sem saber o que o "+" faz.
 */
.card__acao {
  margin-top: auto;
  padding-top: .6rem;
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
}

/*
 * DE CIRCULO PARA PILULA, em 26/08/2026.
 *
 * O botao era um "+" de 38 px sem palavra nenhuma. Quem enxerga nao tinha como
 * saber que aquilo monta um pedido: no carrossel da home nao ha texto por perto
 * explicando, e o rotulo existia so dentro de `.so-leitor-tela`.
 *
 * A pilula cabe: o cartao mais estreito do site e o do carrossel, com 169 px, e
 * o miolo dele tem 129 px uteis. A pilula fica em ~103 px e continua encostada
 * na direita, sem empurrar nada. Nao e a volta do botao de largura inteira que
 * saiu no desenho de 25/08: aquele repetia a frase em 31 retangulos vazados e
 * fazia a grade parecer formulario. Este e pequeno e alinhado num canto.
 */
.btn-mais {
  height: 38px;
  flex: none;
  border-radius: var(--pilula);
  border: 1.5px solid rgba(198, 0, 25, .35);
  background: var(--branco);
  color: var(--vermelho);
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  cursor: pointer;
  font-family: var(--corpo);
  line-height: 1;
  padding: 0 .8rem 0 .65rem;
  transition: background-color var(--transicao), color var(--transicao),
              border-color var(--transicao), transform var(--transicao);
}
/* O sinal e o unico pedaco em corpo grande: e ele que o site.js troca por um
   visto ao adicionar. `translateY` acerta a base do "+" com a do texto, que a
   diferenca de tamanho desalinha. */
.btn-mais__sinal { font-size: 1.2rem; font-weight: 400; transform: translateY(-.06em); }
.btn-mais__rotulo { font-size: .76rem; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.btn-mais:hover { background: var(--vermelho); border-color: var(--vermelho); color: #fff; transform: scale(1.05); }
/* Confirmacao depois de adicionar (site.js troca o rotulo por um visto). */
.btn-mais[data-feito='sim'] { background: var(--amarelo); border-color: var(--amarelo); color: var(--preto); }

/* Selo: aqui o contorno preto da embalagem e bem-vindo, porque e um carimbo
   pequeno: a citacao aparece sem tomar a tela. */
/*
 * O selo encolheu e passou a caber numa linha so.
 *
 * Com o cartao do desenho novo (mais estreito, sem borda), "SEM CONSERVANTES"
 * em .62rem com espacamento de .07em quebrava em duas linhas e o carimbo
 * cobria um terco da foto. Sem caixa alta, sem espacamento extra e com recuo
 * menor, a mesma frase cabe deitada e volta a ser o que devia ser: uma
 * etiqueta no canto, nao um bloco em cima do produto.
 */
.card__selo {
  position: absolute;
  top: .7rem;
  left: .7rem;
  right: .7rem;
  z-index: 2;
  width: fit-content;
  max-width: calc(100% - 1.4rem);
  background: var(--amarelo);
  color: var(--preto);
  border: 1.5px solid var(--preto);
  border-radius: var(--pilula);
  font-size: .66rem;
  font-weight: 700;
  line-height: 1.25;
  padding: .16rem .55rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.etiqueta {
  display: inline-block;
  background: var(--amarelo);
  color: var(--preto);
  border: var(--borda-marca);
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: .26rem .75rem;
}

/* 09. Catalogo ============================================================ */

.barra-catalogo {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.35rem;
}

.filtros { display: flex; flex-wrap: wrap; gap: .45rem; }

/* Caixa mista, como as abas da home: em caixa alta os sete filtros ocupavam
   duas linhas inteiras e competiam com o titulo da pagina. */
.filtro {
  font-family: var(--corpo);
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: -.008em;
  padding: .6rem 1.15rem;
  background: var(--branco);
  border: 1px solid #EEE2CC;
  border-radius: var(--pilula);
  color: var(--texto-fraco);
  cursor: pointer;
  transition: background-color var(--transicao), color var(--transicao),
              border-color var(--transicao), box-shadow var(--transicao);
}
.filtro:hover { border-color: var(--amarelo); color: var(--texto); }
.filtro[aria-pressed='true'] {
  background: var(--vermelho);
  border-color: var(--vermelho);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(198, 0, 25, .22);
}

.busca { position: relative; flex: 0 1 300px; }
.busca input {
  width: 100%;
  padding: .78rem 2.6rem .78rem 1.15rem;
  border: 1px solid #EEE2CC;
  border-radius: var(--pilula);
  background: var(--branco);
  font: inherit;
  font-size: .94rem;
  color: var(--texto);
}
.busca input:focus { outline: none; border-color: var(--vermelho); }
.busca__icone { position: absolute; right: .9rem; top: 50%; transform: translateY(-50%); color: var(--texto-fraco); pointer-events: none; }

.contagem { font-size: .86rem; color: var(--texto-fraco); }
.contagem strong { color: var(--texto); }

.vazio {
  padding: clamp(1.75rem, 4vw, 3rem);
  background: var(--branco);
  border: 1.5px dashed #CFC3AC;
  border-radius: var(--raio-g);
  max-width: 54ch;
}

.migalhas { padding-block: 1.15rem; font-size: .82rem; color: var(--texto-fraco); }
.migalhas ol { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; }
.migalhas li:not(:last-child)::after { content: '/'; margin-left: .45rem; color: #C9BDA6; }
.migalhas a { color: var(--texto-fraco); text-decoration: none; }
.migalhas a:hover { color: var(--vermelho); }

/* 10. Ficha de produto ==================================================== */

.ficha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: start;
}

.ficha__foto {
  background: var(--branco);
  border: var(--borda);
  border-radius: var(--raio-g);
  padding: clamp(1.25rem, 3vw, 2.5rem);
  position: sticky;
  top: 96px;
}
.ficha__foto img { width: 100%; aspect-ratio: 3 / 4; object-fit: contain; }

.ficha__selos { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.15rem; }
.ficha h1 { font-size: clamp(1.85rem, 3.6vw, 2.7rem); margin-bottom: .3rem; }
.ficha__sabor {
  font-family: var(--corpo);
  font-weight: 700;
  font-size: .86rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vermelho);
  margin-bottom: 1.75rem;
}

.ficha__acoes { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 2.25rem; }

.tabela-ficha {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
  background: var(--branco);
  border: var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
}
.tabela-ficha th,
.tabela-ficha td { text-align: left; padding: .85rem 1.05rem; border-bottom: 1px solid #EFE8DA; vertical-align: top; }
.tabela-ficha tr:last-child th,
.tabela-ficha tr:last-child td { border-bottom: 0; }
/*
 * A coluna de rótulo era 46%. Encolheu para 34% em 24/08/2026, quando a
 * informação nutricional passou a ser uma linha comum da ficha: os rótulos são
 * todos curtos ("Peso líquido", "Sabor", "Alérgenos") e a metade que sobrava
 * fazia falta do outro lado, onde estão as listas de ingredientes e as dez
 * linhas de "nutriente: valor / valor (%VD)".
 */
.tabela-ficha th { font-weight: 400; color: var(--texto-fraco); width: 34%; }
.tabela-ficha td { font-weight: 700; }

/*
 * A célula da informação nutricional desfaz o negrito das células de valor: são
 * dez linhas de número, e em negrito o bloco inteiro fica pesado e sem
 * hierarquia nenhuma.
 *
 * Aqui NÃO entra `white-space: pre-line`: o texto passa por paragrafos(), que já
 * transforma cada quebra num <br>. Com pre-line o \n depois do <br> vira uma
 * segunda quebra e a tabela sai com o dobro do espaço entre as linhas.
 */
.tabela-ficha td.ficha__nutricional {
  font-weight: 400;
  font-size: .88rem;
  color: var(--texto-fraco);
  line-height: 1.5;
}
.tabela-ficha td.ficha__nutricional p { margin: 0 0 .7rem; }
.tabela-ficha td.ficha__nutricional p:last-child { margin-bottom: 0; }

.aviso {
  display: flex;
  gap: .85rem;
  background: #FFF8DC;
  border: 1px solid #E8D48A;
  border-left: 4px solid var(--amarelo);
  border-radius: var(--raio);
  padding: 1rem 1.25rem;
  font-size: .92rem;
  color: var(--texto);
  margin-top: 1.35rem;
}
.aviso strong { display: block; margin-bottom: .15rem; }

/* 11. Orcamento =========================================================== */

.orcamento {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
}

.lista-orcamento { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }

.item-orcamento {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 1.1rem;
  align-items: center;
  background: var(--branco);
  border: var(--borda);
  border-radius: var(--raio-g);
  padding: .9rem 1.1rem;
}
.item-orcamento img { width: 100%; aspect-ratio: 3 / 4; object-fit: contain; }
.item-orcamento__nome { font-weight: 700; font-size: .98rem; line-height: 1.3; margin: 0 0 .1rem; }
.item-orcamento__nome a { color: var(--texto); text-decoration: none; }
.item-orcamento__nome a:hover { color: var(--vermelho); }
.item-orcamento__meta { font-size: .82rem; color: var(--texto-fraco); }
.item-orcamento__controles { display: flex; flex-direction: column; align-items: flex-end; gap: .45rem; }

.contador { display: flex; align-items: center; border: var(--borda-forte); border-radius: 8px; overflow: hidden; background: var(--branco); }
.contador button {
  width: 36px; height: 36px;
  background: transparent;
  border: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--texto);
  cursor: pointer;
  line-height: 1;
  transition: background-color var(--transicao);
}
.contador button:hover { background: var(--fundo-2); }
.contador input {
  width: 46px; height: 36px;
  border: 0;
  border-inline: 1.5px solid #CFC3AC;
  text-align: center;
  font: inherit;
  font-weight: 700;
  color: var(--texto);
  background: transparent;
  -moz-appearance: textfield;
}
.contador input::-webkit-outer-spin-button,
.contador input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.remover {
  background: none;
  border: 0;
  padding: 0;
  font-size: .76rem;
  color: var(--texto-fraco);
  cursor: pointer;
  text-decoration: underline;
}
.remover:hover { color: var(--vermelho); }

.painel {
  background: var(--branco);
  border: var(--borda);
  border-top: 4px solid var(--vermelho);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra);
  padding: clamp(1.35rem, 3vw, 1.85rem);
  position: sticky;
  top: 96px;
}
.painel h2 { font-size: 1.5rem; margin-bottom: 1.15rem; }

.painel__resumo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-block: .65rem;
  border-bottom: 1px solid #EFE8DA;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texto-fraco);
  margin: 0;
}
.painel__resumo strong { font-size: 1.45rem; color: var(--texto); letter-spacing: -.02em; }

/*
 * O envio repetido embaixo do formulário de dados.
 *
 * Existe por causa da tela larga: ali o painel de envio fica na coluna da
 * direita e, mesmo sendo sticky, quem preenche os campos termina a leitura
 * aqui embaixo, longe dele. O passo seguinte precisa estar onde o olho está.
 * É a mesma ação do painel, não um segundo caminho.
 *
 * SÓ NA TELA LARGA. Abaixo de 980 px as duas colunas viram uma, e o painel
 * "Resumo" passa a vir logo depois do formulário: medido no celular, os dois
 * botões ficavam a 422 px um do outro, ou seja, os dois na mesma tela. Dois
 * botões vermelhos idênticos lado a lado não parecem a mesma ação repetida,
 * parecem duas ações diferentes. No estreito, o do painel já resolve.
 */
.envio-formulario {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: var(--borda);
  display: grid;
  gap: .7rem;
}

@media (max-width: 980px) {
  .envio-formulario { display: none; }
}

.ajuda { font-size: .86rem; color: var(--texto-fraco); }

/* 12. Institucional e formularios ========================================= */

.duas-colunas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}

/* Video institucional (drone da fabrica + linha de producao) na secao "A
   empresa". Sem autoplay: o audio e de verdade (narracao/trilha, nao mudo),
   entao o visitante decide assistir: preload="none" no HTML garante que os
   bytes do video so baixam se ele clicar em play. aspect-ratio reserva o
   espaco antes de qualquer metadado chegar, pra nao pular o layout. */
.video-empresa {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: var(--borda);
  border-radius: var(--raio-g);
  background: var(--preto);
  object-fit: cover;
}

.declaracao {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.15;
  margin: 0 0 1.25rem;
}

.numerada { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.numerada li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  background: var(--branco);
  border: var(--borda);
  border-radius: var(--raio-g);
  padding: 1.15rem 1.35rem;
}
.numerada__n {
  display: grid;
  place-items: center;
  width: 2.1rem; height: 2.1rem;
  flex: none;
  background: var(--vermelho);
  color: #fff;
  border-radius: 8px;
  font-family: var(--corpo);
  font-weight: 700;
  font-size: .82rem;
}
.numerada p { margin: 0; color: var(--texto-fraco); font-size: .95rem; }

.grade-contato {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: .9rem;
}
.contato-item {
  background: var(--branco);
  border: var(--borda);
  border-radius: var(--raio-g);
  padding: 1.4rem;
}
.contato-item h3 {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texto-fraco);
  margin-bottom: .6rem;
}
.contato-item p { margin: 0; font-size: .98rem; }
.contato-item a { font-weight: 700; }

.mapa { border: var(--borda); border-radius: var(--raio-g); overflow: hidden; line-height: 0; }
.mapa iframe { width: 100%; height: 420px; border: 0; }

.prosa { max-width: 68ch; }
.prosa h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-top: 2.5rem; }
.prosa h2:first-child { margin-top: 0; }
.prosa ul { padding-left: 1.2rem; color: var(--texto-fraco); }
.prosa li { margin-bottom: .5rem; }
.prosa p { color: var(--texto-fraco); }

.formulario { display: grid; gap: 1.15rem; }
.formulario__linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.15rem; }

.campo { display: grid; gap: .4rem; }
.campo label {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}
.campo .opcional { font-weight: 400; letter-spacing: .02em; text-transform: none; }

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: .8rem 1rem;
  border: var(--borda-forte);
  border-radius: 8px;
  background: var(--branco);
  font: inherit;
  font-size: 1rem;
  color: var(--texto);
}
.campo textarea { min-height: 122px; resize: vertical; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus { outline: none; border-color: var(--vermelho); }

/* 13. Rodape ============================================================== */

/* Marrom quase preto, nao o preto do texto: ao lado do creme, preto puro
   corta a pagina; o marrom fecha. */
.rodape { background: var(--marrom); color: #fff; padding-top: clamp(3rem, 6vw, 4.5rem); }
.rodape a { color: rgba(255, 255, 255, .72); text-decoration: none; transition: color var(--transicao); }
.rodape a:hover { color: var(--amarelo); }

.rodape__grade { display: grid; grid-template-columns: 1.6fr 1fr 1.15fr 1fr 1.5fr; gap: clamp(1.5rem, 3vw, 2.5rem); }

/* A marca do rodape e a palavra escrita, nao o arquivo do logotipo: o
   logotipo tem contorno e sombra pensados para fundo claro e sobre o marrom
   ele fica com uma auréola cinza em volta. */
.rodape .marca-palavra { margin-bottom: .9rem; }
.rodape__lema { color: var(--dourado); font-size: 1rem; font-weight: 600; line-height: 1.45; max-width: 22ch; }

.rodape h4 { color: var(--dourado); letter-spacing: .16em; font-size: .74rem; }
.rodape__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; font-size: .93rem; color: rgba(255, 255, 255, .72); }

/* A coluna "fale conosco" leva icone antes de cada item. */
.rodape__contato li { display: flex; align-items: flex-start; gap: .6rem; }
.rodape__contato svg { width: 17px; height: 17px; flex: none; margin-top: .18rem; color: var(--dourado); stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.rodape__social { display: flex; gap: .55rem; margin-top: 1.4rem; }
.rodape__social a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--vermelho);
  color: #fff;
  transition: background-color var(--transicao), transform var(--transicao);
}
.rodape__social a:hover { background: var(--vermelho-vivo); color: #fff; transform: translateY(-2px); }

.rodape__base {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding-block: 1.35rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 2rem;
  justify-content: space-between;
  font-size: .8rem;
  color: rgba(255, 255, 255, .55);
}

/* 14. Utilitarios e responsivo ============================================ */

.so-leitor-tela {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.sem-margem { margin: 0; }
.empilha { display: grid; gap: .7rem; }
.mt-g { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }

.whats-flutuante {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 90;
  /* 64 px desde 27/08/2026, a pedido do cliente. Eram 54, que e o minimo em
     que uma bolha flutuante ainda se le como botao; 64 e o tamanho em que ela
     vira convite. Acima disso ela comeca a tapar conteudo no celular. */
  width: 64px; height: 64px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #25D366;
  /* Branco, que e como o proprio WhatsApp desenha a marca dele. O icone e um
     SVG com `fill="currentColor"` (ver app/partials/rodape.php), entao a cor
     sai daqui. Era #06301A, um verde quase preto, que sumia no verde do
     circulo. */
  color: #fff;
  box-shadow: 0 6px 20px rgba(37, 211, 102, .4);
  transition: transform var(--transicao);
}
/* O `color` se repete no hover de proposito: sem ele, o `a:hover` la de cima
   pinta o icone de vermelho escuro quando o mouse passa. */
.whats-flutuante:hover { transform: translateY(-3px); color: #fff; }
.whats-flutuante svg { width: 33px; height: 33px; }

/*
 * O PULSO DO BOTAO
 *
 * Um disco do MESMO verde do botao, atras dele, que cresce e some. Sobre o
 * botao ele e invisivel, porque e verde sobre o mesmo verde; o que se ve e so
 * a parte que passa da borda, e o efeito fica sendo uma onda saindo da bolha.
 *
 * `z-index: -1` faz ele ser pintado depois do fundo do botao e ANTES do
 * conteudo, entao o icone continua por cima. O botao e `position: fixed` e
 * portanto ja e um contexto de empilhamento proprio: o -1 vale dentro dele e
 * nao afunda a bolha atras da pagina.
 *
 * ANIMA `transform` E `opacity`, e nao `box-shadow` com spread, que era o
 * outro jeito de fazer isto: as duas primeiras o navegador resolve na camada
 * de composicao, sem repintar nada, e isto e um elemento que fica pulsando o
 * tempo todo em cima de qualquer pagina.
 *
 * A escala para em 1.5 por causa do selo redondo da abertura, que no celular
 * fica na mesma altura da tela: com 1.75 a onda passava por cima do carimbo.
 * Ver .hero__selo na media query de 760 px.
 *
 * A pausa entre um pulso e outro esta nos proprios quadros (de 70% a 100% nada
 * acontece): sem ela a onda seria continua e viraria um piscar nervoso no
 * canto da tela. Quem pediu menos movimento no sistema nao ve nada disso, pela
 * regra universal do bloco `prefers-reduced-motion` no fim do arquivo.
 */
.whats-flutuante::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: #25D366;
  pointer-events: none;
  animation: whats-pulso 2.4s ease-out infinite;
}

@keyframes whats-pulso {
  0%        { transform: scale(1);   opacity: .55; }
  70%, 100% { transform: scale(1.5); opacity: 0; }
}

.aviso-flutuante {
  position: fixed;
  left: 50%;
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 120;
  max-width: min(92vw, 420px);
  padding: .85rem 1.35rem;
  background: var(--preto);
  color: #fff;
  border-radius: 999px;
  box-shadow: var(--sombra-alta);
  font-size: .9rem;
  font-weight: 700;
  text-align: center;
  transform: translate(-50%, 140%);
  opacity: 0;
  transition: transform var(--transicao), opacity var(--transicao);
}
.aviso-flutuante[data-visivel='sim'] { transform: translate(-50%, 0); opacity: 1; }

/* ------------------------------------------------------------------ *
 * Os blocos novos do desenho de 25/08/2026, em telas menores.
 *
 * Uma regra vale para todos: quando a barra de numeros quebra em varias
 * linhas, a divisa vertical entre as celulas some. Divisa faz sentido entre
 * vizinhos na MESMA linha; herdada para a primeira celula de cada linha nova,
 * ela vira um tracinho solto no meio do vermelho.
 * ------------------------------------------------------------------ */
@media (max-width: 1080px) {
  .dados { grid-template-columns: repeat(3, 1fr); row-gap: 1.6rem; }
  .dado { border-left: 0; padding-left: 0; }
  .linhas-abas { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); }
  .rodape__grade { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  /* As abas viram uma fila que rola de lado, e o painel ocupa a largura toda:
     em coluna estreita a lista vertical comia metade da altura da secao. */
  .linhas-abas { grid-template-columns: 1fr; }
  .abas {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: .4rem;
    scrollbar-width: none;
  }
  .abas::-webkit-scrollbar { display: none; }
  .aba { flex: none; padding: .7rem 1.15rem; font-size: .92rem; white-space: nowrap; }

  .b2b__grade { grid-template-columns: 1fr; }
  /* Os dois selos encolhem juntos: o da abertura e o do fim da pagina tem de
     ter o mesmo tamanho em qualquer largura, senao o mesmo carimbo aparece em
     dois tamanhos na mesma rolagem. */
  .b2b__selo,
  .hero__selo { width: 92px; }
  .qualidades { margin-bottom: 1.5rem; }
}

@media (max-width: 620px) {
  .painel-linha { grid-template-columns: 1fr; }
  .painel-linha__foto { max-width: 260px; margin-inline: auto; }
  .carrossel__seta { display: none; }
}

@media (max-width: 980px) {
  .ficha { grid-template-columns: 1fr; }
  .ficha__foto { position: static; max-width: 420px; }
  .orcamento { grid-template-columns: 1fr; }
  .painel { position: static; }
  .rodape__grade { grid-template-columns: repeat(2, 1fr); }
}

/*
 * A ABERTURA EMPILHA NO CELULAR.
 *
 * Aqui morava um regime inteiro que media a dobra da tela e dava ao pacote a
 * altura que o texto nao tinha usado. Saiu em 25/08/2026 junto com o
 * `min-height: 100svh` da abertura: sem a promessa de "cabe na primeira
 * dobra", nao ha mais conta de sobra para fazer, e a vitrine simplesmente
 * encolhe pela largura como qualquer outra imagem.
 *
 * O que ficou e o essencial: uma coluna, texto em cima, vitrine embaixo, com
 * um teto de altura para ela nao empurrar o resto da pagina para longe.
 */
@media (max-width: 760px) {
  .hero { text-align: left; }
  .hero__grade { grid-template-columns: 1fr; gap: 1.75rem; }
  /* Coluna unica: sem margem de pagina para invadir, a vitrine volta ao centro,
     e a arte volta a ser centralizada dentro da propria caixa. */
  .hero__pack { order: 2; max-width: 560px; --sangria: 0px; --avanco: 0px; --recuo: 0px; justify-self: center; margin-right: 0; }
  .hero__pack img { object-position: center bottom; }
  .hero__pack img { max-height: 58svh; }
  /* O `right` afasta o selo do botao flutuante do WhatsApp, que e `fixed` no
     canto e passa por cima de tudo. Com .25rem os dois se sobrepunham
     justamente quando a abertura estava na tela, e o carimbo aparecia por baixo
     da bolinha verde. 4.75rem poe a borda do selo antes de onde o botao
     comeca, na tela mais estreita que o site atende. */
  /* So a posicao muda aqui: o tamanho continua o dos 900 px, igual ao do selo
     do fim da pagina. Ele cresce para a esquerda, porque esta preso pela
     direita, entao a folga do botao do WhatsApp continua de pe.

     O `right` foi de 4.75rem para 5.5rem em 27/08/2026: a bolha do WhatsApp
     passou de 50 para 58 px e ganhou uma onda que cresce ate 1.5x. Numa tela
     de 360 px a bolha vai da borda ate 74 px, e a onda ate 88; com 4.75rem
     (76 px) o carimbo ficava embaixo dela. */
  .hero__selo { top: auto; bottom: 0; right: 5.5rem; }
}

/*
 * OS DOIS BOTOES DA ABERTURA SAO UM PAR, e por isso tem recuo proprio.
 *
 * Com o recuo padrao (1.9rem de cada lado) eles somam ~550 px, e a coluna de
 * texto so tem 471 desde que a vitrine ganhou espaco (ver .hero__grade). Com
 * 1.1rem somam ~460 e continuam lado a lado.
 *
 * Valia so de 761 a 1279 px ate 26/08/2026, quando a coluna de texto ainda era
 * larga em tela grande. Agora ela e estreita em qualquer largura de duas
 * colunas, entao a regra vale de 761 para cima. Abaixo disso a abertura empilha
 * e os botoes tem tratamento proprio (ver as faixas de 620 e 520 px).
 *
 * O `flex-wrap` continua ligado: em largura que nem assim comporte os dois,
 * eles empilham em vez de estourar a coluna.
 *
 * Apertou mais em 26/08/2026, de 1.1rem para .7rem. Cada pixel que os dois
 * botoes devolvem e um pixel que o piso da coluna de texto pode ceder, e cada
 * pixel que o piso cede vira largura de arte. Medido numa janela de 1440: com
 * 1.1rem o par soma 498 px, com .7rem soma 472, e foi o que permitiu o piso
 * cair de 505 para 480. */
@media (min-width: 761px) {
  .hero .grupo-botoes { gap: .6rem; }
  .hero .grupo-botoes .btn { padding-inline: .7rem; }
}

/*
 * UM PISO PARA A COLUNA DE TEXTO, e ele sai de graca.
 *
 * Com 1fr/1.3fr a coluna ficava em 471 px, e os dois botoes com o recuo menor
 * ainda somam 489 px mais 9,6 de vao: 499. Empilhavam de novo.
 *
 * Devolver largura ao texto NAO custa nada a vitrine dessa largura para cima,
 * porque quem limita a arte aqui e a ALTURA da dobra, nao a largura da coluna.
 * Medido a 1440x900: com a coluna de imagem em 613 px ou em 569, a arte pinta
 * os mesmos 727x717, porque nos dois casos a caixa e mais larga do que a altura
 * disponivel permite. O que sobra de largura vira folga do lado do texto, e o
 * `object-position: right` manda essa folga toda para la.
 *
 * 480 px e o piso: 472 dos botoes com o recuo de .7rem, mais uma folga de 8,
 * que e o que absorve a variacao de renderizacao de fonte entre sistemas.
 * Abaixo de 1280 px a regra nao vale, e ai a proporcao 1/1.55 manda: os botoes
 * ja empilhavam nessas larguras antes de tudo isto, e a arte ganha o espaco.
 *
 * ERA 505, com os botoes em 1.1rem. Caiu para 480 em 26/08/2026 junto com o
 * recuo dos botoes, porque aqui esta a unica fonte de largura que ainda sobrava
 * para a arte. Cuidado ao mexer nos dois numeros: eles andam juntos, e piso
 * menor que a soma dos botoes os empilha, que e o defeito que este bloco
 * inteiro existe para evitar.
 */
@media (min-width: 1280px) {
  .hero__grade { grid-template-columns: minmax(480px, 1fr) minmax(0, 1.55fr); }
}

/* Os dois botoes da abertura empilhados e com a largura toda.
   Lado a lado numa tela de 390 px eles ficam com 165 px cada, e o rotulo
   quebra dentro da pilula: "Conheça nossos / produtos" em duas linhas, com as
   duas pilulas de alturas diferentes. Empilhados cabem inteiros. */
@media (max-width: 520px) {
  .hero .grupo-botoes { flex-direction: column; align-items: stretch; }
  .hero .grupo-botoes .btn { width: 100%; }
}

@media (max-width: 860px) {
  .abrir-menu { display: flex; order: 3; }
  .cabecalho__acoes { margin-left: auto; order: 2; }

  .cabecalho__nav {
    position: fixed;
    inset: var(--altura-barra) 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--branco);
    border-bottom: 1px solid #E5DCCB;
    box-shadow: var(--sombra-alta);
    padding: 0 clamp(1.15rem, 4.5vw, 3rem) 1.25rem;
    transform: translateY(-130%);
    visibility: hidden;
    transition: transform 240ms ease, visibility 240ms;
    max-height: calc(100dvh - var(--altura-barra));
    overflow-y: auto;
  }
  .cabecalho__nav[data-aberto='sim'] { transform: translateY(0); visibility: visible; }

  .cabecalho__link { padding: 1rem 0; border-bottom: 1px solid #EFE8DA; font-size: .95rem; }
  .cabecalho__link[aria-current='page']::after { display: none; }
}

@media (max-width: 620px) {
  .dados { grid-template-columns: repeat(2, 1fr); }
  .rodape__grade { grid-template-columns: 1fr; }
  .grade-produtos { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
  .card__foto { padding: .75rem .75rem 0; }
  .card__corpo { padding: .65rem .75rem .9rem; }
  .linha { grid-template-columns: auto minmax(0, 1fr); padding: .95rem 1.1rem; }
  .linha__foto { display: none; }
  .linha__fim { grid-column: 2; margin-top: .45rem; }
  .item-orcamento { grid-template-columns: 58px minmax(0, 1fr); }
  .item-orcamento__controles { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
  .barra-catalogo { flex-direction: column; align-items: stretch; }
  .busca { flex: 1 1 auto; }
  .whats-flutuante { width: 58px; height: 58px; }
  .whats-flutuante svg { width: 30px; height: 30px; }
  .aviso-flutuante { bottom: 5rem; }

  /*
   * Os dois botoes da abertura dividem uma linha so.
   *
   * Empilhados eles custavam 104px de altura, que e justamente a altura que
   * faltava para o pacote aparecer com tamanho de produto e nao de miniatura.
   * De quebra, duas caixas de larguras diferentes alinhadas a esquerda pareciam
   * duas decisoes; lado a lado e com a mesma largura elas viram um par.
   *
   * `flex: 1 1 0` iguala as duas independentemente do texto, e o recuo interno
   * menor e o que permite "VER O CATALOGO" caber em meia tela de 360px.
   */
  .hero .grupo-botoes { flex-wrap: nowrap; gap: .6rem; }
  .hero .grupo-botoes .btn {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: .6rem;
    font-size: .74rem;
    letter-spacing: .03em;
  }
}

/*
 * TELA CURTA: A VITRINE NAO SOME MAIS.
 *
 * Aqui havia `@media (max-height: 620px) and (min-width: 761px)`, que punha a
 * abertura em uma coluna so e escondia a vitrine e o selo. Saiu em 26/08/2026,
 * porque escondia a arte principal da home em janela de tamanho comum: um
 * navegador nao maximizado num monitor de 1080p, um notebook de 1366x768 com a
 * barra de tarefas e o inspetor abertos, um 1024x600. Medido: em 1200x620,
 * 1100x600 e 1024x600 a imagem vinha 0x0.
 *
 * O motivo original nao se sustentava: a regra empilhava as colunas ELA MESMA
 * e so depois escondia a imagem para compensar a altura que o empilhamento
 * criou. Mantendo as duas colunas, a vitrine fica ao lado do texto e nao custa
 * altura nenhuma. O que sobra de cuidado com tela baixa ja esta no
 * `max-height: min(74svh, 620px)` da vitrine e no `min-height` da abertura,
 * os dois em svh: os dois encolhem sozinhos.
 */

@media (max-width: 480px) {
  /* A barra e o logotipo tambem crescem aqui, mas menos: nesta largura a
     barra divide o espaco com o botao de orcamento e o botao do menu, e o
     logotipo e o unico dos tres que pode ceder. O --altura-topo sai deste
     valor sozinho, e o menu suspenso acompanha. */
  :root { --altura-barra: 72px; }

  .cabecalho__barra { gap: .6rem; }
  .cabecalho__logo img { width: 136px; }
  .abrir-menu { width: 42px; height: 42px; }
  .btn--pequeno { padding: .55rem .95rem; font-size: .78rem; }

  .hero { --respiro-hero: 1.1rem; }
  .hero__marca-tempo { margin-bottom: 1rem; }
  .hero h1 { margin-bottom: 1rem; }
  .hero__texto { margin-bottom: 1.4rem; font-size: 1rem; }
}

/*
 * TELA BEM ESTREITA: O BOTAO PERDE O VERBO.
 *
 * Abaixo de 420 px a barra do cabecalho nao fecha a conta. Medido no site no
 * ar, num iframe da largura exata: em 375 px (o iPhone SE, que nao e raro) ela
 * passava 8 px da janela, e em 320 px passava 45. O transbordo NAO nasceu com
 * o logotipo maior, so piorou com ele: com o logotipo antigo de 124 px os 320
 * ja estouravam 45 px. O `overflow-x: hidden` do body escondia o sintoma, e o
 * que se via era o botao cortado na borda.
 *
 * Quem ocupa o espaco e o rotulo: "Montar Orçamento" custa 166 px, e "Montar "
 * sozinho vale uns 55. Tirando o verbo sobra "Orçamento", que continua dizendo
 * o que o botao faz, e a barra passa a caber.
 *
 * Preferimos isto a esconder o rotulo inteiro e deixar so o carrinho: um icone
 * sozinho e adivinhacao para quem nunca viu o site, e este botao e o caminho
 * comercial da pagina.
 */
@media (max-width: 420px) {
  .botao-orcamento__verbo { display: none; }
}

/*
 * A TELA MAIS ESTREITA QUE O SITE ATENDE (320 px, o iPhone 5 e afins).
 *
 * Mesmo sem o verbo no botao, a barra fica 10 px maior que a janela e o
 * navegador espreme o botao do menu de 42 para 22 px. Com 124 px de logotipo a
 * conta fecha e o botao do menu volta ao tamanho de alvo de toque.
 *
 * Sobram 3 px de transbordo em 320 px que NAO vem do cabecalho: e o
 * `.video-cartao` da home, que tem largura minima propria. Vem de antes deste
 * ajuste e nao foi mexido aqui.
 */
@media (max-width: 340px) {
  .cabecalho__logo img { width: 124px; }
}

/* ------------------------------------------------------------------ *
 * Revelação das seções
 *
 * As seções entram com uma subida curta e um fade quando chegam à vista. A
 * dosagem é a mesma que rege o resto do projeto: 18 px de deslocamento e meio
 * segundo. Movimento suficiente para a página respirar, longe do exagero que
 * fez a segunda versão do site parecer infantil.
 *
 * TRÊS COISAS QUE ESTE BLOCO PRECISA GARANTIR
 *
 * 1. Nada some sem JavaScript. O estado escondido só existe sob a classe
 *    `com-revelacao`, que é o próprio JavaScript quem põe (no <head>, antes da
 *    primeira pintura, para não haver o piscar de aparecer-e-sumir).
 *
 * 2. Anima `translate`, NÃO `transform`. Os cartões e as linhas já usam
 *    `transform` no hover; se a revelação usasse a mesma propriedade, o
 *    seletor da revelação venceria por especificidade e o hover pararia de
 *    funcionar depois que a seção aparecesse. São propriedades separadas.
 *
 * 3. A abertura não entra na brincadeira. Ela é a primeira coisa que o
 *    visitante vê e contém a imagem principal da página: atrasá-la com um fade
 *    piora o tempo de carregamento percebido e a métrica que o Google mede.
 * ------------------------------------------------------------------ */

.com-revelacao [data-revelar],
.com-revelacao [data-revelar-lista] > * {
  opacity: 0;
  translate: 0 18px;
  transition: opacity .55s cubic-bezier(.22, .61, .36, 1),
              translate .55s cubic-bezier(.22, .61, .36, 1);
}

/* As seis linhas são faixas horizontais: entram de lado, não de baixo. */
.com-revelacao [data-revelar='lado'],
.com-revelacao [data-revelar-lista='lado'] > * { translate: -24px 0; }

.com-revelacao [data-revelar][data-visivel],
.com-revelacao [data-revelar-lista] > [data-visivel] {
  opacity: 1;
  translate: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .card:hover, .linha:hover, .whats-flutuante:hover { transform: none; }

  /* Quem pediu menos movimento no sistema recebe a página inteira parada e
     visível. O JavaScript nem chega a marcar o documento nesse caso; a regra
     abaixo é o cinto de segurança. */
  .com-revelacao [data-revelar],
  .com-revelacao [data-revelar-lista] > * {
    opacity: 1;
    translate: none;
    transition: none;
  }
}

@media print {
  .cabecalho, .rodape, .whats-flutuante, .ficha__acoes, .barra-catalogo { display: none !important; }
  body { background: #fff; }
}


/* ===================================================================
   AJUSTES DA VERSAO COM PAINEL

   O site passou de HTML estatico para PHP com banco. Tres coisas
   mudaram no HTML e pedem estilo novo.
   =================================================================== */

/* 1. Os botoes de filtro do catalogo viraram <a>.
      Antes eram <button> e o JavaScript montava a grade; agora sao links
      de verdade, para o catalogo continuar navegavel sem JavaScript. Como
      <a>, precisam recuperar o que o <button> dava de graca: nao ficar
      sublinhado e respeitar padding vertical. */
.filtro {
  display: inline-block;
  text-decoration: none;
  line-height: 1.2;
}
.filtro:hover { text-decoration: none; }

/* 2. Campo-isca dos formularios (honeypot).
      Fica fora da tela em vez de display:none, porque alguns robos ignoram o
      que esta com display:none justamente para nao cair na armadilha. */
.campo-isca {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* 3. Descricao propria do produto, que so existe quando o cliente preenche.

      A tabela nutricional tambem vem daqui, mas o estilo dela mora junto com
      a .tabela-ficha, la em cima: desde 24/08/2026 ela e uma linha da propria
      ficha tecnica, e nao mais um bloco solto embaixo dela. */
.ficha__descricao {
  margin-bottom: 1.75rem;
  color: var(--texto-fraco);
}
.ficha__descricao p:last-child { margin-bottom: 0; }