/* =========================================================
   PluriPovos – estilos do site one-page
   Cores e fontes extraídas do folder impresso
   ========================================================= */

:root {
  --roxo: #a43e97;
  --amarelo: #e6af34;
  /* Amarelo escurecido para texto sobre branco: o do folder tem contraste 1,99:1; este, 3,85:1 */
  --amarelo-texto: #a87a12;
  --coral: #f15a43;
  --rosa: #ee3876;
  --azul: #3453a4;
  --rosado: #eee0df;
  --texto: #231f20;
  --texto-projeto: #2a200d;
  --branco: #ffffff;

  --fonte-titulo: "Poppins", Arial, sans-serif;
  --fonte-texto: "Roboto Slab", Georgia, serif;

  --altura-menu: 68px;
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--altura-menu);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--branco);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-weight: 300;
  font-size: 1.17rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

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

figure { margin: 0; }

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

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Foco visível para navegação por teclado (a cor acompanha o texto do elemento) */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
textarea:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

/* ---------- Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border: 0;
  border-radius: 999px;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .2);
}

.btn--roxo {
  background: var(--roxo);
  color: var(--branco);
}

.btn--branco {
  background: var(--branco);
  color: var(--roxo);
}

.btn--branco:hover,
.btn--branco:focus-visible {
  background: var(--rosado);
}

/* ---------- Títulos das seções (Poppins fina + Poppins forte, em caixa-alta) ---------- */
.titulo {
  font-size: clamp(2.5rem, 5.6vw, 3.9rem);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.titulo__fino { font-weight: 300; }
.titulo__forte { font-weight: 600; }

.titulo--roxo { color: var(--roxo); }
.titulo--amarelo { color: var(--amarelo-texto); }

/* ---------- Menu fixo ---------- */
.menu {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--altura-menu);
  background: var(--branco);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}

.menu__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.menu__marca img {
  width: auto;
  height: 44px;
}

.menu__links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.menu__links a:not(.btn) {
  font-family: var(--fonte-titulo);
  font-weight: 500;
  font-size: .95rem;
  text-decoration: none;
}

.menu__links a:not(.btn):hover,
.menu__links a:not(.btn):focus-visible {
  color: var(--coral);
}

.menu__links .btn { padding: 8px 24px; }

.menu__toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.menu__toggle span {
  display: block;
  height: 3px;
  margin: 5px 0;
  border-radius: 2px;
  background: var(--texto);
}

@media (max-width: 720px) {
  .menu__toggle { display: block; }

  .menu__links {
    display: none;
    position: absolute;
    top: var(--altura-menu);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 8px 16px 20px;
    background: var(--branco);
    box-shadow: 0 8px 12px rgba(0, 0, 0, .12);
  }

  .menu__links.is-aberto { display: flex; }

  .menu__links a:not(.btn) {
    width: 100%;
    padding: 12px 0;
    border-bottom: 1px solid var(--rosado);
  }

  .menu__links .btn { margin-top: 16px; }
}

/* ---------- Capa: hero interativo (página 1, metade direita) ---------- */
.capa {
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: calc(var(--altura-menu) + 8px);
  overflow: hidden;
  isolation: isolate;
  /* Efeito 3D: mesma distância usada no script (PERSPECTIVA) */
  perspective: 1400px;
}

/* Os dois grupos giram com o mouse e mantêm a profundidade (translateZ) de cada camada.
   Atenção: overflow, filter ou opacity < 1 nestes dois elementos achatariam o 3D */
.capa__fundo,
.capa__arte {
  transform-style: preserve-3d;
}

/* Camadas que se movem (parallax no desktop, flutuação no touch) */
.camada { will-change: transform; }

