/* ==========================================================================
   Cláudia Virgínia Advogados Associados
   Folha de estilo única. CSS nativo, sem build, sem framework.

   PALETA (definida na Identidade Visual do escritório)
     bordô      #6B2231   cor primária, tinta da marca
     off-white  #FBFAF9   papel
     champanhe  #E8D6B0   acento

   REGRA DE COR TRAVADA
     O champanhe só aparece SOBRE bordô. Sobre papel ele rende 1.36:1, ou
     seja, é ilegível como texto. Em fundo claro o champanhe não vira texto
     em nenhuma hipótese.

   RAIO TRAVADO
     Zero em tudo. A marca é um losango de vértices vivos e a Cormorant é uma
     serifa clássica: canto arredondado brigaria com as duas.

   TIPOGRAFIA
     Cormorant Garamond   títulos e a marca  (definida na Identidade Visual)
     Geist                corpo, rótulos e interface

   TEMA
     Página em modo claro, travado. O escritório já teve bug de texto
     invisível quando o modo escuro forçado do Windows/Edge reescreveu as
     cores por conta própria, por isso o <meta name="color-scheme"> do HTML
     declara apenas "light" e não há bloco prefers-color-scheme aqui.
   ========================================================================== */

/* ---------- 1. Fontes locais -------------------------------------------- */
/* Arquivos variáveis: um único woff2 cobre de 400 a 600. */

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond-latin.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond-latin-ext.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  src: url('../fonts/geist-latin.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  src: url('../fonts/geist-latin-ext.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- 2. Tokens ---------------------------------------------------- */

:root {
  /* cor da marca */
  --bordo:        #6B2231;
  --bordo-deep:   #521A26;
  --bordo-ink:    #3B1119;
  --champanhe:    #E8D6B0;
  --papel:        #FBFAF9;
  --papel-morno:  #F4F0EA;

  /* tinta */
  --tinta:        #1C1719;   /* 15.9:1 sobre papel */
  --tinta-media:  #5C5257;   /*  7.1:1 sobre papel */

  /* filetes */
  --filete:       rgba(28, 23, 25, .13);
  --filete-forte: rgba(28, 23, 25, .24);
  --filete-claro: rgba(232, 214, 176, .28);   /* sobre bordô */

  /* tipografia */
  --serifa: 'Cormorant Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans:   'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* medida */
  --wrap: 1240px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --secao: clamp(4.5rem, 9vw, 8rem);

  /* movimento. MOTION_INTENSITY 5: presente, nunca exibicionista. */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur: .55s;

  /* camadas. Escala documentada para não haver z-index solto pelo arquivo. */
  --z-nav: 100;
  --z-menu: 90;
  --z-topo: 110;
}

/* ---------- 3. Reset ----------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

h1, h2, h3, h4 { margin: 0; font-weight: 500; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
/* figure e blockquote nascem com margin: 1em 40px no navegador. Sem zerar,
   os depoimentos ficam encolhidos e deslocados dentro da própria célula. */
figure, blockquote, dl, dd { margin: 0; }

:focus-visible {
  outline: 2px solid var(--bordo);
  outline-offset: 3px;
}
/* Sobre campo bordô o anel precisa inverter para continuar visível. */
.bloco-bordo :focus-visible,
.rodape :focus-visible { outline-color: var(--champanhe); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--z-topo);
  background: var(--bordo);
  color: var(--papel);
  padding: .75rem 1.25rem;
  font-size: .875rem;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ---------- 4. Tipografia ------------------------------------------------ */

/* Escala pensada junto com o comprimento da manchete: sete palavras em duas
   linhas na coluna de 7fr. Aumentar daqui joga o título para três linhas. */
.display {
  font-family: var(--serifa);
  font-weight: 500;
  font-size: clamp(2.35rem, 4.6vw, 4rem);
  line-height: 1.06;
  letter-spacing: -.015em;
  text-wrap: balance;
}

.titulo {
  font-family: var(--serifa);
  font-weight: 500;
  font-size: clamp(1.95rem, 3.6vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: -.012em;
  text-wrap: balance;
}

.subtitulo {
  font-family: var(--serifa);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.25;
  letter-spacing: -.005em;
}

.lead {
  font-size: clamp(1.02rem, 1.5vw, 1.15rem);
  line-height: 1.65;
  color: var(--tinta-media);
  max-width: 54ch;
}

.corpo {
  color: var(--tinta-media);
  max-width: 65ch;
}

/* Rótulo em versalete. Usado com parcimônia: três no site inteiro. */
.rotulo {
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tinta-media);
}
.bloco-bordo .rotulo { color: var(--champanhe); }

/* ---------- 5. Layout ---------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.secao { padding-block: var(--secao); }
.secao--morna { background: var(--papel-morno); }

/* Campo de cor da marca. Não é troca de tema: é a cor do escritório usada
   como bloco cheio, sempre com o mesmo tratamento em todas as ocorrências. */
.bloco-bordo {
  background: var(--bordo);
  color: var(--papel);
}
.bloco-bordo .corpo,
.bloco-bordo .lead { color: rgba(251, 250, 249, .78); }

.cabecalho-secao { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.cabecalho-secao .rotulo { display: block; margin-bottom: 1rem; }
.cabecalho-secao .corpo { margin-top: 1.25rem; }

/* ---------- 6. Marca ----------------------------------------------------- */

.marca {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  text-decoration: none;
  color: inherit;
}
.marca__losango {
  width: 2.05rem;
  height: 2.05rem;
  flex: none;
  color: var(--bordo);
}
.bloco-bordo .marca__losango,
.rodape .marca__losango { color: var(--champanhe); }
.marca__losango svg { width: 100%; height: 100%; }

.marca__texto { display: grid; gap: .16rem; }
.marca__nome {
  font-family: var(--serifa);
  font-weight: 500;
  font-size: 1.16rem;
  line-height: 1;
  letter-spacing: .13em;
  text-transform: uppercase;
  white-space: nowrap;
}
.marca__linha {
  font-family: var(--sans);
  font-size: .52rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--tinta-media);
  white-space: nowrap;
}
.bloco-bordo .marca__linha,
.rodape .marca__linha { color: var(--champanhe); }

/* ---------- 7. Navegação ------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: rgba(251, 250, 249, .86);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.nav.is-fixa {
  border-bottom-color: var(--filete);
  background: rgba(251, 250, 249, .94);
}
@media (prefers-reduced-transparency: reduce) {
  .nav { background: var(--papel); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.nav__inner {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.nav__links {
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2rem);
  margin-inline: auto;
}
.nav__links a {
  position: relative;
  font-size: .875rem;
  text-decoration: none;
  color: var(--tinta-media);
  padding-block: .35rem;
  transition: color .25s var(--ease);
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--bordo);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav__links a:hover { color: var(--tinta); }
.nav__links a:hover::after { transform: scaleX(1); }

.nav__ferramentas { display: flex; align-items: center; gap: .75rem; }

.hamburguer {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-content: center;
  gap: 5px;
  background: none;
  border: 1px solid var(--filete-forte);
  cursor: pointer;
  padding: 0;
}
.hamburguer span {
  display: block;
  width: 18px;
  height: 1px;
  background: var(--tinta);
  transition: transform .35s var(--ease), opacity .2s linear;
}
.hamburguer[aria-expanded='true'] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburguer[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.hamburguer[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* menu de tela cheia, só abaixo de 960px */
.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: var(--papel);
  padding: 6rem var(--gutter) 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .5s var(--ease), visibility 0s linear .5s;
}
.menu.is-aberto {
  transform: translateY(0);
  visibility: visible;
  transition: transform .5s var(--ease), visibility 0s linear 0s;
}
.menu__link {
  display: block;
  font-family: var(--serifa);
  font-size: clamp(2rem, 9vw, 2.75rem);
  line-height: 1.25;
  text-decoration: none;
  border-bottom: 1px solid var(--filete);
  padding-block: .5rem;
  opacity: 0;
  transform: translateY(14px);
}
.menu.is-aberto .menu__link {
  animation: sobe .5s var(--ease) forwards;
  animation-delay: calc(.1s + var(--i) * .06s);
}
@keyframes sobe { to { opacity: 1; transform: none; } }

