:root {
  --verde-escuro: #1f5c2e;
  --verde: #2f8f3f;
  --verde-claro: #e7f4e8;
  --laranja: #f2994a;
  --laranja-escuro: #d97a2b;
  --texto: #26332a;
  --texto-claro: #5c6b60;
  --branco: #ffffff;
  --sombra: 0 10px 30px rgba(31, 92, 46, 0.12);
  --raio: 16px;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  color: var(--texto);
  background: var(--branco);
  line-height: 1.6;
}

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

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

.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Topbar ---------- */
.topbar {
  background: var(--verde-escuro);
  color: #d9ead9;
  font-size: 0.85rem;
  padding: 8px 0;
}
.topbar .container { display: flex; justify-content: flex-end; gap: 24px; flex-wrap: wrap; }
.topbar a { color: #d9ead9; }
.topbar a:hover { color: var(--branco); }

/* ---------- Header ---------- */
header.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--branco);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
}
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.4rem; color: var(--verde-escuro); }

/* ---------- logo ---------- */
.logo img { height: 80px; width: auto; }





nav.menu ul { display: flex; gap: 32px; list-style: none; }
nav.menu a { font-weight: 600; color: var(--texto); transition: color .2s; }
nav.menu a:hover { color: var(--verde); }
.btn-menu-toggle { display: none; background: none; border: none; font-size: 1.8rem; color: var(--verde-escuro); cursor: pointer; }

.btn {
  display: inline-block;
  padding: 14px 30px;
  border-radius: 999px;
  font-weight: 700;
  background: var(--laranja);
  color: var(--branco);
  transition: transform .2s, background .2s;
  border: none;
  cursor: pointer;
}
.btn:hover { background: var(--laranja-escuro); transform: translateY(-2px); }
.btn-secundario { background: var(--verde-claro); color: var(--verde-escuro); }
.btn-secundario:hover { background: #d5ecd7; }
.btn-outline { background: transparent; border: 2px solid var(--branco); color: var(--branco); }
.btn-outline:hover { background: var(--branco); color: var(--verde-escuro); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  color: var(--branco);
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(20,60,25,0.82), rgba(20,60,25,0.45));
}
.hero .container { position: relative; z-index: 2; max-width: 720px; }
.hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 800; line-height: 1.15; margin-bottom: 18px; }
.hero p { font-size: 1.15rem; margin-bottom: 30px; color: #eef7ee; }

/* ---------- Seções genéricas ---------- */
section { padding: 90px 0; }
.section-alt { background: var(--verde-claro); }
.eyebrow { color: var(--laranja-escuro); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; font-size: .85rem; margin-bottom: 10px; }
.section-title { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; line-height: 1.2; color: var(--verde-escuro); margin-bottom: 20px; max-width: 760px; }

.duas-colunas {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: center;
}
.duas-colunas.inverso { direction: rtl; }
.duas-colunas.inverso > * { direction: ltr; }
.duas-colunas img { border-radius: var(--raio); box-shadow: var(--sombra); }

.lista-bullets { list-style: none; margin: 24px 0; }
.lista-bullets li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 8px;
  line-height: 1.35;
  color: var(--texto-claro);
}
.lista-bullets li::before {
  content: "✓";
  position: absolute; left: 0; top: 0;
  width: 22px; height: 22px;
  background: var(--verde);
  color: var(--branco);
  border-radius: 50%;
  font-size: .75rem;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
}

.texto-corpo p { color: var(--texto-claro); line-height: 1.5; margin-bottom: 16px; }

/* ---------- Produtos ---------- */
.grid-produtos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
  margin-top: 44px;
}
.card-produto {
  background: var(--branco);
  border-radius: var(--raio);
  overflow: hidden;
  box-shadow: var(--sombra);
  transition: transform .25s;
}
.card-produto:hover { transform: translateY(-6px); }
.card-produto .img-produto { height: 220px; overflow: hidden; }
.card-produto .img-produto img { width: 100%; height: 100%; object-fit: cover; }
.card-produto .corpo { padding: 26px; }
.card-produto h3 { color: var(--verde-escuro); font-size: 1.25rem; margin-bottom: 12px; }
.card-produto .lista-bullets li { font-size: .95rem; }

/* ---------- Contato ---------- */
.contato-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.15fr 1.15fr;
  gap: 32px;
  margin-top: 40px;
  align-items: start;
}
.info-contato .item { margin-bottom: 16px; }
.info-contato h4 { color: var(--verde-escuro); margin-bottom: 2px; font-size: .95rem; }
.info-contato p, .info-contato a { color: var(--texto-claro); }
.info-contato p { margin-bottom: 2px; line-height: 1.35; }
.info-contato p:last-child { margin-bottom: 0; }

