/* ===== Tokens ===== */
:root {
  --bordo-dark: #4C110D;
  --bordo: #6D1A14;
  --yellow: #FFCB05;
  --yellow-soft: #FFE066;
  --bg: #FBF6EE;
  --bg-alt: #FFFDF8;
  --text: #2B1712;
  --text-secondary: #6b5650;
  --brown-placeholder: #8a7863;

  --gradient-primary: linear-gradient(135deg, var(--bordo) 0%, var(--bordo-dark) 100%);
  --gradient-accent: linear-gradient(120deg, var(--yellow) 0%, var(--yellow-soft) 100%);
  --glow-bordo: rgba(109, 26, 20, 0.35);
  --glow-yellow: rgba(255, 203, 5, 0.45);

  --font-heading: 'Manrope', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-display: 'Manrope', sans-serif;

  --container-max: 1240px;

  /* Escala de espaçamento (ritmo vertical) */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  /* Escala de raio */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;

  /* Sombras difusas e suaves (sem bordas duras) */
  --shadow-card: 0 8px 28px rgba(43, 23, 18, 0.06);
  --shadow-elevated: 0 28px 64px rgba(43, 23, 18, 0.14);
  --shadow-glow-bordo: 0 14px 34px var(--glow-bordo);
  --shadow-glow-yellow: 0 14px 34px var(--glow-yellow);

  /* O site é escuro de ponta a ponta. Sem isso, o navegador ainda desenha a
     barra de rolagem e os campos nativos no esquema claro. */
  color-scheme: dark;
}

/* ===== Reset ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }

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

/* Atalho de teclado: o menu tem links antes do conteúdo, e o topo se repete
   em toda navegação. Fica fora da tela até receber foco, e aí se apresenta
   como a própria placa da marca. */
.skip-link {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: 1000;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  background: var(--yellow);
  color: var(--bordo-dark);
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transform: translateY(calc(-100% - var(--space-sm) * 2));
}
/* :focus, e não :focus-visible — o atalho só é alcançável por teclado, então
   qualquer foco que ele receba já é o caso de uso. */
.skip-link:focus { transform: translateY(0); }

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  font-family: var(--font-body);
  /* Escuro nas duas pontas: o "estica" do scroll no topo e no rodapé
     encosta em header e footer, que também são escuros. */
  background: var(--text);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a, button { color: inherit; text-decoration: none; touch-action: manipulation; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; background: none; border: none; }
input, textarea { font-family: inherit; touch-action: manipulation; }

h1, h2, h3 { font-family: var(--font-heading); letter-spacing: -0.02em; text-wrap: balance; }
p { text-wrap: pretty; }

/* Nenhum texto pode empurrar a borda do seu container. Endereços com CEP,
   nomes de loja e os chips de valores são as cadeias longas do site — sem isto
   elas estouram o cartão em vez de quebrar. */
h1, h2, h3, h4, p, li, span, a { overflow-wrap: break-word; }
::selection { background: var(--yellow); color: var(--bordo-dark); }

/* ===== Foco visível (acessibilidade / navegação por teclado) ===== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
  border-radius: 4px;
}
.footer a:focus-visible {
  outline-color: var(--yellow);
}
.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
  outline-color: var(--yellow);
  outline-offset: 0;
  box-shadow: 0 0 0 4px var(--glow-yellow);
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-item,
  .hero__title, .hero__lead, .hero__cta, .hero__facts {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.section {
  padding: var(--space-3xl) 0;
}

/* Ritmo da página: as seções alternam claro e escuro. A alternância é a
   própria estrutura, então nada de textura por cima — o contraste basta. */
.section--light {
  background: #fff;
}

.section--dark {
  background: var(--text);
  color: rgba(251, 246, 238, 0.76);
}

