/* ============================================================================
   RAFAEL LAUDISIO — ADVOCACIA CRIMINAL
   Estilo do site institucional. Mesma linguagem visual da landing page /lp/
   ("O Dossiê"): tinta, papel de protocolo, carimbo vermelho.
   Mobile first. Não precisa editar para trocar dados — use config-tags.js.
   ============================================================================ */
/* ---------------------------------------------------------------------------
   FONTES — hospedadas aqui mesmo (antes vinham do Google Fonts, em 2 domínios
   externos e 6 arquivos, atrasando a primeira pintura da página).
   O Inter é fonte variável: um arquivo serve todos os pesos.
   --------------------------------------------------------------------------- */
@font-face{font-family:Anton;src:url(/assets/fontes/Anton-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(/assets/fontes/IBMPlexMono-600.woff2) format('woff2');font-weight:500 700;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(/assets/fontes/Inter.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --ink:#0D0E11; --ink2:#14161C; --ink3:#1C1F27; --ink4:#252934;
  --paper:#EFE7D4; --paper2:#E6DCC4; --paper3:#DCD0B4;
  --red:#C22B1E; --red-d:#9A2016; --red-l:#E0473A;
  --t-ink:#F1EEE4; --t-ink2:#B9B5A7; --t-ink3:#817E72;
  --t-pap:#17150F; --t-pap2:#4D4739; --t-pap3:#7A7260;
  --l-ink:rgba(241,238,228,.12); --l-pap:rgba(23,21,15,.16);
  --wa:#25D366; --wa-d:#128C4B;
  --ease:cubic-bezier(.22,.8,.28,1);
  --slam:cubic-bezier(.18,1.6,.32,1);
  --r:14px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --grao:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--ink);color:var(--t-ink);font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.travado{overflow:hidden}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
p,h1,h2,h3,figure,ul,ol,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit}
.wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:20px}
/* grids de uma coluna nunca podem ficar mais largos que a tela */
.perfil-grid,.escr-grid,.contato-grid,.rod-grid,.passos,.area-grid,.serv,.faq,.faixa-cta{grid-template-columns:minmax(0,1fr)}
.chip,.ah-area,.autos{max-width:100%}
.urg-faixa{flex-wrap:wrap}
.disp{font-family:Anton,Impact,"Arial Narrow",sans-serif;font-weight:400;text-transform:uppercase;line-height:.95;letter-spacing:.012em}
.mono{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace}
.i{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.i-cheio{fill:currentColor;stroke:none}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pular{position:absolute;left:12px;top:-60px;z-index:200;background:var(--paper);color:var(--t-pap);padding:10px 14px;border-radius:8px;font-weight:600}
.pular:focus{top:12px}
:focus-visible{outline:2.5px solid var(--red-l);outline-offset:3px;border-radius:4px}

/* ---------- revelar ao rolar (só com JS ativo) ---------- */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .d1{transition-delay:.08s}.js .d2{transition-delay:.16s}.js .d3{transition-delay:.24s}.js .d4{transition-delay:.32s}
.hline{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.hline>span{display:block}
.js .hline>span{transform:translateY(110%);transition:transform .85s var(--ease)}
.js .in .hline:nth-child(2)>span{transition-delay:.12s}
.js .in .hline>span{transform:none}

/* ---------- carimbo ---------- */
.stamp{display:inline-block;font-family:Anton,Impact,sans-serif;text-transform:uppercase;color:var(--red);
  border:3px solid currentColor;outline:1.5px solid currentColor;outline-offset:2.5px;border-radius:5px;
  padding:.32em .55em .22em;letter-spacing:.05em;line-height:1;transform:rotate(-6deg);position:relative;white-space:nowrap}
.stamp::after{content:"";position:absolute;inset:-5px;background-image:var(--grao);opacity:.45;mix-blend-mode:screen;pointer-events:none}
.js .st{opacity:0}
.js .st.in{animation:bate .55s var(--slam) .4s forwards}
@keyframes bate{0%{opacity:0;transform:scale(2.5) rotate(-18deg)}55%{opacity:1;transform:scale(.94) rotate(-4deg)}75%{transform:scale(1.04) rotate(-7deg)}100%{opacity:1;transform:scale(1) rotate(-6deg)}}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:700;font-size:16px;letter-spacing:-.01em;
  padding:16px 24px;border-radius:10px;border:0;cursor:pointer;text-decoration:none;min-height:48px;
  transition:transform .2s var(--ease),box-shadow .25s var(--ease),background .25s,border-color .25s,color .25s;-webkit-tap-highlight-color:transparent}
.btn .i{width:20px;height:20px}
.btn:active{transform:scale(.97)}
.btn-wa{background:linear-gradient(178deg,#31E37D,var(--wa) 50%,#1CAD54);color:#06240F;box-shadow:0 10px 26px -8px rgba(37,211,102,.5),inset 0 1.5px 0 rgba(255,255,255,.4)}
.btn-paper{background:var(--paper);color:var(--t-pap);box-shadow:0 10px 26px -10px rgba(0,0,0,.5),inset 0 1.5px 0 #fff}
.btn-paper .i-cheio{color:var(--wa-d)}
.btn-ghost{background:transparent;color:var(--t-ink);border:1.5px solid var(--l-ink)}
.s-paper .btn-ghost{color:var(--t-pap);border-color:var(--l-pap)}
.btn-lg{width:100%;padding:18px 22px;font-size:17px}
.btn-sm{padding:10px 15px;font-size:14px;min-height:44px;border-radius:8px}
.btn-ic{width:48px;min-width:48px;padding:0}
@media(min-width:600px){.btn-lg{width:auto;min-width:300px}}
@media(hover:hover){
  .btn-wa:hover{transform:translateY(-2px);box-shadow:0 16px 34px -10px rgba(37,211,102,.6),inset 0 1.5px 0 rgba(255,255,255,.4)}
  .btn-paper:hover,.btn-ghost:hover{transform:translateY(-2px)}
  .btn-ghost:hover{border-color:var(--red-l)}
}
.pulse{position:relative;isolation:isolate}
.pulse::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;animation:onda 2.8s var(--ease) infinite}
@keyframes onda{0%{box-shadow:0 0 0 0 rgba(37,211,102,.45)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

/* ---------- seções ---------- */
.s-ink{background:var(--ink);color:var(--t-ink);position:relative}
.s-ink2{background:var(--ink2);color:var(--t-ink);position:relative}
.s-paper{background:var(--paper);color:var(--t-pap);position:relative}
.s-red{background:var(--red);color:var(--paper);position:relative}
.s-paper::before,.s-red::before{content:"";position:absolute;inset:0;background-image:var(--grao);opacity:.32;mix-blend-mode:multiply;pointer-events:none}
.s-paper>*,.s-red>*{position:relative}
.sec{padding:68px 0}
@media(min-width:900px){.sec{padding:104px 0}}
.cab{max-width:700px;margin-bottom:32px}
.kick{display:flex;align-items:center;gap:12px;font-family:"IBM Plex Mono",monospace;font-size:11.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;margin-bottom:14px;color:var(--t-ink3)}
.kick::before{content:"";width:30px;height:2px;background:var(--red);flex:none}
.s-paper .kick{color:var(--t-pap3)}
.s-red .kick{color:rgba(239,231,212,.75)}
.s-red .kick::before{background:var(--paper)}
.cab h2{font-size:clamp(2.2rem,9vw,4.2rem)}
.rx{color:var(--red)}
.s-ink .rx,.s-ink2 .rx{color:var(--red-l)}
.lede{margin-top:14px;font-size:1.02rem;max-width:58ch;color:var(--t-ink2);text-wrap:pretty}
.s-paper .lede{color:var(--t-pap2)}

/* ============================================================================
   CABEÇALHO
   ============================================================================ */
.topo{position:fixed;inset:0 0 auto;z-index:80;padding:10px 0;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.topo.fixo,.pg-interna .topo{background:rgba(13,14,17,.92);-webkit-backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom-color:var(--l-ink)}
.topo .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
.marca-selo{width:38px;height:38px;flex:none;display:grid;place-items:center;border:2px solid var(--red-l);border-radius:5px;
  font-family:Anton,Impact,sans-serif;font-size:16px;color:var(--red-l);transform:rotate(-4deg);background:rgba(194,43,30,.1)}
.marca b{display:block;font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1.2;white-space:nowrap}
.marca small{display:block;font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--t-ink3)}
.nav-desk{display:none}
.topo-acoes{display:flex;align-items:center;gap:8px}
.topo-wa-txt{display:none}
.btn-menu{width:46px;height:46px;display:grid;place-items:center;background:transparent;border:1.5px solid var(--l-ink);border-radius:10px;cursor:pointer}
.btn-menu .i{width:22px;height:22px}
@media(min-width:1000px){
  .nav-desk{display:flex;align-items:center;gap:4px}
  .nav-desk a{text-decoration:none;font-size:14.5px;font-weight:500;color:var(--t-ink2);padding:10px 13px;border-radius:8px;transition:color .2s,background .2s}
  .nav-desk a:hover,.nav-desk a[aria-current="page"]{color:var(--t-ink);background:rgba(241,238,228,.06)}
  .nav-desk a.nav-urg{color:var(--red-l)}
  .btn-menu{display:none}
  .topo-wa-txt{display:inline}
}

/* ---------- menu do celular ---------- */
.painel{position:fixed;inset:0;z-index:120;background:var(--ink);overflow-y:auto;padding:14px 0 calc(40px + var(--safe-b));
  opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s}
.painel.aberto{opacity:1;visibility:visible;transform:none}
.painel::before{content:"";position:fixed;inset:0;background-image:var(--grao);opacity:.18;pointer-events:none}
.painel-topo{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}
.painel-grupo{margin-top:24px}
.painel-grupo>span{display:block;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--t-ink3);margin-bottom:6px}
.painel-grupo a{display:flex;align-items:center;justify-content:space-between;gap:12px;text-decoration:none;padding:12px 0;border-bottom:1px solid var(--l-ink);
  font-family:Anton,Impact,sans-serif;font-size:1.5rem;text-transform:uppercase;letter-spacing:.02em;line-height:1.1}
.painel-grupo a .i{color:var(--red-l);width:20px;height:20px}
.painel-grupo.compacto a{font-family:Inter,sans-serif;font-size:16px;text-transform:none;letter-spacing:0;font-weight:500;padding:11px 0}
.painel .btn{margin-top:26px;width:100%}
.painel-end{margin-top:18px;font-size:14px;color:var(--t-ink3)}
.painel.aberto .painel-grupo{animation:sobe .5s var(--ease) both}
.painel.aberto .painel-grupo:nth-child(3){animation-delay:.06s}
.painel.aberto .painel-grupo:nth-child(4){animation-delay:.12s}
@keyframes sobe{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ============================================================================
   HOME — HERO COM FOTOS ROTATIVAS
   ============================================================================ */
.hh{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;padding:110px 0 30px}
.hh-slides{position:absolute;inset:0;z-index:-3}
.hh-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s var(--ease)}
.hh-slide.on{opacity:1}
.hh-slide img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;transform:scale(1.02)}
/* o zoom lento só no computador: no celular ele deixava a tela mudando o tempo
   todo durante o carregamento e piorava o "Speed Index" do PageSpeed */
@media(min-width:900px){ .hh-slide.on img{animation:zoom 9s linear forwards} }
@keyframes zoom{from{transform:scale(1.02)}to{transform:scale(1.1)}}
.hh-arte{background:radial-gradient(120% 80% at 70% 20%,#2a1714,var(--ink) 60%);display:grid;place-items:center}
.hh-arte svg{width:min(78vw,520px);height:auto;color:rgba(224,71,58,.75);transform:translateY(-14%)}
.hh-slide.on.hh-arte svg{animation:balanca 6s ease-in-out infinite}
@keyframes balanca{0%,100%{transform:translateY(-14%) rotate(-2deg)}50%{transform:translateY(-14%) rotate(2deg)}}
.hh-veu{position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,rgba(13,14,17,.7) 0%,rgba(13,14,17,.15) 26%,rgba(13,14,17,.45) 46%,rgba(13,14,17,.93) 68%,var(--ink) 94%)}
.grao{position:absolute;inset:0;z-index:-1;background-image:var(--grao);opacity:.22;pointer-events:none}
.hh-barras{display:flex;gap:6px;margin:-12px 0 10px;max-width:320px}
.hh-barras button{flex:1;height:44px;padding:20px 0;background:none;border:0;cursor:pointer}
.hh-barras i{display:block;height:3px;border-radius:3px;background:rgba(241,238,228,.25);overflow:hidden;position:relative}
.hh-barras i::after{content:"";position:absolute;inset:0;background:var(--paper);transform:scaleX(0);transform-origin:left}
.hh-barras .feito i::after{transform:scaleX(1)}
.hh-barras .atual i::after{animation:enche var(--dur,6.5s) linear forwards}
.hh-barras.parado .atual i::after{animation:none;transform:scaleX(1)}
@keyframes enche{to{transform:scaleX(1)}}
.autos{display:inline-flex;align-items:center;gap:9px;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--t-ink2);border:1px solid var(--l-ink);padding:7px 12px;border-radius:4px;background:rgba(13,14,17,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.autos .rec{width:8px;height:8px;border-radius:50%;background:var(--red-l);animation:pisca 1.6s steps(2) infinite;flex:none}
@keyframes pisca{50%{opacity:.15}}
.hh h1{font-size:clamp(2.6rem,15vw,8.6rem);margin-top:18px}
.hh h1 .stamp{font-size:clamp(1.05rem,4.6vw,2.2rem);margin:14px 0 0 3px}
.hh-sub{margin-top:18px;font-size:clamp(1rem,4.2vw,1.18rem);color:var(--t-ink2);max-width:40ch;text-wrap:pretty}
.hh-sub b{color:var(--t-ink);font-weight:600}
.hh-ctas{display:flex;flex-direction:column;gap:10px;margin-top:24px}
.hh-legenda{margin-top:20px;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--t-ink3)}
@media(min-width:600px){.hh-ctas{flex-direction:row;flex-wrap:wrap}}
@media(min-width:900px){
  .hh{min-height:94vh;align-items:center;padding:130px 0 80px}
  .hh-slides{left:auto;width:60%}
  .hh-slide img{object-position:50% 30%}
  .hh-veu{background:linear-gradient(90deg,var(--ink) 38%,rgba(13,14,17,.82) 50%,rgba(13,14,17,.1) 78%,rgba(13,14,17,.35) 100%)}
  .hh-conteudo{max-width:680px;margin-left:0}
  .hh h1{font-size:clamp(4rem,7vw,7rem)}
  .hh-arte svg{transform:none;width:460px;color:rgba(224,71,58,.8)}
  @keyframes balanca{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
}

/* ---------- faixa de fatos ---------- */
.fatos{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--l-ink);border-bottom:1px solid var(--l-ink)}
.fato{padding:22px 16px;border-right:1px solid var(--l-ink);border-bottom:1px solid var(--l-ink)}
.fato:nth-child(2n){border-right:0}
.fato:nth-last-child(-n+2){border-bottom:0}
.fato strong{display:block;font-family:Anton,Impact,sans-serif;font-weight:400;font-size:clamp(2rem,9vw,3rem);line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--red-l)}
.fato span{display:block;margin-top:8px;font-size:13px;line-height:1.4;color:var(--t-ink2)}
@media(min-width:900px){
  .fatos{grid-template-columns:repeat(4,1fr)}
  .fato{border-bottom:0;padding:30px 24px}
  .fato:nth-child(2n){border-right:1px solid var(--l-ink)}
  .fato:last-child{border-right:0}
}

/* ---------- letreiro ---------- */
.mq{overflow:hidden;padding:14px 0;border-block:2px solid var(--ink);transform:rotate(-1.1deg) scale(1.02);position:relative;z-index:2}
.mq-trilho{display:flex;width:max-content;animation:letreiro 34s linear infinite}
/* o letreiro para quando sai da tela (economiza bateria e processamento).
   A pausa só acontece se o JavaScript marcar "fora" — sem JS, anima normal. */
.mq.fora .mq-trilho{animation-play-state:paused}
.mq span{display:inline-flex;align-items:center;gap:24px;padding-right:24px;font-family:Anton,Impact,sans-serif;font-size:clamp(15px,4vw,21px);
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.mq i{font-style:normal;font-size:.7em}
@keyframes letreiro{to{transform:translateX(-50%)}}

/* ============================================================================
   HOME — "O QUE ACONTECEU?"
   ============================================================================ */
.tri-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tri{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:18px;min-height:150px;padding:16px 14px 14px;
  text-decoration:none;background:var(--ink3);border:1px solid var(--l-ink);border-radius:var(--r);overflow:hidden;
  transition:transform .3s var(--ease),border-color .3s,background .3s}
.tri::after{content:"";position:absolute;right:-30px;bottom:-30px;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,rgba(224,71,58,.22),transparent 70%);transition:transform .4s var(--ease)}
.tri-tag{font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--t-ink3)}
.tri .i{width:26px;height:26px;color:var(--red-l)}
.tri b{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:1.22rem;line-height:1.08;text-transform:uppercase;letter-spacing:.015em}
.tri-seta{display:flex;align-items:center;justify-content:space-between}
.tri-seta .i{width:20px;height:20px;color:var(--t-ink3);transition:transform .3s var(--ease),color .3s}
.tri.urg{background:var(--red);border-color:var(--red)}
.tri.urg .tri-tag{color:rgba(239,231,212,.8)}
.tri.urg .i,.tri.urg .tri-seta .i{color:var(--paper)}
.tri.urg::after{background:radial-gradient(circle,rgba(255,255,255,.22),transparent 70%)}
@media(hover:hover){
  .tri:hover{transform:translateY(-4px);border-color:rgba(224,71,58,.45)}
  .tri:hover .tri-seta .i{transform:translateX(4px);color:var(--t-ink)}
  .tri:hover::after{transform:scale(1.6)}
}
@media(min-width:900px){.tri-grid{grid-template-columns:repeat(3,1fr);gap:16px}.tri{min-height:190px;padding:22px}.tri b{font-size:1.5rem}}

/* ============================================================================
   ÁREAS DE ATUAÇÃO
   ============================================================================ */
.grupo-rot{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:34px 0 12px;padding-bottom:10px;border-bottom:2px solid var(--t-pap)}
.grupo-rot:first-of-type{margin-top:0}
.grupo-rot h3{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:1.45rem;text-transform:uppercase}
.grupo-rot span{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--t-pap3)}
.area-grid{display:grid;gap:10px}
.area{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:16px 14px;
  background:var(--paper2);border-radius:10px;text-decoration:none;color:var(--t-pap);overflow:hidden;
  box-shadow:0 8px 22px -16px rgba(0,0,0,.4);transition:transform .3s var(--ease),box-shadow .3s,background .3s}
.area-ic{width:46px;height:46px;display:grid;place-items:center;border-radius:9px;background:rgba(194,43,30,.1);border:1.5px solid rgba(194,43,30,.28);color:var(--red)}
.area-ic .i{width:23px;height:23px}
.area b{display:block;font-family:Anton,Impact,sans-serif;font-weight:400;font-size:1.12rem;line-height:1.12;text-transform:uppercase;letter-spacing:.015em}
.area small{display:block;margin-top:4px;font-size:13.5px;line-height:1.45;color:var(--t-pap2)}
.area-num{position:absolute;right:12px;top:8px;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;color:var(--t-pap3)}
.area>.i{width:20px;height:20px;color:var(--t-pap3);transition:transform .3s var(--ease),color .3s}
@media(hover:hover){
  .area:hover{transform:translateY(-3px);box-shadow:0 18px 36px -18px rgba(0,0,0,.5);background:var(--paper)}
  .area:hover>.i{transform:translateX(4px);color:var(--red)}
}
@media(min-width:760px){.area-grid{grid-template-columns:1fr 1fr;gap:14px}}
@media(min-width:1080px){
  .area-grid{grid-template-columns:repeat(4,1fr)}
  .area{grid-template-columns:1fr;align-content:start;gap:12px;padding:22px 18px 20px;min-height:230px}
  .area>.i{position:absolute;right:16px;bottom:16px}
}

/* ============================================================================
   PERFIL / QUEM SOU EU
   ============================================================================ */
.perfil-grid{display:grid;gap:34px}
@media(min-width:900px){.perfil-grid{grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center}}
.foto-bloco{position:relative;max-width:340px;margin:0}
.foto-bloco::before{content:"";position:absolute;inset:18px -14px -14px 18px;background:var(--red);border-radius:6px;background-image:var(--grao)}
.foto-bloco img{position:relative;border-radius:6px;box-shadow:0 26px 60px -24px rgba(0,0,0,.8);aspect-ratio:4/5;object-fit:cover;width:100%}
.foto-bloco .stamp{position:absolute;z-index:2;left:-10px;bottom:24px;font-size:14px;transform:rotate(-8deg);background:rgba(13,14,17,.55)}
@media(min-width:900px){.foto-bloco{max-width:none}}
.creds{display:grid;gap:12px;margin-top:24px}
.creds li{display:flex;gap:12px;font-size:15px;line-height:1.55;color:var(--t-ink2)}
.creds li strong{color:var(--t-ink);font-weight:600}
.creds .ck{flex:none;width:22px;height:22px;margin-top:1px;border:2px solid var(--red-l);border-radius:4px;display:grid;place-items:center;color:var(--red-l);transform:rotate(-3deg)}
.creds .ck .i{width:13px;height:13px;stroke-width:3}
.s-paper .creds li{color:var(--t-pap2)}
.s-paper .creds li strong{color:var(--t-pap)}
.s-paper .creds .ck{border-color:var(--red);color:var(--red)}
.oab{display:inline-flex;align-items:center;gap:9px;margin-top:22px;font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;border:1.5px dashed var(--red-l);background:rgba(194,43,30,.08);padding:10px 15px;border-radius:6px}
.acoes{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}

/* ============================================================================
   COMO FUNCIONA
   ============================================================================ */
.passos{display:grid;gap:34px}
@media(min-width:900px){.passos{grid-template-columns:repeat(3,1fr);gap:30px}}
.passo figure{margin:0 0 18px;background:#fff;padding:10px 10px 12px;border-radius:3px;transform:rotate(-1.5deg);box-shadow:0 18px 40px -18px rgba(0,0,0,.4);position:relative}
.passo:nth-child(2) figure{transform:rotate(1.3deg)}
.passo figure img{aspect-ratio:4/3;object-fit:cover;width:100%;filter:saturate(.9)}
.fita{position:absolute;width:88px;height:26px;top:-12px;left:50%;transform:translateX(-50%) rotate(-3deg);background:rgba(230,222,198,.8);box-shadow:0 2px 5px rgba(0,0,0,.15)}
.passo-cab{display:flex;align-items:baseline;gap:12px;margin-bottom:8px}
.passo-n{font-family:Anton,Impact,sans-serif;font-size:2.2rem;line-height:1;color:transparent;-webkit-text-stroke:1.6px var(--red);flex:none}
.passo h3{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:1.3rem;text-transform:uppercase}
.passo p{font-size:15px;color:var(--t-pap2)}

/* ============================================================================
   ESCRITÓRIO / FOTOS QUE AINDA VÃO CHEGAR
   ============================================================================ */
.escr-grid{display:grid;gap:18px}
@media(min-width:900px){.escr-grid{grid-template-columns:1fr 1.3fr;gap:40px;align-items:start}}
.endereco{background:var(--ink3);border:1px solid var(--l-ink);border-radius:var(--r);padding:24px 20px}
.endereco p{display:flex;gap:12px;font-size:15px;color:var(--t-ink2);line-height:1.5}
.endereco p+p{margin-top:14px}
.endereco p .i{margin-top:2px;color:var(--red-l)}
.endereco p strong{display:block;color:var(--t-ink);font-weight:600}
.endereco .acoes{margin-top:22px}
.fotos-escr{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fotos-escr .slot:first-child{grid-column:1/-1}
.slot{position:relative;margin:0;border-radius:10px;overflow:hidden;aspect-ratio:4/3;background:var(--ink3)}
.slot:first-child{aspect-ratio:16/9}
.slot img{width:100%;height:100%;object-fit:cover}
.slot-vazio{display:grid;place-items:center;align-content:center;gap:10px;text-align:center;border:1.5px dashed rgba(241,238,228,.2);
  background:repeating-linear-gradient(135deg,rgba(241,238,228,.025) 0 12px,transparent 12px 24px),var(--ink3);color:var(--t-ink3)}
.slot-vazio .i{width:30px;height:30px;color:rgba(224,71,58,.6)}
.slot-vazio span{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
.slot figcaption{position:absolute;left:10px;bottom:10px;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  background:rgba(13,14,17,.7);padding:5px 8px;border-radius:4px;color:var(--t-ink)}
.mapa-caixa{margin-top:16px;border-radius:10px;overflow:hidden;background:var(--ink3);border:1px solid var(--l-ink);aspect-ratio:16/10;display:grid;place-items:center}
.mapa-caixa iframe{width:100%;height:100%;border:0}
.mapa-caixa .btn{margin:16px}

/* ============================================================================
   PERGUNTAS FREQUENTES
   ============================================================================ */
.faq{display:grid;gap:10px;max-width:840px}
.faq details{background:var(--paper2);border-radius:10px;box-shadow:0 10px 24px -16px rgba(0,0,0,.35);overflow:hidden}
.faq summary{list-style:none;display:flex;align-items:flex-start;gap:14px;cursor:pointer;padding:18px 16px;
  font-family:Anton,Impact,sans-serif;font-size:1.06rem;line-height:1.28;text-transform:uppercase;letter-spacing:.02em;color:var(--t-pap);-webkit-tap-highlight-color:transparent}
.faq summary::-webkit-details-marker{display:none}
.faq summary span{flex:1}
.faq summary i{flex:none;width:22px;height:22px;position:relative;color:var(--red);margin-top:1px}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:50%;top:50%;background:currentColor;border-radius:2px;transform:translate(-50%,-50%);transition:transform .3s var(--ease),opacity .3s}
.faq summary i::before{width:14px;height:2.4px}
.faq summary i::after{width:2.4px;height:14px}
.faq details[open] summary i::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.faq .resp{padding:0 16px 18px;font-size:15px;line-height:1.62;color:var(--t-pap2)}
.faq details[open] .resp{animation:abre .35s var(--ease)}
@keyframes abre{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ============================================================================
   CHAMADA FINAL
   ============================================================================ */
.final{text-align:center;overflow:hidden}
.final h2{font-size:clamp(2.5rem,11vw,5.6rem);text-wrap:balance}
.final .lede{color:rgba(239,231,212,.86);margin-inline:auto;max-width:48ch}
.final .stamp{color:var(--paper);font-size:clamp(1rem,4vw,1.35rem);margin-bottom:22px}
.final .acoes{justify-content:center}
.final-nota{margin-top:16px;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(239,231,212,.7)}

/* ============================================================================
   PÁGINAS DE ÁREA
   ============================================================================ */
.ah{position:relative;padding:96px 0 56px;overflow:hidden}
.ah::before{content:"";position:absolute;inset:0;background-image:var(--grao);opacity:.2;pointer-events:none}
.ah .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:34px}
.migalhas ol{display:flex;flex-wrap:wrap;gap:6px 8px;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--t-ink3)}
.migalhas li+li::before{content:"/";margin-right:8px;opacity:.5}
.migalhas a{text-decoration:none}
.migalhas a:hover{color:var(--t-ink)}
.migalhas [aria-current]{color:var(--t-ink2)}
.ah-area{display:inline-flex;align-items:center;gap:9px;margin-top:22px;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--t-ink2);border:1px solid var(--l-ink);padding:7px 12px;border-radius:4px}
.ah-area .i{color:var(--red-l);width:16px;height:16px}
.ah h1{font-size:clamp(2.6rem,11.5vw,5.4rem);margin-top:16px;text-wrap:balance}
.ah-lede{margin-top:18px;font-size:clamp(1.02rem,4.2vw,1.18rem);color:var(--t-ink2);max-width:46ch;text-wrap:pretty}
.ah-ctas{display:flex;flex-direction:column;gap:10px;margin-top:26px}
.ah-nota{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chip{display:inline-flex;align-items:center;gap:7px;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--t-ink2);border:1px solid var(--l-ink);border-radius:4px;padding:7px 10px}
.chip .i{width:13px;height:13px;color:var(--red-l)}
.urg-faixa{display:flex;align-items:center;gap:10px;background:var(--red);color:var(--paper);padding:10px 14px;border-radius:8px;margin-top:22px;
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.urg-faixa .rec{width:9px;height:9px;border-radius:50%;background:var(--paper);animation:pisca 1.2s steps(2) infinite;flex:none}
@media(min-width:600px){.ah-ctas{flex-direction:row;flex-wrap:wrap}}
.ficha{position:relative;margin:0 auto;max-width:280px;background:var(--paper);padding:12px 12px 14px;border-radius:3px;transform:rotate(2.2deg);box-shadow:0 34px 70px -22px rgba(0,0,0,.75)}
.ficha::before{content:"";position:absolute;inset:0;background-image:var(--grao);opacity:.35;mix-blend-mode:multiply;pointer-events:none}
.ficha img{aspect-ratio:4/5;object-fit:cover;width:100%;border-radius:2px;filter:saturate(.9) contrast(1.03)}
.ficha figcaption{display:flex;justify-content:space-between;gap:8px;margin-top:11px;font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--t-pap2)}
.ficha .fita{top:-13px}
.ficha .stamp{position:absolute;right:-14px;bottom:36px;font-size:14px;transform:rotate(-10deg);background:rgba(239,231,212,.85)}
@media(min-width:900px){
  .ah{padding:130px 0 80px}
  .ah .wrap{grid-template-columns:1.2fr .8fr;gap:60px;align-items:center}
  .ficha{max-width:380px;margin:0 0 0 auto;transform:rotate(3deg)}
}

.resumo{position:relative;background:var(--paper2);border-radius:12px;padding:24px 20px 22px;border-left:6px solid var(--red);max-width:860px;
  box-shadow:0 16px 40px -24px rgba(0,0,0,.45)}
.resumo b{display:block;font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--red-d);margin-bottom:10px}
.resumo p{font-size:clamp(1.02rem,4vw,1.15rem);line-height:1.62;color:var(--t-pap)}
.ferramenta{display:flex;align-items:center;gap:14px;margin-top:18px;max-width:860px;padding:16px 18px;border-radius:12px;text-decoration:none;
  background:var(--ink);color:var(--t-ink);transition:transform .3s var(--ease)}
