/* Tiago Vargas — Escritório Jurídico Trabalhista
   Marca: Tinta #1A1614 · Bordô #6B2737 · Pergaminho #F2EDE4 · texto sempre Jura (Luxena só no logo/PNG) */

@font-face{
  font-family:'Jura';
  src:url('Jura-VariableFont_wght.ttf') format('truetype');
  font-weight:300 700;
  font-display:swap;
}

:root{
  --tinta:#1A1614;
  --tinta-alt:#231D1A;
  --bordo:#6B2737;
  --bordo-escuro:#571F2C;
  --pergaminho:#F2EDE4;
  --card:#FBF8F2;
  --muted:#6A6058;
  --border:#E0D7C9;
  --claro-sec:#CFC5B7; /* texto secundário sobre tinta */
  --w:1120px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1 !important;transform:none !important;transition:none !important}
}

body{
  font-family:'Jura',system-ui,sans-serif;
  background:var(--pergaminho);
  color:var(--tinta);
  line-height:1.7;
  font-size:16.5px;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{color:var(--bordo);text-decoration:none}
p a{text-decoration:underline;text-underline-offset:3px}

.wrap{max-width:var(--w);margin:0 auto;padding:0 24px}

/* ---------- header ---------- */
.top{
  position:sticky;top:0;z-index:50;
  background:rgba(242,237,228,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.top .bar{display:flex;align-items:center;gap:28px;height:64px}
.top .logo img{height:26px;width:auto}
.top nav{display:flex;gap:clamp(12px,2vw,26px);margin-left:auto;align-items:center}
.top nav a{
  color:var(--tinta);font-size:.82rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
}
@media (max-width:980px) and (min-width:761px){
  .top nav a{font-size:.72rem}
}
.top nav a:hover{color:var(--bordo)}
.btn-top{
  background:var(--bordo);color:var(--pergaminho) !important;
  padding:10px 18px;border-radius:2px;letter-spacing:.06em;
}
.btn-top:hover{background:var(--bordo-escuro);color:var(--pergaminho) !important}
.menu-toggle{display:none}
.burger{display:none}

/* ---------- botões ---------- */
.btn{
  display:inline-block;font-family:inherit;font-weight:600;
  font-size:.9rem;letter-spacing:.05em;
  padding:15px 26px;border-radius:2px;border:1px solid transparent;
  cursor:pointer;text-align:center;
}
.btn-solid{background:var(--bordo);color:var(--pergaminho)}
.btn-solid:hover{background:var(--bordo-escuro)}
.btn-ghost{border-color:var(--claro-sec);color:var(--pergaminho)}
.btn-ghost:hover{border-color:var(--pergaminho)}
.btn-ghost-dark{border-color:var(--tinta);color:var(--tinta)}
.btn-ghost-dark:hover{background:var(--tinta);color:var(--pergaminho)}

/* ---------- tipografia de seção ---------- */
.eyebrow{
  font-size:.72rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--bordo);margin-bottom:18px;
}
.dark .eyebrow{color:#B98A96}
h1,h2,h3{font-weight:600;line-height:1.25}
h2{font-size:clamp(1.5rem,3.2vw,2.1rem);margin-bottom:22px;max-width:21em}
h3{font-size:1.05rem;font-weight:700}
.lead{font-size:1.05rem;max-width:46em}

/* ---------- hero ---------- */
.dark{background:var(--tinta);color:var(--pergaminho)}
.dark p{color:var(--claro-sec)}
.hero{padding:88px 0 72px}
.hero h1{
  font-size:clamp(1.65rem,4vw,2.7rem);
  font-weight:600;max-width:21em;color:var(--pergaminho);
}
.hero h1 .fim{color:#8f8478}
.hero h1 .comeco{
  color:var(--pergaminho);
  border-bottom:3px solid var(--bordo);
  padding-bottom:2px;
}
.hero .sub{margin-top:26px;font-size:1rem;max-width:44em}
.hero .ctas{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap}

/* faixa dos riscos silenciosos */
.sinais{border-top:1px solid #332B26;padding:26px 0 30px}
.sinais .lbl{
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:#8f8478;margin-bottom:14px;font-weight:700;
}
.sinais ul{
  list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;
  font-size:.85rem;color:var(--claro-sec);
}
.sinais li{display:flex;align-items:center;gap:9px}
.sinais li::before{content:'';width:7px;height:7px;background:var(--bordo);flex:none}

/* ---------- seções claras ---------- */
.sec{padding:84px 0}
.sec + .sec{border-top:1px solid var(--border)}
.duo{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:start}
.duo .fixo{position:sticky;top:96px}
.statement{
  font-size:clamp(1.35rem,2.6vw,1.8rem);font-weight:600;line-height:1.35;
}
.statement em{font-style:normal;color:var(--bordo)}
.prosa p + p{margin-top:18px}
.prosa strong{font-weight:700}

.oneliner{
  margin-top:46px;padding:34px 38px;background:var(--card);
  border:1px solid var(--border);border-left:4px solid var(--bordo);
  font-size:clamp(1.15rem,2.2vw,1.5rem);font-weight:600;line-height:1.4;
}

/* ---------- método (linha do acúmulo) ---------- */
.metodo-head{max-width:46em;margin-bottom:56px}
.estagios{list-style:none;position:relative;max-width:820px}
.estagios::before{
  content:'';position:absolute;left:27px;top:10px;bottom:10px;
  width:2px;background:var(--bordo);opacity:.35;
}
.estagios li{
  position:relative;padding:0 0 48px 92px;
}
.estagios li:last-child{padding-bottom:0}
.estagios .num{
  position:absolute;left:0;top:-4px;
  width:56px;height:56px;border-radius:50%;
  background:var(--pergaminho);border:2px solid var(--bordo);
  color:var(--bordo);font-weight:700;font-size:1.15rem;
  display:flex;align-items:center;justify-content:center;
}
.estagios h3{font-size:1.15rem;margin-bottom:10px}
.estagios .nota{
  margin-top:12px;font-size:.85rem;color:var(--muted);
  border-left:2px solid var(--border);padding-left:14px;
}
.logica{
  margin-top:54px;padding:26px 30px;background:var(--card);
  border:1px solid var(--border);font-size:.95rem;max-width:820px;
}
.logica b{color:var(--bordo)}

/* ---------- serviços (6 pilares) ---------- */
.pilares{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:48px}
.pilar{
  background:var(--card);border:1px solid var(--border);border-radius:2px;
}
.pilar summary{
  list-style:none;cursor:pointer;padding:24px 26px;
  display:flex;gap:18px;align-items:baseline;
}
.pilar summary::-webkit-details-marker{display:none}
.pilar summary:focus-visible{outline:2px solid var(--bordo);outline-offset:2px}
.pilar .rom{
  font-weight:700;color:var(--bordo);font-size:.9rem;flex:none;width:24px;
}
.pilar h3{font-size:1rem}
.pilar .tese{font-size:.85rem;color:var(--muted);margin-top:6px;font-weight:500}
.pilar .abre{
  margin-left:auto;flex:none;color:var(--bordo);font-weight:700;
  transition:transform .2s;
}
.pilar[open] .abre{transform:rotate(45deg)}
.pilar .itens{padding:0 26px 24px;border-top:1px solid var(--border)}
.pilar .itens ul{list-style:none;margin-top:18px}
.pilar .itens li + li{margin-top:16px}
.pilar .itens b{display:block;font-size:.92rem}
.pilar .itens p{font-size:.88rem;margin-top:2px}
.pilar .lei{
  display:block;font-size:.75rem;color:var(--muted);margin-top:4px;
  letter-spacing:.02em;
}

/* ---------- faixa escura "a conta que fecha" ---------- */
.conta{padding:84px 0}
.conta .statement{color:var(--pergaminho);max-width:24em}
.conta .statement em{color:#B98A96;border-bottom:3px solid var(--bordo)}
.conta .prosa{margin-top:30px;max-width:46em}

/* ---------- diferenciais ---------- */
.difs{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:48px}
.dif{
  background:var(--card);border:1px solid var(--border);padding:28px;
}
.dif.destaque{
  grid-column:1 / -1;background:var(--tinta);color:var(--pergaminho);
  border-color:var(--tinta);display:grid;grid-template-columns:auto 1fr;gap:28px;
  align-items:center;
}
.dif.destaque img{height:74px;width:auto}
.dif.destaque p{color:var(--claro-sec)}
.dif h3{margin-bottom:10px;font-size:.98rem}
.dif p{font-size:.92rem}

/* ---------- CTA final ---------- */
.fim-sec{padding:96px 0;text-align:center}
.fim-sec h2{max-width:26em;margin:0 auto 20px;font-size:clamp(1.5rem,3.4vw,2.2rem)}
.fim-sec .lead{margin:0 auto}
.fim-sec .ctas{display:flex;gap:14px;justify-content:center;margin-top:38px;flex-wrap:wrap}
.fim-sec .ps{margin-top:16px;font-size:.82rem;color:var(--muted)}

/* ---------- footer ---------- */
footer{background:var(--tinta);color:var(--claro-sec);padding:64px 0 40px}
footer .grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px;
  padding-bottom:44px;border-bottom:1px solid #332B26;
}
footer .logo img{height:30px;width:auto;margin-bottom:22px}
footer .manifesto{font-size:.88rem;max-width:34em}
footer h4{
  color:var(--pergaminho);font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;margin-bottom:16px;
}
footer ul{list-style:none;font-size:.88rem}
footer li + li{margin-top:10px}
footer a{color:var(--claro-sec)}
footer a:hover{color:var(--pergaminho)}
footer .legal{
  display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:28px;
  font-size:.76rem;color:#8f8478;
}

/* ---------- artigos ---------- */
.art-hero{padding:84px 0 64px}
.art-vazio{
  margin-top:8px;background:var(--card);border:1px solid var(--border);
  border-left:4px solid var(--bordo);padding:38px;max-width:640px;
}
.art-vazio h3{margin-bottom:12px}
.art-vazio p{font-size:.95rem}
.art-vazio .btn{margin-top:24px}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.rv.on{opacity:1;transform:none}

/* ---------- responsivo ---------- */
@media (max-width:900px){
  .duo{grid-template-columns:1fr;gap:28px}
  .duo .fixo{position:static}
  .pilares,.difs{grid-template-columns:1fr}
  .dif.destaque{grid-template-columns:1fr;gap:18px}
  footer .grid{grid-template-columns:1fr;gap:36px}
}
@media (max-width:760px){
  .top nav{
    display:none;position:absolute;top:64px;left:0;right:0;
    background:var(--pergaminho);border-bottom:1px solid var(--border);
    flex-direction:column;align-items:flex-start;padding:18px 24px;gap:16px;
  }
  .menu-toggle:checked ~ nav{display:flex}
  .burger{
    display:flex;flex-direction:column;gap:5px;margin-left:auto;
    cursor:pointer;padding:8px;
  }
  .burger span{width:22px;height:2px;background:var(--tinta)}
  .hero{padding:64px 0 52px}
  .sec{padding:60px 0}
  .estagios li{padding-left:74px}
  .estagios .num{width:46px;height:46px;font-size:1rem}
  .estagios::before{left:22px}
}