/* ============================================================
   RAFAEL LAUDISIO — LP /intimado/  ·  v2 "O DOSSIÊ"
   Conceito: a página se veste como o documento oficial.
   Papel de protocolo + tinta + carimbo vermelho + máquina de
   escrever. Mobile-first.
   ============================================================ */
:root{
  --ink:#0D0E11; --ink2:#14161C; --ink3:#1C1F27;
  --paper:#EFE7D4; --paper2:#E6DCC4; --paper3:#DDD2B6;
  --red:#C22B1E; --red-d:#992015; --red-glow:rgba(194,43,30,.4);
  --txt-ink:#F1EEE4; --txt-ink2:#B8B4A6; --txt-ink3:#7E7B6F;
  --txt-pap:#17150F; --txt-pap2:#4E483A; --txt-pap3:#7A7260;
  --line-ink:rgba(241,238,228,.12); --line-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);
  --wrap:1180px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --noise: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}
body{
  margin:0; background:var(--ink); color:var(--txt-ink);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16.5px; line-height:1.62; letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block; height:auto}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0}
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:20px}

/* Tipos */
.disp{font-family:Anton,Impact,sans-serif; font-weight:400; text-transform:uppercase;
  line-height:.94; letter-spacing:.012em}
.mono{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace}

/* ============================================================
   REVEAL — escondido só quando o JS confirma presença (.js-rv)
   ============================================================ */
.js-rv .rv{opacity:0; transform:translateY(30px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.js-rv .rv.in{opacity:1; transform:none}
.js-rv .rv-d1{transition-delay:.08s}.js-rv .rv-d2{transition-delay:.16s}
.js-rv .rv-d3{transition-delay:.24s}.js-rv .rv-d4{transition-delay:.32s}

/* linhas do H1 sobem de dentro da máscara */
.hline{display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em}
.hline>span{display:block}
.js-rv .hline>span{transform:translateY(112%); transition:transform .85s var(--ease)}
.js-rv .in .hline:nth-child(1)>span{transition-delay:.05s}
.js-rv .in .hline:nth-child(2)>span{transition-delay:.16s}
.js-rv .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;
  padding:.3em .55em .22em; letter-spacing:.05em; line-height:1; border-radius:5px;
  transform:rotate(-6deg); position:relative}
.stamp::after{content:""; position:absolute; inset:-5px; background-image:var(--noise);
  opacity:.5; mix-blend-mode:screen; pointer-events:none; border-radius:5px}
.on-paper .stamp::after{mix-blend-mode:lighten; opacity:.65}
.js-rv .st{opacity:0}
.js-rv .st.in{animation:slam .55s var(--slam) .45s forwards}
@keyframes slam{
  0%{opacity:0; transform:scale(2.6) rotate(-18deg)}
  55%{opacity:1; transform:scale(.93) rotate(-4deg)}
  75%{transform:scale(1.04) rotate(-7deg)}
  100%{opacity:1; transform:scale(1) rotate(-6deg)}
}

/* ============================================================
   TOPO
   ============================================================ */
.top{position:fixed; inset:0 0 auto 0; z-index:60; padding:10px 0;
  background:rgba(13,14,17,.6); backdrop-filter:blur(12px);
  border-bottom:1px solid transparent; transition:border-color .3s, background .3s}
.top.stuck{background:rgba(13,14,17,.92); border-bottom-color:var(--line-ink)}
.top .wrap{display:flex; align-items:center; justify-content:space-between; gap:12px}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; min-width:0}
.brand-mark{width:36px; height:36px; flex:none; border:2px solid var(--red); border-radius:4px;
  display:grid; place-items:center; font-family:Anton; font-size:15px; color:var(--red);
  transform:rotate(-4deg); background:rgba(194,43,30,.08)}
.brand b{font-family:"IBM Plex Mono",monospace; font-size:13px; font-weight:600; display:block;
  letter-spacing:.06em; text-transform:uppercase; line-height:1.2; white-space:nowrap}
.brand small{display:block; font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--txt-ink3)}
.top-cta{display:none}
@media(min-width:760px){ .top-cta{display:inline-flex} }

/* ============================================================
   BOTÕES
   ============================================================ */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-weight:700; font-size:16px; letter-spacing:-.01em;
  padding:17px 26px; border-radius:10px; border:0; cursor:pointer; text-decoration:none;
  transition:transform .2s var(--ease), box-shadow .25s var(--ease);
  -webkit-tap-highlight-color:transparent}