/* Hexágonos rosados espalhados pelo fundo do hero */
.capa__fundo {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hex-fundo {
  position: absolute;
  width: calc(var(--w) * 1vw);
  aspect-ratio: 56.88 / 51.04;
  color: var(--rosado);
  /* Opacidade levemente diferente em cada hexágono (definida no HTML) */
  opacity: var(--op, 1);
}

/* Composição: proporção da caixa medida no PDF (484 × 669pt), cabendo na altura da tela.
   Passa --sobra px da base do hero (escondidos pelo overflow), para as faixas poderem subir
   sem mostrar um vão embaixo. Os 90% deixam espaço para o hexágono azul, que sai pela esquerda */
.capa__arte {
  --sobra: 48px;
  position: relative;
  aspect-ratio: 484 / 669.35;
  width: min(90%, 640px, calc((100vh - var(--altura-menu) - 8px + var(--sobra)) * 484 / 669.35));
  width: min(90%, 640px, calc((100svh - var(--altura-menu) - 8px + var(--sobra)) * 484 / 669.35));
  margin-bottom: calc(var(--sobra) * -1);
}

.capa__arte > * { position: absolute; }

/* Azul e amarelo inteiros, com a base logo acima da parte escondida */
.hex-capa--base { bottom: calc(var(--sobra) + 4px); }

/* Faixas: largura medida no PDF; a altura vem da própria imagem, que termina na base da caixa */
.faixa { width: 16.73%; }

.faixa img {
  width: 100%;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .25));
  transition: transform .35s ease;
}

/* Hover (mouse) ou toque (classe colocada pelo script): a faixa sobe levemente */
.faixa:hover img,
.faixa.is-erguida img {
  transform: translateY(-14px);
}

/* Posição do título medida no PDF, em % da caixa (o SVG tem margem extra para a sombra do POVOS) */
.capa__titulo {
  left: 17.61%;
  top: 17.53%;
  width: 70.88%;
}

.capa__titulo img { width: 100%; }

/* Touch: flutuação automática lenta, com duração e atraso diferentes por camada */
@media (hover: none) and (prefers-reduced-motion: no-preference) {
  .camada {
    animation: flutua var(--dur, 8s) ease-in-out var(--atraso, 0s) infinite alternate;
  }
}

@keyframes flutua {
  from { transform: translate(0, 0); }
  to { transform: translate(calc(var(--prof) * 4px), calc(var(--prof) * -7px)); }
}

@media (prefers-reduced-motion: reduce) {
  .faixa img { transition: none; }
}

/* ---------- Seções de conteúdo ---------- */
.secao {
  position: relative;
  padding: 96px 0 88px;
  overflow: hidden;
}

.secao p { margin: 0 0 1.1em; }

/* Fotos recortadas em hexágono, com rabiscos decorativos em volta */
.foto-hexagono {
  position: relative;
}

.foto-hexagono > img:not(.foto-hexagono__deco) { width: 100%; }

.foto-hexagono__deco {
  position: absolute;
  height: auto;
}

/* ---------- Quem Somos (fundo amarelo) ---------- */
.quem-somos {
  background: var(--amarelo);
  /* Padding inferior maior: a foto de Projetos sobe 60px e invade o fim desta seção (+20px de folga) */
  padding-bottom: 168px;
  /* Sem corte vertical: o topo da foto aparece sobre o hero. Na horizontal continua cortando
     (clip), para os raios decorativos não criarem rolagem lateral no celular */
  overflow: visible;
  overflow-x: clip;
}

.quem-somos__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

.quem-somos .titulo,
.projetos .titulo {
  margin-bottom: 36px;
}

.quem-somos .titulo span,
.projetos .titulo span {
  display: block;
}

/* Rabisco ondulado branco à esquerda do título */
.quem-somos .titulo {
  position: relative;
  padding-left: 32px;
}

.titulo__rabisco {
  position: absolute;
  left: 0;
  top: .05em;
  width: auto;
  height: 1.95em;
}

.quem-somos__texto p {
  max-width: 34em;
  padding-left: 32px;
  font-size: 1.24rem;
}

/* A foto é o hexágono completo (a metade de cima foi espelhada do caminho do PDF).
   No desktop, o margin-top negativo anula o padding-top de .secao (96px) e sobe a foto
   os 6,6% (da largura da foto) que o folder cortava, menos 10px; esse trecho invade o hero.
   O % funciona porque, como item da grade, a margem é calculada sobre a largura da coluna = largura da foto */
