/* COOPERAFS — landing page, versão 3 (direção "verde lavoura", escolhida em 24/09/2026)
   Base branca, abertura e contato em verde-escuro de lavoura, números em marinho,
   uma cor chapada por seção e as ondas do Relatório de Gestão 2025 como assinatura.
   Títulos em Archivo condensada e caixa-alta, como o nome no logo; texto em Archivo;
   Caveat só nas três legendas escritas à mão. Ícones Phosphor (MIT). */

@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url(/files/archivo-latin-wdth-normal.woff2) format("woff2-variations"); }
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 600; font-display: swap; src: url(/files/caveat-latin-600-normal.woff2) format("woff2"); }

:root {
  --branco: #FFFFFF;
  --broto: #F1F6EA;          /* verde bem claro, para alternar seções claras */
  --marinho: #0C2454;
  --texto-2: #46526E;
  --amarelo: #F0C018;
  --ouro: #E4A818;
  --verde: #0F3A14;
  --verde-logo: #0A9C47;
  --limao: #95C126;
  --ceu: #B7E3FC;
  --vinho: #8A2146;
  --vinho-escuro: #5E1631;
  --rosa: #F2B8C2;
  --fio: rgba(12, 36, 84, .16);
  --fio-claro: rgba(255, 255, 255, .22);
  --fonte: "Archivo", "Segoe UI", system-ui, sans-serif;
  --mao: "Caveat", "Segoe Print", cursive;
  --largura: 1200px;
  --gutter: 24px;
  --secao: clamp(56px, 6.5vw, 92px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--branco); color: var(--marinho); font-family: var(--fonte); font-size: 16px; line-height: 1.6; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2 { font-family: var(--fonte); font-weight: 800; font-stretch: 68%; text-transform: uppercase; line-height: .93; letter-spacing: 0; }
h1 em, h2 em { font-style: normal; }
h3 { font-weight: 700; line-height: 1.2; }
:focus-visible { outline: 3px solid var(--ouro); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ao clicar no menu, a seção para logo abaixo do cabeçalho, sem o respiro de cima */
main > section[id]:not(#inicio) { scroll-margin-top: calc(20px - var(--secao)); }

.pular { position: absolute; left: -9999px; top: 10px; z-index: 300; background: var(--amarelo); padding: 10px 16px; font-weight: 700; }
.pular:focus { left: 10px; }
.caixa { width: 100%; max-width: calc(var(--largura) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.icone { width: 1.2em; height: 1.2em; flex: none; }
.rotulo { font-stretch: 85%; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

.btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 22px;
  border-radius: 6px; border: 0; background: var(--amarelo); color: var(--marinho);
  font: 700 15.5px/1 var(--fonte); text-decoration: none; cursor: pointer; transition: background-color .15s;
}
.btn:hover { background: var(--ouro); }
.btn-escuro { background: var(--marinho); color: var(--branco); }
.btn-escuro:hover { background: #16336F; }
.link-seta {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat; padding-bottom: 3px; transition: background-size .2s;
}
.link-seta:hover { background-size: 40% 2px; }
.link-seta .icone { transition: transform .2s; }
.link-seta:hover .icone { transform: translateX(3px); }

/* ---------- cabeçalho ---------- */
.topo { position: sticky; top: 0; z-index: 100; background: var(--branco); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; }
.topo.rolou { border-bottom-color: var(--fio); box-shadow: 0 6px 20px -14px rgba(12, 36, 84, .45); }
.topo .caixa { display: flex; align-items: center; gap: 28px; min-height: 80px; }
.topo-logo img { height: 46px; width: auto; }
.menu { display: flex; gap: 26px; margin-left: auto; }
.menu a { font-size: 14.5px; font-weight: 500; text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.menu a:hover, .menu a.ativo { border-bottom-color: var(--limao); }
.topo-acoes { display: flex; align-items: center; gap: 18px; }
.entrar { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 600; text-decoration: none; }
.entrar .icone { width: 22px; height: 22px; }
.topo .btn { min-height: 44px; font-size: 14.5px; padding: 0 16px; }
.abre-menu { display: none; background: none; border: 1px solid var(--fio); border-radius: 6px; width: 46px; height: 46px; color: var(--marinho); cursor: pointer; align-items: center; justify-content: center; }
.abre-menu .icone { width: 26px; height: 26px; }

/* ---------- abertura (verde lavoura) ---------- */
.abertura { position: relative; background: var(--verde); color: var(--branco); padding-top: clamp(18px, 3.5vh, 64px); overflow: hidden; isolation: isolate; }
.abertura::before { content: ""; position: absolute; inset: 0 -10% 0 30%; z-index: -1; background: url(/files/curvas-claras-v2.svg) center / 1100px auto no-repeat; opacity: .13; }
.abertura-grade { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: center; }
/* no computador a abertura ocupa a primeira tela inteira; os números aparecem só ao rolar */
@media (min-width: 961px) {
  .abertura { display: flex; flex-direction: column; min-height: calc(100vh - 80px); min-height: calc(100svh - 80px); }
  .abertura-grade { flex: 1; align-content: center; padding-bottom: clamp(12px, 2.5vh, 32px); }
}
.abertura .rotulo { color: var(--limao); }
/* o tamanho acompanha também a altura da tela, para a abertura caber inteira na primeira vista */
/* título, texto e botões dividem a altura da tela: os espaços crescem com ela */
.abertura h1 { margin-top: clamp(12px, 2.4vh, 26px); font-size: clamp(38px, min(5.4vw, 8.4vh), 84px); max-width: 12.5em; font-stretch: 78%; letter-spacing: .015em; word-spacing: .06em; text-wrap: balance; line-height: .86; }
.abertura h1 em { color: var(--amarelo); }
.abertura .lead { margin-top: clamp(18px, 3.6vh, 40px); font-size: clamp(17px, 2.6vh, 20px); line-height: 1.55; max-width: 38em; color: rgba(255, 255, 255, .86); }
.abertura-acoes { margin-top: clamp(24px, 5vh, 52px); display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }

/* a colagem inteira escala por uma unidade só (--u), para as fotos manterem a mesma
   sobreposição em qualquer tela: limita pela altura da janela e pela largura da coluna */
.colagem { --u: min(1px, calc(100vh / 880), calc((100vw - 88px) / 1152)); position: relative; width: calc(480 * var(--u)); height: calc(560 * var(--u)); justify-self: end; }
.polaroid { position: absolute; margin: 0; background: var(--branco); padding: 10px 10px 40px; box-shadow: 0 1px 0 rgba(12, 36, 84, .12), 0 20px 34px -18px rgba(0, 0, 0, .55); }
.polaroid img { width: 100%; }
.polaroid figcaption { position: absolute; left: 14px; right: 14px; bottom: 7px; font: 600 20.5px/1 var(--mao); color: var(--marinho); }
.colagem .p1 { width: calc(290 * var(--u)); top: 0; right: calc(30 * var(--u)); transform: rotate(3deg); }
.colagem .p1 { padding-bottom: 10px; }
.colagem .p2 { width: calc(250 * var(--u)); top: calc(196 * var(--u)); left: 0; transform: rotate(-4deg); z-index: 2; }
.colagem .p3 { width: calc(200 * var(--u)); top: calc(232 * var(--u)); right: 0; transform: rotate(2deg); z-index: 3; }
.selo { position: absolute; width: calc(132 * var(--u)); height: calc(132 * var(--u)); left: 42%; top: calc(112 * var(--u)); z-index: 4; transform: rotate(-12deg); }
.selo text { font: 700 12px var(--fonte); letter-spacing: .12em; fill: var(--marinho); }

.horizonte { display: block; width: 100%; height: clamp(60px, min(9vw, 12vh), 140px); margin: -24px 0 -1px; position: relative; z-index: 5; }
/* as faixas da marca se desenham uma vez, da esquerda para a direita */
.horizonte .faixa { animation: desenha 1.5s cubic-bezier(.3, .6, .2, 1) both; }
.horizonte .faixa:nth-of-type(2) { animation-delay: .12s; }
.horizonte .faixa:nth-of-type(3) { animation-delay: .24s; }
.horizonte .faixa:nth-of-type(4) { animation-delay: .36s; }
@keyframes desenha { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------- números (marinho) ---------- */
.numeros { background: var(--marinho); color: var(--branco); padding: 24px 0 20px; }
.numeros ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.numeros li { padding: 8px 28px 0; border-left: 1px solid rgba(149, 193, 38, .55); }
.numeros li:first-child { border-left: 0; padding-left: 0; }
.numeros strong { display: block; font: 800 clamp(52px, min(6.5vw, 11vh), 102px)/.9 var(--fonte); font-stretch: 70%; color: var(--limao); font-variant-numeric: tabular-nums; }
.numeros .o-que { display: block; margin-top: 14px; font-size: 17px; font-weight: 600; }
.numeros .de-onde { display: block; margin-top: 4px; font-size: 13.5px; color: rgba(255, 255, 255, .7); line-height: 1.45; }
.numeros .fonte { margin-top: 24px; font-size: 12px; color: rgba(255, 255, 255, .58); }
.onda-divisa { display: block; width: 100%; height: 56px; margin-top: -1px; }

/* ---------- história ---------- */
.historia { padding: var(--secao) 0; }
.historia-topo { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 40px 72px; align-items: start; }
.historia h2 { font-size: clamp(35px, 3.61vw, 53px); }
.historia h2 em { color: var(--verde-logo); }
.historia-topo p { font-size: 16px; color: var(--texto-2); }
.historia-topo p + p { margin-top: 14px; }
.proposito { margin-top: clamp(44px, 5.5vw, 76px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.proposito > div { border-top: 3px solid var(--verde); padding-top: 20px; }
.proposito h3 { font-size: 26px; font-weight: 800; font-stretch: 70%; text-transform: uppercase; }
.proposito p { margin-top: 12px; color: var(--texto-2); font-size: 15.5px; }
.proposito ul { margin-top: 6px; }
.proposito li { padding: 8px 0; border-bottom: 1px solid var(--fio); color: var(--texto-2); font-size: 15.5px; }

/* ---------- destinos ---------- */
.destinos { padding: var(--secao) 0; background: var(--broto); }
.destinos-grade { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 72px; }
.destinos h2 { font-size: clamp(33px, 3.26vw, 48px); position: sticky; top: 130px; align-self: start; }
.destinos h2 em { color: var(--verde-logo); }
.destinos ol li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 6px 28px; align-items: center; padding: 28px 0; border-bottom: 1px solid var(--fio); }
.destinos ol li:first-child { border-top: 3px solid var(--verde); }
.destinos .picto { width: 56px; height: 56px; color: var(--verde); grid-row: span 2; align-self: start; }
.destinos h3 { font-size: 23px; font-weight: 800; font-stretch: 75%; text-transform: uppercase; letter-spacing: .01em; }
.destinos p { grid-column: 2; color: var(--texto-2); max-width: 34em; }
.destinos .link-seta { grid-column: 3; grid-row: 1; font-size: 14.5px; }

/* ---------- produtos ---------- */
.produtos { padding: var(--secao) 0; }
.produtos-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.produtos h2 { font-size: clamp(42px, 5.28vw, 81px); max-width: 12ch; }
.produtos h2 em { color: var(--verde-logo); }
.produtos-topo p { max-width: 24em; color: var(--texto-2); }
.redondas { margin-top: 44px; display: flex; }
.redondas img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; border: 5px solid var(--branco); margin-left: -18px; }
.redondas img:first-child { margin-left: 0; }
.quadro { margin-top: 40px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 3px solid var(--verde); }
.quadro section { padding: 22px 24px 8px 0; }
.quadro section + section { padding-left: 24px; border-left: 1px solid var(--fio); }
.quadro h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; color: var(--verde); }
.quadro h3 span:last-child { font: 800 26px/1 var(--fonte); font-stretch: 70%; color: var(--verde-logo); }
.quadro li { font-size: 17px; font-weight: 500; padding: 7px 0; border-bottom: 1px dotted rgba(12, 36, 84, .3); }
.produtos .nota { margin-top: 26px; font-size: 13.5px; color: var(--texto-2); }

/* ---------- kit nosso lar (amarelo) ---------- */
.kit { background: var(--amarelo); padding: var(--secao) 0; }
.kit-grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); gap: 48px; align-items: start; }
.kit h2 { margin-top: 14px; font-size: clamp(35px, 3.43vw, 49px); }
.kit h2 em { color: var(--verde); }
.kit .lead { margin-top: 20px; font-size: 17px; max-width: 26em; }
.etiqueta {
  margin-top: 30px; display: inline-flex; align-items: center; gap: 18px; padding: 22px 28px; background: var(--verde); color: var(--branco);
  -webkit-mask: radial-gradient(circle 7px at 50% 0, #0000 97%, #000) 0 0 / 18px 51% repeat-x, radial-gradient(circle 7px at 50% 100%, #0000 97%, #000) 0 100% / 18px 51% repeat-x;
  mask: radial-gradient(circle 7px at 50% 0, #0000 97%, #000) 0 0 / 18px 51% repeat-x, radial-gradient(circle 7px at 50% 100%, #0000 97%, #000) 0 100% / 18px 51% repeat-x;
}
.etiqueta strong { font: 800 67px/.85 var(--fonte); font-stretch: 68%; color: var(--amarelo); }
.etiqueta strong small { font-size: 26px; vertical-align: top; margin-right: 2px; }
.etiqueta span { font-size: 14.5px; font-weight: 600; line-height: 1.35; max-width: 13em; }
.kit-acoes { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; }
.kit .nota { margin-top: 18px; font-size: 13.5px; }
.arco { margin: 0; }
.arco img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 999px 999px 0 0; }
.arco figcaption { margin-top: 10px; font-size: 12.5px; }
.passos li { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 2px 12px; padding: 20px 0; border-top: 1px solid rgba(12, 36, 84, .35); }
.passos li:last-child { border-bottom: 1px solid rgba(12, 36, 84, .35); }
.passos .n { font: 800 35px/1 var(--fonte); font-stretch: 68%; color: var(--verde); grid-row: span 2; }
.passos h3 { font-size: 20px; font-weight: 800; font-stretch: 75%; text-transform: uppercase; }
.passos p { font-size: 14.5px; }

/* ---------- empório (céu do logo) ---------- */
.emporio { background: var(--ceu); padding: var(--secao) 0; overflow: hidden; }
.emporio-grade { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center; }
.emporio h2 { margin-top: 14px; font-size: clamp(39px, 4.4vw, 67px); max-width: 12ch; }
.emporio h2 em { color: var(--verde); }
.horarios { margin-top: 34px; border-top: 3px solid var(--marinho); }
.horarios div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid rgba(12, 36, 84, .35); }
.horarios dt, .horarios dd { font: 800 clamp(26px, 3.17vw, 46px)/1 var(--fonte); font-stretch: 68%; text-transform: uppercase; }
.horarios dd { color: var(--verde); }
.endereco { margin-top: 24px; display: flex; gap: 12px; align-items: flex-start; font-size: 17px; font-weight: 600; }
.endereco .icone { width: 26px; height: 26px; margin-top: 2px; color: var(--verde); }
.emporio-acoes { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; }
.sede { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(12, 36, 84, .35); font-size: 14.5px; }
.sede strong { font-weight: 700; }
.emporio-fotos { position: relative; height: 520px; }
.emporio-fotos .polaroid.p1 { width: 250px; top: 0; right: 10px; transform: rotate(3deg); z-index: 2; }
.emporio-fotos .fachada { position: absolute; left: 0; bottom: 10px; width: 340px; margin: 0; }
.fachada .troca { position: relative; }
.fachada img { width: 100%; }
.fachada .cor { position: absolute; inset: 0; opacity: 0; transition: opacity .4s; }
.fachada:hover .cor { opacity: 1; }
/* mesma moldura branca da foto de cima */
.emporio-fotos .fachada { background: var(--branco); padding: 10px 10px 40px; transform: rotate(-2deg); box-shadow: 0 1px 0 rgba(12, 36, 84, .12), 0 20px 34px -18px rgba(0, 0, 0, .55); }

/* ---------- mulheres no campo (identidade da AMAF) ---------- */
.mulheres { background: var(--rosa); color: var(--vinho-escuro); padding: var(--secao) 0; }
.mulheres-grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; align-items: center; }
.mulheres-foto { position: relative; }
.mulheres-foto .arco img { aspect-ratio: 4 / 4.6; }
.mulheres-foto .redonda { position: absolute; right: -36px; bottom: -28px; width: 170px; height: 170px; border-radius: 50%; object-fit: cover; border: 6px solid var(--rosa); }
.mulheres .rotulo { color: var(--vinho); }
.mulheres h2 { margin-top: 14px; font-size: clamp(39px, 4.4vw, 63px); color: var(--vinho); }
.mulheres h2 em { color: var(--vinho-escuro); }
.mulheres p { margin-top: 20px; font-size: 16px; max-width: 34em; }
.mulheres-dados { margin-top: 28px; display: flex; gap: 44px; flex-wrap: wrap; }
.mulheres-dados strong { display: block; font: 800 60px/.9 var(--fonte); font-stretch: 68%; color: var(--vinho); }
.mulheres-dados span { display: block; margin-top: 6px; font-size: 13.5px; font-weight: 600; max-width: 12em; }
.mulheres .link-seta { margin-top: 30px; color: var(--vinho); }
.logo-amaf { position: absolute; left: -6px; top: -34px; width: 118px; height: auto; z-index: 2; transform: rotate(-10deg); filter: drop-shadow(0 10px 16px rgba(94, 22, 49, .28)); }

/* ---------- parceiros ---------- */
.parceiros { padding: var(--secao) 0 calc(var(--secao) * .7); }
.parceiros-topo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: end; }
.parceiros h2 { font-size: clamp(37px, 4.22vw, 63px); }
.parceiros h2 em { color: var(--verde-logo); }
.parceiros-topo p { color: var(--texto-2); }
.parceiros ul { margin-top: 44px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; border-top: 3px solid var(--verde); }
.parceiros li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--fio); align-items: baseline; }
.parceiros li strong { font-size: 16px; font-weight: 700; }
.parceiros li span { font-size: 14px; color: var(--texto-2); line-height: 1.45; }

/* ---------- imprensa ---------- */
.imprensa { position: relative; background: var(--broto); padding: var(--secao) 0; isolation: isolate; overflow: hidden; }
.imprensa::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url(/files/curvas-v2.svg) center / 1200px auto repeat; opacity: .06; }
.imprensa h2 { font-size: clamp(37px, 4.22vw, 63px); max-width: 16ch; }
.imprensa h2 em { color: var(--verde-logo); }
.destaque { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; padding: 34px 0; border-top: 3px solid var(--verde); border-bottom: 1px solid var(--fio); text-decoration: none; }
.destaque .veiculo, .materias .veiculo { display: flex; gap: 14px; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-stretch: 85%; color: var(--verde); }
.destaque .veiculo time, .materias time { color: var(--texto-2); letter-spacing: 0; text-transform: none; font-weight: 500; }
.destaque h3 { margin-top: 12px; font-size: clamp(28px, 3.17vw, 46px); font-weight: 800; font-stretch: 70%; text-transform: uppercase; line-height: .98; max-width: 20ch; }
.destaque .link-seta { font-size: 15.5px; }
.materias li a { display: grid; grid-template-columns: 230px minmax(0, 1fr) 28px; gap: 8px 32px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--fio); text-decoration: none; }
.materias .veiculo { flex-direction: column; gap: 2px; }
.materias h3 { font-size: 18px; font-weight: 600; line-height: 1.35; }
.materias .icone { width: 24px; height: 24px; transition: transform .2s; }
.materias li a:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.materias li a:hover .icone { transform: translate(2px, -2px); }

