/* =====================================================================
   SOUZA & SANSEVERINO ADVOGADOS ASSOCIADOS
   Folha de estilo principal
   =====================================================================

   >>> TROCA DE IMAGENS <<<
   Todas as imagens do site estão listadas no bloco :root logo abaixo.
   Para trocar, aponte o caminho do novo arquivo, por exemplo:
        --img-hero: url("../img/foto-escritorio.jpg");

   >>> TEMA CLARO E ESCURO <<<
   Cada seção carrega a classe .t-light (fundo branco) ou .t-dark (fundo
   azul). As duas classes redefinem as mesmas variáveis de cor, então os
   componentes funcionam igual nos dois fundos. Para inverter uma seção,
   basta trocar a classe no HTML.
   ===================================================================== */

:root{
  /* ---------- IMAGENS (edite apenas esta lista) ---------- */
  --img-hero:      url("../img/hero.jpg");        /* estátua da capa          */
  --img-advogado:  url("../img/advogado.jpg");    /* retrato, seção Escritório*/
  --img-sobre-2:   url("../img/sobre-02.jpg");    /* foto menor, detalhe      */
  --img-faixa:     url("../img/faixa.jpg");       /* faixa de destaque        */
  --img-rodape:    url("../img/rodape.jpg");      /* rodapé                   */

  /* Marcador temporário do retrato. Enquanto advogado.jpg não existir, o
     navegador ignora a primeira camada e mostra esta. Assim que o arquivo
     for salvo, o marcador desaparece sozinho, sem mexer em nada. */
  --img-advogado-fallback: url("../img/advogado-placeholder.svg");

  /* Enquadramento das fotos. Aceita os mesmos valores de background-position,
     por exemplo 50% 30%. Ajuste se o corte não ficar bom. */
  --pos-hero:     50% 38%;
  --pos-advogado: 50% 12%;

  /* ---------- PALETA ---------- */
  --navy:    #0D2036;
  --navy-2:  #12293F;
  --navy-3:  #17334D;
  --bone:    #F6F4EF;
  --bone-2:  #EFEBE0;
  --brass:   #B08D4F;

  /* ---------- TIPOGRAFIA ---------- */
  --serif: "Fraunces", "Times New Roman", serif;
  --sans:  "Archivo", "Helvetica Neue", Arial, sans-serif;

  /* ---------- ESPAÇO ---------- */
  --pad: clamp(1.25rem, 4.4vw, 5.5rem);
  --sec: clamp(5.5rem, 11vw, 11rem);

  /* ---------- MOVIMENTO ---------- */
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-io: cubic-bezier(.65,.05,.36,1);
}

/* ---------- TEMAS DE SEÇÃO ---------- */
.t-dark{
  --bg:      var(--navy);
  --bg-2:    var(--navy-2);
  --fg:      var(--bone);
  --muted:   rgba(246,244,239,.64);
  --line:    rgba(246,244,239,.16);
  --gold:    #CDA765;
}
.t-light{
  --bg:      var(--bone);
  --bg-2:    var(--bone-2);
  --fg:      var(--navy);
  --muted:   rgba(13,32,54,.66);
  --line:    rgba(13,32,54,.14);
  --gold:    #8B6A31;
}
.t-dark,.t-light{ background:var(--bg); color:var(--fg); }

/* ============ BASE ============ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

/* Com a rolagem amortecida ligada, o scroll-behavior nativo precisa sair de
   cena: os dois juntos disputariam a mesma posição a cada quadro. */
html.has-smooth{ scroll-behavior:auto; }
html.is-locked, body.is-locked{ overflow:hidden; }

body{
  background:var(--navy);
  color:var(--bone);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(.95rem,1.02vw,1.05rem);
  line-height:1.68;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; background:none; border:none; }
button{ cursor:pointer; }
ul{ list-style:none; }
::selection{ background:var(--brass); color:#0D2036; }
body::-webkit-scrollbar{ width:0; }

/* ============ TIPOS UTILITÁRIOS ============ */
.h-display{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.1rem,5vw,4.5rem);
  line-height:1.03;
  letter-spacing:-.025em;
  font-variation-settings:"SOFT" 0,"WONK" 1;
}

/* ============ GRÃO ============
   Textura estática. Uma versão animada obriga o navegador a repintar a
   tela inteira várias vezes por segundo e trava a rolagem. */
.grain{
  position:fixed; inset:0;
  z-index:9998; pointer-events:none;
  opacity:.04; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ PRELOADER ============ */
.loader{
  position:fixed; inset:0; z-index:10000;
  background:var(--navy);
  display:grid; place-items:center;
}
.loader__inner{ text-align:center; width:min(80vw,400px); }
.loader__mark{
  width:64px; margin:0 auto 1.7rem;
  animation:fadeUp .9s .1s var(--ease) both;
}
.loader__word{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.1rem,2.6vw,1.7rem);
  letter-spacing:.1em; color:var(--bone);
  animation:fadeUp .9s .28s var(--ease) both;
}
.loader__word i{ font-style:normal; color:var(--brass); }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(24px) } to{ opacity:1; transform:none } }

.loader__bar{
  margin-top:1.8rem; height:1px; width:100%;
  background:rgba(246,244,239,.16); overflow:hidden;
}
.loader__bar i{ display:block; height:100%; width:0%; background:var(--brass); }
.loader.is-out .loader__inner{ opacity:0; transform:translateY(-16px); transition:.5s var(--ease); }
.loader.is-out{ transition:clip-path .9s var(--ease) .12s; clip-path:inset(0 0 100% 0); }
.loader.is-done{ display:none; }

