.verde {
  color: #1d8851;
}

.verdeclaro {
  color: #86b558;
}

.branco {
  color: #fff !important;
}

.amarelo {
  color: #ee7b22;
}

.roxo {
  color: #0f0d59;
}

.azul {
  color: #461bff;
}

.verdeescuro {
  color: #23734c;
}

.verdetexto {
  color: #05854d;
}

.verdetexto2 {
  color: #006a3b;
}

@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-BlackItalic.eot");
  src: url("../fonts/Roboto-BlackItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto-BlackItalic.woff2") format("woff2"), url("../fonts/Roboto-BlackItalic.woff") format("woff"), url("../fonts/Roboto-BlackItalic.ttf") format("truetype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Black.eot");
  src: url("../fonts/Roboto-Black.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto-Black.woff2") format("woff2"), url("../fonts/Roboto-Black.woff") format("woff"), url("../fonts/Roboto-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-BoldItalic.eot");
  src: url("../fonts/Roboto-BoldItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto-BoldItalic.woff2") format("woff2"), url("../fonts/Roboto-BoldItalic.woff") format("woff"), url("../fonts/Roboto-BoldItalic.ttf") format("truetype");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Bold.eot");
  src: url("../fonts/Roboto-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto-Bold.woff2") format("woff2"), url("../fonts/Roboto-Bold.woff") format("woff"), url("../fonts/Roboto-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-ExtraBold.eot");
  src: url("../fonts/Roboto-ExtraBold.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto-ExtraBold.woff2") format("woff2"), url("../fonts/Roboto-ExtraBold.woff") format("woff"), url("../fonts/Roboto-ExtraBold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Italic.eot");
  src: url("../fonts/Roboto-Italic.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto-Italic.woff2") format("woff2"), url("../fonts/Roboto-Italic.woff") format("woff"), url("../fonts/Roboto-Italic.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-MediumItalic.eot");
  src: url("../fonts/Roboto-MediumItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto-MediumItalic.woff2") format("woff2"), url("../fonts/Roboto-MediumItalic.woff") format("woff"), url("../fonts/Roboto-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-SemiBold.eot");
  src: url("../fonts/Roboto-SemiBold.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto-SemiBold.woff2") format("woff2"), url("../fonts/Roboto-SemiBold.woff") format("woff"), url("../fonts/Roboto-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Medium.eot");
  src: url("../fonts/Roboto-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto-Medium.woff2") format("woff2"), url("../fonts/Roboto-Medium.woff") format("woff"), url("../fonts/Roboto-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Regular.eot");
  src: url("../fonts/Roboto-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto-Regular.woff2") format("woff2"), url("../fonts/Roboto-Regular.woff") format("woff"), url("../fonts/Roboto-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-LightItalic.eot");
  src: url("../fonts/Roboto-LightItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto-LightItalic.woff2") format("woff2"), url("../fonts/Roboto-LightItalic.woff") format("woff"), url("../fonts/Roboto-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Light.eot");
  src: url("../fonts/Roboto-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto-Light.woff2") format("woff2"), url("../fonts/Roboto-Light.woff") format("woff"), url("../fonts/Roboto-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-SemiBoldItalic.eot");
  src: url("../fonts/Roboto-SemiBoldItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto-SemiBoldItalic.woff2") format("woff2"), url("../fonts/Roboto-SemiBoldItalic.woff") format("woff"), url("../fonts/Roboto-SemiBoldItalic.ttf") format("truetype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
.bold {
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  font-style: normal;
}

p,
body {
  font-family: "Roboto", sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 18px !important;
}

p {
  font-family: "Roboto", sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 18px !important;
}

a {
  font-family: "Roboto", sans-serif;
  text-decoration: none !important;
}

a span {
  font-family: "Roboto", sans-serif;
  text-decoration: none !important;
}

a:hover {
  color: #ee7b22;
}

.txt--capa {
  font-family: "Roboto", sans-serif;
  font-size: 48px;
  font-weight: bold;
  font-style: normal;
  fill: #fff;
}

.txt--capaN {
  font-family: "Roboto", sans-serif;
  font-size: 121px;
  font-weight: bold;
  font-style: normal;
  fill: #fff;
  stroke: #1d8851;
  stroke-width: 2px;
}

.medium {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.semi {
  font-family: "Roboto", sans-serif !important;
  font-weight: 600 !important;
  font-style: normal !important;
}

h1 {
  font-family: "Roboto", sans-serif;
  font-size: 48px !important;
  font-weight: bold !important;
  font-style: normal !important;
  font-display: swap !important;
}

h2 {
  font-family: "Roboto", sans-serif;
  font-size: 32px !important;
  font-weight: bold !important;
  font-style: normal !important;
  font-display: swap !important;
}

h3 {
  font-family: "Roboto", sans-serif;
  font-size: 40px !important;
  font-weight: bold !important;
  font-style: normal !important;
  font-display: swap !important;
}

h4 {
  font-family: "Roboto", sans-serif;
  font-size: 22px !important;
  font-weight: bold !important;
  font-style: normal !important;
  font-display: swap !important;
}

.gradientTitle {
  text-transform: uppercase;
  font-family: "Roboto", sans-serif;
  font-size: 48px !important;
  font-weight: bold !important;
  font-style: normal !important;
  font-display: swap !important;
  background: linear-gradient(90deg, #86b558, #23734c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Para navegadores que suportam a propriedade padrão */
  background-clip: text;
  color: transparent;
}

.fs--16 {
  font-size: 16px !important;
}

.fs--17 {
  font-size: 17px !important;
}

.fs--18 {
  font-size: 18px !important;
}

.fs--19 {
  font-size: 19px !important;
}

.fs--20 {
  font-size: 20px !important;
}

.fs--21 {
  font-size: 21px !important;
}

.fs--22 {
  font-size: 22px !important;
}

.fs--23 {
  font-size: 23px !important;
}

.fs--24 {
  font-size: 24px !important;
}

.fs--25 {
  font-size: 25px !important;
}

.fs--26 {
  font-size: 26px !important;
}

.fs--27 {
  font-size: 27px !important;
}

.fs--28 {
  font-size: 28px !important;
}

.fs--29 {
  font-size: 29px !important;
}

.fs--30 {
  font-size: 30px !important;
}

.fs--31 {
  font-size: 31px !important;
}

.fs--32 {
  font-size: 32px !important;
}

.fs--33 {
  font-size: 33px !important;
}

.fs--34 {
  font-size: 34px !important;
}

.fs--35 {
  font-size: 35px !important;
}

.fs--36 {
  font-size: 36px !important;
}

.fs--37 {
  font-size: 37px !important;
}

.fs--38 {
  font-size: 38px !important;
}

.fs--39 {
  font-size: 39px !important;
}

.fs--40 {
  font-size: 40px !important;
}

.fs--41 {
  font-size: 41px !important;
}

.fs--42 {
  font-size: 42px !important;
}

.fs--43 {
  font-size: 43px !important;
}

.fs--44 {
  font-size: 44px !important;
}

.fs--45 {
  font-size: 45px !important;
}

.fs--46 {
  font-size: 46px !important;
}

.fs--47 {
  font-size: 47px !important;
}

.fs--48 {
  font-size: 48px !important;
}

.fs--49 {
  font-size: 49px !important;
}

.fs--50 {
  font-size: 50px !important;
}

.fs--51 {
  font-size: 51px !important;
}

.fs--52 {
  font-size: 52px !important;
}

.fs--53 {
  font-size: 53px !important;
}

.fs--54 {
  font-size: 54px !important;
}

.fs--55 {
  font-size: 55px !important;
}

.fs--56 {
  font-size: 56px !important;
}

.fs--57 {
  font-size: 57px !important;
}

.fs--58 {
  font-size: 58px !important;
}

.fs--59 {
  font-size: 59px !important;
}

.fs--60 {
  font-size: 60px !important;
}

.fs--61 {
  font-size: 61px !important;
}

.fs--62 {
  font-size: 62px !important;
}

.fs--63 {
  font-size: 63px !important;
}

.fs--64 {
  font-size: 64px !important;
}

.fs--65 {
  font-size: 65px !important;
}

.fs--66 {
  font-size: 66px !important;
}

.fs--67 {
  font-size: 67px !important;
}

.fs--68 {
  font-size: 68px !important;
}

.fs--69 {
  font-size: 69px !important;
}

.fs--70 {
  font-size: 70px !important;
}

.fs--71 {
  font-size: 71px !important;
}

.fs--72 {
  font-size: 72px !important;
}

.fs--73 {
  font-size: 73px !important;
}

.fs--74 {
  font-size: 74px !important;
}

.fs--75 {
  font-size: 75px !important;
}

.fs--76 {
  font-size: 76px !important;
}

.fs--77 {
  font-size: 77px !important;
}

.fs--78 {
  font-size: 78px !important;
}

.fs--79 {
  font-size: 79px !important;
}

.fs--80 {
  font-size: 80px !important;
}

@media screen and (max-width: 768px) {
  h1 {
    font-size: 43.68px !important;
  }
  h2 {
    font-size: 28.8px !important;
  }
  h3 {
    font-size: 36px !important;
  }
  h4 {
    font-size: 28.8px !important;
  }
  .gradientTitle {
    text-transform: uppercase;
    font-family: "Roboto", sans-serif;
    font-size: 44px !important;
    font-weight: bold !important;
    font-style: normal !important;
    font-display: swap !important;
    background: linear-gradient(90deg, #86b558, #23734c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Para navegadores que suportam a propriedade padrão */
    background-clip: text;
    color: transparent;
  }
}
@media screen and (min-width: 1800px) {
  h1 {
    font-size: 48px !important;
  }
  h2 {
    font-size: 32px !important;
  }
  h3 {
    font-size: 40px !important;
  }
  h4 {
    font-size: 32px !important;
  }
  p {
    font-size: 18px !important;
  }
  .fs--16 {
    font-size: calc(16px * 1) !important;
  }
  .fs--17 {
    font-size: calc(17px * 1) !important;
  }
  .fs--18 {
    font-size: calc(18px * 1) !important;
  }
  .fs--19 {
    font-size: calc(19px * 1) !important;
  }
  .fs--20 {
    font-size: calc(20px * 1) !important;
  }
  .fs--21 {
    font-size: calc(21px * 1) !important;
  }
  .fs--22 {
    font-size: calc(22px * 1) !important;
  }
  .fs--23 {
    font-size: calc(23px * 1) !important;
  }
  .fs--24 {
    font-size: calc(24px * 1) !important;
  }
  .fs--25 {
    font-size: calc(25px * 1) !important;
  }
  .fs--26 {
    font-size: calc(26px * 1) !important;
  }
  .fs--27 {
    font-size: calc(27px * 1) !important;
  }
  .fs--28 {
    font-size: calc(28px * 1) !important;
  }
  .fs--29 {
    font-size: calc(29px * 1) !important;
  }
  .fs--30 {
    font-size: calc(30px * 1) !important;
  }
  .fs--31 {
    font-size: calc(31px * 1) !important;
  }
  .fs--32 {
    font-size: calc(32px * 1) !important;
  }
  .fs--33 {
    font-size: calc(33px * 1) !important;
  }
  .fs--34 {
    font-size: calc(34px * 1) !important;
  }
  .fs--35 {
    font-size: calc(35px * 1) !important;
  }
  .fs--36 {
    font-size: calc(36px * 1) !important;
  }
  .fs--37 {
    font-size: calc(37px * 1) !important;
  }
  .fs--38 {
    font-size: calc(38px * 1) !important;
  }
  .fs--39 {
    font-size: calc(39px * 1) !important;
  }
  .fs--40 {
    font-size: calc(40px * 1) !important;
  }
  .fs--41 {
    font-size: calc(41px * 1) !important;
  }
  .fs--42 {
    font-size: calc(42px * 1) !important;
  }
  .fs--43 {
    font-size: calc(43px * 1) !important;
  }
  .fs--44 {
    font-size: calc(44px * 1) !important;
  }
  .fs--45 {
    font-size: calc(45px * 1) !important;
  }
  .fs--46 {
    font-size: calc(46px * 1) !important;
  }
  .fs--47 {
    font-size: calc(47px * 1) !important;
  }
  .fs--48 {
    font-size: calc(48px * 1) !important;
  }
  .fs--49 {
    font-size: calc(49px * 1) !important;
  }
  .fs--50 {
    font-size: calc(50px * 1) !important;
  }
  .fs--51 {
    font-size: calc(51px * 1) !important;
  }
  .fs--52 {
    font-size: calc(52px * 1) !important;
  }
  .fs--53 {
    font-size: calc(53px * 1) !important;
  }
  .fs--54 {
    font-size: calc(54px * 1) !important;
  }
  .fs--55 {
    font-size: calc(55px * 1) !important;
  }
  .fs--56 {
    font-size: calc(56px * 1) !important;
  }
  .fs--57 {
    font-size: calc(57px * 1) !important;
  }
  .fs--58 {
    font-size: calc(58px * 1) !important;
  }
  .fs--59 {
    font-size: calc(59px * 1) !important;
  }
  .fs--60 {
    font-size: calc(60px * 1) !important;
  }
  .fs--61 {
    font-size: calc(61px * 1) !important;
  }
  .fs--62 {
    font-size: calc(62px * 1) !important;
  }
  .fs--63 {
    font-size: calc(63px * 1) !important;
  }
  .fs--64 {
    font-size: calc(64px * 1) !important;
  }
  .fs--65 {
    font-size: calc(65px * 1) !important;
  }
  .fs--66 {
    font-size: calc(66px * 1) !important;
  }
  .fs--67 {
    font-size: calc(67px * 1) !important;
  }
  .fs--68 {
    font-size: calc(68px * 1) !important;
  }
  .fs--69 {
    font-size: calc(69px * 1) !important;
  }
  .fs--70 {
    font-size: calc(70px * 1) !important;
  }
  .fs--71 {
    font-size: calc(71px * 1) !important;
  }
  .fs--72 {
    font-size: calc(72px * 1) !important;
  }
  .fs--73 {
    font-size: calc(73px * 1) !important;
  }
  .fs--74 {
    font-size: calc(74px * 1) !important;
  }
  .fs--75 {
    font-size: calc(75px * 1) !important;
  }
  .fs--76 {
    font-size: calc(76px * 1) !important;
  }
  .fs--77 {
    font-size: calc(77px * 1) !important;
  }
  .fs--78 {
    font-size: calc(78px * 1) !important;
  }
  .fs--79 {
    font-size: calc(79px * 1) !important;
  }
  .fs--80 {
    font-size: calc(80px * 1) !important;
  }
}
button {
  all: unset;
  cursor: pointer;
}

.btn--download {
  font-family: "Roboto", sans-serif;
  font-size: 20px;
  background-color: transparent;
  color: #fff;
  border-radius: 12px;
  border: 1px solid #fff;
  padding: 15px 55px;
  transition: all 0.3s ease;
  display: inline-block;
}
.btn--download:hover, .btn--download.active {
  background-color: #fff;
  color: #1d8851;
}
.btn--downloadHead {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  background-color: #fff;
  color: #0f0d59;
  border-radius: 12px;
  padding: 5px 20px;
  transition: all 0.3s ease;
  display: inline-block;
}
.btn--downloadHead:hover, .btn--downloadHead.active {
  background-color: #1d8851;
  color: #0f0d59;
}
.btn--downloadFooter {
  cursor: pointer;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  background-color: #006a3b;
  color: #fff;
  transition: all 0.3s ease;
  display: inline-block;
}
.btn--downloadFooter:hover, .btn--downloadFooter.active {
  fill: #ee7b22;
  color: #fff;
}
.btn--downloadFooterUP {
  cursor: pointer;
}
.btn--downloadFooterUP:hover, .btn--downloadFooterUP.active .btn--downloadFooterUP--downloadFooter {
  fill: #ee7b22;
  color: #fff;
}

.botao-chanfrado-duplo {
  /* Dimensões e estilos base do botão */
  width: 260px; /* Ajuste conforme necessário */
  height: 32px; /* Ajuste conforme necessário */
  background-color: #94C94A; /* Cor de fundo da sua imagem (um verde claro) */
  color: white; /* Cor do texto */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Roboto", sans-serif; /* Assumindo a fonte da imagem */
  font-size: 16px; /* Tamanho do texto para "Download completo" */
  font-weight: 600; /* Peso da fonte */
  text-align: center;
  cursor: pointer; /* Indica que é clicável */
  /* --- Chanfros nos cantos --- */
  /* Definimos o tamanho do corte para 20px, mas você pode ajustar */
  --chanfro-size: 32px; /* Variável CSS para facilitar ajuste */
  clip-path: polygon(var(--chanfro-size) 0%, 100% 0%, 100% calc(100% - var(--chanfro-size)), calc(100% - var(--chanfro-size)) 100%, 0% 100%, 0% var(--chanfro-size));
  /* Transição para um efeito de hover suave (se você for adicionar hover) */
  transition: background-color 0.3s ease;
}

/* Exemplo de hover (opcional, mas comum para botões) */
.botao-chanfrado-duplo:hover {
  background-color: #ee7b22; /* Um verde mais escuro ou o amarelo que você mencionou antes */
}

.bg--sobrenos {
  background: url(../images/bg--sobrenos.png) no-repeat left top;
}
.bg--nossapresenca {
  background: url(../images/bg--nossapresenca.png) no-repeat center top;
  background-size: cover;
  padding-top: 60px;
}
.bg--verdeclaro2 {
  background-color: #eaf4db;
}
.bg--claro {
  background-color: #EAF4DB;
}
.bg--white {
  background-color: #fff;
}
.bg--materialidade {
  background: url(../images/bg--materialidade.png) no-repeat top right;
  padding-top: 250px !important;
}
.bg--numeros {
  background: url(../images/bg--numeros.png) no-repeat top center;
  padding-top: 100px;
  background-size: cover;
}
.bg--certificacoes {
  background: url(../images/bg--certificacoes.png) no-repeat bottom center;
  padding-top: 100px;
  background-size: cover;
}
.bg--downloads {
  background: url(../images/bg--downloads.png) no-repeat top center;
  height: 580px;
  background-size: cover;
  display: flex;
  align-items: center;
}
.bg--listra {
  background: url(../images/listra.png) repeat-x;
  background-position: left bottom;
}
.bg--regenerativa {
  background: linear-gradient(45deg, rgba(148, 201, 74, 0.4), rgba(29, 138, 85, 0.4));
  /* Fallback para navegadores antigos ou caso o gradiente não carregue */
  background-color: rgba(148, 201, 74, 0.4);
}

@media screen and (max-width: 768px) {
  .bg--sobrenos {
    background: url(../images/bg--sobrenos.png) no-repeat left top;
  }
  .bg--nossapresenca {
    background: url(../images/bg--nossapresenca.png) no-repeat center top;
    background-size: cover;
    padding-top: 60px;
  }
  .bg--verdeclaro2 {
    background-color: #eaf4db;
  }
  .bg--materialidade {
    background: url(../images/bg--materialidade.png) no-repeat top right;
    padding-top: 0px !important;
  }
  .bg--numeros {
    background: url(../images/bg--numeros.png) no-repeat top center;
    padding-top: 60px;
    background-size: cover;
  }
  .bg--certificacoes {
    background: url(../images/bg--certificacoes.png) no-repeat top center;
    padding-top: 100px;
    background-size: cover;
  }
  .bg--downloads {
    background: url(../images/bg--downloads.png) no-repeat top center;
    min-height: 300px;
    background-size: cover;
  }
  .bg--listra {
    background: url(../images/listra.png) repeat-x;
    background-position: left bottom;
  }
  .bg--regenerativa {
    background: linear-gradient(45deg, rgba(148, 201, 74, 0.4), rgba(29, 138, 85, 0.4));
    /* Fallback para navegadores antigos ou caso o gradiente não carregue */
    background-color: rgba(148, 201, 74, 0.4);
  }
}
/*HAMBURGER MENU*/
.hamburger-menu {
  position: relative;
  z-index: 5;
}

.menu__btn {
  position: relative;
  width: 36px;
  height: 36px;
  cursor: pointer;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 6px 0;
}
.menu__btn span {
  display: block;
  height: 3px;
  width: 100%;
  background-color: #05854d;
  transition: all 0.3s ease;
  border-radius: 15px;
}

.menu__btn:hover span {
  opacity: 0.9;
}

#menu__toggle {
  opacity: 0;
}

#menu__toggle:checked ~ .menu__box {
  top: 0px !important;
  opacity: 1 !important;
  height: 100vh;
}

#menu__toggle:checked + .menu__btn > span {
  background-color: #86b558;
}

/* Quando clicado (checked), animar os spans individualmente */
#menu__toggle:checked + .menu__btn span:nth-child(1) {
  transform: rotate(45deg) translate(10px, 5px);
}

