/* ============================================================
   RICARDO MENDONÇA & ADVOGADOS ASSOCIADOS
   Folha única, compartilhada por todas as páginas.

   A paleta sai da identidade deles: o monograma RM é cromado e o
   selo de 30 anos é azul-marinho profundo. Daí um mundo frio —
   marinho, prata, marfim — que é o registro certo para Direito
   Bancário. A prata aparece pouco: marca, fio de ênfase, o número
   que importa e o selo. O resto é tinta.
   ============================================================ */
:root{
  --breu:#0A0D14;
  --marinho:#101725;
  --marinho-alto:#16202F;
  --prata:#C3CEDC;
  --prata-luz:#E4EBF2;
  --marfim:#EEF1F5;
  --fumo:#8E99A8;
  --fumo-fraco:#5F6A7A;
  /* leitura longa pede mais luz que o texto de apoio: --fumo tem contraste
     suficiente para um parágrafo de 3 linhas, não para um artigo inteiro */
  --leitura:#C9D1DB;
  --fio:rgba(238,241,245,.12);
  --fio-forte:rgba(238,241,245,.26);
  --ok:#7FA07C;
  --erro:#C4776E;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Archivo",-apple-system,"Segoe UI",Roboto,sans-serif;
  --gut:clamp(20px,5vw,80px);
}
*{box-sizing:border-box}
/* o atributo hidden tem que vencer qualquer display do CSS — sem isso
   um bloco com display:grid continua na tela mesmo "escondido" */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--breu);color:var(--marfim);
  font-family:var(--sans);font-size:15px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{margin:0;font-weight:400;text-wrap:balance}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--prata);outline-offset:3px}

.gut{padding-left:var(--gut);padding-right:var(--gut)}
.limite{max-width:1240px;margin:0 auto}
.bloco{padding-top:clamp(64px,9vw,120px);padding-bottom:clamp(64px,9vw,120px)}

.chapeu{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--prata);font-weight:500}
.chapeu.mudo{color:var(--fumo-fraco)}
.olho{font-family:var(--serif);font-weight:300;font-size:clamp(28px,3.8vw,46px);line-height:1.14;letter-spacing:-.005em}
.olho em{font-style:italic;color:var(--prata-luz)}
.corpo{color:var(--fumo);max-width:64ch;line-height:1.8}
.corpo + .corpo{margin-top:16px}

/* ══════ REVELAÇÃO AO ROLAR ══════
   Escopado em `html.js`: sem JavaScript a classe nunca entra e o
   conteúdo nasce visível. Página que só aparece se o script rodar é
   página que some para leitor de tela antigo e para o robô do Google. */