.quem-somos__inner { align-items: start; }

.quem-somos__foto { margin-top: calc(-96px - 6.6% + 10px); }

/* Raios brancos à esquerda da foto (posição medida no PDF, em % do hexágono completo) */
.quem-somos__raios {
  left: -14.5%;
  top: 25.7%;
  width: 17%;
}

/* As 5 áreas: hexágonos coral em zigue-zague, como no folder */
.areas__titulo {
  margin: 72px 0 28px;
  text-align: center;
  font-weight: 500;
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
}

/* No desktop os hexágonos, ícones e textos são ~30% maiores e as 5 áreas ocupam a largura toda;
   os tamanhos encolhem com a tela (vw) e, a partir de 600px, voltam aos valores mínimos da versão mobile */
.areas {
  --hex: clamp(76px, 11.7vw, 140px);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8em;
  min-height: calc(var(--hex) * 1.85 + 52px);
  text-align: center;
}

/* Itens pares: nome acima do ícone e ícone deslocado para baixo */
.area:nth-child(even) { justify-content: flex-end; }
.area:nth-child(even) .area__nome { order: 1; }
.area:nth-child(even) .area__icone { order: 2; }

.area__numeral {
  width: auto;
  height: clamp(26px, 2.6vw, 34px);
}

.area__icone {
  position: relative;
  width: var(--hex);
  aspect-ratio: 56.88 / 51.04;
  color: var(--coral);
}

.area__icone svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* No folder o ícone ocupa cerca de 68% da largura do hexágono */
.area__icone img {
  position: absolute;
  left: 16%;
  top: 12%;
  width: 68%;
}

.area__nome {
  font-size: clamp(1.08rem, 1.6vw, 1.4rem);
  line-height: 1.25;
}

@media (max-width: 860px) {
  .quem-somos__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* No celular a foto (hexágono completo) vem antes do texto, com 48px de espaço acima para arejar;
     mesma largura da foto de Projetos */
  .quem-somos__foto {
    order: -1;
    width: min(80%, 420px);
    margin: -48px auto 0;
  }
}

/* No celular o zigue-zague fica apertado: os ícones viram uma grade simples */
@media (max-width: 600px) {
  .areas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px 12px;
  }

  .area {
    width: calc(33.333% - 8px);
    min-height: 0;
  }

  .area:nth-child(even) { justify-content: flex-start; }
  .area:nth-child(even) .area__nome { order: 2; }
  .area:nth-child(even) .area__icone { order: 1; }

  .quem-somos .titulo,
  .quem-somos__texto p { padding-left: 24px; }
}

/* ---------- Nossos Projetos (fundo coral) ---------- */
.projetos {
  background: var(--coral);
  /* A foto sobe e invade a seção de cima: libera o eixo vertical, mas continua cortando
     na horizontal (clip, diferente de hidden, não cria rolagem no outro eixo) */
  overflow: visible;
  overflow-x: clip;
}

.projetos__cabecalho {
  display: grid;
  grid-template-columns: 1fr;
}

/* Seta curva branca acima do título, alinhada à esquerda (em todas as larguras) */
.projetos__seta {
  justify-self: start;
  width: clamp(110px, 14vw, 170px);
  margin-bottom: 8px;
}

.projetos .titulo { text-align: right; }

.projetos__intro {
  grid-column: 1 / -1;
  justify-self: end;
  max-width: 36em;
  font-size: 1.24rem;
}

/* Desktop: foto à esquerda e cabeçalho à direita (o inverso de Quem Somos);
   a lista ocupa a linha de baixo inteira, em 3 colunas */
.projetos__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

