/* ===================================================================
   KIMBERLY CÉSAR — ADVOCACIA CRIMINAL
   Identidade: preto / off-white / dourado discreto · art-déco elegante
   =================================================================== */

:root{
  --black:      #0d0d0d;
  --ink:        #1a1a1a;
  --graphite:   #444444;
  --gray:       #6b6b6b;
  --line:       #e3ded6;
  --cream:      #f6f3ee;   /* off-white quente */
  --paper:      #ffffff;
  --gold:       #b89a5e;   /* dourado/champanhe discreto */
  --gold-soft:  #cbb784;

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Jost', 'Helvetica Neue', Arial, sans-serif;

  --maxw: 1180px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  font-family:var(--sans);
  font-weight:300;
  color:var(--ink);
  background:var(--cream);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px; }

/* ---------- Tipografia ---------- */
h1,h2,h3{ font-family:var(--serif); font-weight:500; line-height:1.12; letter-spacing:.01em; }
h1{ font-size:clamp(2.4rem,5.5vw,4.3rem); }
h2{ font-size:clamp(1.9rem,3.8vw,3rem); }
h3{ font-size:1.35rem; }

.eyebrow{
  font-family:var(--sans);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.34em;
  font-size:.72rem;
  color:var(--gold);
  margin-bottom:18px;
}
.eyebrow.light{ color:var(--gold-soft); }

.section{ padding:110px 0; }

.section-head{ max-width:620px; margin:0 auto 64px; text-align:center; }
.section-head.left{ margin-left:0; text-align:left; }
.section-head h2{ margin-bottom:14px; }
.section-lead{ color:var(--gray); font-size:1.05rem; }
.light{ color:var(--cream); }

/* ---------- Botões ---------- */
.btn{
  display:inline-block;
  font-family:var(--sans);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.78rem;
  padding:16px 34px;
  background:var(--black);
  color:var(--cream);
  border:1px solid var(--black);
  transition:all .35s var(--ease);
  cursor:pointer;
}
.btn:hover{ background:transparent; color:var(--black); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-ghost:hover{ background:var(--black); color:var(--cream); border-color:var(--black); }
.btn-sm{ padding:11px 24px; font-size:.72rem; }
.btn-block{ width:100%; text-align:center; }

/* On dark sections, ghost button adapts */
.diferenciais .btn, .contato .btn{ }

/* ===================================================================
   HEADER
   =================================================================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(246,243,238,0);
  transition:background .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease);
  padding:22px 0;
}
.site-header.scrolled{
  background:rgba(246,243,238,.96);
  backdrop-filter:blur(8px);
  box-shadow:0 1px 0 var(--line);
  padding:12px 0;
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; }

.brand{ display:flex; align-items:center; gap:13px; }
.brand-mark{ position:relative; width:44px; height:44px; display:block; flex:0 0 auto; }
.brand-mark img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transition:opacity .4s var(--ease); }
.brand-mark .mark-dark{ opacity:0; }          /* logo preta: só quando header claro */
.brand-mark .mark-light{ opacity:1; }          /* logo branca: sobre o hero escuro */
.site-header.scrolled .brand-mark .mark-dark{ opacity:1; }
.site-header.scrolled .brand-mark .mark-light{ opacity:0; }
.brand-text{ display:flex; flex-direction:column; line-height:1; }
.brand-name{ font-family:var(--serif); font-size:1.5rem; letter-spacing:.04em; color:var(--black); }
.brand-sub{ font-family:var(--sans); font-weight:300; font-size:.6rem; text-transform:uppercase; letter-spacing:.22em; color:var(--gray); margin-top:4px; }

/* hero state (transparent header over dark hero) */
.site-header:not(.scrolled) .brand-mark{ color:var(--cream); }
.site-header:not(.scrolled) .brand-name{ color:var(--cream); }
.site-header:not(.scrolled) .brand-sub{ color:rgba(246,243,238,.7); }
.site-header:not(.scrolled) .nav a{ color:rgba(246,243,238,.88); }
.site-header:not(.scrolled) .header-cta{ background:transparent; color:var(--cream); border-color:rgba(246,243,238,.6); }
.site-header:not(.scrolled) .header-cta:hover{ background:var(--cream); color:var(--black); }
.site-header:not(.scrolled) .nav-toggle span{ background:var(--cream); }

.nav{ display:flex; gap:34px; margin-left:auto; }
.nav a{
  font-size:.8rem; text-transform:uppercase; letter-spacing:.16em; color:var(--ink);
  position:relative; padding:4px 0; transition:color .3s;
}
.nav a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--gold); transition:width .3s var(--ease);
}
.nav a:hover{ color:var(--gold); }
.nav a:hover::after{ width:100%; }

