/* ==========================================================================
   Dalla Bona & Castelo Branco Advogados
   Folha de estilo unica do site institucional.

   Paleta e tipografia oficiais da marca, as mesmas do sistema visual do
   Instagram: vermelho #D10000 como acento (nunca como fundo dominante),
   preto #1A1A1A, creme #F4F3F1, cinza de texto #6B685E.
   Lora nos titulos e numeros, Poppins no corpo e nas etiquetas.

   Uma ressalva de contraste. O #D10000 sobre o preto da marca rende 3,08:1,
   abaixo do minimo de 4,5:1 que a WCAG pede para texto pequeno. Por isso o
   vermelho de texto miudo sobre fundo escuro usa --rubro-tela (#EA5555), que
   e o mesmo tom de vermelho clareado, com 4,91:1. O #D10000 continua intacto
   em botao, filete e titulo grande, onde o contraste ja passa.
   ========================================================================== */

:root{
  /* cor */
  --tinta:        #1a1a1a;
  --tinta-2:      #232323;
  --tinta-3:      #2e2e2e;
  --rubro:        #d10000;
  --rubro-escuro: #a80000;
  --rubro-tela:   #ea5555;   /* vermelho da marca clareado, so para texto pequeno sobre fundo escuro */
  --creme:        #f4f3f1;
  --papel:        #ffffff;
  --cinza:        #6b685e;
  --linha:        #e0ded9;
  --linha-escura: rgba(255,255,255,.13);
  --texto:        #33322e;
  --texto-claro:  rgba(255,255,255,.72);

  /* tipografia */
  --display: 'Lora', Georgia, 'Times New Roman', serif;
  --corpo:   'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  /* medidas */
  --largura:  1180px;
  --estreita: 780px;
  --topo-h:   80px;
}

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

html{ scroll-behavior:smooth; scroll-padding-top:var(--topo-h); }

body{
  margin:0;
  background:var(--papel);
  color:var(--texto);
  font-family:var(--corpo);
  font-size:16.5px;
  font-weight:400;
  line-height:1.78;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:var(--rubro); text-decoration:none; }
a:hover{ color:var(--rubro-escuro); }

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:600;
  color:var(--tinta);
  line-height:1.18;
  letter-spacing:-.005em;
  margin:0 0 .6em;
}
h1{ font-size:clamp(2.3rem,5vw,3.7rem); }
h2{ font-size:clamp(1.85rem,3.6vw,2.7rem); }
h3{ font-size:clamp(1.25rem,2.2vw,1.55rem); }
p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }

strong{ font-weight:600; }

.container{
  width:100%;
  max-width:var(--largura);
  margin-inline:auto;
  padding-inline:clamp(20px,5vw,48px);
}
.estreito{ max-width:var(--estreita); }

.secao{ padding:clamp(64px,9vw,120px) 0; }
.secao-creme{ background:var(--creme); }
.secao-tinta{ background:var(--tinta); color:var(--texto-claro); }
.secao-tinta h2,
.secao-tinta h3{ color:#fff; }

/* rotulo de secao ------------------------------------------------------- */
.rotulo{
  font-family:var(--corpo);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--rubro);
  margin:0 0 1.1rem;
  display:flex;
  align-items:center;
  gap:.85rem;
}
.rotulo::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--linha);
  max-width:110px;
}
.secao-tinta .rotulo::after{ background:var(--linha-escura); }
.secao-tinta .rotulo{ color:var(--rubro-tela); }

.chamada{
  font-size:1.08rem;
  color:var(--cinza);
  max-width:62ch;
}
.secao-tinta .chamada{ color:var(--texto-claro); }