/* Ajuste fino de alinhamento vertical: o formulário do meio tem um "eyebrow"
   e um título acima da caixa branca, então ela nasce mais baixo que as
   colunas dos lados. Sobe um pouco o formulário e desce um pouco as
   colunas da esquerda e da direita para equilibrar visualmente. */
.contato-form-col { margin-top: -18px; }
.info-contato,
.trabalhe-card { margin-top: 18px; }

/* Lista dos setores de telefone dentro de "Fale conosco": uma linha embaixo
   da outra (sem colunas lado a lado), com pouco espaço entre elas e sem
   quebrar o nome do setor no meio da linha. */
.info-telefones-grid {
  display: block;
}
.info-telefones-grid .item { margin-bottom: 10px; }
.info-telefones-grid .item h4 { white-space: nowrap; }

/* Os telefones ficam sempre atrás de um botão de exibir/ocultar,
   em qualquer dispositivo (celular, tablet ou PC). */
.info-telefones-toggle { border: none; }
.info-telefones-toggle summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  font-size: .9rem;
  color: var(--verde-escuro);
  background: var(--verde-claro);
  border: 1px solid rgba(31, 92, 46, .25);
  padding: 10px 18px;
  border-radius: 999px;
  margin-bottom: 14px;
  width: fit-content;
}
.info-telefones-toggle summary::-webkit-details-marker { display: none; }
.info-telefones-toggle summary::after {
  content: "▾";
  transition: transform .2s;
}
.info-telefones-toggle[open] summary::after { transform: rotate(180deg); }
.info-telefones-toggle-ocultar { display: none; }
.info-telefones-toggle[open] .info-telefones-toggle-mostrar { display: none; }
.info-telefones-toggle[open] .info-telefones-toggle-ocultar { display: inline; }

.contato-form-col .eyebrow, .contato-form-col .section-title { margin-bottom: 14px; }
.contato-form-col .section-title { margin-bottom: 20px; }

form.form-contato { background: var(--branco); padding: 34px; border-radius: var(--raio); box-shadow: var(--sombra); width: 100%; }
form.form-contato label { display: block; font-weight: 600; margin-bottom: 6px; font-size: .9rem; }
form.form-contato input, form.form-contato textarea, form.form-contato select {
  width: 100%; padding: 13px 14px; margin-bottom: 18px;
  border: 1px solid #dfe6e0; border-radius: 10px; font-family: inherit; font-size: .95rem;
  background: var(--branco);
  box-sizing: border-box;
}
form.form-contato select { appearance: auto; }
form.form-contato input:focus, form.form-contato textarea:focus, form.form-contato select:focus { outline: none; border-color: var(--verde); }
.msg-sucesso { background: #e2f5e5; color: var(--verde-escuro); padding: 14px 18px; border-radius: 10px; margin-bottom: 20px; font-weight: 600; }
.msg-erro { background: #fdeaea; color: #a12b2b; padding: 14px 18px; border-radius: 10px; margin-bottom: 20px; font-weight: 600; }

@media (max-width: 1180px) {
  .contato-grid { grid-template-columns: 1fr 1fr; }
  .info-contato { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .contato-grid { grid-template-columns: 1fr; gap: 24px; }
  form.form-contato { padding: 24px; }
  .trabalhe-card { padding: 22px; }
}

/* ---------- Regiões atendidas ---------- */
.texto-regioes { color: var(--texto-claro); max-width: 680px; margin-bottom: 10px; }
#regioes .eyebrow, #regioes .section-title { color: inherit; }
#regioes.section-alt { background: var(--verde-claro); }
.regioes-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 50px;
  align-items: center;
  margin-top: 30px;
}
.mapa-brasil-wrap { display: flex; justify-content: center; }
.mapa-brasil { width: 100%; max-width: 420px; height: auto; }

.mapa-brasil .estado {
  fill: var(--branco);
  stroke: var(--verde-claro);
  stroke-width: 1.4;
  stroke-linejoin: round;
  transition: fill .2s;
}
.mapa-brasil .estado-atendido {
  fill: var(--laranja);
  stroke: var(--branco);
}

.ponto-estado .pino { fill: var(--verde-escuro); stroke: var(--branco); stroke-width: 2; }
.ponto-estado .pulso {
  fill: var(--verde-escuro);
  opacity: .35;
  transform-origin: center;
  animation: pulsarPino 2.2s ease-out infinite;
}
@keyframes pulsarPino {
  0%   { transform: scale(0.6); opacity: .5; }
  100% { transform: scale(2.2); opacity: 0; }
}
.rotulo-estado {
  font-size: 13px;
  font-weight: 700;
  fill: var(--verde-escuro);
  font-family: 'Segoe UI', system-ui, sans-serif;
}

.lista-estados { display: flex; flex-direction: column; gap: 18px; }
.item-estado { display: flex; align-items: center; gap: 14px; background: var(--branco); padding: 16px 20px; border-radius: 12px; box-shadow: var(--sombra); }
.item-estado strong { display: block; color: var(--verde-escuro); font-size: 1rem; }
.item-estado span { color: var(--texto-claro); font-size: .85rem; }
.bolinha-estado { width: 14px; height: 14px; border-radius: 50%; background: var(--laranja); flex-shrink: 0; }

@media (max-width: 860px) {
  .regioes-grid { grid-template-columns: 1fr; }
}

/* ---------- Trabalhe conosco (cartão ao lado dos formulários de contato) ---------- */
.trabalhe-card {
  background: var(--branco);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 30px;
}
.trabalhe-card details { border: none; }
.trabalhe-badge {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: .95rem;
  color: var(--laranja-escuro);
  background: #fff2e6;
  border: 1px solid rgba(242, 153, 74, 0.45);
  padding: 12px 22px 12px 14px;
  border-radius: 999px;
  transition: background .2s, transform .2s, box-shadow .2s;
  animation: pulsarChamada 2.6s ease-in-out infinite;
}
.trabalhe-badge:hover {
  background: #ffe6cc;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(217, 122, 43, 0.25);
}
.trabalhe-card details[open] .trabalhe-badge { animation: none; }
.trabalhe-badge::-webkit-details-marker { display: none; }
.trabalhe-badge::before {
  content: "💼";
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--laranja);
  font-size: .85rem;
  flex-shrink: 0;
}
.trabalhe-card details[open] .trabalhe-badge::before { content: "\2212"; color: var(--branco); }
@keyframes pulsarChamada {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242, 153, 74, 0.35); }
  50%      { box-shadow: 0 0 0 8px rgba(242, 153, 74, 0); }
}
.trabalhe-corpo { margin-top: 18px; }
.texto-discreto { color: var(--texto-claro); margin-bottom: 18px; font-size: .92rem; }
.form-compacto { padding: 0; box-shadow: none; }
.form-compacto input, .form-compacto textarea, .form-compacto select { padding: 11px 12px; margin-bottom: 14px; }