/* ---------- governança (marinho) ---------- */
.governanca { background: var(--marinho); color: var(--branco); padding: var(--secao) 0; position: relative; overflow: hidden; isolation: isolate; }
.governanca::before { content: ""; position: absolute; right: -200px; top: -120px; width: 900px; height: 600px; z-index: -1; background: url(/files/curvas-claras-v2.svg) center / cover no-repeat; opacity: .16; }
.governanca-grade { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; }
.governanca h2 { font-size: clamp(35px, 3.61vw, 53px); }
.governanca h2 em { color: var(--limao); }
.governanca .lead { margin-top: 22px; font-size: 16px; color: rgba(255, 255, 255, .8); max-width: 32em; }
.orgaos { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.orgaos div { border-top: 3px solid var(--limao); padding-top: 16px; }
.orgaos h3 { font-size: 20px; font-weight: 800; font-stretch: 75%; text-transform: uppercase; }
.orgaos p { margin-top: 8px; font-size: 14px; color: rgba(255, 255, 255, .78); }
.diretoria .rotulo { color: var(--limao); }
.diretoria ul { margin-top: 18px; border-top: 1px solid var(--fio-claro); }
.diretoria li { padding: 16px 0; border-bottom: 1px solid var(--fio-claro); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.diretoria li strong { font-size: 18px; font-weight: 600; }
.diretoria li span { color: var(--amarelo); font-weight: 600; }
.documento { margin-top: 34px; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 4px 18px; padding: 22px 0; border-top: 1px solid var(--fio-claro); border-bottom: 1px solid var(--fio-claro); }
.documento .icone { width: 44px; height: 44px; color: var(--amarelo); grid-row: span 3; }
.documento h3 { font-size: 20px; font-weight: 800; font-stretch: 75%; text-transform: uppercase; }
.documento p { font-size: 14px; color: rgba(255, 255, 255, .78); }
.documento .link-seta { margin-top: 8px; color: var(--amarelo); justify-self: start; }

/* ---------- contato (verde lavoura) ---------- */
.contato { background: var(--verde); color: var(--branco); padding: var(--secao) 0 calc(var(--secao) * .8); position: relative; overflow: hidden; isolation: isolate; }
.contato::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url(/files/curvas-claras-v2.svg) center / 1300px auto no-repeat; opacity: .1; }
.contato h2 { font-size: clamp(46px, 6.16vw, 95px); }
.contato h2 em { color: var(--amarelo); }
.contato .lead { margin-top: 16px; font-size: 17px; color: rgba(255, 255, 255, .86); }
.assuntos { margin-top: 44px; border-top: 1px solid var(--fio-claro); }
.assuntos a { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) 48px; gap: 8px 40px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--fio-claro); text-decoration: none; transition: padding .2s; }
.assuntos a:hover { padding-left: 12px; }
.assuntos h3 { font-size: clamp(25px, 2.64vw, 37px); font-weight: 800; font-stretch: 70%; text-transform: uppercase; line-height: 1; }
.assuntos p { font-size: 15.5px; color: rgba(255, 255, 255, .84); }
.assuntos .icone { width: 38px; height: 38px; color: var(--amarelo); justify-self: end; }
.canais { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 14px 40px; }
.canais a { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; text-decoration: none; }
.canais a:hover { color: var(--amarelo); }
.canais .icone { width: 26px; height: 26px; color: var(--amarelo); }