.section--dark .eyebrow { color: var(--yellow); }
.section--dark .section-heading h2 { color: #fff; }
.section--dark .section-heading p { color: rgba(251, 246, 238, 0.72); }

/* Cartão em seção escura: sobe um degrau do fundo em vez de virar branco.
   Um leve blur de vidro reforça a profundidade sem pesar a superfície. */
.section--dark .about__card,
.section--dark .info-card,
.section--dark .mission__card,
.section--dark .track-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(251, 246, 238, 0.13);
  border-top: 3px solid var(--yellow);
  box-shadow: none;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.section--dark .about__card h2,
.section--dark .mission__card h3,
.section--dark .track-card h3,
.section--dark .info-card--seal h3 { color: #fff; }
.section--dark .about__card p,
.section--dark .mission__card p,
.section--dark .track-card p,
.section--dark .info-card p,
.section--dark .commitment__cards .info-card p { color: rgba(251, 246, 238, 0.72); }

/* Cartão em seção clara: hairline no lugar da sombra difusa, que sobre
   branco puro só suja a borda. Linha de destaque no topo, mais fina e
   contemporânea que a barra lateral cheia. */
.section--light .about__card,
.section--light .info-card,
.section--light .mission__card,
.section--light .track-card {
  border: 1px solid rgba(43, 23, 18, 0.08);
  border-top: 3px solid var(--yellow);
  box-shadow: var(--shadow-card);
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--bordo);
  margin-bottom: var(--space-xs);
}

.eyebrow--light { color: var(--yellow); }

.section-heading {
  max-width: 640px;
  margin: 0 auto var(--space-xl);
  text-align: center;
}

.section-heading h2 {
  font-size: clamp(2.1rem, 3.6vw, 2.9rem);
  font-weight: 800;
  color: var(--bordo-dark);
  margin-bottom: var(--space-sm);
}

.section-heading p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.section-heading--light h2 { color: #fff; }
.section-heading--light p { color: rgba(251, 246, 238, 0.85); }

/* ===== Buttons / Links ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 15px 30px;
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.92rem;
  border: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.btn--primary {
  background: var(--gradient-primary);
  color: var(--bg);
}
.btn--primary:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-glow-bordo);
}

.btn--light {
  background: #fff;
  color: var(--bordo-dark);
  margin-top: var(--space-xl);
  display: flex;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.btn--light:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-elevated);
}

.btn--outline-dark {
  background: transparent;
  color: var(--bordo-dark);
  border: 2px solid var(--bordo-dark);
  padding: 13px 28px;
}
.btn--outline-dark:hover {
  background: var(--gradient-primary);
  border-color: transparent;
  color: var(--bg);
  transform: translateY(-3px);
  box-shadow: var(--shadow-glow-bordo);
}

.link-arrow {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--bordo);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ===== Loader ===== */
.loader {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  animation: loaderWipe 0.8s cubic-bezier(0.76, 0, 0.24, 1) 3s forwards;
}

.loader__logo {
  width: 260px;
  aspect-ratio: 1400 / 1374;
  object-fit: contain;
  animation: loaderLogoIn 0.6s ease forwards;
}

@keyframes loaderLogoIn {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes loaderWipe {
  from { transform: translateY(0); }
  to { transform: translateY(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  .loader { display: none; }
}

/* ===== Transição entre seções =====
   Uma cortina em tela cheia obrigaria a esperar a animação antes de ver o
   destino. Aqui a rolagem suave leva até a seção e ela se apresenta com um
   leve sobe-e-aparece — só transform e opacity, sem segurar o scroll. */
[id] { scroll-margin-top: var(--space-md); }

.is-arriving {
  animation: sectionArrive 420ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.is-arriving > .container,
.is-arriving > .where__inner {
  animation: sectionArriveInner 460ms cubic-bezier(0.22, 0.61, 0.36, 1) 60ms both;
}

@keyframes sectionArrive {
  from { opacity: 0.55; }
  to { opacity: 1; }
}

@keyframes sectionArriveInner {
  from { opacity: 0; transform: translate3d(0, 22px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .is-arriving,
  .is-arriving > .container,
  .is-arriving > .where__inner {
    animation: none;
  }
}

/* ===== Back to top ===== */
.back-to-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 44px;
  padding: 12px 20px 12px 16px;
  border-radius: var(--radius-full);
  background: var(--gradient-primary);
  color: var(--bg);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.82rem;
  white-space: nowrap;
  box-shadow: var(--shadow-elevated);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.25s ease, visibility 0.3s;
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-glow-bordo);
}

/* O botão fica FORA do canvas escalado (ver "Canvas fixo" no fim do arquivo),
   então mantém tamanho real em qualquer tela. Só o respiro da barra de gestos
   muda no celular — nada de posição ou de conteúdo. */
@media (max-width: 768px) {
  .back-to-top {
    right: 16px;
    /* fica acima da barra de gestos em telas com notch/home indicator */
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
}

/* ===== Header =====
   Direção: fachada de açougue antigo. Fundo defumado coberto por gravuras de
   cortes e ferramentas em latão, a placa da marca sozinha no meio com bastante
   respiro, e a navegação numa faixa cheia embaixo — como a tabuleta esmaltada
   de um estabelecimento. */
.header {
  --hd-smoke: #1B100D;
  --hd-brass: #C9962F;
  --hd-brass-lit: #E6BE6B;

  position: relative;
  z-index: 100;
  overflow: hidden;
  /* Defumado: o vinho desce quente do topo sobre um marrom quase preto. */
  background:
    radial-gradient(112% 128% at 50% 2%, rgba(122, 30, 22, 0.85), transparent 62%),
    linear-gradient(180deg, #2A1610 0%, var(--hd-smoke) 58%, #150C0A 100%);
  animation: fadeInDown 0.6s ease;
}

.header__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.header__bg-field {
  position: absolute;
  display: block;
}

/* As gravuras são identidade, não papel de parede: entram fortes o bastante
   para se ler cada peça, e é a máscara — não a opacidade — que abre o claro
   onde a placa da marca vai pousar.
   O arquivo é o ladrilho de carnes (pernil, costela, bife com osso, linguiça,
   lombo) já convertido para traço de latão sobre transparente — o original é
   vermelho sobre branco e não serviria sobre fundo escuro. O SVG desenhado à
   mão continua em images/header-pattern.svg, caso queira voltar. */
.header__bg-field {
  inset: -60px;
  background: url('../images/header-carnes.webp') repeat;
  /* Ladrilho grande de propósito: o original é muito povoado, e ampliá-lo faz
     cada peça ser lida em vez de virar textura de papel de parede. */
  background-size: 520px auto;
  opacity: 0.34;
  /* O clarão central era do tamanho do boi que ficava aqui atrás. Sem ele, a
     abertura encolhe para pouco mais que a placa — o suficiente para a logo
     respirar, sem deixar um buraco escuro no meio do header. */
  -webkit-mask-image: radial-gradient(28% 56% at 50% 48%, transparent 0%, rgba(0, 0, 0, 0.55) 46%, #000 90%);
  mask-image: radial-gradient(28% 56% at 50% 48%, transparent 0%, rgba(0, 0, 0, 0.55) 46%, #000 90%);
}

/* Vinheta: fecha os cantos e devolve contraste ao miolo sem apagar o desenho. */
.header__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(76% 82% at 50% 46%, transparent 44%, rgba(16, 9, 7, 0.66) 100%);
}

.header__brand {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  /* Só o respiro encolhe aqui — a logo e o texto do menu mantêm o tamanho de
     sempre; é o ar ao redor deles que cede para o header ficar mais baixo. */
  padding: clamp(6px, 0.8vw, 10px) var(--space-lg) clamp(5px, 0.6vw, 8px);
}

.header__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  transition: transform 0.35s ease;
}
.header__logo:hover { transform: scale(1.03); }
/* Dimensionado pela ALTURA: o lockup completo é praticamente quadrado (1,02:1),
   então é a altura que define a escala do header. A sombra projetada descola a
   placa das gravuras que passam atrás dela. */
.header__logo img {
  height: clamp(148px, 15.8vw, 215px);
  width: auto;
  aspect-ratio: 1400 / 1374;
  object-fit: contain;
  filter: drop-shadow(0 10px 26px rgba(10, 5, 4, 0.6));
}

/* ===== Faixa de navegação ===== */
.header__nav {
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(201, 150, 47, 0.24);
  border-bottom: 1px solid rgba(201, 150, 47, 0.12);
  background: linear-gradient(180deg, rgba(38, 20, 15, 0.9), rgba(21, 12, 10, 0.96));
}

.header__menubar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-md);
}

.header__menubar li {
  display: flex;
  align-items: center;
}

/* Separador discreto: um fio vertical que nasce e morre em transparência —
   marca a pausa entre os itens sem virar uma régua atravessando a faixa. */
.header__menubar li + li::before {
  content: '';
  width: 1px;
  height: 15px;
  margin: 0 clamp(10px, 2vw, 26px);
  background: linear-gradient(180deg, transparent, rgba(201, 150, 47, 0.55), transparent);
}

.header__menubar a {
  position: relative;
  display: inline-flex;
  align-items: center;
  /* 44px é o piso de área de toque recomendado (WCAG 2.5.5) — não desce mais
     que isso. A fonte não muda, só o ar acima e abaixo dela. */
  min-height: 44px;
  padding: 0 clamp(6px, 0.9vw, 12px);
  font-family: 'Oswald', var(--font-heading), sans-serif;
  font-size: clamp(0.84rem, 1.05vw, 0.98rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(240, 226, 206, 0.78);
  white-space: nowrap;
  transition: color 0.3s ease;
}

.header__menubar a::after {
  content: '';
  position: absolute;
  left: clamp(6px, 0.9vw, 12px);
  right: clamp(6px, 0.9vw, 12px);
  bottom: 13px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hd-brass-lit), transparent);
  transform: scaleX(0);
  transition: transform 0.32s ease;
}

.header__menubar a:hover,
.header__menubar a.is-active {
  color: var(--hd-brass-lit);
}

.header__menubar a:hover::after,
.header__menubar a.is-active::after {
  transform: scaleX(1);
}

/* O foco global é amarelo puro; dentro do header ele vira latão para não
   quebrar a paleta defumada. */
.header a:focus-visible {
  outline: 3px solid var(--hd-brass-lit);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .header__menubar a,
  .header__menubar a::after { transition: none; }
  /* O header entrava deslizando de cima; com movimento reduzido ele só está
     lá desde o início. */
  .header { animation: none; }
  .header__logo { transition: none; }
  /* Sem o transition, o :hover ainda daria um salto de escala — aqui a placa
     simplesmente não se mexe. */
  .header__logo:hover { transform: none; }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== Hero =====
   Direção: vitrine de açougue com acabamento contemporâneo. O produto fica
   dentro de um poço de luz quente sobre o balcão escuro — é a única
   "ousadia" da seção; o resto (tipo, botões, credenciais) fica disciplinado
   ao redor dela. */
.hero {
  position: relative;
  /* Menos respiro no topo do que embaixo: o header já entrega quase 240px de
     ar antes do H1, então 96px aqui empurravam a manchete para fora da
     primeira dobra em telas de notebook. */
  padding: var(--space-2xl) var(--space-lg) 104px;
  background-color: var(--text);
  background-image:
    radial-gradient(58% 64% at 74% 52%, rgba(255, 190, 84, 0.18), rgba(255, 150, 50, 0.05) 52%, transparent 74%),
    radial-gradient(74% 88% at 8% 0%, rgba(109, 26, 20, 0.4), transparent 62%);
  overflow: hidden;
}

.hero__grid {
  position: relative;
  z-index: 1;
  min-height: 520px;
}

.hero__text { max-width: 560px; }

.hero__title,
.hero__lead,
.hero__cta,
.hero__facts {
  opacity: 0;
  animation: fadeInUp 0.7s ease forwards;
}
.hero__title { animation-delay: 0.1s; }
.hero__lead { animation-delay: 0.25s; margin: 26px 0 var(--space-lg); color: rgba(251, 246, 238, 0.76); font-size: 1.06rem; line-height: 1.7; max-width: 44ch; }
.hero__cta { animation-delay: 0.4s; display: flex; align-items: center; gap: 14px 30px; flex-wrap: wrap; }
.hero__facts { animation-delay: 0.55s; }

.hero__title {
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2.5rem, 5.2vw, 4.3rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: #fff;
}
.hero__title-line--accent {
  color: var(--yellow);
  text-shadow: 0 0 28px var(--glow-yellow);
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

.btn--hero {
  background: var(--gradient-accent);
  color: var(--bordo-dark);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.86rem;
  padding: 17px 32px;
}
.btn--hero span {
  display: inline-block;
  transition: transform 0.25s ease;
}
.btn--hero:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-glow-yellow);
}
.btn--hero:hover span { transform: translateX(4px); }

/* CTA secundário: intenção de varejo ("onde compro isso?"), sem competir
   com o botão principal. */
.hero__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(251, 246, 238, 0.78);
  transition: color 0.25s ease;
}
.hero__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(50% - 0.95em);
  height: 1.5px;
  background: rgba(255, 203, 5, 0.45);
  transition: background 0.25s ease;
}
.hero__link:hover {
  color: var(--yellow);
}
.hero__link:hover::after {
  background: var(--yellow);
}

/* Credenciais: fatos verificáveis (data, nº de lojas, selo), não adjetivos.
   Deliberadamente diferente da faixa de valores logo abaixo.

   Grade, não flex-wrap: com quatro itens soltos sobrava sempre um órfão
   desalinhado na segunda linha. No desktop são quatro colunas dimensionadas
   pelo conteúdo, numa linha só; no celular viram 2x2 (ver bloco responsivo). */
.hero__facts {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: start;
  align-items: center;
  gap: 10px 18px;
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(251, 246, 238, 0.14);
}
.hero__facts li {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  /* Tracking mais curto que o resto dos rótulos: é o que faz os quatro fatos
     caberem numa linha só dentro da coluna de texto do hero. */
  letter-spacing: 0.09em;
  line-height: 1.35;
  color: rgba(251, 246, 238, 0.62);
  white-space: nowrap;
}
.hero__facts li::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 8px var(--glow-yellow);
  vertical-align: 2px;
}

/* A foto sangra até a borda direita da tela e se dissolve no fundo pela
   máscara — sem moldura, para não virar "card colado sobre o fundo". */
.hero__media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 52%;
  pointer-events: none;
}
.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 24%);
  mask-image: linear-gradient(to right, transparent 0%, #000 24%);
}

