/* Lastro Advocacia · style.css — projeto conceito WebCariri */
:root{
  --tinta:#101828;--tinta2:#1B2638;--papel:#F4F1EA;--papel2:#EAE4D8;--latao:#B08D57;--latao2:#C9A46B;
  --txt:#1A2130;--suave:#5E6472;--linha:rgba(16,24,40,.14);
  --disp:"Gloock","DejaVu Serif",Georgia,serif;--corpo:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:18px;--ease:cubic-bezier(.2,.8,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
@view-transition{navigation:auto}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--papel);color:var(--txt);font:400 16px/1.6 var(--corpo);overflow-x:hidden;padding-bottom:84px}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--disp);font-weight:400;line-height:1.08;margin:0;letter-spacing:-.01em}
em{font-style:italic;color:var(--latao)}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--latao);outline-offset:3px}
.pular{position:absolute;left:8px;top:8px;transform:translateY(-200%);z-index:99;background:var(--tinta);color:#fff;padding:10px 14px;border-radius:10px}
.pular:focus{transform:none}
.sobre{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--latao);margin:0 0 .8rem}

/* ============ Vidro líquido: fallback + camada real */
.lg{position:relative;isolation:isolate;background:rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(255,255,255,.08),0 10px 30px -12px rgba(8,12,24,.45)}
.lg::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(140deg,rgba(255,255,255,.7),rgba(255,255,255,.08) 38%,rgba(201,164,107,.35) 70%,rgba(255,255,255,.4));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.claro .lg,.sec .lg{background:rgba(255,255,255,.55)}

/* ============ Topo */
.topo{position:fixed;inset:0 0 auto;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(10px + env(safe-area-inset-top)) 16px 10px;color:var(--papel);
  background:linear-gradient(rgba(16,24,40,.85),rgba(16,24,40,0));transition:color .3s,background .3s}
.topo.clara{color:var(--tinta);background:rgba(244,241,234,.82);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--linha)}
.marca{display:flex;align-items:center;min-height:44px;gap:10px;text-decoration:none;font-family:var(--disp);font-size:1.35rem;line-height:1}
.marca small{display:block;font-family:var(--corpo);font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;opacity:.7;margin-top:3px}
.marca-s{display:grid;place-items:center;width:38px;height:38px;border:1px solid currentColor;border-radius:50%;font-size:1.25rem;color:var(--latao2)}
.bt-topo{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;text-decoration:none;font-weight:600;font-size:.86rem;white-space:nowrap}

/* ============ Botões */
.bt{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 22px;border-radius:999px;border:0;
  font-weight:600;font-size:.95rem;text-decoration:none;transition:transform .25s var(--ease),box-shadow .25s,background .25s}