/* ---------- 8. Botões ---------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  white-space: nowrap;            /* nenhum CTA quebra em duas linhas */
  padding: .9rem 1.6rem;
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .01em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: background .28s var(--ease), color .28s var(--ease),
              border-color .28s var(--ease), transform .12s ease-out;
}
.btn:active { transform: translateY(1px); }
.btn__icone { width: 1rem; height: 1rem; flex: none; }
.btn__icone svg { width: 100%; height: 100%; fill: currentColor; }

/* papel sobre bordô: 10.6:1 */
.btn--primario {
  background: var(--bordo);
  color: var(--papel);
  border-color: var(--bordo);
}
.btn--primario:hover { background: var(--bordo-ink); border-color: var(--bordo-ink); }

.btn--vazado {
  background: transparent;
  color: var(--bordo);
  border-color: var(--filete-forte);
}
.btn--vazado:hover { border-color: var(--bordo); background: rgba(107, 34, 49, .05); }

/* dentro de campo bordô o primário inverte para não sumir no fundo */
.bloco-bordo .btn--primario,
.rodape .btn--primario {
  background: var(--champanhe);
  color: var(--bordo-ink);         /* 8.0:1 */
  border-color: var(--champanhe);
}
.bloco-bordo .btn--primario:hover,
.rodape .btn--primario:hover { background: var(--papel); border-color: var(--papel); }

