/* =========================================================
   Silva & Moreira — identidade: vermelho institucional + grafite
   Layout inspirado na referência (hero escuro, foto recortada,
   letra capital cursiva, papel rasgado)
   ========================================================= */

/* Fontes hospedadas localmente (só subset latin — PT-BR não precisa
   de cirílico/grego/vietnamita que o Google Fonts manda por padrão) */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('../fonts/inter-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Playfair Display';
  font-style:normal;
  font-weight:700 800;
  font-display:swap;
  src:url('../fonts/playfair-display-700-800-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Playfair Display';
  font-style:italic;
  font-weight:700;
  font-display:swap;
  src:url('../fonts/playfair-display-italic700-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Pinyon Script';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/pinyon-script-latin.woff2') format('woff2');
}

:root{
  --vermelho:        #9E1B1E;
  --vermelho-escuro: #6E1114;
  --vermelho-vivo:   #C0272B;
  --vermelho-claro:  #ffe5e6;
  --preto:           #121212;
  --grafite:         #1a1a1a;
  --off:             #f6f4f1;
  --texto:           #2c2c2c;
  --texto-suave:     #6b6b6b;
  --borda:           #e7e2dc;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter',system-ui,sans-serif;
  color:var(--texto);
  background:#fff;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
.container{max-width:1160px;margin:0 auto;padding:0 24px;}

h1,h2,h3{font-family:'Playfair Display',serif;line-height:1.15;}
section{padding:88px 0;}

/* ---------- Barra de urgência (topo) ---------- */
.barra-urgencia{
  background:linear-gradient(180deg,var(--vermelho) 0%,var(--vermelho-escuro) 100%);
  color:#fff;
  text-align:center;
  padding:10px 16px;
  font-size:.95rem;
  letter-spacing:.02em;
  border-bottom:1px solid rgba(255,255,255,.15);
}
.barra-urgencia strong{
  font-weight:800;
  text-transform:uppercase;
  font-size:.9rem;
  letter-spacing:.06em;
}
.icone-alerta{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;margin-right:8px;
  border:1.5px solid rgba(255,255,255,.7);
  border-radius:50%;
  font-size:.8rem;vertical-align:-4px;
}

/* ---------- Header sobre o hero ---------- */
.header{
  position:absolute;top:0;left:0;right:0;z-index:5;
  padding:18px 0;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;}
.header-logo img{height:52px;width:auto;}
.nav{display:flex;align-items:center;gap:28px;}
.nav a{
  color:#e9e4de;font-size:.92rem;font-weight:500;
  transition:color .2s;
}
.nav a:hover{color:#fff;}
.nav .nav-cta{
  background:var(--vermelho);
  color:#fff;padding:10px 22px;border-radius:6px;font-weight:600;
  transition:background .2s;
}
.nav .nav-cta:hover{background:var(--vermelho-vivo);}

/* ---------- Hero escuro ---------- */
.hero-v2{
  position:relative;
  background:
    radial-gradient(900px 520px at 78% 30%, rgba(158,27,30,.22), transparent 65%),
    radial-gradient(700px 460px at 12% 85%, rgba(158,27,30,.10), transparent 60%),
    linear-gradient(160deg,#1c1a19 0%,#111010 55%,#171313 100%);
  color:#fff;
  padding:0;
  overflow:hidden;
}
/* textura sutil (balança da justiça abstraída em linhas) */
.hero-v2::before{
  content:"";
  position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,.025) 0 1px, transparent 1px 90px);
  pointer-events:none;
}
.hero-v2-inner{
  position:relative;
  min-height:820px;
  padding-top:130px;
  display:flex;
  align-items:center;
}
.hero-v2-text{
  position:relative;
  z-index:6;              /* texto passa POR CIMA da foto */
  max-width:520px;
  padding:0 0 60px;
}

.hero-badge{
  display:inline-flex;align-items:center;gap:14px;
  margin-bottom:34px;
}
.hero-badge img{height:46px;width:auto;}
.hero-badge span{
  font-weight:800;letter-spacing:.14em;font-size:.95rem;color:#fff;
  line-height:1.35;
}
.hero-badge small{
  display:block;font-weight:500;font-size:.62rem;letter-spacing:.32em;
  color:#b9b2ab;
}

.hero-v2 h1{
  font-size:clamp(2.5rem,5vw,4.3rem);
  font-weight:800;
  margin-bottom:22px;
  max-width:680px;
}
.hero-v2 h1 .capital{
  font-family:'Pinyon Script',cursive;
  font-weight:400;
  font-size:1.55em;
  line-height:0;
  margin-right:2px;
  color:#fff;
}
.hero-v2 h1 em{
  font-style:italic;
  color:var(--vermelho-claro);
}

.hero-sub{
  font-size:1.08rem;
  color:#c9c3bc;
  max-width:520px;
  margin-bottom:40px;
}
.hero-sub strong{color:#fff;font-weight:700;}
.hero-sub .destaque{color:#a9a29a;}

.hero-cta-row{
  display:flex;align-items:center;gap:34px;flex-wrap:wrap;
}
.btn{
  display:inline-block;
  padding:16px 30px;
  border-radius:8px;
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.04em;
  transition:transform .15s,box-shadow .15s,background .2s;
}
.btn-hero{
  background:linear-gradient(180deg,var(--vermelho-vivo) 0%,var(--vermelho) 55%,var(--vermelho-escuro) 100%);
  color:#fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 4px 0 var(--vermelho-escuro),
    0 14px 28px rgba(158,27,30,.35);
}
.btn-hero:hover{transform:translateY(-2px);}
.btn-hero:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 0 var(--vermelho-escuro);}

.hero-checklist{list-style:none;}
.hero-checklist li{
  position:relative;
  padding-left:30px;
  color:#d6d0c9;
  font-size:.95rem;
  margin-bottom:8px;
}
.hero-checklist li strong{color:#fff;}
.hero-checklist li::before{
  content:"✓";
  position:absolute;left:0;top:0;
  color:var(--vermelho-vivo);
  font-weight:800;
  font-size:1.05rem;
}

/* ---- Figura da equipe: recorte sem fundo, à direita ---- */
.hero-figura{
  position:absolute;
  z-index:5;              /* acima do rasgo (4), abaixo do texto (6) */
  top:50%;
  transform:translateY(-50%);
  /* right é relativo ao .container (1160px): negativo = avança na calha.
     clamp segura o avanço entre 20px e 340px conforme a tela. */
  right:calc(-1 * clamp(20px, (100vw - 1160px)/2 - 30px, 340px));
  width:min(50vw,940px);
  margin-top:26px;        /* compensa o header, centraliza no espaço útil */
}
.hero-figura img{
  position:relative;
  z-index:2;
  width:100%;
  height:auto;
  /* fade curtíssimo só pra tirar o corte reto — ninguém some */
  -webkit-mask-image:linear-gradient(180deg,#000 95%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 95%,transparent 100%);
  filter:drop-shadow(0 30px 55px rgba(0,0,0,.6));
}
/* halo vermelho: dá peso ao recorte para ele não flutuar solto no escuro */
.hero-halo{
  position:absolute;
  z-index:0;
  left:50%;bottom:-16%;
  transform:translateX(-50%);
  width:min(92%,800px);
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle at 50% 46%,
    rgba(192,39,43,.40) 0%,
    rgba(158,27,30,.16) 46%,
    transparent 72%);
  pointer-events:none;
}
/* anel fino que passa por trás do grupo — detalhe editorial */
.hero-anel{
  position:absolute;
  z-index:1;
  left:50%;bottom:-8%;
  transform:translateX(-50%);
  width:min(74%,640px);
  aspect-ratio:1;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  pointer-events:none;
}
/* marca d'água — balança da justiça atrás do texto, à esquerda */
.hero-marca-dagua{
  position:absolute;
  left:-30px;top:150px;
  width:380px;height:auto;
  color:rgba(255,255,255,.055);
  pointer-events:none;
  z-index:1;
}

/* papel rasgado */
.rasgo{
  position:absolute;bottom:-1px;left:0;
  width:100%;height:70px;display:block;z-index:4;
}
.rasgo path{fill:#fff;}

/* ---------- Seções internas ---------- */
.section-head{max-width:640px;margin-bottom:48px;}
.eyebrow{
  text-transform:uppercase;letter-spacing:.22em;font-size:.75rem;
  font-weight:700;color:var(--vermelho);margin-bottom:12px;
}
.regua{width:56px;height:3px;background:var(--vermelho);margin-bottom:18px;}
.section-head h2{font-size:clamp(1.7rem,3vw,2.4rem);color:var(--grafite);margin-bottom:14px;}
.section-head p{color:var(--texto-suave);}

.section-cinza{background:var(--off);}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;}

.card{
  position:relative;
  overflow:hidden;
  display:flex;flex-direction:column;
  background:#fff;
  border:1px solid var(--borda);
  border-top:3px solid var(--vermelho);
  border-radius:10px;
  padding:34px 28px 28px;
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(18,18,18,.10);
  border-color:#d9d2ca;
}
/* número vira marca d'água, libera o topo pro título */
.card .numero{
  position:absolute;top:10px;right:22px;
  font-family:'Playfair Display',serif;
  font-size:3.6rem;font-weight:800;
  color:rgba(158,27,30,.09);
  line-height:1;letter-spacing:0;
  pointer-events:none;
  transition:color .2s;
}
.card:hover .numero{color:rgba(158,27,30,.16);}
.card h3{font-size:1.2rem;color:var(--grafite);margin-bottom:10px;padding-right:52px;}
.card p{color:var(--texto-suave);font-size:.95rem;margin-bottom:18px;}
.saiba-mais{
  margin-top:auto;                /* alinha o link na base, cards ficam parelhos */
  color:var(--vermelho);font-weight:600;font-size:.9rem;
  transition:color .2s;
}
.saiba-mais:hover{color:var(--vermelho-escuro);}

.lista-check{list-style:none;}
.lista-check li{
  position:relative;padding-left:34px;margin-bottom:16px;color:var(--texto);
}
/* lista de compromissos em duas colunas, sem virar parede de texto */
.lista-check-2col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px 48px;
}
.lista-check-2col li{
  margin-bottom:0;
  padding:18px 20px 18px 52px;
  background:#fff;
  border:1px solid var(--borda);
  border-radius:10px;
  font-size:.98rem;
}
.lista-check-2col li::before{left:18px;top:18px;}
.lista-check li::before{
  content:"✓";
  position:absolute;left:0;top:-1px;
  width:22px;height:22px;
  background:var(--vermelho-claro);
  color:var(--vermelho);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;font-weight:800;
}

/* equipe */
.membro-foto{
  position:relative;
  aspect-ratio:4/5;
  background:var(--off);
  border:1px dashed var(--borda);
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  text-align:center;color:var(--texto-suave);font-size:.9rem;
  overflow:hidden;margin-bottom:18px;
}
.membro-foto:has(img){
  box-shadow:0 16px 36px rgba(18,18,18,.12);
}
.membro-foto:has(img) img{transition:transform .5s ease;}
.membro:hover .membro-foto:has(img) img{transform:scale(1.04);}
/* leve escurecida na base pra dar profundidade ao retrato */
.membro-foto:has(img)::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 62%,rgba(18,18,18,.28) 100%);
  pointer-events:none;
}
.membro-foto-escura{
  background:var(--grafite);
  border:none;padding:0;
}
.membro-foto-escura img{height:100%;width:auto;object-fit:contain;margin:0 auto;}
.membro-foto:has(img):not(.membro-foto-escura){border:none;padding:0;}
.membro-foto:has(img):not(.membro-foto-escura) img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 78%;   /* retratos sentados: puxa o corte pro rosto */
}
/* Retrato em pé: o rosto já fica no terço superior, então o corte dos
   sentados cortaria a cabeça. Mesma especificidade da regra acima —
   precisa vir depois pra vencer. */
.membro-foto.membro-foto-pe:has(img) img{object-position:center 25%;}
.membro h3{font-size:1.25rem;color:var(--grafite);}
.membro .cargo{
  color:var(--vermelho);font-weight:600;font-size:.85rem;
  text-transform:uppercase;letter-spacing:.08em;margin:4px 0 10px;
}
.membro p{color:var(--texto-suave);font-size:.95rem;}

.btn-secundario{
  border:2px solid var(--vermelho);
  color:var(--vermelho);
  background:transparent;
}
.btn-secundario:hover{background:var(--vermelho);color:#fff;}

/* CTA final */
.cta-final{
  background:
    radial-gradient(700px 300px at 50% 0%, rgba(255,229,230,.12), transparent 70%),
    linear-gradient(180deg,var(--vermelho) 0%,var(--vermelho-escuro) 100%);
  color:#fff;text-align:center;
}
.cta-final h2{font-size:clamp(1.7rem,3vw,2.3rem);margin-bottom:14px;}
.cta-final p{color:var(--vermelho-claro);max-width:480px;margin:0 auto 32px;}
.btn-sobre-escuro{
  background:#fff;color:var(--vermelho);
  box-shadow:0 10px 26px rgba(0,0,0,.25);
}
.btn-sobre-escuro:hover{transform:translateY(-2px);}

/* Footer */
.footer{background:var(--preto);color:#fff;padding:64px 0 0;}
.footer h4{
  font-family:'Inter',sans-serif;font-size:.85rem;
  text-transform:uppercase;letter-spacing:.14em;
  color:var(--vermelho-claro);margin-bottom:16px;
}
.footer-grid{
  display:grid;grid-template-columns:1.5fr 1fr 1.2fr 1.2fr;gap:40px;
  padding-bottom:48px;
}
.footer-grid a{display:block;color:#cfcfcf;font-size:.92rem;margin-bottom:10px;transition:color .2s;}
.footer-grid a:hover{color:#fff;}
.footer-desc{color:#cfcfcf;max-width:320px;font-size:.92rem;}
.footer-aviso{
  border-top:1px solid rgba(255,255,255,.12);
  padding:22px 0 28px;
  font-size:.8rem;color:#9a9a9a;
}

/* ---------- Páginas internas ---------- */
.header-interna{
  position:relative;
  background:linear-gradient(160deg,#1c1a19 0%,#111010 100%);
}

.pagina-header{
  background:
    radial-gradient(700px 380px at 80% 20%, rgba(158,27,30,.20), transparent 65%),
    linear-gradient(160deg,#1c1a19 0%,#111010 60%,#171313 100%);
  color:#fff;
  padding:72px 0 64px;
}
.pagina-header .eyebrow{color:var(--vermelho-claro);}
.pagina-header h1{
  font-size:clamp(1.9rem,3.6vw,2.8rem);
  font-weight:800;
  max-width:720px;
}

/* FAQ (accordion via <details>) */
.faq-item{
  background:#fff;
  border:1px solid var(--borda);
  border-radius:10px;
  padding:20px 24px;
  margin-bottom:14px;
}
.faq-item summary{
  font-family:'Playfair Display',serif;
  font-weight:700;font-size:1.05rem;color:var(--grafite);
  cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:"+";
  font-family:'Inter',sans-serif;
  font-size:1.4rem;color:var(--vermelho);line-height:1;
  flex-shrink:0;
}
.faq-item[open] summary::after{content:"–";}
.faq-item p{margin-top:12px;color:var(--texto-suave);font-size:.95rem;}

/* Contato */
.contato-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;}
.contato-item{margin-bottom:26px;}
.contato-item h4{
  font-family:'Inter',sans-serif;
  font-size:.75rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--vermelho);margin-bottom:6px;
}
.contato-item p,.contato-item a{color:var(--texto);font-size:.98rem;}
.contato-item a:hover{color:var(--vermelho);}

.mapa-embed{
  border-radius:10px;overflow:hidden;border:1px solid var(--borda);
  margin-top:8px;
}
.mapa-embed iframe{display:block;width:100%;min-height:320px;border:0;}

.contato-whatsapp-cta{
  background:var(--off);border:1px solid var(--borda);
  border-radius:10px;padding:32px;
}

.membro .oab{font-size:.8rem;color:#9a9a9a;margin-top:8px;}

/* ---------- Menu mobile (checkbox, sem JS) ---------- */
.menu-check{display:none;}
.menu-burger{
  display:none;
  color:#fff;font-size:1.6rem;line-height:1;
  cursor:pointer;padding:6px 10px;
  border:1px solid rgba(255,255,255,.3);border-radius:6px;
}

/* focus visível */
a:focus-visible,.btn:focus-visible{
  outline:3px solid var(--vermelho-vivo);
  outline-offset:3px;
}

/* ---------- Revelação ao rolar ----------
   O estado escondido só existe quando o JS confirma que vai animar
   (html.js-revelar). Sem JS, ou com movimento reduzido, nada some. */
.js-revelar .revelar{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .65s ease,transform .65s ease;
}
.js-revelar .revelar.is-visivel{opacity:1;transform:none;}
/* escalona os filhos das grades pra entrada não ser um bloco só */
.js-revelar .revelar.is-visivel > *{animation:revelar-filho .6s ease both;}
.js-revelar .revelar.is-visivel > *:nth-child(2){animation-delay:.09s;}
.js-revelar .revelar.is-visivel > *:nth-child(3){animation-delay:.18s;}
.js-revelar .revelar.is-visivel > *:nth-child(4){animation-delay:.27s;}
@keyframes revelar-filho{
  from{opacity:0;transform:translateY(16px);}
  to{opacity:1;transform:none;}
}

/* mapa */
.mapa-embed{
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--borda);
  box-shadow:0 16px 36px rgba(18,18,18,.10);
  line-height:0;
}
.mapa-embed iframe{display:block;border:0;}

/* ---------- Jornada de entrada (scroll: fechado → aberto → dentro) ---------- */
.entrada-scroll{
  position:relative;
  height:360vh;          /* mais curso = cada troca acontece mais devagar */
  padding:0;             /* full-bleed: sem o respiro padrão de "section", senão sobra faixa preta em cima/embaixo */
  background:var(--preto);
}
.entrada-scroll-sticky{
  --p:0;                  /* progresso 0→1, escrito pelo JS */
  position:sticky;
  top:0;
  height:100vh;
  height:100dvh;          /* fecha a faixa preta que sobra no mobile quando a barra do navegador esconde/aparece */
  overflow:hidden;
}
.entrada-scroll-img{
  position:absolute;inset:0;
  z-index:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:0;
  /* zoom lento e contínuo ao longo de toda a seção */
  transform:scale(calc(1 + .12 * var(--p,0)));
  transform-origin:center 55%;
  will-change:opacity,transform;
}
.entrada-scroll-img:first-child{opacity:1;}

/* escurecida + vinheta: segura a leitura do texto centralizado */
.entrada-scroll-sticky::after{
  content:"";
  position:absolute;inset:0;
  z-index:1;
  background:
    radial-gradient(115% 80% at 50% 46%, rgba(0,0,0,.30) 0%, rgba(0,0,0,.78) 100%),
    linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.40) 38%,rgba(0,0,0,.82) 100%);
  pointer-events:none;
}

.entrada-scroll-legenda{
  position:absolute;inset:0;z-index:2;
  display:grid;
  place-items:center;
  padding:0 clamp(20px,6vw,80px);
  text-align:center;
}
.entrada-scroll-legenda p{
  grid-area:1/1;          /* empilha todas na mesma célula, já centralizadas */
  margin:0;
  max-width:18ch;
  color:#fff;
  font-family:'Playfair Display',serif;
  font-weight:700;
  font-size:clamp(2rem,5.4vw,4.4rem);
  line-height:1.08;
  text-wrap:balance;
  text-shadow:0 6px 40px rgba(0,0,0,.55);
  opacity:0;
  /* sem transition: o JS escreve opacidade/transform/blur a cada quadro,
     seguindo o scroll. Uma transição aqui só somaria atraso. */
  will-change:opacity,transform,filter;
}
/* Sem JS, mostra a primeira legenda. O JS marca <html class="js-entrada">
   e desliga esta regra — senão a 1ª ficaria visível por cima das outras. */
html:not(.js-entrada) .entrada-scroll-legenda p:first-child{opacity:1;}

/* marcadores de etapa */
.entrada-scroll-passos{
  position:absolute;z-index:3;
  /* o papel rasgado (70px, z-index 3) pinta por cima do sticky no fim
     da seção — os marcadores precisam ficar bem acima dele */
  left:0;right:0;bottom:clamp(130px,18vh,190px);
  display:flex;justify-content:center;gap:10px;
}
.entrada-scroll-passos span{
  width:34px;height:3px;border-radius:2px;
  background:rgba(255,255,255,.28);
  transition:background .4s ease,width .4s ease;
}
.entrada-scroll-passos span.is-ativa{
  width:56px;
  background:var(--vermelho-vivo);
}

/* movimento reduzido: sem zoom, sem deslize, sem desfoque — só a troca */
@media (prefers-reduced-motion:reduce){
  .entrada-scroll-img{transform:none!important;}
  .entrada-scroll-legenda p{transform:none!important;filter:none!important;}
}
.entrada-scroll-rasgo{position:absolute;bottom:-1px;left:0;width:100%;height:70px;z-index:3;}
.entrada-scroll-rasgo path{fill:#fff;}

/* ---------- Trilha de navegação (breadcrumb) ---------- */
.breadcrumb{
  font-size:.85rem;
  color:rgba(255,255,255,.65);
  margin-bottom:16px;
}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.breadcrumb li::after{content:"›";margin-left:8px;color:rgba(255,255,255,.4);}
.breadcrumb li:last-child::after{content:none;}
.breadcrumb a{color:var(--vermelho-claro);}
.breadcrumb a:hover{text-decoration:underline;}
.breadcrumb [aria-current="page"]{color:rgba(255,255,255,.75);}

/* ---------- Conteúdo longo (páginas de área) ---------- */
.artigo{max-width:760px;}
.artigo > p{margin-bottom:20px;color:var(--texto);}
.artigo h2{
  font-size:clamp(1.5rem,2.6vw,2rem);
  color:var(--grafite);
  margin:48px 0 16px;
}
.artigo h2:first-child{margin-top:0;}
.artigo h3{
  font-size:1.15rem;
  color:var(--grafite);
  margin:32px 0 10px;
}
.artigo ul:not(.lista-check){list-style:none;margin:0 0 22px;}
.artigo ul:not(.lista-check) li{
  position:relative;padding-left:22px;margin-bottom:12px;color:var(--texto);
}
.artigo ul:not(.lista-check) li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:7px;height:7px;border-radius:50%;background:var(--vermelho);
}
.artigo .lista-check{margin-bottom:22px;}
.artigo strong{color:var(--grafite);font-weight:700;}
.artigo a:not(.btn){color:var(--vermelho);font-weight:600;}
.artigo a:not(.btn):hover{text-decoration:underline;}

/* destaque sóbrio para observações dentro do texto */
.nota{
  border-left:3px solid var(--vermelho);
  background:var(--off);
  border-radius:0 10px 10px 0;
  padding:20px 24px;
  margin:0 0 24px;
  color:var(--texto-suave);
  font-size:.96rem;
}
.nota strong{color:var(--grafite);}

/* navegação entre as áreas, no rodapé das páginas internas */
.areas-relacionadas{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;
}
.areas-relacionadas a{
  border:1px solid var(--borda);
  border-radius:999px;
  padding:9px 18px;
  font-size:.9rem;
  color:var(--texto);
  transition:border-color .2s,color .2s,background .2s;
}
.areas-relacionadas a:hover{
  border-color:var(--vermelho);
  color:var(--vermelho);
  background:#fff;
}

/* =========================================================
   Páginas de área — layout de conversão
   Sem apelo de urgência, sem depoimento de cliente e sem
   promessa de resultado (Provimento 205/2021 OAB). A conversão
   vem de credenciais visíveis, clareza e contato fácil.
   ========================================================= */

.area-hero{
  position:relative;
  background:
    radial-gradient(760px 420px at 82% 18%, rgba(158,27,30,.24), transparent 66%),
    linear-gradient(160deg,#1c1a19 0%,#111010 60%,#171313 100%);
  color:#fff;
  padding:32px 0 48px;
  overflow:hidden;
}
/* ---- Variante clara do hero (fundo branco da identidade) ---- */
.area-hero-claro{
  background:
    radial-gradient(720px 400px at 84% 14%, rgba(158,27,30,.10), transparent 68%),
    linear-gradient(180deg,#fff 0%,var(--off) 100%);
  color:var(--texto);
  border-bottom:1px solid var(--borda);
}
.area-hero-claro h1{color:var(--grafite);}
.area-hero-claro h1 em{color:var(--vermelho);}
.area-hero-claro .area-hero-sub{color:var(--texto-suave);}
.area-hero-claro .area-hero-sub strong{color:var(--grafite);}
.area-hero-claro .breadcrumb{color:var(--texto-suave);}
.area-hero-claro .breadcrumb a{color:var(--vermelho);}
.area-hero-claro .breadcrumb li::after{color:#bdb6ae;}
.area-hero-claro .breadcrumb [aria-current="page"]{color:var(--texto-suave);}
.area-hero-claro .area-selos li{
  background:#fff;
  border-color:var(--borda);
  color:var(--texto);
}
.area-hero-claro .btn-contorno{
  border-color:var(--vermelho);
  color:var(--vermelho);
}
.area-hero-claro .btn-contorno:hover{background:var(--vermelho);color:#fff;}
.area-hero-claro .area-hero-foto img{
  border:1px solid var(--borda);
  box-shadow:0 18px 40px rgba(18,18,18,.16);
}

.area-hero-inner{
  display:grid;grid-template-columns:1fr 1fr;
  gap:48px;align-items:center;
}
/* foto em pé é mais estreita — devolve a sobra pra coluna de texto */
.area-hero-inner:has(.foto-retrato){grid-template-columns:1.4fr .6fr;}
.area-hero h1{
  font-size:clamp(1.7rem,3vw,2.4rem);
  font-weight:800;margin-bottom:12px;
}
.area-hero h1 em{font-style:italic;color:var(--vermelho-vivo);}
.area-hero-sub{
  color:#d6d0c9;font-size:1rem;max-width:520px;margin-bottom:22px;
}
.area-hero-sub strong{color:#fff;}

.area-hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:20px;}

/* selos de credibilidade — fatos verificáveis, não promessas */
.area-selos{display:flex;flex-wrap:wrap;gap:10px;}
.area-selos li{
  list-style:none;
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  padding:8px 16px;
  font-size:.85rem;color:#e6e1db;
}
.area-selos li::before{content:"✓";color:var(--vermelho-vivo);font-weight:800;}

.area-hero-foto{position:relative;}
/* A ALTURA é que fica fixa, não a proporção. Assim o hero tem a mesma altura
   em todas as páginas, mas cada foto entra no formato dela: paisagem ocupa a
   coluna inteira, retrato fica mais estreito. Forçar um recorte único cortava
   as fotos de pessoa no peito. */
.area-hero-foto img{
  width:100%;
  height:380px;
  object-fit:cover;
  object-position:center 30%;
  border-radius:12px;
  box-shadow:0 24px 50px rgba(0,0,0,.45);
}
/* fotos de pessoa (1066x1600, em pé): estreita a moldura e encosta à direita,
   pra caber quase inteira na mesma altura da paisagem */
.area-hero-foto.foto-retrato{max-width:300px;margin-left:auto;}
.area-hero-foto.foto-retrato img{object-position:center 22%;}
.area-hero-foto figcaption{
  position:absolute;left:14px;right:14px;bottom:14px;
  background:rgba(12,12,12,.84);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;padding:10px 14px;
  font-size:.82rem;color:#e6e1db;line-height:1.4;
}
.area-hero-foto figcaption strong{display:block;color:#fff;font-size:.92rem;}
.area-hero-foto figcaption span{color:var(--vermelho-vivo);font-weight:600;}

/* faixa de prova institucional */
.faixa-prova{background:var(--off);border-bottom:1px solid var(--borda);}
.faixa-prova ul{
  list-style:none;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:20px;padding:26px 0;
}
.faixa-prova li{text-align:center;font-size:.9rem;color:var(--texto-suave);}
.faixa-prova li strong{
  display:block;font-family:'Playfair Display',serif;
  font-size:1.35rem;color:var(--vermelho);margin-bottom:2px;
}

/* galeria do escritório — prova visual de estrutura real na cidade */
.galeria-escritorio{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}
.galeria-escritorio figure{
  position:relative;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--borda);
  box-shadow:0 14px 32px rgba(18,18,18,.10);
}
.galeria-escritorio img{
  width:100%;
  height:auto;
  aspect-ratio:3/2;          /* proporção nativa das fotos do escritório (1600x1066) */
  object-fit:cover;
  transition:transform .35s ease;
}
.galeria-escritorio figure:hover img{transform:scale(1.04);}
.galeria-escritorio figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:26px 18px 14px;
  background:linear-gradient(180deg,transparent,rgba(12,12,12,.86));
  color:#fff;font-size:.9rem;font-weight:600;
}

/* cards de situação, com ícone */
.grid-situacoes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.card-situacao{
  background:#fff;
  border:1px solid var(--borda);
  border-radius:12px;
  padding:26px 24px;
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.card-situacao:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 34px rgba(18,18,18,.09);
  border-color:#d9d2ca;
}
.card-situacao .icone{
  width:44px;height:44px;border-radius:10px;
  background:var(--vermelho-claro);color:var(--vermelho);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;
}
.card-situacao .icone svg{width:22px;height:22px;}
.card-situacao h3{font-size:1.05rem;color:var(--grafite);margin-bottom:8px;}
.card-situacao p{font-size:.93rem;color:var(--texto-suave);}

/* advogado responsável — credenciais, o que a OAB permite destacar */
.bloco-advogado{
  display:grid;grid-template-columns:300px 1fr;
  gap:44px;align-items:center;
}
/* usado quando a foto do profissional já aparece no hero da página */
.bloco-advogado-simples{grid-template-columns:1fr;max-width:720px;}
.bloco-advogado-foto img{
  width:100%;
  height:auto;
  aspect-ratio:2/3;          /* proporção nativa das fotos de pessoa (1066x1600) */
  object-fit:cover;
  object-position:center 20%;
  border-radius:14px;
  border:1px solid var(--borda);
  box-shadow:0 20px 44px rgba(18,18,18,.14);
}
.bloco-advogado h2{font-size:clamp(1.5rem,2.6vw,2rem);color:var(--grafite);margin-bottom:6px;}
.bloco-advogado .oab-selo{
  display:inline-block;
  background:var(--vermelho-claro);color:var(--vermelho);
  border-radius:6px;padding:5px 12px;
  font-size:.8rem;font-weight:700;letter-spacing:.06em;
  margin-bottom:16px;
}
.bloco-advogado p{color:var(--texto-suave);margin-bottom:16px;}
.bloco-advogado .lista-check li{font-size:.95rem;}

/* passos do atendimento */
.passos{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.passos li{position:relative;padding-top:16px;}
.passos .n{
  font-family:'Playfair Display',serif;
  font-size:2.6rem;font-weight:800;
  color:var(--vermelho);opacity:.22;line-height:1;
}
.passos h3{font-size:1.05rem;color:var(--grafite);margin:6px 0 8px;}
.passos p{font-size:.93rem;color:var(--texto-suave);}

/* checklist de documentos */
.card-checklist{
  background:#fff;border:1px solid var(--borda);
  border-top:3px solid var(--vermelho);
  border-radius:12px;padding:32px 30px;
}
.card-checklist h3{font-size:1.2rem;color:var(--grafite);margin-bottom:18px;}

/* chamada de contato no meio da página */
.faixa-contato{
  background:var(--grafite);color:#fff;
  border-radius:14px;padding:38px 40px;
  display:flex;flex-wrap:wrap;gap:24px;
  align-items:center;justify-content:space-between;
}
.faixa-contato h2{font-size:clamp(1.3rem,2.2vw,1.7rem);margin-bottom:6px;}
.faixa-contato p{color:#c9c3bc;font-size:.95rem;max-width:460px;}

/* botão de WhatsApp */
.btn-whats{
  display:inline-flex;align-items:center;gap:10px;
  background:linear-gradient(180deg,var(--vermelho-vivo) 0%,var(--vermelho) 55%,var(--vermelho-escuro) 100%);
  color:#fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 4px 0 var(--vermelho-escuro),
    0 14px 28px rgba(158,27,30,.35);
}
.btn-whats:hover{transform:translateY(-2px);}
.btn-whats:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 0 var(--vermelho-escuro);}
.btn-whats svg{width:19px;height:19px;flex-shrink:0;}
.btn-claro{background:#fff;color:var(--vermelho);box-shadow:0 10px 26px rgba(0,0,0,.25);}
.btn-claro:hover{transform:translateY(-2px);}
.btn-contorno{
  border:1.5px solid rgba(255,255,255,.42);
  color:#fff;background:transparent;
}
.btn-contorno:hover{background:rgba(255,255,255,.1);border-color:#fff;}

/* barra fixa de contato no mobile */
.whats-fixo{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(18,18,18,.94);
  backdrop-filter:blur(8px);
  border-top:1px solid rgba(255,255,255,.12);
}
.whats-fixo a{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:14px;border-radius:8px;
  font-weight:700;font-size:.95rem;letter-spacing:.03em;
}

/* ---------- Responsivo ---------- */
@media (max-width:960px){
  .artigo h2{margin-top:38px;}
  .area-hero-inner,
  .area-hero-inner:has(.foto-retrato){grid-template-columns:1fr;gap:32px;}
  .area-hero-foto{max-width:520px;margin:0 auto;}
  .area-hero-foto.foto-retrato{max-width:300px;margin:0 auto;}
  .area-hero-foto img{height:340px;}
  .galeria-escritorio{grid-template-columns:1fr;gap:16px;}
  .faixa-prova ul{grid-template-columns:1fr 1fr;gap:18px;}
  .grid-situacoes{grid-template-columns:1fr;}
  .bloco-advogado{grid-template-columns:1fr;gap:28px;}
  .bloco-advogado-foto{max-width:300px;}
  .passos{grid-template-columns:1fr;gap:20px;}
  .faixa-contato{padding:30px 26px;}
  .whats-fixo{display:block;}
  /* espaço pra barra fixa não cobrir o rodapé */
  .footer{padding-bottom:74px;}
  .hero-v2-inner{
    min-height:auto;
    padding-top:110px;
    display:block;
  }
  .hero-v2-text{padding-bottom:24px;max-width:100%;}
  .hero-figura{
    position:relative;
    top:auto;right:auto;
    transform:none;
    width:min(100%,460px);
    margin:8px auto 60px;
  }
  .hero-marca-dagua{width:300px;top:70px;left:-50px;}
  .grid-3{grid-template-columns:1fr;}
  .grid-2{grid-template-columns:1fr;}
  .lista-check-2col{grid-template-columns:1fr;gap:14px;}
  .contato-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .entrada-scroll{height:270vh;}
  .entrada-scroll-legenda p{bottom:36px;}

  /* menu mobile */
  .menu-burger{display:block;}
  .nav{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;
    background:#161413;
    border-top:1px solid rgba(255,255,255,.1);
    padding:8px 0;
    z-index:20;
  }
  .menu-check:checked ~ .nav{display:flex;}
  .nav a{padding:14px 24px;font-size:1rem;}
  .nav .nav-cta{margin:10px 24px;text-align:center;}
  .header{z-index:30;}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto;}
}