html.js .revela{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
html.js .revela.visivel{opacity:1;transform:none}
html.js .revela.atraso-1{transition-delay:.08s}
html.js .revela.atraso-2{transition-delay:.16s}
html.js .revela.atraso-3{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  html.js .revela{opacity:1;transform:none;transition:none}
}

/* ══════ TOPO ══════ */
.topo{
  position:fixed;inset:0 0 auto 0;z-index:60;height:76px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-left:var(--gut);padding-right:var(--gut);
  border-bottom:1px solid transparent;transition:background .35s,border-color .35s;
}
.topo.preso{background:rgba(10,13,20,.93);backdrop-filter:blur(14px);border-bottom-color:var(--fio)}
.topo.solido{background:rgba(10,13,20,.93);backdrop-filter:blur(14px);border-bottom-color:var(--fio)}
.marca img{height:34px;width:auto}
.nav{display:flex;align-items:center;gap:28px}
.nav a{font-size:12.5px;color:var(--fumo);letter-spacing:.02em;transition:color .2s}
.nav a:hover,.nav a[aria-current="page"]{color:var(--marfim)}
@media (max-width:920px){.nav a:not(.bt){display:none}}

.bt{
  display:inline-flex;align-items:center;gap:8px;padding:12px 24px;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  border:1px solid var(--fio-forte);color:var(--marfim);transition:.22s;white-space:nowrap;
}
.bt:hover{border-color:var(--prata);color:var(--prata-luz)}
.bt.forte{background:var(--prata);border-color:var(--prata);color:#0A0D14}
.bt.forte:hover{background:var(--prata-luz);border-color:var(--prata-luz)}
.bt.mini{padding:8px 15px;font-size:10px;letter-spacing:.12em}
.bt[disabled]{opacity:.45;cursor:not-allowed}

/* ══════ CAPA ══════ */
.capa{position:relative;min-height:min(780px,94svh);display:flex;align-items:flex-end;overflow:hidden}
.capa-img{position:absolute;inset:0;background:url(../img/hero.jpg) center/cover no-repeat;transform:scale(1.05);animation:respira 24s ease-out forwards}
@keyframes respira{to{transform:scale(1)}}
.capa-veu{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(10,13,20,.96) 0%,rgba(10,13,20,.84) 38%,rgba(10,13,20,.24) 72%,rgba(10,13,20,.46) 100%),
  linear-gradient(0deg,rgba(10,13,20,.92) 0%,rgba(10,13,20,0) 46%)}
/* `gut` e `limite` no MESMO elemento somam padding dentro do max-width e o
   bloco sai deslocado do resto da página. Aqui o gut fica no invólucro e o
   limite no miolo, igual às seções; a largura do texto vem dos filhos. */
.capa-txt{position:relative;width:100%;padding-top:150px;padding-bottom:64px}
.capa-txt .limite > *{max-width:820px}
.capa-h{font-family:var(--serif);font-weight:300;font-size:clamp(36px,6vw,74px);line-height:1.06;letter-spacing:-.015em;margin-top:20px}
.capa-h em{font-style:italic;color:var(--prata-luz)}
.capa-p{margin-top:22px;color:var(--fumo);font-size:clamp(15px,1.4vw,17px);max-width:54ch;line-height:1.75}
.capa-acao{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.sobe{opacity:0;transform:translateY(16px);animation:sobe .95s cubic-bezier(.16,1,.3,1) forwards}
.sobe:nth-child(1){animation-delay:.05s}.sobe:nth-child(2){animation-delay:.17s}
.sobe:nth-child(3){animation-delay:.29s}.sobe:nth-child(4){animation-delay:.41s}
@keyframes sobe{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.sobe,.capa-img{animation:none;opacity:1;transform:none}}

/* capa curta, para páginas internas */
.capa-curta{padding-top:150px;padding-bottom:52px;border-bottom:1px solid var(--fio)}

/* ══════ RÉGUA DE NÚMEROS ══════ */
.regua{display:flex;flex-wrap:wrap;border-top:1px solid var(--fio);background:var(--breu)}
.regua-i{flex:1 1 200px;padding:24px clamp(20px,5vw,80px);border-right:1px solid var(--fio);display:flex;flex-direction:column;gap:4px}
.regua-i:last-child{border-right:0}
.regua-n{font-family:var(--serif);font-size:32px;font-weight:300;color:var(--prata-luz);line-height:1;font-variant-numeric:tabular-nums}
.regua-r{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fumo-fraco)}

/* ══════ DUAS COLUNAS ══════ */
.duas{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,6vw,84px);align-items:center}
.duas.topo-align{align-items:start}
@media (max-width:920px){.duas{grid-template-columns:1fr}}

.selo{display:flex;justify-content:center}
.selo img{width:min(300px,64vw);opacity:.92}

/* ══════ ÁREAS ══════ */
.areas{border-top:1px solid var(--fio);margin-top:46px}
.area{display:grid;grid-template-columns:270px 1fr;gap:clamp(18px,4vw,56px);padding:30px 0;border-bottom:1px solid var(--fio);transition:background .3s}
.area:hover{background:rgba(238,241,245,.018)}
@media (max-width:820px){.area{grid-template-columns:1fr;gap:10px}}
.area-n{font-family:var(--serif);font-size:25px;font-weight:400;line-height:1.2}
.area-n span{display:block;font-family:var(--sans);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--prata);margin-top:7px}
.area-t{color:var(--fumo);line-height:1.8;max-width:62ch}

/* ══════ FAIXA DE IMAGEM ══════ */
.faixa{position:relative;height:clamp(260px,40vw,480px);overflow:hidden;border-top:1px solid var(--fio);border-bottom:1px solid var(--fio)}
.faixa-img{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(.5) brightness(.44)}
.faixa-veu{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,13,20,.94),rgba(10,13,20,.6) 62%,rgba(10,13,20,.8))}
.faixa-txt{position:relative;height:100%;display:flex;align-items:center}
.faixa-txt .limite{width:100%}
.faixa-cx{display:flex;flex-direction:column;gap:14px;max-width:640px}

