quebraria o .anima:nth-child(1..5) que escalona a animação de
entrada, e obrigaria a mexer em .sobrancelha, .display e .chamada,
que não são só do hero. */
display: grid;
grid-template-columns: clamp(160px, 18vw, 240px) minmax(0, 1fr);
align-items: start;
/* 48px, e nao 40: e o vao que estava no ar, e dele saiu a medicao
registrada abaixo (848px de sobra para o texto a 1440px). */
column-gap: calc(var(--u) * 6);
}
/* A colocação automática intercalaria os quatro irmãos entre as duas
colunas — logo, sobrancelha, display, chamada viraria 2x2. Daí o
posicionamento explícito, escrito com o filho direto para não alcançar
as mesmas classes nas outras seções.
================================================================
É "span 3", E NUNCA "1 / -1". A DIFERENÇA NÃO É DE ESTILO.
================================================================
Parece que "1 / -1" atravessa o grid inteiro, e é o que ele faz num grid
com linhas declaradas. AQUI NÃO HÁ NENHUMA: não existe grid-template-rows
nesta folha, e todas as linhas do hero são IMPLÍCITAS.
O -1 conta a partir do fim do grid EXPLÍCITO. Sem trilha de linha
declarada, a linha 1 e a linha -1 são a MESMA, "1 / -1" colapsa em
"1 / 1", e o navegador reduz isso a span 1: a logo alcança só a primeira
linha.
MEDIDO NO NAVEGADOR em 09/09/2026, viewport 1365, com o valor computado
respondendo "1 / -1" e a caixa da logo em 240x394:
linha 1 [ LOGO 240x394 ] Frigorífico · Carne suína
linha 2 [ VAZIO ] Qualidade que você confia.
linha 3 [ VAZIO ] Do abate ao balcão...
O título nascia 394px abaixo do topo — a altura da linha 1 inteira — com a
coluna da logo vazia ao lado dele. Era o retângulo vazio do print.
"span 3" não depende de grid explícito nenhum: ele CRIA as linhas
implícitas que atravessa, que é o que o desenho aprovado fazia. O 3 é o
número de irmãos de texto, e há teste contando os filhos do hero no HTML
servido em vez de cravar o número aqui. */
.hero__corpo > .hero__logo { grid-column: 1; grid-row: 1 / span 3; }
.hero__corpo > :not(.hero__logo) { grid-column: 2; }
/* ================================================================
A LOGO PREENCHE A COLUNA. NAO E DETALHE: E A MEDIDA QUE FOI APROVADA.
================================================================
A coluna e clamp(160px, 18vw, 240px) e satura em 240px a 1440px de
viewport. Com width em clamp(132px, 15vw, 176px) a logo satura em 176px e
ocupa 176 de 240 -- 73% da coluna, com 64px de vazio a direita. O desenho
aprovado no navegador e a logo ocupando a coluna inteira, e a largura de
exibicao quem decide e a COLUNA.
A margem inferior existe so para separar da linha de baixo quando
empilhado. Lado a lado nao ha linha de baixo, e ela desalinharia o topo.
O clamp e a margem voltam no @media (max-width: 860px), que e onde a
coluna unica vale -- la a logo nao pode ocupar o envelope inteiro.
A LARGURA SAIU DE MEDICAO. Com teto de 240px e vao de 48px sobram 848px
para o texto a 1440px de viewport, onde o titulo de 100px ocupa ~611px na
primeira linha ("Qualidade que"). No limite inferior das duas colunas,
861px, sobram 567px para um titulo de 62px que ocupa ~379px. Cabe em toda a
faixa, com folga que nao depende de a webfont ter carregado. */
.hero__logo {
width: 100%;
height: auto;
margin-bottom: 0;
}
.sobrancelha {
font-family: var(--fonte-display);
font-weight: 500;
font-stretch: 80%;
font-size: 13px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--rose);
margin: 0 0 calc(var(--u) * 3);
display: flex;
align-items: center;
gap: calc(var(--u) * 1.5);
flex-wrap: wrap;
}
.sobrancelha::after {
content: "";
height: 1px;
flex: 1;
max-width: clamp(32px, 8vw, 120px);
background: var(--fio-medio);
}
.display {
font-family: var(--fonte-promessa);
font-optical-sizing: auto;
font-variation-settings: 'SOFT' 0, 'WONK' 1;
font-weight: 600;
font-size: clamp(46px, 7.2vw, 100px);
line-height: 1.02;
letter-spacing: -0.02em;
color: var(--osso);
margin: 0;
text-wrap: balance;
}
.chamada {
font-size: clamp(17px, 1.5vw, 20px);
line-height: 1.55;
color: rgba(245, 243, 239, 0.82);
max-width: 52ch;
margin: calc(var(--u) * 4) 0 0;
}
/* ── WHATSAPP FLUTUANTE ──────────────────────────────────── */
/* Verde da própria marca WhatsApp — é sinal de canal, não acento
do sistema, então não consome a cota de brasa da tela. */
.zap {
position: fixed;
right: clamp(16px, 3vw, 28px);
bottom: clamp(16px, 3vw, 28px);
z-index: 30;
width: 56px;
height: 56px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #25D366;
color: #FFFFFF;
box-shadow: 0 6px 20px rgba(14, 26, 77, 0.32);
transition: transform .18s ease, background-color .18s ease;
}
.zap:hover { background: #1FB855; transform: translateY(-2px); }
.zap svg { width: 30px; height: 30px; display: block; }
@media (prefers-reduced-motion: reduce) {
.zap { transition: none; }
.zap:hover { transform: none; }
.marca { transition: none; }
/* O TRILHO CONTINUA ROLANDO — o que sai é o deslizamento animado. O script
também não liga o avanço automático, e as duas coisas são necessárias:
sem esta regra, a rolagem que a própria pessoa faz ainda seria animada. */
.produtos--trilho { scroll-behavior: auto; }
.produtos__seta, .produtos__retomar { transition: none; }
}
/* ── ESPIA DA PRÓXIMA SEÇÃO (faixa de selos) ─────────────── */
/* Presente só para demonstrar os 88vh: a seção seguinte aparece
sozinha e dispensa seta de "role". Não é a seção construída. */
.selos__lista li {
font-family: var(--fonte-display);
font-weight: 600;
font-stretch: 84%;
font-size: 13px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--azul-noite);
display: flex;
align-items: center;
gap: calc(var(--u) * 1.5);
}
.selos__lista li::before {
content: "";
width: 7px;
height: 7px;
flex: none;
border: 1px solid var(--azul-frimelo);
transform: rotate(45deg);
}
/* ── MOBILE ──────────────────────────────────────────────── */
@media (max-width: 860px) {
.menu { display: none; }
.cabecalho__interno { gap: calc(var(--u) * 2); }
.cabecalho .botao { margin-inline-start: auto; }
/* A faixa volta a 88dvh: os 872px sao do layout de duas colunas. Aqui eles
transbordariam 205px numa tela de 375x667. */
.hero {
min-height: 88vh;
min-height: 88dvh;
}
/* Coluna única: a logo volta a empilhar sobre o texto. */
.hero__corpo { grid-template-columns: minmax(0, 1fr); }
.hero__corpo > .hero__logo { grid-row: auto; }
.hero__corpo > :not(.hero__logo) { grid-column: 1; }
/* EMPILHADA A LARGURA E PROPRIA, e nao a da coluna: com width em 100% a
logo ocuparia o envelope inteiro. A margem separa da linha de baixo,
que aqui existe. */
.hero__logo {
width: clamp(132px, 15vw, 176px);
margin-bottom: calc(var(--u) * 4);
}
}
@media (max-width: 700px) {
.quebra { display: none; }
.display { letter-spacing: -0.025em; }
.hero__corpo { padding-block: calc(var(--u) * 8) calc(var(--u) * 6); }
.foto__marca {
top: auto;
bottom: auto;
left: var(--margem);
right: var(--margem);
max-width: none;
}
}
/* ── MOVIMENTO ───────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
.produtos--trilho { scroll-behavior: smooth; }
.anima { animation: sobe .7s cubic-bezier(.22, .61, .36, 1) both; }
.anima:nth-child(1) { animation-delay: .05s; }
.anima:nth-child(2) { animation-delay: .12s; }
.anima:nth-child(3) { animation-delay: .19s; }
.anima:nth-child(4) { animation-delay: .26s; }
.anima:nth-child(5) { animation-delay: .33s; }
@keyframes sobe {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: none; }
}
}
/* ══════════════════════════════════════════════════════════════
SEÇÕES
Ritmo: hero escuro → selos/empresa/produtos claros →
sustentabilidade azul → trabalhe/contato claros → rodapé escuro.
══════════════════════════════════════════════════════════════ */
.secao {
padding-block: clamp(72px, 11vh, 152px);
}
.secao--clara { background: var(--osso); color: var(--grafite); }
.secao--azul { background: var(--azul-frimelo); color: var(--osso); }
.secao--noite { background: var(--azul-noite); color: var(--osso); }
/* Rótulo de seção: sempre Archivo estreito, sempre com fio */
.rotulo {
font-family: var(--fonte-display);
font-weight: 600;
font-stretch: 78%;
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
margin: 0 0 calc(var(--u) * 3);
display: flex;
align-items: center;
gap: calc(var(--u) * 2);
color: var(--azul-frimelo);
}
.rotulo::after {
content: "";
height: 1px;
flex: 1;
max-width: 88px;
background: currentColor;
opacity: .4;
}
.secao--azul .rotulo, .secao--noite .rotulo { color: var(--rose); }
.titulo {
font-family: var(--fonte-promessa);
font-optical-sizing: auto;
font-variation-settings: 'SOFT' 0, 'WONK' 1;
font-weight: 600;
font-size: clamp(30px, 4vw, 50px);
line-height: 1.1;
letter-spacing: -0.02em;
margin: 0;
color: var(--azul-noite);
text-wrap: balance;
}
.secao--azul .titulo, .secao--noite .titulo { color: var(--osso); }
.texto { font-size: 17px; line-height: 1.7; max-width: 62ch; }
.texto p { margin: 0 0 calc(var(--u) * 2); }
.texto p:last-child { margin-bottom: 0; }
/* Disposições da grade: alternam A (7/5) e B (5/7) */
.dupla {
display: grid;
gap: clamp(32px, 5vw, 72px);
align-items: center;
}
.dupla--a { grid-template-columns: 7fr 5fr; }
.dupla--b { grid-template-columns: 5fr 7fr; }
/* Marcador de conteúdo ainda não fornecido */
.pendente {
border: 1px dashed rgba(22, 38, 110, 0.42);
border-radius: 4px;
padding: calc(var(--u) * 3);
background: rgba(22, 38, 110, 0.04);
}
.secao--azul .pendente {
border-color: var(--fio-medio);
background: rgba(14, 26, 77, 0.28);
}
.pendente__marca {
font-family: var(--fonte-display);
font-weight: 700;
font-stretch: 80%;
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--azul-frimelo);
margin: 0 0 calc(var(--u) * 1.5);
}
.secao--azul .pendente__marca { color: var(--rose); }
.pendente__nota { margin: 0; font-size: 15px; line-height: 1.6; opacity: .72; }
/* ── FAIXA DE SELOS ──────────────────────────────────────── */
.selos { background: var(--osso); color: var(--grafite); padding-block: calc(var(--u) * 5); border-top: 3px solid var(--azul-frimelo); }
.selos__lista {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: calc(var(--u) * 3);
list-style: none;
margin: 0;
padding: 0;
}
.selo { display: flex; align-items: flex-start; gap: calc(var(--u) * 2); }
.selo__icone { flex: none; width: 30px; height: 30px; color: var(--azul-frimelo); }
.selo__titulo {
display: block;
font-family: var(--fonte-display);
font-weight: 700;
font-stretch: 84%;
font-size: 13px;
letter-spacing: 0.09em;
text-transform: uppercase;
line-height: 1.25;
color: var(--azul-noite);
}
.selo__nota { display: block; font-size: 13px; line-height: 1.45; color: rgba(28, 27, 25, 0.62); margin-top: 2px; }
/* ── PRODUTOS ────────────────────────────────────────────── */
/*
A LISTA SUBSTITUI AS DUAS GRADES FIXAS.
Saíram .cortes (repeat 2), .matriz (repeat 3), .tarja, .linguicas e a
família .calibre: elas eram a TAXONOMIA do produto escrita em folha de
estilo — dois cortes, três calibres, cada um com e sem pimenta. Com o tipo
desaparecendo, não têm mais o que descrever, e um produto que não coubesse
naquela grade não tinha como ser cadastrado.
O CARROSSEL É ESTE ARQUIVO, E NÃO O SCRIPT. overflow-x mais scroll-snap
entregam o trilho inteiro sem uma linha de JavaScript: deslize no celular,
barra de rolagem no desktop. O script só acrescenta o avanço automático e as
setas, e a página funciona sem ele.
*/
.produtos {
list-style: none;
margin: calc(var(--u) * 6) 0 0;
padding: 0;
/* A largura do cartão é a mesma nos dois modos: 363px é o que a fileira de
três dá no envelope de 1136px, e é de onde os 900px da foto saíram. */
--cartao: clamp(260px, 30vw, 363px);
gap: calc(var(--u) * 3);
}
/* ATÉ TRÊS: fileira que não rola, centrada. Com um ou dois produtos o
auto-fit deixaria o cartão esticar até o envelope inteiro, e uma foto
quadrada de 1136px ocuparia a tela toda — daí a largura fixa mais o
justify-content. */
.produtos--grade {
display: grid;
grid-template-columns: repeat(auto-fit, var(--cartao));
justify-content: center;
}
/* QUATRO OU MAIS: o trilho. O quarto cartão aparece cortado na borda, e é ele
que convida a rolar — sem isso a lista parece terminar em três. */
/*
A CAIXA DE REFERÊNCIA DAS SETAS. Ela não rola — o trilho é que rola —, e é
por isso que as setas ficam paradas nas laterais em vez de sair da tela com
os produtos.
*/
.produtos__area { position: relative; }
.produtos--trilho {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-left: 0;
/*
A BARRA DE ROLAGEM SOME, A ROLAGEM FICA. Trocar overflow-x por hidden
resolveria o visual e mataria o carrossel: sem script não haveria como
chegar aos produtos seguintes, e essa é a camada que existe para o
produto nunca ficar invisível. Há teste separado para cada metade.
*/
scrollbar-width: none;
-ms-overflow-style: none;
}
.produtos--trilho::-webkit-scrollbar { display: none; }
/* O foco do trilho é visível: ele é destino de tabulação, e destino de
tabulação que não se vê é armadilha para quem navega por teclado. */
.produtos--trilho:focus-visible { outline: 2px solid var(--azul-frimelo); outline-offset: 4px; }
.produtos--trilho > .produto {
flex: 0 0 var(--cartao);
scroll-snap-align: start;
}
.produto {
background: #FFFFFF;
/* O fio existia no .card de antes e vale de novo: cartão branco sobre o
osso da seção clara some sem ele. */
border: 1px solid rgba(22, 38, 110, 0.12);
border-radius: 4px;
overflow: hidden;
display: flex;
flex-direction: column;
color: var(--grafite);
}
.produto__texto { padding: calc(var(--u) * 3); }
.produto__nome {
font-family: var(--fonte-display);
font-weight: 700;
font-stretch: 100%;
font-size: 19px;
letter-spacing: -0.01em;
line-height: 1.2;
margin: 0 0 calc(var(--u) * 1);
color: var(--azul-noite);
}
.produto__nota {
margin: 0;
font-size: 15px;
line-height: 1.55;
color: rgba(28, 27, 25, 0.68);
}
/* AS SETAS SÃO CRIADAS PELO SCRIPT. Sem ele o contêiner nunca é inserido, e
não há botão morto na tela — só o trilho, que rola à mão. */
/* O contêiner dos controles não ocupa espaço: as setas são absolutas, e a
linha de movimento reduzido é que empurra o fluxo quando aparece. */
.produtos__setas { display: contents; }
/*
AS SETAS FICAM NAS LATERAIS, sobrepostas ao trilho e centradas na altura.
Elas nascem escondidas e o script as revela quando o cursor se move sobre o
trilho — o MESMO gesto que pausa. As duas coisas no mesmo gesto é deliberado:
não há como separar as áreas, porque as setas ficam SOBRE o trilho e qualquer
cursor que as alcance passou por ele. Quem move o mouse até a lista quer ler
ou controlar, e nos dois casos parar é o certo.
OS CONTROLES VIVEM SOBRE FUNDO CLARO, e é por isso que a cor é o azul e não o
osso: a seção é .secao--clara, como as vizinhas.
*/
.produtos__seta {
position: absolute;
top: calc(50% - 22px);
z-index: 2;
font-family: var(--fonte-display);
font-size: 18px;
line-height: 1;
width: 44px;
height: 44px;
border: 1px solid rgba(22, 38, 110, 0.20);
border-radius: 50%;
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 1px 6px rgba(22, 38, 110, 0.16);
color: var(--azul-frimelo);
cursor: pointer;
transition: opacity .18s ease, background-color .18s ease;
}
.produtos__seta--anterior { left: calc(var(--u) * -1); }
.produtos__seta--proxima { right: calc(var(--u) * -1); }
.produtos__seta:hover { background: #FFFFFF; border-color: var(--azul-frimelo); }
.produtos__seta:focus-visible { outline: 2px solid var(--azul-frimelo); outline-offset: 2px; }
/*
A LINHA DE MOVIMENTO REDUZIDO. Não é aviso de erro — é a preferência de quem
visita sendo respeitada, e dita em voz de site.
*/
.produtos__nota {
margin: calc(var(--u) * 2) 0 0;
font-size: 14px;
line-height: 1.5;
color: rgba(28, 27, 25, 0.62);
}
/*
RETOMAR É EXPLÍCITO, E É A ÚNICA VOLTA.
Quem clicou num produto parou para ler, e o automático não religa sozinho —
um temporizador desfaria a decisão de quem parou. Este botão nasce escondido
(o script põe hidden) e só aparece depois que a pessoa assumiu o controle:
antes disso não teria o que retomar, e controle que não faz nada ensina a
duvidar da tela.
*/
.produtos__retomar {
font-family: var(--fonte-display);
font-weight: 500;
font-stretch: 84%;
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0 calc(var(--u) * 2);
height: 44px;
border: 1px solid rgba(22, 38, 110, 0.28);
border-radius: 2px;
background: transparent;
color: var(--azul-frimelo);
cursor: pointer;
transition: background-color .18s ease;
}
.produtos__retomar:hover { background: rgba(22, 38, 110, 0.07); }
.produtos__retomar:focus-visible { outline: 2px solid var(--azul-frimelo); outline-offset: 2px; }
/* ── FORMULÁRIO ──────────────────────────────────────────── */
.form { display: grid; gap: calc(var(--u) * 3); }
.form__linha { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 3); }
.campo { display: flex; flex-direction: column; gap: calc(var(--u) * 1); }
.campo__rotulo {
font-family: var(--fonte-display);
font-weight: 600;
font-stretch: 82%;
font-size: 12px;
letter-spacing: 0.11em;
text-transform: uppercase;
color: var(--azul-frimelo);
}
.campo input[type="text"],
.campo input[type="email"],
.campo input[type="tel"],
.campo input[type="file"],
.campo select,
.campo textarea {
font-family: inherit;
font-size: 16px;
line-height: 1.5;
color: var(--grafite);
background: #FFFFFF;
border: 1px solid rgba(22, 38, 110, 0.28);
border-radius: 3px;
padding: calc(var(--u) * 1.5) calc(var(--u) * 2);
width: 100%;
transition: border-color .16s ease, box-shadow .16s ease;
}
.campo textarea { resize: vertical; min-height: 120px; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
outline: none;
border-color: var(--azul-frimelo);
box-shadow: 0 0 0 3px rgba(22, 38, 110, 0.14);
}
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible {
outline: 2px solid var(--azul-frimelo);
outline-offset: 1px;
}
.campo--erro input, .campo--erro select, .campo--erro textarea { border-color: var(--brasa); }
.campo__ajuda { font-size: 13px; line-height: 1.45; color: rgba(28, 27, 25, 0.58); }
.campo__erro { font-size: 14px; line-height: 1.45; color: var(--brasa); margin: 0; }
.aviso {
border-radius: 4px;
padding: calc(var(--u) * 2) calc(var(--u) * 3);
font-size: 16px;
line-height: 1.55;
margin-bottom: calc(var(--u) * 4);
}
.aviso--ok { background: #E7F3EC; border: 1px solid #A9CFBB; color: #145239; }
.aviso--nao { background: #FBECEE; border: 1px solid #E7B4BC; color: #8C0A1F; }
/* ── CONTATO ─────────────────────────────────────────────── */
/* ================================================================
FLEX COM nowrap: TRÊS NUMA LINHA, SEM PONTO DE QUEBRA A CALCULAR
================================================================
Decidido por Bruno em 09/09/2026, depois de cinco rodadas em que a terceira
unidade caía para a linha de baixo e TODO cálculo dava certo. A grade era
correta em cada medição — o que não fechava era o conteúdo.
A CAUSA, e ela explica as cinco rodadas: o