/* Layout: wrapper de 1200px com fios de 1px; cada seção troca a paleta monocromática da página inteira ao rolar (fundo + uma única cor de tinta). */
:root{
  /* paletas por seção — aplicadas em --bg/--ink via JS */
  --p-mineral-bg:#D8DDD5; --p-mineral-ink:#1E3A2A;
  --p-mata-bg:#0D2925;    --p-mata-ink:#9EE2C2;
  --p-liquen-bg:#E4EBDA;  --p-liquen-ink:#2F5A1F;
  --p-laterita-bg:#1C1D12;--p-laterita-ink:#E0B24B;
  --p-calcario-bg:#F3F4EF;--p-calcario-ink:#A4581C;

  --bg:var(--p-mineral-bg);
  --ink:var(--p-mineral-ink);

  --f-display:"Fraunces", "Iowan Old Style", Georgia, serif;
  --f-body:"Instrument Sans", "Helvetica Neue", Arial, sans-serif;

  --wrap:1200px;
  --gutter:clamp(16px,4vw,48px);
  --rule:1px solid color-mix(in srgb, var(--ink) 55%, transparent);
  --ease:cubic-bezier(.2,.7,.1,1);
  color-scheme:light;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:env(safe-area-inset-top,0px)}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:400 1.0625rem/1.65 var(--f-body);
  transition:background-color .8s var(--ease),color .8s var(--ease);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:inherit}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
::selection{background:var(--ink);color:var(--bg)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}

/* ---------- utilitários tipográficos ---------- */
.eyebrow{font:500 .625rem/1.6 var(--f-body);letter-spacing:.5em;text-transform:uppercase}
.label{font:700 .6875rem/1.4 var(--f-body);letter-spacing:.2em;text-transform:uppercase}
.display{font-family:var(--f-display);font-weight:900;font-variation-settings:"opsz" 144;line-height:.95;letter-spacing:-.01em;text-wrap:balance}

/* ---------- header ---------- */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg);transition:background-color .8s var(--ease)}
.top .bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding-block:22px;border-bottom:var(--rule)}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;justify-self:start}
.brand img{width:34px;height:34px;display:block;object-fit:contain}
.brand b{font:900 1.25rem/1 var(--f-display);font-variation-settings:"opsz" 144;letter-spacing:-.01em}
.brand img.marca{width:auto;height:36px;filter:drop-shadow(0 0 1px rgba(0,0,0,.18)) drop-shadow(0 1px 2px rgba(0,0,0,.14))}
.motto{font:500 .6875rem/1 var(--f-body);letter-spacing:.42em;text-transform:uppercase;white-space:nowrap}
.actions{justify-self:end;display:flex;align-items:center;gap:12px}
.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid currentColor;border-radius:999px;padding:.55em 1.1em;font:700 .6875rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;background:transparent;color:inherit;cursor:pointer;transition:background-color .25s,color .25s}
.pill:hover{background:var(--ink);color:var(--bg)}
.pill.solid{background:var(--ink);color:var(--bg)}
.pill.solid:hover{background:transparent;color:var(--ink)}
.pill.lg{font-size:.8125rem;padding:1.05em 1.7em}
.burger{width:44px;height:44px;border:0;padding:0;background:transparent;color:inherit;display:grid;place-items:center;cursor:pointer;transition:transform .25s var(--ease)}
.burger:hover{transform:rotate(90deg)}
.burger span{display:block;width:16px;height:1.5px;background:currentColor;box-shadow:0 -5px 0 currentColor,0 5px 0 currentColor}

/* ---------- menu (mega overlay) ---------- */
.menu{position:fixed;inset:0;z-index:40;background:var(--ink);color:var(--bg);display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);transform:translateY(-100%);transition:transform .6s var(--ease);overflow:auto}
.menu.open{transform:none}
.menu .bar{border-bottom-color:color-mix(in srgb,var(--bg) 55%,transparent)}
.menu nav{flex:1;display:grid;align-content:center;gap:4px;padding-block:40px}
.menu nav a{font:900 clamp(2.4rem,7vw,5.6rem)/1.05 var(--f-display);font-variation-settings:"opsz" 144;text-decoration:none;text-transform:uppercase;display:flex;align-items:baseline;gap:18px}
.menu nav a small{font:500 .625rem/1 var(--f-body);letter-spacing:.4em}
.menu nav a:hover{font-style:italic;font-weight:400}