/* ══════ SÓCIOS ══════ */
.socios{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--fio);border:1px solid var(--fio);margin-top:46px}
@media (max-width:980px){.socios{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.socios{grid-template-columns:1fr}}
.socio{background:var(--breu);display:flex;flex-direction:column}
.socio-foto{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--marinho-alto)}
.socio-foto img{width:100%;height:100%;object-fit:cover;object-position:top center;filter:saturate(.96);transition:transform .9s cubic-bezier(.16,1,.3,1)}
.socio:hover .socio-foto img{transform:scale(1.035)}
@media (prefers-reduced-motion:reduce){.socio-foto img{transition:none}.socio:hover .socio-foto img{transform:none}}
.socio-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,13,20,.6),transparent 42%);pointer-events:none}
.socio-txt{padding:18px 20px 22px;display:flex;flex-direction:column;gap:5px;flex:1}
.socio-nome{font-family:var(--serif);font-size:22px;font-weight:400;line-height:1.15}
.socio-cargo{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--prata)}
.socio-oab{font-size:11.5px;color:var(--fumo-fraco);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.socio-bio{font-size:13px;color:var(--fumo);line-height:1.7;margin-top:8px}

/* ══════ ATUAÇÃO ══════ */
.ufs{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.uf{font-size:11.5px;letter-spacing:.1em;color:var(--fumo);border:1px solid var(--fio);padding:6px 13px}
.uf.forte{border-color:var(--fio-forte);color:var(--marfim)}

/* ══════ CONTATO ══════ */
.dados{display:flex;flex-direction:column;border-top:1px solid var(--fio);margin-top:30px}
.dado{display:grid;grid-template-columns:150px 1fr;gap:18px;padding:16px 0;border-bottom:1px solid var(--fio)}
@media (max-width:640px){.dado{grid-template-columns:1fr;gap:4px}}
.dado dt{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--fumo-fraco);padding-top:3px}
.dado dd{margin:0;line-height:1.75}
.dado dd a:hover{color:var(--prata-luz)}

/* ══════════════════════════════════════════════════════════
   ARTIGOS — VITRINE
   ══════════════════════════════════════════════════════════ */
/* Linha fina entre os cards: cada um tem a própria borda e avança 1px
   sobre o vizinho. Pintar o fundo da grade com gap:1px deixava as
   células vazias cinzas quando havia menos artigos que colunas. */
.artigos{display:grid;grid-template-columns:repeat(3,1fr);margin-top:46px;padding:0 1px 1px 0}
@media (max-width:960px){.artigos{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.artigos{grid-template-columns:1fr}}
.artigo-c{background:var(--breu);border:1px solid var(--fio);margin:0 -1px -1px 0;display:flex;flex-direction:column;transition:background .3s}
.artigo-c:hover{background:var(--marinho)}
.artigo-c-foto{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--marinho-alto)}
.artigo-c-foto img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.artigo-c:hover .artigo-c-foto img{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){.artigo-c-foto img,.artigo-c:hover .artigo-c-foto img{transition:none;transform:none}}
.artigo-c-txt{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.artigo-c-data{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--fumo-fraco)}
.artigo-c-tit{font-family:var(--serif);font-size:24px;font-weight:400;line-height:1.22}
.artigo-c-res{font-size:13.5px;color:var(--fumo);line-height:1.7;flex:1}
.artigo-c-ler{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--prata);margin-top:6px}
.artigo-c:hover .artigo-c-ler{color:var(--prata-luz)}

/* estados da vitrine */
.vazio{border:1px solid var(--fio);padding:48px 32px;text-align:center;color:var(--fumo);margin-top:46px}
.vazio p{max-width:46ch;margin:0 auto;line-height:1.8}
.carregando{display:flex;align-items:center;gap:10px;color:var(--fumo-fraco);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;margin-top:46px}
.giro{width:13px;height:13px;border:1px solid var(--fio-forte);border-top-color:var(--prata);border-radius:50%;animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.giro{animation-duration:2s}}

/* ══════════════════════════════════════════════════════════
   ARTIGO — LEITURA
   A coluna de texto tem 800px de teto, que a essa escala dá
   ~72 caracteres por linha — a faixa em que o olho não se perde
   ao voltar para a linha seguinte.
   ══════════════════════════════════════════════════════════ */
.leitura{max-width:800px;margin:0 auto}
.art-cab{padding-top:142px;padding-bottom:40px}
.art-tit{font-family:var(--serif);font-weight:300;font-size:clamp(32px,4.6vw,56px);line-height:1.1;letter-spacing:-.012em;margin-top:18px}
.art-meta{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:26px;padding-top:20px;border-top:1px solid var(--fio);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--fumo-fraco)}
.art-capa{margin:0 0 clamp(32px,5vw,56px);aspect-ratio:16/9;overflow:hidden;background:var(--marinho-alto);border:1px solid var(--fio)}
.art-capa img{width:100%;height:100%;object-fit:cover}
.art-corpo{font-size:17px;line-height:1.9;color:var(--leitura);padding-bottom:clamp(56px,8vw,96px)}
.art-corpo p{margin:0 0 1.3em}
.art-corpo h2{font-family:var(--serif);font-size:30px;font-weight:400;color:var(--marfim);margin:2em 0 .7em;line-height:1.2}
.art-corpo h3{font-family:var(--serif);font-size:24px;font-weight:400;color:var(--marfim);margin:1.8em 0 .6em;line-height:1.25}
.art-corpo ul,.art-corpo ol{margin:0 0 1.3em;padding-left:1.3em}
.art-corpo li{margin-bottom:.5em}
.art-corpo blockquote{margin:1.8em 0;padding-left:26px;border-left:1px solid var(--prata);font-family:var(--serif);font-size:23px;font-style:italic;line-height:1.5;color:var(--prata-luz)}
.art-corpo strong{color:var(--marfim);font-weight:600}
.art-corpo em{font-style:italic}
.art-corpo a{color:var(--prata-luz);border-bottom:1px solid var(--fio-forte)}
.art-corpo a:hover{border-bottom-color:var(--prata)}
.art-pe{border-top:1px solid var(--fio);padding:34px 0 0;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}

