/* ══ Devoluto · livro de atas, edição editorial ══
   Site estático, sem build: este arquivo é o site.
   O verde-água deixa de ser detalhe: a margem é uma faixa de verde-escuro que corre a página,
   e a faixa de contato fecha o livro. A tipografia segue Poppins (o brief proíbe Didone de revista). */

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* papel frio e tinta quase preta; o verde-escuro compra regiões inteiras */
  --papel: #F8F9F7;
  --tinta: #14181A;
  --tinta-60: #4F5A57;       /* texto de apoio, acima de 5:1 no papel */
  --tinta-40: #6C7274;       /* 4.63:1 no papel: passa em texto pequeno */
  --verde: #2B957E;          /* carimbos e contornos */
  --verde-escuro: #1F6F5E;   /* margem e faixa de contato: a região verde */
  --regua: #D9DEDA;
  --sobre-verde: #F8F9F7;    /* texto sobre o verde-escuro: ~5,7:1 */

  --margem: 14vw;            /* largura da faixa verde da margem */
  --respiro: 4.5vw;          /* respiro à direita */

  --sans: 'Poppins', system-ui, sans-serif;
}

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

html {
  background: var(--papel);
  scroll-behavior: smooth;
  scroll-padding-top: 2rem;
  scrollbar-width: thin;
  scrollbar-color: var(--regua) var(--papel);
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure, dl, dd, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }

::selection { background: var(--verde-escuro); color: #fff; }
:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; }

a { color: var(--tinta); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { color: var(--verde-escuro); }

.pular {
  position: absolute; left: -9999px; top: 0;
  background: var(--tinta); color: var(--papel);
  padding: 0.75rem 1.25rem; z-index: 10; font-weight: 500;
}
.pular:focus { left: 0; }

/* ══ cabeçalho da ata ══ */
.cabecalho {
  position: relative;
  display: grid;
  grid-template-columns: var(--margem) minmax(0, 1fr);
  align-items: center;
  padding: 2.4vw var(--respiro) 2.2vw 0;
  border-bottom: 1px solid var(--tinta-60);
}
.cabecalho::after {          /* segunda régua, fina, como na comp */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -5px;
  height: 1px;
  background: var(--regua);
}
.carimbo {
  justify-self: center;
  z-index: 1;
}
.carimbo svg {
  display: block;
  width: auto; height: 9.6vw;
  fill: var(--verde);
  transform: rotate(-4deg);
  filter: url(#tinta);
}
.identidade { padding-left: 3.5vw; }
.nome-juridico {
  font-size: clamp(2rem, 3.7vw, 3.7rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.04;
  text-transform: uppercase;
  white-space: nowrap;
}
.registro {
  margin-top: 0.9vw;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--tinta-60);
}

/* ══ folha: faixa verde na margem, entradas à direita ══ */
.folha { position: relative; }
.folha::before {             /* a região verde corre a página inteira */
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: var(--margem);
  background: var(--verde-escuro);
}

.entrada {
  position: relative;
  display: grid;
  grid-template-columns: var(--margem) minmax(0, 1fr);
}
.margem { min-width: 0; }

/* títulos correntes: a faixa verde diz em que entrada o leitor está */
.corrente {
  position: sticky;
  top: 3vw;
  padding: 3.2vw 0 0 2.6vw;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--sobre-verde);
}

.entrada-corpo {
  min-width: 0;
  padding: 0 var(--respiro) 0 3.5vw;
}
.entrada + .entrada .entrada-corpo {
  padding-top: 6.5vw;
  padding-bottom: 6.5vw;
  border-top: 1px solid var(--regua);
}

.entrada-titulo {
  font-size: clamp(2.4rem, 4.4vw, 4.2rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.02;
  margin-bottom: 2.2rem;
}
.entrada-titulo .numero {
  display: inline-block;
  vertical-align: top;
  margin-right: 0.35em;
  font-size: 0.5em;
  font-weight: 600;
  color: var(--verde-escuro);
  font-variant-numeric: tabular-nums;
}

.lead {
  font-size: clamp(1.2rem, 1.6vw, 1.5rem);
  font-weight: 500;
  line-height: 1.45;
  max-width: 28em;
}
.texto { max-width: 40em; }
.texto p + p { margin-top: 1em; }

/* ══ primeira entrada: a primeira tela, em escala de capa ══ */
.abertura .entrada-corpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  column-gap: 3.5vw;
  align-items: start;
  padding-top: 6vw;
  padding-bottom: 5vw;
  padding-right: 0;
}
.abertura .entrada-titulo {
  grid-column: 1 / -1;
  margin-bottom: 2.6vw;
}
.abertura .texto {
  grid-column: 1;
  grid-row: 2;
}
.abertura .lead-forte {
  font-size: clamp(1.7rem, 2.6vw, 2.5rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  max-width: 14em;
}
.abertura .texto p + p {
  margin-top: 1.4rem;
  font-size: 1.125rem;
  color: var(--tinta-60);
}
.abertura .prova {
  grid-column: 2;
  grid-row: 2;
  margin-right: 0;   /* a foto sangra até a borda: a coluna não tem padding à direita */
}
.abertura .prova img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: center 45%;
}
.abertura .rodape-contato {
  grid-column: 1;
  grid-row: 3;
  margin-top: 3vw;
}

/* caixa carimbada */
.rodape-contato { margin: 0; }
.carimbo-contato {
  position: relative;
  display: inline-block;
  padding: 0.5em 1em;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--verde-escuro);
  text-decoration: none;
}
.carimbo-contato::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--verde);
  transform: rotate(-0.8deg);
  filter: url(#tinta);
  pointer-events: none;
}
.carimbo-contato:hover { color: var(--tinta); }