.bloco-bordo .btn--vazado,
.rodape .btn--vazado {
  color: var(--papel);
  border-color: rgba(232, 214, 176, .45);
}
.bloco-bordo .btn--vazado:hover,
.rodape .btn--vazado:hover { border-color: var(--champanhe); background: rgba(232, 214, 176, .1); }

.btn--pq { padding: .65rem 1.1rem; font-size: .82rem; }

/* ---------- 8.1 Troca de navegação por largura --------------------------- */
/* Este bloco fica DEPOIS de .btn de propósito. O CTA da barra também é .btn,
   e .btn declara display: inline-flex. Se a troca ficasse lá em cima na seção
   da navegação, a regra de .btn venceria por ordem e o botão apareceria no
   celular, empurrando a barra para fora da tela. */

.nav__links { display: none; }
.nav__cta   { display: none; }
.hamburguer { display: grid; }

@media (min-width: 960px) {
  .nav__links { display: flex; }
  .nav__cta   { display: inline-flex; }
  .hamburguer { display: none; }
}

/* ---------- 9. Hero ------------------------------------------------------ */
/* Divisão assimétrica 7/5. Sem foto por decisão do escritório: a coluna da
   direita é a placa da marca e é exatamente o espaço reservado para o
   retrato da advogada quando ele chegar. */

.hero {
  padding-top: clamp(3rem, 6vw, 5.5rem);   /* teto de pt-24 respeitado */
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
  position: relative;
  overflow: hidden;
}

.hero__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 1000px) {
  .hero__grid { grid-template-columns: 7fr 5fr; gap: clamp(3rem, 5vw, 5rem); }
}

.hero__rotulo { display: block; margin-bottom: 1.5rem; }
.hero .lead { margin-top: 1.6rem; }
.hero__acoes {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
}

/* placa da marca */
.placa {
  position: relative;
  isolation: isolate;
  background: linear-gradient(163deg, var(--bordo) 0%, var(--bordo-deep) 58%, var(--bordo-ink) 100%);
  color: var(--papel);
  aspect-ratio: 4 / 5;
  min-height: 380px;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 2.5rem 1.75rem;
  overflow: hidden;
}
/* losango grande como marca d'água atrás do conteúdo */
.placa__aguada {
  position: absolute;
  top: -14%;
  right: -18%;
  width: 82%;
  color: var(--champanhe);
  opacity: .12;
  z-index: -1;
  pointer-events: none;
}
.placa__losango {
  width: clamp(3.5rem, 7vw, 4.75rem);
  margin-inline: auto;
  color: var(--champanhe);
}
.placa__regua {
  width: 3.5rem;
  height: 1px;
  background: var(--filete-claro);
  margin: 1.6rem auto 1.35rem;
}
.placa__nome {
  font-family: var(--serifa);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 1.95rem);
  line-height: 1.18;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.placa__linha {
  margin-top: .9rem;
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--champanhe);
}
.placa__oab {
  margin-top: 2rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--filete-claro);
  font-size: .78rem;
  letter-spacing: .04em;
  color: rgba(251, 250, 249, .8);
}

/* ---------- 10. Faixa de credenciais ------------------------------------- */