/* Carrossel: os slides ficam empilhados no mesmo espaço e só a opacidade
   muda, então a transição roda na GPU e não recalcula layout a cada troca. */
.hero-carousel {
  position: absolute;
  inset: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  transition: opacity 700ms ease-in-out;
  will-change: opacity;
}

.hero-slide.is-active { opacity: 1; }

/* Ken Burns discreto: zoom lento na foto que acabou de entrar, não no frame
   (que fica fixo). A duração casa com HOLD em js/script.js — mesmo tempo que
   a foto passa no ar — para o zoom terminar junto com a troca, não antes. */
.hero-slide .hero__img {
  transform-origin: center;
}
.hero-slide.is-active .hero__img {
  animation: heroKenBurns 4500ms ease-in-out forwards;
}

@keyframes heroKenBurns {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}

/* Marcação do carrossel: dots discretos que viram uma pequena barra de
   progresso quando ativos, preenchendo no tempo da foto. A rotação é
   ambiente, não um controle, por isso não é um botão. Criados pelo JS, então
   sem JS não há rotação e também não há marcação. Canto esquerdo, não
   direito: a marca d'água (abaixo) ocupa o inferior direito da foto. */
.hero-ticks {
  position: absolute;
  left: var(--space-lg);
  bottom: var(--space-lg);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-tick {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(251, 246, 238, 0.35);
  transition: width 300ms ease, background-color 300ms ease;
}

.hero-tick::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: left center;
}

/* Ativo: o dot vira pílula para dar espaço à barra de progresso. A duração
   vem do JS (--hero-hold), para o traço e o timer da troca não saírem de
   sincronia se o tempo de exibição mudar. */
.hero-tick.is-active {
  width: 28px;
  background: rgba(251, 246, 238, 0.28);
}
.hero-tick.is-active::after {
  animation: tick-fill var(--hero-hold, 4500ms) linear forwards;
}

.hero-ticks.is-paused .hero-tick::after { animation-play-state: paused; }

@keyframes tick-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Marca d'água discreta, no canto inferior direito da foto nos dois layouts.
   Acima dos slides e do scrim, mas pointer-events: none pra não atrapalhar
   clique/swipe. --space-lg aqui, --space-sm no mobile (ver bloco responsivo)
   porque o card lá é bem menor e a borda pede menos respiro. */