#menu__toggle:checked + .menu__btn span:nth-child(2) {
  opacity: 0;
}

#menu__toggle:checked + .menu__btn span:nth-child(3) {
  transform: rotate(-45deg) translate(10px, -5px);
}

.menu__box {
  position: fixed;
  right: 0 !important;
  top: 0;                 /* fica ancorado na viewport */
  height: 100vh;
  width: 30%;
  background-color: #05854d;
  z-index: 200;

  /* estado FECHADO */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;   /* <- ESSENCIAL */
  transform: translateY(-100%); /* sai da tela pra cima */
  transition:
    opacity .25s ease,
    transform .6s ease,
    visibility 0s linear .6s; /* atrasa visibilidade pra depois da animação */

  clip-path: polygon(0% 72px, 72px 0%, 100% 0%, 100% 100%, 0% 100%);
}

/* estado ABERTO */
#menu__toggle:checked ~ #menubox,
.menu__box.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;   /* <- agora pode clicar no menu */
  transform: translateY(0);
  transition:
    opacity .25s ease,
    transform .6s ease;
}

/* breakpoints: só mude o width/clip-path, não mexa em pointer-events/visibility */
@media screen and (max-width: 1366px) {
  .menu__box { width: 40%; clip-path: polygon(0% 72px, 72px 0%, 100% 0%, 100% 100%, 0% 100%); }
}
@media screen and (max-width: 768px) {
  .menu__box { width: 100%; clip-path: polygon(0% 0%, 0% 0%, 100% 0%, 100% 100%, 0% 100%); }
}


