@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');

:root{
  --bg:#f1f3ef;
  --paper:#eef2ed;
  --green:#0a7e3a;
  --green-dark:#06592a;
  --teal:#21b7b4;
  --gold:#f0a41a;
  --purple:#7d49a7;
  --ink:#0a4d33;
  --muted:#54655d;
  --white:#ffffff;
}

*{box-sizing:border-box}


.lato-thin {
  font-family: "Lato", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.lato-light {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.lato-regular {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.lato-bold {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.lato-black {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.lato-thin-italic {
  font-family: "Lato", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.lato-light-italic {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.lato-regular-italic {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.lato-bold-italic {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.lato-black-italic {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-style: italic;
}


body{
  font-family: "Noto Serif", serif;
  /*background: var(--bg);*/
  color: var(--ink);
}
a{text-decoration:none}
.container{max-width:1120px}



.link a img{
  transition: all .3s ease;
  filter: grayscale(30%);
}

.link .resource-block>div{
  transition: all .3s ease;
  filter: grayscale(30%);
}

.link .resource-block:hover > div{
  transition: all .3s ease;
  filter: grayscale(0%) brightness(0.7) contrast(1.2);
  transform: scale(1.05);
}

.link a:hover img{
  /*filter: grayscale(0%) brightness(1.2);*/
  filter: grayscale(0%) brightness(0.7) contrast(1.2);
  transform: scale(1.05);
}

.link2 a:hover img{
  /*filter: grayscale(0%) brightness(1.2);*/
  filter: grayscale(0%) brightness(0.7) contrast(1.2);
  /*transform: scale(1.02);*/
}

.site-header{
  background: transparent;
}
.navbar-brand{
  color: var(--green-dark);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .9rem;
}
.brand-mark{
  width: 38px;
  height: 38px;
  display: inline-block;
  border-radius: 50% 40% 50% 20%;
  background:
    radial-gradient(circle at 50% 50%, #f0a41a 0 12%, transparent 13%),
    radial-gradient(circle at 50% 50%, #0a7e3a 0 28%, transparent 29%),
    radial-gradient(circle at 50% 50%, #ffffff 0 41%, transparent 42%),
    linear-gradient(135deg,#0a7e3a,#0f9950);
  box-shadow: 10px 0 0 -5px #0f9950, 16px 6px 0 -10px #0f9950;
}
.brand-mark-lg{width:52px;height:52px}
.brand-text{line-height:1.1}
.nav-link{
  color: var(--green-dark);
  letter-spacing: .08em;
}
.nav-link:hover{color: var(--green)}

.hero-card{
  background: #dde4dd;
  border-radius: 2px;
  padding: 2.5rem 2.4rem 2rem;
  min-height: 320px;
}
.eyebrow{
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .76rem;
  font-weight: 700;
  color: var(--green);
}
.hero-title{
  font-size: clamp(2rem,5vw,4.3rem);
  line-height: .95;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--green-dark);
  margin: 0;
}
.hero-copy{
  font-size: 26px;
  color: #006838;
}
.hero-badge{
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: var(--green);
  border: 10px solid rgba(33,183,180,.18);
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-badge-inner{
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #cfe6da;
  color: var(--green-dark);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-weight: 700;
  line-height: 1.05;
  font-size: .84rem;
}

.shape{
  position:absolute;
  border-radius:50%;
  opacity:1;
}
.shape-a{width:90px;height:90px;left:25px;top:36px;background: radial-gradient(circle at center,#f0a41a 0 10%, transparent 11%), var(--green); box-shadow: 0 26px 0 -18px var(--green), 18px 42px 0 -30px var(--green);}
.shape-b{width:72px;height:72px;right:52px;top:34px;background: var(--green); box-shadow: -22px 18px 0 -24px var(--purple), 8px -10px 0 -25px var(--gold);}
.shape-c{width:58px;height:58px;right:18px;bottom:38px;background: var(--green)}
.shape-d{width:44px;height:44px;right:88px;bottom:52px;background: var(--purple)}
.small.green{background:var(--green)}
.small.teal{background:var(--teal)}
.small.mustard{background:var(--gold)}
.advocacy-banner .shape.small:nth-child(1){width:34px;height:34px;right:24px;top:18px}
.advocacy-banner .shape.small:nth-child(2){width:76px;height:20px;border-radius:999px;right:64px;bottom:22px}
.advocacy-banner .shape.small:nth-child(3){width:22px;height:22px;right:146px;bottom:16px}

.story-grid{
  display:grid;
  gap: 1.15rem;
}
.story-card{
  padding: 1.5rem 1.6rem;
  color: #fff;
  position: relative;
}
.story-card h2{
  color:#fff;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .55rem;
  font-size: 30px;
}
.story-card p{
  margin:0;
  line-height:1.55;
}
.card-why{background: url(assets/bg1.png?1) no-repeat;display:relative; background-size: 100% 100%;z-index: 3}
.card-now{background: url(assets/bg2.png?1) no-repeat;display:relative; background-size: 100% 100%;z-index: 2}
.card-how{background: url(assets/bg3.png?1) no-repeat;display:relative; background-size: 100% 100%;z-index: 1}

.det-bg-1{position:absolute; right:-10px; bottom:-70px;}

.det-bg-2{position:absolute; left:-30px; bottom:-195px;}

.section-kicker{
  text-transform: uppercase;
  letter-spacing: .11em;
  font-weight: 700;
  color: var(--green-dark);
  font-size: 22px;
}
.social-dot{
  width: 28px;
  height: 28px;
  border-radius: 2px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: var(--green-dark);
  color:#fff;
  font-size:.7rem;
  text-transform:uppercase;
  font-weight:700;
}
.social-dot.light{
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.22);
}

.advocacy-section{
  background: #d9dfd6;
}
.section-title{
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--green-dark);
  font-size: 30px;
  font-weight: 700;
}
.advocacy-banner{
  background: url(assets/bg4.png) no-repeat;
  background-size: 100% 100%;
  color: #fff;
  padding: 1.4rem 1.55rem;
  margin-bottom: 1rem;
}
.advocacy-banner h3{
  margin:0;
  font-size: 30px;
  line-height:1.35;
  text-transform: uppercase;
}
.resource-block{
  color:#fff;
  text-transform: uppercase;
  font-size: 2rem;
  line-height: 1.05;
  letter-spacing: .03em;
}
.resource-green{background: var(--green)}
.resource-gold{background: var(--gold)}
.download-panel{
  padding: .4rem 0 .6rem;
  margin-top:10px;
}

.lang-btn{
  padding: .3em .7rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: #006838;
  color: #ffffff;
  font-weight: 700;
  font-size: 22px;
  text-transform: uppercase;
}

.lang-btn:hover{
  background: #008D36;
}

.lang-btn-menu{
  padding: .1em .3rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: #006838;
  color: #ffffff;
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
}

.lang-btn-menu:hover{
  background: #008D36;
}


.dest-bg3{   max-width:350px; width:100%;position:absolute;top:-150px; right:0; }

.members{
  width:100%;
}

/* linhas desktop */
.logo-row{
  display:grid;
  justify-content:center;
  align-items:center;
  gap:40px;
  margin:40px 0;
}

/* número de logos por linha */
.row-7{
  grid-template-columns:repeat(7,auto);
}

.row-6{
  grid-template-columns:repeat(6,auto);
}

.row-5{
  grid-template-columns:repeat(5,auto);
}

.row-4{
  grid-template-columns:repeat(4,auto);
}

.row-3{
  grid-template-columns:repeat(3,auto);
}

.logo-row img{
  max-height:90px;
  max-width:160px;
  width:auto;
  height:auto;
  object-fit:contain;
  margin:auto;
}

/* MOBILE */
@media (max-width:768px){

  .logo-row{
    grid-template-columns:repeat(2,1fr);
    justify-items:center;
    gap:30px;
  }

}

.join-lead{
  font-size: 1.35rem;
  color: var(--green-dark);
}
.join-banner{
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
}
.join-copy{
  font-size: 1rem;
  max-width: 690px;
}
.join-copy a{
  color: #ffd86b;
  text-decoration: underline;
}
.join-flower{
  width: 110px;
  height: 110px;
  position: relative;
  flex: 0 0 auto;
}
.join-flower span{
  position:absolute;
  width: 34px;height: 34px;border-radius:50%;
}
.join-flower span:nth-child(1){background:#f0a41a;left:37px;top:4px}
.join-flower span:nth-child(2){background:#21b7b4;right:9px;top:36px}
.join-flower span:nth-child(3){background:#d6c7ea;left:12px;bottom:18px}
.join-flower span:nth-child(4){background:#f5d574;right:30px;bottom:6px}
.join-flower strong{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--green);
  font-size: 2.1rem;
}

.site-footer{
  background: var(--green-dark);
  color:#fff;
  margin-top: 1.25rem;
}
.footer-title{
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.footer-subtitle{
  font-size: .83rem;
  color: rgba(255,255,255,.8);
  max-width: 420px;
}
.footer-label{
  color: rgba(255,255,255,.72);
  letter-spacing: .12em;
}
.footer-link{
  color:#fff;
}

/* social icons grid */

.site-footer .social-icons{
   display:grid;
   grid-template-columns:repeat(3,40px);
   gap:10px 10px;
   margin-bottom:50px;
}

.site-footer .social-icons a{
   color:white;
   font-size:26px;
   text-decoration:none;
   transition:opacity .3s;
}

.site-footer .social-icons a:hover{
   opacity:0.7;
}

/* contact section */

.site-footer .contact h2{
   font-size:18px;
   font-weight:800;
   letter-spacing:1px;
   margin-bottom:20px;
}

.site-footer .email-label{
   font-size:18px;
   margin-bottom:0px;
}

.site-footer .email{
   font-size:18px;
   color:white;
   text-decoration:underline;
   font-weight:700;
}

@media (max-width: 991.98px){
  .hero-card{padding: 2rem 1.5rem}
  .hero-badge{margin-left:auto}
  .members-grid{grid-template-columns: repeat(3,1fr)}
}

@media (max-width: 767.98px){
  .resource-block{min-height: 130px;font-size: 1.7rem}
  .members-grid{grid-template-columns: repeat(2,1fr)}
  .join-banner{flex-direction:column;align-items:flex-start}
  .join-flower{align-self:flex-end}
  .shape-a{width:56px;height:56px}
  .shape-b{width:44px;height:44px}

.dest-bg3{max-width:250px; width:100%;position:absolute;top:-150px; right:0};

}

@media (max-width: 575.98px){
  .members-grid{grid-template-columns: 1fr}
  .hero-title{font-size: 2rem}
  .hero-card{padding: 1.4rem 1rem}
  .story-card{padding: 1.25rem 1rem}
}