.header-cta{ margin-left:8px; }

.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; }
.nav-toggle span{ width:26px; height:2px; background:var(--ink); transition:.3s; }

/* ===================================================================
   HERO
   =================================================================== */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center;
  background:
    linear-gradient(180deg, rgba(10,10,10,.55), rgba(10,10,10,.78)),
    radial-gradient(circle at 70% 30%, #2a2a2a, #0b0b0b 70%);
  color:var(--cream);
  overflow:hidden;
}
/* sutil textura art-déco em linhas */
.hero-overlay{
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(135deg, rgba(184,154,94,.05) 0 1px, transparent 1px 46px);
  pointer-events:none;
}
.hero-content{ position:relative; z-index:2; max-width:840px; padding-top:90px; padding-bottom:60px; }
.hero h1{ margin:6px 0 26px; color:var(--cream); }
.hero-lead{ font-size:1.15rem; font-weight:300; color:rgba(246,243,238,.82); max-width:600px; margin-bottom:38px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }
.hero .btn-ghost{ color:var(--cream); border-color:rgba(246,243,238,.55); }
.hero .btn-ghost:hover{ background:var(--cream); color:var(--black); border-color:var(--cream); }
.hero-note{ margin-top:34px; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-soft); }

/* ===================================================================
   FAIXA DE CONFIANÇA
   =================================================================== */
.trust{ background:var(--black); color:var(--cream); padding:50px 0; }
.trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center; }
.trust-item{ position:relative; padding:8px 14px; }
.trust-item + .trust-item::before{
  content:''; position:absolute; left:0; top:18%; height:64%; width:1px; background:rgba(255,255,255,.14);
}
.trust-num{ display:block; font-family:var(--serif); font-size:2.6rem; color:var(--gold-soft); line-height:1; margin-bottom:10px; }
.trust-label{ font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; color:rgba(246,243,238,.7); }

/* ===================================================================
   SOBRE
   =================================================================== */
.sobre{ background:var(--cream); }
.sobre-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:70px; align-items:center; }
.sobre-img{ position:relative; }
.advogada-foto{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:top center;
  border:1px solid var(--line);
  filter:grayscale(8%);
}
/* moldura art-déco discreta */
.sobre-img::after{
  content:'';
  position:absolute; left:18px; top:18px; right:-18px; bottom:-18px;
  border:1px solid var(--gold);
  z-index:-1;
}
.sobre-img .img-placeholder{
  aspect-ratio:4/5;
  background:var(--paper);
  border:1px solid var(--line);
  flex-direction:column; align-items:center; justify-content:center; gap:18px;
  color:var(--gray);
}
.sobre-img .img-placeholder img{ width:90px; opacity:.25; }
.sobre-img .img-placeholder span{ font-size:.8rem; text-transform:uppercase; letter-spacing:.16em; text-align:center; }
.sobre-text h2{ margin:6px 0 24px; }
.sobre-text p{ color:var(--graphite); margin-bottom:18px; }
.sobre-list{ list-style:none; margin:24px 0; }
.sobre-list li{ padding:10px 0 10px 28px; position:relative; border-bottom:1px solid var(--line); color:var(--ink); }
.sobre-list li::before{ content:'✦'; position:absolute; left:0; color:var(--gold); font-size:.85rem; top:11px; }
.oab-line{ margin-top:24px; font-family:var(--serif); font-style:italic; font-size:1.15rem; color:var(--black); }

/* ===================================================================
   ÁREAS
   =================================================================== */