.menu__items {
  font-family: "Roboto", sans-serif;
  color: #0f0d59;
  list-style: none;
  text-decoration: none;
  font-size: 25px;
  line-height: 1.2rem;
}
.menu__items span {
  color: #fff;
}
.menu__items span:hover {
  cursor: pointer;
  color: #86b558;
  transition: all 0.3s ease;
}
.menu__items a {
  text-decoration: none;
  color: #1d8851;
}
.menu__items a:hover {
  cursor: pointer;
  color: #86b558;
}
.menu__items li {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 16px;
  font-size: 24px;
}
.menu__items li:hover svg path {
  fill: #000;
}

@media screen and (max-width: 1366px) {
  .menu__box {
    display: block;
    position: fixed;
    background-color: #05854d;
    top: -1000px;
    width: 40%;
    right: 0px !important;
    height: 100vh;
    transition-duration: 0.8s;
    margin: 0;
    opacity: 0;
    padding: 40px 20px;
    z-index: 200;
    clip-path: polygon(0% 72px, 72px 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@media screen and (max-width: 768px) {
  .menu__box {
    display: block;
    position: fixed;
    background-color: #05854d;
    top: -1000px;
    width: 100%;
    right: 0px !important;
    height: 100vh;
    transition-duration: 0.8s;
    margin: 0;
    opacity: 0;
    padding: 40px 20px;
    z-index: 200;
    clip-path: polygon(0% 0%, 0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
html {
  scroll-behavior: smooth;
}

:target {
  scroll-margin-top: 72px;
}

footer {
  min-height: 124px;
  background-color: #006a3b;
}

.link {
  cursor: pointer;
}

#navbar {
  width: 100%;
  height: 72px;
  position: fixed;
  top: 0px;
  background-color: #86b558;
  z-index: 99;
  border-bottom: 4px solid #86b558;
  clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 72px), calc(100% - 40px) 100%, 0% 100%);
  /* --- Borda usando drop-shadow --- */
  filter: drop-shadow(0 0 0px black) drop-shadow(0 0 0 2px black);
}

#navbar::before {
  content: "";
  position: fixed;
  top: 0px; /* Borda de 2px */
  left: -6px; /* Borda de 2px */
  width: calc(100% + 4px); /* (300px + 4px = 304px) */
  height: calc(100% + 4px); /* (150px + 4px = 154px) */
  background-color: #fff; /* Cor da borda */
  border: 1px solid #86b558;
  z-index: -1; /* Coloca a borda atrás da div principal */
  /* Aplica o mesmo clip-path ao pseudo-elemento */
  clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 72px), calc(100% - 40px) 100%, 0% 100%);
}