.btn svg{flex:none}
.btn-wa{background:linear-gradient(178deg,#31E37D,var(--wa) 50%,#1CAD54); color:#06240F;
  box-shadow:0 10px 28px -8px rgba(37,211,102,.5), inset 0 1.5px 0 rgba(255,255,255,.4)}
.btn-wa:active{transform:scale(.97)}
@media(hover:hover){ .btn-wa:hover{transform:translateY(-2px); box-shadow:0 16px 36px -10px rgba(37,211,102,.6), inset 0 1.5px 0 rgba(255,255,255,.4)} }
.btn-paper{background:var(--paper); color:var(--txt-pap);
  box-shadow:0 10px 28px -10px rgba(0,0,0,.5), inset 0 1.5px 0 #fff}
.btn-paper svg{color:var(--wa-d)}
.btn-paper:active{transform:scale(.97)}
@media(hover:hover){ .btn-paper:hover{transform:translateY(-2px)} }
.btn-lg{width:100%; padding:19px 24px; font-size:17px}
@media(min-width:560px){ .btn-lg{width:auto; min-width:330px} }
.btn-sm{padding:12px 17px; font-size:13.5px; border-radius:8px}

.pulse{position:relative; isolation:isolate}
.pulse::after{content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1;
  box-shadow:0 0 0 0 rgba(37,211,102,.5); animation:pr 2.8s var(--ease) infinite}
@keyframes pr{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)}}

/* ============================================================
   FUNDOS DE SEÇÃO
   ============================================================ */
.s-ink{background:var(--ink); color:var(--txt-ink); position:relative}
.s-ink2{background:var(--ink2); color:var(--txt-ink); position:relative}
.s-paper{background:var(--paper); color:var(--txt-pap); position:relative}
.s-paper::before{content:""; position:absolute; inset:0; background-image:var(--noise);
  opacity:.35; pointer-events:none; mix-blend-mode:multiply}
.s-red{background:var(--red); color:var(--paper); position:relative}
.s-red::before{content:""; position:absolute; inset:0; background-image:var(--noise);
  opacity:.4; pointer-events:none; mix-blend-mode:multiply}
.sec{padding:76px 0}
@media(min-width:900px){ .sec{padding:116px 0} }

/* Cabeçalho de seção */
.shead{margin-bottom:36px; max-width:680px}
.snum{display:flex; align-items:center; gap:12px; font-family:"IBM Plex Mono",monospace;
  font-size:11.5px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; margin-bottom:16px}
.s-ink .snum,.s-ink2 .snum{color:var(--txt-ink3)}
.s-paper .snum{color:var(--txt-pap3)}
.snum::before{content:""; width:34px; height:2px; background:var(--red); flex:none}
.shead h2{font-size:clamp(2.3rem,9.4vw,4.6rem)}
.shead h2 .rx{color:var(--red)}
.lede{margin-top:16px; font-size:1.02rem; max-width:56ch; text-wrap:pretty}
.s-ink .lede,.s-ink2 .lede{color:var(--txt-ink2)}
.s-paper .lede{color:var(--txt-pap2)}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding:118px 0 60px; overflow:hidden; position:relative}
.hero::before{content:""; position:absolute; inset:0; background-image:var(--noise); opacity:.25; pointer-events:none}
.hero::after{content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--line-ink),transparent)}
.autos{display:inline-flex; align-items:center; gap:10px; font-family:"IBM Plex Mono",monospace;
  font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--txt-ink3);
  border:1px solid var(--line-ink); padding:8px 13px; border-radius:4px; background:rgba(241,238,228,.03)}
.autos .rec{width:8px; height:8px; border-radius:50%; background:var(--red); animation:bl 1.6s steps(2) infinite; flex:none}
@keyframes bl{50%{opacity:.15}}
.hero h1{font-size:clamp(3.55rem,17.5vw,9rem); margin-top:22px; color:var(--txt-ink)}
.hero h1 .stamp{font-size:clamp(1.5rem,7vw,3.4rem); margin:14px 0 0 4px; vertical-align:middle}
.hero-sub{margin-top:22px; font-size:clamp(1.02rem,4.4vw,1.2rem); color:var(--txt-ink2); max-width:36ch; text-wrap:pretty}
.hero-sub b{color:var(--txt-ink); font-weight:600}
.hero-cta{margin-top:28px}
.hero-chips{margin-top:18px; display:flex; flex-wrap:wrap; gap:8px}
.chip{display:inline-flex; align-items:center; gap:7px; font-family:"IBM Plex Mono",monospace;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--txt-ink2);
  border:1px solid var(--line-ink); border-radius:4px; padding:7px 11px}