.areas{ background:var(--paper); }
.areas-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.area-card{
  background:var(--paper); padding:38px 30px; transition:background .4s var(--ease), transform .4s var(--ease);
  position:relative;
}
.area-card::before{
  content:''; position:absolute; top:0; left:0; width:100%; height:2px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease);
}
.area-card:hover{ background:var(--cream); }
.area-card:hover::before{ transform:scaleX(1); }
.area-card h3{ margin-bottom:12px; font-size:1.25rem; }
.area-card p{ color:var(--gray); font-size:.92rem; }

/* ===================================================================
   DIFERENCIAIS (dark)
   =================================================================== */
.diferenciais{ background:var(--black); color:var(--cream); }
.dif-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:40px; }
.dif-item{ text-align:left; }
.dif-icon{ display:block; font-size:1.4rem; color:var(--gold-soft); margin-bottom:18px; }
.dif-item h3{ color:var(--cream); margin-bottom:12px; font-size:1.25rem; }
.dif-item p{ color:rgba(246,243,238,.66); font-size:.92rem; }

/* ===================================================================
   PASSOS
   =================================================================== */
.passos{ background:var(--cream); }
.passos-grid{ list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:36px; counter-reset:p; }
.passos-grid li{ position:relative; padding-top:24px; }
.passo-num{ font-family:var(--serif); font-size:2.6rem; color:var(--gold); display:block; margin-bottom:10px; line-height:1; }
.passos-grid h3{ margin-bottom:10px; font-size:1.2rem; }
.passos-grid p{ color:var(--graphite); font-size:.92rem; }

/* ===================================================================
   FAQ
   =================================================================== */
.faq{ background:var(--paper); }
.faq-wrap{ display:grid; grid-template-columns:0.7fr 1.3fr; gap:60px; align-items:start; }
.faq-list details{ border-bottom:1px solid var(--line); padding:6px 0; }
.faq-list summary{
  cursor:pointer; list-style:none; padding:20px 40px 20px 0; position:relative;
  font-family:var(--serif); font-size:1.3rem; color:var(--ink); transition:color .3s;
}
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary::after{
  content:'+'; position:absolute; right:0; top:18px; font-family:var(--sans); font-weight:300; font-size:1.6rem; color:var(--gold); transition:transform .3s;
}
.faq-list details[open] summary::after{ transform:rotate(45deg); }
.faq-list summary:hover{ color:var(--gold); }
.faq-list details p{ padding:0 40px 22px 0; color:var(--graphite); font-size:.96rem; }

/* ===================================================================
   CONTATO (dark)
   =================================================================== */
.contato{ background:var(--black); color:var(--cream); }
.contato-grid{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:start; }
.contato-info h2{ margin:6px 0 20px; }
.contato-lead{ color:rgba(246,243,238,.72); margin-bottom:40px; max-width:440px; }
.contato-list{ list-style:none; }
.contato-list li{ padding:18px 0; border-top:1px solid rgba(255,255,255,.12); display:flex; flex-direction:column; gap:4px; }
.contato-list li:last-child{ border-bottom:1px solid rgba(255,255,255,.12); }
.ci-label{ font-size:.7rem; text-transform:uppercase; letter-spacing:.2em; color:var(--gold-soft); }
.contato-list a, .contato-list span:not(.ci-label){ font-family:var(--serif); font-size:1.35rem; color:var(--cream); transition:color .3s; }
.contato-list a:hover{ color:var(--gold-soft); }

.contato-form{ background:var(--cream); color:var(--ink); padding:44px; }
.contato-form h3{ margin-bottom:24px; font-size:1.5rem; }
.contato-form label{ display:block; font-size:.74rem; text-transform:uppercase; letter-spacing:.16em; color:var(--gray); margin-bottom:18px; }
.contato-form input, .contato-form textarea{
  width:100%; margin-top:8px; padding:13px 14px; border:1px solid var(--line); background:var(--paper);
  font-family:var(--sans); font-weight:300; font-size:.95rem; color:var(--ink); text-transform:none; letter-spacing:normal;
  transition:border-color .3s;
}
.contato-form input:focus, .contato-form textarea:focus{ outline:none; border-color:var(--gold); }
.contato-form textarea{ resize:vertical; }
.form-note{ font-size:.74rem; color:var(--gray); margin-top:14px; text-transform:none; letter-spacing:normal; }