.midd {
  height: 68px;
}

.btn-header {
  font-family: "CTG Sans";
  font-weight: 100;
  color: #fff;
  font-size: 16px;
}
.btn-header.active {
  font-weight: bold;
}
.btn-header:hover {
  font-weight: bold;
}

.b {
  border: 1px solid fuchsia;
}

ol,
ul {
  padding-left: 0px !important;
}

.equalize {
  box-sizing: border-box; /* Garante que height inclua padding e border */
}

.box {
  background-color: #eaf4db;
  padding: 20px;
}

.box--destaques {
  display: flex;
  align-items: center;
  justify-content: start;
  flex-direction: column;
  color: #fff !important;
  text-align: center;
}

.box--e {
  bottom: -230px;
}

.lin--46 {
  line-height: 46px;
}

.chanfro-superior-direito {
  width: 100%; /* Largura da sua div */
  min-height: 500px; /* Altura da sua div */
  background-color: #ffffff; /* Cor de fundo da div */
  display: flex; /* Apenas para centralizar o texto de exemplo */
  align-items: center;
  justify-content: center;
  padding: 20px 40px;
  clip-path: polygon(0% 0%, calc(100% - 130px) 0%, 100% 195px, 100% 100%, 0% 100%);
  /* Explicação do polygon para o canto superior direito:
     1. 0% 0%: Canto superior esquerdo
     2. calc(100% - 30px) 0%: Ponto na borda superior, 30px à esquerda do canto superior direito (onde o corte começa)
     3. 100% 30px: Ponto na borda direita, 30px abaixo do canto superior direito (onde o corte termina)
     4. 100% 100%: Canto inferior direito
     5. 0% 100%: Canto inferior esquerdo
     */
}

