/* =========================================================
   Almeida Senna Advocacia — estilos do site
   Layout convertido do Adobe XD (grade de 1920 px, margens de 140 px)
   ========================================================= */

:root{
  --azul-escuro:#023a49;
  --azul-medio:#2d7387;
  --azul-claro:#2b8194;
  --azul-link:#187589;
  --cinza-texto:#3a4a50;
  --cinza-linha:#d8e0e3;
  --branco:#fff;
  --fundo-claro:#f4f7f8;

  --serif:"EB Garamond","Rialto Piccolo",Georgia,"Times New Roman",serif;
  --sans:"Gill Sans","Gill Sans MT",Lato,Calibri,"Trebuchet MS",sans-serif;

  --largura:1640px;
  --gutter:clamp(20px,5vw,140px);
  --header:clamp(72px,7vw,110px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  color:var(--cinza-texto);
  background:var(--branco);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--azul-link);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4,h5,h6{margin:0 0 .6em;line-height:1.2;color:var(--azul-escuro)}
p{margin:0 0 1.1em}
:focus-visible{outline:2px solid var(--azul-claro);outline-offset:3px}

.container{width:100%;max-width:var(--largura);margin:0 auto;padding:0 var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Cabeçalho ---------- */
.topo{
  position:sticky;top:0;z-index:50;
  background:var(--branco);
  border-bottom:1px solid rgba(2,58,73,.08);
}
.topo__interno{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  height:var(--header);
}
.topo__logo img{height:clamp(42px,4.4vw,62px);width:auto}
.nav{display:flex;align-items:center;gap:clamp(18px,2.6vw,54px)}
.nav a{
  font-family:var(--sans);
  font-size:clamp(12px,1vw,15px);
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--azul-escuro);
  text-decoration:none;
  padding:6px 0;
  border-bottom:2px solid transparent;
  white-space:nowrap;
}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--azul-claro);text-decoration:none}
.nav-botao{
  display:none;background:none;border:0;cursor:pointer;padding:10px;
}
.nav-botao span{display:block;width:26px;height:2px;background:var(--azul-escuro);margin:5px 0;transition:.25s}
.nav-botao[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-botao[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-botao[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Hero da home ---------- */
.hero{
  position:relative;
  min-height:min(64vw,720px);
  display:flex;align-items:center;
  background:var(--azul-escuro) center/cover no-repeat;
  color:var(--branco);
  isolation:isolate;
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(2,58,73,.94) 0%,rgba(2,58,73,.78) 28%,rgba(2,58,73,.18) 62%,rgba(2,58,73,0) 86%);
}
.hero__titulo{
  font-family:var(--serif);
  font-size:clamp(2.1rem,4.4vw,4.5rem);
  font-weight:700;
  line-height:1.16;
  color:var(--branco);
  max-width:16ch;
  margin:clamp(60px,9vw,120px) 0;
}
.hero__titulo em{font-style:italic}

/* ---------- Hero das páginas internas ---------- */
.hero-interno{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  min-height:clamp(240px,26vw,420px);
  background:var(--azul-escuro) center/cover no-repeat;
  text-align:center;
}
.hero-interno::after{content:"";position:absolute;inset:0;background:rgba(2,58,73,.55)}
.hero-interno h1{
  position:relative;z-index:1;margin:0;
  color:var(--branco);
  font-size:clamp(1.7rem,3.2vw,2.5rem);
  font-weight:600;letter-spacing:.02em;
}

/* ---------- Faixa de missões ---------- */
.missoes{background:var(--azul-escuro);padding:clamp(48px,6vw,90px) 0}
.missoes h2{
  color:var(--branco);text-align:center;
  font-size:clamp(1rem,1.4vw,1.35rem);
  letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  margin-bottom:clamp(28px,4vw,54px);
}
.missoes__grade{
  display:grid;gap:clamp(12px,1.2vw,20px);
  grid-template-columns:repeat(4,1fr);
}
.missao{
  position:relative;
  padding:clamp(26px,2.4vw,38px) clamp(20px,2vw,32px) clamp(38px,3.4vw,54px);
  color:var(--branco);
  min-height:clamp(190px,15vw,240px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(16px,1.8vw,26px);text-align:center;
}
.missao:nth-child(1){background:#2b8194}
.missao:nth-child(2){background:#177186}
.missao:nth-child(3){background:#0b6076}
.missao:nth-child(4){background:#064f66}
.missao::after{ /* dobra do canto inferior direito */
  content:"";position:absolute;right:0;bottom:0;
  border-width:0 0 26px 26px;border-style:solid;
  border-color:transparent transparent rgba(2,58,73,.65) transparent;
}
.missao__icone{width:clamp(40px,3.4vw,58px);height:auto}
.missao__icone svg{width:100%;height:auto;display:block}
.missao p{
  margin:0;font-family:var(--serif);
  font-size:clamp(1rem,1.25vw,1.28rem);line-height:1.35;
}

/* ---------- Bloco escritório (imagem + painel) ---------- */
.escritorio{display:grid;grid-template-columns:minmax(0,1.72fr) minmax(0,1fr)}
.escritorio__foto{
  min-height:clamp(280px,34vw,560px);
  background:#dfe7ea center/cover no-repeat;
  filter:grayscale(.25);
}
.escritorio__painel{
  background:var(--azul-escuro);color:var(--branco);
  padding:clamp(36px,4vw,72px) clamp(28px,3.4vw,64px);
  display:flex;flex-direction:column;justify-content:center;
}
.escritorio__painel h2{
  color:var(--branco);
  font-size:clamp(1.05rem,1.4vw,1.4rem);
  letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  margin-bottom:1em;
}
.escritorio__painel p{
  font-family:var(--serif);
  font-size:clamp(1.05rem,1.25vw,1.35rem);
  line-height:1.5;margin:0;
}
.escritorio__painel strong{font-weight:700}

/* ---------- Seções gerais ---------- */
.secao{padding:clamp(48px,6vw,96px) 0}
.secao--clara{background:var(--fundo-claro)}
.secao__titulo{
  text-align:center;
  font-size:clamp(1.05rem,1.5vw,1.45rem);
  letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  color:var(--azul-escuro);
  margin-bottom:clamp(28px,3.6vw,56px);
}
.texto-corrido{max-width:70ch;margin:0 auto;font-family:var(--serif);font-size:clamp(1.05rem,1.3vw,1.4rem);line-height:1.62;color:var(--azul-escuro)}

/* ---------- Acordeão de áreas ---------- */
.acordeao{max-width:1100px;margin:0 auto}
.acordeao__item{border-bottom:1px solid var(--cinza-linha)}
.acordeao__botao{
  width:100%;display:flex;align-items:center;gap:16px;
  background:none;border:0;cursor:pointer;
  padding:22px 8px;text-align:left;
  font-family:var(--sans);font-size:clamp(14px,1.05vw,17px);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--azul-escuro);
}
.acordeao__botao::before{
  content:"";flex:none;
  border-style:solid;border-width:7px 0 7px 10px;
  border-color:transparent transparent transparent var(--azul-claro);
  transition:transform .25s;
}
.acordeao__item.aberto{background:var(--azul-medio);border-bottom-color:var(--azul-medio)}
.acordeao__item.aberto .acordeao__botao{color:var(--branco)}
.acordeao__item.aberto .acordeao__botao::before{
  border-color:var(--branco) transparent transparent transparent;
  border-width:10px 7px 0 7px;
}
.acordeao__corpo{display:none;padding:0 8px 26px 34px;color:var(--branco);max-width:70ch}
.acordeao__item.aberto .acordeao__corpo{display:block}
.acordeao__corpo p{margin:0 0 .8em;font-size:15px;line-height:1.6}
.acordeao__corpo p:last-child{margin-bottom:0}

/* ---------- Botões ---------- */
.botao{
  display:inline-block;
  padding:16px 42px;
  border:1px solid var(--azul-escuro);
  color:var(--azul-escuro);
  font-size:clamp(13px,1vw,15px);letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  background:none;cursor:pointer;transition:.2s;
}
.botao:hover{background:var(--azul-escuro);color:var(--branco);text-decoration:none}
.botao--claro{border-color:var(--branco);color:var(--branco)}
.botao--claro:hover{background:var(--branco);color:var(--azul-escuro)}
.centralizado{text-align:center}

/* ---------- Cards de publicações ---------- */
.posts{display:grid;gap:clamp(24px,2.6vw,44px);grid-template-columns:repeat(3,1fr)}
.post{display:flex;flex-direction:column;background:var(--branco)}
.post__img{aspect-ratio:16/9;object-fit:cover;width:100%}
.post__data{
  margin:18px 0 8px;font-size:14px;letter-spacing:.08em;color:var(--azul-claro);text-transform:uppercase;
}
.post__titulo{font-family:var(--serif);font-size:clamp(1.2rem,1.6vw,1.6rem);margin:0 0 .5em}
.post__titulo a{color:var(--azul-escuro)}
.post__resumo{font-size:15.5px;margin-bottom:1em}
.post__link{font-size:14px;letter-spacing:.1em;text-transform:uppercase;font-weight:600}

/* ---------- Artigo ---------- */
/* A largura máxima soma as margens laterais porque o box-sizing é border-box:
   assim a coluna de texto continua com 900px no desktop e o artigo ganha as
   margens do site no celular, em vez de encostar na borda da tela. */
.artigo{
  max-width:calc(900px + 2 * var(--gutter));
  margin:0 auto;
  padding:clamp(40px,5vw,80px) var(--gutter);
}
.artigo__meta{font-family:var(--serif);font-size:1.2rem;color:var(--branco);opacity:.92}
.artigo h2{font-size:clamp(1.4rem,2vw,1.9rem);margin-top:1.8em}
.artigo h3{font-size:clamp(1.2rem,1.7vw,1.5rem);margin-top:1.6em}
.artigo h4{font-size:1.2rem;margin-top:1.4em}
.artigo h5{font-size:1.05rem;margin-top:1.3em}
.artigo h6{font-size:.95rem;text-transform:uppercase;letter-spacing:.1em;margin-top:1.2em}
.artigo p{font-size:clamp(16px,1.15vw,19px);line-height:1.72}
.artigo ul,.artigo ol{
  font-size:clamp(16px,1.15vw,19px);line-height:1.72;
  margin:0 0 1.1em;padding-left:1.4em;
}
.artigo li{margin-bottom:.6em}
.artigo li::marker{color:var(--azul-claro)}
.artigo blockquote{
  margin:2em 0;padding:6px 0 6px 28px;border-left:3px solid var(--azul-claro);
  font-family:var(--serif);font-size:1.25rem;color:var(--azul-escuro);
}
.artigo blockquote footer{margin-top:.6em;font-size:1rem;color:var(--azul-claro)}
.hero-artigo{min-height:clamp(320px,40vw,620px);align-items:flex-end;text-align:left}
.hero-artigo .container{position:relative;z-index:1;padding-bottom:clamp(36px,5vw,80px)}
.hero-artigo h1{
  color:var(--branco);font-weight:700;text-align:left;
  font-size:clamp(1.9rem,4vw,4rem);max-width:22ch;margin:.3em 0;
}

/* ---------- Sócio ---------- */
.socio{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
.socio__foto{
  width:100%;aspect-ratio:344/400;
  background-image:url('../img/socio-foto.jpg');
  background-size:cover;background-position:center top;background-repeat:no-repeat;
  border-top:4px solid var(--azul-claro);
}

/* Imagem protegida: sem menu de contexto, sem arraste, sem seleção.
   A camada ::after intercepta clique longo no mobile e toque/arraste no desktop. */
.protegida{
  position:relative;
  -webkit-user-select:none;-moz-user-select:none;user-select:none;
  -webkit-user-drag:none;-webkit-touch-callout:none;
}
.protegida::after{
  content:"";position:absolute;inset:0;background:transparent;
}
.protegida img{pointer-events:none}
/* Ativada por JS quando a janela perde o foco (ferramentas de captura de tela) */
.protegida.oculta{filter:blur(22px)}
.socio__texto{font-family:var(--serif);font-size:clamp(1.05rem,1.25vw,1.32rem);color:var(--azul-escuro);line-height:1.55}
.socio__texto ul{padding-left:1.1em;margin:0 0 1.2em}
.socio__texto li{margin-bottom:.5em}

/* ---------- Contato ---------- */
.contato{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,56px);max-width:1100px;margin:0 auto}
.contato h3{font-size:1.1rem;letter-spacing:.1em;text-transform:uppercase}

/* ---------- Formulário de contato ---------- */
.formulario{display:grid;gap:18px;max-width:520px}
.formulario__nota{font-size:.92rem;color:var(--cinza-texto);margin:0}
.obrigatorio{color:#b3261e}
.campo{display:grid;gap:6px}
.campo label{font-size:.95rem;color:var(--azul-escuro)}
.campo__opcional{color:var(--cinza-texto);font-weight:400}
.campo input,.campo textarea{
  width:100%;padding:12px;
  font-family:var(--sans);font-size:1rem;color:var(--cinza-texto);
  background:var(--branco);
  border:1px solid var(--cinza-linha);border-radius:0;
}
.campo textarea{resize:vertical}
.campo input:focus,.campo textarea:focus{outline:2px solid var(--azul-claro);outline-offset:0;border-color:var(--azul-claro)}
.campo input[aria-invalid="true"],.campo textarea[aria-invalid="true"]{border-color:#b3261e;background:#fdf6f5}
.campo__erro{margin:0;font-size:.88rem;color:#b3261e}
.campo__consentimento{display:flex;align-items:flex-start;gap:10px;line-height:1.45}
.campo__consentimento input{width:auto;flex:0 0 auto;margin-top:.25em;padding:0}

/* Armadilha anti-robô: fora da tela, mas não display:none (robôs ignoram o campo oculto) */
.campo-armadilha{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.formulario__status{margin:0;padding:12px 14px;font-size:.95rem;border-left:4px solid var(--azul-claro);background:var(--fundo-claro)}
.formulario__status.erro{border-left-color:#b3261e;background:#fdf6f5;color:#8c1d18}
.formulario__status.sucesso{border-left-color:var(--azul-claro);color:var(--azul-escuro)}

/* ---------- Rodapé ---------- */
.rodape{background:var(--azul-escuro);color:var(--branco);padding:clamp(44px,5vw,78px) 0 0}
.rodape a{color:var(--branco)}
.rodape__interno{
  display:grid;grid-template-columns:auto 1px minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,3.4vw,64px);align-items:center;
}
.rodape__monograma{width:clamp(70px,6vw,100px);opacity:.95}
.rodape__divisor{background:rgba(255,255,255,.35);width:1px;height:100%;min-height:120px}
.rodape__bloco{font-size:clamp(14px,1vw,17px);line-height:1.75}
.rodape__bloco strong{font-weight:700}
.rodape__creditos{
  margin-top:clamp(32px,4vw,60px);
  border-top:1px solid rgba(255,255,255,.18);
  background:var(--branco);color:var(--azul-escuro);
}
.rodape__creditos .container{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:18px;padding-bottom:18px;
  font-family:var(--serif);font-style:italic;font-size:15px;
}
.rodape__creditos a{color:var(--azul-escuro)}

/* ---------- Responsivo ---------- */
@media (max-width:1100px){
  .missoes__grade{grid-template-columns:repeat(2,1fr)}
  .posts{grid-template-columns:repeat(2,1fr)}
  .escritorio{grid-template-columns:1fr}
  .escritorio__foto{min-height:320px}
  .rodape__interno{grid-template-columns:auto 1px minmax(0,1fr);}
  .rodape__interno .rodape__bloco:last-child{grid-column:3}
}
@media (max-width:860px){
  .nav-botao{display:block}
  .nav{
    position:absolute;left:0;right:0;top:var(--header);
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--branco);
    border-bottom:1px solid var(--cinza-linha);
    padding:8px var(--gutter) 20px;
    display:none;
  }
  .nav.aberto{display:flex}
  .nav a{width:100%;padding:14px 0;border-bottom:1px solid var(--cinza-linha)}
  .socio{grid-template-columns:1fr}
  .socio__foto{max-width:320px}
  .contato{grid-template-columns:1fr}
  .rodape__interno{grid-template-columns:1fr;text-align:left}
  .rodape__divisor{display:none}
}
@media (max-width:620px){
  .missoes__grade{grid-template-columns:1fr}
  .posts{grid-template-columns:1fr}
  .hero{min-height:520px}
  .hero::after{background:linear-gradient(180deg,rgba(2,58,73,.92) 0%,rgba(2,58,73,.78) 60%,rgba(2,58,73,.55) 100%)}
}
@media print{
  .topo,.nav-botao,.rodape{display:none}
  /* não sai na impressão nem em "imprimir como PDF" */
  .protegida{background-image:none !important;visibility:hidden}
}