.bt:active{transform:scale(.97)}
.bt-latao{background:linear-gradient(135deg,#D2B17A,var(--latao) 55%,#8E6E3F);color:#15110A;box-shadow:0 10px 26px -10px rgba(176,141,87,.8),inset 0 1px 0 rgba(255,255,255,.45)}
.bt-latao:hover{box-shadow:0 14px 34px -10px rgba(176,141,87,.95),inset 0 1px 0 rgba(255,255,255,.45)}
.bt-tinta{background:var(--tinta);color:var(--papel)}
.bt-tinta:hover{background:var(--tinta2)}
.bt-largo{width:100%}
.hero .bt.lg{color:var(--papel)}

/* ============ Hero */
.hero{position:relative;min-height:100svh;background:radial-gradient(120% 80% at 70% 30%,#1D2A44 0,var(--tinta) 60%);color:var(--papel);
  display:flex;flex-direction:column;justify-content:flex-end;padding:0 16px calc(104px + env(safe-area-inset-bottom));overflow:hidden}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:120px;background:linear-gradient(transparent,rgba(16,24,40,.6));pointer-events:none}
.particulas{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y}
.hero-txt{position:relative;z-index:2;max-width:640px}
.hero h1{font-size:clamp(2.9rem,13vw,6.6rem);line-height:.98}
.h-l{display:block;overflow:hidden;padding-bottom:.06em}
.h-l>span{display:block;animation:sobe 1s var(--ease) both}
.h-l:nth-child(2)>span{animation-delay:.15s}
.hero h1 em{color:var(--latao2)}
.hero-p{max-width:30ch;margin:1.1rem 0 1.6rem;color:rgba(244,241,234,.78);font-size:1.02rem;animation:surge .9s .45s both}
.hero-bts{display:flex;flex-wrap:wrap;gap:10px;animation:surge .9s .6s both}
.hero-dica{position:absolute;z-index:2;top:calc(84px + env(safe-area-inset-top));right:16px;margin:0;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(201,164,107,.8);animation:pisca 2.6s ease-in-out infinite}
@keyframes sobe{from{transform:translateY(105%)}to{transform:none}}
@keyframes surge{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pisca{50%{opacity:.35}}

/* ============ Seções */
.sec{padding:72px 16px 8px;max-width:1120px;margin:0 auto}
.cab{margin-bottom:28px;max-width:640px}
.cab h2{font-size:clamp(2.1rem,9vw,3.6rem)}
.cab-p{color:var(--suave);margin:.8rem 0 0;max-width:46ch}

/* ============ Triagem */
.triagem-sec{padding-top:80px}
.triagem{border-radius:26px;padding:20px;background:rgba(255,255,255,.6);color:var(--txt)}
.lg-real .triagem{background:rgba(255,255,255,.42)}
.tri-topo{display:flex;justify-content:space-between;align-items:center;min-height:44px;margin-bottom:6px}
.tri-passo{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--latao)}
.tri-volta{background:none;border:0;min-height:44px;padding:0 4px;font-weight:600;color:var(--suave)}
.tri-tela{animation:tela .45s var(--ease) both}
@keyframes tela{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.tri-tela h3{font-size:1.7rem;margin-bottom:16px}
.tri-ops{display:grid;gap:8px}
.tri-op{display:flex;align-items:center;gap:12px;min-height:54px;width:100%;text-align:left;padding:8px 14px 8px 8px;border-radius:14px;
  background:rgba(255,255,255,.75);border:1px solid var(--linha);font-weight:500;transition:transform .2s var(--ease),border-color .2s,background .2s}
.tri-op:hover{border-color:var(--latao);transform:translateX(3px)}
.tri-l{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;border:1px solid var(--linha);font-family:var(--disp);font-size:1.05rem;color:var(--latao);transition:background .2s,color .2s}
.tri-op.marcado{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}
.tri-op.marcado .tri-l{background:var(--latao);color:var(--tinta);border-color:var(--latao)}
.tri-res h3{font-size:2rem;margin-bottom:6px}
.tri-caso{margin:0 0 14px;color:var(--suave)}
.tri-caso b{color:#9A3A2A}
.tri-alerta{margin:0 0 14px;padding:12px 14px;border-radius:12px;background:rgba(154,58,42,.08);border-left:3px solid #9A3A2A;font-size:.92rem}
.tri-docs-t{font-weight:600;margin:0 0 6px}
.tri-docs{margin:0 0 18px;padding:0;list-style:none}
.tri-docs li{padding:8px 0 8px 28px;border-bottom:1px dashed var(--linha);position:relative}
.tri-docs li::before{content:"§";position:absolute;left:4px;top:7px;color:var(--latao);font-family:var(--disp)}
.tri-nota{font-size:.78rem;color:var(--suave);margin:10px 0 0;text-align:center}

/* ============ Pastas (arquivo) */
.arquivo{position:relative;padding-top:6px}
.pasta{position:relative;margin-top:-10px;filter:drop-shadow(0 -6px 10px rgba(16,24,40,.07))}
.pasta:first-child{margin-top:0}
.pasta:nth-child(odd){--cor:#E9E1D0}.pasta:nth-child(even){--cor:#DDD3BE}
.pasta-aba{position:relative;display:flex;align-items:center;gap:10px;min-height:48px;width:min(50%,260px);
  margin-left:calc(var(--i) * min(8.4%,120px));padding:0 16px;border:0;border-radius:14px 14px 0 0;background:var(--cor);
  font-family:var(--disp);font-size:1.15rem;text-align:left;transition:background .25s}
.pasta-aba::after{content:"";position:absolute;right:-18px;bottom:0;width:18px;height:100%;background:var(--cor);clip-path:polygon(0 0,0 100%,100% 100%)}
.pasta-n{font-family:var(--corpo);font-size:.7rem;font-weight:700;letter-spacing:.14em;color:var(--latao)}
.pasta-corpo{max-height:0;overflow:hidden;background:var(--cor);border-radius:0 16px 16px 16px;padding:0 18px;transition:max-height .6s var(--ease),padding .45s var(--ease),background .25s}
.pasta-corpo>*{opacity:0;transform:translateY(8px);transition:opacity .3s,transform .4s var(--ease)}
.pasta.aberta{z-index:2}
.pasta.aberta .pasta-aba,.pasta.aberta .pasta-aba::after,.pasta.aberta .pasta-corpo{background:#FBF9F4}
.pasta.aberta .pasta-corpo{max-height:640px;padding:18px 18px 22px;box-shadow:0 18px 40px -22px rgba(16,24,40,.45)}
.pasta.aberta .pasta-corpo>*{opacity:1;transform:none;transition-delay:.12s}
.pasta-corpo h3{font-size:1.6rem;margin-bottom:8px}
.pasta-corpo p{margin:0 0 10px;color:var(--suave)}
.pasta-corpo ul{margin:0 0 16px;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.pasta-corpo li{font-size:.84rem;padding:6px 12px;border-radius:999px;border:1px solid var(--linha);background:rgba(255,255,255,.6)}
.pasta-corpo .bt{margin-top:4px}

/* ============ Método (carimbos) */
.metodo{list-style:none;margin:0;padding:0;display:grid;gap:0;position:relative}
.metodo::before{content:"";position:absolute;left:31px;top:30px;bottom:30px;width:1px;background:repeating-linear-gradient(var(--latao) 0 6px,transparent 6px 12px);opacity:.6}
.metodo li{display:flex;gap:18px;align-items:flex-start;padding:14px 0}
.metodo h3{font-size:1.5rem;margin:8px 0 4px}
.metodo p{margin:0;color:var(--suave)}
.selo-n{position:relative;z-index:1;flex:none;display:grid;place-items:center;width:62px;height:62px;border-radius:50%;
  border:2px solid #8C2F24;color:#8C2F24;background:var(--papel);font-family:var(--disp);font-size:1.3rem;
  box-shadow:inset 0 0 0 4px var(--papel),inset 0 0 0 5px rgba(140,47,36,.55);transform:rotate(-12deg)}
.js .metodo li.rev .selo-n{opacity:0;transform:scale(2.4) rotate(-30deg)}
.js .metodo li.vis .selo-n{animation:carimbo .55s calc(var(--d) + .15s) cubic-bezier(.3,1.6,.5,1) both}
@keyframes carimbo{0%{opacity:0;transform:scale(2.4) rotate(-30deg)}60%{opacity:1;transform:scale(.92) rotate(-10deg)}100%{opacity:1;transform:scale(1) rotate(-12deg)}}

/* ============ Equipe */
.equipe{display:grid;gap:12px}
.adv{border-radius:var(--r);padding:20px;display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:center}
.adv-ini{grid-row:span 3;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--tinta);color:var(--latao2);font-family:var(--disp);font-size:1.3rem}
.adv h3{font-size:1.35rem}
.adv p{margin:0;color:var(--suave);font-size:.92rem}
.adv .adv-oab{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--latao);font-weight:600;margin-top:2px}

/* ============ Chamada para o guia */
.guia-cta{display:grid;gap:6px;padding:26px 22px;border-radius:24px;text-decoration:none;background:var(--tinta)!important;color:var(--papel);overflow:hidden}
.guia-cta strong{font-family:var(--disp);font-weight:400;font-size:1.7rem;line-height:1.1}
.guia-cta>span:last-child{color:rgba(244,241,234,.75)}
.guia-cta::after{content:"§";position:absolute;right:-10px;bottom:-60px;font-family:var(--disp);font-size:13rem;color:rgba(201,164,107,.14);line-height:1;z-index:-1;transition:transform .6s var(--ease)}
.guia-cta:hover::after{transform:rotate(-12deg) translateY(-10px)}

/* ============ Rodapé */
.rodape{margin-top:72px;padding:40px 16px 32px;background:var(--tinta);color:rgba(244,241,234,.75);font-size:.88rem;text-align:center}
.rodape p{margin:0 0 8px}
.rod-marca{font-family:var(--disp);font-size:2rem;color:var(--papel)}
.rod-nota{max-width:52ch;margin:0 auto 12px!important;font-size:.76rem;opacity:.75}
.rodape a{display:inline-flex;align-items:center;min-height:44px;color:var(--latao2);font-weight:600}

/* ============ Navegação em abas de fichário */
.abas-nav{position:fixed;z-index:50;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));display:flex;gap:2px;padding:5px;border-radius:20px;background:rgba(16,24,40,.72)}
.lg-real .abas-nav{background:rgba(16,24,40,.5)}
.abas-nav a{flex:1;display:grid;place-items:center;min-height:48px;border-radius:15px;text-decoration:none;font-size:.74rem;font-weight:600;color:rgba(244,241,234,.72);position:relative;transition:color .25s,background .35s var(--ease)}
.abas-nav a[aria-current]{background:var(--papel);color:var(--tinta)}
.abas-nav a[aria-current]::before{content:"";position:absolute;top:-2px;left:50%;width:18px;height:3px;margin-left:-9px;border-radius:2px;background:var(--latao)}

/* ============ Guia (guia.html) */
.guia-hero{padding:calc(110px + env(safe-area-inset-top)) 16px 40px;background:radial-gradient(120% 90% at 80% 10%,#1D2A44,var(--tinta) 65%);color:var(--papel);position:relative;overflow:hidden}
.guia-hero::after{content:"§";position:absolute;right:-30px;top:30px;font-family:var(--disp);font-size:18rem;line-height:1;color:rgba(201,164,107,.12)}
.guia-hero .in{max-width:1120px;margin:0 auto;position:relative;z-index:1}
.guia-hero h1{font-size:clamp(2.6rem,11vw,5rem)}
.guia-hero h1 em{color:var(--latao2)}
.guia-hero p{max-width:40ch;color:rgba(244,241,234,.75)}
.busca-g{position:sticky;top:calc(64px + env(safe-area-inset-top));z-index:30;max-width:1120px;margin:-26px auto 0;padding:0 16px}
.busca-caixa{border-radius:22px;padding:10px;background:rgba(255,255,255,.72)}
.busca-caixa label{display:flex;align-items:center;gap:10px;padding:0 10px;min-height:50px;border-radius:14px;background:#fff;border:1px solid var(--linha)}
.busca-caixa input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:16px;color:var(--txt)}
.filtros{display:flex;gap:6px;overflow-x:auto;padding:10px 2px 2px;scrollbar-width:none}
.filtros::-webkit-scrollbar{display:none}
.filtros button{flex:none;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--linha);background:rgba(255,255,255,.7);font-size:.84rem;font-weight:600}
.filtros button[aria-pressed="true"]{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}
.g-cont{max-width:1120px;margin:22px auto 10px;padding:0 16px;font-size:.8rem;color:var(--suave)}
.glossario{max-width:1120px;margin:0 auto;padding:0 16px;display:grid;gap:10px}
.termo{border-radius:var(--r);padding:18px 18px 16px;animation:surge .5s calc(min(var(--k),10) * 40ms) both}
.termo h3{font-size:1.45rem;margin-bottom:6px}
.termo p:last-child{margin:0;color:var(--suave);font-size:.94rem}
.termo .sobre{margin-bottom:.5rem;font-size:.64rem}
mark{background:rgba(201,164,107,.4);color:inherit;border-radius:3px;padding:0 1px}
.vazio{padding:30px 0;text-align:center;color:var(--suave)}
.vazio a{color:var(--latao);font-weight:600}

/* ============ Revelar */
.js .rev{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease) var(--d,0s),transform .8s var(--ease) var(--d,0s)}
.js .rev.vis{opacity:1;transform:none}
.js .metodo li.rev{transform:none}

/* ============ Tablet e desktop */
@media (min-width:700px){
  .sec{padding:96px 28px 8px}
  .hero{padding:0 28px 110px;justify-content:center}
  .hero-txt{max-width:min(820px,62vw)}
  .hero-txt{margin-top:60px}
  .hero-dica{top:auto;bottom:40px;right:28px}
  .equipe{grid-template-columns:repeat(3,1fr)}
  .adv{grid-template-columns:1fr;row-gap:4px;padding:24px}
  .adv-ini{grid-row:auto;margin-bottom:12px}
  .glossario{grid-template-columns:repeat(2,1fr)}
  .metodo{grid-template-columns:repeat(4,1fr);gap:20px}
  .metodo::before{left:31px;right:0;top:31px;bottom:auto;height:1px;width:auto;background:repeating-linear-gradient(90deg,var(--latao) 0 6px,transparent 6px 12px)}
  .metodo li{flex-direction:column;gap:6px}
  .triagem{padding:28px}
  .tri-ops{grid-template-columns:repeat(2,1fr)}
  .tri-res{max-width:560px}
  .topo{padding-left:28px;padding-right:28px}
  .guia-cta{padding:40px}
  .guia-cta strong{font-size:2.4rem}
}
@media (min-width:1024px){
  body{padding-bottom:0}
  .abas-nav{left:auto;right:18px;top:50%;bottom:auto;transform:translateY(-50%);flex-direction:column;width:auto;padding:6px;border-radius:18px}
  .abas-nav a{min-height:44px;padding:0 16px;justify-content:start;place-items:center start;font-size:.8rem}
  .abas-nav a[aria-current]::before{top:50%;left:-3px;width:3px;height:18px;margin:-9px 0 0}
  .sec{padding-right:140px}
  .triagem-sec{display:grid;grid-template-columns:1fr 1.3fr;gap:48px;align-items:start}
  .triagem-sec .cab{position:sticky;top:120px}
  .glossario{grid-template-columns:repeat(3,1fr)}
  .busca-g,.g-cont,.glossario{padding-right:140px}
}
@media (min-width:1024px){.hero{padding-bottom:80px}.hero h1{font-size:clamp(5rem,7vw,7rem)}}
@media (min-width:1300px){.sec,.busca-g,.g-cont,.glossario{padding-right:28px}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .rev{opacity:1;transform:none}
  .js .metodo li.rev .selo-n{opacity:1;transform:rotate(-12deg)}
}