/* ==========================================================================
   Cartório Perolândia — folha de estilo única
   Direção: preto-tinta + dourado da marca · Fraunces + IBM Plex
   ========================================================================== */

@font-face{font-family:'Fraunces';font-weight:600;font-style:normal;font-display:swap;
  src:url('fonts/fraunces-600.woff2') format('woff2')}
@font-face{font-family:'FrauncesIt';font-weight:300;font-style:italic;font-display:swap;
  src:url('fonts/fraunces-300i.woff2') format('woff2')}
@font-face{font-family:'PlexSans';font-weight:400;font-style:normal;font-display:swap;
  src:url('fonts/plexsans-400.woff2') format('woff2')}
@font-face{font-family:'PlexSans';font-weight:600;font-style:normal;font-display:swap;
  src:url('fonts/plexsans-600.woff2') format('woff2')}
@font-face{font-family:'PlexMono';font-weight:400;font-style:normal;font-display:swap;
  src:url('fonts/plexmono-400.woff2') format('woff2')}

:root{
  --ink:#0b0b0d; --ink-2:#141317; --ink-3:#1c1a20;
  --paper:#f5f2ea; --paper-2:#e9e4d8; --paper-3:#dcd5c4;
  --gold-hi:#e7c77a; --gold-mid:#c9a34e; --gold-lo:#8f7128;
  --seal:#4f8d78;

  --bg:var(--ink); --bg-2:var(--ink-2); --bg-3:var(--ink-3);
  --fg:var(--paper); --fg-dim:rgba(245,242,234,.62); --fg-faint:rgba(245,242,234,.38);
  --line:rgba(245,242,234,.13); --line-2:rgba(245,242,234,.22);
  --gold:var(--gold-hi);
  --card:rgba(245,242,234,.04); --card-h:rgba(245,242,234,.07);
  --shadow:0 18px 40px -14px rgba(0,0,0,.72);
  --logo-plate:transparent;
  --bar:#AD8837; --bar-hi:#E7C77A; --grid:rgba(245,242,234,.07);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:var(--paper); --bg-2:var(--paper-2); --bg-3:var(--paper-3);
    --fg:var(--ink); --fg-dim:rgba(11,11,13,.64); --fg-faint:rgba(11,11,13,.42);
    --line:rgba(11,11,13,.12); --line-2:rgba(11,11,13,.2);
    --gold:var(--gold-lo);
    --card:rgba(11,11,13,.03); --card-h:rgba(11,11,13,.06);
    --shadow:0 18px 38px -16px rgba(60,45,10,.3);
    --logo-plate:var(--ink);
    --bar:#96701A; --bar-hi:#6B4A00; --grid:rgba(11,11,13,.08);
  }
}
:root[data-theme="light"]{
  --bg:var(--paper); --bg-2:var(--paper-2); --bg-3:var(--paper-3);
  --fg:var(--ink); --fg-dim:rgba(11,11,13,.64); --fg-faint:rgba(11,11,13,.42);
  --line:rgba(11,11,13,.12); --line-2:rgba(11,11,13,.2);
  --gold:var(--gold-lo);
  --card:rgba(11,11,13,.03); --card-h:rgba(11,11,13,.06);
  --shadow:0 18px 38px -16px rgba(60,45,10,.3);
  --logo-plate:var(--ink);
  --bar:#96701A; --bar-hi:#6B4A00; --grid:rgba(11,11,13,.08);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--fg);
  font-family:'PlexSans',ui-sans-serif,system-ui,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
  transition:background .45s ease, color .45s ease;
}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:#17130a;
  padding:10px 18px;z-index:100;font-weight:600;border-radius:0 0 4px 0}
.skip:focus{left:0}

.wrap{max-width:1160px;margin:0 auto;padding:0 26px}
.mono{font-family:'PlexMono',ui-monospace,monospace}

.eyebrow{font-family:'PlexMono',monospace;font-size:11.5px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;gap:9px}
.eyebrow::before{content:'';width:20px;height:1px;background:currentColor}

h1{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(34px,4.6vw,58px);
  line-height:1.07;letter-spacing:-.014em;margin:18px 0 18px;text-wrap:balance;max-width:22ch}
h1 em,h2 em{font-family:'FrauncesIt',serif;font-style:italic;font-weight:300;color:var(--gold)}
h2{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(25px,3vw,35px);
  line-height:1.16;margin:12px 0 0;text-wrap:balance;letter-spacing:-.006em}