.hero-carousel__watermark {
  position: absolute;
  right: var(--space-lg);
  bottom: var(--space-lg);
  z-index: 2;
  width: clamp(32px, 9vw, 48px);
  height: auto;
  opacity: 0.6;
  pointer-events: none;
}

/* Escurecimento do card: só existe no layout mobile (ver bloco responsivo).
   No desktop a foto sangra pra fora do card e já tem a própria máscara. */
.hero-carousel__scrim {
  display: none;
}

/* Sem movimento: fica só a primeira foto, estática. Os demais slides saem do
   fluxo para o navegador não precisar nem compor as camadas. */
@media (prefers-reduced-motion: reduce) {
  .hero-slide {
    transition: none;
    display: none;
  }
  .hero-slide:first-child {
    display: block;
    opacity: 1;
  }
  .hero-slide .hero__img {
    animation: none;
  }
}
/* ===== Faixa de destaques ===== */
.highlights {
  background: var(--yellow);
}

.highlights__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.highlight-item {
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  transition: transform 0.25s ease;
}
.highlight-item:hover { transform: translateY(-4px); }

.highlight-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin-bottom: var(--space-sm);
  background: rgba(76, 17, 13, 0.08);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(76, 17, 13, 0.14);
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.highlight-item:hover .highlight-item__icon {
  background: rgba(76, 17, 13, 0.14);
  box-shadow: inset 0 0 0 1px rgba(76, 17, 13, 0.22);
}

.highlight-item h3 {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bordo-dark);
  margin-bottom: var(--space-3xs);
}

.highlight-item p {
  color: rgba(76, 17, 13, 0.78);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* ===== Reveal on scroll ===== */
.reveal, .reveal-item {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible, .reveal-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Quem Somos ===== */
/* Imagem e cartão dividem a mesma altura: com align-items:center a foto de
   340px flutuava centralizada ao lado de um cartão de ~460px, e as duas
   colunas não fechavam nem em cima nem embaixo. */
.about__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: var(--space-2xl);
  align-items: stretch;
}

.about__media { position: relative; border-radius: var(--radius-xl); overflow: hidden; }
.about__media img {
  height: 100%;
  min-height: 340px;
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius-xl);
  transition: transform 0.5s ease;
}
.about__media:hover img { transform: scale(1.05); }

.about__badge {
  position: absolute;
  left: var(--space-sm);
  bottom: var(--space-sm);
  background: rgba(43, 23, 18, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--bg);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.82rem;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.about__card,
.info-card,
.mission__card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-lg) 36px;
}

.about__card h2 { font-size: clamp(1.8rem, 2.6vw, 2.3rem); color: var(--bordo-dark); margin: 4px 0 var(--space-sm); }
.about__card p { color: var(--text-secondary); line-height: 1.7; margin-bottom: var(--space-xs); }
.about__card p:last-child { margin-bottom: 0; }

/* ===== Rastreabilidade ===== */
.traceability__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--space-xl);
}

.track-card {
  background: #fff;
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  padding-bottom: var(--space-md);
}
.track-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-elevated);
}

.track-card__img { position: relative; height: 190px; }
.track-card__img img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.track-card__img img[src*="selecao-animais"] { object-position: center 85%; }

.track-card__number {
  position: absolute;
  bottom: -20px;
  left: var(--space-sm);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--gradient-accent);
  color: var(--bordo-dark);
  font-family: var(--font-heading);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
  animation: pulseGlow 2.4s ease-in-out infinite;
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 203, 5, 0.5); }
  50% { box-shadow: 0 0 0 8px rgba(255, 203, 5, 0); }
}

/* Reserva a altura de duas linhas para que os parágrafos dos três cartões
   comecem na mesma altura, independentemente do título quebrar ou não. */
.track-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--bordo-dark);
  margin: var(--space-lg) var(--space-md) 10px;
  line-height: 1.25;
  min-height: calc(2 * 1.25em);
}
.track-card p { color: var(--text-secondary); padding: 0 var(--space-md); line-height: 1.7; font-size: 0.96rem; }

/* ===== Compromisso ===== */
.commitment__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: var(--space-xl);
  align-items: stretch;
}

.commitment__media {
  position: relative;
  min-height: 380px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.commitment__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.commitment__media:hover img { transform: scale(1.05); }
.commitment__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(43, 23, 18, 0.75), transparent 55%);
}
.commitment__caption {
  position: absolute;
  left: var(--space-md);
  bottom: var(--space-sm);
  z-index: 1;
  color: var(--bg);
  font-family: var(--font-heading);
  font-weight: 600;
}

.commitment__cards { display: flex; flex-direction: column; gap: var(--space-md); }
.commitment__cards .info-card p { color: var(--text-secondary); line-height: 1.7; }

.info-card--seal { display: flex; gap: var(--space-md); align-items: flex-start; }
.seal-badge {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--gradient-accent);
  color: var(--bordo-dark);
  font-family: var(--font-heading);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.info-card--seal h3 { color: var(--bordo-dark); margin-bottom: var(--space-3xs); font-size: 1.1rem; }

/* ===== Missão e valores ===== */
.mission__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: var(--space-lg);
  align-items: stretch;
}

/* O cartão estica para acompanhar a altura do de valores; centrar o conteúdo
   evita a poça de vazio embaixo. */
.mission__card {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.mission__card h3 { color: var(--bordo-dark); font-size: 1.4rem; margin: 4px 0 var(--space-xs); }
.mission__card p { color: var(--text-secondary); line-height: 1.7; }

.values-card {
  background: var(--gradient-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) 36px;
  box-shadow: var(--shadow-glow-bordo);
}
.values-card h3 { color: #fff; font-size: 1.4rem; margin: 4px 0 var(--space-sm); }

/* O mínimo da track é 140px EXPLÍCITO, e isso anula o min-width:auto do item de
   grade — a track não pode crescer até o min-content do chip. Medido: a pílula
   "Comprometimento" pede 158px, "Responsabilidade" 152px, "Sustentabilidade"
   145px. No desktop as três colunas dão 158,7px e passa raspando; basta o texto
   inflar um pouco (o font boosting do celular faz exatamente isso) para as
   palavras saírem para fora da pílula.

   O número fica em 140px para não mudar a contagem de colunas do desktop — o
   que segura o texto agora é o overflow-wrap do chip, e no celular a grade dá
   lugar a um flex-wrap onde cada pílula tem a largura do próprio conteúdo. */
.values-chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  gap: var(--space-xs);
}
.chip {
  min-width: 0;
  overflow-wrap: anywhere;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 203, 5, 0.3);
  color: var(--bg);
  border-radius: var(--radius-full);
  padding: 10px 16px;
  font-size: 0.88rem;
  text-align: center;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.chip:hover { background: rgba(255, 203, 5, 0.16); border-color: var(--yellow); transform: translateY(-2px); }

/* ===== Produtos ===== */
/* A linha amarela vive no cartão, não no corpo de texto: presa ao corpo ela
   cobria só a coluna da direita, deixando o traço partido no meio do cartão. */
.product-card {
  max-width: 860px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid rgba(43, 23, 18, 0.08);
  border-top: 3px solid var(--yellow);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-elevated); }