.ferramenta .i{width:26px;height:26px;color:var(--red-l)}
.ferramenta span{flex:1;font-size:15px;line-height:1.4}
.ferramenta strong{display:block;font-family:Anton,Impact,sans-serif;font-weight:400;font-size:1.1rem;text-transform:uppercase;letter-spacing:.02em}
@media(hover:hover){.ferramenta:hover{transform:translateY(-3px)}}

.video{margin-top:28px;max-width:860px}
.video[hidden]{display:none}
.video-btn{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;border-radius:12px;overflow:hidden;cursor:pointer;background:#000}
.video-btn img{width:100%;height:100%;object-fit:cover;opacity:.75;transition:opacity .3s,transform .6s var(--ease)}
.video-btn .play{position:absolute;inset:0;margin:auto;width:74px;height:74px;border-radius:50%;background:var(--red);display:grid;place-items:center;box-shadow:0 12px 30px rgba(0,0,0,.5)}
.video-btn .play .i{width:30px;height:30px;color:#fff;margin-left:4px}
.video-btn:hover img{opacity:.9;transform:scale(1.03)}
.video iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:12px}

.serv{display:grid;gap:10px;max-width:900px}
.serv li{display:flex;gap:14px;align-items:flex-start;background:var(--ink3);border:1px solid var(--l-ink);border-radius:12px;padding:16px;font-size:15.5px;line-height:1.5;color:var(--t-ink2)}
.serv li .n{flex:none;font-family:Anton,Impact,sans-serif;font-size:1.5rem;line-height:1;color:transparent;-webkit-text-stroke:1.4px var(--red-l);min-width:32px}
@media(min-width:900px){.serv{grid-template-columns:1fr 1fr;gap:14px}}

.faixa-cta{display:grid;gap:16px;align-items:center;padding:26px 0}
.faixa-cta p{font-family:Anton,Impact,sans-serif;font-size:clamp(1.5rem,6.5vw,2.4rem);line-height:1.05;text-transform:uppercase}
@media(min-width:900px){.faixa-cta{grid-template-columns:1fr auto;padding:34px 0}}

.quem{display:grid;grid-template-columns:96px 1fr;gap:18px;align-items:start;background:var(--ink3);border:1px solid var(--l-ink);border-radius:16px;padding:20px;max-width:900px}
.quem img{width:96px;height:120px;object-fit:cover;border-radius:8px}
.quem h3{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:1.35rem;text-transform:uppercase;line-height:1.1}
.quem .oab{margin-top:10px;font-size:10.5px;padding:6px 10px}
.quem-txt{grid-column:1/-1;display:grid;gap:8px;font-size:15px;color:var(--t-ink2)}
.quem .acoes{grid-column:1/-1;margin-top:6px}
@media(min-width:760px){.quem{grid-template-columns:150px 1fr;padding:28px;gap:26px}.quem img{width:150px;height:188px}.quem-txt,.quem .acoes{grid-column:2}}

.rel{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rel a{display:flex;flex-direction:column;justify-content:space-between;gap:14px;min-height:110px;padding:14px;border-radius:12px;text-decoration:none;
  background:var(--ink3);border:1px solid var(--l-ink);transition:border-color .3s,transform .3s var(--ease)}
.rel a .i{width:22px;height:22px;color:var(--red-l)}
.rel a b{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:1.02rem;line-height:1.12;text-transform:uppercase}
@media(hover:hover){.rel a:hover{border-color:rgba(224,71,58,.5);transform:translateY(-3px)}}
@media(min-width:900px){.rel{grid-template-columns:repeat(4,1fr);gap:14px}}

/* ============================================================================
   PÁGINAS DE TEXTO (sobre, contato, privacidade, 404)
   ============================================================================ */
.pg-cab{padding:104px 0 40px}
.pg-cab h1{font-size:clamp(2.5rem,11vw,5rem);margin-top:16px;text-wrap:balance}
.pg-cab .lede{font-size:clamp(1.02rem,4.2vw,1.18rem)}
.prosa{max-width:760px;display:grid;gap:14px;font-size:16px;color:var(--t-ink2)}
.prosa h2{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:1.6rem;text-transform:uppercase;color:var(--t-ink);margin-top:26px}
.prosa strong{color:var(--t-ink)}
.prosa ul{display:grid;gap:8px;padding-left:18px;list-style:disc}
.prosa a{color:var(--red-l)}
.contato-grid{display:grid;gap:14px}
@media(min-width:900px){.contato-grid{grid-template-columns:1fr 1fr;gap:20px}}
.canal{display:flex;align-items:center;gap:14px;padding:18px;border-radius:12px;background:var(--ink3);border:1px solid var(--l-ink);text-decoration:none;transition:border-color .3s}
.canal .ic{width:48px;height:48px;border-radius:10px;display:grid;place-items:center;background:rgba(194,43,30,.14);color:var(--red-l);flex:none}
.canal .ic .i{width:24px;height:24px}
.canal.wa .ic{background:rgba(37,211,102,.14);color:var(--wa)}
.canal small{display:block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--t-ink3)}
.canal strong{display:block;font-size:17px;font-weight:600;word-break:break-word}
@media(hover:hover){a.canal:hover{border-color:rgba(224,71,58,.5)}}
.foto-larga{border-radius:14px;overflow:hidden;box-shadow:0 26px 60px -30px rgba(0,0,0,.8)}
.foto-larga img{width:100%;aspect-ratio:16/10;object-fit:cover}
.err404{min-height:80vh;min-height:80svh;display:grid;align-content:center;text-align:center}
.err404 .disp{font-size:clamp(6rem,34vw,14rem);color:transparent;-webkit-text-stroke:2px var(--red-l);line-height:.85}

/* ============================================================================
   RODAPÉ
   ============================================================================ */
.rodape{background:var(--ink);border-top:1px solid var(--l-ink);padding:52px 0 calc(116px + var(--safe-b));font-size:14px;color:var(--t-ink3)}
@media(min-width:760px){.rodape{padding-bottom:52px}}
.rod-grid{display:grid;gap:30px}
@media(min-width:900px){.rod-grid{grid-template-columns:1.3fr 1fr 1fr;gap:40px}}
.rod-marca{font-family:Anton,Impact,sans-serif;font-size:1.6rem;text-transform:uppercase;color:var(--t-ink);line-height:1}
.rod-grid p{line-height:1.65}
.rod-grid p+p{margin-top:10px}
.rod-tit{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--t-ink2);margin-bottom:12px}
.rod-links{display:grid;gap:8px}
.rod-links a{text-decoration:none;transition:color .2s}
.rod-links a:hover{color:var(--t-ink)}
.redes{display:flex;gap:10px;margin-top:16px}
.redes a{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--l-ink);border-radius:10px;color:var(--t-ink2);transition:color .2s,border-color .2s}
.redes a:hover{color:var(--t-ink);border-color:var(--red-l)}
.redes .i{width:20px;height:20px}
.legal{margin-top:34px;padding-top:24px;border-top:1px solid var(--l-ink);max-width:80ch;font-size:13px;line-height:1.65}
.legal strong{color:var(--t-ink2)}

