:root{
    /* Fundo medido no arquivo da logo do cliente (LOGO.jpg): #F0EFEB — quase
       neutro, 5 pontos de calor. A primeira versão usou #EFEBE1, com 14, e o
       site inteiro puxou para o bege. */
    --ground:#F0EFEB;
    --surface:#F8F8F6;
    --panel:#33302A;       /* charcoal suave da logo */
    --panel-ink:#F0EFEB;
    --ink:#3A372F;         /* charcoal suave (não preto puro), como o texto da logo */
    --ink-soft:#6E685C;
    --line:#E2E0DA;        /* sem o amarelo: num fundo neutro ele gritava */
    --line-strong:#CAC8C0;
    --accent:#8A7550;      /* bronze quente, dentro da paleta creme */
    --marca:#504F4D;       /* cor exata da logo, como veio do vetor */
    --foto-mob:56dvh;      /* altura da faixa de foto no celular (o JS recalcula) */
    --mob-overlap:0.26;    /* quanto o painel de texto monta sobre a foto */
    --painel:rgba(248,248,246,.90);      /* painel translúcido sobre foto */
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  body{
    margin:0;background:var(--ground);color:var(--ink);
    font-family:"Spectral",Georgia,"Times New Roman",serif;
    font-size:18px;line-height:1.7;font-weight:400;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:1080px;margin:0 auto;padding-inline:clamp(20px,5vw,56px)}
  a{color:inherit}

  /* ---------- header ---------- */
  header{padding-top:clamp(28px,4vw,44px);text-align:center;
    background:var(--ground);position:sticky;top:0;z-index:40;
    will-change:transform;transition:transform .35s ease}
  header.is-hidden{transform:translateY(-100%)}
  @media (prefers-reduced-motion:reduce){header{transition:none}}
  /* logo em SVG (arquivo próprio); a cor já vem do vetor em --marca */
  .brandmark{display:block;margin:0 auto;width:min(760px,88vw)}
  .brandmark img{display:block;width:100%;height:auto}
  .brandmark--sm{width:min(420px,72vw)}
  nav{margin-top:clamp(22px,3.5vw,34px);display:flex;justify-content:center;
    flex-wrap:wrap;gap:clamp(22px,5vw,54px)}
  nav a{font-family:"Marcellus",serif;text-transform:uppercase;letter-spacing:.2em;
    font-size:12.5px;color:var(--ink-soft);text-decoration:none;padding-top:14px;
    position:relative;transition:color .2s}
  nav a::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
    width:46px;height:1px;background:var(--line-strong)}
  nav a:hover{color:var(--accent)}
  .divider{height:1px;background:var(--line);margin-top:clamp(24px,3.5vw,34px)}

  /* ---------- hero ---------- */
  /* parallax: a foto é mais alta que a moldura e sobe mais devagar que a página */
  main{position:relative}
  /* hero ocupa a tela inteira: com o cabeçalho escondido, a seção 2 fica
     exatamente na borda de baixo, sem espiar */
  .hero{display:grid;grid-template-columns:1.05fr .95fr;
    min-height:calc(105vh + 0px);
    min-height:calc(105dvh + 0px);
    background-color:var(--panel);overflow:clip;position:relative}
  .hero-bg{position:absolute;left:0;right:0;top:0;z-index:0;
    --excesso:.30;--aceleracao:2.6;height:calc(100% * (1 + var(--excesso)));
    background-image:url("../img/maceio-pc.jpg");background-size:cover;background-position:center top;
    will-change:transform}
  .hero .left,.hero .right{position:relative;z-index:1}
  /* Painel translúcido e borda reta — escolha do Melqui (11/09). Foram testadas
     uma borda dissolvida em 130px e um painel opaco; ele ficou com o original.
     A foto transparecendo por trás do texto é o efeito, não um defeito. */
  .hero .left{background:var(--painel);display:flex;flex-direction:column;justify-content:center;
    padding:clamp(36px,5vw,66px);padding-left:clamp(20px,5vw,56px);
    /* o acréscimo embaixo empurra o texto para cima, recentrando-o na área
       visível da primeira tela em vez do hero inteiro (o JS calcula o valor) */
    padding-bottom:calc(clamp(36px,5vw,66px) + var(--hero-shift,0px))}
  .eyebrow{font-family:"Marcellus",serif;text-transform:uppercase;letter-spacing:.26em;
    font-size:12px;color:var(--accent);margin:0 0 20px;display:flex;align-items:center;gap:12px}
  .eyebrow::before{content:"";width:26px;height:1px;background:var(--accent);opacity:.7}
  .hero h1{font-family:"Marcellus",serif;font-weight:400;margin:0 0 22px;
    font-size:clamp(30px,4.8vw,46px);line-height:1.12;letter-spacing:.01em;text-wrap:balance}
  .hero p.lede{margin:0;color:var(--ink-soft);max-width:46ch;font-size:clamp(16px,1.9vw,18.5px)}
  .cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:32px}
  .btn{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
    font-family:"Marcellus",serif;letter-spacing:.05em;font-size:14px;padding:12px 24px;
    border-radius:1px;transition:.22s}
  .btn-primary{background:var(--panel);color:var(--panel-ink);border:1px solid var(--panel)}
  .btn-primary:hover{background:#3b382f;border-color:#3b382f}
  .btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line-strong)}
  .btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
  svg.ico{width:17px;height:17px;flex:none}

  .hero .right{background:transparent}
  /* o hero começa atrás do cabeçalho (que é opaco, então nada muda em repouso):
     assim, quando ele sai, o que se revela é a foto — e não a faixa vazia que
     ele ocupava. Cresce a mesma medida para a seção 2 continuar fora da tela. */
  @media(min-width:761px){
    .hero{margin-top:calc(-1 * var(--hh,0px));
      /* A seção começa em 0 (puxada para trás do cabeçalho) e o cabeçalho sai
         com 60px de rolagem. Nesse instante a tela mostra de 60 a 60+altura,
         então altura da tela + 60 já a deixaria 100% à mostra. Mas o cabeçalho
         leva 0,35s deslizando, e nesse tempo a rolagem continua — com o mínimo
         exato, a seção 2 aparecia antes de a animação terminar. Os 130px cobrem
         esse trecho. Antes eram 105% + o cabeçalho: sobravam quase 180px. */
      min-height:calc(100vh + 130px + 0px);
      min-height:calc(100dvh + 130px + 0px)}
  }
  /* ---------- celular: foto em faixa própria, recorte dedicado ---------- */
  @media(max-width:760px){
    /* fundo creme (e não o charcoal do desktop): assim o painel pode ser
       translúcido — sobre a foto ela transparece, fora dela lê como creme */
    .hero{grid-template-columns:1fr;min-height:auto;background-color:var(--ground)}
    .hero .right{min-height:var(--foto-mob);order:-1}
    /* a foto cobre o hero inteiro e dissolve na base, para continuar
       aparecendo por trás de todo o bloco de texto */
    .hero-bg{background-image:url("../img/maceio-celular.jpg");
      -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 55%,rgba(0,0,0,0) 92%);
      mask-image:linear-gradient(to bottom,#000 0,#000 55%,rgba(0,0,0,0) 92%)}
    /* o painel de texto sobe sobre a base da foto, para os botões
       entrarem na primeira tela sem precisar rolar */
    .hero .left{background:var(--painel);
      padding-block:clamp(24px,6vw,40px);
      margin-top:calc(var(--foto-mob) * -1 * var(--mob-overlap));
      z-index:2}
  }
  /* notebooks de tela baixa: aperta a tipografia do hero pelo mesmo motivo */
  @media(min-width:761px) and (max-height:760px){
    .hero h1{font-size:clamp(28px,3.6vw,36px);margin-bottom:16px}
    .hero p.lede{font-size:16.5px;line-height:1.55}
    .hero .eyebrow{margin-bottom:14px}
    .hero .cta{margin-top:24px}
  }
  /* telas de celular muito baixas: aperta um pouco a tipografia
     para o bloco de texto continuar cabendo na primeira tela */
  @media(max-width:760px) and (max-height:680px){
    .hero h1{font-size:clamp(26px,7vw,32px);margin-bottom:16px}
    .hero p.lede{font-size:15.5px;line-height:1.55}
    .hero .eyebrow{margin-bottom:14px}
    .cta{margin-top:22px}
  }

  /* ---------- atuação / formação ---------- */
  section.block{padding-block:clamp(52px,8vw,92px);
    background:var(--ground);position:relative;z-index:1}
  .block .eyebrow{justify-content:center}
  .block h2{font-family:"Marcellus",serif;font-weight:400;text-align:center;
    font-size:clamp(24px,3.6vw,33px);margin:0 auto 44px;letter-spacing:.01em;text-wrap:balance}
  .creds{max-width:760px;margin:0 auto;display:flex;flex-direction:column}
  /* coluna do rótulo com largura fixa para todas as linhas alinharem */
  .cred{display:grid;grid-template-columns:140px 1fr;gap:clamp(16px,3vw,30px);
    padding:24px 0;border-top:1px solid var(--line);align-items:baseline}
  /* onde houver subgrid, a coluna se ajusta sozinha ao rótulo mais longo */
  @supports (grid-template-columns:subgrid){
    .creds{display:grid;grid-template-columns:max-content 1fr;
      column-gap:clamp(16px,3vw,30px)}
    .cred{grid-column:1/-1;grid-template-columns:subgrid}
  }
  .cred:last-child{border-bottom:1px solid var(--line)}
  .cred .rn{font-family:"Marcellus SC","Marcellus",serif;color:var(--accent);
    font-size:15px;letter-spacing:.1em;font-variant-numeric:tabular-nums;white-space:nowrap}
  .cred h3{font-family:"Marcellus",serif;font-weight:400;font-size:20px;margin:0 0 5px;letter-spacing:.01em}
  .cred p{margin:0;color:var(--ink-soft);font-size:16.5px;max-width:58ch}
  @media(max-width:560px){.cred{grid-template-columns:1fr;gap:6px}}

  /* ---------- cartão do advogado ---------- */
  /* Pedido do cliente (11/09), com a referência de um site de outro advogado:
     foto, nome, OAB e um resumo. Formato igual ao da referência — foto em
     cima, texto embaixo — em todas as telas, e não só no celular.
     Por isso o cartão é limitado a 440px: aberto na largura do bloco, a foto
     em cima viria com quase mil pixels de altura.
     Cor da foto é a original — foi o que ele pediu quando mandou o arquivo. */
  section.perfil{background:var(--ground);padding-top:clamp(8px,1.5vw,16px)}
  /* borda escura, cantos arredondados e uma sombra de leve: ele pediu o quadro
     "bem destacado". A sombra é de 7% para separar o cartão do fundo sem virar
     caixa flutuante — o resto do site é chapado.
     A mesma cor vai na foto: só o quadro escuro deixaria o contorno claro da
     foto solto no meio, e isso lê como erro. */
  .perfil-cartao{--borda:#6E685C;
    max-width:360px;margin:0 auto;
    background:var(--surface);border:1px solid var(--borda);
    border-radius:14px;box-shadow:0 2px 18px rgba(58,55,47,.07);
    padding:clamp(26px,3.4vw,34px)}
  /* height:auto é obrigatório: o atributo height="900" do <img> entra como
     dica de apresentação e, sem isto, vence o aspect-ratio — a foto saía com
     a altura natural do arquivo, quase um metro de retrato. */
  /* a foto nao encosta nas laterais: fica menor que a coluna e centralizada,
     para sobrar respiro dentro do cartao. Pedido do cliente (11/09). */
  .perfil-foto{width:78%;max-width:250px;height:auto;aspect-ratio:4/5;
    object-fit:cover;display:block;margin:0 auto clamp(20px,2.8vw,26px);
    border:1px solid var(--borda);border-radius:10px}
  /* um passo abaixo do resto do site: o cartão é nota de rodapé sobre quem
     assina, não um bloco de conteúdo. Pedido do cliente (11/09). */
  .perfil-texto h3{font-family:"Marcellus",serif;font-weight:400;
    font-size:clamp(17px,2vw,19px);line-height:1.24;letter-spacing:.01em;
    margin:0 0 12px;text-wrap:balance}
  .perfil-texto .bio{margin:0;color:var(--ink-soft);font-size:14px;line-height:1.64}
  /* as outras section.block centralizam o eyebrow; aqui tudo é alinhado à
     esquerda, como na referência */
  .perfil .eyebrow{margin-bottom:12px;justify-content:flex-start}

  /* ---------- contato ---------- */
  /* Era um painel translúcido sobre a 2ª foto (a biblioteca). O cliente pediu
     para tirar a foto (11/09), então o bloco fecha sozinho: fundo claro um
     tom acima da seção anterior e um fio em cima, que é o que separa os dois. */
  section.contato{background:var(--surface);text-align:center;
    border-top:1px solid var(--line);
    position:relative;z-index:2}
  .contato .eyebrow{justify-content:center}
  .contato .eyebrow::before{display:none}
  .contato h2{font-family:"Marcellus",serif;font-weight:400;font-size:clamp(24px,3.6vw,34px);
    margin:0 0 14px;letter-spacing:.01em}
  .contato p{color:var(--ink-soft);max-width:44ch;margin:0 auto 30px}
  .contato .cta{justify-content:center}


  footer{text-align:center;padding-block:38px;
    background:var(--ground);position:relative;z-index:2}
  footer .brand{font-size:15px;letter-spacing:.2em}
  footer .meta{font-family:"Marcellus",serif;letter-spacing:.14em;text-transform:uppercase;
    font-size:11px;color:var(--ink-soft);margin-top:10px}
  a:focus-visible,.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}