/* ============ CURSOR ============ */
.cursor,.cursor-dot{ position:fixed; top:0; left:0; z-index:9999; pointer-events:none; }
.cursor{
  width:44px; height:44px; margin:-22px 0 0 -22px;
  border:1px solid rgba(176,141,79,.85); border-radius:50%;
  display:grid; place-items:center;
  transition:width .35s var(--ease),height .35s var(--ease),
             margin .35s var(--ease),background .35s var(--ease),
             border-color .35s var(--ease),opacity .3s;
  opacity:0;
}
.cursor-dot{
  width:5px; height:5px; margin:-2.5px 0 0 -2.5px; border-radius:50%;
  background:var(--brass); opacity:0; transition:opacity .3s;
}
.cursor.is-on,.cursor-dot.is-on{ opacity:1; }

/* Sobre elementos clicáveis o anel só abre um pouco e firma a borda dourada.
   Nada de círculo cheio com rótulo dentro: naquele tamanho virava uma bola
   amarela cobrindo o que estava embaixo. */
.cursor.is-hover{
  width:60px; height:60px; margin:-30px 0 0 -30px;
  border-color:rgba(176,141,79,.9);
}
@media (hover:none),(pointer:coarse){ .cursor,.cursor-dot{ display:none; } }

/* ============ PROGRESSO ============ */
.scrollbar{ position:fixed; top:0; left:0; right:0; height:2px; z-index:9000; }
.scrollbar i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--brass),#DCC08A);
}

/* ============ HEADER ============
   O cabeçalho usa sempre a paleta escura, porque flutua sobre a capa e,
   ao fixar, ganha fundo azul. */
.header{
  --fg:var(--bone); --line:rgba(246,244,239,.2); --gold:#CDA765;
  position:fixed; top:0; left:0; right:0; z-index:900;
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem; padding:1.4rem var(--pad); color:var(--fg);
  transition:padding .5s var(--ease),background .5s var(--ease),
             border-color .5s var(--ease),transform .6s var(--ease);
  border-bottom:1px solid transparent;
}
.header.is-stuck{
  padding:.8rem var(--pad);
  background:rgba(13,32,54,.9);
  backdrop-filter:blur(10px);
  border-bottom-color:rgba(246,244,239,.14);
}

.brand{ display:flex; align-items:center; gap:.9rem; }
.brand__mark{ width:34px; transition:transform .5s var(--ease); }
.brand:hover .brand__mark{ transform:translateY(-2px) rotate(-3deg); }
.brand__text{ display:flex; flex-direction:column; line-height:1.2; }
.brand__text b{
  font-family:var(--serif); font-weight:400; font-size:1.06rem;
  letter-spacing:.03em;
}
.brand__text b i{ font-style:normal; color:var(--brass); }
.brand__text em{
  font-style:normal; font-size:.58rem; letter-spacing:.28em;
  text-transform:uppercase; color:rgba(246,244,239,.6);
}

.nav{ display:flex; gap:.35rem; }
.nav__link{ position:relative; padding:.5rem .9rem; font-size:.82rem; letter-spacing:.04em; }
.nav__link span{ display:block; transition:transform .45s var(--ease),opacity .3s var(--ease); }
.nav__link::after{
  content:attr(data-txt); position:absolute; left:.9rem; top:.5rem;
  color:#DCC08A; opacity:0; transform:translateY(9px);
  transition:transform .45s var(--ease),opacity .3s var(--ease);
  pointer-events:none;
}
.nav__link:hover span{ transform:translateY(-9px); opacity:0; }
.nav__link:hover::after{ transform:none; opacity:1; }
.nav__link::before{
  content:""; position:absolute; left:.9rem; right:.9rem; bottom:.3rem; height:1px;
  background:var(--brass); transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--ease);
}
.nav__link.is-active::before,.nav__link:hover::before{ transform:scaleX(1); transform-origin:left; }

.header__right{ display:flex; align-items:center; gap:1rem; }

/* ============ BOTÕES ============ */
/* Botões: troca de cor direta, sem preenchimento subindo por baixo e sem
   efeito magnético. Num bloco de capa esse tipo de movimento chama mais
   atenção que o próprio texto do botão. */