h3{font-family:'Fraunces',serif;font-weight:600;font-size:22px;line-height:1.22;margin:0 0 13px}
.lede{font-size:18px;line-height:1.62;color:var(--fg-dim);max-width:54ch;margin:0 0 30px}
.sec-sub{color:var(--fg-dim);font-size:15.5px;line-height:1.62;max-width:58ch;margin:13px 0 0}
p.body{font-size:15.5px;line-height:1.66;color:var(--fg-dim);max-width:64ch;margin:0 0 14px}
p.body b{color:var(--fg);font-weight:600}
.note{font-size:13.5px;color:var(--fg-faint);max-width:64ch;line-height:1.55;margin:14px 0 0}

/* ---------- cabeçalho ---------- */
header.site{position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.hd{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:13px 0}
/* Duas artes da marca: a original, feita para fundo escuro, e uma variante com
   a palavra CARTÓRIO em tinta para o tema claro. Ambas ficam no HTML e o CSS
   escolhe qual mostrar, então a troca de tema não depende de JavaScript. */
.logo-plate{display:inline-flex;align-items:center}
.logo-plate img{height:36px;width:auto}
.logo-claro{display:none}
:root[data-theme="light"] .logo-escuro{display:none}
:root[data-theme="light"] .logo-claro{display:block}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .logo-escuro{display:none}
  :root:not([data-theme="dark"]) .logo-claro{display:block}
}
.hd-nav{display:flex;align-items:center;gap:24px;font-size:14px}
.hd-nav a{color:var(--fg-dim);text-decoration:none;white-space:nowrap;padding:4px 0;position:relative;
  transition:color .2s ease}
.hd-nav a:hover{color:var(--fg)}
.hd-nav a[aria-current="page"]{color:var(--fg);font-weight:600}
.hd-nav a[aria-current="page"]::after{content:'';position:absolute;left:0;right:0;bottom:-1px;
  height:2px;background:var(--gold)}
.hd-right{display:flex;align-items:center;gap:12px}
.theme-btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-2);
  border-radius:100px;padding:7px 13px;font-family:'PlexMono',monospace;font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--fg-dim);
  transition:border-color .2s ease,color .2s ease,background .2s ease}
.theme-btn:hover{color:var(--fg);border-color:var(--gold);background:var(--card-h)}
.theme-btn svg{width:14px;height:14px}
.wa-btn{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  background:linear-gradient(135deg,var(--gold-hi),var(--gold-mid));color:#17130a;
  font-weight:600;font-size:14px;padding:11px 19px;border-radius:3px;white-space:nowrap;
  transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s ease}
.wa-btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px -8px rgba(201,163,78,.55)}
.wa-btn:active{transform:translateY(0) scale(.985)}
.wa-btn svg{width:16px;height:16px;flex:none}
.menu-btn{display:none;border:1px solid var(--line-2);border-radius:4px;padding:8px 11px}
.menu-btn svg{width:18px;height:18px;display:block}
@media(max-width:900px){
  .hd-nav{position:fixed;inset:57px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg-2);border-bottom:1px solid var(--line);padding:8px 26px 18px;
    transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}
  .hd-nav.open{opacity:1;transform:none;pointer-events:auto}
  .hd-nav a{padding:13px 0;border-bottom:1px solid var(--line);font-size:15.5px}
  .menu-btn{display:inline-flex}
  .wa-label{display:none}
}

/* ---------- migalha ---------- */
.crumb{font-family:'PlexMono',monospace;font-size:11px;letter-spacing:.05em;color:var(--fg-faint);
  padding:22px 0 0}
.crumb a{color:var(--fg-dim);text-decoration:none}
.crumb a:hover{color:var(--gold)}

/* ---------- seções ---------- */
.page{padding:14px 0 60px}
.sec{padding:34px 0;border-top:1px solid var(--line)}
.sec.first{border-top:none;padding-top:22px}
.band{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:64px 0 68px;margin:44px 0}