.credenciais {
  border-block: 1px solid var(--filete);
  padding-block: clamp(2.25rem, 4vw, 3.25rem);
}
.credenciais__grid {
  display: grid;
  gap: 2rem 1.5rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 860px) {
  .credenciais__grid { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
  .credenciais__item + .credenciais__item {
    border-left: 1px solid var(--filete);
    padding-left: clamp(1.25rem, 2.5vw, 2.25rem);
  }
}
.credenciais__valor {
  font-family: var(--serifa);
  font-weight: 500;
  font-size: clamp(2.4rem, 4.2vw, 3.4rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--bordo);
  font-variant-numeric: tabular-nums;
}
.credenciais__rotulo {
  margin-top: .7rem;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--tinta-media);
  max-width: 24ch;
}

/* ---------- 11. Áreas (bento de seis células) ---------------------------- */

.areas__grid {
  display: grid;
  gap: 1px;
  background: var(--filete);      /* o gap vira o filete: um traço, não dois */
  border: 1px solid var(--filete);
}
@media (min-width: 780px)  { .areas__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .areas__grid { grid-template-columns: repeat(6, 1fr); } }

.area {
  background: var(--papel);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: background .35s var(--ease);
}
.area:hover { background: var(--papel-morno); }

.area__icone {
  width: 1.85rem;
  height: 1.85rem;
  color: var(--bordo);
}
.area__icone svg { width: 100%; height: 100%; fill: currentColor; }

.area__titulo { color: var(--tinta); }
.area__texto { font-size: .93rem; color: var(--tinta-media); }

.area__lista {
  margin-top: auto;
  padding-top: 1.15rem;
  border-top: 1px solid var(--filete);
  display: grid;
  gap: .5rem;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--tinta-media);
}
.area__lista li { display: flex; gap: .6rem; align-items: flex-start; }
.area__lista svg {
  width: .95rem;
  height: .95rem;
  flex: none;
  margin-top: .28rem;
  fill: var(--bordo);
  opacity: .6;
}

/* ritmo do bento: uma célula-destaque, uma célula larga com foto, quatro
   células padrão. Seis conteúdos, seis células, nenhuma vazia. */
@media (min-width: 1060px) {
  .area--destaque { grid-column: span 3; grid-row: span 2; }
  .area--alta     { grid-column: span 3; }
  .area--terco    { grid-column: span 3; }
  .area--larga    { grid-column: span 6; }
}

/* a célula-destaque é campo de cor cheio. Ela ocupa duas fileiras, então o
   conteúdo é centrado na vertical: a folga fica dividida em cima e embaixo
   em vez de virar um vão único no meio. */
.area--destaque,
.area--destaque:hover {
  background: var(--bordo);
  color: var(--papel);
  justify-content: center;
}
.area--destaque .area__icone { color: var(--champanhe); }
.area--destaque .area__titulo { color: var(--papel); }
.area--destaque .area__texto { color: rgba(251, 250, 249, .8); }
/* A célula-destaque ocupa duas fileiras. Com margin-top:auto a lista era
   empurrada para a base e abria um vão no meio do campo de cor. Aqui o
   conteúdo fica agrupado no alto e a folga sobra embaixo, como respiro. */
.area--destaque .area__lista {
  margin-top: .5rem;
  border-top-color: var(--filete-claro);
  color: rgba(251, 250, 249, .8);
}
.area--destaque .area__lista svg { fill: var(--champanhe); opacity: 1; }
.area--destaque .subtitulo { font-size: 1.6rem; }

/* a célula larga carrega imagem.
   O item flex é o <picture>, não o <img>: <picture> é inline por padrão e,
   sem isto, ele encolhe até o tamanho natural da imagem e a foto fica
   solta num canto da célula em vez de preencher a coluna. */
.area--larga {
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  padding: 0;
}
.area--larga .area__conteudo {
  flex: 1 1 auto;
  min-width: 0;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.area--larga picture {
  flex: 0 0 38%;
  display: block;
  align-self: stretch;
  min-height: 230px;
}
.area--larga .area__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05) brightness(1.02);
}
@media (max-width: 1059px) {
  .area--larga { flex-direction: column; align-items: stretch; }
  .area--larga picture { flex: none; width: 100%; min-height: 0; height: 200px; order: -1; }
}

/* Frentes secundárias (civil e empresarial). Sem ícone, sem cartão e sem
   borda de célula: o peso visual fica todo no bento acima, que é a frente
   principal. Aqui a hierarquia é feita só com tipografia e espaço. */