/* ══ entrada 2: quem somos e o que o estatuto prevê ══ */
.lista-estatuto { margin-top: 1.2rem; display: grid; gap: 0.75rem; }
.lista-estatuto li { position: relative; padding-left: 1.6em; }
.lista-estatuto li::before {
  content: "—";
  position: absolute; left: 0;
  color: var(--verde-escuro);
}

/* ══ ações: a vitrine. A primeira de cada grupo é o destaque ══ */
.texto + .grupo { margin-top: 4.5vw; }
.grupo + .grupo { margin-top: 5.5vw; }
.grupo-titulo {
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding-top: 1.2rem;
  margin-bottom: 2rem;
  border-top: 1px solid var(--regua);
}
.acoes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3.2rem 2.2rem;
}
.acao { min-width: 0; }
.acao--destaque { grid-column: span 2; }
.acao-foto img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
}
.acao--destaque .acao-foto img { aspect-ratio: 16 / 10; }
.acao-foto img.foto-topo { object-position: center 22%; }
.acao-titulo {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 1rem 0 0.5rem;
}
.acao--destaque .acao-titulo {
  font-size: clamp(1.4rem, 2vw, 1.75rem);
  letter-spacing: -0.01em;
}
.acao-texto {
  font-size: 1rem;
  color: var(--tinta-60);
  max-width: 42ch;
}
.acao--destaque .acao-texto {
  font-size: 1.125rem;
  max-width: 46ch;
}
/* grupo de três: destaque em largura total, as outras duas lado a lado (sem órfã) */
.grupo--tres .acoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grupo--tres .acao--destaque { grid-column: 1 / -1; }
.grupo--tres .acao--destaque .acao-foto img { aspect-ratio: 21 / 9; }

/* ══ entrada 4: missão, valores e princípios ══ */
.missao-frase {
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  max-width: 24em;
}
.blocos {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem 3.5vw;
  margin-top: 3.5rem;
}
.bloco-titulo {
  font-size: 1.0625rem;
  font-weight: 600;
  padding-top: 1rem;
  margin-bottom: 1rem;
  border-top: 1px solid var(--regua);
}
.bloco-fonte {
  margin-top: 1rem;
  font-size: 0.75rem;
  color: var(--tinta-40);
}
.principios {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.6rem 2rem;
}
.principios li { position: relative; padding-left: 1.6em; }
.principios li::before {
  content: "—";
  position: absolute; left: 0;
  color: var(--verde-escuro);
}

/* ══ entrada 5: a associação ══ */
.diretoria { margin-top: 1.6rem; border-bottom: 1px solid var(--regua); }
.cargo {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: 1rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--regua);
}
.cargo dt {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-40);
  padding-top: 0.25rem;
}
.cargo dd { font-weight: 500; }
.nota { margin-top: 1.4rem; font-size: 0.9375rem; color: var(--tinta-60); }

