/* ==========================================================================
   GR ADVOCACIA — camada premium
   Sobe DEPOIS de style.css. Não altera bs.flex nem style.css.
   Paleta original preservada: ouro #C9B292 / #BBA277 / #866F45 sobre preto.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');

:root{
  --gr-ouro:        #C9B292;
  --gr-ouro-claro:  #E6D5B8;
  --gr-ouro-escuro: #866F45;
  --gr-preto:       #0B0B0C;
  --gr-carvao:      #141416;
  --gr-grafite:     #1C1C20;
  --gr-linha:       rgba(201,178,146,.22);
  --gr-linha-forte: rgba(201,178,146,.45);
  --gr-serif:       "Libre Baskerville", Georgia, serif;
}

/* --------------------------------------------------------------- base --- */

body{ font-size: 1rem; }
body.premium{ background: var(--gr-preto); }

/* -------------------------------------------------------- animação ------ */
/* Regra de ouro: o conteúdo é visível por padrão. Só fica oculto quando o JS
   confirma que vai animar (classe .gr-js no <html>). Sem JS, JS com erro ou
   observador indisponível, nada some da página. */

html.gr-js [data-gr-anim]{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1),
              transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--gr-delay, 0ms);
  will-change: opacity, transform;
}
html.gr-js [data-gr-anim="fade-left"] { transform: translateX(30px); }
html.gr-js [data-gr-anim="fade-right"]{ transform: translateX(-30px); }
html.gr-js [data-gr-anim="zoom"]      { transform: scale(.96); }
html.gr-js [data-gr-anim].gr-visivel  { opacity: 1; transform: none; }

@media (max-width: 767.98px){
  html.gr-js [data-gr-anim]{ opacity:1; transform:none; transition:none; }
}
@media (prefers-reduced-motion: reduce){
  html.gr-js [data-gr-anim]{ opacity:1 !important; transform:none !important; transition:none !important; }
}

.font-serif{ font-family: var(--gr-serif) !important; }

.gr-eyebrow{
  font-size: .75rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gr-ouro);
  display: inline-flex;
  align-items: center;
  gap: .75rem;
}
.gr-eyebrow::before{
  content:"";
  width: 2.25rem; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gr-ouro));
}
.gr-eyebrow.gr-eyebrow-center::after{
  content:"";
  width: 2.25rem; height: 1px;
  background: linear-gradient(90deg, var(--gr-ouro), transparent);
}

.gr-titulo{
  font-family: var(--gr-serif);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.01em;
}
.gr-texto{ font-size: 1.0625rem; line-height: 1.7; }
@media(max-width:767.98px){ .gr-texto{ font-size: 1rem; } }

.gr-ouro{ color: var(--gr-ouro) !important; }
.gr-bg-preto{ background: var(--gr-preto) !important; }
.gr-bg-carvao{ background: var(--gr-carvao) !important; }

.gr-regua{
  height: 3px; width: 4.5rem; border-radius: 3px;
  background: linear-gradient(90deg, var(--gr-ouro-claro), var(--gr-ouro-escuro));
}

/* ------------------------------------------------------------- botões --- */

.gr-btn{
  --gr-btn-bg: linear-gradient(100deg, #E6D5B8 0%, #C9B292 45%, #A98D5F 100%);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  padding: .95rem 1.5rem;
  border: 0;
  border-radius: 999px;
  font-weight: 700;
  font-size: .9063rem;
  letter-spacing: .025em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--gr-btn-bg);
  color: #14110B;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, color .3s ease;
  box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.35), 0 0 0 1px rgba(230,213,184,.35) inset;
  line-height: 1.25;
  /* rótulos longos podem quebrar, mas quebram equilibrados e centrados */
  white-space: normal;
  text-align: center;
  text-wrap: balance;
}
.gr-btn svg{ flex: 0 0 auto; }
/* nunca cortar rótulo: se não couber, quebra — mas o texto aparece inteiro */
.gr-btn-sm{ max-width: 100%; overflow-wrap: anywhere; }

/* Par de botões: empilhado só no telefone, lado a lado do tablet para cima,
   dividindo a linha em partes iguais — mesma largura e mesma altura. */
.gr-btns{
  display: flex;
  flex-direction: column;
  gap: .75rem;
  align-items: stretch;
}
@media(min-width:576px){
  .gr-btns{ flex-direction: row; flex-wrap: nowrap; }
  .gr-btns > .gr-btn{
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    /* aperta o respiro lateral: em coluna estreita o rótulo continua em uma linha */
    padding-left: .85rem;
    padding-right: .85rem;
    font-size: .8438rem;
    gap: .5rem;
  }
  .gr-btns > .gr-btn svg{ width: 1.125rem; height: 1.125rem; }
}
.gr-btn::after{
  content:"";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.55) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform .75s cubic-bezier(.22,.61,.36,1);
}
.gr-btn:hover{
  color: #14110B;
  transform: translateY(-2px);
  box-shadow: 0 .85rem 2.25rem rgba(201,178,146,.35), 0 0 0 1px rgba(230,213,184,.6) inset;
}
.gr-btn:hover::after{ transform: translateX(120%); }
.gr-btn > *{ position: relative; z-index: 2; }