.projetos__lista {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Com 3 colunas, o último item (sozinho na linha) vai para a coluna do meio */
.projetos__lista > .projeto:last-child:nth-child(3n+1) { grid-column: 2; }

/* Check branco desenhado à mão, extraído do folder */
.projeto {
  padding-left: 34px;
  background: url("../img/check.webp") no-repeat 0 2px / 22px auto;
}

.projeto h3 {
  color: var(--texto-projeto);
  font-weight: 700;
  font-size: 1.15rem;
}

.projeto p {
  margin: 4px 0 0;
  font-size: 1.1rem;
  line-height: 1.4;
}

/* Hexágono completo (a metade de baixo foi espelhada do caminho do PDF, que cortava a foto).
   Sobe 60px além do topo da seção, invadindo Quem Somos: -96px do padding-top de .secao - 60px.
   Se mudar esse valor, ajustar o padding-bottom de .quem-somos */
.projetos__foto {
  align-self: start;
  width: min(100%, 460px);
  margin: -156px auto 0;
}

/* Posições dos parênteses medidas no PDF, em % do hexágono completo */
.projetos__parenteses--esq {
  left: -8.4%;
  top: 41.5%;
  width: 7.1%;
}

.projetos__parenteses--dir {
  right: -8.2%;
  top: 47.6%;
  width: 8.6%;
}

/* Até 860px (mesmo ponto de Quem Somos): uma coluna, com a foto primeiro */
@media (max-width: 860px) {
  .projetos__grade {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .projetos__foto { width: min(80%, 420px); }

  /* Seta à direita, girada, subindo sobre a foto */
  .projetos__seta {
    justify-self: end;
    margin: -15vw 5vw 5vw 0;
    rotate: 40deg;
  }

  .projetos__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Com 2 colunas, o último item (sozinho na linha) fica centralizado */
  .projetos__lista > .projeto:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - 40px) / 2);
  }
}

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

  .projetos__lista > .projeto:last-child:nth-child(odd) {
    grid-column: auto;
    justify-self: stretch;
    width: auto;
  }
}

/* ---------- Doação (página 1, metade esquerda) ---------- */
/* Desktop: título + diagrama à esquerda e bloco do Pix à direita.
   O diagrama precisa de ~555px de largura, por isso as colunas só aparecem acima de 1100px */
.doacao__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: 48px;
  align-items: center;
}

@media (max-width: 1100px) {
  .doacao__inner {
    grid-template-columns: 1fr;
    gap: 96px;
    justify-items: center;
  }

  .doacao__principal { width: 100%; }
  .pix { width: min(100%, 480px); }
}

.doacao__titulo {
  text-align: center;
  font-size: clamp(2rem, 5vw, 3.3rem);
}

/* Diagrama das mãos: os destinos ficam em volta da ilustração (posições medidas no PDF, em %) */
.diagrama {
  --maos: 300px;
  display: flex;
  justify-content: center;
  margin: 48px 0 0;
}

.diagrama__arte {
  position: relative;
  width: var(--maos);
  /* Espaço para os destinos que ficam abaixo da ilustração */
  margin-bottom: calc(var(--maos) * .32);
}

.diagrama__destinos {
  margin: 0;
  padding: 0;
  list-style: none;
}

.destino {
  position: absolute;
  transform: translateX(-50%);
  /* Proporcional à ilustração: no folder era 10pt para 183pt (.0545); aumentado em 10% a pedido */
  font-size: calc(var(--maos) * .06);
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
}

.destino--plantacao   { left: -24.7%; top: 69.9%;  width: 5.6em; }
.destino--capacitacao { left: -7.6%;  top: 98.2%;  width: 8em; }
.destino--viagens     { left: 50.2%;  top: 101.6%; width: 6.8em; }
.destino--social      { left: 107.7%; top: 91%;    width: 11.6em; }
.destino--sustento    { left: 111.7%; top: 64%;    width: 6.4em; }

/* No celular não há espaço para o diagrama: ilustração centralizada e destinos em lista */
@media (max-width: 640px) {
  .diagrama__arte {
    width: 100%;
    margin-bottom: 0;
  }

  .diagrama__arte > img {
    width: min(240px, 70%);
    margin: 0 auto 24px;
  }

  .destino {
    position: static;
    transform: none;
    width: auto;
    margin-bottom: 10px;
    padding-left: 22px;
    font-size: 1.155rem;
    text-align: left;
  }

  /* Pequeno hexágono roxo como marcador */
  .destino::before {
    content: "";
    float: left;
    width: 12px;
    height: 11px;
    margin: .4em 0 0 -22px;
    background: var(--roxo);
    clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  }
}

