:root{
  --bg: #0b1220;
  --surface: #ffffff;
  --surface-2: #f7f9fb;
  --text: #1b1f24;
  --muted: #5b6672;

  --brand-1: #28a745;
  --brand-2: #20c997;

  --accent: #ffc107;

  --radius: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 8px 24px rgba(0,0,0,.08);
  --shadow-md: 0 14px 40px rgba(0,0,0,.14);

  --container: 1200px;

  --pad-1: clamp(16px, 2vw, 24px);
  --pad-2: clamp(24px, 4vw, 56px);

  --h1: clamp(2rem, 4vw, 3.2rem);
  --h2: clamp(1.6rem, 3vw, 2.4rem);
  --h3: clamp(1.2rem, 2vw, 1.6rem);
  --p: 1.05rem;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text);
  line-height: 1.6;
  background: #fff;
}

/* Acessibilidade */
.skip-link{
  position:absolute;
  left:-999px;
  top: 12px;
  background:#000;
  color:#fff;
  padding:10px 14px;
  border-radius:10px;
  z-index:9999;
}
.skip-link:focus{ left: 12px; }

:focus-visible{
  outline: 3px solid rgba(255,193,7,.6);
  outline-offset: 3px;
  border-radius: 10px;
}

/* Container */
.container{
  width: min(var(--container), calc(100% - 2*var(--pad-1)));
  margin: 0 auto;
  padding: var(--pad-2) 0;
}

/* Header */
header{
  position: sticky;
  top: 0;
  z-index: 1000;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  box-shadow: 0 2px 18px rgba(0,0,0,.12);
}

.nav{
  width: min(var(--container), calc(100% - 2*var(--pad-1)));
  margin: 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 0;
  gap: 18px;
}

.brand{
  display:flex;
  align-items:center;
  gap: 14px;
  min-width: 220px;
}

.brand h1{
  margin:0;
  font-size: 1.15rem;
  letter-spacing: .4px;
  line-height: 1.1;
}
.brand p{
  margin: 3px 0 0;
  opacity: .9;
  font-size: .92rem;
}

.nav-links{
  list-style:none;
  display:flex;
  gap: 18px;
  margin:0;
  padding:0;
  align-items:center;
}

.nav-links a{
  color:#fff;
  text-decoration:none;
  font-weight: 600;
  opacity: .95;
  padding: 10px 10px;
  border-radius: 10px;
  transition: background .2s ease, opacity .2s ease;
}
.nav-links a:hover{ opacity: 1; background: rgba(255,255,255,.12); }

.nav-cta{
  display:flex;
  gap: 10px;
  align-items:center;
}

.menu-btn{
  display:none;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.10);
  color:#fff;
  padding: 10px 12px;
  border-radius: 12px;
  cursor:pointer;
  font-weight: 700;
}

/* Hero */
.hero{
  position: relative;
  color: #fff;
  padding: clamp(68px, 10vw, 120px) var(--pad-1);
  overflow:hidden;
  text-align:center;
  isolation:isolate;
}

.hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(900px 420px at 20% 25%, rgba(255,193,7,.22), transparent 60%),
    radial-gradient(900px 420px at 80% 25%, rgba(32,201,151,.22), transparent 60%),
    linear-gradient(135deg, rgba(40,167,69,.95), rgba(32,201,151,.92));
  z-index:-2;
}

.hero::after{
  content:"";
  position:absolute; inset:-40px;
  background:
    radial-gradient(700px 240px at 50% 30%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(900px 360px at 50% 115%, rgba(0,0,0,.30), transparent 60%);
  z-index:-1;
  filter: blur(0px);
  opacity: .9;
  pointer-events:none;
}

.hero h2{
  font-size: var(--h1);
  margin: 0 auto 14px;
  max-width: 18ch;
  letter-spacing: -0.5px;
  text-shadow: 0 10px 28px rgba(0,0,0,.22);
}

.hero p{
  margin: 0 auto 18px;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  max-width: 70ch;
  opacity: .98;
}

.tagline{
  margin-top: 8px;
  font-style: italic;
  color: rgba(255,255,255,.92);
  border-top: 1px solid rgba(255,255,255,.20);
  padding-top: 14px;
  max-width: 70ch;
}

.hero-actions{
  display:flex;
  justify-content:center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 22px;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: var(--radius-pill);
  text-decoration:none;
  font-weight: 800;
  letter-spacing: .2px;
  border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  user-select:none;
  will-change: transform;
}
.btn:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn:active{ transform: translateY(0px); }

.btn-primary{
  background: var(--accent);
  color: #1b1f24;
}
.btn-secondary{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.28);
  color: #fff;
  box-shadow: none;
}
.btn-ghost{
  background: transparent;
  border-color: rgba(27,31,36,.18);
  color: var(--text);
}
button.btn{
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  cursor: pointer;
}

