/* =========================================================
   SITE BERTOLIN — folha de estilo principal
   Versão 1 (provisória): as fotos são espaços reservados,
   representados por fundos coloridos. Serão trocadas pelas
   imagens do Figma quando o acesso ao arquivo for liberado.
   ========================================================= */

/* ---------- 1. Cores e fontes da marca ----------
   Valores retirados do Manual de Identidade Visual Bertolin (2023):
   primárias — Vermelho Bertolin, Sol, Água, Branco
   secundárias — Verde, Verde fruto, Terra, Terroso, Céu Azul  */
:root {
  --vermelho: #ef372e;   /* Vermelho Bertolin */
  --amarelo: #ffbf1f;    /* Sol */
  --azul: #305389;       /* Água */
  --branco: #ffffff;     /* Branco */

  --verde-escuro: #456633;  /* Verde */
  --verde-claro: #97bf41;   /* Verde fruto */
  --terra: #503629;         /* Terra */
  --terroso: #c65532;       /* Terroso */
  --ceu: #94bdf2;           /* Céu Azul */

  --verde-medio: #6d8c30;
  --verde-texto: #456633;
  --creme: #fbf8f1;
  --texto: #3b3b33;
  --texto-claro: #6d6d63;

  /* Títulos: ITC Souvenir, instalada no próprio site (assets/fonts). */
  --fonte-titulo: "ITC Souvenir", Georgia, serif;
  --fonte-texto: "Asap", "Segoe UI", Arial, sans-serif;

  --largura-maxima: 1200px;
  --transicao: 0.35s ease;
}

/* ---------- 1b. Fonte Asap instalada no próprio site ----------
   Arquivos oficiais enviados pela Bertolin, em assets/fonts.      */