.product-card__media { min-height: 460px; }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; }

.product-card__body {
  padding: var(--space-xl) 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.product-card__body h3 { font-size: 2.1rem; color: var(--bordo-dark); margin: 4px 0 var(--space-sm); }
.product-card__body p { color: var(--text-secondary); line-height: 1.7; margin-bottom: var(--space-lg); }

/* As duas colunas (foto | texto) valem em qualquer tela — o canvas fixo garante
   que este cartão nunca fique estreito o bastante para precisar empilhar. */

/* ===== Onde Comprar / Delivery ===== */
.where {
  background: var(--text);
  padding: var(--space-3xl) 0;
}
/* Mesma medida de coluna das demais seções — antes esta era a única presa em
   900px, o que deixava a grade de lojas visivelmente mais estreita que as
   grades de rastreabilidade e compromisso logo acima. */
.where__inner {
  max-width: var(--container-max);
  text-align: center;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.stores-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--space-md);
  text-align: left;
  margin-top: var(--space-2xs);
}

.store-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.store-card:hover { transform: translateY(-4px); background: rgba(255, 255, 255, 0.1); box-shadow: var(--shadow-elevated); }

/* Nomes de uma linha reservam a altura de duas: sem isso, os horários das
   lojas de nome curto sobem e a grade fica com as faixas desalinhadas. */
.store-card__name {
  color: #fff;
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.3;
  min-height: calc(2 * 1.3em);
  margin-bottom: var(--space-2xs);
}
.store-card__notice { color: rgba(251, 246, 238, 0.55); font-style: italic; font-size: 0.8rem; margin-top: var(--space-2xs); }

/* align-items:flex-start, não center: quando "Domingo/Feriado: ..." quebra em
   duas linhas, o relógio precisa ficar junto da primeira, não boiando no meio.
   O texto é um item de flex anônimo e não encolhe abaixo do min-content — daí
   o overflow-wrap, já que "Domingo/Feriado:" não tem ponto de quebra natural. */
.store-card__hours {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  box-sizing: border-box;
  background: rgba(255, 203, 5, 0.1);
  border: 1px solid rgba(255, 203, 5, 0.28);
  color: var(--yellow);
  font-weight: 600;
  font-size: 0.78rem;
  line-height: 1.2;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  margin-top: 6px;
}
.store-card__hours svg { flex-shrink: 0; }


.store-card--renovation { border-style: dashed; opacity: 0.85; }
.store-card__badge {
  position: absolute;
  top: -12px;
  right: var(--space-sm);
  background: var(--gradient-accent);
  color: var(--bordo-dark);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}

/* Ações do card: dois botões dividindo 50% / 50% */
.store-card__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin-top: auto;
}

.store-btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.78rem;
  line-height: 1.2;
  text-align: center;
  transition: transform 0.2s ease, background 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}
.store-btn svg { flex-shrink: 0; }
.store-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.store-btn--whatsapp svg { color: #25d366; }

.store-btn--map {
  background: var(--gradient-accent);
  border: 1px solid var(--yellow);
  color: var(--bordo-dark);
}
.store-btn--map:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow-yellow); }

.store-btn--whatsapp {
  background: rgba(37, 211, 102, 0.14);
  border: 1px solid rgba(37, 211, 102, 0.32);
  color: rgba(255, 255, 255, 0.7);
}
.store-btn--whatsapp:hover {
  transform: translateY(-2px);
  background: rgba(37, 211, 102, 0.22);
  border-color: rgba(37, 211, 102, 0.45);
}

.store-btn--whatsapp.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.delivery {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  margin-top: var(--space-xl);
  padding-top: var(--space-xl);
  text-align: left;
}
.delivery h3 { color: #fff; font-size: 1.6rem; margin-bottom: var(--space-xs); }
.delivery > p { color: rgba(251, 246, 238, 0.85); margin-bottom: var(--space-lg); }

/* Mesma grade e mesmo respiro dos cards de loja, que ficam logo acima. */
.delivery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--space-md);
}
.delivery-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.delivery-card:hover { transform: translateY(-4px); background: rgba(255, 255, 255, 0.1); box-shadow: var(--shadow-elevated); }

.delivery-card__name {
  color: #fff;
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.3;
  margin-bottom: var(--space-2xs);
}
.delivery-card__address { color: rgba(251, 246, 238, 0.7); font-size: 0.85rem; line-height: 1.6; }

.delivery-card__action { flex: 0 0 auto; margin-top: auto; }

.delivery-card--soon {
  border-style: dashed;
  opacity: 0.85;
}
.delivery-card--soon:hover { transform: none; background: rgba(255, 255, 255, 0.06); box-shadow: none; }

.delivery-card__badge {
  position: absolute;
  top: -12px;
  right: var(--space-sm);
  background: var(--gradient-accent);
  color: var(--bordo-dark);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}

/* ===== CTA final ===== */
.cta-final {
  background: var(--gradient-accent);
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
}
.cta-final h2 {
  color: var(--bordo-dark);
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  margin-bottom: var(--space-lg);
}

/* ===== Footer ===== */
.footer {
  background: var(--text);
  color: #cfc2b6;
  padding: var(--space-2xl) var(--space-lg) 0;
}

.footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  max-width: var(--container-max);
  margin: 0 auto;
}

.footer__logo { height: 108px; width: auto; aspect-ratio: 1400 / 1374; object-fit: contain; margin-bottom: var(--space-sm); }
.footer__col p { line-height: 1.7; }
.footer__col h4 { color: #fff; font-family: var(--font-heading); font-weight: 600; margin-bottom: var(--space-sm); }

.social-list { display: flex; gap: var(--space-sm); margin-top: var(--space-sm); }
.social-list a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 44px;
  color: #cfc2b6;
  transition: color 0.25s ease;
}
.social-list a:hover { color: var(--yellow); }

.form-row { display: flex; gap: var(--space-xs); margin-bottom: var(--space-xs); }
.form-row input { flex: 1; min-width: 0; }

.contact-form input,
.contact-form textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: var(--space-xs);
  font-size: 0.92rem;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.contact-form input:hover,
.contact-form textarea:hover {
  border-color: rgba(255, 203, 5, 0.3);
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: rgba(255, 255, 255, 0.4); }

.form-feedback { margin-top: var(--space-xs); color: var(--yellow); font-size: 0.9rem; min-height: 1.2em; }

.footer__bottom {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-lg) 0;
  text-align: center;
  font-size: 0.85rem;
}