.gr-btn-ghost{
  background: transparent;
  color: var(--gr-ouro);
  box-shadow: 0 0 0 1.5px var(--gr-linha-forte) inset;
}
.gr-btn-ghost:hover{
  color: #14110B;
  background: var(--gr-ouro);
  box-shadow: 0 .85rem 2.25rem rgba(201,178,146,.28);
}
.gr-btn-ghost::after{ display:none; }

.gr-btn-wapp{
  --gr-btn-bg: linear-gradient(100deg, #34d17a 0%, #25D366 50%, #14a94b 100%);
  color: #04240F;
  box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.25) inset;
}
.gr-btn-wapp:hover{ color:#04240F; box-shadow: 0 .85rem 2.25rem rgba(37,211,102,.35); }

.gr-btn-sm{ padding: .7rem 1.35rem; font-size: .8125rem; }
.gr-btn-lg{ padding: 1.1rem 2.25rem; font-size: 1rem; }

/* ------------------------------------------------- botões no celular --- */
/* Todos com a mesma largura, a mesma altura e rótulo em uma linha só.
   É o que dá simetria à pilha de CTAs no telefone. */
@media(max-width:575.98px){
  /* uma altura só para toda a página: o rótulo que cai em duas linhas fica do
     mesmo tamanho do que cabe em uma, e a pilha de CTAs sai simétrica */
  .gr-btn,
  .gr-btn-lg,
  .gr-btn-sm{
    width: 100%;
    min-height: 3.875rem;
    font-size: .8125rem;
    letter-spacing: .015em;
    padding: .85rem 1rem;
    gap: .5rem;
  }
  .gr-btn svg{ width: 1.125rem; height: 1.125rem; }

  /* o selo acompanha a largura dos botões, senão a pilha fica torta */
  .gr-hero .gr-selo-google{ width: 100%; justify-content: center; }
  .gr-hero .d-flex.flex-wrap.align-items-center.gap-3{ width: 100%; }
}

/* ------------------------------------------------------------- header --- */

.gr-topbar{
  background: #08080A;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: .8125rem;
  color: rgba(255,255,255,.72);
}
.gr-topbar a{ color: rgba(255,255,255,.72); text-decoration: none; transition: color .25s; }
.gr-topbar a:hover{ color: var(--gr-ouro); }
.gr-topbar .gr-topbar-sep{ color: rgba(255,255,255,.18); }

.gr-header{
  position: sticky; top: 0; z-index: 1030;
  background: rgba(11,11,12,.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: background .35s ease, border-color .35s ease, padding .35s ease;
}
.gr-header.gr-scrolled{
  background: rgba(8,8,10,.96);
  border-bottom-color: var(--gr-linha);
  box-shadow: 0 .5rem 2rem rgba(0,0,0,.55);
}
.gr-header .navbar-brand img{
  height: 78px; width: auto;
  transition: height .35s ease;
}
.gr-header.gr-scrolled .navbar-brand img{ height: 56px; }

.gr-nav-link{
  position: relative;
  color: rgba(255,255,255,.88) !important;
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .5rem 0 !important;
  text-decoration: none;
  transition: color .25s ease;
}
.gr-nav-link::after{
  content:"";
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 2px;
  background: linear-gradient(90deg, var(--gr-ouro-claro), var(--gr-ouro-escuro));
  transition: width .3s ease;
}
.gr-nav-link:hover, .gr-nav-link.gr-ativo{ color: var(--gr-ouro) !important; }
.gr-nav-link:hover::after, .gr-nav-link.gr-ativo::after{ width: 100%; }

/* --------------------------------------------------- menu no celular --- */

/* Com o menu aberto o cabeçalho sobe acima de tudo E perde o backdrop-filter.
   O segundo ponto é o que realmente resolve: um elemento com backdrop-filter
   vira o bloco de referência dos descendentes 'position:fixed'. Com o filtro
   ligado, o painel do menu se ancorava nos 72px do header em vez da tela
   inteira — daí ele aparecer como uma faixa, com o hero por cima. */
.gr-header.gr-menu-aberto{
  z-index: 200000;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: transparent;
}
html.gr-travado, html.gr-travado body{ overflow: hidden; }

@media(max-width:991.98px){

  .gr-header .navbar-collapse{
    position: fixed; inset: 0;
    z-index: 200001;
    padding: 0;
    overflow-y: auto;
    background:
      radial-gradient(120% 60% at 50% 0%, rgba(201,178,146,.14), transparent 62%),
      linear-gradient(180deg, #101012 0%, var(--gr-preto) 45%);
  }

  /* topo do painel: logotipo com brilho + botão de fechar */
  .gr-menu-topo{
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem 1.5rem 1.25rem;
    border-bottom: 1px solid var(--gr-linha);
  }
  .gr-menu-logo{
    position: relative;
    display: inline-block;
    overflow: hidden;
    border-radius: .5rem;
  }
  .gr-menu-logo img{
    height: 74px; width: auto; display: block;
    filter: drop-shadow(0 0 14px rgba(201,178,146,.28));
    animation: gr-logo-glow 3.6s ease-in-out infinite;
  }
  .gr-menu-logo::after{
    content:"";
    position: absolute; top: -20%; left: -70%;
    width: 42%; height: 140%;
    background: linear-gradient(100deg,
                rgba(230,213,184,0) 0%,
                rgba(230,213,184,.55) 50%,
                rgba(230,213,184,0) 100%);
    transform: skewX(-18deg);
    animation: gr-logo-brilho 3.6s ease-in-out infinite;
    pointer-events: none;
  }
  @keyframes gr-logo-brilho{
    0%        { left: -70%; }
    55%, 100% { left: 135%; }
  }
  @keyframes gr-logo-glow{
    0%, 100% { filter: drop-shadow(0 0 10px rgba(201,178,146,.20)); }
    50%      { filter: drop-shadow(0 0 22px rgba(201,178,146,.45)); }
  }

  .gr-menu-fechar{
    flex: 0 0 auto;
    width: 2.75rem; height: 2.75rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    border: 1px solid var(--gr-linha);
    color: var(--gr-ouro);
    font-size: 1.5rem; line-height: 1;
    text-decoration: none;
    transition: all .3s ease;
  }
  .gr-menu-fechar:hover, .gr-menu-fechar:active{
    background: var(--gr-ouro); color: #14110B; transform: rotate(90deg);
  }

  /* o painel é uma coluna: navegação em cima, contato colado no rodapé */
  .gr-header .navbar-collapse.show,
  .gr-header .navbar-collapse.collapsing{
    display: flex;
    flex-direction: column;
  }

  .gr-header .navbar-nav{
    height: auto;
    width: 100%;
    margin: 0 !important;
    justify-content: flex-start;
    gap: 0 !important;
    padding: .5rem 1.5rem 1.5rem;
  }

  /* especificidade acima de "header .nav-link" do style.css antigo, que
     impunha padding de 3rem e jogava o texto para o meio da tela */
  .gr-header .gr-nav-link{
    position: relative;
    display: flex !important;
    align-items: center;
    font-family: var(--gr-serif);
    font-size: 1.1875rem !important;
    font-weight: 700;
    letter-spacing: .02em;
    text-align: left !important;
    padding: 1.05rem 2rem 1.05rem 0 !important;
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,.07);
  }
  .gr-header .gr-nav-link::after{
    content:"";
    position: absolute;
    left: auto;                 /* anula o left:0 da regra do desktop */
    right: .5rem;
    top: 50%; bottom: auto;
    width: .5rem; height: .5rem;
    border-right: 2px solid var(--gr-ouro);
    border-top: 2px solid var(--gr-ouro);
    border-bottom: 0;
    transform: translateY(-50%) rotate(45deg);
    opacity: .45;
    background: none;
    transition: right .25s ease, opacity .25s ease;
  }
  .gr-header .gr-nav-link:hover::after,
  .gr-header .gr-nav-link.gr-ativo::after{ right: .15rem; opacity: 1; }
  .gr-header .gr-nav-link.gr-ativo{ color: var(--gr-ouro) !important; }

  .gr-menu-rodape{
    margin-top: auto;           /* o vazio some: o contato encosta no fim */
    padding: 1.5rem;
    border-top: 1px solid var(--gr-linha);
    background: rgba(0,0,0,.35);
  }

  .gr-header .navbar-brand img{ height: 56px; }
  .gr-header .navbar-toggler{ z-index: 2; }
}

/* --------------------------------------------------------------- hero --- */

.gr-hero{
  position: relative;
  background: var(--gr-preto);
  overflow: hidden;
  min-height: min(92vh, 860px);
  display: flex;
  align-items: center;
  /* o tema aplica padding em <main>; aqui quem controla o respiro é o container */
  padding: 0;
}
.gr-hero-img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 88% center;   /* empurra o casal para a direita, longe do texto */
  z-index: 0;
}
.gr-hero-veu{
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(8,8,10,.98) 0%, rgba(8,8,10,.95) 42%, rgba(8,8,10,.55) 66%, rgba(8,8,10,.18) 100%),
    linear-gradient(0deg, rgba(8,8,10,.85) 0%, rgba(8,8,10,0) 45%);
}
@media(max-width:991.98px){
  .gr-hero-veu{
    background: linear-gradient(0deg, rgba(8,8,10,.97) 30%, rgba(8,8,10,.78) 60%, rgba(8,8,10,.55) 100%);
  }
  .gr-hero-img{ object-position: 62% top; }
  .gr-hero{ min-height: auto; padding: 0; }
  /* o texto começa mais alto: menos ar entre o cabeçalho e a chamada */
  .gr-hero .gr-hero-conteudo{ padding-top: 1.5rem !important; padding-bottom: 2.75rem !important; }
  .gr-hero .gr-eyebrow{ margin-bottom: 2rem !important; font-size: .6875rem; letter-spacing: .18em; }
  .gr-hero h1{ margin-bottom: 1.15rem !important; }
  .gr-hero .gr-sub{ margin-bottom: 2.5rem !important; }
}