/* Bloco roxo do Pix */
.pix {
  position: relative;
  padding: 44px 36px 32px;
  border-radius: 24px;
  background: var(--roxo);
  color: var(--branco);
  /* Todo o conteúdo do bloco centralizado */
  text-align: center;
}

.pix :focus-visible { outline-color: var(--branco); }

/* Seta preta apontando para o bloco, como no folder */
/* Desktop: espelhada e na lateral esquerda do bloco, apontando do título da seção para dentro do Pix */
.pix__seta {
  position: absolute;
  top: 24px;
  left: -52px;
  width: 72px;
  transform: scaleX(-1);
  rotate: -60deg;
}

/* Quando o bloco cai para baixo do diagrama, a seta fica em cima dele, apontando para baixo */
@media (max-width: 1100px) {
  .pix__seta {
    top: -58px;
    left: 25%;
    transform: none;
    rotate: -20deg;
  }
}

.pix__titulo {
  font-size: clamp(1.6rem, 3.2vw, 2rem);
  letter-spacing: .02em;
  text-transform: uppercase;
}

.pix__titulo .titulo__fino { font-weight: 400; }
.pix__titulo .titulo__forte { font-weight: 700; }

.pix__qrcode {
  width: min(100%, 230px);
  margin: 24px auto 20px;
  padding: 12px;
  border-radius: 10px;
  background: var(--branco);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .3);
}

.pix__cnpj { margin: 0 0 20px; }
.pix__cnpj strong { font-weight: 500; }

.pix__acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.pix__aviso {
  min-height: 1.5em;
  margin: 12px 0 0;
  font-size: 1.045rem;
  font-weight: 400;
}

.pix__codigo {
  margin-top: 8px;
  font-size: .99rem;
}

.pix__codigo summary {
  cursor: pointer;
  text-decoration: underline;
}

.pix__codigo textarea {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  border: 0;
  border-radius: 8px;
  color: var(--texto);
  font: .85rem/1.4 Consolas, "Courier New", monospace;
  /* O código fica alinhado à esquerda, mesmo com o bloco centralizado */
  text-align: left;
  word-break: break-all;
  resize: vertical;
}

/* ---------- Fale conosco (seção própria, centralizada, fundo branco) ---------- */
.contato {
  padding-top: 0;
  text-align: center;
}

/* Onda preta no topo, separando da seção de doação (também branca) */
.contato__onda {
  width: min(220px, 70%);
  margin: 0 auto 48px;
}

.contato__titulo {
  font-size: clamp(1.6rem, 3.2vw, 2rem);
  letter-spacing: .02em;
}

.contato__titulo .titulo__fino { font-weight: 400; }
.contato__titulo .titulo__forte { font-weight: 700; }

.contato__lista {
  margin: 24px 0 40px;
  padding: 0;
  list-style: none;
}

.contato__lista li + li { margin-top: 10px; }

.contato__lista a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 400;
  font-size: 1.265rem;
  text-decoration: none;
}

.contato__lista a:hover,
.contato__lista a:focus-visible {
  color: var(--roxo);
  text-decoration: underline;
}

.contato__lista img {
  width: 24px;
  height: auto;
}

.contato__logo {
  width: min(240px, 80%);
  margin: 0 auto;
}

@media (max-width: 760px) {
  .pix { padding: 40px 24px 28px; }
}

/* ---------- Faixa com o crédito da hospedagem (rosa claro dos hexágonos da capa) ---------- */
.hospedagem {
  padding: 20px 16px;
  background: var(--rosado);
  font-family: var(--fonte-titulo);
  font-weight: 400;
  font-size: .85rem;
  line-height: 1.6;
  text-align: center;
}

.hospedagem a {
  display: inline-block;
  margin-top: 4px;
}

.hospedagem img {
  width: auto;
  height: 27px;
}