/* ==================================================================
   Bicalho Navarro Advogados: base comum a todas as páginas
   (fontes, cores, componentes, barra lateral, PT · EN, menu e rodapé).
   Cada página tem o próprio CSS de seções.
   ================================================================== */

/* ------------------------------------------------------------------
   Layout: Figma "Bicalho", frames Home (1:1100) e Menu (172:1451).

   Fonte: Figtree (Google Fonts, licença livre para web), em todo o
   site. Títulos "leves" usam o peso 300.
------------------------------------------------------------------- */

:root{
  --areia:    #ECE4DB;
  --branco:   #FBFAF9;
  --pessego:  #FDCF9D;
  --cinza:    #ABA39A;
  --grafite:  #3B3A3C;
  --preto:    #111011;
  --tinta:    #2E2D2F;
  --tinta-2:  #63605E;
  --tinta-3:  #928C86;

  --grad-numero: linear-gradient(90deg,#FDCF9D 0%,#E3C6AC 45%,#ABA39A 100%);

  --titulo:"Figtree",-apple-system,"Segoe UI",sans-serif;
  --titulo-leve:"Figtree",-apple-system,"Segoe UI",sans-serif;
  --texto:"Figtree",-apple-system,"Segoe UI",sans-serif;

  /* Unidade do layout: 1px do Figma (1920px de largura) */
  --u: calc(min(100vw, 1920px) / 1920);

  --lateral: calc(263 * var(--u));      /* barra lateral grafite */
  --esq:     calc(117 * var(--u));      /* início do conteúdo, medido a partir da barra lateral */
  --dir:     calc(263 * var(--u));      /* margem direita do conteúdo */
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;
  font-family:var(--texto);
  color:var(--preto);
  background:var(--areia);
  overflow-x:clip;
  padding-left:var(--lateral);   /* a barra lateral é fixa; a página corre ao lado dela */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,p{margin:0;font-weight:inherit}
input{font:inherit}
:focus-visible{outline:2px solid var(--pessego);outline-offset:3px}

.conteudo{padding-left:var(--esq);padding-right:var(--dir)}
/* Texto só para leitores de tela */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* -------------------- Tipografia -------------------- */
.titulo-secao{
  font-family:var(--titulo);font-size:max(24px, calc(30 * var(--u)));
  line-height:1.24;letter-spacing:-0.005em;color:var(--preto);
}
.texto-lead{
  font-family:var(--texto);font-size:max(16px, calc(18.5 * var(--u)));
  line-height:1.64;color:#000;
}

/* -------------------- Componentes -------------------- */
/* Botão pílula com círculo (Sobre nós, Ver equipe completa, Saiba mais) */
.botao-circulo{
  display:inline-flex;align-items:center;gap:14px;width:fit-content;
  padding:6px 6px 6px 24px;border-radius:100px;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  font-family:var(--titulo);font-size:15px;text-transform:uppercase;color:var(--tinta);
  white-space:nowrap;
}
.botao-circulo .bc-circulo{
  flex:none;width:38px;height:38px;border-radius:100px;background:var(--grafite);color:var(--areia);
  display:flex;align-items:center;justify-content:center;
}
.botao-circulo .bc-circulo svg{transition:transform .5s cubic-bezier(.16,1,.3,1)}
.botao-circulo.noturno{background:rgba(255,255,255,.14);color:var(--branco)}
.botao-circulo.noturno .bc-circulo{background:var(--areia);color:var(--grafite)}

/* Hover (bicalho-motion.md › Excelência › Botão "Sobre nós"):
   o círculo escuro cresce e preenche o botão, e o texto troca de cor */
.botao-circulo{position:relative;isolation:isolate;overflow:hidden;transition:color .5s cubic-bezier(.16,1,.3,1)}
.botao-circulo::before{
  content:"";position:absolute;z-index:-1;right:6px;top:50%;width:38px;height:38px;margin-top:-19px;
  border-radius:100px;background:var(--grafite);
  transform:scale(1);transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.botao-circulo.noturno::before{background:var(--areia)}
.botao-circulo:hover{color:var(--branco)}
.botao-circulo.noturno:hover{color:var(--preto)}
.botao-circulo:hover::before{transform:scale(16)}
.botao-circulo:hover .bc-circulo svg{transform:translateX(3px)}

/* Botão redondo "+" ao lado dos títulos */
.botao-mais{
  flex:none;width:52px;height:52px;border-radius:100px;
  background:rgba(255,255,255,.55);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  display:inline-flex;align-items:center;justify-content:center;
  font-family:"Figtree",sans-serif;font-size:24px;color:var(--preto);
}
.botao-mais{transition:background .45s ease, color .45s ease, transform .5s cubic-bezier(.16,1,.3,1)}
.botao-mais:hover{background:var(--grafite);color:var(--branco);transform:rotate(90deg)}
.titulo-com-mais{display:flex;align-items:center;gap:calc(38 * var(--u))}

/* Setas redondas (asset do Figma) */
.seta{
  flex:none;width:52px;height:52px;border-radius:100px;
  background:rgba(255,255,255,.55);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  color:var(--grafite);display:flex;align-items:center;justify-content:center;
  transition:background .45s ease, color .45s ease;
}
.seta svg{width:21px;height:18px;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.seta.esquerda svg{transform:scaleX(-1)}
.seta:hover,a:hover > .seta,a:hover .pub-item-texto > .seta{background:var(--grafite);color:var(--branco)}
.seta:hover svg,a:hover > .seta svg,a:hover .pub-item-texto > .seta svg{transform:translateX(3px)}
.seta.esquerda:hover svg{transform:scaleX(-1) translateX(3px)}
.setas{display:flex;justify-content:flex-end;gap:22px}

/* Pílulas de tipo e área */
.pilulas{display:flex;gap:8px;flex-wrap:wrap}
.pilula{padding:6px 14px;border-radius:100px;font-family:var(--titulo);font-size:12px;white-space:nowrap}
.pilula.tipo{background:var(--grafite);color:var(--branco)}
.pilula.area{background:var(--pessego);color:var(--tinta)}

/* Painel de vidro */
.vidro{
  background:linear-gradient(155deg,rgba(255,255,255,.72),rgba(255,255,255,.38));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.55);border-radius:20px;
  box-shadow:0 24px 44px -32px rgba(59,58,60,.45);
}
.vidro.noturno{
  background:linear-gradient(156deg,rgba(24,23,25,.58),rgba(24,23,25,.28));
  border-color:rgba(255,255,255,.18);
}

/* Placeholder enquanto a foto não existe */
.espera{background:linear-gradient(135deg,rgba(253,207,157,.5),rgba(171,163,154,.45))}

/* Números em degradê (Home e Quem somos) */
.numeros-grade{display:flex;padding-left:calc(97 * var(--u))}
.numero-item{width:calc(353 * var(--u))}
.numero-valor{
  display:inline-block;font-family:var(--titulo);font-size:max(72px, calc(128 * var(--u)));line-height:.9;
  background:var(--grad-numero);-webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums;
}
.numero-rotulo{display:block;margin-top:calc(10 * var(--u));font-size:max(16px, calc(18.5 * var(--u)));line-height:1.64;color:#000}

/* ==================== Barra lateral fixa ==================== */
.lateral{
  position:fixed;left:0;top:0;bottom:0;width:var(--lateral);z-index:50;
  background:var(--grafite);
  display:flex;flex-direction:column;align-items:center;
  padding-top:calc(44 * var(--u));
}
.lateral-logo{width:calc(185 * var(--u));height:calc(159 * var(--u));display:flex;align-items:center;justify-content:center}
.lateral-logo img{width:calc(175 * var(--u));height:auto}
.lateral-logo .logo-simbolo{display:none}
.menu-botao{
  margin-top:calc(19 * var(--u));
  display:flex;align-items:center;gap:13px;
  font-family:var(--titulo);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--areia);
}
.hamburguer{position:relative;width:18px;height:12px;flex:none}
.hamburguer::before,.hamburguer::after,.hamburguer span{
  content:"";position:absolute;left:0;width:18px;height:2px;border-radius:2px;background:var(--pessego);
}
.hamburguer::before{top:0}
.hamburguer span{top:5px}
.hamburguer::after{top:10px}

/* PT · EN: fixo na página toda; a cor muda conforme o fundo que passa por baixo */
.topo-utilitarios{
  position:fixed;top:calc(53 * var(--u));right:calc(60 * var(--u));z-index:70;
  display:flex;align-items:center;
}
.idioma{
  font-family:"Figtree",sans-serif;font-weight:600;font-size:12.5px;letter-spacing:1px;color:var(--tinta-2);
  padding:10px 6px;transition:color .4s ease;
}
.topo-utilitarios.claro .idioma{color:var(--areia)}
.idioma:hover{color:var(--preto)}
.topo-utilitarios.claro .idioma:hover{color:var(--pessego)}

/* ==================== Rodapé ==================== */
.rodape{position:relative;z-index:1;background:var(--grafite);color:var(--branco);padding-top:calc(124 * var(--u))}
.rodape-contato{display:grid;grid-template-columns:minmax(0,1fr) calc(479 * var(--u));column-gap:calc(64 * var(--u));padding-right:calc(147 * var(--u))}
.rodape-titulo{font-family:var(--titulo);font-size:max(24px, calc(30 * var(--u)));line-height:1.24;letter-spacing:-0.005em;color:var(--branco)}
.rodape-email{transition:color .4s ease;display:inline-block;margin-top:22px;font-size:max(19px, calc(24 * var(--u)));color:var(--branco)}
.rodape-dados{margin-top:25px;font-size:15px;line-height:1.7;color:rgba(251,250,249,.66)}
.rodape-email:hover{color:var(--pessego)}
.newsletter-titulo{font-weight:700;font-size:15.5px;color:var(--branco)}
.newsletter-form{margin-top:14px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.campo{
  width:100%;padding:16px 22px;border-radius:100px;
  background:rgba(255,255,255,.1);border:2px solid #767676;color:var(--branco);font-size:16px;
}
.campo::placeholder{color:rgba(251,250,249,.5)}
.campo:focus{outline:none;border-color:var(--pessego)}
.botao-enviar{transition:background .4s ease;background:var(--areia);color:var(--preto);border-radius:100px;padding:17px 30px 15px;font-weight:700;font-size:15px}
.botao-enviar:hover{background:var(--pessego)}
.nota-privacidade{margin-top:15px;font-size:12.5px;line-height:1.5;color:rgba(251,250,249,.5)}

.rodape-nav{
  margin-top:calc(56 * var(--u));
  display:grid;grid-template-columns:calc(347 * var(--u)) minmax(max-content, calc(272 * var(--u))) minmax(max-content, calc(272 * var(--u))) max-content;
  column-gap:0;padding-left:calc(13 * var(--u));
}
.rodape-logo{width:min(213px, 100%);height:auto}
.rodape-coluna{padding-right:24px}
.rodape-coluna h3{font-weight:700;font-size:13.5px;color:var(--branco)}
.rodape-coluna ul{margin-top:16px;display:flex;flex-direction:column;gap:11px}
.rodape-coluna a{font-size:14.5px;color:rgba(251,250,249,.62);transition:color .4s ease}
.rodape-coluna a:hover,.rodape-legais a:hover,.menu-contato a:hover{color:var(--branco)}
.redes{margin-top:16px;display:flex;gap:6px}
.rede{width:41px;height:41px;border-radius:42px;background:rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center}
.rede{transition:background .4s ease}
.rede:hover{background:rgba(253,207,157,.55)}
.rede img{width:21.4px;height:21.4px}

.rodape-base{
  margin-top:calc(75 * var(--u));padding:22px 0 66px calc(13 * var(--u));
  display:flex;align-items:center;justify-content:space-between;gap:16px 28px;flex-wrap:wrap;
}
.rodape-base p,.rodape-base a,.rodape-base span{font-size:13px;color:rgba(251,250,249,.5)}
.rodape-legais{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.rodape-legais .lets{display:flex;align-items:center;gap:27px;font-family:"Figtree",sans-serif}
.rodape-legais .lets img{width:106px;height:26px}

/* ==================== Menu em tela cheia (frame Menu) ==================== */
.menu-tela{
  position:fixed;inset:0;z-index:45;background:var(--grafite);overflow-x:hidden;overflow-y:auto;
  visibility:hidden;pointer-events:none;
}
.menu-tela.aberto{visibility:visible;pointer-events:auto}
.menu-simbolo{
  position:absolute;left:55.31%;top:16.86%;width:48.7%;height:auto;max-width:none;pointer-events:none;
}
.menu-fechar{
  position:absolute;top:calc(73 * var(--u));right:calc(263 * var(--u));
  font-family:var(--titulo-leve);font-weight:300;font-size:33px;line-height:56px;color:var(--areia);
  transition:transform .5s cubic-bezier(.16,1,.3,1), color .4s ease;
}
.menu-fechar:hover{transform:rotate(90deg);color:var(--pessego)}
.menu-corpo{
  position:relative;min-height:100%;
  padding:calc(174 * var(--u)) calc(348 * var(--u)) calc(80 * var(--u)) calc(348 * var(--u));
  display:flex;flex-direction:column;
}
.menu-links{display:flex;flex-direction:column;align-items:flex-start}
.menu-links a{
  font-family:var(--titulo-leve);font-weight:300;letter-spacing:-0.007em;color:var(--areia);
  transition:transform .4s cubic-bezier(.16,1,.3,1), color .4s ease;
}
/* Hover nos links: desliza 12px e ganha pêssego (subitens, já pêssego, clareiam) */
.menu-links a:hover{transform:translateX(12px);color:var(--pessego)}
.menu-links .sub:hover{color:var(--areia)}
.menu-links .principal{font-size:max(26px, calc(33 * var(--u)));line-height:56px;margin-bottom:6px}
.menu-links .sub{font-size:max(20px, calc(27 * var(--u)));line-height:47px;color:var(--pessego)}
.menu-links a:nth-child(1){margin-bottom:-1px}
.menu-links a:nth-child(2){margin-bottom:-9px}
.menu-links a:nth-child(6){margin-bottom:15px}
.menu-rodape{
  margin-top:calc(148 * var(--u));width:calc(1224 * var(--u));
}
.menu-linha{width:100%;height:1px}
.menu-rodape-linha{display:flex;align-items:center;justify-content:space-between;padding:14px 0 0 calc(32 * var(--u))}
.menu-contato{display:flex;gap:calc(80 * var(--u))}
.menu-contato a{font-size:14.5px;color:rgba(251,250,249,.62)}
.menu-redes{display:flex;gap:20px;margin-right:calc(34 * var(--u))}

/* ==================== Voltar ao topo ==================== */
.voltar-topo{
  position:fixed;right:calc(60 * var(--u) + 2px);bottom:32px;z-index:40;
  width:48px;height:48px;border-radius:100px;
  background:rgba(255,255,255,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:var(--grafite);display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 24px -18px rgba(59,58,60,.5);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .5s ease, visibility 0s linear .5s, transform .6s cubic-bezier(.16,1,.3,1), background .4s ease, color .4s ease;
}
.voltar-topo svg{transform:rotate(-90deg);transition:transform .5s cubic-bezier(.16,1,.3,1)}
.voltar-topo.visivel{opacity:1;visibility:visible;transform:none;transition:opacity .5s ease, transform .6s cubic-bezier(.16,1,.3,1), background .4s ease, color .4s ease}
.voltar-topo:hover{background:var(--grafite);color:var(--branco)}
.voltar-topo:hover svg{transform:rotate(-90deg) translateX(3px)}
.voltar-topo.claro{background:rgba(255,255,255,.14);color:var(--areia)}
.voltar-topo.claro:hover{background:var(--areia);color:var(--grafite)}

/* ==================== Até 1024px: barra lateral estreita, ainda fixa ==================== */
@media (max-width:1024px){
  .voltar-topo{right:16px;bottom:16px;width:44px;height:44px}
  .numeros-grade{padding-left:0;gap:24px}
  .numero-item{width:auto;flex:1}
  :root{--lateral:72px;--esq:20px;--dir:20px}
  .lateral{padding-top:22px}
  .lateral-logo{width:auto;height:auto}
  .lateral-logo .logo-vertical{display:none}
  .lateral-logo .logo-simbolo{display:block;width:40px;height:auto}
  .menu-botao{margin-top:26px}
  .menu-botao > span:last-child{display:none}
  .topo-utilitarios{top:20px;right:20px}
  .rodape{padding-top:72px}
  .rodape-contato{grid-template-columns:1fr;row-gap:48px;padding-right:0}
  .rodape-nav{grid-template-columns:1fr 1fr;row-gap:40px;padding-left:0;margin-top:64px}
  .rodape-base{padding-left:0;margin-top:48px}
  .menu-corpo{padding:96px 24px 48px calc(var(--lateral) + 24px)}
  .menu-fechar{top:24px;right:24px}
  .menu-simbolo{left:40%;top:auto;bottom:18%;width:90%;opacity:.5}
  .menu-rodape{width:100%;margin-top:48px}
  .menu-rodape-linha{flex-wrap:wrap;gap:16px;padding-left:0}
  .menu-contato{flex-direction:column;gap:6px}
  .menu-redes{margin-right:0}
}
@media (max-width:640px){
  .numeros-grade{flex-direction:column}
  :root{--lateral:56px}
  .lateral-logo .logo-simbolo{width:32px}
  .rodape-nav{grid-template-columns:1fr}
}

/* WordPress: com a barra de administração (só para quem está logado),
   os elementos fixos descem para não ficarem por baixo dela */
.admin-bar .lateral,.admin-bar .menu-tela{top:var(--wp-admin--admin-bar--height,32px)}
.admin-bar .topo-utilitarios{margin-top:var(--wp-admin--admin-bar--height,32px)}

/* PT · EN: o idioma atual em cor cheia, o outro mais apagado */
.idioma-opcao{opacity:.5;transition:opacity .4s ease}
.idioma-opcao.atual,.idioma-opcao:hover{opacity:1}