/* ---------- letreiro (situações em movimento) ---------- */
.ticker{position:relative;overflow:hidden;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);background:var(--bg-2);padding:15px 0;margin:8px 0 0}
/* esmaece as pontas para o texto não ser cortado a seco */
.ticker::before,.ticker::after{content:'';position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none}
.ticker::before{left:0;background:linear-gradient(90deg,var(--bg-2),transparent)}
.ticker::after{right:0;background:linear-gradient(270deg,var(--bg-2),transparent)}
.ticker-track{display:flex;gap:46px;width:max-content;white-space:nowrap;
  animation:ticker 62s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-track span{display:inline-flex;align-items:center;gap:12px;
  font-size:14.5px;color:var(--fg-dim)}
.ticker-track span::before{content:'';width:5px;height:5px;border-radius:50%;
  background:var(--gold);flex:none}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){
  .ticker-track{animation:none;flex-wrap:wrap;white-space:normal;width:auto;
    gap:14px 30px;padding:0 26px}
  .ticker::before,.ticker::after{display:none}
}

/* ---------- respostas rápidas ---------- */
.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:6px 0 0}
@media(max-width:780px){.quick{grid-template-columns:1fr}}
.qcard{border:1px solid var(--line);border-radius:5px;background:var(--card);padding:18px}
.qcard dt{font-family:'PlexMono',monospace;font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--fg-faint);margin-bottom:8px}
.qcard dd{margin:0;font-size:15px;line-height:1.5}

/* ---------- listas ---------- */
ul.clean{list-style:none;margin:0;padding:0;max-width:64ch}
ul.clean li{position:relative;padding-left:24px;margin-bottom:11px;font-size:15.5px;
  color:var(--fg-dim);line-height:1.6}
ul.clean li::before{content:'';position:absolute;left:5px;top:10px;width:6px;height:6px;
  border-radius:50%;background:var(--gold)}
ul.clean li b{color:var(--fg);font-weight:600}
ul.clean.neg li::before{background:var(--fg-faint)}

/* ---------- passos ---------- */
ol.steps{list-style:none;counter-reset:s;margin:0;padding:0;max-width:66ch}
ol.steps li{counter-increment:s;position:relative;padding-left:46px;margin-bottom:20px}
ol.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:1px;
  font-family:'PlexMono',monospace;font-size:12px;color:var(--gold);border:1px solid var(--line-2);
  border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center}
ol.steps b{display:block;font-size:16px;margin-bottom:3px}
ol.steps span{font-size:14.5px;color:var(--fg-dim);line-height:1.55}

/* ---------- cards de ato ---------- */
.acts{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
@media(max-width:900px){.acts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.acts{grid-template-columns:1fr}}
.act{display:block;text-decoration:none;border:1px solid var(--line);border-radius:5px;
  background:var(--card);padding:19px 19px 17px;position:relative;overflow:hidden;
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease,border-color .3s ease,background .3s ease}
.act::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--gold);
  transform:scaleY(0);transform-origin:top;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.act:hover{transform:translateY(-5px);border-color:var(--line-2);background:var(--card-h);box-shadow:var(--shadow)}
.act:hover::before{transform:scaleY(1)}
.act .tag{font-family:'PlexMono',monospace;font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--gold);display:block;margin-bottom:8px}
.act .nm{font-family:'Fraunces',serif;font-weight:600;font-size:18px;line-height:1.2;margin-bottom:6px}
.act .ds{font-size:13.5px;line-height:1.5;color:var(--fg-dim)}
.act .go{margin-top:12px;font-family:'PlexMono',monospace;font-size:10.5px;color:var(--fg-faint);
  display:flex;align-items:center;gap:6px;transition:color .3s ease,gap .3s ease}
.act:hover .go{color:var(--gold);gap:10px}