/* ===================================================================
   FOOTER
   =================================================================== */
.site-footer{ background:#080808; color:rgba(246,243,238,.6); padding:64px 0 30px; text-align:center; }
.footer-logo{ width:230px; max-width:62vw; margin:0 auto 30px; opacity:.92; }
.footer-oab{ font-size:.85rem; color:rgba(246,243,238,.8); margin-bottom:18px; letter-spacing:.04em; }
.footer-disclaimer{ max-width:680px; margin:0 auto 26px; font-size:.76rem; line-height:1.7; color:rgba(246,243,238,.42); }
.footer-copy{ font-size:.74rem; color:rgba(246,243,238,.4); border-top:1px solid rgba(255,255,255,.08); padding-top:22px; }

/* ===================================================================
   WHATSAPP FLUTUANTE
   =================================================================== */
.whats-float{
  position:fixed; right:22px; bottom:22px; z-index:90;
  width:58px; height:58px; border-radius:50%;
  background:var(--black); color:var(--cream);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.28);
  transition:transform .3s var(--ease), background .3s;
}
.whats-float:hover{ transform:translateY(-4px) scale(1.05); background:var(--gold); }

/* ===================================================================
   REVELAÇÃO ON-SCROLL
   =================================================================== */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ===================================================================
   RESPONSIVO
   =================================================================== */
@media (max-width:980px){
  .trust-grid, .areas-grid, .dif-grid, .passos-grid{ grid-template-columns:repeat(2,1fr); }
  .trust-item + .trust-item:nth-child(odd)::before{ display:none; }
  .sobre-grid, .faq-wrap, .contato-grid{ grid-template-columns:1fr; gap:46px; }
  .section{ padding:84px 0; }
  .dif-grid{ gap:30px; }
}

@media (max-width:760px){
  .brand-mark{ width:36px; height:36px; }
  .brand-name{ font-size:1.2rem; }
  .brand-sub{ font-size:.52rem; letter-spacing:.16em; white-space:nowrap; }
  .nav{
    position:fixed; inset:0 0 0 auto; width:78%; max-width:330px;
    background:var(--cream); flex-direction:column; gap:0; padding:100px 34px;
    transform:translateX(100%); transition:transform .4s var(--ease); margin:0;
    box-shadow:-10px 0 40px rgba(0,0,0,.15); z-index:99;
  }
  .nav.open{ transform:translateX(0); }
  .nav a{ color:var(--ink)!important; padding:16px 0; border-bottom:1px solid var(--line); width:100%; }
  .nav-toggle{ display:flex; z-index:101; }
  .header-cta{ display:none; }
  .nav-toggle.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle.active span:nth-child(2){ opacity:0; }
  .nav-toggle.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .nav-toggle.active span{ background:var(--ink)!important; }
}

@media (max-width:560px){
  .trust-grid, .areas-grid, .dif-grid, .passos-grid{ grid-template-columns:1fr; }
  .trust-item + .trust-item::before{ display:none; }
  .contato-form{ padding:30px 22px; }
  .hero-actions{ flex-direction:column; }
  .hero-actions .btn{ text-align:center; }
}

/* ===================================================================
   PÁGINAS DE CONTEÚDO (habeas corpus, júri, etc.)
   =================================================================== */