.chip svg{color:var(--red); flex:none}

/* ficha com foto */
.ficha{position:relative; margin:52px auto 6px; max-width:320px; background:var(--paper);
  padding:13px 13px 16px; border-radius:3px; transform:rotate(2.4deg);
  box-shadow:0 34px 70px -22px rgba(0,0,0,.75)}
.ficha::before{content:""; position:absolute; inset:0; background-image:var(--noise); opacity:.4; mix-blend-mode:multiply; pointer-events:none; border-radius:3px}
.ficha img{border-radius:2px; filter:saturate(.88) contrast(1.04)}
.ficha figcaption{font-family:"IBM Plex Mono",monospace; font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--txt-pap2); margin-top:12px;
  display:flex; justify-content:space-between; gap:10px}
.tape{position:absolute; width:104px; height:30px; background:rgba(238,231,212,.5);
  border-left:1px dashed rgba(23,21,15,.15); border-right:1px dashed rgba(23,21,15,.15);
  top:-14px; left:50%; transform:translateX(-50%) rotate(-3deg);
  box-shadow:0 2px 5px rgba(0,0,0,.18); backdrop-filter:blur(1px)}
.ficha .stamp{position:absolute; right:-14px; bottom:34px; font-size:17px; padding:.34em .5em .26em; transform:rotate(-10deg)}
@media(min-width:900px){
  .hero{padding:150px 0 90px}
  .hero .wrap{display:grid; grid-template-columns:1.15fr .85fr; gap:64px; align-items:center}
  .ficha{margin:0; max-width:390px; justify-self:end; transform:rotate(3deg)}
  .hero-sub{max-width:46ch}
}

/* ============================================================
   LETREIRO (marquee)
   ============================================================ */
.mq{overflow:hidden; padding:15px 0; border-block:2px solid var(--ink);
  transform:rotate(-1.2deg) scale(1.02); position:relative; z-index:2}
.mq-track{display:flex; gap:0; width:max-content; animation:mq 30s linear infinite}
.mq span{display:inline-flex; align-items:center; gap:26px; padding-right:26px;
  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:.72em; transform:translateY(-1px)}
@keyframes mq{to{transform:translateX(-50%)}}

/* ============================================================
   ERROS — cards que empilham no scroll (mobile)
   ============================================================ */
.err-stack{display:grid; gap:18px}
.err{background:var(--paper2); border:2px solid var(--txt-pap); border-radius:14px;
  padding:28px 22px 26px; position:relative; overflow:hidden;
  box-shadow:0 -12px 34px -18px rgba(0,0,0,.35)}
.err::before{content:""; position:absolute; inset:0; background-image:var(--noise); opacity:.35; mix-blend-mode:multiply; pointer-events:none}
.err-big{font-family:Anton,Impact,sans-serif; font-size:clamp(4.4rem,20vw,7rem); line-height:.8;
  color:transparent; -webkit-text-stroke:2px var(--red); position:absolute; right:10px; top:16px; opacity:.85; pointer-events:none}
.err-k{display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:10.5px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--paper); background:var(--red);
  padding:5px 10px 4px; border-radius:3px; margin-bottom:14px; transform:rotate(-1.5deg)}
.err h3{font-family:Anton,Impact,sans-serif; font-size:clamp(1.5rem,6.4vw,2rem);
  text-transform:uppercase; letter-spacing:.01em; max-width:8.5em; margin-bottom:12px}
.err p{font-size:15px; color:var(--txt-pap2); line-height:1.62; max-width:52ch; position:relative}
@media(max-width:859px){
  .err{position:sticky; top:calc(78px + var(--i)*18px)}
}
@media(min-width:860px){
  .err-stack{grid-template-columns:repeat(2,1fr); gap:22px}
  .err{transition:transform .3s var(--ease)}
  .err:hover{transform:translateY(-6px) rotate(-.5deg)}
}

