:root{
  --paper:#f7f4ec;
  --ink:#20242b;
  --ink-soft:#5c6570;
  --green:#287644;
  --green-soft:rgba(40,118,68,.12);
  --line:rgba(32,36,43,.12);
  --card:rgba(255,255,255,.62);
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#15181d;
    --ink:#f2efe6;
    --ink-soft:#98a1ab;
    --green:#45a473;
    --green-soft:rgba(69,164,115,.14);
    --line:rgba(242,239,230,.12);
    --card:rgba(255,255,255,.04);
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  background:var(--paper);
  color:var(--ink);
  font-family:ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------- wall ---------- */
.wall{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.wall span{
  position:absolute;
  top:50%;left:50%;
  width:min(1600px,190vw);
  aspect-ratio:16/9;
  transform:translate(-50%,-50%);
  background:var(--ink);
  opacity:.16;
  -webkit-mask:url(wall.svg) center/contain no-repeat;
  mask:url(wall.svg) center/contain no-repeat;
}
.wall::after{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(60% 45% at 50% 42%, transparent 0%, var(--paper) 78%),
    radial-gradient(38% 30% at 50% 38%, var(--green-soft), transparent 70%);
}
.grid{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 0);
  background-size:28px 28px;
  mask-image:radial-gradient(70% 60% at 50% 45%, #000 20%, transparent 75%);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 45%, #000 20%, transparent 75%);
  opacity:.9;
}

/* ---------- home ---------- */
.home{
  position:relative;z-index:1;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:clamp(56px,10vh,120px) 24px 48px;
  gap:26px;
}
.mark{
  width:clamp(76px,11vw,104px);
  height:auto;
  filter:drop-shadow(0 14px 28px rgba(35,43,46,.14));
  animation:rise .7s cubic-bezier(.2,.7,.2,1) both;
}
.home h1{
  margin:0;
  font-size:clamp(52px,12vw,104px);
  line-height:.92;
  letter-spacing:-.045em;
  font-weight:800;
  animation:rise .7s .06s cubic-bezier(.2,.7,.2,1) both;
}
.home h1 .dot{color:var(--green)}
.eyebrow{
  margin:0;
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--green);
  animation:rise .7s .12s cubic-bezier(.2,.7,.2,1) both;
}
.lead{
  margin:0;
  max-width:46ch;
  font-size:clamp(16px,2.2vw,19px);
  color:var(--ink-soft);
  text-wrap:balance;
  animation:rise .7s .18s cubic-bezier(.2,.7,.2,1) both;
}

/* ---------- balões ---------- */
.bubbles{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  max-width:760px;
  margin-top:6px;
  padding:0;
  list-style:none;
}
.bubbles li{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 16px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--card);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  font-size:14px;
  font-weight:600;
  white-space:nowrap;
  animation:pop .6s cubic-bezier(.2,.8,.2,1) both, float 7s ease-in-out infinite;
}
.bubbles li::before{
  content:"";
  width:7px;height:7px;border-radius:999px;
  background:var(--green);
  flex:none;
}
.bubbles li:nth-child(1){animation-delay:.24s,0s}
.bubbles li:nth-child(2){animation-delay:.29s,.5s}
.bubbles li:nth-child(3){animation-delay:.34s,1s}
.bubbles li:nth-child(4){animation-delay:.39s,1.5s}
.bubbles li:nth-child(5){animation-delay:.44s,2s}
.bubbles li:nth-child(6){animation-delay:.49s,2.5s}
.bubbles li:nth-child(7){animation-delay:.54s,3s}
.bubbles li:nth-child(8){animation-delay:.59s,3.5s}

.note{
  margin:8px 0 0;
  font-size:13px;
  color:var(--ink-soft);
  animation:rise .7s .6s cubic-bezier(.2,.7,.2,1) both;
}

/* ---------- rodapé ---------- */
footer{
  position:relative;z-index:1;
  border-top:1px solid var(--line);
  padding:26px 24px 34px;
  font-size:13px;
  color:var(--ink-soft);
  text-align:center;
}
.footer-inner{
  max-width:900px;margin:0 auto;
  display:flex;flex-direction:column;gap:6px;
}
footer a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--line)}
footer a:hover{color:var(--green);border-color:var(--green)}
.contact{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center}
.legal{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center}
.langs{display:flex;gap:14px;justify-content:center;margin-top:4px;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.registry{
  margin:22px auto 0;
  max-width:76ch;
  font-size:11px;
  line-height:1.7;
  opacity:.5;
}
.registry span{white-space:nowrap}
.langs a{border-bottom:none}
.langs a[aria-current="page"]{color:var(--green);font-weight:700}

/* ---------- documento ---------- */
.docbar{
  position:relative;z-index:1;
  border-bottom:1px solid var(--line);
  padding:20px 24px;
}
.docbar div{max-width:760px;margin:0 auto}
.docbar a{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--ink);text-decoration:none;font-weight:800;letter-spacing:-.03em;font-size:20px;
}
.docbar img{width:30px;height:30px}
.doc{
  position:relative;z-index:1;
  flex:1;width:100%;max-width:760px;margin:0 auto;
  padding:44px 24px 64px;
  line-height:1.65;
}
.doc h1{
  font-size:clamp(30px,6vw,42px);
  line-height:1.1;
  letter-spacing:-.03em;
  margin:0 0 8px;
}
.updated{margin:0 0 36px;color:var(--ink-soft);font-size:14px}
.doc h2{font-size:19px;margin:36px 0 10px;letter-spacing:-.01em}
.doc h2::before{
  content:"";
  display:inline-block;
  width:7px;height:7px;border-radius:999px;
  background:var(--green);
  margin-right:10px;
  vertical-align:middle;
}
.doc p{color:var(--ink-soft);font-size:15.5px;margin:0 0 12px}
.doc a{color:var(--green)}

@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}