/* ══════════════════════════════════════════════════════════
   COOKIES (LGPD)
   ══════════════════════════════════════════════════════════ */
.cookies{
  position:fixed;left:var(--gut);right:var(--gut);bottom:20px;z-index:70;
  max-width:560px;padding:20px 22px;
  background:rgba(16,23,37,.97);backdrop-filter:blur(14px);
  border:1px solid var(--fio-forte);
  display:flex;flex-direction:column;gap:14px;
  transform:translateY(16px);opacity:0;transition:opacity .45s,transform .45s;
}
.cookies.visivel{opacity:1;transform:none}
.cookies p{font-size:12.5px;line-height:1.7;color:var(--fumo)}
.cookies a{color:var(--prata);border-bottom:1px solid var(--fio-forte)}
.cookies-acao{display:flex;gap:10px;flex-wrap:wrap}
@media (prefers-reduced-motion:reduce){.cookies{transition:none}}

/* ══════════════════════════════════════════════════════════
   WHATSAPP
   Símbolo oficial, na cor oficial: é o que o visitante reconhece
   de relance. A sobriedade que o Provimento 205/2021 pede fica no
   resto — sem balão de texto, sem "fale agora", sem animação
   chamando atenção.
   ══════════════════════════════════════════════════════════ */
.zap{
  position:fixed;right:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,32px);z-index:65;
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:#25D366;color:#fff;
  box-shadow:0 10px 26px -10px rgba(0,0,0,.7),0 2px 6px rgba(0,0,0,.25);
  transition:background .25s,transform .25s,box-shadow .25s;
}
.zap:hover{background:#1EBE5A;transform:translateY(-2px);box-shadow:0 14px 30px -10px rgba(0,0,0,.75),0 2px 8px rgba(0,0,0,.3)}
.zap:focus-visible{outline:2px solid var(--prata-luz);outline-offset:4px}
.zap svg{width:30px;height:30px}
@media (prefers-reduced-motion:reduce){.zap{transition:none}.zap:hover{transform:none}}
/* sai da frente enquanto o aviso de cookies estiver na tela */
body.com-cookies .zap{transform:translateY(-96px)}
@media (min-width:640px){body.com-cookies .zap{transform:none}}

/* ══════ RODAPÉ ══════ */
.rodape{border-top:1px solid var(--fio);padding-top:52px;padding-bottom:34px}
.rodape-topo{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:44px;padding-bottom:38px;border-bottom:1px solid var(--fio)}
@media (max-width:820px){.rodape-topo{grid-template-columns:1fr}}
.rod-marca{height:54px;width:auto;margin-bottom:22px}
@media (max-width:820px){.rod-marca{height:46px}}
.rod h5{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--fumo-fraco);font-weight:500;margin:0 0 14px}
.rod a,.rod p{display:block;font-size:14px;color:var(--fumo);padding:4px 0;line-height:1.65}
.rod a:hover{color:var(--marfim)}
.rod-pe{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:26px;font-size:11.5px;color:var(--fumo-fraco);line-height:1.7}
.aviso-oab{max-width:70ch}

@media (max-width:760px){
  .capa{min-height:min(660px,92svh)}
  .capa-img{background-position:72% center}
  .capa-veu{background:linear-gradient(0deg,rgba(10,13,20,.96) 0%,rgba(10,13,20,.72) 44%,rgba(10,13,20,.34) 100%)}
  .capa-txt{padding-top:116px;padding-bottom:44px}
  .capa-acao .bt{flex:1 1 auto;justify-content:center}
  .regua-i{flex:1 1 50%}
  .regua-i:nth-child(2n){border-right:0}
  .regua-i:nth-child(-n+2){border-bottom:1px solid var(--fio)}
  .capa-curta{padding-top:116px;padding-bottom:40px}
  .art-cab{padding-top:112px}
  .art-corpo{font-size:16.5px}
  .cookies{left:12px;right:12px;bottom:12px;max-width:none}
}