.cursor-pointer {
  cursor: pointer;
}

.destaque {
  fill: #ee7b22;
}

.box--verde {
  background-color: #006a3b;
}

.listas {
  top: -21px;
  right: 0;
}

.pulse {
  position: relative;
  width: 50px;
  height: 50px;
  background: #ff4d4d;
  border-radius: 50%;
}

.pulse::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background: #ff4d4d;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: pulse-effect 1.5s infinite ease-out;
  z-index: -1; /* Fica atrás do círculo base */
}

@keyframes pulse-effect {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.6;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}
.pt--30 {
  padding-top: calc(30px * 1) !important;
}

.pb--30 {
  padding-bottom: calc(30px * 1) !important;
}

.pt--31 {
  padding-top: calc(31px * 1) !important;
}

.pb--31 {
  padding-bottom: calc(31px * 1) !important;
}

.pt--32 {
  padding-top: calc(32px * 1) !important;
}

.pb--32 {
  padding-bottom: calc(32px * 1) !important;
}

.pt--33 {
  padding-top: calc(33px * 1) !important;
}

.pb--33 {
  padding-bottom: calc(33px * 1) !important;
}

.pt--34 {
  padding-top: calc(34px * 1) !important;
}

.pb--34 {
  padding-bottom: calc(34px * 1) !important;
}