@font-face { font-family: "Asap"; src: url("../fonts/Asap-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Asap"; src: url("../fonts/Asap-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Asap"; src: url("../fonts/Asap-500.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Asap"; src: url("../fonts/Asap-500italic.ttf") format("truetype"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Asap"; src: url("../fonts/Asap-600.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Asap"; src: url("../fonts/Asap-600italic.ttf") format("truetype"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Asap"; src: url("../fonts/Asap-700.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Asap"; src: url("../fonts/Asap-700italic.ttf") format("truetype"); font-weight: 700; font-style: italic; font-display: swap; }

/* ---------- 1c. ITC Souvenir (títulos) ----------
   Arquivos enviados pela Bertolin, convertidos para woff2 (mais leve,
   cerca de 36 KB cada) com o .ttf como reserva. Só existem o peso
   normal e o negrito, então os pesos intermediários usam o normal
   e os mais fortes usam o negrito — sem engrossar a fonte na marra. */
@font-face { font-family: "ITC Souvenir"; src: url("../fonts/Souvenir.woff2") format("woff2"), url("../fonts/Souvenir.ttf") format("truetype"); font-weight: 100 500; font-style: normal; font-display: swap; }
@font-face { font-family: "ITC Souvenir"; src: url("../fonts/SouvenirI.woff2") format("woff2"), url("../fonts/SouvenirI.ttf") format("truetype"); font-weight: 100 500; font-style: italic; font-display: swap; }
@font-face { font-family: "ITC Souvenir"; src: url("../fonts/SouvenirB.woff2") format("woff2"), url("../fonts/SouvenirB.ttf") format("truetype"); font-weight: 600 900; font-style: normal; font-display: swap; }
@font-face { font-family: "ITC Souvenir"; src: url("../fonts/SouvenirBI.woff2") format("woff2"), url("../fonts/SouvenirBI.ttf") format("truetype"); font-weight: 600 900; font-style: italic; font-display: swap; }

/* ---------- 2. Base ---------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

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

button, input, select, textarea { font-family: inherit; font-size: inherit; }

a { color: inherit; text-decoration: none; }

h1, h2, h3 {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
}

.container {
  width: 100%;
  max-width: var(--largura-maxima);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- 3. Botões ---------- */
.botao {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.2px;
  cursor: pointer;
  border: none;
  transition: transform var(--transicao), opacity var(--transicao);
}
.botao:hover { transform: translateY(-2px); opacity: 0.92; }

.botao--vermelho { background: var(--vermelho); color: var(--branco); }
.botao--verde-claro { background: var(--verde-claro); color: var(--verde-escuro); }
.botao--claro { background: var(--verde-claro); color: var(--verde-escuro); width: 100%; padding: 14px; font-size: 16px; }

/* ---------- 4. Cabeçalho ---------- */
.cabecalho {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding: 18px 0;
  transition: background var(--transicao), padding var(--transicao);
}
.cabecalho.rolou {
  background: rgba(69, 102, 51, 0.96);
  padding: 10px 0;
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.18);
}

.cabecalho__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo img { height: 72px; width: auto; }

.menu ul {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu li + li { border-left: 1px solid rgba(255, 255, 255, 0.45); }
.menu a {
  display: block;
  padding: 4px 22px;
  color: var(--branco);
  font-size: 15px;
  transition: color var(--transicao);
}
.menu a:hover { color: var(--amarelo); }

.cabecalho__social { display: flex; gap: 14px; color: var(--amarelo); }
.cabecalho__social a { display: flex; transition: opacity var(--transicao); }
.cabecalho__social a:hover { opacity: 0.7; }

.menu-botao {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.menu-botao span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--amarelo);
  transition: transform var(--transicao), opacity var(--transicao);
}
.menu-botao.aberto span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-botao.aberto span:nth-child(2) { opacity: 0; }
.menu-botao.aberto span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- 5. Ondas decorativas ---------- */
.onda { position: absolute; left: 0; width: 100%; line-height: 0; pointer-events: none; }
.onda svg { width: 100%; height: 120px; display: block; }
.onda--clara { bottom: -1px; }
.onda--grafismo { bottom: -1px; z-index: 3; }
.onda--grafismo svg { height: 190px; }
.onda--verde { top: -1px; }
.onda--amarela { top: -1px; }

/* ---------- 6. Banner principal ---------- */
.banner {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
}


.banner__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 60px;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.banner__slide.is-ativo { opacity: 1; }

/* Fundos provisórios — substituir por fotografias */
.banner__slide--1 { background: #8c1f12 url("../img/banner-tomates.jpg") center / cover no-repeat; }
.banner__slide--2 { background: #1b2713 url("../img/banner-2.jpg") center 68% / cover no-repeat; }
.banner__slide--3 { background: #2a3d1f url("../img/campo.jpg") center 50% / cover no-repeat; }
.banner__slide--25 { background: #2a3d1f url("../img/banner-25-anos.jpg") center 58% / cover no-repeat; }
.banner__conteudo--selo { display: flex; flex-direction: column; align-items: center; gap: 16px; transform: translateY(-8vh); }
.banner__selo {
  width: clamp(110px, 11vw, 150px);
  height: auto;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.35));
  animation: girar-selo 1.1s ease-out both;
}
@keyframes girar-selo { from { opacity: 0; transform: scale(0.6) rotate(-14deg); } to { opacity: 1; transform: none; } }

.banner__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.30);
}

.banner__conteudo { position: relative; z-index: 2; color: var(--branco); max-width: 980px; padding: 0 24px; }
.banner__conteudo h1 { font-size: clamp(32px, 5vw, 58px); }
.banner__conteudo h2 { font-size: clamp(30px, 4.6vw, 54px); }
.banner__conteudo p {
  margin: 14px auto 0;
  max-width: 520px;
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 400;
}

.banner__seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  padding: 10px;
  transition: color var(--transicao);
}
.banner__seta:hover { color: var(--amarelo); }
.banner__seta--anterior { left: 20px; }
.banner__seta--proximo { right: 20px; }

/* ---------- 7. Números ---------- */
.numeros { padding: 90px 0 80px; background: var(--branco); }

.titulo-secao {
  text-align: center;
  font-size: clamp(26px, 3vw, 34px);
  margin-bottom: 18px;
}
.titulo-secao--verde { color: var(--verde-texto); }

.subtitulo-secao {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 48px;
  color: var(--texto-claro);
}

.numeros__lista {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 46px 0 0;
  padding: 0;
  list-style: none;
}
.numeros__lista li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 12px 14px;
  text-align: center;
}
.numeros__lista li + li { border-left: 1px solid rgba(151, 191, 65, 0.6); }

.numeros__lista strong {
  font-family: var(--fonte-titulo);
  font-size: clamp(30px, 3vw, 40px);
  color: var(--verde-medio);
  font-weight: 700;
}
.numeros__rotulo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  color: var(--texto-claro);
  line-height: 1.25;
  text-align: left;
}
.numeros__rotulo em { font-style: normal; }
.numeros__rotulo svg { flex: none; color: var(--verde-medio); }

/* ---------- 8. Nossa história ---------- */
.historia {
  position: relative;
  background: #1b2713 url("../img/campo.jpg") center 55% / cover no-repeat;
  color: var(--branco);
  padding: 120px 0;
}
.historia::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.15));
}
.historia__texto { position: relative; max-width: 460px; }
.historia__texto h2 { font-size: clamp(28px, 3.6vw, 42px); margin-bottom: 18px; }
.historia__texto p { font-size: 16px; font-weight: 400; margin-bottom: 28px; }

/* ---------- 9. Produtos ---------- */
.produtos { padding: 90px 0 100px; background: var(--creme); }

.produtos__grade {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin: 0 0 48px;
  padding: 0;
  list-style: none;
}

.produto { text-align: left; }
.produto__imagem {
  height: 240px;
  border-radius: 14px;
  margin-bottom: 16px;
  background: var(--branco);
  overflow: hidden;
  transition: transform var(--transicao);
}
.produto__imagem img { width: 100%; height: 100%; object-fit: contain; }
.produto:hover .produto__imagem { transform: translateY(-4px); }