/* ══ entrada 6: contato, a região que fecha o livro ══ */
.entrada--contato .entrada-corpo {
  background: var(--verde-escuro);
  color: var(--sobre-verde);
  padding-top: 7vw;
  padding-bottom: 6vw;
}
.entrada--contato .entrada-titulo { color: var(--sobre-verde); }
.entrada--contato .entrada-titulo .numero { color: var(--sobre-verde); opacity: 0.8; }
.entrada--contato .texto p { color: var(--sobre-verde); }
.contato-grande { margin: 2.4vw 0 2.2vw; }
.contato-grande a {
  position: relative;
  display: inline-block;
  padding: 0.55em 0.95em;
  font-size: clamp(1.5rem, 2.8vw, 2.6rem);
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--sobre-verde);
  text-decoration: none;
}
.contato-grande a::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--sobre-verde);
  transform: rotate(-0.8deg);
  filter: url(#tinta);
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
.contato-grande a:hover { color: var(--papel); }
.contato-grande a:hover::before { transform: rotate(-2.4deg) scale(1.015); }
.canais {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2.2rem;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.entrada--contato .canais a { color: var(--sobre-verde); }
.entrada--contato .canais a:hover { color: var(--papel); opacity: 0.85; }

/* ══ rodapé e página 404 ══ */
.rodape-folha {
  padding: 2.4rem var(--respiro) 3rem calc(var(--margem) + 3.5vw);
  font-size: 0.8125rem;
  color: var(--tinta-40);
}
.rodape-folha p + p { margin-top: 0.3rem; }

.pagina-simples { max-width: 40rem; padding: 18vh 1.35rem; }
.pagina-simples h1 { font-size: 1.75rem; font-weight: 600; margin-bottom: 1rem; }

/* ══ tablet: a vitrine vira duas colunas ══ */
@media (min-width: 900px) and (max-width: 1099px) {
  .acoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acao--destaque { grid-column: span 2; }
}

/* ══ celular: a faixa verde vira régua no topo, o livro vira folhas soltas ══ */
@media (max-width: 899px) {
  .cabecalho {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    gap: 1.2rem;
    padding: 1.8rem 1.35rem 1.5rem;
  }
  .cabecalho::after { display: none; }
  .carimbo { justify-self: start; }
  .carimbo svg { height: 4.8rem; }
  .identidade { padding-left: 0; }
  .nome-juridico { font-size: clamp(1.5rem, 7vw, 2.1rem); white-space: normal; }
  .registro { font-size: 0.9375rem; }

  .folha::before { display: none; }
  .folha { border-top: 2px solid var(--verde-escuro); }
  .entrada { display: block; }
  .margem, .corrente { display: none; }
  .entrada-corpo { padding: 0 1.35rem; }
  .entrada + .entrada .entrada-corpo { padding-top: 3.6rem; padding-bottom: 3.8rem; }
  .entrada-titulo { font-size: 2.2rem; margin-bottom: 1.4rem; }

  .abertura .entrada-corpo { display: block; padding: 2.4rem 1.35rem 2rem; }
  .abertura .entrada-titulo { margin-bottom: 1.4rem; }
  .abertura .prova {
    margin: 0 -1.35rem 1.8rem;
  }
  .abertura .prova img { aspect-ratio: 4 / 3; }
  .abertura .lead-forte { font-size: 1.6rem; }
  .abertura .rodape-contato { margin-top: 2rem; }

  .acoes { grid-template-columns: 1fr; gap: 2.8rem; }
  .acao--destaque { grid-column: auto; }
  .grupo--tres .acoes { grid-template-columns: 1fr; }
  .grupo--tres .acao--destaque .acao-foto img { aspect-ratio: 3 / 2; }
  .blocos { grid-template-columns: 1fr; gap: 2.6rem; }
  .principios { grid-template-columns: 1fr; }
  .entrada--contato .entrada-corpo { padding-left: 1.35rem; padding-right: 1.35rem; }
  .rodape-folha { padding: 2rem 1.35rem 2.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 1ms !important; }
}