/* ---------- CTA ---------- */
.cta{border:1px solid var(--line-2);border-radius:6px;background:var(--bg-2);padding:28px 30px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cta h3{margin:0 0 6px;font-size:21px}
.cta p{margin:0;color:var(--fg-dim);font-size:14.5px;max-width:52ch}

/* ---------- FAQ ---------- */
details.q{border-top:1px solid var(--line);padding:16px 0}
details.q:last-of-type{border-bottom:1px solid var(--line)}
details.q summary{cursor:pointer;font-size:16px;font-weight:600;list-style:none;
  display:flex;justify-content:space-between;gap:16px;align-items:baseline}
details.q summary::-webkit-details-marker{display:none}
details.q summary::after{content:'+';font-family:'PlexMono',monospace;color:var(--gold);flex:none}
details.q[open] summary::after{content:'\2013'}
details.q p{margin:12px 0 0;color:var(--fg-dim);font-size:15px;max-width:64ch;line-height:1.6}

/* ---------- números ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
@media(max-width:820px){.stats{grid-template-columns:1fr}}
.stat{border:1px solid var(--line);border-radius:5px;background:var(--card);padding:22px 22px 19px;
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease,border-color .3s ease,background .3s ease}
.stat:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--line-2);background:var(--card-h)}
.stat-num{font-family:'Fraunces',serif;font-weight:600;font-size:34px;line-height:1;font-variant-numeric:tabular-nums}
.stat-lab{font-size:13.5px;line-height:1.45;color:var(--fg-dim);margin-top:10px}
.stat-src{font-family:'PlexMono',monospace;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--fg-faint);margin-top:14px;padding-top:11px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:6px}
.dot{width:5px;height:5px;border-radius:50%;background:var(--seal);flex:none}

/* ---------- prazo ---------- */
.prazo{position:relative;border:1px solid var(--line);border-radius:5px;background:var(--card);
  padding:30px 28px 26px;overflow:hidden}
.prazo::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 85% 0%, rgba(231,199,122,.10), transparent 62%)}
.prazo-top{display:flex;justify-content:space-between;font-family:'PlexMono',monospace;font-size:10.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--fg-faint);margin-bottom:24px}
.bar-row{display:grid;grid-template-columns:82px 1fr;align-items:center;gap:14px;margin-bottom:16px}
.bar-lab{font-family:'PlexMono',monospace;font-size:11px;color:var(--fg-dim);text-align:right}
.bar-track{height:26px;background:var(--bg-3);border-radius:2px;position:relative;overflow:hidden}
.bar-fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:2px}
.bar-legal .bar-fill{background:var(--line-2)}
.bar-real .bar-fill{background:linear-gradient(90deg,var(--gold-mid),var(--gold-hi))}
/* O rótulo fica à direita da trilha, fora do preenchimento. Usa --fg para
   permanecer legível nos dois temas, já que a barra curta não o cobre. */
.bar-val{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-family:'PlexMono',monospace;
  font-size:12px;font-variant-numeric:tabular-nums;color:var(--fg-dim);opacity:0}
.bar-real .bar-val{color:var(--fg);font-weight:600}
.prazo-foot{font-size:13px;line-height:1.5;color:var(--fg-faint);border-top:1px solid var(--line);
  padding-top:16px;margin:4px 0 0}

/* ---------- gráfico ---------- */
.chart-card{border:1px solid var(--line);border-radius:5px;background:var(--card);padding:26px 26px 20px}
.chart-top{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.chart-title{font-family:'PlexMono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-dim)}
.chart-note{font-family:'PlexMono',monospace;font-size:10.5px;letter-spacing:.06em;color:var(--fg-faint)}
.chart-shell{position:relative}
svg.chart{display:block;width:100%;height:auto;overflow:visible}
.bar-rect{transition:opacity .2s ease}
.chart-shell:hover .bar-rect{opacity:.45}
.chart-shell .bar-g:hover .bar-rect{opacity:1}
.tip{position:absolute;pointer-events:none;opacity:0;transform:translate(-50%,-114%);background:var(--bg);
  border:1px solid var(--line-2);border-radius:4px;padding:9px 12px;white-space:nowrap;
  transition:opacity .16s ease;box-shadow:var(--shadow);z-index:5}
.tip b{font-family:'Fraunces',serif;font-size:17px;font-variant-numeric:tabular-nums;display:block}
.tip span{font-family:'PlexMono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-faint)}
details.tbl{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
details.tbl summary{font-family:'PlexMono',monospace;font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--fg-faint);cursor:pointer}
details.tbl summary:hover{color:var(--fg-dim)}
.tbl-scroll{overflow-x:auto;margin-top:14px}
table{border-collapse:collapse;width:100%;font-size:13px}
th,td{text-align:left;padding:8px 14px 8px 0;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-family:'PlexMono',monospace;font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--fg-faint);font-weight:400}
td.num{font-variant-numeric:tabular-nums}

/* ---------- faixa de perfis (home) ---------- */
.perfis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px}
@media(max-width:900px){.perfis{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.perfis{grid-template-columns:1fr}}

/* ---------- referência ---------- */
.bench-item{padding:22px 0;border-top:1px solid var(--line);display:grid;
  grid-template-columns:auto 1fr;gap:18px;align-items:start}
.bench-item:last-child{border-bottom:1px solid var(--line)}
.bench-fig{font-family:'Fraunces',serif;font-weight:600;font-size:27px;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--gold);min-width:96px}
.bench-fig small{display:block;font-family:'PlexMono',monospace;font-size:9.5px;font-weight:400;
  letter-spacing:.1em;text-transform:uppercase;color:var(--fg-faint);margin-top:7px}
.bench-txt{font-size:14.5px;line-height:1.55;color:var(--fg-dim)}
.bench-txt b{color:var(--fg);font-weight:600}

/* ---------- galeria ---------- */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:820px){.gal{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.gal{grid-template-columns:1fr}}
.gal img{border-radius:5px;border:1px solid var(--line);aspect-ratio:4/5;object-fit:cover;width:100%}
.gal figure{margin:0}
.gal figcaption{font-family:'PlexMono',monospace;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--fg-faint);margin-top:8px}