.gr-hero-conteudo{ position: relative; z-index: 2; }

.gr-hero h1{
  font-family: var(--gr-serif);
  font-weight: 700;
  /* calibrado para fechar em 3 linhas no desktop */
  font-size: clamp(1.95rem, 3.35vw, 3rem);
  line-height: 1.1;
  letter-spacing: -.015em;
  color: #fff;
  max-width: 20ch;
}
@media(min-width:1200px){ .gr-hero h1{ max-width: 22ch; } }
.gr-hero h1 .gr-realce{
  color: var(--gr-ouro);
  position: relative;
}
@media(min-width:1200px){
  /* só onde há largura de sobra o realce fica em uma linha */
  .gr-hero h1 .gr-realce{ white-space: nowrap; }
}
.gr-hero .gr-sub{
  font-size: clamp(1.02rem, 1.4vw, 1.125rem);
  line-height: 1.6;
  color: rgba(255,255,255,.82);
  max-width: 46rem;              /* três linhas no desktop, não quatro */
}
@media(max-width:991.98px){ .gr-hero .gr-sub{ max-width: none; } }

/* selo Google */
.gr-selo-google{
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem 1.1rem .6rem .75rem;
  border-radius: 999px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.12);
  text-decoration: none;
  transition: all .3s ease;
  backdrop-filter: blur(6px);
}
.gr-selo-google:hover{
  background: rgba(255,255,255,.1);
  border-color: var(--gr-linha-forte);
  transform: translateY(-2px);
}
.gr-selo-google .gr-selo-nota{
  font-family: var(--gr-serif);
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff;
  line-height: 1;
}
.gr-selo-google .gr-selo-txt{
  font-size: .75rem;
  color: rgba(255,255,255,.65);
  line-height: 1.25;
}
.gr-estrelas{ color: #FBBC04; font-size: .8125rem; letter-spacing: .05em; line-height: 1; }

/* faixa de sinais sob o hero */
.gr-faixa{
  position: relative;
  /* o tema aplica 9rem de padding em toda <section>: aqui isso vira um vão */
  padding: 0 !important;
  background: linear-gradient(90deg, #101012, #17161A 50%, #101012);
  border-top: 0;
  border-bottom: 0;
}

/* linha dourada com um facho de luz correndo de um lado ao outro */
.gr-faixa::before,
.gr-faixa::after{
  content: "";
  position: absolute; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
              rgba(201,178,146,0) 0%,
              rgba(201,178,146,.30) 18%,
              rgba(201,178,146,.30) 82%,
              rgba(201,178,146,0) 100%);
  pointer-events: none;
}
.gr-faixa::before{ top: 0; }
.gr-faixa::after { bottom: 0; }

.gr-faixa-luz{
  position: absolute; top: 0; left: 0;
  height: 1px; width: 26%;
  background: linear-gradient(90deg,
              rgba(230,213,184,0) 0%,
              rgba(255,244,224,.95) 50%,
              rgba(230,213,184,0) 100%);
  box-shadow: 0 0 12px rgba(230,213,184,.55);
  animation: gr-trilho 9s cubic-bezier(.45,0,.55,1) infinite alternate;
  pointer-events: none;
  z-index: 2;
}
.gr-faixa-luz.gr-faixa-luz-baixo{
  top: auto; bottom: 0;
  animation-delay: -4.5s;
}
@keyframes gr-trilho{
  0%   { transform: translateX(-30%); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(400%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .gr-faixa-luz{ animation: none; opacity: .35; }
}

.gr-faixa .row{
  max-width: 66rem;         /* termos mais próximos, sem espalhar na tela larga */
  margin-inline: auto;
}

/* separadores desenhados aqui, e não por classes de borda soltas no HTML —
   assim nenhuma divisória some entre um item e outro */
.gr-faixa .col{ position: relative; }
.gr-faixa .col:not(:first-child)::before{
  content: "";
  position: absolute; left: 0; top: 24%; bottom: 24%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--gr-linha-forte), transparent);
}
@media(max-width:991.98px){
  /* em duas colunas: divisória vertical só no par, e horizontal na 2ª linha */
  .gr-faixa .col:nth-child(odd)::before{ display: none; }
  .gr-faixa .col:nth-child(n+3)::after{
    content: "";
    position: absolute; top: 0; left: 0; right: 0;
    height: 1px;
    background: var(--gr-linha);
  }
}
.gr-faixa-item{
  display: flex; align-items: center; justify-content: center; gap: .875rem;
  padding: 1.2rem .5rem;
  color: rgba(255,255,255,.85);
  font-size: .9375rem;
  line-height: 1.35;
}
@media(max-width:575.98px){
  .gr-faixa-item{ justify-content: flex-start; padding: 1rem .25rem; }
}
.gr-faixa-item svg{ flex: 0 0 auto; color: var(--gr-ouro); }
.gr-faixa-item strong{ color:#fff; display:block; font-weight:700; }
.gr-faixa-item span{ font-size: .8125rem; color: rgba(255,255,255,.55); }

/* ------------------------------------------------------------- cards --- */

.gr-card{
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 2rem;
  border-radius: 1.25rem;
  background: linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  border: 1px solid rgba(255,255,255,.09);
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease, background .35s ease;
  overflow: hidden;
}
.gr-card::before{
  content:"";
  position: absolute; left: 0; top: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--gr-ouro-claro), var(--gr-ouro-escuro));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.gr-card:hover{
  transform: translateY(-6px);
  border-color: var(--gr-linha-forte);
  background: linear-gradient(160deg, rgba(201,178,146,.10), rgba(255,255,255,.02));
  box-shadow: 0 1.25rem 3rem rgba(0,0,0,.5);
}
.gr-card:hover::before{ transform: scaleX(1); }

.gr-card-claro{
  background: #fff;
  border: 1px solid rgba(0,0,0,.07);
  color: #17171A;
  box-shadow: 0 .25rem 1.25rem rgba(0,0,0,.06);
}
.gr-card-claro:hover{
  background:#fff;
  border-color: var(--gr-ouro);
  box-shadow: 0 1.25rem 3rem rgba(134,111,69,.18);
}

.gr-icone{
  flex: 0 0 auto;
  width: 3.5rem; height: 3.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: .875rem;
  background: linear-gradient(150deg, rgba(201,178,146,.20), rgba(134,111,69,.08));
  border: 1px solid var(--gr-linha);
  color: var(--gr-ouro);
  transition: all .35s ease;
}
.gr-card:hover .gr-icone{
  background: linear-gradient(150deg, var(--gr-ouro-claro), var(--gr-ouro-escuro));
  color: #14110B;
  border-color: transparent;
  transform: rotate(-4deg) scale(1.06);
}
.gr-icone svg{ width: 1.75rem; height: 1.75rem; }

.gr-card h3, .gr-card .gr-card-titulo{
  font-family: var(--gr-serif);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  margin: 0;
}
.gr-card-claro h3, .gr-card-claro .gr-card-titulo{ color:#17171A; }
.gr-card p{
  color: rgba(255,255,255,.68);
  font-size: .9688rem;
  line-height: 1.65;
  margin: 0;
}
.gr-card-claro p{ color: #55555C; }

/* rodapé de card: dica à esquerda, ação à direita */
.gr-card-rodape{
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,.09);
  display: flex; align-items: center; gap: 1rem;
  font-size: .8125rem;
  color: rgba(255,255,255,.5);
}
.gr-card-claro .gr-card-rodape{ border-top-color: rgba(0,0,0,.08); color:#7A7A82; }
.gr-card-rodape .gr-card-acao{
  margin-left: auto;
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--gr-ouro);
  font-weight: 700;
  font-size: .8125rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: gap .25s ease, color .25s ease;
}
.gr-card:hover .gr-card-acao{ gap: .75rem; color: var(--gr-ouro-claro); }
.gr-card-claro:hover .gr-card-acao{ color: var(--gr-ouro-escuro); }
.gr-card-acao svg{ width: 1rem; height: 1rem; }

/* ------------------------------------------------------ linha do tempo --- */

.gr-timeline{ position: relative; }
.gr-timeline::before{
  content:"";
  position: absolute; left: 1.375rem; top: .5rem; bottom: .5rem;
  width: 2px;
  background: linear-gradient(180deg, var(--gr-ouro), rgba(201,178,146,.12));
}
.gr-timeline-item{
  position: relative;
  padding-left: 4.25rem;
  padding-bottom: 2rem;
}
.gr-timeline-item:last-child{ padding-bottom: 0; }
.gr-timeline-num{
  position: absolute; left: 0; top: 0;
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gr-carvao);
  border: 2px solid var(--gr-ouro);
  color: var(--gr-ouro);
  font-family: var(--gr-serif);
  font-weight: 700;
  font-size: .9375rem;
  transition: all .35s ease;
}
.gr-timeline-item:hover .gr-timeline-num{
  background: linear-gradient(150deg, var(--gr-ouro-claro), var(--gr-ouro-escuro));
  color:#14110B;
  transform: scale(1.08);
}
.gr-timeline-prazo{
  display: inline-block;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gr-ouro);
  background: rgba(201,178,146,.12);
  border: 1px solid var(--gr-linha);
  border-radius: 999px;
  padding: .2rem .7rem;
  margin-bottom: .5rem;
}
.gr-timeline-item h3{
  font-family: var(--gr-serif);
  font-size: 1.125rem;
  font-weight: 700;
  color:#fff;
  margin: 0 0 .375rem;
}
.gr-timeline-item p{ color: rgba(255,255,255,.66); font-size: .9375rem; line-height: 1.6; margin:0; }