.areas__extra {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(2rem, 4vw, 2.75rem);
  border-top: 1px solid var(--filete);
}
.areas__extra-cab {
  max-width: 58ch;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
.areas__extra-cab p {
  margin-top: .75rem;
  font-size: .95rem;
  color: var(--tinta-media);
}

.areas__extra-grid { display: grid; gap: clamp(1.75rem, 3vw, 2.5rem); }
@media (min-width: 620px) {
  .areas__extra-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1060px) {
  .areas__extra-grid { grid-template-columns: repeat(4, 1fr); }
}
.areas__extra-titulo {
  font-family: var(--serifa);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--tinta);
  padding-bottom: .75rem;
  margin-bottom: .9rem;
  border-bottom: 1px solid var(--filete);
}
.areas__extra-grid p { font-size: .93rem; color: var(--tinta-media); }

/* ---------- 12. Manifesto (campo bordô, uma frase) ----------------------- */

.manifesto { padding-block: clamp(4.5rem, 9vw, 7.5rem); }
.manifesto__grid {
  display: grid;
  gap: 2.5rem;
  align-items: end;
}
@media (min-width: 900px) {
  .manifesto__grid { grid-template-columns: 1fr auto; gap: 4rem; }
}
.manifesto__frase {
  font-family: var(--serifa);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.6vw, 2.9rem);
  line-height: 1.24;
  letter-spacing: -.01em;
  max-width: 22ch;
  text-wrap: balance;
}
.manifesto__assinatura {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--champanhe);
  white-space: nowrap;
}
.manifesto__assinatura::before {
  content: '';
  width: 2.5rem;
  height: 1px;
  flex: none;
  background: var(--filete-claro);
}

/* ---------- 13. A advogada ----------------------------------------------- */

.advogada__grid {
  display: grid;
  gap: clamp(2.25rem, 5vw, 3.5rem);
}
@media (min-width: 860px) {
  /* retrato mais estreito que o texto, ecoando o 7/5 do hero em espelho.
     align-items stretch (o padrão do grid) é proposital: o retrato acompanha
     a altura da coluna de texto em vez de ficar com sobra vazia embaixo. */
  .advogada__grid { grid-template-columns: 5fr 7fr; gap: clamp(2.5rem, 5vw, 4rem); }
}

/* Espaço reservado para o retrato. .retrato__marca fica centralizada por
   posicionamento absoluto, não por grid/flex, porque isso continua
   funcionando sem tocar no CSS quando o <div> virar um <picture> real:
   troque o miolo por <source>/<img class="retrato__foto"> e pronto. */