/* ---------- rodapé ---------- */
.rodape { background: var(--marinho); color: rgba(255, 255, 255, .82); position: relative; overflow: hidden; }
.rodape-ondas { display: block; width: 100%; height: 70px; background: var(--verde); }
.rodape-grade { padding-top: 56px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 3fr); gap: 40px; font-size: 14.5px; }
.rodape img { height: 54px; width: auto; }
.rodape p { margin-top: 18px; line-height: 1.6; }
.rodape .rotulo { color: var(--limao); margin-bottom: 14px; }
.rodape li + li { margin-top: 8px; }
.rodape a { text-decoration: none; }
.rodape a:hover { color: var(--amarelo); }
.marca-gigante { margin-top: 44px; font: 800 clamp(63px, 16.72vw, 255px)/.78 var(--fonte); font-stretch: 66%; color: rgba(255, 255, 255, .07); white-space: nowrap; text-align: center; transform: translateY(10%); user-select: none; }
.rodape-base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.5px; padding: 22px 0; border-top: 1px solid var(--fio-claro); position: relative; z-index: 1; }

/* ---------- páginas simples (área do cooperado e 404) ---------- */
.pagina-simples { min-height: 100vh; display: flex; flex-direction: column; }
.pagina-simples main { flex: 1; display: grid; place-items: center; padding: 56px var(--gutter); }
.pagina-simples .conteudo { max-width: 620px; }
.pagina-simples img.logo { height: 54px; width: auto; }
.pagina-simples h1 { margin-top: 34px; font-size: clamp(40px, 6.16vw, 67px); }
.pagina-simples h1 em { color: var(--verde-logo); }
.pagina-simples p { margin-top: 18px; font-size: 17px; color: var(--texto-2); }
.pagina-simples ul { margin-top: 20px; border-top: 3px solid var(--verde); }
.pagina-simples li { padding: 12px 0; border-bottom: 1px solid var(--fio); font-size: 15.5px; }
.pagina-simples .acoes { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; }
.pagina-simples svg.faixas { display: block; width: 100%; height: 64px; }