/* =====================================================================
   RESPONSIVO — dois layouts distintos
   =====================================================================
   Decisão (substitui o antigo "canvas fixo"): o celular NÃO é o desktop
   encolhido. O canvas travava header/main/footer em 1240px e aplicava
   `zoom: 100vw/1240px` — num aparelho de 390px isso era um fator de 0,31,
   e todo o site renderizava a um terço do tamanho: corpo de texto de 0,96rem
   virava 4,8px, a foto de 190px de altura virava 60px. Está preservado em
   css/style.css.bak-antes-mobile-2layouts, caso precise consultar.

   Agora cada largura tem o seu próprio layout:
   - Desktop (>1100px): intacto. Nada abaixo daqui o alcança.
   - Intermediário (769–1100px): só o hero aperta; a estrutura é a de desktop.
   - Celular (≤768px): empilhado, coluna única, imagens em largura total,
     tipografia com piso de 16px no corpo de texto.

   Como o `zoom` saiu, as grades `auto-fit` voltam a colapsar sozinhas — mas
   várias delas ganham contagem fixa aqui embaixo porque colapso automático
   deixava cartões meio-largos em faixas de largura intermediárias. */

/* ===== Intermediário: o hero aperta, o resto continua desktop ===== */
@media (min-width: 769px) and (max-width: 1100px) {
  .hero { padding: 72px var(--space-lg) 80px; }
  .hero__grid { min-height: 440px; }
  .hero__text { max-width: 52%; }
  .hero__title { font-size: clamp(2.1rem, 4.6vw, 3.2rem); }
  .hero__lead { font-size: 1rem; margin: 20px 0 28px; }
  .hero__cta { gap: 14px 20px; }
  .hero__facts { margin-top: var(--space-lg); padding-top: 18px; gap: 8px 14px; }
  .hero__media { width: 46%; }
}

/* Nesta faixa a coluna do hero (52% da tela) fica estreita demais para os
   quatro fatos numa linha só; 2x2 antes que eles quebrem feio. */
@media (min-width: 769px) and (max-width: 940px) {
  .hero__facts {
    grid-template-columns: 1fr 1fr;
    justify-content: stretch;
    max-width: 420px;
  }
  .hero__facts li { white-space: normal; }
}

/* ===== Header: a escala das gravuras e do menu ===== */
/* A estrutura do header (placa centrada + faixa) já é a mesma em toda largura;
   o que muda no caminho do celular é a escala. */