.btn{
  display:inline-flex; align-items:center; gap:.75rem;
  padding:1.05rem 1.9rem; border-radius:100px;
  font-size:.78rem; letter-spacing:.09em; text-transform:uppercase; font-weight:500;
  border:1px solid var(--line); color:var(--fg); background-color:transparent;
  transition:background-color .32s ease,color .32s ease,border-color .32s ease;
}
.btn:hover{ background-color:var(--fg); color:var(--bg); border-color:var(--fg); }
.btn__arrow{
  width:15px; height:8px; display:block; flex:0 0 15px;
  border-bottom:1px solid currentColor; border-right:1px solid currentColor;
  transform:skewX(45deg) scaleY(.7); transition:transform .32s ease;
}
.btn:hover .btn__arrow{ transform:skewX(45deg) scaleY(.7) translateX(3px); }
.btn--sm{ padding:.72rem 1.35rem; font-size:.7rem; }
.btn--gold{ background-color:var(--brass); border-color:var(--brass); color:#0D2036; }
.btn--gold:hover{ background-color:var(--fg); border-color:var(--fg); color:var(--bg); }
.btn--ghost{ background-color:transparent; }
.btn--full{ width:100%; justify-content:center; }

/* ============ BURGER E MENU ============ */
.burger{
  display:none; width:44px; height:44px; position:relative;
  border:1px solid var(--line); border-radius:50%;
}
.burger i{
  position:absolute; left:13px; width:18px; height:1px; background:var(--bone);
  transition:.45s var(--ease);
}
.burger i:nth-child(1){ top:19px; }
.burger i:nth-child(2){ top:24px; width:12px; }
.burger.is-open i:nth-child(1){ top:21.5px; transform:rotate(45deg); }
.burger.is-open i:nth-child(2){ top:21.5px; width:18px; transform:rotate(-45deg); }

/* O menu precisa ficar realmente escondido quando fechado. Só tirar os
   cliques não basta: as bordas dos itens continuam desenhadas e, como o
   bloco é fixo, elas aparecem como linhas paradas em cima da página.
   A visibilidade só volta a esconder depois que a cortina termina de subir. */
.menu{
  position:fixed; inset:0; z-index:880;
  pointer-events:none; visibility:hidden; overflow:hidden;
  color:var(--bone);
  transition:visibility 0s .7s;
}
.menu.is-open{ visibility:visible; transition-delay:0s; }
/* Painel do tamanho da tela, que desce como cortina.
   Não usar círculo gigante aqui: um elemento com centenas de vmax passa do
   limite de textura da GPU, o navegador fatia a camada e as emendas das
   fatias aparecem como linhas finas fixas na tela, mesmo com o menu fechado. */
.menu__bg{
  position:absolute; inset:0;
  background:var(--navy-2);
  transform:translateY(-101%);
  transition:transform .7s var(--ease);
}
.menu.is-open{ pointer-events:auto; }
.menu.is-open .menu__bg{ transform:none; }
.menu__body{
  position:relative; height:100%;
  display:flex; flex-direction:column; justify-content:center;
  padding:6rem var(--pad) 3rem;
}
.menu__list li{ overflow:hidden; border-bottom:1px solid rgba(246,244,239,.16); }
.menu__list a{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:1.1rem 0; font-family:var(--serif); font-size:clamp(1.7rem,7.5vw,2.9rem);
  transform:translateY(110%); transition:transform .7s var(--ease),color .35s;
}
.menu.is-open .menu__list a{ transform:none; }
.menu__list li:nth-child(1) a{ transition-delay:.22s }
.menu__list li:nth-child(2) a{ transition-delay:.29s }
.menu__list li:nth-child(3) a{ transition-delay:.36s }
.menu__list li:nth-child(4) a{ transition-delay:.43s }
.menu__list li:nth-child(5) a{ transition-delay:.5s }
.menu__list a b{ font-family:var(--sans); font-size:.7rem; color:var(--brass); font-weight:400; }
.menu__list a:hover{ color:#DCC08A; }
.menu__foot{
  margin-top:auto; padding-top:2rem; display:flex; flex-direction:column; gap:.4rem;
  font-size:.9rem; color:rgba(246,244,239,.64); opacity:0; transition:opacity .5s .6s;
}
.menu.is-open .menu__foot{ opacity:1; }

/* ============ HERO ============ */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:center;
  padding:9rem var(--pad) 6rem;
  overflow:hidden;
}
/* O painel entra mais para a esquerda do que a foto realmente aparece, e a
   máscara segura azul sólido no começo. Assim a emenda entre o painel e o
   fundo cai numa faixa de cor idêntica e não aparece nenhuma linha. */
.hero__media{ position:absolute; right:0; top:0; bottom:0; width:58%; overflow:hidden; }
.hero__img{
  position:absolute; inset:-8% 0;
  background:var(--img-hero) var(--pos-hero)/cover no-repeat;
  /* Tratamento monocromático. Garante que qualquer foto colocada aqui
     depois continue combinando com a paleta. */
  filter:grayscale(.82) contrast(1.04) brightness(.86);
  scale:1.08;
  animation:heroZoom 2.6s 1s var(--ease) forwards;
}
@keyframes heroZoom{ to{ scale:1 } }
.hero__fade{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg,
      var(--navy) 0%,var(--navy) 15%,
      rgba(13,32,54,.62) 34%,rgba(13,32,54,0) 72%,rgba(13,32,54,.3) 100%),
    linear-gradient(180deg,rgba(13,32,54,.42) 0%,rgba(13,32,54,0) 32%,rgba(13,32,54,.62) 100%);
}

.hero__content{ position:relative; z-index:2; max-width:min(62%,780px); }
.hero__title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.5rem,5.6vw,5.4rem); line-height:1;
  letter-spacing:-.035em;
  font-variation-settings:"SOFT" 0,"WONK" 1;
  max-width:14ch;
}
.hero__text{
  margin-top:1.9rem; font-size:clamp(1rem,1.15vw,1.12rem); color:rgba(246,244,239,.72);
  max-width:52ch; border-left:1px solid var(--brass); padding-left:1.4rem;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.4rem; }

.hero__badges{
  display:flex; gap:clamp(1.6rem,4vw,3.6rem);
  margin-top:clamp(2.5rem,5vw,4rem);
  padding-top:1.8rem; border-top:1px solid rgba(246,244,239,.16);
}
.hero__badge{ display:flex; flex-direction:column; }
.hero__badge b{
  font-family:var(--serif); font-size:clamp(1.7rem,2.8vw,2.4rem);
  font-weight:400; line-height:1; color:#DCC08A;
}
.hero__badge span{ font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(246,244,239,.6); }