.retrato {
  position: relative;
  display: block;
  min-height: 380px;
  background: var(--papel-morno);
  border: 1px solid var(--filete-forte);
  overflow: hidden;
}
.retrato__marca {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44%;
  color: var(--bordo);
  opacity: .15;
}
.retrato__foto {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.advogada__texto { display: grid; gap: 1.15rem; }
.advogada__texto p { color: var(--tinta-media); max-width: 58ch; }

.advogada__oab {
  color: var(--bordo);
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .03em;
}

.advogada__pilares {
  margin-top: .75rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
  max-width: 30rem;
}
.advogada__pilares li {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .9rem 1.05rem;
  border: 1px solid var(--filete);
  background: var(--papel-morno);
  font-size: .87rem;
  color: var(--tinta);
}
.advogada__pilares svg { width: 1.05rem; height: 1.05rem; flex: none; fill: var(--bordo); }
@media (max-width: 480px) {
  .advogada__pilares { grid-template-columns: 1fr; }
}

/* ---------- 14. O escritório (imagem sangrada) --------------------------- */

.escritorio { position: relative; background: var(--papel); }
.escritorio__foto {
  width: 100%;
  height: clamp(340px, 52vh, 560px);
  object-fit: cover;
  filter: saturate(.82) contrast(1.03);
}
/* position: relative é obrigatório. A imagem é conteúdo inline atômico e
   pinta depois do fundo de blocos em fluxo normal: sem criar um elemento
   posicionado, a foto cobre o topo do cartão. */
.escritorio__cartao {
  position: relative;
  background: var(--bordo);
  color: var(--papel);
  padding: clamp(2rem, 4vw, 3rem);
  max-width: 34rem;
}
/* O cartão sobe sobre a imagem por margem negativa, não por posicionamento
   absoluto: assim ele continua no fluxo e reserva a própria altura, seja qual
   for o tamanho do texto dentro dele. */
@media (min-width: 900px) {
  .escritorio__cartao {
    margin-left: auto;
    margin-top: clamp(-14rem, -16vw, -8rem);
  }
  .escritorio { padding-bottom: clamp(3.5rem, 7vw, 6rem); }
}
.escritorio__cartao .titulo { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.escritorio__cartao p {
  margin-top: 1rem;
  color: rgba(251, 250, 249, .8);
  font-size: .95rem;
}
.escritorio__dados {
  margin-top: 1.75rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--filete-claro);
  display: grid;
  gap: .55rem;
  font-size: .86rem;
  line-height: 1.5;
  color: rgba(251, 250, 249, .82);
}
.escritorio__dados li { display: flex; gap: .7rem; align-items: flex-start; }
.escritorio__dados svg {
  width: 1rem; height: 1rem; flex: none; margin-top: .3rem;
  fill: var(--champanhe);
}

/* ---------- 15. Método (quatro etapas numeradas) ------------------------- */

.metodo__grid { display: grid; gap: 0; }
@media (min-width: 720px)  { .metodo__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .metodo__grid { grid-template-columns: repeat(4, 1fr); } }

.etapa {
  padding: 1.75rem clamp(1.25rem, 3vw, 2.5rem) 1.75rem 0;
  border-top: 2px solid var(--bordo);
}
.etapa__n {
  font-family: var(--serifa);
  font-size: 2.6rem;
  font-weight: 500;
  line-height: 1;
  color: var(--bordo);
  opacity: .3;
  font-variant-numeric: tabular-nums;
}
.etapa__titulo { margin-top: 1rem; }
.etapa__texto { margin-top: .75rem; font-size: .92rem; color: var(--tinta-media); }

/* ---------- 16. Depoimentos ---------------------------------------------- */

.depoimentos__grid {
  display: grid;
  gap: 1px;
  background: var(--filete);
  border: 1px solid var(--filete);
}
@media (min-width: 900px) { .depoimentos__grid { grid-template-columns: repeat(3, 1fr); } }

.depoimento {
  background: var(--papel-morno);
  padding: clamp(1.75rem, 3vw, 2.4rem);
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}
.depoimento__aspas {
  font-family: var(--serifa);
  font-size: 3rem;
  line-height: .55;
  color: var(--bordo);
  opacity: .3;
}
.depoimento__texto {
  font-family: var(--serifa);
  font-size: 1.2rem;
  line-height: 1.45;
  color: var(--tinta);
}
.depoimento__quem {
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid var(--filete);
  font-size: .82rem;
  line-height: 1.5;
  color: var(--tinta-media);
}
.depoimento__nome { display: block; color: var(--tinta); font-weight: 500; }

.aviso-etico {
  margin-top: 1.75rem;
  font-size: .78rem;
  line-height: 1.6;
  color: var(--tinta-media);
  max-width: 80ch;
}

/* ---------- 17. Dúvidas (acordeão nativo) -------------------------------- */

.faq { display: grid; }
.faq__item { border-top: 1px solid var(--filete); }
.faq__item:last-child { border-bottom: 1px solid var(--filete); }

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.5rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--serifa);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 600;
  line-height: 1.3;
  transition: color .25s var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--bordo); }
.faq__seta {
  width: 1.1rem; height: 1.1rem; flex: none;
  fill: var(--bordo);
  transition: transform .35s var(--ease);
}
.faq__item[open] .faq__seta { transform: rotate(180deg); }
.faq__resposta {
  padding-bottom: 1.75rem;
  font-size: .95rem;
  color: var(--tinta-media);
  max-width: 68ch;
}
.faq__item[open] .faq__resposta { animation: abre .4s var(--ease); }
@keyframes abre { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- 18. Contato e formulário ------------------------------------- */

.contato__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
}
@media (min-width: 960px) {
  .contato__grid { grid-template-columns: 5fr 7fr; align-items: start; }
}

.contato__canais { margin-top: 2.5rem; display: grid; gap: 1.6rem; }
.contato__canal { display: grid; gap: .35rem; }
.contato__canal dt {
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--champanhe);
}
.contato__canal dd { margin: 0; font-size: .95rem; line-height: 1.55; }
.contato__canal a { text-decoration: none; border-bottom: 1px solid var(--filete-claro); }
.contato__canal a:hover { border-bottom-color: var(--champanhe); }

/* formulário */
.form { display: grid; gap: 1.35rem; }
.form__linha { display: grid; gap: 1.35rem; }
@media (min-width: 620px) { .form__linha { grid-template-columns: 1fr 1fr; } }