.pt--35 {
  padding-top: calc(35px * 1) !important;
}

.pb--35 {
  padding-bottom: calc(35px * 1) !important;
}

.pt--36 {
  padding-top: calc(36px * 1) !important;
}

.pb--36 {
  padding-bottom: calc(36px * 1) !important;
}

.pt--37 {
  padding-top: calc(37px * 1) !important;
}

.pb--37 {
  padding-bottom: calc(37px * 1) !important;
}

.pt--38 {
  padding-top: calc(38px * 1) !important;
}

.pb--38 {
  padding-bottom: calc(38px * 1) !important;
}

.pt--39 {
  padding-top: calc(39px * 1) !important;
}

.pb--39 {
  padding-bottom: calc(39px * 1) !important;
}

.pt--40 {
  padding-top: calc(40px * 1) !important;
}

.pb--40 {
  padding-bottom: calc(40px * 1) !important;
}

.pt--41 {
  padding-top: calc(41px * 1) !important;
}

.pb--41 {
  padding-bottom: calc(41px * 1) !important;
}

.pt--42 {
  padding-top: calc(42px * 1) !important;
}

.pb--42 {
  padding-bottom: calc(42px * 1) !important;
}

.pt--43 {
  padding-top: calc(43px * 1) !important;
}

.pb--43 {
  padding-bottom: calc(43px * 1) !important;
}

.pt--44 {
  padding-top: calc(44px * 1) !important;
}

.pb--44 {
  padding-bottom: calc(44px * 1) !important;
}

.pt--45 {
  padding-top: calc(45px * 1) !important;
}

.pb--45 {
  padding-bottom: calc(45px * 1) !important;
}

.pt--46 {
  padding-top: calc(46px * 1) !important;
}

.pb--46 {
  padding-bottom: calc(46px * 1) !important;
}

.pt--47 {
  padding-top: calc(47px * 1) !important;
}

.pb--47 {
  padding-bottom: calc(47px * 1) !important;
}

.pt--48 {
  padding-top: calc(48px * 1) !important;
}

.pb--48 {
  padding-bottom: calc(48px * 1) !important;
}

.pt--49 {
  padding-top: calc(49px * 1) !important;
}

.pb--49 {
  padding-bottom: calc(49px * 1) !important;
}

.pt--50 {
  padding-top: calc(50px * 1) !important;
}

.pb--50 {
  padding-bottom: calc(50px * 1) !important;
}

.pt--51 {
  padding-top: calc(51px * 1) !important;
}

.pb--51 {
  padding-bottom: calc(51px * 1) !important;
}

.pt--52 {
  padding-top: calc(52px * 1) !important;
}

.pb--52 {
  padding-bottom: calc(52px * 1) !important;
}

.pt--53 {
  padding-top: calc(53px * 1) !important;
}

.pb--53 {
  padding-bottom: calc(53px * 1) !important;
}

.pt--54 {
  padding-top: calc(54px * 1) !important;
}

.pb--54 {
  padding-bottom: calc(54px * 1) !important;
}

.pt--55 {
  padding-top: calc(55px * 1) !important;
}

.pb--55 {
  padding-bottom: calc(55px * 1) !important;
}

.pt--56 {
  padding-top: calc(56px * 1) !important;
}

.pb--56 {
  padding-bottom: calc(56px * 1) !important;
}

.pt--57 {
  padding-top: calc(57px * 1) !important;
}

.pb--57 {
  padding-bottom: calc(57px * 1) !important;
}

.pt--58 {
  padding-top: calc(58px * 1) !important;
}

.pb--58 {
  padding-bottom: calc(58px * 1) !important;
}

.pt--59 {
  padding-top: calc(59px * 1) !important;
}

.pb--59 {
  padding-bottom: calc(59px * 1) !important;
}

.pt--60 {
  padding-top: calc(60px * 1) !important;
}

.pb--60 {
  padding-bottom: calc(60px * 1) !important;
}

.pt--61 {
  padding-top: calc(61px * 1) !important;
}

.pb--61 {
  padding-bottom: calc(61px * 1) !important;
}

.pt--62 {
  padding-top: calc(62px * 1) !important;
}

.pb--62 {
  padding-bottom: calc(62px * 1) !important;
}

.pt--63 {
  padding-top: calc(63px * 1) !important;
}