/* ============ FAIXA ROLANTE ============
   Movimento em animação de CSS: roda sempre, sem depender de rolagem
   nem de JavaScript. */
.marquee{ border-block:1px solid var(--line); overflow:hidden; padding:1.1rem 0; }
.marquee__track{
  display:flex; width:max-content;
  animation:marq 32s linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes marq{ from{ transform:translate3d(0,0,0) } to{ transform:translate3d(-50%,0,0) } }
.marquee__row{ display:flex; align-items:center; }
.marquee__row span{
  font-family:var(--serif); font-size:clamp(1.1rem,2vw,1.6rem);
  padding:0 1.5rem; white-space:nowrap; color:var(--fg);
}
.marquee__row i{ width:6px; height:6px; background:var(--brass); border-radius:50%; flex:0 0 6px; }

/* ============ ESCRITÓRIO ============ */
.about{ padding:var(--sec) var(--pad); position:relative; }
.about__grid{
  display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2.5rem,6vw,7rem);
  align-items:start;
}
.about__visual{ position:sticky; top:14vh; width:100%; max-width:470px; }
.about__stack{ position:relative; padding-bottom:22%; }
.about__fig{ position:relative; overflow:hidden; border-radius:2px; }
.about__ph{
  display:block; width:100%; aspect-ratio:4/5;
  background-position:center; background-size:cover;
  transform:scale(1.06);
  filter:grayscale(.5) contrast(1.04);
  transition:transform 1.4s var(--ease),filter 1s var(--ease);
}
.about__fig:hover .about__ph{ transform:scale(1); filter:grayscale(0); }

/* Retrato: proporção mais alta, porque foto de pessoa em pé pede vertical. */
.about__ph--1{
  aspect-ratio:3/4;
  background-image:var(--img-advogado),var(--img-advogado-fallback);
  background-position:var(--pos-advogado);
  filter:grayscale(.3) contrast(1.03);
}
.about__ph--2{ background-image:var(--img-sobre-2); }

/* Legenda do retrato, embaixo à esquerda, ao lado da foto menor */
.about__name{
  position:absolute; left:0; bottom:.4rem; width:46%;
  padding-top:1rem; border-top:1px solid var(--line);
}
.about__name b{
  display:block; font-family:var(--serif); font-weight:400;
  font-size:1.2rem; line-height:1.2; letter-spacing:-.01em;
}
.about__name span{
  display:block; margin-top:.35rem;
  font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold);
}
.about__fig--b{
  position:absolute; right:-8%; bottom:0; width:52%;
  border:6px solid var(--bg); box-shadow:0 26px 60px rgba(13,32,54,.22);
}
.about__fig--b .about__ph{ aspect-ratio:1/1; }
/* Selo no alto, para deixar o rodapé da foto livre para a legenda */
.about__seal{
  position:absolute; left:-7%; top:6%;
  width:120px; height:120px; display:grid; place-items:center;
  background:var(--navy); border-radius:50%;
}
.about__seal svg{ position:absolute; inset:0; width:100%; height:100%; animation:spin 26s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg) } }
.about__sealtxt{
  font-family:var(--sans); font-size:11.5px; letter-spacing:.18em;
  fill:var(--brass); text-transform:uppercase;
}
.about__seal b{
  font-family:var(--serif); font-size:2rem; font-weight:400; line-height:1;
  color:var(--bone);
}
.about__seal b i{ font-style:normal; color:var(--brass); font-size:1.05rem; vertical-align:super; }

.about__copy .h-display{ max-width:17ch; }
.about__text{ margin-top:2.4rem; display:flex; flex-direction:column; gap:1.4rem; max-width:62ch; }
.about__text p{ color:var(--muted); }

.quote{
  margin-top:3rem; padding:2rem 0 0; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:1.3rem;
}
.quote p{
  font-family:var(--serif); font-size:clamp(1.15rem,1.85vw,1.55rem);
  line-height:1.35; font-style:italic; max-width:36ch;
}
.quote cite{ font-style:normal; display:flex; flex-direction:column; }
.quote__sign{
  font-family:var(--serif); font-size:1.6rem; color:var(--gold);
  letter-spacing:.02em;
}
.quote cite em{
  font-style:normal; font-size:.66rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted); margin-top:.5rem;
}

.stats{
  margin-top:var(--sec); padding-top:3rem; border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.5rem,3vw,3rem);
}
.stats__item b{
  display:block; font-family:var(--serif); font-weight:400;
  font-size:clamp(2.6rem,4.8vw,4.2rem); line-height:1;
}
.stats__item b i{ font-style:normal; color:var(--gold); }
.stats__item p{ margin-top:.8rem; font-size:.86rem; color:var(--muted); max-width:24ch; }

/* ============ ÁREAS ============ */
.areas{ position:relative; padding:var(--sec) var(--pad); }
.areas__head{
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(1.5rem,5vw,5rem);
  align-items:end; margin-bottom:clamp(3rem,6vw,5rem);
}
.areas__head p{ color:var(--muted); max-width:46ch; }