@media (max-width: 860px) {
  .header__brand { padding: 8px 20px 6px; }
  /* O piso (o valor à esquerda no clamp) cobre até celulares grandes como
     iPhone Pro Max (430px) — antes ficava em 132px ali, menor que em telas
     pequenas (144-158px pelo bloco ≤420px logo abaixo). Agora casa com ele. */
  .header__logo img { height: clamp(186px, 28vw, 210px); }
  /* Numa tela estreita o ladrilho do desktop caberia menos de uma vez, e as
     peças ficariam do tamanho da logo. Encolhe para manter a mesma densidade. */
  .header__bg-field {
    background-size: 360px auto;
    -webkit-mask-image: radial-gradient(46% 44% at 50% 44%, transparent 0%, rgba(0, 0, 0, 0.55) 48%, #000 90%);
    mask-image: radial-gradient(46% 44% at 50% 44%, transparent 0%, rgba(0, 0, 0, 0.55) 48%, #000 90%);
  }
  .header__menubar a {
    min-height: 44px;
    font-size: 0.84rem;
    letter-spacing: 0.16em;
  }
  .header__menubar li + li::before { margin: 0 14px; }
}

/* =====================================================================
   ===== CELULAR (≤768px) =====
   ===================================================================== */
@media (max-width: 768px) {

  /* ---- Respiro e medidas de página ---- */
  .section { padding: var(--space-2xl) 0; }
  .container { padding: 0 20px; }
  .where__inner { padding: 0 20px; }
  .footer { padding: var(--space-2xl) 20px 0; }
  .cta-final { padding: var(--space-2xl) 20px; }

  /* ---- Menu: uma linha ---- */
  /* Com a margem do separador fixa em 6px, o resto do respiro (preenchimento
     do container e de cada item) foi ao mínimo absoluto para abrir o último
     espaço possível: 0,93rem é o teto físico com os quatro itens atuais —
     0,94rem já estoura. É o limite real; não há mais folga a apertar. */
  .header__menubar {
    display: flex;
    flex-wrap: nowrap;
    padding: 0 2px;
  }
  .header__menubar li {
    justify-content: flex-start;
  }
  /* O fio do desktop é fino e de baixa opacidade — legível numa linha só de
     ~600px, mas some entre letras espremidas. Aqui ele fica sólido e mais
     alto: separa os itens sem gastar largura extra de peso (a caixa em si —
     largura e margem — é o que custa espaço, não a cor). */
  .header__menubar li + li::before {
    width: 2px;
    height: 22px;
    margin: 0 6px;
    background: linear-gradient(180deg, transparent, var(--hd-brass-lit) 20%, var(--hd-brass-lit) 80%, transparent);
  }
  .header__menubar a {
    justify-content: center;
    width: auto;
    min-height: 44px;
    padding: 0;
    font-size: 0.93rem;
    letter-spacing: 0;
    white-space: nowrap;
  }
  .header__menubar a::after { bottom: 11px; left: 10%; right: 10%; }

  /* ---- Hero: empilhado ---- */
  /* O poço de luz acompanha o produto, que passa a ficar abaixo do texto. */
  .hero {
    padding: 44px 20px 60px;
    background-image:
      radial-gradient(64% 34% at 50% 82%, rgba(255, 190, 84, 0.18), rgba(255, 150, 50, 0.05) 52%, transparent 74%),
      radial-gradient(90% 44% at 8% 0%, rgba(109, 26, 20, 0.4), transparent 62%);
  }
  .hero__grid { min-height: 0; }
  .hero__text { max-width: 100%; }
  /* O piso de 2.2rem é o tamanho de hoje e não desce: acima disso, "você
     confia," quebra em duas linhas numa tela de 320px e o título passa de
     quatro para seis linhas. Daí para cima ele cresce com a largura. */
  .hero__title { font-size: clamp(2.2rem, 4.5vw + 1.15rem, 3.4rem); line-height: 1.06; }
  .hero__lead {
    max-width: 100%;
    margin: 20px 0 var(--space-md);
    font-size: 1.0625rem;   /* 17px */
    line-height: 1.65;
  }
  .hero__cta { gap: var(--space-sm); }
  /* O rótulo quebra em duas linhas em telas de ≤360px. Como flex, o texto e a
     seta são itens separados e o → sobra sozinho na borda direita; em fluxo
     inline ele acompanha a última palavra. O padding menor é o que faz o
     rótulo caber numa linha só a partir de 390px. */
  .hero__cta .btn--hero {
    width: 100%;
    display: block;
    text-align: center;
    justify-content: center;
    padding: 17px 18px;
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  }
  .hero__link { font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.05rem); }

  /* Item 1: grade 2x2. As células dividem a largura em partes iguais, então
     não há órfão possível — e o nowrap do desktop sai, senão "12 lojas na
     Bahia" e "Indústria própria" estouram a célula em 360px. */
  .hero__facts {
    grid-template-columns: 1fr 1fr;
    justify-content: stretch;
    gap: var(--space-sm) var(--space-md);
    margin-top: var(--space-lg);
    max-width: 100%;
  }
  .hero__facts li {
    font-size: clamp(0.9rem, 0.85rem + 0.3vw, 1rem);   /* rótulo, não corpo de texto */
    letter-spacing: 0.07em;
    line-height: 1.4;
    white-space: normal;
  }

  /* Empilhado, o media volta ao fluxo e perde a altura que sustentava os
     slides absolutos — o carrossel passa a ser ele o bloco com altura. */
  .hero__media {
    position: static;
    width: auto;
    margin: var(--space-lg) 0 0;
    /* O media é irmão do .hero__grid, então não herda o padding do
       .container. Empilhado, isso deixava a foto 20px mais larga que o
       texto de cada lado. Repete o respiro do container. */
    padding: 0 20px;
  }
  .hero-carousel {
    position: relative;
    inset: auto;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-elevated);
  }
  .hero__img {
    height: 100%;
    border-radius: var(--radius-xl);
    -webkit-mask-image: none;
    mask-image: none;
  }
  /* O cartão da foto é bem menor que a coluna do desktop: dots e marca
     d'água encostam mais perto da borda. */
  .hero-ticks { left: var(--space-sm); bottom: var(--space-sm); }
  .hero-carousel__watermark { right: var(--space-sm); bottom: var(--space-sm); }

  /* Escurece a base da foto sem tampar o meio — é onde um texto sobreposto
     futuramente ganharia contraste. Fica atrás dos dots e da marca d'água.
     Só no mobile: no desktop a foto já tem a máscara de borda. */
  .hero-carousel__scrim {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(20, 8, 6, 0.6) 0%, rgba(20, 8, 6, 0) 55%);
    pointer-events: none;
  }

  /* ---- Faixa de destaques ---- */
  .highlights__grid { grid-template-columns: 1fr 1fr; }
  .highlight-item { padding: var(--space-lg) var(--space-sm); }
  .highlight-item__icon { width: 54px; height: 54px; }
  .highlight-item h3 { font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.3rem); }
  .highlight-item p { font-size: clamp(1rem, 0.95rem + 0.4vw, 1.0625rem); }

  /* ---- Tipografia geral (item 5) ---- */
  /* Piso de 16px em todo corpo de texto. Os rótulos em caixa alta (eyebrow,
     badges, fatos do hero) ficam abaixo disso de propósito: são etiquetas. */
  .eyebrow { font-size: clamp(0.85rem, 0.8rem + 0.25vw, 0.95rem); letter-spacing: 0.12em; }
  .section-heading { margin-bottom: var(--space-lg); }
  .section-heading h2 { font-size: clamp(2.05rem, 4.5vw + 0.75rem, 2.9rem); }
  .section-heading p { font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.2rem); line-height: 1.65; }
  .btn { font-size: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem); padding: 15px 26px; }
  .btn--outline-dark { padding: 13px 24px; }
  .cta-final h2 { font-size: clamp(1.85rem, 4.2vw + 0.7rem, 2.6rem); }
  .link-arrow { font-size: 1rem; }

  /* ---- Quem somos ---- */
  .about__grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  /* Item 2: a proporção passa a ser da imagem, não da altura do cartão ao
     lado — que no empilhado nem existe mais. object-fit:cover recorta, nunca
     estica. E a proporção é a MESMA do arquivo (industria-friggoms.jpg é
     3:2): em 4/3 o cover comia ~11% da largura e estreitava a fachada. */
  .about__media img {
    height: auto;
    min-height: 0;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
  }
  .about__badge { font-size: clamp(0.85rem, 0.8rem + 0.25vw, 0.95rem); padding: 9px 14px; left: var(--space-xs); bottom: var(--space-xs); }
  .about__card { padding: var(--space-md) var(--space-md); }
  .about__card h2 { font-size: clamp(1.85rem, 4vw + 0.7rem, 2.5rem); }
  .about__card p { font-size: clamp(1rem, 0.9rem + 0.7vw, 1.125rem); line-height: 1.7; }

  /* ---- Rastreabilidade (item 3) ---- */
  /* Uma coluna: os cartões ocupam a largura toda e as fotos vão junto. A
     altura fixa de 190px sai — quem manda agora é a proporção.
     E a proporção é a de cada arquivo, não uma caixa comum: os três têm
     formatos diferentes (1,42 / 1,72 / 1,50) e qualquer caixa única cortava
     pelo menos dois deles. Sem altura imposta, a imagem se deita inteira e o
     cartão cresce junto — vale para qualquer foto que entre no lugar depois.
     Lado a lado (desktop) a caixa comum continua, senão a fileira desalinha. */
  .traceability__grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .track-card__img { height: auto; aspect-ratio: auto; }
  .track-card__img img { height: auto; width: 100%; object-fit: cover; }
  /* A reserva de duas linhas existia para alinhar os três cartões lado a lado;
     empilhados ela só abre um buraco acima do parágrafo. */
  .track-card h3 { min-height: 0; font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.6rem); margin: var(--space-lg) var(--space-md) 10px; }
  .track-card p { font-size: clamp(1rem, 0.9rem + 0.7vw, 1.125rem); line-height: 1.7; }

  /* ---- Compromisso (item 4) ---- */
  .commitment__grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  /* O quadro alto e estreito do empilhamento cortava a equipe na altura do
     peito. Proporção 4:3 e o recorte puxado para cima devolvem os rostos. */
  .commitment__media {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
  .commitment__media img { object-position: center 35%; }
  .commitment__caption { font-size: clamp(1rem, 0.95rem + 0.4vw, 1.0625rem); left: var(--space-sm); }
  .info-card { padding: var(--space-md) var(--space-md); }
  .info-card p,
  .commitment__cards .info-card p { font-size: clamp(1rem, 0.9rem + 0.7vw, 1.125rem); line-height: 1.7; }
  .info-card--seal { gap: var(--space-sm); }
  .info-card--seal h3 { font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.35rem); }
  .seal-badge { width: 44px; height: 44px; }

  /* ---- Missão e valores (item 6) ---- */
  .mission__grid { grid-template-columns: 1fr; gap: var(--space-md); }
  .mission__card,
  .values-card { padding: var(--space-md) var(--space-md); }
  .mission__card h3,
  .values-card h3 { font-size: clamp(1.4rem, 1.25rem + 0.6vw, 1.7rem); }
  .mission__card p { font-size: clamp(1rem, 0.9rem + 0.7vw, 1.125rem); line-height: 1.7; }
  /* Flex no lugar da grade: cada pílula passa a ter a largura do seu próprio
     conteúdo, então não existe track estreita para o texto vazar. O cartão
     cresce conforme as linhas de chips que couberem. */
  .values-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .chip {
    flex: 0 1 auto;
    max-width: 100%;
    padding: 10px 16px;
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.0625rem);
    line-height: 1.35;
  }

  /* ---- Produtos ---- */
  /* O cartão era duas colunas fixas (1.35fr 1fr) porque o canvas garantia que
     nunca ficasse estreito. Sem o canvas, ele empilha. */
  .product-card { grid-template-columns: 1fr; max-width: 100%; }
  .product-card__media { min-height: 0; aspect-ratio: 3 / 4; }
  .product-card__media img { width: 100%; height: 100%; object-fit: cover; }
  .product-card__body { padding: var(--space-lg) var(--space-md); }
  .product-card__body h3 { font-size: clamp(1.85rem, 4vw + 0.7rem, 2.4rem); }
  .product-card__body p { font-size: clamp(1rem, 0.9rem + 0.7vw, 1.125rem); line-height: 1.7; margin-bottom: var(--space-md); }

  /* ---- Onde comprar (item 7) ---- */
  .stores-grid,
  .delivery-grid { grid-template-columns: 1fr; }
  .store-card,
  .delivery-card { padding: var(--space-md); }
  /* Mesmo motivo do h3 da rastreabilidade: alinhava faixas lado a lado que,
     em coluna única, não existem mais. */
  .store-card__name { min-height: 0; font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.35rem); }
  .delivery-card__name { font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.35rem); }
  .delivery-card__address { font-size: clamp(1rem, 0.95rem + 0.4vw, 1.0625rem); }
  .store-card__notice { font-size: clamp(1rem, 0.95rem + 0.4vw, 1.0625rem); }

  /* O texto vira fluxo inline em vez de item de flex: assim ele quebra linha
     dentro do quadro amarelo como qualquer parágrafo, e o relógio acompanha a
     primeira linha. É o que impede "Domingo/Feriado: 7h às 13h" de vazar. */
  .store-card__hours {
    display: block;
    font-size: clamp(1rem, 0.95rem + 0.4vw, 1.0625rem);
    line-height: 1.45;
    padding: 10px 12px;
  }
  .store-card__hours svg {
    display: inline-block;
    vertical-align: -2px;
    margin-right: 6px;
  }

  /* Dois botões por cartão, um sobre o outro em largura total. */
  .store-card__actions { gap: var(--space-2xs); }
  .store-btn { font-size: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem); min-height: 48px; padding: 12px; }
  .store-card__badge,
  .delivery-card__badge { font-size: clamp(0.8rem, 0.75rem + 0.25vw, 0.9rem); }

  .delivery { margin-top: var(--space-lg); padding-top: var(--space-lg); }
  .delivery h3 { font-size: clamp(1.5rem, 1.35rem + 0.6vw, 1.8rem); }
  .delivery > p { font-size: clamp(1rem, 0.9rem + 0.7vw, 1.125rem); line-height: 1.65; }

  /* ---- Rodapé ---- */
  .footer__grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .footer__logo { height: 92px; }
  .footer__col p { font-size: clamp(1rem, 0.9rem + 0.7vw, 1.125rem); line-height: 1.7; }
  .footer__col h4 { font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.3rem); }
  .social-list a { font-size: clamp(1rem, 0.95rem + 0.4vw, 1.0625rem); }
  /* Nome e sobrenome lado a lado ficam com ~150px cada em 360px — estreitos
     demais para o placeholder. Empilhados. */
  .form-row { flex-direction: column; gap: 0; }
  /* 16px é o piso: abaixo disso o iOS dá zoom sozinho ao focar o campo, e a
     página volta desalinhada. */
  .contact-form input,
  .contact-form textarea { font-size: 1rem; padding: 13px 14px; }
  /* O "Voltar ao topo" é fixo a 16px do fundo e, no fim do scroll, cobria a
     linha de copyright. O respiro extra passa o texto por baixo dele. */
  .footer__bottom {
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.0625rem);
    padding: var(--space-md) 0 calc(var(--space-md) + 56px);
  }
}