/* ---------- Footer ---------- */
footer.site-footer { background: #171717; color: #cfcfcf; padding: 34px 0 0; }

.rodape-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 28px 40px;
  padding-bottom: 30px;
}

.rodape-marca { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.rodape-marca img { height: 100px; width: auto; }
.rodape-marca span { color: var(--branco); font-weight: 800; font-size: 1.2rem; }

.rodape-redes { text-align: center; flex: 0 1 auto; }
.rodape-redes h4 { color: var(--branco); font-size: .92rem; font-weight: 700; margin-bottom: 10px; }

.rodape-atendimento { text-align: right; flex: 1 1 260px; max-width: 720px; }
.rodape-atendimento h4 { color: var(--branco); font-size: .92rem; font-weight: 700; margin-bottom: 8px; }
.rodape-atendimento p { font-size: .88rem; color: #b9b9b9; margin-bottom: 3px; }
.rodape-atendimento p strong { color: #d8d8d8; font-weight: 600; }
.rodape-atendimento p a, .rodape-atendimento p a:visited { color: #b9b9b9; }
.rodape-atendimento p a:hover { color: var(--branco); text-decoration: underline; }

/* Grade dos setores de telefone no rodapé. O número de colunas vem do painel
   admin (Rodapé > Colunas de telefones) através da variável --rodape-colunas
   definida inline no HTML. */
.rodape-telefones-grid {
  display: grid;
  grid-template-columns: repeat(var(--rodape-colunas, 1), minmax(150px, auto));
  gap: 4px 24px;
  justify-content: flex-end;
}
.rodape-telefones-grid p { margin-bottom: 3px; }
.link-privacidade { display: inline-block; margin-top: 8px; font-size: .78rem; color: #8a8a8a; }
.link-privacidade:hover { color: var(--branco); text-decoration: underline; }

footer .redes { display: flex; gap: 12px; justify-content: center; }
footer .redes a {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.08); color: #e4e4e4;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
footer .redes a:hover { background: var(--laranja); color: var(--branco); }

footer .copy {
  text-align: center;
  padding: 16px 0;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: .8rem;
  color: #7d7d7d;
}

@media (max-width: 700px) {
  .rodape-linha { justify-content: center; text-align: center; }
  .rodape-atendimento { text-align: center; max-width: 100%; }
  .rodape-telefones-grid { grid-template-columns: 1fr; justify-content: center; justify-items: center; }
}

/* ---------- Mascote / chat flutuante do WhatsApp ---------- */
.mascote-whatsapp-wrap {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}

.botao-mascote {
  width: 150px;
  height: 150px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: flutuar 2.6s ease-in-out infinite;
  transition: transform .2s;
}
.botao-mascote:hover { transform: scale(1.06); }
.botao-mascote img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.28));
}

@keyframes flutuar {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.botao-mascote:hover { animation-play-state: paused; }

.caixa-chat-mascote {
  width: 320px;
  max-width: calc(100vw - 40px);
  background: var(--branco);
  border-radius: 18px;
  box-shadow: 0 16px 44px rgba(0,0,0,.25);
  overflow: hidden;
  display: none;
  flex-direction: column;
  transform-origin: bottom right;
  animation: abrirChat .22s ease-out;
}
.caixa-chat-mascote.aberta { display: flex; }

@keyframes abrirChat {
  from { opacity: 0; transform: scale(.9) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.caixa-chat-topo {
  background: var(--verde-escuro);
  color: var(--branco);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.caixa-chat-topo img { width: 42px; height: 42px; object-fit: contain; background: var(--branco); border-radius: 50%; padding: 3px; }
.caixa-chat-topo strong { display: block; font-size: .95rem; }
.caixa-chat-topo .status-online { font-size: .74rem; color: #b9f6c3; }
.caixa-chat-topo .fechar-chat {
  margin-left: auto; background: none; border: none; color: var(--branco);
  font-size: 1.1rem; cursor: pointer; opacity: .85; padding: 4px;
}
.caixa-chat-topo .fechar-chat:hover { opacity: 1; }

.caixa-chat-corpo { background: #e9ede9; padding: 16px; min-height: 90px; }
.balao-mensagem {
  background: var(--branco);
  padding: 12px 14px;
  border-radius: 4px 14px 14px 14px;
  font-size: .88rem;
  color: var(--texto);
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  max-width: 90%;
}

.caixa-chat-rodape { display: flex; gap: 8px; padding: 12px; background: var(--branco); border-top: 1px solid var(--borda, #e3e8e3); }
.caixa-chat-rodape textarea {
  flex: 1; resize: none; border: 1px solid #dfe6e0; border-radius: 12px;
  padding: 10px 12px; font-family: inherit; font-size: .88rem;
}
.caixa-chat-rodape textarea:focus { outline: none; border-color: var(--verde); }
.caixa-chat-rodape button {
  width: 42px; height: 42px; flex-shrink: 0; border: none; border-radius: 50%;
  background: #25D366; color: var(--branco); font-size: 1.1rem; cursor: pointer;
}
.caixa-chat-rodape button:hover { background: #1fb457; }

@media (max-width: 480px) {
  .botao-mascote { width: 110px; height: 110px; }
  .mascote-whatsapp-wrap { right: 10px; bottom: 10px; gap: 6px; }
}

/* ---------- Responsivo ---------- */
@media (max-width: 860px) {
  .duas-colunas, .duas-colunas.inverso { grid-template-columns: 1fr; direction: ltr; }
  nav.menu { position: fixed; top: 74px; left: 0; right: 0; background: var(--branco); flex-direction: column; padding: 10px 24px 24px; box-shadow: 0 8px 20px rgba(0,0,0,.08); transform: translateY(-130%); transition: transform .25s; }
  nav.menu.aberto { transform: translateY(0); }
  nav.menu ul { flex-direction: column; gap: 4px; }
  nav.menu ul li { border-bottom: 1px solid #eee; }
  nav.menu ul li a { display: block; padding: 14px 0; }
  .btn-menu-toggle { display: block; }
  .topbar .container { justify-content: center; text-align: center; }
}












.banner-onda {
  position: relative;
  background-image: url('../img/0001.webp');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  /* 'fixed' mantém a imagem contínua ao rolar (apenas em telas maiores, ver media query abaixo) */
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  overflow: hidden;
}

/* iOS e boa parte dos navegadores mobile não suportam bem
   background-attachment: fixed (a imagem pode sumir, piscar ou nem aparecer
   ao rolar). Por segurança, usamos "scroll" normal em telas menores, junto
   com uma altura mais compacta para caber melhor na tela do celular. */
@media (max-width: 860px) {
  .banner-onda {
    background-attachment: scroll;
    min-height: 420px;
  }
}
@media (max-width: 480px) {
  .banner-onda {
    min-height: 320px;
  }
}

/* Degradê sobre a imagem 
.banner-onda::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255, 120, 0, 0.8), rgba(46, 139, 87, 0.6));
  z-index: 1;
}*/

.banner-texto {
  position: relative;
  z-index: 2;
  max-width: 800px;
  padding: 20px;
}

.banner-texto h2 {
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}

.banner-texto p {
  font-size: clamp(1rem, 2.6vw, 1.2rem);
  text-shadow: 0 1px 6px rgba(0,0,0,.45);
}

/* Ondas */
.onda {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: clamp(60px, 14vw, 150px);
  display: block;
  z-index: 3;
}

.onda-top {
  top: 0;
}

.onda-bottom {
  bottom: 0;
}