/* ------------------------------------------------------- prova social --- */

.gr-review{
  height: 100%;
  display: flex; flex-direction: column;
  padding: 1.75rem;
  border-radius: 1.125rem;
  background:#fff;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 .25rem 1.5rem rgba(0,0,0,.07);
  transition: transform .35s ease, box-shadow .35s ease;
}
.gr-review:hover{ transform: translateY(-5px); box-shadow: 0 1.25rem 2.75rem rgba(0,0,0,.14); }
.gr-review-avatar{
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color:#fff; font-weight: 700; font-size: 1.05rem;
  flex: 0 0 auto;
}
.gr-review-nome{ font-weight: 700; font-size: .9375rem; color:#17171A; line-height: 1.2; }
.gr-review-quando{ font-size: .75rem; color:#8A8A92; }
.gr-review p{
  color:#44444B; font-size: .9375rem; line-height: 1.65; margin: .875rem 0 0;
  /* todos os cards com o mesmo corpo de texto — a simetria vem daqui */
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gr-review-link{
  margin-top: auto;
  padding-top: 1rem;
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .75rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--gr-ouro-escuro);
  text-decoration: none;
  transition: gap .25s ease, color .25s ease;
}
.gr-review:hover .gr-review-link{ gap: .7rem; color: #6E5A36; }
.gr-review-aspas{
  font-family: var(--gr-serif);
  font-size: 3rem; line-height: .6;
  color: var(--gr-ouro);
  opacity: .35;
}
.gr-nota-grande{
  font-family: var(--gr-serif);
  font-size: 3.75rem; font-weight: 700; line-height: 1;
  color: var(--gr-ouro);
}

/* ------------------------------------------------------------- sanfona --- */

.gr-faq details{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 1rem;
  background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  margin-bottom: .875rem;
  overflow: hidden;
  transition: border-color .3s ease, background .3s ease;
}
.gr-faq details[open]{ border-color: var(--gr-linha-forte); background: linear-gradient(160deg, rgba(201,178,146,.09), rgba(255,255,255,.02)); }
.gr-faq summary{
  list-style: none;
  cursor: pointer;
  padding: 1.25rem 3.25rem 1.25rem 1.5rem;
  position: relative;
  font-family: var(--gr-serif);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.4;
  color:#fff;
  transition: color .25s ease;
}
.gr-faq summary::-webkit-details-marker{ display:none; }
.gr-faq summary::marker{ content:""; }
.gr-faq summary:hover{ color: var(--gr-ouro); }
.gr-faq summary::after{
  content:"";
  position: absolute; right: 1.5rem; top: 1.6rem;
  width: .625rem; height: .625rem;
  border-right: 2px solid var(--gr-ouro);
  border-bottom: 2px solid var(--gr-ouro);
  transform: rotate(45deg);
  transition: transform .3s ease;
}
.gr-faq details[open] summary::after{ transform: rotate(-135deg); }
.gr-faq .gr-faq-corpo{
  padding: 0 1.5rem 1.5rem;
  color: rgba(255,255,255,.72);
  font-size: .9688rem;
  line-height: 1.7;
}
.gr-faq .gr-faq-corpo p:last-child{ margin-bottom: 0; }

/* ---------------------------------------------------------- formulário --- */

.gr-form-wrap{
  border-radius: 1.5rem;
  padding: 2.5rem;
  background: linear-gradient(160deg, rgba(201,178,146,.12), rgba(255,255,255,.02));
  border: 1px solid var(--gr-linha);
}
@media(max-width:575.98px){ .gr-form-wrap{ padding: 1.5rem; border-radius: 1.125rem; } }

.gr-label{
  display:block;
  font-size: .75rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--gr-ouro);
  margin-bottom: .45rem;
}
.gr-input{
  width: 100%;
  padding: .875rem 1.125rem;
  border-radius: .75rem;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.14);
  color:#fff;
  font-size: 1rem;
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.gr-input::placeholder{ color: rgba(255,255,255,.32); }
.gr-input:focus{
  outline: none;
  border-color: var(--gr-ouro);
  background: rgba(0,0,0,.5);
  box-shadow: 0 0 0 3px rgba(201,178,146,.16);
}
select.gr-input option{ background:#141416; color:#fff; }
.gr-form-nota{ font-size: .8125rem; color: rgba(255,255,255,.5); line-height: 1.55; }

/* -------------------------------------------------------------- extras --- */

.gr-cta-faixa{
  position: relative;
  border-radius: 1.5rem;
  padding: 2.75rem;
  background:
    linear-gradient(120deg, rgba(201,178,146,.16), rgba(11,11,12,.6)),
    var(--gr-carvao);
  border: 1px solid var(--gr-linha);
  overflow: hidden;
}
.gr-cta-faixa::after{
  content:"";
  position: absolute; right: -4rem; top: -4rem;
  width: 18rem; height: 18rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,178,146,.18), transparent 68%);
  pointer-events: none;
}
@media(max-width:1399.98px){ .gr-cta-faixa{ padding: 1.5rem; } }
@media(max-width:575.98px){ .gr-cta-faixa{ padding: 1.75rem; } }

/* Telas médias (tablet e notebook): as colunas encolhem mas os rótulos não.
   Aqui o botão inteiro diminui um pouco para o texto caber em uma linha. */
@media(min-width:576px) and (max-width:1399.98px){
  .gr-btn,
  .gr-btns > .gr-btn,
  .gr-cta-faixa .gr-btns > .gr-btn{
    font-size: .75rem;
    letter-spacing: 0;
    padding-left: .55rem;
    padding-right: .55rem;
    gap: .35rem;
  }
  .gr-btn svg{ width: .9375rem; height: .9375rem; }
  /* o rótulo manda na largura: em vez de quebrar, o botão pede o espaço */
  .gr-btns > .gr-btn > span{ white-space: nowrap; }
}

/* o cabeçalho fixo não pode cobrir o título da dobra ao chegar pela âncora */
section[id], main[id]{ scroll-margin-top: 5.5rem; }
@media(max-width:991.98px){ section[id], main[id]{ scroll-margin-top: 4.5rem; } }

.gr-secao{ padding: 5.5rem 0; }
@media(max-width:767.98px){ .gr-secao{ padding: 3.5rem 0; } }
.gr-secao-sm{ padding: 4rem 0; }
@media(max-width:767.98px){ .gr-secao-sm{ padding: 2.75rem 0; } }

.gr-lista-check{ list-style:none; padding:0; margin:0; }
.gr-lista-check li{
  position: relative;
  padding-left: 2rem;
  margin-bottom: .75rem;
  color: rgba(255,255,255,.78);
  font-size: .9688rem;
  line-height: 1.6;
}
.gr-lista-check li::before{
  content:"";
  position: absolute; left: 0; top: .35rem;
  width: 1.125rem; height: 1.125rem;
  border-radius: 50%;
  background: rgba(201,178,146,.16);
  border: 1px solid var(--gr-linha-forte);
}
.gr-lista-check li::after{
  content:"";
  position: absolute; left: .375rem; top: .6rem;
  width: .375rem; height: .1875rem;
  border-left: 2px solid var(--gr-ouro);
  border-bottom: 2px solid var(--gr-ouro);
  transform: rotate(-45deg);
}

.gr-num{
  font-family: var(--gr-serif);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--gr-ouro);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.gr-num-legenda{ font-size: .8125rem; color: rgba(255,255,255,.6); line-height: 1.4; }

/* painel de números com separador dourado entre as colunas */
.gr-numeros{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--gr-linha);
  border-bottom: 1px solid var(--gr-linha);
}
@media(max-width:575.98px){ .gr-numeros{ grid-template-columns: repeat(2, 1fr); } }