.risk-note{margin-top:26px; max-width:820px; background:var(--paper2); border:1.5px solid var(--txt-pap);
  border-left:5px solid var(--red); border-radius:10px; padding:22px 22px 20px; position:relative; overflow:hidden}
.risk-note::before{content:""; position:absolute; inset:0; background-image:var(--noise); opacity:.3; mix-blend-mode:multiply; pointer-events:none}
.risk-note b{display:block; font-family:"IBM Plex Mono",monospace; font-size:11.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--red-d); margin-bottom:10px; position:relative}
.risk-note p{font-size:15px; color:var(--txt-pap2); line-height:1.62; position:relative}
.risk-note p strong{color:var(--txt-pap)}
@media(max-width:859px){ .risk-note{position:relative; margin-top:34px} }

/* ============================================================
   TRADUTOR DE INTIMAÇÃO
   ============================================================ */
.doc{background:var(--paper); color:var(--txt-pap); border-radius:6px; padding:30px 22px 26px;
  position:relative; box-shadow:0 30px 70px -28px rgba(0,0,0,.8); max-width:780px;
  font-family:"IBM Plex Mono",monospace; font-size:13px; line-height:2.05; letter-spacing:.02em}
.doc::before{content:""; position:absolute; inset:0; background-image:var(--noise); opacity:.4; mix-blend-mode:multiply; pointer-events:none; border-radius:6px}
.doc-head{text-align:center; font-weight:600; font-size:11.5px; letter-spacing:.18em;
  text-transform:uppercase; border-bottom:1.5px solid var(--line-pap); padding-bottom:14px; margin-bottom:18px}
.doc-head small{display:block; font-weight:500; letter-spacing:.12em; color:var(--txt-pap3); margin-top:5px; font-size:10px}
.doc-body{text-transform:uppercase; text-align:justify}
.doc-foot{margin-top:18px; padding-top:12px; border-top:1.5px dashed var(--line-pap);
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--txt-pap3);
  display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap}
.doc .stamp{position:absolute; right:14px; top:-16px; font-size:15px; transform:rotate(7deg)}

.gap-note{margin-top:18px; max-width:780px; background:var(--ink3); border:1px solid var(--line-ink);
  border-left:4px solid var(--red); border-radius:10px; padding:18px 18px 17px}
.gap-note b{display:block; font-family:"IBM Plex Mono",monospace; font-size:11.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--red); margin-bottom:8px}
.gap-note p{font-size:15px; color:var(--txt-ink2); line-height:1.62}
.gap-note p strong{color:var(--txt-ink)}
.term{font:inherit; text-transform:inherit; letter-spacing:inherit; border:0; cursor:pointer;
  background:rgba(194,43,30,.13); color:var(--red-d); font-weight:600; padding:1px 4px; border-radius:3px;
  border-bottom:2px dashed var(--red); -webkit-tap-highlight-color:transparent;
  transition:background .25s, color .25s}
.term:hover{background:rgba(194,43,30,.24)}
.term[aria-expanded="true"]{background:var(--red); color:var(--paper); border-bottom-style:solid}
.doc-hint{display:flex; align-items:center; gap:9px; margin:16px 0 0; font-family:"IBM Plex Mono",monospace;
  font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--txt-ink3)}
.doc-hint svg{color:var(--red); flex:none; animation:tap 2.2s var(--ease) infinite}
@keyframes tap{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

.xps{margin-top:18px; max-width:780px; display:grid; gap:10px}
.xp{background:var(--ink3); border:1px solid var(--line-ink); border-left:4px solid var(--red);
  border-radius:10px; padding:18px 18px 17px}
.js-rv .xp{display:none}
.js-rv .xp.on{display:block; animation:xpin .4s var(--ease)}
@keyframes xpin{from{opacity:0; transform:translateY(10px)}to{opacity:1}}
.xp b{display:block; font-family:"IBM Plex Mono",monospace; font-size:11.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--red); margin-bottom:8px}
.xp b em{font-style:normal; color:var(--txt-ink3)}
.xp p{font-size:15px; color:var(--txt-ink2); line-height:1.62}
.xp p strong{color:var(--txt-ink)}
.trad-cta{margin-top:26px; display:flex; flex-direction:column; gap:12px; align-items:flex-start}
.trad-cta .mono-note{font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--txt-ink3)}

/* ============================================================
   SELETOR — pastas de autos
   ============================================================ */