/* Titles */
.section-title{
  font-size: var(--h2);
  margin: 0 0 26px;
  text-align:center;
  color: var(--brand-1);
  letter-spacing: -0.3px;
}
.section-lead{
  text-align:center;
  margin: -10px auto 32px;
  color: var(--muted);
  max-width: 70ch;
  font-size: var(--p);
}

/* About */
.about{ background: var(--surface-2); }
.about-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(18px, 3vw, 42px);
  align-items:start;
}

.about-text h3{
  font-size: var(--h3);
  margin: 0 0 10px;
  color: var(--brand-1);
}

.about-text p{
  margin: 0 0 12px;
  font-size: var(--p);
  color: #2b3138;
  max-width: 72ch;
}

.values{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}

.card{
  background: #fff;
  border: 1px solid rgba(16,24,40,.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.value-item{
  padding: 16px 16px;
  text-align:center;
}
.value-item h4{
  margin: 6px 0 6px;
  color: #1f2a33;
  font-size: 1.05rem;
}
.value-item p{
  margin:0;
  color: var(--muted);
  font-weight: 600;
  font-size: .98rem;
}

/* Impact */
.impact{
  color:#fff;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
}
.impact .section-title{ color:#fff; }
.impact-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
  text-align:center;
}
.impact-item{
  padding: 18px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.impact-item h3{
  margin: 0 0 6px;
  font-size: clamp(2rem, 3vw, 2.8rem);
  letter-spacing: -0.6px;
}
.impact-item p{
  margin: 0;
  opacity: .95;
  font-weight: 700;
}

/* Urgent */
.urgent-wrap{
  width: min(var(--container), calc(100% - 2*var(--pad-1)));
  margin: 0 auto;
  padding: var(--pad-2) 0 0;
}
.urgent{
  background: #fff7db;
  border: 1px solid rgba(255,193,7,.35);
  border-left: 6px solid var(--accent);
  padding: clamp(22px, 3vw, 32px);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.urgent h3{
  margin:0 0 10px;
  color: #6c5400;
  font-size: 1.4rem;
  letter-spacing: -0.2px;
}
.urgent p{
  margin: 0 0 12px;
  color: #6c5400;
  font-size: 1.05rem;
}
.urgent .btn{ margin-top: 8px; }

/* Gallery */
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
}
.gallery-item{
  overflow:hidden;
  border-radius: var(--radius);
  border: 1px solid rgba(16,24,40,.10);
  box-shadow: var(--shadow-sm);
  background:#fff;
  transition: transform .18s ease;
}
.gallery-item:hover{ transform: translateY(-3px); }

.gallery-item .cap{
  padding: 14px 14px;
  font-weight: 900;
  color: #1f2a33;
  border-top: 1px solid rgba(16,24,40,.08);
}

/* Álbum de fotos (capa clicável) */
.album{
  position: relative;
  display: block;
  width: 100%;
  height: 220px;
  padding: 0;
  border: 0;
  background: var(--surface-2);
  cursor: zoom-in;
}
.album:focus-visible{ outline-offset: -3px; border-radius: 0; }
.album img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Capa com a foto inteira: o fundo desfocado preenche as laterais */
.album-full{ overflow: hidden; }
.album-full img{ position: relative; object-fit: contain; }
.album-full .album-bg{
  position: absolute;
  inset: 0;
  object-fit: cover;
  filter: blur(16px) brightness(.75);
  transform: scale(1.15);
}
.album-count{
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(0,0,0,.62);
  color: #fff;
  font-size: .85rem;
  font-weight: 800;
}

/* Lightbox */
.lightbox{
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 64px 72px 24px;
  border: 0;
  background: rgba(5,10,14,.94);
  backdrop-filter: blur(6px);
  color: #fff;
}
.lightbox[open]{
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox::backdrop{ background: transparent; }
html:has(.lightbox[open]){ overflow: hidden; }

.lightbox figure{
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.lightbox img{
  max-width: min(1100px, 100%);
  max-height: calc(100vh - 140px);
  max-height: calc(100dvh - 140px);
  object-fit: contain;
  border-radius: 12px;
}
.lightbox figcaption{
  font-weight: 800;
  text-align: center;
  opacity: .9;
}

.lb-btn{
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0 0 4px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  color: #fff;
  font: inherit;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}
.lb-btn:hover{ background: rgba(255,255,255,.26); }
.lb-close{ top: 12px; right: 12px; }
.lb-prev, .lb-next{ top: 50%; transform: translateY(-50%); }
.lb-prev{ left: 12px; }
.lb-next{ right: 12px; }

/* Help */
.help{ background: var(--surface-2); }
.help-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
}
.help-card{
  padding: 20px;
  display:flex;
  flex-direction: column;
  align-items:flex-start;
}
.help-card .btn{ margin-top: auto; } /* alinha os botões na base dos cards */
.help-card h3{
  margin: 0 0 8px;
  color: var(--brand-1);
  font-size: 1.2rem;
}
.help-card p{
  margin: 0 0 14px;
  color: var(--muted);
  font-weight: 600;
}

.pix{
  margin-top: 14px;
  padding: 18px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap: wrap;
  gap: 14px;
  border: 1px dashed rgba(40,167,69,.45);
  scroll-margin-top: 96px; /* não fica atrás do header fixo */
  animation: pix-in .2s ease;
}
.pix[hidden]{ display:none; }
@keyframes pix-in{
  from{ opacity: 0; transform: translateY(-6px); }
}
.pix span{
  display:block;
  font-size: .9rem;
  color: var(--muted);
}
.pix-key{
  display:block;
  font-size: 1.3rem;
  color: var(--text);
  letter-spacing: .3px;
}

/* Contact */
.contact{
  background: linear-gradient(135deg, #20262b, #3a434b);
  color:#fff;
}
.contact .section-title{ color:#fff; }
.contact-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
.contact-item{
  padding: 18px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-align:center;
}
.contact-item h3{ margin: 0 0 8px; }
.contact-item p{ margin:0; opacity:.95; }
.contact-item a{
  color: var(--accent);
  text-decoration:none;
  font-weight: 900;
}

.contact-actions{
  text-align:center;
  margin-top: 22px;
}

/* Footer */
footer{
  background:#151a1f;
  color:#fff;
  text-align:center;
  padding: 22px var(--pad-1);
}
footer p{ margin: 6px 0; }
footer a{ color: var(--accent); text-decoration:none; font-weight: 900; }

/* Responsivo */
@media (max-width: 980px){
  .impact-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .help-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .gallery-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .contact-grid{ grid-template-columns: 1fr; }
  .about-grid{ grid-template-columns: 1fr; }
  .values{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 768px){
  .menu-btn{ display:inline-flex; }
  .nav-links{
    position:absolute;
    left: var(--pad-1);
    right: var(--pad-1);
    top: 68px;
    background: rgba(10, 15, 18, .92);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 16px;
    padding: 12px;
    display:none;
    flex-direction: column;
    gap: 6px;
    box-shadow: var(--shadow-md);
  }
  .nav-links.open{ display:flex; }
  .nav-links a{
    padding: 12px 12px;
    background: rgba(255,255,255,.08);
  }
  .nav-cta{ display:none; } /* opcional: deixar mais limpo no mobile */
  .values{ grid-template-columns: 1fr; }
  .gallery-grid{ grid-template-columns: 1fr; }
  .help-grid{ grid-template-columns: 1fr; }
  /* Setas descem para a base e a foto ocupa a largura toda */
  .lightbox{ padding: 64px 12px 88px; }
  .lightbox img{ max-height: calc(100vh - 200px); max-height: calc(100dvh - 200px); }
  .lb-prev, .lb-next{ top: auto; bottom: 20px; transform: none; }
  .lb-prev{ left: calc(50% - 60px); }
  .lb-next{ right: calc(50% - 60px); }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .btn, .gallery-item{ transition:none; }
  .btn:hover{ transform:none; }
  .gallery-item:hover{ transform:none; }
  .pix{ animation:none; }
}