/* ---------- responsivo ---------- */
@media (max-width: 1120px) {
  .menu { gap: 18px; }
  .menu a { font-size: 13.5px; }
  .entrar span { display: none; }
  .kit-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .kit-grade > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
  .menu { display: none; position: fixed; inset: 80px 0 auto 0; flex-direction: column; gap: 0; background: var(--branco); padding: 8px var(--gutter) 24px; border-bottom: 1px solid var(--fio); margin: 0; }
  .menu.aberto { display: flex; }
  .menu a { font-size: 21.5px; font-weight: 800; font-stretch: 70%; text-transform: uppercase; padding: 14px 0; border-bottom: 1px solid var(--fio); }
  .topo-acoes { margin-left: auto; }
  .topo .btn { display: none; }
  .abre-menu { display: inline-flex; }
  .abertura-grade, .historia-topo, .destinos-grade, .emporio-grade, .mulheres-grade, .parceiros-topo, .governanca-grade { grid-template-columns: minmax(0, 1fr); }
  .abertura::before { inset: 40% -40% 0 -20%; }
  .colagem { --u: min(1px, calc((100vw - 40px) / 480)); justify-self: center; margin: 8px auto 0; }
  .numeros ul { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; }
  .numeros li:nth-child(3) { border-left: 0; padding-left: 0; }
  /* linha do tempo vira faixa que desliza para o lado */
  .destinos h2 { position: static; }
  .quadro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quadro section:nth-child(3) { padding-left: 0; border-left: 0; }
  .emporio-fotos { height: 440px; max-width: 520px; width: 100%; margin: 0 auto; }
  .mulheres-foto { max-width: 480px; margin: 0 auto 30px; width: 100%; }
  .materias li a { grid-template-columns: minmax(0, 1fr) 28px; }
  .materias .veiculo { grid-column: 1 / -1; flex-direction: row; }
  .assuntos a { grid-template-columns: minmax(0, 1fr) 40px; }
  .assuntos p { grid-column: 1; }
  .assuntos .icone { grid-row: 1; grid-column: 2; }
  .rodape-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rodape-grade > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  :root { --gutter: 18px; --secao: 64px; }
  body { font-size: 15.5px; }
  .topo .caixa { min-height: 68px; gap: 14px; }
  .topo-logo img { height: 38px; }
  .menu { inset: 68px 0 auto 0; }
  html { scroll-padding-top: 76px; }
  .abertura h1 { font-size: 44px; }
  .abertura .lead { font-size: 16px; }
  .abertura-acoes .btn { width: 100%; justify-content: center; }
  .polaroid { padding: 8px 8px 30px; }
  .polaroid figcaption { font-size: 17px; bottom: 5px; }
  .numeros strong { font-size: 53px; }
  .numeros li { padding: 0 0 0 16px; }
  .numeros li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .numeros .o-que { font-size: 14.5px; }
  .numeros .de-onde { font-size: 12px; }
  .historia h2, .destinos h2, .parceiros h2, .imprensa h2, .governanca h2 { font-size: 37px; }
  .proposito { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .proposito h3 { font-size: 23px; }
  .destinos ol li { grid-template-columns: 44px minmax(0, 1fr); gap: 4px 14px; padding: 22px 0; }
  .destinos .picto { width: 40px; height: 40px; }
  .destinos h3 { font-size: 20px; }
  .destinos .link-seta { grid-column: 2; grid-row: auto; justify-self: start; margin-top: 6px; }
  .produtos h2 { font-size: 44px; }
  .redondas { margin-top: 30px; }
  .redondas img { width: 74px; height: 74px; margin-left: -12px; border-width: 3px; }
  .redondas img:nth-child(n+6) { display: none; }
  .quadro section { padding: 18px 12px 4px 0; }
  .quadro section + section { padding-left: 12px; }
  .quadro section:nth-child(3) { padding-left: 0; }
  .quadro h3 .rotulo { font-size: 12px; letter-spacing: .06em; }
  .quadro h3 span:last-child { font-size: 21.5px; }
  .quadro li { font-size: 14.5px; padding: 5px 0; }
  .kit-grade { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .kit h2 { font-size: 40px; }
  .arco { max-width: 260px; }
  .etiqueta { padding: 18px 22px; }
  .etiqueta strong { font-size: 55px; }
  .kit-acoes .btn { width: 100%; justify-content: center; }
  .emporio h2 { font-size: 40px; }
  .emporio-fotos { height: 360px; }
  .emporio-fotos .polaroid.p1 { width: 180px; }
  .emporio-fotos .fachada { width: 250px; }
  .horarios dt, .horarios dd { font-size: 26px; }
  .mulheres h2 { font-size: 39px; }
  .mulheres-foto .redonda { width: 116px; height: 116px; right: 0; bottom: -24px; }
  .logo-amaf { width: 92px; left: 8px; }
  .mulheres-dados strong { font-size: 49px; }
  .parceiros ul { grid-template-columns: minmax(0, 1fr); }
  .parceiros li { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 12px 0; }
  .orgaos { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .destaque { grid-template-columns: minmax(0, 1fr); }
  .materias li a { padding: 16px 0; }
  .materias h3 { font-size: 15.5px; }
  .contato h2 { font-size: 51px; }
  .canais a { font-size: 16px; }
  .rodape-grade { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- efeitos de rolagem ----------
   Só valem com JavaScript (classe .js, posta por inicio-v9.js no <head>). Usam as
   propriedades translate e scale, que somam com o rotate das fotos em vez de apagá-lo. */
.topo { position: sticky; }
.progresso { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--limao); transform-origin: 0 50%; transform: scaleX(var(--progresso, 0)); pointer-events: none; }
.js .revela, .js .revela-grupo > * {
  opacity: 0; translate: 0 32px;
  transition: opacity .7s ease var(--atraso, 0s), translate .9s cubic-bezier(.2, .7, .2, 1) var(--atraso, 0s), scale .9s cubic-bezier(.2, .7, .2, 1) var(--atraso, 0s);
}
.js .revela.revela-esq { translate: -56px 0; }
.js .revela.revela-dir { translate: 56px 0; }
.js .revela.revela-zoom, .js .revela-grupo.revela-zoom > * { translate: none; scale: .82; }
.js .revela-grupo.revela-fotos > * { translate: 0 70px; scale: .9; }
.js .revela.visivel, .js .revela-grupo.visivel > * { opacity: 1; translate: none; scale: none; }
@media (min-width: 961px) and (prefers-reduced-motion: no-preference) {
  /* profundidade na abertura: as curvas de fundo rolam mais devagar que o texto */
  .abertura::before { transform: translateY(calc(var(--rolagem, 0) * .3px)); }
}
@media (prefers-reduced-motion: reduce) {
  .js .revela, .js .revela-grupo > * { translate: none !important; scale: none !important; transition: opacity .6s ease var(--atraso, 0s); }
  .horizonte .faixa { animation-name: faixa-aparece; }
}
@keyframes faixa-aparece { from { opacity: 0; } to { opacity: 1; } }

/* ---------- história: fotos à esquerda, gráfico-linha do tempo à direita ---------- */
.jornada { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: center; }
.album { margin: 0; background: var(--branco); padding: 14px 14px 52px; transform: rotate(-1.5deg); box-shadow: 0 1px 0 rgba(12, 36, 84, .12), 0 24px 40px -24px rgba(12, 36, 84, .55); }
.album-fotos { position: relative; aspect-ratio: 4 / 3.3; overflow: hidden; background: var(--broto); }
.album-fotos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; }
.album-fotos img.atual { opacity: 1; }
.album-fotos img.topo { object-position: 50% 0; }
.album figcaption { position: absolute; left: 18px; right: 18px; bottom: 16px; font-size: 13.5px; color: var(--texto-2); }

.ltg-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 3px solid var(--verde); }
.ltg-topo .rotulo { color: var(--verde); }
.ltg-dica-uso { font-size: 12.5px; color: var(--texto-2); }
.js .ltg-grafico { height: 300px; }
.ltg-grafico { position: relative; outline: none; cursor: pointer; }
.ltg-grafico:focus-visible { outline: 3px solid var(--ouro); outline-offset: 4px; }
.ltg-grafico svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ltg-grafico .trilho { stroke: var(--verde); stroke-width: 3; stroke-linecap: round; }
.ltg-grafico .no { fill: var(--branco); stroke: var(--verde); stroke-width: 3; transition: fill .2s; }
.ltg-grafico .no.vazio { fill: var(--limao); }
.ltg-grafico .no.ativo { fill: var(--verde); }
.ltg-grafico .ano-x { font: 800 17px var(--fonte); font-stretch: 72%; fill: var(--texto-2); text-anchor: middle; transition: fill .2s; }
.ltg-grafico .ano-x.ativo { fill: var(--verde); }
.ltg-grafico .area { fill: var(--verde-logo); opacity: .1; }
.ltg-grafico .linha { fill: none; stroke: var(--verde-logo); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ltg-grafico .ponto { fill: var(--verde-logo); stroke: var(--branco); stroke-width: 2.5; paint-order: stroke; transition: r .2s; }
.ltg-grafico .ponto.ativo { r: 10; }
.ltg-grafico .valor { font: 800 22px var(--fonte); font-stretch: 70%; fill: var(--marinho); text-anchor: middle; }

/* entrada do gráfico: trilho, linha, pontos que saltam e números que sobem (o ritmo vem do JS) */
.ltg-grafico .ponto, .ltg-grafico .no { transform-box: fill-box; transform-origin: center; }
.js .ltg-grafico .no { opacity: 0; scale: .3; }
.js .ltg-grafico .no.surge { opacity: 1; scale: 1; transition: opacity .25s ease, scale .35s cubic-bezier(.34, 1.7, .64, 1), fill .2s; }
.js .ltg-grafico .ponto { opacity: 0; scale: 0; }
.js .ltg-grafico .ponto.surge { opacity: 1; scale: 1; transition: opacity .15s ease, scale .55s cubic-bezier(.34, 1.9, .64, 1), r .2s; }
.js .ltg-grafico .valor { opacity: 0; translate: 0 12px; }
.js .ltg-grafico .valor.surge { opacity: 1; translate: none; transition: opacity .35s ease .12s, translate .5s cubic-bezier(.2, .7, .2, 1) .12s; }

/* texto do ano selecionado, logo abaixo do gráfico */
.ltg-marcos { margin-top: 18px; }
.ltg-marcos li { padding: 18px 0 4px; border-top: 1px solid var(--fio); }
.ltg-marcos .ano { font: 800 44px/1 var(--fonte); font-stretch: 68%; color: var(--verde); }
.ltg-marcos h3 { margin-top: 8px; font-size: 19px; }
.ltg-marcos p { margin-top: 6px; color: var(--texto-2); max-width: 36em; }
.ltg-marcos .conta { display: inline-block; margin-top: 12px; font-weight: 800; font-stretch: 75%; font-size: 17px; letter-spacing: .02em; border-bottom: 3px solid var(--limao); }
.js .ltg-marcos li { display: none; }
.js .ltg-marcos li.ativo { display: block; animation: marco-entra .45s ease both; }
@keyframes marco-entra { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: none; } }

@media (max-width: 960px) {
  .jornada { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .album { max-width: 460px; width: 100%; margin: 0 auto; }
  .ltg-dica-uso { display: none; }
  .js .ltg-grafico { height: 260px; }
}