.gr-numero{
  position: relative;
  padding: 1.5rem 1rem 1.5rem 0;
  transition: background .35s ease;
}
.gr-numero + .gr-numero{ padding-left: 1.25rem; }
.gr-numero + .gr-numero::before{
  content:"";
  position: absolute; left: 0; top: 1.25rem; bottom: 1.25rem;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--gr-linha-forte), transparent);
}
@media(max-width:575.98px){
  .gr-numero:nth-child(3){ padding-left: 0; }
  .gr-numero:nth-child(3)::before{ display:none; }
  .gr-numero:nth-child(n+3){ border-top: 1px solid var(--gr-linha); }
}
.gr-numero:hover .gr-num{ color: var(--gr-ouro-claro); }
.gr-numero .gr-num{ transition: color .3s ease; display: block; margin-bottom: .35rem; }

/* Proporção pelo próprio CSS. Não usar a classe .ratio do Bootstrap aqui:
   ela força TODO filho direto a 100%x100%, e a etiqueta arredondada virava
   uma elipse escura cobrindo a foto. */
.gr-foto-moldura{
  position: relative;
  border-radius: 1.5rem;
  overflow: hidden;
  border: 1px solid var(--gr-linha);
}
.gr-foto-4x3{ aspect-ratio: 4 / 3; }
@supports not (aspect-ratio: 4 / 3){
  .gr-foto-4x3{ height: 26rem; }
}
.gr-foto-moldura > img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s cubic-bezier(.22,.61,.36,1), filter .5s ease;
  filter: saturate(.86) contrast(1.06) brightness(.96);
}
.gr-foto-moldura:hover > img{
  transform: scale(1.05);
  filter: saturate(1) contrast(1.1) brightness(1.04);
}
/* véu quente, para a foto pertencer à paleta dourada do site */
.gr-foto-moldura::before{
  content:"";
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(145deg, rgba(201,178,146,.22), transparent 58%);
  mix-blend-mode: overlay;
  pointer-events:none;
}
.gr-foto-moldura::after{
  content:"";
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(0deg, rgba(11,11,12,.72), rgba(11,11,12,.06) 52%);
  pointer-events:none;
}
/* --------------------------------------- retrato dos advogados no celular --- */
/* No desktop o retrato fica ao lado do texto. No celular ele vira um medalhão
   que flutua para fora do card — a foto aparece sem roubar largura do texto. */