.pick{display:grid; gap:14px; max-width:860px}
.pk{position:relative; background:var(--paper2); color:var(--txt-pap);
  border-radius:0 12px 12px 12px; margin-top:26px;
  box-shadow:0 14px 34px -18px rgba(0,0,0,.45); transition:box-shadow .3s}
.pk::before{content:attr(data-tab); position:absolute; top:-25px; left:0; height:26px;
  display:flex; align-items:center; padding:0 14px;
  background:var(--paper2); border-radius:8px 8px 0 0;
  font-family:"IBM Plex Mono",monospace; font-size:10px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--txt-pap3)}
.pk::after{content:""; position:absolute; inset:0; background-image:var(--noise); opacity:.3;
  mix-blend-mode:multiply; pointer-events:none; border-radius:0 12px 12px 12px}
.pk.open{box-shadow:0 22px 50px -20px rgba(0,0,0,.6)}
.pk.open::before{background:var(--red); color:var(--paper)}
.pk-btn{width:100%; display:flex; align-items:center; gap:14px; text-align:left; cursor:pointer;
  background:none; border:0; color:inherit; font:inherit; padding:19px 18px; position:relative; z-index:1;
  -webkit-tap-highlight-color:transparent}
.pk-ic{width:44px; height:44px; flex:none; border-radius:8px; display:grid; place-items:center;
  background:rgba(194,43,30,.1); border:1.5px solid rgba(194,43,30,.3); color:var(--red);
  transition:transform .3s var(--ease)}
.pk.open .pk-ic{transform:rotate(-5deg) scale(1.05); background:var(--red); color:var(--paper)}
.pk-t{flex:1; min-width:0}
.pk-t b{display:block; font-family:Anton,Impact,sans-serif; font-weight:400; font-size:1.14rem;
  text-transform:uppercase; letter-spacing:.02em; line-height:1.15}
.pk-t span{display:block; font-size:13px; color:var(--txt-pap2); margin-top:4px}
.pk-ch{flex:none; color:var(--txt-pap3); transition:transform .35s var(--ease), color .3s}
.pk.open .pk-ch{transform:rotate(180deg); color:var(--red)}
.pk-body{display:grid; grid-template-rows:0fr; transition:grid-template-rows .42s var(--ease); position:relative; z-index:1}
.pk.open .pk-body{grid-template-rows:1fr}
.pk-inner{overflow:hidden}
.pk-pad{padding:16px 18px 20px; border-top:1.5px dashed var(--line-pap)}
.pk-pad p{font-size:15px; color:var(--txt-pap2); line-height:1.62}
.pk-pad p+p{margin-top:11px}
.pk-pad p b{color:var(--txt-pap)}
.pk-pad .btn{margin-top:16px; width:100%}

/* ============================================================
   DIREITOS — carimbos em série
   ============================================================ */
.dir-grid{display:grid; gap:14px}
@media(min-width:760px){ .dir-grid{grid-template-columns:1fr 1fr; gap:20px} }
.dir{background:var(--ink3); border:1px solid var(--line-ink); border-radius:14px;
  padding:24px 20px; position:relative; overflow:hidden; transition:border-color .3s, transform .3s var(--ease)}
@media(hover:hover){ .dir:hover{border-color:var(--red-glow); transform:translateY(-4px)} }
.dir-n{display:inline-block; font-family:Anton,Impact,sans-serif; font-size:13px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--red); border:2px solid var(--red); border-radius:4px;
  padding:.32em .5em .22em; transform:rotate(-3deg); margin-bottom:15px}
.dir h3{font-family:Anton,Impact,sans-serif; font-weight:400; font-size:1.34rem; text-transform:uppercase;
  letter-spacing:.02em; margin-bottom:9px}
.dir p{font-size:14.8px; color:var(--txt-ink2); line-height:1.6}
.dir cite{display:block; font-style:normal; font-family:"IBM Plex Mono",monospace; font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--txt-ink3); margin-top:12px;
  padding-top:10px; border-top:1px dashed var(--line-ink)}

/* ============================================================
   PROTOCOLO (passos)
   ============================================================ */
.steps{display:grid; gap:34px; counter-reset:passo}
@media(min-width:900px){ .steps{grid-template-columns:repeat(3,1fr); gap:30px} }
.step{position:relative}
.step figure{margin:0 0 18px; background:#fff; padding:10px 10px 12px; border-radius:3px;
  transform:rotate(-1.6deg); box-shadow:0 18px 44px -18px rgba(0,0,0,.4); position:relative}