/* ===== Telas estreitas (≤420px) ===== */
@media (max-width: 420px) {
  .container,
  .where__inner { padding: 0 16px; }
  .footer { padding: var(--space-2xl) 16px 0; }
  .cta-final { padding: var(--space-xl) 16px; }

  .header__brand { padding: 6px 16px 5px; }
  /* Testado a 320px: sobram ~65px de cada lado até a borda da tela, então o
     teto não é a largura — é só o quanto o header deve dominar a primeira
     dobra. 190px deixa a logo bem maior que antes (144-158px) com folga de
     sobra. */
  .header__logo img { height: min(58vw, 190px); }
  .header__bg-field { background-size: 290px auto; }

  /* Acompanha o .container, que nesta faixa cai para 16px. */
  .hero__media { padding: 0 16px; }

  /* Os quatro destaques continuam 2x2: em 360px cada célula tem ~146px, e o
     mais longo ("Indústria própria") ocupa duas linhas sem estourar. */
  .hero__facts { gap: var(--space-xs) var(--space-sm); }

  /* Um destaque por linha: em 360px duas colunas dariam ~146px por item, e
     "Relacionamento próximo e atendimento dedicado" viraria seis linhas. */
  .highlights__grid { grid-template-columns: 1fr; }
  .highlight-item { padding: var(--space-md) var(--space-sm); }

  /* Só o respiro lateral cede aqui — nenhum tamanho de fonte desce nesta
     faixa, senão o corpo de texto sairia do piso de 16px. */
  .about__card,
  .info-card,
  .mission__card,
  .values-card { padding: var(--space-md) var(--space-sm); }

  .chip { padding: 9px 14px; }
}

/* ===== Celular deitado ===== */
/* Deitado a ALTURA some — sem isto o header sozinho ocupa a tela inteira e o
   hero não aparece nem raspando. A largura, por outro lado, sobra: 667–930px.
   Como isso ainda cai dentro do bloco ≤768px, a grade 2x2 do menu continua
   ligada e gasta duas linhas de altura à toa — aqui ela é desfeita. */
@media (max-height: 500px) and (orientation: landscape) {
  .header__brand { padding: 6px 20px 5px; }
  .header__logo img { height: clamp(72px, 15vh, 120px); }
  .header__menubar a { min-height: 38px; }
  .header__bg-field { background-size: 340px auto; }

  /* Menu numa linha só, como no desktop: os quatro itens ocupam ~520px dos
     667px da paisagem mais estreita. */
  .header__menubar { display: flex; padding: 0 var(--space-md); }
  .header__menubar li { justify-content: flex-start; border-bottom: none; }
  .header__menubar li:nth-child(odd) { border-right: none; }
  /* O ::before é item de flex do li, então `block` devolve o fio de 1x15px. */
  .header__menubar li + li::before { display: block; }
  /* A largura aqui (667-930px) sobra de sobra — sem isto o menu herdaria o
     0,62rem apertado do retrato ≤768px, que só existe porque 320px não tem
     espaço nenhum. Aqui tem. */
  .header__menubar a { width: auto; padding: 0 clamp(6px, 0.9vw, 12px); font-size: 0.84rem; letter-spacing: 0.14em; }
}