/* ---------- hero ---------- */
.hero{position:relative;min-height:clamp(540px,74vh,760px);display:grid}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero .inner{position:relative;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:48px;align-items:end;padding-block:64px 56px}
.hero h1{font-size:clamp(2.8rem,7.4vw,6.3rem);margin:0 0 28px}
.hero h1 .w{display:inline-block;white-space:nowrap}
.hero h1 .c{display:inline-block;animation:rise .9s var(--ease) both;animation-delay:calc(var(--i)*28ms)}
.hero h1 em{font-style:italic;font-weight:300}
@keyframes rise{from{transform:translateY(.45em);opacity:0}to{transform:none;opacity:1}}
.hero .lede{max-width:34ch;margin:0 0 28px;font-size:1.125rem}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px}

.journal{align-self:end;background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(6px)}
.journal .head{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;border-bottom:var(--rule)}
.journal .head a{display:inline-flex;gap:8px;align-items:center;text-decoration:none}
.journal ol{list-style:none;margin:0;padding:0}
.journal li a{display:block;padding:16px 0 14px;border-bottom:var(--rule);text-decoration:none}
.journal li a:hover .t{text-decoration:underline;text-underline-offset:4px}
.journal .t{display:block;font-size:.9375rem;margin-top:6px}
.arrow{width:16px;height:10px;display:inline-block}

/* ---------- pôster (WebGL em wwwroot/js/poster.js; a <img> fica como fallback) ---------- */
.poster-band{padding-block:0 clamp(64px,9vw,120px)}
.poster{margin:0;aspect-ratio:3000/1688;border-radius:6px;overflow:hidden}
.poster img{display:block;width:100%;height:100%;object-fit:cover;transition:opacity .3s;-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none}
.has-poster-gl .poster img{opacity:0}
.poster-gl{position:fixed;top:0;left:0;z-index:10;pointer-events:none}

/* ---------- seções ---------- */
section{padding-block:clamp(88px,12vw,160px)}
.center{text-align:center}
.statement{font:400 clamp(1.6rem,3.3vw,2.6rem)/1.62 var(--f-display);font-variation-settings:"opsz" 72;max-width:26em;margin:28px auto 0;text-wrap:balance}
.statement b{font-weight:900;font-variation-settings:"opsz" 144}

.verbs{position:relative;height:clamp(260px,34vw,420px);margin-top:72px}
.verbs span{position:absolute;font:900 clamp(2.4rem,6.8vw,5.4rem)/1 var(--f-display);font-variation-settings:"opsz" 144;transition:transform .9s var(--ease)}
.verbs span:nth-child(1){left:22%;top:0}
.verbs span:nth-child(2){left:52%;top:36%}
.verbs span:nth-child(3){left:32%;top:72%}
.verbs.joined span:nth-child(1){transform:translate(-8%,40%)}
.verbs.joined span:nth-child(3){transform:translate(28%,-40%)}

/* passos (sequência real do cadastro) */
.steps{list-style:none;margin:56px 0 0;padding:0;border-top:var(--rule)}
.steps li{display:grid;grid-template-columns:120px minmax(0,1fr) minmax(0,1.1fr);gap:32px;align-items:baseline;padding-block:36px;border-bottom:var(--rule)}
.steps .n{font:900 clamp(3rem,6vw,4.6rem)/.8 var(--f-display);font-variation-settings:"opsz" 144}
.steps h3{margin:0;font:400 clamp(1.5rem,2.6vw,2.1rem)/1.15 var(--f-display);font-variation-settings:"opsz" 72}
.steps p{margin:0;max-width:44ch}