/* ---------- links externos / transparência ---------- */
.ext{display:grid;grid-template-columns:repeat(2,1fr);gap:13px}
@media(max-width:760px){.ext{grid-template-columns:1fr}}
.ext a{display:block;text-decoration:none;border:1px solid var(--line);border-radius:5px;
  background:var(--card);padding:20px;transition:transform .3s cubic-bezier(.16,1,.3,1),
  border-color .3s ease,background .3s ease,box-shadow .3s ease}
.ext a:hover{transform:translateY(-4px);border-color:var(--line-2);background:var(--card-h);box-shadow:var(--shadow)}
.ext .nm{font-family:'Fraunces',serif;font-weight:600;font-size:18px;margin-bottom:6px}
.ext .ds{font-size:13.5px;color:var(--fg-dim);line-height:1.5}
.ext .go{margin-top:11px;font-family:'PlexMono',monospace;font-size:10.5px;color:var(--fg-faint)}
.ext a:hover .go{color:var(--gold)}

/* ---------- contato ---------- */
.info{display:grid;grid-template-columns:repeat(2,1fr);gap:13px}
@media(max-width:760px){.info{grid-template-columns:1fr}}
.info div{border:1px solid var(--line);border-radius:5px;background:var(--card);padding:20px}
.info dt{font-family:'PlexMono',monospace;font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--fg-faint);margin-bottom:8px}
.info dd{margin:0;font-size:15.5px;line-height:1.55}

/* ---------- WhatsApp flutuante (só no celular) ----------
   No desktop o botão do cabeçalho fica sempre visível, então o flutuante
   seria redundante. No celular o cabeçalho encolhe e o rótulo some, e é aí
   que o atalho permanente passa a valer. Alvo de 56px, acima do mínimo de 44. */
.wa-float{display:none}
@media(max-width:900px){
  .wa-float{
    display:flex;align-items:center;justify-content:center;
    position:fixed;z-index:60;
    right:16px;bottom:calc(16px + env(safe-area-inset-bottom, 0px));
    width:56px;height:56px;border-radius:50%;
    background:linear-gradient(135deg,var(--gold-hi),var(--gold-mid));color:#17130a;
    box-shadow:0 8px 22px -6px rgba(0,0,0,.55);
    transition:transform .2s cubic-bezier(.16,1,.3,1)
  }
  .wa-float:active{transform:scale(.94)}
  .wa-float svg{width:27px;height:27px}
  /* o rodapé ganha folga para o botão não cobrir os últimos links */
  footer.site{padding-bottom:96px}
}

/* ---------- rodapé ---------- */
footer.site{border-top:1px solid var(--line);background:var(--bg-2);padding:50px 0 40px;margin-top:20px}
.ft-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
@media(max-width:900px){.ft-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ft-grid{grid-template-columns:1fr}}
.ft-grid h4{font-family:'PlexMono',monospace;font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--fg-faint);margin:0 0 14px;font-weight:400}
.ft-grid ul{list-style:none;margin:0;padding:0}
.ft-grid li{margin-bottom:9px}
.ft-grid a{color:var(--fg-dim);text-decoration:none;font-size:14px;transition:color .2s ease}
.ft-grid a:hover{color:var(--gold)}
.ft-about{font-size:14px;color:var(--fg-dim);line-height:1.6;max-width:34ch;margin:14px 0 0}
.ft-bottom{border-top:1px solid var(--line);margin-top:38px;padding-top:22px;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-family:'PlexMono',monospace;font-size:10.5px;letter-spacing:.05em;color:var(--fg-faint)}

/* ---------- animação (aprimoramento progressivo) ---------- */
html.anim .reveal{opacity:0;transform:translateY(16px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
html.anim .reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition-duration:.01ms !important}
  .reveal{opacity:1 !important;transform:none !important}
  .bar-val{opacity:1 !important}
}