@media(max-width:575.98px){
  .gr-equipe-card{
    position: relative;
    margin-top: 2.75rem;
    padding-top: 3.5rem !important;
    overflow: visible;        /* sem isso o card corta o medalhão */
  }
  .gr-equipe-foto{
    position: absolute;
    top: -2rem; left: 1.5rem;
    width: 5.5rem !important; height: 5.5rem !important;
    border-radius: 50% !important;
    border: 2px solid var(--gr-ouro);
    box-shadow: 0 .9rem 2rem rgba(0,0,0,.6), 0 0 0 6px rgba(11,11,12,.9);
    z-index: 3;
    animation: gr-flutua 4.5s ease-in-out infinite;
  }
  .gr-equipe-foto::before,
  .gr-equipe-foto::after{ display: none; }   /* sem véu no medalhão */
  .gr-equipe-foto > img{ object-position: center 20%; filter: none; }  /* rosto centrado */
  .gr-equipe-card > .flex-fill{ width: 100%; }
}
@keyframes gr-flutua{
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
@media (prefers-reduced-motion: reduce){
  .gr-equipe-foto{ animation: none; }
}

.gr-foto-tag{
  position: absolute; left: 1.25rem; bottom: 1.25rem; z-index: 2;
  display: inline-flex; align-items:center; gap:.5rem;
  white-space: nowrap;
  max-width: calc(100% - 2.5rem);
  padding: .5rem .95rem;
  border-radius: 999px;
  background: rgba(11,11,12,.72);
  border: 1px solid var(--gr-linha);
  backdrop-filter: blur(6px);
  color:#fff; font-size:.8125rem; font-weight:600;
}
.gr-foto-tag svg{ color: var(--gr-ouro); width:1rem; height:1rem; }

/* WhatsApp flutuante com rótulo */
.gr-wapp{
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 10000;
  display: inline-flex; align-items: center; gap: .625rem;
  padding: .8rem 1.15rem;
  border-radius: 999px;
  background: #25D366;
  color: #fff !important;
  text-decoration: none;
  font-weight: 700;
  font-size: .9375rem;
  box-shadow: 0 .75rem 2rem rgba(0,0,0,.4);
  animation: gr-pulso 3s infinite;
  transition: transform .3s ease;
}
.gr-wapp:hover{ transform: translateY(-3px) scale(1.03); }
.gr-wapp svg{ width: 1.5rem; height: 1.5rem; flex: 0 0 auto; }
@media(max-width:575.98px){
  .gr-wapp{ padding: .85rem; }
  .gr-wapp .gr-wapp-txt{ display: none; }
}
@keyframes gr-pulso{
  0%{ box-shadow: 0 .75rem 2rem rgba(0,0,0,.4), 0 0 0 0 rgba(37,211,102,.6); }
  70%{ box-shadow: 0 .75rem 2rem rgba(0,0,0,.4), 0 0 0 18px rgba(37,211,102,0); }
  100%{ box-shadow: 0 .75rem 2rem rgba(0,0,0,.4), 0 0 0 0 rgba(37,211,102,0); }
}

/* rodapé */
.gr-footer{ background:#08080A; border-top: 1px solid rgba(255,255,255,.07); position: relative; }

/* voltar ao topo — pastilha que cresce ao passar o mouse */
.gr-topo{
  position: absolute;
  top: -1.4rem; left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.5rem;
  border-radius: 999px;
  background: linear-gradient(100deg, #E6D5B8 0%, #C9B292 45%, #A98D5F 100%);
  color: #14110B !important;
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 .75rem 2rem rgba(0,0,0,.55), 0 0 0 6px #08080A;
  transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
  z-index: 4;
}
.gr-topo:hover, .gr-topo:focus-visible{
  color: #14110B !important;
  transform: translateX(-50%) translateY(-4px) scale(1.09);
  box-shadow: 0 1.1rem 2.75rem rgba(201,178,146,.42), 0 0 0 6px #08080A;
}
.gr-topo svg{ transition: transform .35s cubic-bezier(.22,.61,.36,1); }
.gr-topo:hover svg{ transform: translateY(-3px); }
@media(max-width:575.98px){
  .gr-topo{ font-size: .6875rem; padding: .65rem 1.15rem; top: -1.25rem; }
}
.gr-footer a{ color: rgba(255,255,255,.62); text-decoration: none; transition: color .25s; }
.gr-footer a:hover{ color: var(--gr-ouro); }
.gr-footer-titulo{
  font-size: .75rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gr-ouro); font-weight: 700; margin-bottom: 1rem;
}

/* mapa */
.gr-mapa{
  border-radius: 1.25rem;
  overflow: hidden;
  border: 1px solid var(--gr-linha);
  filter: grayscale(1) invert(.9) contrast(.85);
  transition: filter .5s ease;
}
.gr-mapa:hover{ filter: grayscale(0) invert(0) contrast(1); }
.gr-mapa iframe{ display:block; width:100%; border:0; }

/* ============================================================================
   AJUSTES FINAIS DE CELULAR
   Ficam no fim do arquivo de propósito: as regras-base do hero são declaradas
   mais acima e, com a mesma especificidade, quem vem depois vence.
   ========================================================================== */

@media(max-width:575.98px){

  /* Headline: medida no aparelho, 6.8vw é o maior corpo em que
     "contas e bens bloqueados." ainda fecha em uma linha sem vazar. */
  .gr-hero h1{
    font-size: clamp(1.25rem, 6.3vw, 1.9rem);
    line-height: 1.16;
    max-width: none;
  }
  .gr-hero h1 .gr-realce{ white-space: nowrap; }

  /* Títulos de dobra: quebra equilibrada, sem palavra órfã na última linha. */
  .gr-titulo{ text-wrap: balance; line-height: 1.18; }
  h2.gr-titulo{ font-size: clamp(1.45rem, 6.2vw, 1.95rem) !important; }
  h3.gr-titulo{ font-size: clamp(1.1rem, 4.8vw, 1.375rem) !important; }
}