/* soluções */
.solution + .solution{margin-top:clamp(96px,12vw,150px)}
.solution .bigtitle{font-size:clamp(2.6rem,8.6vw,7.4rem);text-transform:uppercase;margin:18px 0 0}
.solution .intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;margin-top:40px;padding-top:28px;border-top:var(--rule)}
.solution .intro p{margin:0;max-width:52ch}
.solution .intro .q{font:400 1.5rem/1.3 var(--f-display);font-style:italic}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:48px;border-top:var(--rule)}
.grid4 div{padding:24px 24px 28px 0;border-right:var(--rule)}
.grid4 div + div{padding-left:24px}
.grid4 div:last-child{border-right:0}
.grid4 h4{margin:0 0 10px;font:600 1rem/1.3 var(--f-body)}
.grid4 p{margin:0;font-size:.9375rem;opacity:.86}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.tags span{border:1px solid currentColor;border-radius:999px;padding:.4em .95em;font:600 .75rem/1 var(--f-body);letter-spacing:.06em}

/* chamada final */
.final .bigtitle{font-size:clamp(2.8rem,9.6vw,8.2rem);text-transform:uppercase;margin:22px 0 0}
.final p{max-width:46ch;margin:28px auto 36px}
.final .cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.rule{border:0;border-top:var(--rule);margin:0}

/* rodapé */
footer{padding-block:0 48px}
footer .cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;padding-block:56px;text-align:center;border-bottom:var(--rule)}
footer h5{margin:0 0 14px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:.875rem}
footer a{text-decoration:none}
footer a:hover{text-decoration:underline;text-underline-offset:3px}
footer .legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:24px;font-size:.8125rem}

@media (max-width:900px){
  .motto{display:none}
  .top .bar{grid-template-columns:1fr auto}
  .hero .inner{grid-template-columns:1fr}
  .steps li{grid-template-columns:72px minmax(0,1fr)}
  .steps p{grid-column:2}
  .solution .intro{grid-template-columns:1fr;gap:20px}
  .grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid4 div{padding:22px 16px 24px 0}
  .grid4 div:nth-child(2n){border-right:0;padding-left:16px}
  .grid4 div:nth-child(3){padding-left:0}
  .grid4 div:nth-child(n+3){border-top:var(--rule)}
}
@media (max-width:560px){
  .actions .pill{display:none}
  .grid4{grid-template-columns:1fr}
  .grid4 div,.grid4 div + div,.grid4 div:nth-child(2n){border-right:0;padding-left:0;border-top:var(--rule)}
  .grid4 div:first-child{border-top:0}
  footer .cols{grid-template-columns:1fr}
  .verbs span:nth-child(1){left:4%}.verbs span:nth-child(2){left:38%}.verbs span:nth-child(3){left:12%}
  .poster{aspect-ratio:4/5}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ---------- páginas internas (Gestão ambiental, Projetos ambientais) ---------- */
.pagehead{padding-block:clamp(48px,7vw,88px) clamp(72px,10vw,128px)}
.back{display:inline-flex;align-items:center;gap:10px;text-decoration:none;margin-bottom:clamp(40px,6vw,72px)}
.back .arrow{transform:scaleX(-1)}
.back:hover{text-decoration:underline;text-underline-offset:4px}
.pagehead .bigtitle{font-size:clamp(2.8rem,9.6vw,8.2rem);text-transform:uppercase;margin:18px 0 0}
.pagehead .intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:end;margin-top:40px;padding-top:28px;border-top:var(--rule)}
.pagehead .intro .q{margin:0;font:400 1.5rem/1.3 var(--f-display);font-style:italic;max-width:30ch}
.pagehead .cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end}
.tags.center{justify-content:center;margin-top:48px}
.note{max-width:52ch;margin:40px auto 0}
@media (max-width:900px){
  .pagehead .intro{grid-template-columns:1fr;gap:28px}
  .pagehead .cta{justify-content:flex-start}
}