/* =========================================================
   André Furtado de Mendonça — Advocacia
   Folha de estilo principal
   Referência de layout: wireframe de 1440 px de largura.
   Todas as medidas do wireframe são convertidas para vw
   (1440 px = 100 vw) e limitadas por clamp().
   ========================================================= */

:root{
  --bg:        #eef4ed;   /* fundo do cabeçalho          */
  --secao:     #033A5D;   /* fundo das seções de texto   */
  --texto:     #EEF4ED;   /* texto sobre as seções       */
  --brown:     #8c4304;   /* marrom institucional        */
  --brown-dk:  #6f3503;   /* marrom hover                */
  --navy:      #004b7a;   /* azul do logotipo            */
  --on-brown:  #f4f7f3;   /* texto sobre o marrom        */

  /* largura da coluna de conteúdo: 1020 / 1440 = 70,83% */
  --wrap:      70.83vw;
  --wrap-max:  1020px;

  /* tipografia — medida diretamente no wireframe (px @1440) */
  --fs-title:  clamp(2.15rem, 6.458vw, 5.813rem); /* 93,0px */
  --fs-body:   clamp(1.05rem, 2.486vw, 2.238rem); /* 35,8px */
  --fs-bar:    clamp(1rem,    2.361vw, 2.125rem); /* 34,0px */
  --fs-footer: clamp(.95rem,  2.08vw,  1.875rem); /* 30,0px */

  --lh-body:   1.229;   /* 44 / 35,8 */
  --lh-bar:    1.118;   /* 38 / 34,0 */
  --ls-body:   .075em;  /* entreletras do wireframe */

  /* ritmo vertical — medido no wireframe (px @1440) */
  --pad-sec-t: clamp(2.2rem, 4.861vw, 4.375rem); /*  70px */
  --pad-sec-b: clamp(2.8rem, 7.986vw, 7.188rem); /* 115px */
  --gap-title: clamp(1.6rem, 4.792vw, 4.313rem); /*  69px */
  --gap-bar-t: clamp(2rem,   6.111vw, 5.5rem);   /*  88px */
  --gap-bar-b: clamp(1.2rem, 3.611vw, 3.25rem);  /*  52px */
  --gap-item:  clamp(.7rem,  2.222vw, 2rem);     /*  32px */
  --gap-para:  clamp(1rem,   3.056vw, 2.75rem);  /*  44px */
  --gap-btn:   clamp(.7rem,  1.389vw, 1.25rem);  /*  20px */

  --header-h:  clamp(4rem, 10.07vw, 9.06rem);    /* 145px */
}

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

html{
  scroll-behavior:smooth;
  scroll-padding-top:var(--header-h);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--secao);
  color:var(--texto);
  font-family:"Wix Madefor Text","Wix Madefor Display","Segoe UI",Arial,sans-serif;
  font-size:var(--fs-body);
  font-weight:600;
  line-height:var(--lh-body);
  letter-spacing:var(--ls-body);
  -webkit-font-smoothing:antialiased;
}

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

/* O <picture> existe só para oferecer a versão WebP ao navegador.
   display:contents o remove do cálculo de layout, de modo que o <img>
   continue se comportando exatamente como antes — é o que preserva,
   por exemplo, o retrato circular e a proporção das faixas. */
picture{ display:contents; }

a{ color:inherit; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--brown); color:var(--on-brown);
  padding:.75rem 1.25rem; font-weight:700; text-decoration:none;
}
.skip-link:focus{ left:0; }

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

/* =========================================================
   CABEÇALHO
   Duas caixas claras (logotipo à esquerda, menu à direita)
   sobrepostas à imagem de topo, exatamente como no wireframe.
   ========================================================= */

.site-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:120;   /* acima do painel, para o botão fechar continuar acessível */
  display:flex;
  justify-content:space-between;
  align-items:stretch;
  pointer-events:none;
  background:transparent;
  transition:background-color .3s ease, box-shadow .3s ease;
}

/* ao rolar a página o cabeçalho inteiro fica sólido,
   evitando que o texto apareça pelo vão central */
.site-header.is-scrolled{
  background:var(--bg);
  box-shadow:0 2px 14px rgba(58,28,4,.14);
  pointer-events:auto;
}

.header-box{
  background:var(--bg);
  height:var(--header-h);
  display:flex;
  align-items:center;
  pointer-events:auto;
}