.pb--63 {
  padding-bottom: calc(63px * 1) !important;
}

.pt--64 {
  padding-top: calc(64px * 1) !important;
}

.pb--64 {
  padding-bottom: calc(64px * 1) !important;
}

.pt--65 {
  padding-top: calc(65px * 1) !important;
}

.pb--65 {
  padding-bottom: calc(65px * 1) !important;
}

.pt--66 {
  padding-top: calc(66px * 1) !important;
}

.pb--66 {
  padding-bottom: calc(66px * 1) !important;
}

.pt--67 {
  padding-top: calc(67px * 1) !important;
}

.pb--67 {
  padding-bottom: calc(67px * 1) !important;
}

.pt--68 {
  padding-top: calc(68px * 1) !important;
}

.pb--68 {
  padding-bottom: calc(68px * 1) !important;
}

.pt--69 {
  padding-top: calc(69px * 1) !important;
}

.pb--69 {
  padding-bottom: calc(69px * 1) !important;
}

.pt--70 {
  padding-top: calc(70px * 1) !important;
}

.pb--70 {
  padding-bottom: calc(70px * 1) !important;
}

.pt--71 {
  padding-top: calc(71px * 1) !important;
}

.pb--71 {
  padding-bottom: calc(71px * 1) !important;
}

.pt--72 {
  padding-top: calc(72px * 1) !important;
}

.pb--72 {
  padding-bottom: calc(72px * 1) !important;
}

.pt--73 {
  padding-top: calc(73px * 1) !important;
}

.pb--73 {
  padding-bottom: calc(73px * 1) !important;
}

.pt--74 {
  padding-top: calc(74px * 1) !important;
}

.pb--74 {
  padding-bottom: calc(74px * 1) !important;
}

.pt--75 {
  padding-top: calc(75px * 1) !important;
}

.pb--75 {
  padding-bottom: calc(75px * 1) !important;
}

.pt--76 {
  padding-top: calc(76px * 1) !important;
}

.pb--76 {
  padding-bottom: calc(76px * 1) !important;
}

.pt--77 {
  padding-top: calc(77px * 1) !important;
}

.pb--77 {
  padding-bottom: calc(77px * 1) !important;
}

.pt--78 {
  padding-top: calc(78px * 1) !important;
}

.pb--78 {
  padding-bottom: calc(78px * 1) !important;
}

.pt--79 {
  padding-top: calc(79px * 1) !important;
}

.pb--79 {
  padding-bottom: calc(79px * 1) !important;
}

.pt--80 {
  padding-top: calc(80px * 1) !important;
}

.pb--80 {
  padding-bottom: calc(80px * 1) !important;
}

.pt--81 {
  padding-top: calc(81px * 1) !important;
}

.pb--81 {
  padding-bottom: calc(81px * 1) !important;
}

.pt--82 {
  padding-top: calc(82px * 1) !important;
}

.pb--82 {
  padding-bottom: calc(82px * 1) !important;
}

.pt--83 {
  padding-top: calc(83px * 1) !important;
}

.pb--83 {
  padding-bottom: calc(83px * 1) !important;
}

.pt--84 {
  padding-top: calc(84px * 1) !important;
}

.pb--84 {
  padding-bottom: calc(84px * 1) !important;
}

.pt--85 {
  padding-top: calc(85px * 1) !important;
}

.pb--85 {
  padding-bottom: calc(85px * 1) !important;
}

.pt--86 {
  padding-top: calc(86px * 1) !important;
}

.pb--86 {
  padding-bottom: calc(86px * 1) !important;
}

.pt--87 {
  padding-top: calc(87px * 1) !important;
}

.pb--87 {
  padding-bottom: calc(87px * 1) !important;
}

.pt--88 {
  padding-top: calc(88px * 1) !important;
}

.pb--88 {
  padding-bottom: calc(88px * 1) !important;
}

.pt--89 {
  padding-top: calc(89px * 1) !important;
}

.pb--89 {
  padding-bottom: calc(89px * 1) !important;
}

.pt--90 {
  padding-top: calc(90px * 1) !important;
}

.pb--90 {
  padding-bottom: calc(90px * 1) !important;
}

.pt--91 {
  padding-top: calc(91px * 1) !important;
}

.pb--91 {
  padding-bottom: calc(91px * 1) !important;
}

.pt--92 {
  padding-top: calc(92px * 1) !important;
}

.pb--92 {
  padding-bottom: calc(92px * 1) !important;
}

.pt--93 {
  padding-top: calc(93px * 1) !important;
}

.pb--93 {
  padding-bottom: calc(93px * 1) !important;
}

.pt--94 {
  padding-top: calc(94px * 1) !important;
}

.pb--94 {
  padding-bottom: calc(94px * 1) !important;
}

.pt--95 {
  padding-top: calc(95px * 1) !important;
}

.pb--95 {
  padding-bottom: calc(95px * 1) !important;
}

.pt--96 {
  padding-top: calc(96px * 1) !important;
}

.pb--96 {
  padding-bottom: calc(96px * 1) !important;
}

.pt--97 {
  padding-top: calc(97px * 1) !important;
}

.pb--97 {
  padding-bottom: calc(97px * 1) !important;
}

.pt--98 {
  padding-top: calc(98px * 1) !important;
}

.pb--98 {
  padding-bottom: calc(98px * 1) !important;
}

.pt--99 {
  padding-top: calc(99px * 1) !important;
}

.pb--99 {
  padding-bottom: calc(99px * 1) !important;
}