.campo { display: grid; gap: .5rem; }
.campo label {
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--champanhe);          /* 7.8:1 sobre bordô */
}
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  background: rgba(251, 250, 249, .07);
  border: 1px solid rgba(232, 214, 176, .38);
  border-radius: 0;
  color: var(--papel);
  padding: .85rem 1rem;
  font-size: .95rem;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.campo textarea { min-height: 8rem; resize: vertical; }
.campo input::placeholder,
.campo textarea::placeholder { color: rgba(251, 250, 249, .58); }
.campo input:hover,
.campo select:hover,
.campo textarea:hover { border-color: rgba(232, 214, 176, .65); }
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--champanhe);
  background: rgba(251, 250, 249, .12);
  box-shadow: 0 0 0 1px var(--champanhe);
}
.campo select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8D6B0' stroke-width='1.6'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem;
  padding-right: 2.75rem;
}
.campo select option { background: var(--bordo-ink); color: var(--papel); }

.campo__ajuda { font-size: .78rem; color: rgba(251, 250, 249, .7); }
.campo__erro {
  font-size: .78rem;
  color: #FFCDBA;                   /* 8.1:1 sobre bordô */
  display: none;
  align-items: center;
  gap: .4rem;
}
.campo__erro svg { width: .9rem; height: .9rem; fill: currentColor; flex: none; }
.campo.tem-erro .campo__erro { display: flex; }
.campo.tem-erro input,
.campo.tem-erro select,
.campo.tem-erro textarea { border-color: #FFCDBA; }

.form__rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: .5rem;
}
.form__nota {
  font-size: .78rem;
  line-height: 1.5;
  color: rgba(251, 250, 249, .7);
  max-width: 38ch;
}

/* estados do envio */
.form__estado {
  display: none;
  align-items: flex-start;
  gap: .7rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--filete-claro);
  font-size: .9rem;
  line-height: 1.5;
}
.form__estado.is-visivel { display: flex; }
.form__estado svg { width: 1.15rem; height: 1.15rem; flex: none; margin-top: .15rem; fill: var(--champanhe); }
.form__estado--erro { border-color: #FFCDBA; }
.form__estado--erro svg { fill: #FFCDBA; }

.btn[aria-busy='true'] { pointer-events: none; opacity: .8; }
.btn[aria-busy='true'] .btn__icone svg { animation: gira 1s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* ---------- 19. Rodapé --------------------------------------------------- */

.rodape {
  background: var(--bordo-ink);
  color: var(--papel);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}
.rodape__topo {
  display: grid;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--filete-claro);
}
@media (min-width: 860px) {
  .rodape__topo { grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; }
}
.rodape__sobre {
  margin-top: 1.5rem;
  font-size: .9rem;
  color: rgba(251, 250, 249, .74);
  max-width: 40ch;
}
.rodape__col h3 {
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--champanhe);
  margin-bottom: 1.15rem;
}
.rodape__col li + li { margin-top: .65rem; }
.rodape__col a {
  font-size: .9rem;
  text-decoration: none;
  color: rgba(251, 250, 249, .84);
  transition: color .25s var(--ease);
}
.rodape__col a:hover { color: var(--champanhe); }

.rodape__base {
  padding-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
  font-size: .78rem;
  line-height: 1.6;
  color: rgba(251, 250, 249, .66);
}
.rodape__social { display: flex; gap: .5rem; }
.rodape__social a {
  width: 2.35rem;
  height: 2.35rem;
  display: grid;
  place-content: center;
  border: 1px solid rgba(232, 214, 176, .32);
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.rodape__social a:hover { border-color: var(--champanhe); background: rgba(232, 214, 176, .12); }
.rodape__social svg { width: 1.1rem; height: 1.1rem; fill: var(--champanhe); }

/* ---------- 20. Movimento ------------------------------------------------ */
/* Cada animação tem função: hierarquia na entrada do hero, narrativa na
   chegada das seções, resposta tátil nos botões. Nada em laço infinito. */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js [data-reveal].is-visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .menu.is-aberto .menu__link { animation: none; opacity: 1; transform: none; }
  .faq__item[open] .faq__resposta { animation: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ---------- 21. Utilidades ----------------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.sentinela { position: absolute; top: 0; height: 1px; width: 100%; pointer-events: none; }