.area{ border-top:1px solid var(--line); }
.area:last-child{ border-bottom:1px solid var(--line); }
.area__bar{
  position:relative; width:100%; text-align:left; color:inherit;
  display:grid; grid-template-columns:auto 1.1fr 1fr auto;
  align-items:center; gap:clamp(1rem,3vw,2.5rem);
  padding:clamp(1.4rem,2.5vw,2.1rem) 0;
}
.area__bar::before{
  content:""; position:absolute; inset:0 -1.5rem;
  background:linear-gradient(90deg,rgba(176,141,79,.16),rgba(176,141,79,0));
  opacity:0; transition:opacity .5s var(--ease);
}
.area:hover .area__bar::before{ opacity:1; }
.area__num{ font-size:.7rem; letter-spacing:.14em; color:var(--gold); }
.area__name{
  font-family:var(--serif); font-weight:400; letter-spacing:-.02em;
  font-size:clamp(1.5rem,3.4vw,2.8rem); line-height:1.05;
  transition:transform .6s var(--ease),color .4s;
}
.area:hover .area__name{ transform:translateX(14px); color:#DCC08A; }
.area__hint{ font-size:.84rem; color:var(--muted); max-width:38ch; }
.area__plus{
  position:relative; width:46px; height:46px; justify-self:end;
  border:1px solid var(--line); border-radius:50%;
  transition:.5s var(--ease);
}
.area__plus i{
  position:absolute; top:50%; left:50%; width:14px; height:1px;
  background:var(--fg); transform:translate(-50%,-50%);
  transition:transform .5s var(--ease),background .4s;
}
.area__plus i:nth-child(2){ transform:translate(-50%,-50%) rotate(90deg); }
.area:hover .area__plus{ background:var(--brass); border-color:var(--brass); }
.area:hover .area__plus i{ background:#0D2036; }
.area.is-open .area__plus i:nth-child(2){ transform:translate(-50%,-50%) rotate(0deg); }
.area.is-open .area__name{ color:#DCC08A; }

.area__panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .8s var(--ease); }
.area.is-open .area__panel{ grid-template-rows:1fr; }
.area__panelIn{ overflow:hidden; }
.area__cols{ columns:3; column-gap:clamp(1.5rem,3vw,3rem); padding:.5rem 0 1rem; }
.svc{
  break-inside:avoid; margin-bottom:2rem;
  opacity:0; transform:translateY(24px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.area.is-open .svc{ opacity:1; transform:none; }
.area.is-open .svc:nth-child(1){ transition-delay:.1s }
.area.is-open .svc:nth-child(2){ transition-delay:.16s }
.area.is-open .svc:nth-child(3){ transition-delay:.22s }
.area.is-open .svc:nth-child(4){ transition-delay:.28s }
.area.is-open .svc:nth-child(5){ transition-delay:.34s }
.area.is-open .svc:nth-child(6){ transition-delay:.4s }
.area.is-open .svc:nth-child(7){ transition-delay:.46s }
.svc h4{
  font-family:var(--serif); font-weight:500; font-size:1.02rem;
  color:#DCC08A; margin-bottom:.7rem;
  padding-bottom:.55rem; border-bottom:1px solid var(--line);
}
.svc li{
  position:relative; padding-left:1.1rem; font-size:.88rem;
  color:var(--muted); line-height:1.85;
  transition:color .3s,transform .4s var(--ease);
}
.svc li::before{
  content:""; position:absolute; left:0; top:.85em; width:5px; height:1px;
  background:var(--brass); transition:width .4s var(--ease);
}
.svc li:hover{ color:var(--fg); transform:translateX(4px); }
.svc li:hover::before{ width:9px; }
.area__cta{
  display:inline-flex; align-items:center; gap:.8rem;
  margin:1rem 0 2.5rem; padding-bottom:.5rem;
  font-size:.76rem; letter-spacing:.1em; text-transform:uppercase;
  color:#DCC08A; border-bottom:1px solid var(--line);
  transition:.4s var(--ease);
}
.area__cta:hover{ border-color:#DCC08A; gap:1.3rem; }

/* ============ MÉTODO ============ */
.method{ position:relative; height:420vh; }
.method__sticky{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
  padding:0 0 0 var(--pad);
  background:var(--bg);
}
.method__head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:2rem; padding-right:var(--pad); margin-bottom:clamp(2rem,5vh,4rem);
}
.method__head .h-display{ max-width:14ch; }
.method__progress{ width:min(30vw,260px); height:1px; background:var(--line); }
.method__progress i{ display:block; height:100%; width:0%; background:var(--brass); }
.method__track{ display:flex; gap:clamp(1.2rem,2.5vw,2.5rem); }
.step{
  position:relative; flex:0 0 clamp(280px,30vw,420px);
  min-height:clamp(300px,42vh,400px);
  padding:2.2rem 2rem;
  border:1px solid var(--line); border-radius:3px;
  background:var(--bg-2);
  display:flex; flex-direction:column;
  transition:border-color .5s var(--ease),transform .5s var(--ease);
}
.step:hover{ border-color:rgba(176,141,79,.6); transform:translateY(-8px); }
.step__n{
  font-family:var(--serif); font-size:3.2rem; line-height:1;
  color:transparent; -webkit-text-stroke:1px var(--brass);
  margin-bottom:auto;
}
.step h3{
  font-family:var(--serif); font-weight:400; font-size:clamp(1.3rem,1.9vw,1.7rem);
  letter-spacing:-.02em; margin:1.5rem 0 .9rem;
}
.step p{ font-size:.9rem; color:var(--muted); }
.step__line{
  position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--brass); transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--ease);
}
.step:hover .step__line{ transform:scaleX(1); }
.method__hint{
  margin-top:clamp(1.5rem,4vh,3rem);
  font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted);
}

/* Versão sem trilho horizontal. O JavaScript liga esta classe sempre que a
   rolagem travada não vai rodar, seja por tela estreita ou porque o sistema
   pediu menos movimento. Sem isso a seção continuaria com 420vh de altura e
   presa no topo, virando um trecho enorme onde a página rola e nada acontece.
   Aqui os cartões viram um carrossel que se arrasta para o lado. */
.method.is-flat{ height:auto; }
.method.is-flat .method__sticky{
  position:static; height:auto;
  padding:var(--sec) 0 var(--sec) var(--pad);
}
.method.is-flat .method__head{ flex-direction:column; align-items:flex-start; gap:1.5rem; }
.method.is-flat .method__track{
  transform:none !important;
  overflow-x:auto; scroll-snap-type:x proximity;
  padding-right:var(--pad); scrollbar-width:none;
}
.method.is-flat .method__track::-webkit-scrollbar{ display:none; }
.method.is-flat .step{ scroll-snap-align:center; }
.method.is-flat .method__hint{ display:none; }

/* ============ ESTRUTURA ============ */
.feats{ padding:var(--sec) var(--pad); }
.feats__intro{
  display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(1.5rem,5vw,5rem);
  align-items:end; margin-bottom:clamp(3rem,6vw,5rem);
}
.feats__intro .h-display{ max-width:16ch; }
.feats__intro p{ color:var(--muted); max-width:44ch; }
.feats__grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line); border-left:1px solid var(--line);
}
.feat{
  position:relative; overflow:hidden;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--bg); padding:clamp(2rem,3.2vw,3rem);
  min-height:clamp(240px,25vw,290px);
  display:flex; flex-direction:column;
  transform-style:preserve-3d;
}
.feat::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(176,141,79,.16),transparent 62%);
  opacity:0; transition:opacity .5s;
}
.feat:hover::before{ opacity:1; }
.feat__ico{
  width:44px; height:44px; color:var(--gold); margin-bottom:auto;
  transition:transform .6s var(--ease);
}
.feat__ico svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }
.feat:hover .feat__ico{ transform:translateY(-6px) rotate(-6deg); }
.feat h3{
  font-family:var(--serif); font-weight:400; font-size:1.32rem;
  letter-spacing:-.015em; margin:1.8rem 0 .7rem;
}
.feat p{ font-size:.88rem; color:var(--muted); max-width:34ch; }
.feat__n{
  position:absolute; right:1.5rem; top:1.3rem;
  font-family:var(--serif); font-size:1rem; color:var(--gold);
  opacity:.5; transition:opacity .4s,transform .5s var(--ease);
}
.feat:hover .feat__n{ opacity:1; transform:translateY(-3px); }