.step:nth-child(2) figure{transform:rotate(1.4deg)}
.step:nth-child(3) figure{transform:rotate(-1deg)}
.step figure::before{content:""; position:absolute; inset:0; background-image:var(--noise); opacity:.25; mix-blend-mode:multiply; pointer-events:none}
.step img{aspect-ratio:4/3; object-fit:cover; width:100%; filter:saturate(.9)}
.step .tape{top:-13px; width:88px; height:26px; background:rgba(230,222,198,.75)}
.step-head{display:flex; align-items:baseline; gap:12px; margin-bottom:8px}
.step-n{font-family:Anton,Impact,sans-serif; font-size:2.2rem; color:transparent;
  -webkit-text-stroke:1.6px var(--red); line-height:1; flex:none}
.step h3{font-family:Anton,Impact,sans-serif; font-weight:400; font-size:1.3rem; text-transform:uppercase; letter-spacing:.02em}
.step p{font-size:14.8px; color:var(--txt-pap2); line-height:1.6}

/* ============================================================
   BIO
   ============================================================ */
.bio-grid{display:grid; gap:34px}
@media(min-width:900px){ .bio-grid{grid-template-columns:.9fr 1.1fr; gap:60px; align-items:center} }
.bio-fig{position:relative; max-width:360px; margin:0}
.bio-fig::before{content:""; position:absolute; inset:18px -14px -14px 18px; background:var(--red);
  border-radius:6px; opacity:.9; background-image:var(--noise)}
.bio-fig img{position:relative; border-radius:6px; border:1px solid var(--line-ink);
  box-shadow:0 26px 60px -24px rgba(0,0,0,.8)}
.bio-fig .stamp{position:absolute; z-index:2; left:-12px; bottom:22px; font-size:15px; transform:rotate(-8deg)}
@media(min-width:900px){ .bio-fig{max-width:none} }
.bio h2{font-size:clamp(2.5rem,10vw,4.4rem)}
.bio-facts{list-style:none; margin:24px 0 0; padding:0; display:grid; gap:12px}
.bio-facts li{display:flex; gap:12px; font-size:15px; color:var(--txt-ink2); line-height:1.55}
.bio-facts .fx{flex:none; width:20px; height:20px; margin-top:2px; border:2px solid var(--red); border-radius:3px;
  display:grid; place-items:center; color:var(--red); transform:rotate(-3deg)}
.bio-facts .fx svg{width:12px; height:12px}
.oab{display:inline-flex; align-items:center; gap:10px; margin-top:22px;
  font-family:"IBM Plex Mono",monospace; font-size:12px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--txt-ink); border:1.5px dashed var(--red);
  background:rgba(194,43,30,.07); padding:11px 16px; border-radius:6px}
.oab svg{color:var(--red)}

/* ============================================================
   FAQ
   ============================================================ */
.faq{display:grid; gap:10px; max-width:820px}
.fq{background:var(--paper2); border-radius:10px; overflow:hidden; position:relative;
  box-shadow:0 10px 26px -16px rgba(0,0,0,.35); transition:box-shadow .3s}
.fq::after{content:""; position:absolute; inset:0; background-image:var(--noise); opacity:.28; mix-blend-mode:multiply; pointer-events:none}
.fq.open{box-shadow:0 16px 40px -18px rgba(0,0,0,.5)}
.fq-btn{width:100%; display:flex; align-items:flex-start; gap:14px; text-align:left; cursor:pointer;
  background:none; border:0; color:var(--txt-pap); font-family:Anton,Impact,sans-serif; font-weight:400;
  font-size:1.06rem; text-transform:uppercase; letter-spacing:.02em; line-height:1.3;
  padding:19px 18px; position:relative; z-index:1; -webkit-tap-highlight-color:transparent}
.fq-btn span{flex:1}
.fq-pm{flex:none; width:24px; height:24px; margin-top:1px; position:relative; color:var(--red)}
.fq-pm::before,.fq-pm::after{content:""; position:absolute; left:50%; top:50%; background:currentColor;
  border-radius:2px; transform:translate(-50%,-50%); transition:transform .35s var(--ease), opacity .3s}