/* ============================================================================
   BOTÕES FIXOS (celular e computador)
   ============================================================================ */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;gap:8px;padding:10px 14px calc(10px + var(--safe-b));
  background:linear-gradient(180deg,rgba(13,14,17,.55),rgba(13,14,17,.97) 45%);-webkit-backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--l-ink);
  transform:translateY(115%);transition:transform .45s var(--ease)}
.dock.ver{transform:none}
.dock .btn-wa{flex:1}
.dock .btn-tel{background:var(--ink4);color:var(--t-ink);border:1px solid var(--l-ink)}
@media(min-width:760px){.dock{display:none}}
.fab{position:fixed;right:22px;bottom:24px;z-index:70;width:60px;height:60px;border-radius:50%;display:none;place-items:center;text-decoration:none;
  background:linear-gradient(178deg,#31E37D,var(--wa) 50%,#1CAD54);color:#06240F;box-shadow:0 14px 34px -8px rgba(37,211,102,.55);
  transform:scale(0);transition:transform .45s var(--ease)}
.fab .i{width:30px;height:30px}
.fab.ver{transform:none}
@media(min-width:760px){.fab{display:grid}}
@media(hover:hover){.fab.ver:hover{transform:translateY(-3px) scale(1.05)}}

/* ============================================================================
   MOVIMENTO REDUZIDO
   ============================================================================ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .rv,.js .hline>span{opacity:1;transform:none}
  .js .st{opacity:1}
  .mq-trilho{animation:none}
}