/* caixa do logotipo: 0–590 px, logo em 53,5–523 / 26–120 */
.header-logo{
  padding:0 4.6vw 0 3.72vw;
  text-decoration:none;
}
.header-logo img{
  width:clamp(11rem, 32.6vw, 29.4rem);   /* 470px @1440 */
  height:auto;
}

/* caixa do menu: 1096–1440 px */
.header-menu{
  padding:0 4.8vw;
}

.menu-toggle{
  display:flex;
  align-items:center;
  gap:1.1vw;
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
  color:var(--navy);
  font-family:"Wix Madefor Display","Wix Madefor Text",Arial,sans-serif;
  font-weight:700;
  font-size:clamp(1rem, 2.5vw, 2.25rem);   /* 36px @1440 */
  letter-spacing:.02em;
  line-height:1;
}

.menu-icon{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  width:clamp(1.5rem, 3.4vw, 3.06rem);
  height:clamp(1.1rem, 2.5vw, 2.25rem);
}
.menu-icon i{
  display:block;
  height:clamp(3px, .42vw, 6px);
  background:var(--navy);
  border-radius:2px;
  transition:transform .28s ease, opacity .2s ease;
}

.menu-toggle[aria-expanded="true"] .menu-icon i:nth-child(1){
  transform:translateY(calc(clamp(1.1rem,2.5vw,2.25rem)/2 - clamp(1.5px,.21vw,3px))) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-icon i:nth-child(2){ opacity:0; }
.menu-toggle[aria-expanded="true"] .menu-icon i:nth-child(3){
  transform:translateY(calc(clamp(1.1rem,2.5vw,2.25rem)/-2 + clamp(1.5px,.21vw,3px))) rotate(-45deg);
}

/* ---------- painel de navegação ---------- */

.nav-panel{
  position:fixed;
  top:0; right:0; bottom:0;
  z-index:110;
  width:min(28rem, 86vw);
  background:var(--brown);
  color:var(--on-brown);
  padding:calc(var(--header-h) + 2rem) clamp(1.5rem,3vw,3rem) 2rem;
  transform:translateX(100%);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;
}
.nav-panel[hidden]{ display:block; }        /* animação exige display */
.nav-panel.is-open{ transform:translateX(0); }

.nav-panel ul{ list-style:none; margin:0; padding:0; }
.nav-panel li + li{ margin-top:1.35rem; }
.nav-panel a{
  display:block;
  font-family:"Wix Madefor Display","Wix Madefor Text",Arial,sans-serif;
  font-size:clamp(1.05rem,1.55vw,1.5rem);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  text-decoration:none;
  padding-bottom:.6rem;
  border-bottom:2px solid rgba(244,247,243,.28);
}
.nav-panel a:hover,
.nav-panel a:focus{ border-bottom-color:var(--on-brown); }

.nav-overlay{
  position:fixed; inset:0; z-index:105;
  background:rgba(20,10,2,.5);
  opacity:0;
  pointer-events:none;          /* nunca bloqueia a página quando fechado */
  transition:opacity .35s ease;
}
.nav-overlay[hidden]{ display:block; }
.nav-overlay.is-open{ opacity:1; pointer-events:auto; }

body.nav-open{ overflow:hidden; }

/* =========================================================
   FAIXAS DE IMAGEM
   ========================================================= */

.banner{ margin:0; }
.banner img{
  width:100%;
  aspect-ratio:1440 / 428;          /* proporção das faixas */
  object-fit:cover;
  object-position:center;
}
.banner--hero img{
  aspect-ratio:1440 / 687;          /* proporção do topo */
  min-height:clamp(17rem, 47.7vw, 42.9rem);
}

/* =========================================================
   SEÇÕES
   ========================================================= */

.section{
  background:var(--secao);
  color:var(--texto);
  padding-top:var(--pad-sec-t);
  padding-bottom:var(--pad-sec-b);
}
.wrap > *:last-child{ margin-bottom:0; }

.wrap{
  width:var(--wrap);
  max-width:var(--wrap-max);
  margin-inline:auto;
}

.section-title{
  margin:0 0 var(--gap-title);
  text-align:center;
  font-family:"Wix Madefor Display","Wix Madefor Text",Arial,sans-serif;
  font-weight:500;
  font-size:var(--fs-title);
  line-height:1.077;            /* 100 / 93 */
  letter-spacing:-.005em;
  color:var(--texto);
}

.lead{
  margin:0 0 var(--gap-para);
  text-align:justify;
  text-justify:inter-word;
  font-weight:600;
  hyphens:auto;
}
.lead:last-child{ margin-bottom:0; }

/* =========================================================
   ADVOGADO — retrato e caixa marrom
   ========================================================= */

.portrait{
  margin:clamp(2rem, 7.5vw, 6.75rem) auto clamp(1.6rem, 5.972vw, 5.375rem); /* 108 / 86 px */
  width:clamp(11rem, 27.1vw, 24.4rem);   /* 390px @1440 */
  aspect-ratio:1;
  border-radius:50%;
  overflow:hidden;
}
.portrait img{ width:100%; height:100%; object-fit:cover; }

.bio{
  background:var(--brown);
  color:var(--on-brown);
  font-size:clamp(1.05rem, 2.5vw, 2.25rem);     /* 36,0px */
  line-height:1.111;                            /* 40 / 36 */
  padding:clamp(1.4rem, 2.674vw, 2.406rem) clamp(1.5rem, 5.278vw, 4.75rem) clamp(1.6rem, 3.924vw, 3.531rem);
}
.bio p{
  margin:0 0 1.111em;   /* 40px */
  text-align:justify;
  text-justify:inter-word;
  font-weight:600;
  hyphens:auto;
}
.bio p:last-child{ margin-bottom:0; }

/* =========================================================
   BARRAS DE TÍTULO E LISTAS DE TÓPICOS
   ========================================================= */

.bar{
  margin:var(--gap-bar-t) 0 var(--gap-bar-b);
  background:var(--brown);
  color:var(--on-brown);
  text-align:center;
  text-transform:uppercase;
  font-family:"Wix Madefor Display","Wix Madefor Text",Arial,sans-serif;
  font-weight:700;
  font-size:var(--fs-bar);
  line-height:var(--lh-bar);
  letter-spacing:.005em;
  padding:clamp(1rem, 2.292vw, 2.063rem) clamp(.8rem, 1.5vw, 1.4rem);  /* 33px */
}

.topics{
  list-style:none;
  margin:0;
  padding:0;
}
.topics li{
  position:relative;
  margin:0 0 var(--gap-item);
  padding-left:clamp(1.1rem, 1.6vw, 1.5rem);
  text-align:justify;
  text-justify:inter-word;
  font-weight:600;
  hyphens:auto;
}
.topics li:last-child{ margin-bottom:0; }
.topics li::before{
  content:"·";
  position:absolute;
  left:0;
  top:-.06em;
  font-weight:700;
}

/* =========================================================
   BOTÕES "SAIBA MAIS"
   ========================================================= */

.btn-row{
  margin:var(--gap-btn) 0;
  text-align:center;
}

.btn{
  display:inline-block;
  background:var(--brown);
  color:var(--on-brown);
  text-decoration:none;
  text-transform:uppercase;
  text-align:center;
  font-family:"Wix Madefor Display","Wix Madefor Text",Arial,sans-serif;
  font-weight:700;
  font-size:var(--fs-bar);
  line-height:var(--lh-bar);
  letter-spacing:.005em;
  padding:clamp(.75rem, 1.389vw, 1.25rem) clamp(1.2rem, 3.2vw, 2.9rem);  /* 20px */
  border-radius:clamp(12px, 1.8vw, 26px);
  box-shadow:4px 6px 9px rgba(58,28,4,.32);
  transition:background-color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.btn:hover,
.btn:focus{
  background:var(--brown-dk);
  transform:translate(-1px,-2px);
  box-shadow:5px 8px 12px rgba(58,28,4,.36);
}
.btn:active{
  transform:translate(2px,3px);
  box-shadow:2px 3px 5px rgba(58,28,4,.3);
}

/* =========================================================
   FILETES (seção Parcerias)
   ========================================================= */

.rule{
  border:0;
  height:clamp(3px, .347vw, 5px);
  background:var(--texto);
  margin:clamp(1.5rem, 3.333vw, 3rem) 0 clamp(1.2rem, 2.778vw, 2.5rem);  /* 48 / 40 px */
}

/* =========================================================
   CONTATO
   ========================================================= */

.section--contato{ text-align:center; }
.section--contato .section-title{ margin-bottom:clamp(1rem, 2.361vw, 2.125rem); }  /* 34px */

.contato-intro{
  margin:0 0 clamp(.5rem, .972vw, .875rem);   /* 14px */
  font-size:clamp(.95rem, 2.083vw, 1.875rem); /* 30px */
  font-weight:600;
}

.contato-linha{
  margin:0 0 clamp(.4rem, .625vw, .563rem);   /* 9px */
  font-size:clamp(1.05rem, 2.639vw, 2.375rem);/* 38px */
  line-height:1.4;
}
.contato-linha:last-child{ margin-bottom:0; }
.contato-linha a{
  text-decoration:none;
  border-bottom:2px solid transparent;
  transition:border-color .2s ease;
}
.contato-linha a:hover,
.contato-linha a:focus{ border-bottom-color:var(--texto); }
.contato-linha strong{ font-weight:700; }
.contato-linha span{ font-weight:400; }

/* =========================================================
   RODAPÉ
   ========================================================= */

.site-footer{
  background:var(--brown);
  color:var(--on-brown);
  text-align:center;
  padding:clamp(1.2rem, 2.639vw, 2.375rem) 1rem;  /* 38px */
}
.site-footer p{
  margin:0;
  font-family:"Wix Madefor Text",Arial,sans-serif;
  font-style:italic;
  font-weight:700;
  font-size:var(--fs-footer);
  letter-spacing:.02em;
}

/* =========================================================
   OVERLAY DE IMAGEM (botões "saiba mais")
   ========================================================= */

.lightbox{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(1rem, 4vw, 3rem);
  background:rgba(2,20,33,.94);
  opacity:0;
  pointer-events:none;          /* nunca bloqueia a página quando fechado */
  transition:opacity .25s ease;
  overflow-y:auto;
}
.lightbox[hidden]{ display:flex; }
.lightbox.is-open{ opacity:1; pointer-events:auto; }

.lightbox-figure{
  margin:0;
  max-width:min(100%, 46rem);
  transform:scale(.97);
  transition:transform .25s ease;
}
.lightbox.is-open .lightbox-figure{ transform:scale(1); }

.lightbox-figure img{
  width:100%;
  height:auto;
  max-height:88vh;
  object-fit:contain;
  border-radius:4px;
  box-shadow:0 18px 50px rgba(0,0,0,.5);
}

.lightbox-close{
  position:fixed;
  top:clamp(.75rem, 2vw, 1.5rem);
  right:clamp(.75rem, 2vw, 1.5rem);
  z-index:1;
  width:clamp(2.75rem, 4vw, 3.5rem);
  height:clamp(2.75rem, 4vw, 3.5rem);
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--texto);
  color:var(--secao);
  border:0;
  border-radius:50%;
  font-family:"Wix Madefor Display",Arial,sans-serif;
  font-size:clamp(1.6rem, 2.4vw, 2.1rem);
  line-height:1;
  cursor:pointer;
  transition:background-color .2s ease, transform .15s ease;
}
.lightbox-close:hover,
.lightbox-close:focus{ background:#fff; transform:scale(1.06); }

/* =========================================================
   ADAPTAÇÃO PARA TELAS ESTREITAS
   ========================================================= */

@media (max-width:900px){
  :root{
    --wrap:86vw;
    --fs-title:clamp(1.9rem, 8.2vw, 3.4rem);
    --fs-body:clamp(1rem, 4.3vw, 1.35rem);
    --fs-bar:clamp(.95rem, 4vw, 1.3rem);
    --fs-contact:clamp(1.05rem, 4.8vw, 1.55rem);
    --fs-footer:clamp(.9rem, 3.6vw, 1.15rem);
    --header-h:clamp(3.75rem, 15vw, 5.5rem);
  }

  .header-logo{ padding:0 3vw 0 4vw; }
  .header-logo img{ width:clamp(9rem, 46vw, 16rem); }
  .header-menu{ padding:0 4vw; }
  .menu-toggle{ font-size:clamp(.95rem, 4.2vw, 1.35rem); gap:.6rem; }
  .menu-icon{ width:1.6rem; height:1.15rem; }
  .menu-icon i{ height:3px; }
  .menu-toggle[aria-expanded="true"] .menu-icon i:nth-child(1){ transform:translateY(.4rem) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-icon i:nth-child(3){ transform:translateY(-.4rem) rotate(-45deg); }

  .banner img{ aspect-ratio:16 / 9; max-height:18rem; }
  .banner--hero img{ aspect-ratio:4 / 5; max-height:none; min-height:0; }

  .lead, .bio p, .topics li{ text-align:left; }
  .btn{ display:block; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

@media print{
  .site-header,.nav-panel,.nav-overlay,.skip-link{ display:none !important; }
  body{ background:#fff; }
}