/* botoes ---------------------------------------------------------------- */
.botao{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  font-family:var(--corpo);
  font-size:.83rem;
  font-weight:500;
  letter-spacing:.05em;
  line-height:1.2;
  padding:1rem 1.9rem;
  border:1px solid transparent;
  border-radius:2px;
  cursor:pointer;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.botao-cheio{ background:var(--rubro); color:#fff; }
.botao-cheio:hover{ background:var(--rubro-escuro); color:#fff; }
.botao-linha{ background:transparent; color:var(--tinta); border-color:var(--linha); }
.botao-linha:hover{ border-color:var(--tinta); color:var(--tinta); }
.secao-tinta .botao-linha,
.heroi .botao-linha,
.faixa-cta .botao-linha{ color:#fff; border-color:var(--linha-escura); }
.secao-tinta .botao-linha:hover,
.heroi .botao-linha:hover,
.faixa-cta .botao-linha:hover{ border-color:#fff; color:#fff; }

/* cabecalho ------------------------------------------------------------- */
.topo{
  position:fixed;
  inset:0 0 auto 0;
  height:var(--topo-h);
  z-index:60;
  display:flex;
  align-items:center;
  background:transparent;
  transition:background .3s ease, box-shadow .3s ease;
}
.topo .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
}
.topo.solido,
.topo.fixo-solido{
  background:rgba(26,26,26,.97);
  backdrop-filter:blur(8px);
  box-shadow:0 1px 0 var(--linha-escura);
}

.marca{ display:block; flex:0 0 auto; }
.marca img{ width:172px; height:auto; }

.menu{ display:flex; align-items:center; gap:1.65rem; }
.menu a{
  font-size:.78rem;
  font-weight:400;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--texto-claro);
  position:relative;
  padding:.35rem 0;
}
.menu a::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:0; height:1px;
  background:var(--rubro);
  transition:width .3s ease;
}
.menu a:hover{ color:#fff; }
.menu a:hover::after{ width:100%; }
.menu .botao{ padding:.72rem 1.35rem; }
.menu .botao::after{ display:none; }

.hamburguer{
  display:none;
  width:44px; height:44px;
  background:none; border:0;
  cursor:pointer;
  padding:10px;
}
.hamburguer span{
  display:block;
  height:1.5px;
  background:#fff;
  margin:5px 0;
  transition:transform .3s ease, opacity .3s ease;
}
.hamburguer[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.hamburguer[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburguer[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* heroi ----------------------------------------------------------------- */
.heroi{
  position:relative;
  background:var(--tinta);
  color:#fff;
  overflow:hidden;
  padding:calc(var(--topo-h) + clamp(48px,7vw,96px)) 0 clamp(56px,7vw,96px);
}
.heroi::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(110% 85% at 82% 8%, rgba(209,0,0,.20) 0%, rgba(209,0,0,0) 55%),
    linear-gradient(175deg, #232323 0%, #1a1a1a 62%);
}
.heroi .container{ position:relative; z-index:2; }

.heroi-grade{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr);
  gap:clamp(36px,6vw,80px);
  align-items:center;
}
.heroi h1{ color:#fff; }
.heroi h1 i{ font-style:italic; color:var(--rubro); }
.heroi .chamada{ color:var(--texto-claro); font-size:1.1rem; max-width:50ch; margin-top:1.4rem; }
.heroi-acoes{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.4rem; }

.heroi-selo{
  margin-top:2.8rem;
  padding-top:1.5rem;
  border-top:1px solid var(--linha-escura);
  font-size:.74rem;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:rgba(255,255,255,.60);
  line-height:1.9;
}
.heroi-selo b{ color:rgba(255,255,255,.72); font-weight:500; }

/* foto da dupla, com filete da marca */
.heroi-foto{ position:relative; }
.heroi-foto img{
  width:100%;
  border-radius:2px;
  filter:saturate(.96);
}
.heroi-foto::after{
  content:"";
  position:absolute;
  left:-14px; top:26px; bottom:26px;
  width:3px;
  background:var(--rubro);
}

/* grade de areas -------------------------------------------------------- */
.grade{
  display:grid;
  gap:1px;
  background:var(--linha);
  border:1px solid var(--linha);
  margin-top:3rem;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.cartao{
  background:var(--papel);
  padding:clamp(26px,3.2vw,38px);
  display:flex;
  flex-direction:column;
  transition:background .3s ease;
}
a.cartao{ color:inherit; }
a.cartao:hover{ background:var(--creme); color:inherit; }
.cartao-num{
  font-family:var(--display);
  font-size:.9rem;
  font-weight:500;
  color:var(--rubro);
  letter-spacing:.1em;
  margin-bottom:1.1rem;
}
.cartao h3{ margin-bottom:.6rem; }
.cartao p{ font-size:.92rem; color:var(--cinza); line-height:1.7; }
.cartao-quem{
  margin-top:1rem;
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--cinza);
}
.cartao-link{
  margin-top:auto;
  padding-top:1.5rem;
  font-size:.74rem;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--rubro);
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  transition:gap .3s ease;
}
a.cartao:hover .cartao-link{ gap:.9rem; }

/* celula final da grade, com o convite ao contato */
.cartao-fecho{
  background:var(--tinta);
  color:var(--texto-claro);
  justify-content:center;
}
.cartao-fecho h3{ color:#fff; }
.cartao-fecho p{ color:var(--texto-claro); }
.cartao-fecho .botao{ margin-top:1.5rem; align-self:flex-start; }

/* colunas de texto ------------------------------------------------------ */
.duas-colunas{
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(32px,6vw,84px);
  align-items:start;
}

/* metodo ---------------------------------------------------------------- */

/* a coluna do titulo acompanha a rolagem da lista, em vez de deixar
   um vazio grande do lado esquerdo */
@media (min-width:901px){
  #metodo .duas-colunas > div:first-child{
    position:sticky;
    top:calc(var(--topo-h) + 48px);
  }
}

.passos{
  list-style:none;
  margin:2.4rem 0 0;
  padding:0;
  counter-reset:passo;
}
.passos li{
  counter-increment:passo;
  position:relative;
  padding:1.5rem 0 1.5rem 4rem;
  border-top:1px solid var(--linha-escura);
}
.passos li:last-child{ border-bottom:1px solid var(--linha-escura); }
.passos li::before{
  content:counter(passo,decimal-leading-zero);
  position:absolute;
  left:0; top:1.6rem;
  font-family:var(--display);
  font-size:1.05rem;
  font-weight:500;
  color:var(--rubro-tela);
  letter-spacing:.06em;
}
.passos strong{
  display:block;
  font-family:var(--display);
  font-size:1.2rem;
  font-weight:600;
  color:#fff;
  margin-bottom:.3rem;
}
.passos span{ font-size:.94rem; line-height:1.75; }

/* socios ---------------------------------------------------------------- */
.socios{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(24px,4vw,52px);
  margin-top:3rem;
}
.socio{
  background:var(--papel);
  border:1px solid var(--linha);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.socio-retrato{
  aspect-ratio:1 / 1;
  background:var(--tinta);
  overflow:hidden;
}
.socio-retrato img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .6s ease;
}
.socio:hover .socio-retrato img{ transform:scale(1.03); }
.socio-corpo{ padding:clamp(24px,3vw,34px); }
.socio h3{ margin-bottom:.15rem; }
.socio-oab{
  font-size:.74rem;
  font-weight:500;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--rubro);
  margin:0 0 1.1rem;
}
.socio p{ font-size:.93rem; color:var(--cinza); line-height:1.75; }
.socio-areas{
  margin-top:1.2rem;
  padding-top:1.1rem;
  border-top:1px solid var(--linha);
  font-size:.78rem;
  letter-spacing:.06em;
  color:var(--cinza);
}
.socio-areas b{
  display:block;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--tinta);
  margin-bottom:.35rem;
}

/* contato --------------------------------------------------------------- */
.contato-grade{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:clamp(32px,6vw,72px);
  align-items:start;
  margin-top:3rem;
}
.canais{ list-style:none; margin:0; padding:0; }
.canais li{ padding:1.25rem 0; border-bottom:1px solid var(--linha-escura); }
.canais li:first-child{ border-top:1px solid var(--linha-escura); }
.canal-rotulo{
  display:block;
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:rgba(255,255,255,.58);
  margin-bottom:.3rem;
}
.canais a, .canais .valor{
  font-family:var(--display);
  font-size:1.22rem;
  line-height:1.5;
  color:#fff;
}
.canais a:hover{ color:var(--rubro-tela); }
.canais .obs{
  display:block;
  font-family:var(--corpo);
  font-size:.82rem;
  color:rgba(255,255,255,.58);
  margin-top:.2rem;
}

/* formulario ------------------------------------------------------------ */
.formulario{
  background:rgba(255,255,255,.035);
  border:1px solid var(--linha-escura);
  padding:clamp(24px,3.2vw,38px);
}
.campo{ margin-bottom:1.25rem; }
.campo label{
  display:block;
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
  margin-bottom:.5rem;
}
.campo input,
.campo textarea,
.campo select{
  width:100%;
  background:rgba(255,255,255,.04);
  border:1px solid var(--linha-escura);
  border-radius:2px;
  color:#fff;
  font-family:var(--corpo);
  font-size:.95rem;
  padding:.8rem 1rem;
  transition:border-color .25s ease, background .25s ease;
}
.campo select option{ background:var(--tinta-2); color:#fff; }
.campo input:focus,
.campo textarea:focus,
.campo select:focus{
  outline:none;
  border-color:var(--rubro);
  background:rgba(255,255,255,.07);
}
.campo textarea{ min-height:128px; resize:vertical; }

.consentimento{
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  font-size:.82rem;
  color:var(--texto-claro);
  line-height:1.65;
  margin-bottom:1.5rem;
}
.consentimento input{
  width:18px; height:18px;
  margin-top:.3rem;
  flex:0 0 auto;
  accent-color:var(--rubro);
}
/* isca de robo: fora da tela, mas sem display:none, senao o robo ignora */
.isca{
  position:absolute !important;
  left:-9999px;
  width:1px; height:1px;
  opacity:0;
  pointer-events:none;
}

.formulario .botao{ width:100%; }
.recado{
  margin-top:1rem;
  font-size:.88rem;
  padding:.85rem 1rem;
  border-radius:2px;
  display:none;
  line-height:1.6;
}
.recado.ok{ display:block; background:rgba(31,107,63,.18); border:1px solid rgba(31,107,63,.5); color:#b9e6c8; }
.recado.erro{ display:block; background:rgba(209,0,0,.14); border:1px solid rgba(209,0,0,.45); color:#f5b6b6; }

/* rodape ---------------------------------------------------------------- */
.rodape{
  background:var(--tinta-2);
  color:rgba(255,255,255,.55);
  padding:clamp(48px,6vw,72px) 0 28px;
  font-size:.86rem;
}
.rodape-grade{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:2.5rem;
  padding-bottom:2.5rem;
  border-bottom:1px solid var(--linha-escura);
}
.rodape-marca img{ width:196px; height:auto; margin-bottom:1.2rem; }
.rodape h4{
  color:#fff;
  font-family:var(--corpo);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin-bottom:1rem;
}
.rodape ul{ list-style:none; margin:0; padding:0; }
.rodape li{ margin-bottom:.55rem; line-height:1.6; }
.rodape a{ color:rgba(255,255,255,.62); }
.rodape a:hover{ color:#fff; }
.rodape-fim{
  padding-top:1.8rem;
  display:flex;
  flex-wrap:wrap;
  gap:1rem 2rem;
  justify-content:space-between;
  font-size:.78rem;
  color:rgba(255,255,255,.55);
}
.aviso-oab{
  margin-top:1.4rem;
  font-size:.76rem;
  line-height:1.75;
  color:rgba(255,255,255,.58);
  max-width:80ch;
}

/* paginas internas ------------------------------------------------------ */
.capa-interna{
  background:var(--tinta);
  color:#fff;
  padding:calc(var(--topo-h) + 68px) 0 68px;
  position:relative;
  overflow:hidden;
}
.capa-interna::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(100% 80% at 88% 0%, rgba(209,0,0,.2) 0%, rgba(209,0,0,0) 58%);
}
.capa-interna .container{ position:relative; z-index:2; }
.capa-interna h1{ color:#fff; font-size:clamp(2rem,4.4vw,3.2rem); max-width:20ch; }
.capa-interna .chamada{ color:var(--texto-claro); margin-top:1.1rem; }
.capa-interna .conduz{
  margin-top:1.8rem;
  font-size:.74rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.60);
}
.capa-interna .conduz b{ color:rgba(255,255,255,.78); font-weight:500; }

.migalhas{
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.58);
  margin-bottom:1.4rem;
}
.migalhas a{ color:rgba(255,255,255,.62); }
.migalhas a:hover{ color:#fff; }

.texto-longo{ max-width:70ch; }
.texto-longo h2{ margin-top:2.6rem; font-size:clamp(1.5rem,2.8vw,2rem); }
.texto-longo h2:first-child{ margin-top:0; }
.texto-longo h3{ margin-top:2rem; }
.texto-longo ul{ padding-left:1.25rem; margin:0 0 1.3em; }
.texto-longo li{ margin-bottom:.5rem; }

.destaque{
  border-left:2px solid var(--rubro);
  background:var(--creme);
  padding:1.35rem 1.6rem;
  margin:2rem 0;
  font-size:.95rem;
}

.faixa-cta{
  background:var(--tinta);
  color:#fff;
  padding:clamp(52px,7vw,84px) 0;
  text-align:center;
}
.faixa-cta h2{ color:#fff; }
.faixa-cta .chamada{ margin-inline:auto; color:var(--texto-claro); }
.faixa-cta .heroi-acoes{ justify-content:center; }

/* marcador temporario de dado pendente, remover ao preencher ------------- */
.pendente{
  background:rgba(209,0,0,.12);
  border-bottom:1px dashed var(--rubro);
  color:var(--rubro);
  padding:0 .3em;
  border-radius:2px;
  font-family:var(--corpo);
  font-size:.88em;
  font-style:normal;
  font-weight:500;
}
.secao-tinta .pendente,
.heroi .pendente,
.capa-interna .pendente,
.rodape .pendente{ color:#ff8f8f; background:rgba(255,143,143,.12); border-bottom-color:#ff8f8f; }

/* animacao de entrada --------------------------------------------------- */
.revela{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .7s ease, transform .7s ease;
}
.revela.visivel{ opacity:1; transform:none; }

/* acessibilidade -------------------------------------------------------- */
.pula-conteudo{
  position:absolute;
  left:-9999px;
  top:0;
  background:var(--rubro);
  color:#fff;
  padding:.8rem 1.2rem;
  z-index:100;
}
.pula-conteudo:focus{ left:12px; top:12px; color:#fff; }

:focus-visible{ outline:2px solid var(--rubro); outline-offset:3px; }

/* responsivo ------------------------------------------------------------ */
@media (max-width:1040px){
  .grade{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rodape-grade{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:900px){
  .heroi-grade,
  .duas-colunas,
  .contato-grade{ grid-template-columns:1fr; }
  .heroi-foto{ max-width:440px; }
  .heroi-foto::after{ left:-10px; }
}

@media (max-width:820px){
  .hamburguer{ display:block; }
  .marca img{ width:170px; }
  .menu{
    position:fixed;
    inset:var(--topo-h) 0 auto 0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:var(--tinta);
    padding:0 clamp(20px,5vw,48px);
    border-top:1px solid var(--linha-escura);
    max-height:0;
    overflow:hidden;
    /* visibility tira os links do foco do teclado enquanto o menu esta fechado.
       So max-height deixaria o Tab parar em link invisivel. */
    visibility:hidden;
    transition:max-height .35s ease, padding .35s ease, visibility 0s linear .35s;
  }
  .menu.aberto{
    max-height:calc(100vh - var(--topo-h));
    padding:1rem clamp(20px,5vw,48px) 2rem;
    visibility:visible;
    transition:max-height .35s ease, padding .35s ease, visibility 0s;
  }
  .menu a{ padding:1rem 0; border-bottom:1px solid var(--linha-escura); }
  .menu a::after{ display:none; }
  .menu .botao{ margin-top:1.2rem; border-bottom:0; justify-content:center; }
  .topo{ background:rgba(26,26,26,.97); }
}

@media (max-width:680px){
  .grade{ grid-template-columns:1fr; }
  .socios{ grid-template-columns:1fr; }
}

@media (max-width:560px){
  body{ font-size:16px; }
  .rodape-grade{ grid-template-columns:1fr; gap:2rem; }
  .heroi-acoes .botao{ width:100%; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .revela{ opacity:1; transform:none; transition:none; }
  .socio:hover .socio-retrato img{ transform:none; }
}

@media print{
  .topo,.menu,.hamburguer,.faixa-cta,.formulario{ display:none !important; }
  body{ color:#000; background:#fff; font-size:12pt; }
  .secao-tinta,.heroi,.capa-interna{ background:#fff !important; color:#000 !important; }
  .secao-tinta h2,.heroi h1,.capa-interna h1{ color:#000 !important; }
}