.fq-pm::before{width:14px; height:2.4px}
.fq-pm::after{width:2.4px; height:14px}
.fq.open .fq-pm::after{transform:translate(-50%,-50%) rotate(90deg); opacity:0}
.fq-body{display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s var(--ease); position:relative; z-index:1}
.fq.open .fq-body{grid-template-rows:1fr}
.fq-inner{overflow:hidden}
.fq-pad{padding:0 18px 19px; font-size:14.8px; color:var(--txt-pap2); line-height:1.62}
.fq-pad p+p{margin-top:10px}

/* ============================================================
   FINAL — seção vermelha
   ============================================================ */
.final{text-align:center; overflow:hidden}
.final h2{font-size:clamp(2.7rem,12vw,6rem); text-wrap:balance}
.final .lede{color:rgba(239,231,212,.85); margin-inline:auto; max-width:46ch}
.final .btn{margin-top:30px}
.final-note{margin-top:18px; font-family:"IBM Plex Mono",monospace; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(239,231,212,.65)}
.final .stamp{color:var(--paper); font-size:clamp(1rem,4vw,1.4rem); margin-bottom:22px; transform:rotate(-5deg)}

/* ============================================================
   RODAPÉ
   ============================================================ */
footer{background:var(--ink); padding:52px 0 calc(126px + var(--safe-b));
  border-top:1px solid var(--line-ink); font-size:13.4px; color:var(--txt-ink3)}
@media(min-width:760px){ footer{padding-bottom:58px} }
.ft-top{display:grid; gap:24px; margin-bottom:30px}
@media(min-width:760px){ .ft-top{grid-template-columns:1.3fr 1fr; gap:44px} }
.ft-brand{font-family:Anton,Impact,sans-serif; font-size:1.5rem; color:var(--txt-ink); text-transform:uppercase}
.ft-links{list-style:none; margin:0; padding:0; display:grid; gap:9px;
  font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.06em; text-transform:uppercase}
.ft-links a{text-decoration:none; transition:color .25s}
@media(hover:hover){ .ft-links a:hover{color:var(--red)} }
.code{margin-top:20px; width:150px}
.code i{display:block; height:30px; background:repeating-linear-gradient(90deg,
  var(--txt-ink3) 0 2px, transparent 2px 5px, var(--txt-ink3) 5px 6px, transparent 6px 11px,
  var(--txt-ink3) 11px 14px, transparent 14px 17px)}
.code small{font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.3em; color:var(--txt-ink3)}
.legal{border-top:1px solid var(--line-ink); padding-top:24px; line-height:1.62; max-width:76ch}
.legal strong{color:var(--txt-ink2); font-weight:600}

/* ============================================================
   DOCK + FAB
   ============================================================ */
.dock{position:fixed; left:0; right:0; bottom:0; z-index:70; padding:11px 16px calc(11px + var(--safe-b));
  background:linear-gradient(180deg,rgba(13,14,17,.5),rgba(13,14,17,.97) 44%);
  backdrop-filter:blur(14px); border-top:1px solid var(--line-ink);
  transform:translateY(115%); transition:transform .45s var(--ease); pointer-events:none}
.dock.show{transform:none; pointer-events:auto}
.dock .btn{width:100%}
.dock-note{text-align:center; font-family:"IBM Plex Mono",monospace; font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--txt-ink3); margin-top:7px}
@media(min-width:760px){ .dock{display:none} }
.fab{position:fixed; right:22px; bottom:26px; z-index:70; width:60px; height:60px; border-radius:50%;
  display:none; place-items:center; background:linear-gradient(178deg,#31E37D,var(--wa) 50%,#1CAD54);
  color:#06240F; box-shadow:0 14px 34px -8px rgba(37,211,102,.55); text-decoration:none;
  transform:scale(0) translateY(20px); transition:transform .45s var(--ease)}
.fab.show{transform:none}
@media(min-width:760px){ .fab{display:grid} }
@media(hover:hover){ .fab.show:hover{transform:translateY(-3px) scale(1.05)} }

/* ============================================================
   FOCO + MOVIMENTO REDUZIDO
   ============================================================ */
:focus-visible{outline:2.5px solid var(--red); outline-offset:3px; border-radius:4px}
.s-ink :focus-visible,.s-ink2 :focus-visible{outline-color:var(--wa)}
@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 .rv{opacity:1; transform:none}
  .js-rv .hline>span{transform:none}
  .js-rv .st{opacity:1}
  .mq-track{animation:none}
  @media(max-width:859px){ .err{position:static} }
}