.page-hero{
  position:relative;
  background:
    linear-gradient(180deg, rgba(10,10,10,.62), rgba(10,10,10,.82)),
    radial-gradient(circle at 72% 28%, #2a2a2a, #0b0b0b 70%);
  color:var(--cream);
  padding:170px 0 90px;
  overflow:hidden;
}
.page-hero::after{
  content:''; position:absolute; inset:0;
  background-image:repeating-linear-gradient(135deg, rgba(184,154,94,.05) 0 1px, transparent 1px 46px);
  pointer-events:none;
}
.page-hero .container{ position:relative; z-index:2; max-width:840px; }
.breadcrumb{ font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:18px; }
.breadcrumb a{ color:rgba(246,243,238,.7); }
.breadcrumb a:hover{ color:var(--gold-soft); }
.page-hero h1{ color:var(--cream); font-size:clamp(2.1rem,4.6vw,3.4rem); margin-bottom:20px; }
.page-hero .lead{ font-size:1.12rem; color:rgba(246,243,238,.84); max-width:640px; }

.article{ background:var(--cream); padding:84px 0; }
.article .container{ max-width:760px; }
.article h2{ font-size:1.9rem; margin:46px 0 16px; }
.article h2:first-child{ margin-top:0; }
.article h3{ font-size:1.3rem; margin:30px 0 10px; }
.article p{ color:var(--graphite); margin-bottom:18px; font-size:1.04rem; }
.article ul{ list-style:none; margin:8px 0 24px; }
.article ul li{ position:relative; padding:8px 0 8px 26px; color:var(--ink); border-bottom:1px solid var(--line); }
.article ul li::before{ content:'✦'; position:absolute; left:0; top:9px; color:var(--gold); font-size:.82rem; }
.article strong{ color:var(--ink); }

.cta-box{
  background:var(--black); color:var(--cream);
  padding:40px 38px; margin:50px 0; text-align:center;
}
.cta-box h3{ color:var(--cream); font-size:1.7rem; margin-bottom:12px; }
.cta-box p{ color:rgba(246,243,238,.74); margin-bottom:26px; }

.related{ background:var(--paper); padding:70px 0; border-top:1px solid var(--line); }
.related .container{ max-width:980px; }
.related h2{ text-align:center; font-size:1.7rem; margin-bottom:36px; }
.related-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.related-card{ background:var(--paper); padding:30px 26px; transition:background .35s var(--ease); }
.related-card:hover{ background:var(--cream); }
.related-card span{ font-size:.7rem; text-transform:uppercase; letter-spacing:.2em; color:var(--gold); }
.related-card h3{ font-size:1.2rem; margin:10px 0 8px; }
.related-card p{ color:var(--gray); font-size:.9rem; }

@media (max-width:760px){
  .page-hero{ padding:130px 0 70px; }
  .article{ padding:60px 0; }
  .related-grid{ grid-template-columns:1fr; }
}

/* Cards de área que são links + linha de áreas extras */
.area-link{ display:block; cursor:pointer; }
.area-more{
  display:inline-block; margin-top:14px;
  font-family:var(--sans); font-size:.72rem; text-transform:uppercase; letter-spacing:.18em;
  color:var(--gold); opacity:0; transform:translateX(-6px);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.area-link:hover .area-more{ opacity:1; transform:none; }
.areas-extra{ text-align:center; margin-top:46px; color:var(--gray); font-size:1.05rem; }
.areas-extra a{ color:var(--gold); border-bottom:1px solid transparent; transition:border-color .3s; }
.areas-extra a:hover{ border-color:var(--gold); }

/* ===================================================================
   OUTRAS ÁREAS — Cível e Família (home)
   =================================================================== */
.outras-areas{ background:var(--cream); }
.outras-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px; max-width:900px; margin:0 auto; }
.outra-card{
  display:block; background:var(--paper); border:1px solid var(--line);
  padding:46px 42px; position:relative; overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.outra-card::before{
  content:''; position:absolute; top:0; left:0; width:100%; height:2px;
  background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease);
}
.outra-card:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(0,0,0,.08); }
.outra-card:hover::before{ transform:scaleX(1); }
.outra-tag{
  display:inline-block; font-family:var(--sans); font-size:.68rem; text-transform:uppercase;
  letter-spacing:.22em; color:var(--gold); margin-bottom:14px;
}
.outra-card h3{ font-size:1.55rem; margin-bottom:12px; }
.outra-card p{ color:var(--gray); font-size:.96rem; }

@media (max-width:760px){
  .outras-grid{ grid-template-columns:1fr; gap:18px; }
  .outra-card{ padding:34px 28px; }
}

/* Linha discreta de áreas atendidas (SEO local) no rodapé */
.footer-areas{
  max-width:720px; margin:0 auto 22px;
  font-size:.72rem; line-height:1.7; color:rgba(246,243,238,.34);
  letter-spacing:.02em;
}