/* Fundos provisórios das fotos de produto */
.produto__imagem--tomate { background: linear-gradient(150deg, #ef372e, #8c1f12); }
.produto__imagem--salsao { background: linear-gradient(150deg, #97bf41, #456633); }
.produto__imagem--alface { background: linear-gradient(150deg, #8bb23f, #2a3d1f); }
.produto__imagem--alho { background: linear-gradient(150deg, #e7f0d5, #a9bd86); }

.produto h3 { font-size: 20px; color: var(--verde-texto); margin-bottom: 6px; }
.produto p { margin: 0; font-size: 14px; color: var(--texto-claro); }

.produtos__acao { text-align: center; }

/* ---------- 10. Contato ---------- */
.contato {
  position: relative;
  background: var(--verde-escuro);
  color: var(--branco);
  padding: 160px 0 110px;
}

.contato__interno {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

.contato__info h2 {
  font-size: clamp(28px, 3.2vw, 38px);
  color: var(--verde-claro);
  margin-bottom: 14px;
}
.contato__chamada { font-weight: 400; margin-bottom: 34px; }


.contato__lista { list-style: none; margin: 0 0 32px; padding: 0; }
.contato__lista li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
  font-size: 16px;
}
.contato__lista svg { flex: none; color: var(--verde-claro); margin-top: 3px; }

.contato__social { display: flex; gap: 18px; margin-top: 28px; color: var(--verde-claro); }
.contato__social a { transition: opacity var(--transicao); }
.contato__social a:hover { opacity: 0.7; }

/* Formulário */
.formulario { display: flex; flex-direction: column; gap: 14px; }

.campo { display: block; }
.campo__rotulo {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.campo input,
.campo textarea {
  width: 100%;
  padding: 13px 20px;
  border: 1px solid rgba(151, 191, 65, 0.7);
  border-radius: 999px;
  background: transparent;
  color: var(--branco);
  font-family: var(--fonte-texto);
  font-size: 15px;
  transition: border-color var(--transicao), background var(--transicao);
}
.campo textarea { border-radius: 22px; resize: vertical; }
.campo input::placeholder,
.campo textarea::placeholder { color: rgba(255, 255, 255, 0.6); }
.campo input:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--verde-claro);
  background: rgba(255, 255, 255, 0.06);
}

.campo-consentimento {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.45;
}
.campo-consentimento input { margin-top: 3px; accent-color: var(--verde-claro); }

.formulario__aviso { margin: 4px 0 0; font-size: 14px; min-height: 20px; }
.formulario__aviso.erro { color: #ffd9d3; }
.formulario__aviso.sucesso { color: var(--verde-claro); }

/* ---------- 11. Rodapé ---------- */
.rodape {
  position: relative;
  z-index: 2;
  margin-top: -140px;            /* as ondas avançam sobre a seção anterior */
  background: transparent;
  color: var(--azul);
  padding: 0;
  pointer-events: none;
}
.rodape__ondas { position: relative; height: 200px; }
.rodape__interno, .rodape__assinatura { background: var(--amarelo); pointer-events: auto; }
.rodape__interno { margin: 0; max-width: none; padding-left: max(24px, calc((100% - var(--largura-maxima)) / 2 + 24px)); padding-right: max(24px, calc((100% - var(--largura-maxima)) / 2 + 24px)); }

.rodape__ondas svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rodape__interno {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 10px 24px 56px;
}
.rodape__logo { height: 112px; width: auto; }
.rodape__contatos { list-style: none; margin: 0; padding: 0; font-size: 15px; }
.rodape__contatos li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; line-height: 1.4; }
.rodape__contatos svg { flex: 0 0 auto; margin-top: 2px; color: var(--vermelho); }

.rodape__social { display: flex; gap: 18px; color: var(--vermelho); }
.rodape__social a { transition: opacity var(--transicao); }
.rodape__social a:hover { opacity: 0.7; }

.rodape__assinatura {
  margin: 0;
  padding: 0 24px 18px;
  text-align: center;
  font-size: 13px;
  color: rgba(48, 83, 137, 0.85);
}

/* ---------- 12. Página A Bertolin ---------- */

/* Banner interno (mais baixo que o da página inicial) */
.banner--interno { height: 100vh; height: 100svh; min-height: 560px; }
.banner__slide--alface { background: #2a3d1f url("../img/campo.jpg") center 45% / cover no-repeat; }

/* Introdução */
.introducao { padding: 90px 0 70px; background: var(--branco); }
.introducao__texto {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  color: var(--texto-claro);
}
.introducao__texto p { margin: 0 0 14px; }

/* Linha do tempo */
.linha-tempo {
  position: relative;
  padding: 40px 0 70px;
  background: var(--branco);
}

.linha-tempo__trilho {
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  padding: 10px 0 20px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.linha-tempo__trilho::-webkit-scrollbar { display: none; }
.linha-tempo__trilho:focus-visible { outline: 2px solid var(--verde-medio); outline-offset: 4px; }

.linha-tempo__lista {
  position: relative;
  width: max-content;
  min-width: 100%;
  display: flex;
  align-items: stretch;
  gap: 40px;
  margin: 0;
  padding: 0 60px;
  list-style: none;
}
/* trilho horizontal contínuo atrás dos marcos */
.linha-tempo__lista::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(239, 55, 46, 0.55);
}

/* cada marco tem três faixas: cartão acima / linha / cartão abaixo.
   Assim a altura nasce do texto e nada fica cortado.               */
.marco {
  position: relative;
  flex: 0 0 330px;
  scroll-snap-align: center;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 96px minmax(0, 1fr);
}

.marco__cartao {
  width: 330px;
  background: var(--branco);
  border-radius: 16px;
  padding: 26px 26px 28px;
  box-shadow: 0 10px 30px rgba(69, 102, 51, 0.12);
}
.marco--acima .marco__cartao { grid-row: 1; align-self: end; }
.marco--abaixo .marco__cartao { grid-row: 3; align-self: start; }

.marco__foto {
  width: 330px;
  height: 210px;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(69, 102, 51, 0.12);
}
.marco__foto img { width: 100%; height: 100%; object-fit: cover; }
.marco--acima .marco__foto { grid-row: 3; align-self: start; }
.marco--abaixo .marco__foto { grid-row: 1; align-self: end; }
.marco__cartao h3 {
  font-size: 20px;
  color: var(--verde-texto);
  margin-bottom: 10px;
}
.marco__cartao p { margin: 0 0 10px; font-size: 14.5px; color: var(--texto-claro); line-height: 1.6; }
.marco__cartao p:last-child { margin-bottom: 0; }
.marco__cartao strong { color: var(--texto); font-weight: 600; }

.marco__ano {
  grid-row: 2;
  justify-self: start;
  margin-left: 6px;
  font-family: var(--fonte-titulo);
  font-size: 46px;
  font-weight: 700;
  color: var(--verde-medio);
  line-height: 1;
}
.marco--acima .marco__ano { align-self: start; }
.marco--abaixo .marco__ano { align-self: end; }

.marco__ponto {
  position: absolute;
  top: 50%;
  left: 28px;
  width: 13px;
  height: 13px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--vermelho);
}

.linha-tempo__seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  background: none;
  border: none;
  color: var(--amarelo);
  cursor: pointer;
  padding: 10px;
  transition: color var(--transicao);
}
.linha-tempo__seta:hover { color: var(--vermelho); }
.linha-tempo__seta--anterior { left: 6px; }
.linha-tempo__seta--proximo { right: 6px; }

/* Faixa com frase */
.faixa-frase {
  position: relative;
  background: #2a3d1f url("../img/banner-25-anos.jpg") center 60% / cover no-repeat;
  color: var(--branco);
  padding: 130px 0 190px;
}
.faixa-frase::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(27, 39, 19, 0.82), rgba(27, 39, 19, 0.45));
}
.faixa-frase .container {
  position: relative;
  display: flex;
  align-items: center;
  gap: 48px;
}
.faixa-frase__selo { width: clamp(140px, 16vw, 210px); height: auto; flex: 0 0 auto; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.35)); }
.faixa-frase h2 { font-size: clamp(28px, 3.6vw, 44px); margin-bottom: 14px; }
.faixa-frase p { margin: 0; font-size: clamp(17px, 1.6vw, 22px); color: var(--amarelo); font-weight: 600; }

.vinte-cinco {
  position: relative;
  background: #fffdf8;
  padding: 90px 0 0;
  text-align: center;
}
.vinte-cinco__titulo {
  font-size: clamp(30px, 3.8vw, 48px);
  color: var(--vermelho);
  margin-bottom: 48px;
}
.vinte-cinco__mosaico {
  display: block;
  width: 100%;
  height: auto;
}

/* Sustentabilidade */
.sustentabilidade { background: var(--verde-claro); padding: 20px 0 80px; }
.sustentabilidade__chamada {
  max-width: 860px;
  margin: 0 auto 52px;
  text-align: center;
  color: var(--verde-escuro);
  font-weight: 500;
  font-size: clamp(19px, 1.9vw, 24px);
  line-height: 1.5;
}
.sustentabilidade__grade {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.acao {
  position: relative;
  height: 230px;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 20px;
  color: var(--branco);
}
.acao span { position: relative; z-index: 2; font-family: var(--fonte-titulo); font-weight: 700; font-size: 19px; line-height: 1.25; transition: transform var(--transicao); }
.acao::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(27, 39, 19, 0.85) 100%);
  transition: background var(--transicao);
}
.acao__texto {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 2;
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--transicao), transform var(--transicao);
}
.acao:hover span, .acao:focus-within span { transform: translateY(-92px); }
.acao:hover .acao__texto, .acao:focus-within .acao__texto { opacity: 1; transform: none; }
.acao:hover::after, .acao:focus-within::after { background: linear-gradient(180deg, rgba(27, 39, 19, 0.25) 0%, rgba(27, 39, 19, 0.92) 100%); }
@media (hover: none) {
  .acao { height: auto; min-height: 250px; padding: 20px; flex-direction: column; align-items: flex-start; justify-content: space-between; }
  .acao span { transform: none; }
  .acao__texto { position: static; opacity: 1; transform: none; margin-top: 60px; font-size: 14px; }
  .acao::after { background: linear-gradient(180deg, rgba(27, 39, 19, 0.7) 0%, rgba(27, 39, 19, 0.15) 40%, rgba(27, 39, 19, 0.9) 100%); }
}
.acao--agua { background: #2a3d1f url("../img/acao-agua.jpg") center 60% / cover no-repeat; }
.acao--embalagem { background: #2a3d1f url("../img/acao-embalagens.jpg") center 55% / cover no-repeat; }
.acao--transparencia { background: #fff url("../img/produtos/p-20.jpg") center / 96% auto no-repeat; }
.acao--processos { background: #2a3d1f url("../img/acao-processos.jpg") center / cover no-repeat; }

/* Valores */
.valores { padding: 90px 0 100px; background: var(--branco); }
.titulo-secao--vermelho { color: var(--vermelho); margin-bottom: 54px; }
.valores__lista {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 46px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
.valores__lista svg { color: var(--verde-medio); margin: 0 auto 16px; display: block; }
.valores__lista h3 { font-size: 21px; font-weight: 700; color: var(--verde-medio); margin-bottom: 10px; }
.valores__lista p { margin: 0; font-size: 15px; color: var(--texto-claro); }

.onda--verde-claro { bottom: -1px; top: auto; }

.menu a.ativo { color: var(--amarelo); }



/* ---------- 14. Mosaico de categorias (página inicial) ---------- */
.mosaico {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: 18px;
  margin: 0 0 48px;
  padding: 0;
  list-style: none;
}
.mosaico__item { aspect-ratio: 1 / 1.15; border-radius: 14px; box-shadow: 0 6px 22px rgba(69, 102, 51, 0.10); }
.mosaico__item a {
  position: relative;
  display: block;
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
}
.mosaico__item span {
  position: absolute;
  left: 22px;
  bottom: 20px;
  z-index: 2;
  color: var(--branco);
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 26px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--transicao), transform var(--transicao);
}
.mosaico__item a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(27,39,19,0.8) 100%);
  opacity: 0;
  transition: opacity var(--transicao);
}
.mosaico__item a:hover::after, .mosaico__item a:focus-visible::after { opacity: 1; }
.mosaico__item a:hover span, .mosaico__item a:focus-visible span { opacity: 1; transform: none; }
@media (hover: none) {
  .mosaico__item span, .mosaico__item a::after { opacity: 1; transform: none; }
}

/* alturas do mosaico, iguais às do Figma */
.mosaico__item--a { background: #fff url("../img/produtos/p-06.jpg") center / 90% auto no-repeat; }
.mosaico__item--b { background: #fff url("../img/produtos/p-08.jpg") center / 90% auto no-repeat; }
.mosaico__item--c { background: #fff url("../img/produtos/p-20.jpg") center / 90% auto no-repeat; }
.mosaico__item--d { background: #fff url("../img/produtos/molho-temperado-350.png") center / 90% auto no-repeat; }

/* ---------- 15. Destaque Sweet Grape ---------- */
.destaque-produto {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: var(--branco);
}
.destaque-produto__texto {
  background: #ececeb;
  padding: 90px clamp(24px, 6vw, 110px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.destaque-produto__texto h2 { font-size: clamp(32px, 4vw, 52px); color: var(--vermelho); margin-bottom: 14px; }
.destaque-produto__texto p.destaque-produto__linha {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: clamp(18px, 2vw, 24px);
  color: var(--verde-texto);
  margin: 0 0 22px;
}
.destaque-produto__texto p { font-size: 15.5px; color: var(--texto-claro); margin: 0; max-width: 480px; }
.destaque-produto__foto {
  position: relative;
  z-index: 3;
  min-height: 420px;
  margin-bottom: -84px;          /* avança sobre a faixa do molho */
  border-radius: 0 0 22px 22px;
  background: #f4b410 url("../img/sweet-grape.png") center / cover no-repeat;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

/* ---------- 16. Molho de tomate ---------- */
.molho {
  position: relative;
  z-index: 2;
  margin-top: -28px;
  background: var(--vermelho);
  padding: 0;
  overflow: hidden;
  /* bordas serrilhadas, como no design */
  clip-path: polygon(0 3%, 2.5% 0, 5% 3%, 7.5% 0, 10% 3%, 12.5% 0, 15% 3%, 17.5% 0, 20% 3%, 22.5% 0, 25% 3%, 27.5% 0, 30% 3%, 32.5% 0, 35% 3%, 37.5% 0, 40% 3%, 42.5% 0, 45% 3%, 47.5% 0, 50% 3%, 52.5% 0, 55% 3%, 57.5% 0, 60% 3%, 62.5% 0, 65% 3%, 67.5% 0, 70% 3%, 72.5% 0, 75% 3%, 77.5% 0, 80% 3%, 82.5% 0, 85% 3%, 87.5% 0, 90% 3%, 92.5% 0, 95% 3%, 97.5% 0, 100% 3%, 100% 97%, 97.5% 100%, 95% 97%, 92.5% 100%, 90% 97%, 87.5% 100%, 85% 97%, 82.5% 100%, 80% 97%, 77.5% 100%, 75% 97%, 72.5% 100%, 70% 97%, 67.5% 100%, 65% 97%, 62.5% 100%, 60% 97%, 57.5% 100%, 55% 97%, 52.5% 100%, 50% 97%, 47.5% 100%, 45% 97%, 42.5% 100%, 40% 97%, 37.5% 100%, 35% 97%, 32.5% 100%, 30% 97%, 27.5% 100%, 25% 97%, 22.5% 100%, 20% 97%, 17.5% 100%, 15% 97%, 12.5% 100%, 10% 97%, 7.5% 100%, 5% 97%, 2.5% 100%, 0 97%);
}
.molho__interno {
  position: relative;
  display: grid;
  grid-template-columns: 33% 33% 34%;
  align-items: center;
  min-height: 680px;
}

/* mancha creme colada na borda esquerda, como no Figma */
.molho__selo {
  position: relative;
  align-self: stretch;
  min-height: 680px;
  display: flex;
  align-items: flex-start;
}
.molho__respingo {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.molho__selo-texto {
  position: relative;
  padding: 64px 0 0 clamp(24px, 4.6vw, 66px);
  color: var(--vermelho);
}
.molho__chamada {
  display: block;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: clamp(20px, 2vw, 28px);
  margin-bottom: 8px;
}
.molho__selo h2 { font-size: clamp(54px, 6.6vw, 96px); line-height: 0.8; letter-spacing: -1px; }

/* potes flutuando sobre a faixa */
.molho__potes { position: relative; height: 560px; }
.pote {
  position: absolute;
  width: auto;
  animation: flutuar 6s ease-in-out infinite;
  filter: drop-shadow(0 22px 34px rgba(90, 10, 5, 0.35));
}
.pote--tras { left: 40%; top: 110px; height: 460px; animation-delay: -3s; }
.pote--frente { left: -8%; top: 150px; height: 500px; }
@keyframes flutuar {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -12px; }
}
@media (prefers-reduced-motion: reduce) { .pote { animation: none; } }

/* texto à direita: MOLHO / DE TOMATE / marca */
.molho__texto { color: var(--creme); padding: 130px clamp(24px, 3vw, 48px) 60px 44px; white-space: nowrap; }
.molho__texto h3 { line-height: 0.92; margin-bottom: 30px; }
.molho__linha1 { display: block; font-size: clamp(44px, 5.6vw, 82px); text-transform: uppercase; letter-spacing: 1px; }
.molho__linha2 { display: block; font-size: clamp(30px, 3.9vw, 56px); text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; }
.molho__marca { display: block; width: min(100%, 360px); height: auto; margin-top: 12px; }
.molho__texto p { font-size: clamp(15px, 1.25vw, 18px); line-height: 1.7; max-width: 420px; margin: 0; white-space: normal; }


/* ---------- 17. Clientes ---------- */
.clientes { padding: 80px 0 70px; background: var(--branco); }
/* Esteira: os logos deslizam devagar, em loop, e param ao passar o mouse */
.esteira {
  margin-top: 44px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.clientes__lista {
  display: flex;
  align-items: center;
  gap: 64px;
  width: max-content;
  margin: 0;
  padding: 0 32px;
  list-style: none;
  animation: esteira 38s linear infinite;
}
.esteira:hover .clientes__lista { animation-play-state: paused; }
@keyframes esteira {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .clientes__lista { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .clientes__lista li[aria-hidden="true"] { display: none; }
}
.clientes__lista li { display: flex; align-items: center; }
.clientes__lista img {
  width: var(--l, 130px);
  height: auto;
  filter: grayscale(0);
  transition: transform var(--transicao);
}
.clientes__lista img:hover { transform: scale(1.04); }
.aviso-provisorio { text-align: center; font-size: 12.5px; color: #b9b9b2; margin: 26px 0 0; font-style: italic; }

/* ---------- 18. Cuidado que se sente ---------- */
.cuidado { padding: 20px 0 80px; background: var(--branco); }
.cuidado__cartao {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 46px clamp(24px, 5vw, 60px);
  color: var(--branco);
  background: #2a3d1f url("../img/cuidado.jpg") center 45% / cover no-repeat;
}
.cuidado__cartao::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 30%, rgba(0,0,0,0.55) 100%);
}
.cuidado__sol, .cuidado__cartao h2 { position: relative; }
.cuidado__sol { width: 96px; height: auto; margin-bottom: 20px; }
.cuidado__cartao h2 { font-size: clamp(30px, 3.6vw, 46px); }

/* ---------- 19. Diferenciais ---------- */
.diferenciais { padding: 60px 0 90px; background: var(--branco); }
.diferenciais__chamada {
  max-width: 760px;
  margin: 0 auto 56px;
  text-align: center;
  color: var(--verde-texto);
  font-weight: 600;
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.6;
}
.diferenciais__lista {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 46px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
.diferenciais__lista svg { color: var(--vermelho); margin: 0 auto 16px; display: block; }
.diferenciais__lista h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--verde-medio);
  margin-bottom: 10px;
}
.diferenciais__lista p { margin: 0; font-size: 14.5px; color: var(--texto-claro); }

/* ---------- 20. Onde encontrar ---------- */
.mapa {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  align-items: stretch;
  background: var(--branco);
}
.mapa__texto {
  background: var(--vermelho);
  color: var(--amarelo);
  padding: 90px clamp(24px, 6vw, 90px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.mapa__texto h2 { font-size: clamp(30px, 3.6vw, 46px); margin-bottom: 18px; }
.mapa__texto p { margin: 0; font-size: 15px; color: var(--branco); }
.mapa__imagem {
  min-height: 420px;
  background: #ececeb url("../img/mapa-sul.jpg") center / cover no-repeat;
}

/* ---------- 21. Parceria ---------- */
.parceria { padding: 80px 0; background: var(--branco); }
.parceria__cartao {
  border-radius: 18px;
  padding: 80px clamp(24px, 6vw, 90px);
  text-align: center;
  color: var(--branco);
  /* imagem provisória com véu azul */
  background: linear-gradient(180deg, rgba(48,83,137,0.82), rgba(48,83,137,0.82)), linear-gradient(140deg, #456633, #2a3d1f);
}
.parceria__cartao h2 { color: var(--amarelo); font-size: clamp(30px, 3.6vw, 46px); margin-bottom: 20px; }
.parceria__cartao p { max-width: 560px; margin: 0 auto 14px; font-size: 15px; }
.parceria__destaque { color: var(--amarelo); font-weight: 600; margin-bottom: 28px !important; }

/* ---------- 22. Família Bertolin ---------- */
.familia { padding: 70px 0 20px; background: var(--branco); text-align: center; }
.familia .subtitulo-secao { margin-bottom: 34px; }
.familia__acao { margin-bottom: 60px; }

.botao--amarelo { background: var(--amarelo); color: var(--vermelho); font-weight: 600; }

/* ---------- 23. Telas menores ---------- */
@media (max-width: 980px) {
  .destaque-produto, .mapa { grid-template-columns: 1fr; }
  .molho__interno { grid-template-columns: 1fr 1fr; row-gap: 20px; min-height: 0; }
  .molho__selo { grid-column: 1; min-height: 420px; }
  .molho__potes { grid-column: 2; height: 420px; }
  .pote { height: 320px; }
  .pote--frente { height: 340px; left: 4%; top: 70px; }
  .molho__texto { grid-column: 1 / -1; padding: 0 24px 50px; }
  .diferenciais__lista { grid-template-columns: 1fr; gap: 34px; }
  .mosaico { grid-template-columns: repeat(2, 1fr); }
  .produtos__grade { grid-template-columns: repeat(2, 1fr); }
  .sustentabilidade__grade { grid-template-columns: repeat(2, 1fr); }
  .valores__lista { grid-template-columns: 1fr; gap: 34px; }
  .contato__interno { grid-template-columns: 1fr; gap: 44px; }
  .numeros__lista { grid-template-columns: repeat(2, 1fr); row-gap: 10px; }
  .numeros__lista li:nth-child(3) { border-left: none; }
}

@media (max-width: 760px) {
  .destaque-produto__foto { margin-bottom: 0; border-radius: 0; }
  .molho__interno { grid-template-columns: 1fr; min-height: 0; }
  .molho__selo, .molho__potes, .molho__texto { grid-column: 1; }
  /* celular: o vermelho sobe sobre a foto amarela; serrilhado largo e baixo (44 x 12 px) */
  .molho { margin-top: -48px; padding-top: 60px; clip-path: polygon(-22px 0px, 0px 12px, 22px 0px, 44px 12px, 66px 0px, 88px 12px, 110px 0px, 132px 12px, 154px 0px, 176px 12px, 198px 0px, 220px 12px, 242px 0px, 264px 12px, 286px 0px, 308px 12px, 330px 0px, 352px 12px, 374px 0px, 396px 12px, 418px 0px, 440px 12px, 462px 0px, 484px 12px, 506px 0px, 528px 12px, 550px 0px, 572px 12px, 594px 0px, 616px 12px, 638px 0px, 660px 12px, 682px 0px, 704px 12px, 726px 0px, 748px 12px, 770px 0px, 792px 12px, 814px 0px, 836px 12px, 858px 0px, 880px 12px, 902px 0px, 924px 12px, 946px 0px, 968px 12px, 990px 0px, 1012px 12px, 1034px 0px, 1056px 12px, 1078px 0px, 1100px 12px, 1122px 0px, 1144px 12px, 1166px 0px, 1188px 12px, 1200px 100%, 1178px calc(100% - 12px), 1156px 100%, 1134px calc(100% - 12px), 1112px 100%, 1090px calc(100% - 12px), 1068px 100%, 1046px calc(100% - 12px), 1024px 100%, 1002px calc(100% - 12px), 980px 100%, 958px calc(100% - 12px), 936px 100%, 914px calc(100% - 12px), 892px 100%, 870px calc(100% - 12px), 848px 100%, 826px calc(100% - 12px), 804px 100%, 782px calc(100% - 12px), 760px 100%, 738px calc(100% - 12px), 716px 100%, 694px calc(100% - 12px), 672px 100%, 650px calc(100% - 12px), 628px 100%, 606px calc(100% - 12px), 584px 100%, 562px calc(100% - 12px), 540px 100%, 518px calc(100% - 12px), 496px 100%, 474px calc(100% - 12px), 452px 100%, 430px calc(100% - 12px), 408px 100%, 386px calc(100% - 12px), 364px 100%, 342px calc(100% - 12px), 320px 100%, 298px calc(100% - 12px), 276px 100%, 254px calc(100% - 12px), 232px 100%, 210px calc(100% - 12px), 188px 100%, 166px calc(100% - 12px), 144px 100%, 122px calc(100% - 12px), 100px 100%, 78px calc(100% - 12px), 56px 100%, 34px calc(100% - 12px), 12px 100%, -10px calc(100% - 12px)); }
  .molho__selo { min-height: 0; height: 110vw; max-height: 460px; }
  .molho__selo-texto { padding-top: 40px; }
  .molho__selo h2 { font-size: clamp(46px, 14vw, 60px); }
  .molho__texto { padding-top: 0; }
  .molho__potes { height: 300px; margin-top: -90px; }
  .pote--frente { top: 20px; }
  .pote--tras { top: 0; }
  .contato { padding: 120px 0 56px; }
  .contato--pagina { padding-top: 70px; }
  .pote { height: 260px; }
  .pote--frente { height: 280px; left: 10%; }
  .pote--tras { left: 50%; }
  .cuidado__cartao { min-height: 330px; }
  .clientes__lista { gap: 40px; }
  .clientes__lista img { width: calc(var(--l, 130px) * 0.8); }
  .onda--grafismo svg { height: 120px; }
  body { font-size: 16px; }

  .menu-botao { display: flex; }
  .cabecalho__social { display: none; }

  .menu {
    position: fixed;
    inset: 0 0 0 30%;
    background: rgba(69, 102, 51, 0.98);
    transform: translateX(100%);
    transition: transform var(--transicao);
    padding-top: 90px;
  }
  .menu.aberto { transform: translateX(0); }
  .menu ul { flex-direction: column; align-items: flex-start; gap: 6px; padding: 0 28px; }
  .menu li + li { border-left: none; }
  .menu a { padding: 12px 0; font-size: 17px; }

  .banner { height: 88vh; }
  .banner__selo { width: 130px; }
  .banner__seta { display: none; }

  .numeros { padding: 70px 0 60px; }
  .numeros__lista { grid-template-columns: 1fr; }
  .numeros__lista li { padding: 12px 0; }
  .numeros__lista li + li { border-left: none; border-top: 1px solid rgba(151, 191, 65, 0.5); }

  .historia { padding: 90px 0; }
  .produtos__grade { grid-template-columns: 1fr; gap: 22px; }
  .produto__imagem { height: 200px; }

  .onda svg { height: 70px; }

  .banner--interno { height: 88vh; min-height: 480px; }
  .introducao { padding: 60px 0 40px; }

  .linha-tempo__lista { gap: 26px; padding: 0 24px; }
  .marco { flex-basis: 280px; }
  .marco__cartao, .marco__foto { width: 280px; }
  .linha-tempo__seta { display: none; }

  .faixa-frase { padding: 90px 0 130px; }
  .faixa-frase .container { flex-direction: column; text-align: center; gap: 26px; }
  .vinte-cinco { padding: 60px 0 0; }
  .sustentabilidade__grade { grid-template-columns: 1fr; }
  .acao { height: 200px; }
  .valores { padding: 70px 0 80px; }

  .rodape__interno { flex-direction: column; align-items: flex-start; text-align: left; }
  .rodape { margin-top: -110px; }
  .rodape__ondas { height: 150px; }
  .rodape__logo { height: 84px; }
}


/* ---------- 24. Páginas internas ---------- */
.banner__slide--produtos { background: #2a3d1f url("../img/cat-folhas.jpg") center 40% / cover no-repeat; }
.banner__slide--onde { background: #1b2713 url("../img/banner-logistica.jpg") center 52% / cover no-repeat; }
.banner__slide--onde .banner__conteudo { transform: translateY(-14vh); }

/* Contato: fundo verde escuro com a marca em blocos */
.banner--contato { height: auto; min-height: 100vh; min-height: 100svh; }
.banner--contato .banner__slide--contato { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; }
.banner__slide--contato {
  position: relative;
  background: var(--verde-escuro);
  padding: 150px 0 90px;
  display: block;
}
.banner__contato {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 360px 1fr;
  align-items: center;
  gap: 60px;
}
.banner__berto {
  height: min(62vh, 520px);
  width: auto;
  justify-self: center;
}
.banner__contato h1 { font-size: clamp(32px, 4.4vw, 58px); color: var(--branco); text-align: left; font-weight: 700; }
.contato--pagina { padding-top: 90px; }
.banner--aviso .banner__contato > div { text-align: left; }
.banner__aviso-texto { color: var(--branco); font-size: clamp(16px, 1.4vw, 19px); margin: 16px 0 28px; max-width: 460px; }

/* Catálogo */
.catalogo { padding: 60px 0 90px; background: var(--branco); }
.catalogo__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 40px;
}
.catalogo__topo .titulo-secao { margin: 0; text-align: left; }
.filtro { display: flex; align-items: center; gap: 10px; }
.filtro__rotulo { font-size: 14px; color: var(--vermelho); }
.filtro__campo {
  border: 1px solid var(--vermelho);
  color: var(--vermelho);
  background: var(--branco);
  border-radius: 999px;
  padding: 8px 16px;
  font-family: var(--fonte-texto);
  font-size: 14px;
}
.produto__imagem--legumes { background: linear-gradient(150deg, #e7f0d5, #a9bd86); }
.produto__imagem--folhas { background: linear-gradient(150deg, #b5d472, #456633); }
.produto__imagem--tomates { background: linear-gradient(150deg, #ef372e, #8c1f12); }
.produto__imagem--molhos { background: #8c1f12 url("../img/cat-industrializados.jpg") 55% center / cover no-repeat; }
.produto.escondido { display: none; }

@media (max-width: 760px) {
  .banner__contato { grid-template-columns: 1fr; gap: 30px; }
  .banner__berto { height: 300px; }
  .catalogo__topo { flex-direction: column; align-items: flex-start; }
}

/* ---------- 30. Folga para o rodapé ----------
   O rodapé sobe 140px sobre a seção anterior (ondas translúcidas);
   estas regras garantem que o conteúdo não fique escondido. */
.vinte-cinco, .valores, .catalogo, .parceria, .contato { padding-bottom: 220px; }
.vinte-cinco { padding-bottom: 120px; }
.vinte-cinco__mosaico { margin-bottom: 0; }
.banner--aviso .banner__slide--contato { padding-bottom: 220px; }
@media (max-width: 760px) {
  .valores, .catalogo, .parceria, .contato { padding-bottom: 170px; }
  .banner--aviso .banner__slide--contato { padding-bottom: 170px; }
}