.pt--100 {
  padding-top: calc(100px * 1) !important;
}

.pb--100 {
  padding-bottom: calc(100px * 1) !important;
}

@media screen and (max-width: 768px) {
  .chanfro-superior-direito {
    width: 100%;
    min-height: 500px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 40px;
    clip-path: polygon(0% 0%, calc(100% - 0px) 0%, 100% 0px, 100% 100%, 0% 100%);
  }
  .smlo {
    width: 80%;
  }
  #navbar {
    width: 100%;
    height: 42px;
    position: fixed;
    top: 0px;
    background-color: #86b558;
    z-index: 99;
    border-bottom: 4px solid #86b558;
    clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 0px), calc(100% - 0px) 100%, 0% 100%);
    /* --- Borda usando drop-shadow --- */
    filter: drop-shadow(0 0 0px black) drop-shadow(0 0 0 2px black);
  }
  #navbar::before {
    content: "";
    position: fixed;
    top: 0px; /* Borda de 2px */
    left: -6px; /* Borda de 2px */
    width: calc(100% + 4px); /* (300px + 4px = 304px) */
    height: calc(100% + 4px); /* (150px + 4px = 154px) */
    background-color: #fff; /* Cor da borda */
    border: 1px solid #86b558;
    z-index: -1; /* Coloca a borda atrás da div principal */
    /* Aplica o mesmo clip-path ao pseudo-elemento */
    clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 0px), calc(100% - 0px) 100%, 0% 100%);
  }
}
.bt_map {
  cursor: pointer;
  pointer-events: visiblePainted;
}

text {
  box-sizing: border-box;
}

.active {
  fill: #ee7b22;
}

.activeH {
  fill: #ee7b22;
}

#con1,
#con2,
#con3,
#con4,
#con5,
#con6,
#con7 {
  visibility: hidden;
}

.vis {
  visibility: visible !important;
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  background-position: center;
  background-size: cover;
}

.swiper-slide img {
  display: block;
  width: 100%;
}

.swiper-button-next {
  background-color: #23734c;
  width: 63px;
  height: 63px;
  top: 30px;
  left: 140px;
}

.swiper-button-prev {
  background-color: #23734c;
  width: 63px;
  height: 63px;
  top: 30px;
  left: 0px;
}

.swiper-button-next:after,
.swiper-button-prev:after {
  font-family: swiper-icons;
  font-size: var(--swiper-navigation-size);
  text-transform: none !important;
  letter-spacing: 0;
  font-variant: initial;
  line-height: 1;
  color: #fff;
}

.swiper-slide {
  margin-top: 100px;
}

.bt_ods_a {
  cursor: pointer;
}

.bt_ods_a:hover path {
  fill: #4AA177;
}

.bt_ods_a:hover .ico_ods_a path {
  stroke: #ffffff;
}

.amb_base {
  fill: #4AA177;
}

.icon_stroke path {
  stroke: #FFFFFF;
}

.bt_ods_s {
  cursor: pointer;
}

.bt_ods_s:hover path {
  fill: #A9D46E;
}

.bt_ods_s:hover .ico_ods_s {
  stroke: #ffffff;
}

.soc_base {
  fill: #A9D46E;
}

.icon_stroke path {
  stroke: #FFFFFF;
}

.icon_stroke {
  stroke: #FFFFFF;
}

.icon_stroke2 {
  fill: #FFFFFF;
}

.bt_ods_g {
  cursor: pointer;
}

.bt_ods_g:hover path {
  fill: #33BCAB;
}

.bt_ods_g:hover .ico_ods_g {
  stroke: #ffffff;
}

.gov_base {
  fill: #33BCAB;
}

.icon_stroke path {
  stroke: #FFFFFF;
}

.bt_ods_s {
  cursor: pointer;
}

.bt_ods_s:hover path {
  fill: #A9D46E;
}

.bt_ods_s:hover .ico_ods_s {
  stroke: #ffffff;
}

.bt_ods_n {
  cursor: pointer;
}

.bt_ods_n:hover path {
  fill: #F1954E;
}

.bt_ods_n:hover .ico_ods_n {
  stroke: #ffffff;
}

.bt_ods_n:hover .ico_ods_n2 {
  fill: #ffffff;
}

.neg_base {
  fill: #F1954E;
}

.base_ods_cor_1 {
  fill: #CF2439;
}

.base_ods_cor_2 {
  fill: #DDA63A;
}

.base_ods_cor_3 {
  fill: #4D9F46;
}

.base_ods_cor_4 {
  fill: #C4202E;
}

.base_ods_cor_5 {
  fill: #EE412B;
}

.base_ods_cor_6 {
  fill: #27BCE2;
}

.base_ods_cor_7 {
  fill: #F9C314;
}

.base_ods_cor_8 {
  fill: #A11C43;
}

.base_ods_cor_9 {
  fill: #F16A2B;
}

.base_ods_cor_10 {
  fill: #E02270;
}

.base_ods_cor_11 {
  fill: #F59B2B;
}

.base_ods_cor_12 {
  fill: #BE8B2C;
}

.base_ods_cor_13 {
  fill: #417F44;
}

.base_ods_cor_14 {
  fill: #5BB947;
}

.base_ods_cor_15 {
  fill: #5BB947;
}

.base_ods_cor_16 {
  fill: #00699D;
}

.base_ods_cor_17 {
  fill: #19486B;
}

/*# sourceMappingURL=style.css.map */