/* ============ FAIXA DE DESTAQUE ============ */
.band{ position:relative; overflow:hidden; padding:clamp(5rem,10vw,9rem) var(--pad); }
.band__bg{
  position:absolute; inset:-12% 0;
  background:var(--img-faixa) center/cover no-repeat;
  filter:grayscale(.35) brightness(.7);
}
.band::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(13,32,54,.95),rgba(13,32,54,.6));
}
.band__in{ position:relative; z-index:2; display:flex; flex-direction:column; gap:2.4rem; align-items:flex-start; }
.band__txt{
  font-family:var(--serif); font-weight:400; font-style:italic;
  font-size:clamp(1.9rem,5vw,4rem); line-height:1.08;
  letter-spacing:-.03em; max-width:18ch;
}

/* ============ CONTATO ============ */
.contact{ position:relative; padding:var(--sec) var(--pad); }
.contact__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,6rem);
}
.contact__aside .h-display{ max-width:12ch; }
.contact__lead{ margin-top:1.6rem; color:var(--muted); max-width:40ch; }
.contact__info{ margin-top:3rem; display:flex; flex-direction:column; }
.contact__info li{ padding:1.2rem 0; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:.3rem; }
.contact__info li:last-child{ border-bottom:1px solid var(--line); }
.contact__info span{ font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.contact__info a{
  font-family:var(--serif); font-size:clamp(1.05rem,1.7vw,1.35rem); line-height:1.35;
  width:fit-content; background-image:linear-gradient(var(--gold),var(--gold));
  background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .5s var(--ease),color .4s;
}
.contact__info a:hover{ background-size:100% 1px; color:var(--gold); }

.contact__formWrap{
  border:1px solid var(--line); border-radius:3px;
  padding:clamp(1.6rem,3vw,2.8rem);
  background:var(--bg-2);
}
.form{ display:grid; grid-template-columns:1fr 1fr; gap:1.7rem 1.4rem; }
.field{ position:relative; }
.field--full{ grid-column:1/-1; }
.field input,.field select,.field textarea{
  width:100%; padding:1.5rem 0 .6rem; font-size:.98rem;
  border-bottom:1px solid var(--line); outline:none; resize:none; color:var(--fg);
}
.field select{ appearance:none; cursor:pointer; }
.field select option{ background:var(--bg); color:var(--fg); }
.field--select::after{
  content:""; position:absolute; right:.2rem; bottom:1.1rem;
  width:8px; height:8px; border-right:1px solid var(--gold); border-bottom:1px solid var(--gold);
  transform:rotate(45deg); pointer-events:none;
}
.field label{
  position:absolute; left:0; top:1.5rem; pointer-events:none;
  font-size:.98rem; color:var(--muted); transition:.4s var(--ease);
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label,
.field select:focus + label,
.field select:valid + label{
  top:.05rem; font-size:.64rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold);
}
.field__line{
  position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .55s var(--ease);
}
.field input:focus ~ .field__line,
.field textarea:focus ~ .field__line,
.field select:focus ~ .field__line{ transform:scaleX(1); }
.field.is-bad .field__line{ background:#B44A32; transform:scaleX(1); }

.check{ display:flex; align-items:flex-start; gap:.85rem; cursor:pointer; }
.check input{ position:absolute; opacity:0; width:0; height:0; }
.check__box{
  flex:0 0 20px; width:20px; height:20px; margin-top:2px;
  border:1px solid var(--line); border-radius:2px; display:grid; place-items:center;
  transition:.35s var(--ease);
}
.check__box svg{ width:12px; height:12px; fill:none; stroke:#0D2036; stroke-width:2.4; stroke-linecap:round;
  opacity:0; transform:scale(.4); transition:.35s var(--ease); }
.check input:checked + .check__box{ background:var(--brass); border-color:var(--brass); }
.check input:checked + .check__box svg{ opacity:1; transform:none; }
.check__txt{ font-size:.8rem; color:var(--muted); line-height:1.55; }
.check.is-bad .check__box{ border-color:#B44A32; }

.form__note{ grid-column:1/-1; font-size:.72rem; color:var(--muted); opacity:.75; }
.form__ok{
  grid-column:1/-1; display:none; align-items:center; gap:.9rem;
  padding:1rem 1.2rem; border:1px solid rgba(176,141,79,.5);
  background:rgba(176,141,79,.12); border-radius:3px;
}
.form__ok.is-on{ display:flex; animation:fadeUp .6s var(--ease) both; }
.form__ok svg{ width:20px; height:20px; flex:0 0 20px; fill:none; stroke:var(--gold); stroke-width:2; }
.form__ok p{ font-size:.86rem; }

/* ============ RODAPÉ ============ */
.footer{ position:relative; overflow:hidden; padding:var(--sec) var(--pad) 2rem; }
.footer__bg{
  position:absolute; inset:-16% 0;
  background:var(--img-rodape) center/cover no-repeat;
  opacity:.22; filter:grayscale(.6);
}
.footer::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,var(--navy) 0%,rgba(13,32,54,.86) 45%,var(--navy) 100%);
}
.footer__top{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.4fr .8fr .9fr 1fr; gap:clamp(1.6rem,3vw,3rem);
  padding-bottom:clamp(3rem,7vw,6rem);
}
.footer__logo{ width:54px; margin-bottom:1.3rem; }
.footer__col h4{
  font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); margin-bottom:1.2rem; font-weight:500;
}
.footer__col p{ font-size:.88rem; color:var(--muted); max-width:36ch; }
.footer__col a{
  display:block; font-size:.88rem; color:var(--muted); padding:.32rem 0;
  width:fit-content; transition:color .35s,transform .45s var(--ease);
}
.footer__col a:hover{ color:#DCC08A; transform:translateX(6px); }
.footer__social{ display:flex; gap:.6rem; margin-top:1.2rem; }
.footer__social a{
  width:40px; height:40px; display:grid; place-items:center; padding:0;
  border:1px solid var(--line); border-radius:50%; font-size:.66rem; letter-spacing:.06em;
}
.footer__social a:hover{ background:var(--brass); color:#0D2036; border-color:var(--brass); transform:none; }

.footer__word{
  position:relative; z-index:2; overflow:hidden;
  border-top:1px solid var(--line); padding-top:clamp(1.5rem,3vw,2.5rem);
}
.footer__word span{
  display:block; font-family:var(--serif); font-weight:400;
  font-size:clamp(1.35rem,8.2vw,8.4rem); line-height:.92; letter-spacing:-.03em;
  white-space:nowrap; text-align:center;
  color:transparent; -webkit-text-stroke:1px rgba(246,244,239,.32);

  /* O preenchimento entra varrendo da esquerda para a direita, recortado na
     própria letra. Antes a cor simplesmente aparecia inteira de uma vez, o
     que ficava chapado nesse tamanho. */
  background-image:linear-gradient(90deg,rgba(176,141,79,.62),rgba(220,192,138,.5));
  background-repeat:no-repeat;
  background-size:0% 100%;
  -webkit-background-clip:text; background-clip:text;
  transition:background-size 1.2s var(--ease);
}
.footer__word:hover span{ background-size:100% 100%; }

.footer__base{
  position:relative; z-index:2;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  padding-top:1.6rem; margin-top:1.6rem; border-top:1px solid var(--line);
  font-size:.72rem; color:var(--muted); opacity:.8;
}

/* ============ FLUTUANTES ============ */
.whats,.totop{
  position:fixed; right:clamp(1rem,2vw,1.8rem); z-index:800;
  width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center;
  transition:.5s var(--ease);
}
.whats{
  bottom:clamp(1rem,2vw,1.8rem);
  background:var(--brass); color:#0D2036;
  box-shadow:0 14px 34px rgba(13,32,54,.35);
}
.whats svg{ width:26px; height:26px; fill:currentColor; }
.whats:hover{ transform:scale(1.09) rotate(6deg); }
.totop{
  bottom:calc(clamp(1rem,2vw,1.8rem) + 62px);
  border:1px solid rgba(176,141,79,.5); background:rgba(13,32,54,.82);
  opacity:0; pointer-events:none; transform:translateY(14px);
}
.totop.is-on{ opacity:1; pointer-events:auto; transform:none; }
.totop svg{ width:18px; height:18px; fill:none; stroke:var(--bone); stroke-width:1.4; stroke-linecap:round; }
.totop:hover{ background:var(--brass); border-color:var(--brass); }
.totop:hover svg{ stroke:#0D2036; }

/* ============ ANIMAÇÕES DE ENTRADA ============ */
[data-reveal]{
  opacity:0; transform:translateY(28px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
  transition-delay:calc(var(--d,0) * 85ms);
}
[data-reveal].is-in{ opacity:1; transform:none; }

.word{ display:inline-block; overflow:hidden; vertical-align:top; }
.word i{
  display:inline-block; font-style:inherit;
  transform:translateY(105%) rotate(3deg);
  transition:transform 1s var(--ease);
  transition-delay:calc(var(--wi,0) * 40ms);
}
[data-split].is-in .word i{ transform:none; }

/* ============ PERFORMANCE ============
   Elementos que recebem transform por JavaScript ganham camada própria,
   assim o navegador só reposiciona a camada em vez de repintar a imagem.
   ===================================== */
[data-parallax],.marquee__track,.method__track,.cursor,.cursor-dot{ will-change:transform; }
.feat,.step,.area__panelIn,.contact__formWrap{ contain:paint; }
.band,.footer{ contain:paint; }

/* ============ RESPONSIVO ============ */
@media (max-width:1180px){
  .hero{ padding-top:8rem; }
  .hero__content{ max-width:none; }
  .hero__media{ width:100%; }
  .hero__fade{
    background:
      linear-gradient(90deg,var(--navy) 0%,rgba(13,32,54,.92) 45%,rgba(13,32,54,.55) 100%),
      linear-gradient(180deg,rgba(13,32,54,.7) 0%,rgba(13,32,54,.35) 40%,rgba(13,32,54,.9) 100%);
  }
  .about__grid{ grid-template-columns:1fr; }
  .about__visual{ position:static; max-width:540px; }
  .areas__head,.feats__intro{ grid-template-columns:1fr; align-items:start; }
  .area__cols{ columns:2; }
  .feats__grid{ grid-template-columns:repeat(2,1fr); }
  .stats{ grid-template-columns:repeat(2,1fr); row-gap:2.5rem; }
  .contact__grid{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr 1fr; row-gap:2.5rem; }
}

@media (max-width:860px){
  .nav{ display:none; }
  .burger{ display:block; }
  .header__right .btn--sm{ display:none; }

  /* desfoque de fundo é caro em GPU de celular */
  .header.is-stuck{ backdrop-filter:none; background:rgba(13,32,54,.96); }

  .hero__title{ max-width:none; }
  .hero__badges{ flex-wrap:wrap; gap:1.4rem 2rem; }

  .area__bar{ grid-template-columns:auto 1fr auto; gap:1rem; }
  .area__hint{ display:none; }
  .area__cols{ columns:1; }
  .area:hover .area__name{ transform:none; }

  .method{ height:auto; }
  .method__sticky{ position:static; height:auto; padding:var(--sec) 0 var(--sec) var(--pad); }
  .method__track{
    transform:none !important;
    overflow-x:auto; scroll-snap-type:x mandatory;
    padding-right:var(--pad); scrollbar-width:none;
  }
  .method__track::-webkit-scrollbar{ display:none; }
  .step{ scroll-snap-align:center; flex-basis:min(78vw,340px); }
  .method__head{ flex-direction:column; align-items:flex-start; gap:1.5rem; }

  .feats__grid{ grid-template-columns:1fr; }
  .form{ grid-template-columns:1fr; }
  .about__fig--b{ right:0; width:56%; }
  .about__seal{ left:auto; right:2%; top:3%; width:96px; height:96px; }
  .about__seal b{ font-size:1.5rem; }
}

@media (max-width:520px){
  .stats{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr; }
  .btn{ padding:.95rem 1.5rem; font-size:.7rem; }
  .hero__cta .btn{ width:100%; justify-content:center; }
}

/* ============ MOVIMENTO REDUZIDO ============
   Quando o sistema pede menos movimento, os deslocamentos grandes são
   desligados, mas a faixa rolante e as transições curtas continuam.
   A classe .force-motion (ativada por ?motion=1 na URL) permite demonstrar
   o site completo mesmo em máquinas com animação desativada no sistema.
   ============================================ */
@media (prefers-reduced-motion:reduce){
  html:not(.force-motion) .about__seal svg{ animation:none; }
  html:not(.force-motion) .hero__img{ animation:none; scale:1; }
  html:not(.force-motion) .hero__downLine i{ animation:none; }
  html:not(.force-motion) [data-reveal]{ transform:none; transition-duration:.45s; }
  html:not(.force-motion) .word i{ transform:none; }
  html:not(.force-motion) .menu__list a{ transform:none; }
  html:not(.force-motion) .svc{ transform:none; }
  html:not(.force-motion){ scroll-behavior:auto; }
  html:not(.force-motion) .marquee__track{ animation-duration:70s; }
}