/* =============================================================
   IVOMAR GOMES ADVOGADOS ASSOCIADOS — folha única do site
   v3: o visual aprovado pelo escritório (hero com retrato, cards,
   seção TRT-17 com foto e vídeo, cursor dourado, largura cheia)
   sobre o conteúdo revisado (OAB, SEO, LGPD, acessibilidade).

   REGRAS QUE PERMANECEM:
   · Ouro sobre verde = --ouro. Ouro sobre creme = --ouro-tinta (contraste AA).
   · UMA profundidade de sombra (--sombra).
   · Zero degradê em texto. border-radius 0.
   · Corpo mínimo 17px.
   ============================================================= */

/* ---------- FONTES (auto-hospedadas) ---------- */
@font-face {
  font-family: 'Marcellus';
  src: url('../fontes/marcellus-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fontes/source-sans-3-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fontes/source-sans-3-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212;
}

/* ---------- TOKENS ---------- */
:root {
  --verde:       #15392B;
  --verde-fundo: #0E2A1F;
  --verde-alto:  #1D4636;
  --salvia:      #6B8569;
  --creme:       #F6F2E9;
  --off-white:   #FDFBF6;

  --ouro:        #C2A05A;   /* sobre verde — 5,14:1 */
  --ouro-claro:  #DDC084;   /* sobre verde */
  --ouro-tinta:  #7D6224;   /* sobre creme — 5,16:1 */

  --tinta:       #26312B;
  --tinta-fraca: #5E6B62;
  --nevoa:       #B9C4BB;

  --filete:       1px solid rgba(38, 49, 43, .16);
  --filete-ouro:  1px solid rgba(125, 98, 36, .34);
  --filete-claro: 1px solid rgba(246, 242, 233, .16);
  --filete-ouro-escuro: 1px solid rgba(194, 160, 90, .32);

  --display: 'Marcellus', 'Times New Roman', Georgia, serif;
  --texto:   'Source Sans 3', -apple-system, 'Segoe UI', Roboto, sans-serif;

  --corpo:   clamp(1.0625rem, 1.02rem + .2vw, 1.1875rem);
  --h1:      clamp(2.25rem, 1.4rem + 3.6vw, 4.5rem);
  --h2:      clamp(1.75rem, 1.35rem + 1.7vw, 2.75rem);
  --h3:      clamp(1.25rem, 1.12rem + .55vw, 1.5rem);
  --medida:  72ch;

  --secao:   clamp(4rem, 3rem + 4.5vw, 7rem);
  --limite:  81rem;

  --sombra:  0 18px 50px rgba(14, 42, 31, .28);
  --transicao: 620ms cubic-bezier(.2, .6, .2, 1);
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 6rem; }
body {
  background: var(--creme);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: var(--corpo);
  font-weight: 400;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; }
::selection { background: var(--ouro); color: var(--verde-fundo); }

/* cursor dourado — a seta da casa (desktop com mouse; touch ignora) */
@media (hover: hover) and (pointer: fine) {
  body, body a, body button, body summary {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23E8CD8F'/%3E%3Cstop offset='1' stop-color='%23B8954E'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M4 2 L4 20 L8.6 15.8 L11.6 22.6 L14.8 21.2 L11.8 14.5 L18 14 Z' fill='url(%23g)' stroke='%2315392B' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2, auto;
  }
  .cursor-anel {
    position: fixed; top: 0; left: 0; z-index: 9999;
    width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid var(--ouro);
    pointer-events: none;
    opacity: 0;
    transition: opacity 400ms, border-color 250ms, background 250ms;
  }
  body[data-cursor="on"] .cursor-anel { opacity: .6; }
  .cursor-anel[data-alvo="true"] { border-color: var(--ouro-claro); background: rgba(194, 160, 90, .12); }
}
.cursor-anel { display: none; }
@media (hover: hover) and (pointer: fine) { .cursor-anel { display: block; } }

:focus-visible {
  outline: 2px solid var(--verde);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(194, 160, 90, .55);
}
.sobre-verde :focus-visible, .rodape :focus-visible,
.menu-movel :focus-visible, .consentimento :focus-visible, .faixa-trt :focus-visible {
  outline-color: var(--ouro-claro);
  box-shadow: 0 0 0 5px rgba(246, 242, 233, .3);
}

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--verde-fundo); }
::-webkit-scrollbar-thumb { background: var(--ouro); }

/* ---------- SALTO DE CONTEÚDO ---------- */
.pular {
  position: absolute; left: 8px; top: -60px; z-index: 300;
  background: var(--verde); color: var(--creme);
  padding: 12px 20px; text-decoration: none;
  font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase;
  transition: top 180ms;
}
.pular:focus { top: 8px; }

/* ---------- TIPOGRAFIA ---------- */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; line-height: 1.12; }
h1 { font-size: var(--h1); letter-spacing: -.01em; }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); line-height: 1.25; }
p  { max-width: var(--medida); }
p + p { margin-top: 1.1em; }

.destaque { font-style: normal; color: var(--ouro-tinta); }
.sobre-verde .destaque, .faixa-trt .destaque { color: var(--ouro-claro); }

.aparelho {
  font-family: var(--texto); font-weight: 600;
  font-size: .75rem; letter-spacing: .16em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--ouro-tinta);
}
.sobre-verde .aparelho { color: var(--ouro-claro); }

.rotulo {
  display: inline-flex; align-items: center; gap: .875rem;
  font-size: .75rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--ouro-tinta);
  margin-bottom: 1.25rem;
}
.rotulo::before { content: ''; width: 2rem; height: 1px; background: currentColor; }
.sobre-verde .rotulo, .faixa-trt .rotulo { color: var(--ouro-claro); }

.lede { font-size: 1.1875rem; line-height: 1.7; color: var(--tinta-fraca); max-width: 66ch; }
.sobre-verde .lede, .faixa-trt .lede { color: var(--nevoa); }
.lede strong, p strong { font-weight: 600; color: var(--tinta); }
.sobre-verde .lede strong, .sobre-verde p strong,
.faixa-trt .lede strong, .faixa-trt p strong { color: var(--creme); }

.prosa a {
  color: var(--tinta);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-color: var(--ouro-tinta);
  text-decoration-thickness: 1px;
}
.prosa a:hover { text-decoration-thickness: 2px; }

/* ---------- ESTRUTURA ---------- */
.sobre-verde { background: var(--verde); color: var(--creme); }
.sobre-verde h1, .sobre-verde h2, .sobre-verde h3 { color: var(--creme); }

.secao { padding: var(--secao) 2rem; }
.caixa { max-width: var(--limite); margin-inline: auto; }

/* marginália vira etiqueta compacta acima do texto — sem coluna vazia */
.com-rail { display: block; }
.margem {
  display: inline-block;
  font-size: .71875rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ouro-tinta);
  font-variant-numeric: tabular-nums;
  line-height: 1.7;
  border-left: 3px solid var(--ouro-tinta);
  padding: .15rem 0 .15rem .8rem;
  margin-bottom: 1.4rem;
}
.margem br { display: none; }
.margem::after { content: ''; display: inline; }
.sobre-verde .margem { color: var(--ouro-claro); border-left-color: var(--ouro); }

/* ---------- EMENTA (assinatura mantida) ---------- */
.ementa { padding: calc(var(--secao) * .8) 2rem; border-block: var(--filete-ouro); background: var(--off-white); }
.ementa-interna { max-width: var(--limite); margin-inline: auto; }
.ementa-termos {
  list-style: none;
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: .6rem 1.15rem;
  text-align: center;
}
.ementa-termos li {
  font-size: .8125rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--tinta);
}
.ementa-termos li:not(:last-child)::after {
  content: ''; display: inline-block;
  width: 6px; height: 6px; margin-left: 1.15rem;
  background: var(--ouro-tinta); transform: rotate(45deg);
  vertical-align: middle;
}
.ementa-filete {
  height: 1px; background: var(--ouro-tinta);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1100ms cubic-bezier(.2, .6, .2, 1);
  margin-bottom: 2.25rem;
}
.ementa.dentro .ementa-filete { transform: scaleX(1); }
@media (max-width: 640px) {
  .ementa-termos { justify-content: flex-start; text-align: left; gap: .5rem .9rem; }
  .ementa-termos li { font-size: .78125rem; letter-spacing: .12em; line-height: 1.9; }
  .ementa-termos li:not(:last-child)::after { margin-left: .9rem; }
}

/* ---------- CABEÇALHO ---------- */
.topo {
  position: sticky; top: 0; z-index: 100;
  background: var(--verde);
  border-bottom: var(--filete-ouro-escuro);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding: .875rem 2rem;
}
.marca { display: flex; align-items: center; gap: .875rem; text-decoration: none; }
.marca svg, .marca img { width: 46px; height: auto; filter: drop-shadow(0 0 10px rgba(194, 160, 90, .35)); }
.marca-nome { display: flex; flex-direction: column; line-height: 1; }
.marca-nome b {
  font-family: var(--display); font-weight: 400;
  font-size: 1.1875rem; color: var(--creme); letter-spacing: .06em;
}
.marca-nome span {
  font-size: .5rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--ouro); margin-top: .3rem;
}
.menu { display: flex; gap: 2rem; list-style: none; }
.menu a {
  text-decoration: none; color: var(--nevoa);
  font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase;
  padding-block: .25rem;
  border-bottom: 1px solid transparent;
  transition: color 240ms, border-color 240ms;
}
.menu a:hover, .menu a[aria-current="page"] { color: var(--creme); border-bottom-color: var(--ouro); }

.topo-fone {
  font-family: var(--texto); font-weight: 600;
  font-size: .8125rem; letter-spacing: .1em;
  color: var(--ouro-claro); text-decoration: none;
  border: var(--filete-ouro-escuro); padding: .7rem 1.15rem;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  transition: background 240ms, color 240ms;
}
.topo-fone:hover { background: var(--ouro); color: var(--verde-fundo); }

.hamburguer {
  display: none; background: none; border: none; cursor: pointer;
  flex-direction: column; gap: 5px; padding: .5rem;
}
.hamburguer span { display: block; width: 24px; height: 1.5px; background: var(--ouro); }

.menu-movel {
  position: fixed; inset: 0; z-index: 200;
  background: var(--verde-fundo);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.75rem;
  opacity: 0; visibility: hidden; transition: opacity 300ms, visibility 300ms;
}
.menu-movel[data-aberto="true"] { opacity: 1; visibility: visible; }
.menu-movel a {
  font-family: var(--display); font-size: 1.75rem;
  color: var(--creme); text-decoration: none;
}
.menu-movel a:hover, .menu-movel a[aria-current="page"] { color: var(--ouro-claro); }
.menu-fechar {
  position: absolute; top: 1.25rem; right: 1.5rem;
  background: none; border: none; color: var(--ouro);
  font-size: 1.75rem; line-height: 1; cursor: pointer; padding: .5rem;
}

/* ---------- HERO DIVIDIDO (texto + retrato com o traço da marca) ---------- */
.abertura { padding: clamp(3rem, 2rem + 4.5vw, 5.5rem) 2rem; position: relative; overflow: hidden; }
/* mármore verde com veios dourados sob um véu verde: textura de pedra
   em todas as aberturas, contraste do texto preservado pelo véu */
.abertura::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to bottom, rgba(21, 57, 43, .58), rgba(21, 57, 43, .78)),
    url('../img/marca/marmore-2560.webp');
  background-size: cover;
  background-position: center;
}
.abertura-interna { max-width: var(--limite); margin-inline: auto; position: relative; }
.hero-split {
  display: grid; grid-template-columns: 1.06fr .94fr;
  gap: clamp(2.5rem, 2rem + 3vw, 5.5rem);
  align-items: center;
}
.abertura h1 { max-width: 16ch; margin-bottom: 1.5rem; }
.abertura .lede { max-width: 58ch; }

.moldura { position: relative; }
.moldura::before {
  content: ''; position: absolute; inset: 1.1rem -1.1rem -1.1rem 1.1rem;
  border: var(--filete-ouro-escuro); z-index: 0;
}
.moldura img { position: relative; z-index: 1; width: 100%; box-shadow: var(--sombra); }
.moldura .swash-baixo {
  position: absolute; z-index: 2; left: -9%; bottom: -8%;
  width: 118%; height: auto; pointer-events: none;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .3));
}

.credencial-linha {
  display: flex; flex-wrap: wrap; gap: .75rem 2rem;
  margin-top: 2.25rem; padding-top: 1.4rem;
  border-top: var(--filete-ouro-escuro);
}
.credencial-linha span {
  font-size: .75rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--nevoa); font-variant-numeric: tabular-nums;
}
.credencial-linha b { color: var(--ouro-claro); font-weight: 600; }

/* ---------- BOTÕES ---------- */
.botao-ouro {
  display: inline-flex; align-items: center; gap: .75rem;
  background: var(--ouro); color: var(--verde-fundo);
  text-decoration: none; font-weight: 600;
  font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase;
  padding: 1rem 2.1rem;
  transition: background 260ms, transform 260ms, box-shadow 260ms;
}
.botao-ouro:hover { background: var(--ouro-claro); transform: translateY(-2px); box-shadow: var(--sombra); }
.botao-ouro svg { width: 18px; height: 18px; }
.botao-linha {
  display: inline-flex; align-items: center; gap: .7rem;
  color: inherit; text-decoration: none;
  font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  padding: 1rem .25rem; opacity: .85;
  transition: opacity 240ms, gap 240ms;
}
.botao-linha:hover { opacity: 1; gap: 1.05rem; }
.botao-linha .seta { color: var(--ouro-tinta); }
.sobre-verde .botao-linha .seta, .faixa-trt .botao-linha .seta { color: var(--ouro-claro); }

/* ---------- GRADES E CARTÕES ---------- */
.grade { display: grid; gap: 1.1rem; }
.grade-2 { grid-template-columns: repeat(2, 1fr); }
.grade-3 { grid-template-columns: repeat(3, 1fr); }

.cartao {
  display: flex; flex-direction: column;
  background: var(--off-white);
  border: var(--filete);
  border-top: 2px solid rgba(125, 98, 36, .35);
  padding: 2.1rem 1.9rem;
  text-decoration: none; color: inherit;
  transition: transform 320ms, box-shadow 320ms, border-color 320ms;
}
.cartao p { flex: 1; }
.cartao .chamada { margin-top: 1.1rem; }
/* nada de sublinhado dentro de card — link é o card inteiro ou item de contato */
.cartao a, .cartao a:hover { text-decoration: none; }
.cartao:hover { transform: translateY(-4px); box-shadow: var(--sombra); border-top-color: var(--ouro-tinta); }
.cartao h3, .cartao b { font-family: var(--display); font-weight: 400; font-size: 1.375rem; display: block; margin-bottom: .6rem; color: var(--tinta); }
.cartao p { font-size: .96875rem; line-height: 1.7; color: var(--tinta-fraca); }
.cartao .aparelho { display: block; margin-bottom: 1rem; }

.chamada {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ouro-tinta);
  transition: gap 240ms;
}
.cartao:hover .chamada { gap: .9rem; }

/* cartões sobre a foto do TRT: vidro verde */
.faixa-trt .cartao {
  background: rgba(14, 42, 31, .72);
  border: var(--filete-ouro-escuro);
  border-top: 2px solid rgba(194, 160, 90, .55);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.faixa-trt .cartao h3, .faixa-trt .cartao b { color: var(--creme); }
.faixa-trt .cartao p { color: var(--nevoa); }
.faixa-trt .cartao:hover { border-top-color: var(--ouro); }
.faixa-trt .chamada { color: var(--ouro-claro); }

/* ---------- FAIXA TRT-17 (foto + vídeo de fundo) ---------- */
.faixa-trt { position: relative; color: var(--creme); overflow: hidden; padding: var(--secao) 2rem; }
.faixa-trt-fundo { position: absolute; inset: 0; background: var(--verde-fundo); }
.faixa-trt-fundo img, .faixa-trt-fundo video {
  position: absolute; inset: 0;
  width: 100%; height: 112%;
  object-fit: cover; object-position: 50% 30%;
  filter: grayscale(1) contrast(1.06) brightness(.8);
  mix-blend-mode: luminosity;
  opacity: .38;
  will-change: transform;
}
.faixa-trt-fundo video { opacity: 0; transition: opacity 1200ms ease; }
.faixa-trt-fundo video.rodando { opacity: .38; }
.faixa-trt-fundo.com-video img { opacity: 0; transition: opacity 1200ms ease; }
.faixa-trt-fundo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--verde-fundo), rgba(14, 42, 31, .38) 26%, rgba(14, 42, 31, .5) 74%, var(--verde-fundo));
}
.faixa-trt > .caixa { position: relative; z-index: 2; }
.faixa-trt-legenda {
  position: absolute; z-index: 2; right: 2rem; bottom: 1rem;
  font-size: .6875rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(246, 242, 233, .55);
}

/* ---------- PORTAS (cartões de entrada) ---------- */
.portas { list-style: none; }
.portas.grade-3 { margin-top: 2.5rem; }
.porta .cartao { height: 100%; }



/* ---------- SPREAD ---------- */
.spread { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.spread > div { padding: 0 2.5rem; }
.spread > div:first-child { padding-left: 0; border-right: var(--filete); }
.spread > div:last-child { padding-right: 0; }
.sobre-verde .spread > div:first-child { border-right: var(--filete-claro); }
.spread h3 { margin-bottom: 1rem; }

/* ---------- TABELA (páginas internas) ---------- */
.tabela { width: 100%; border-collapse: collapse; text-align: left; }
.tabela caption { text-align: left; margin-bottom: 1.25rem; color: var(--tinta-fraca); font-size: .9375rem; }
.tabela th {
  font-family: var(--texto); font-weight: 600;
  font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ouro-tinta);
  padding: 0 1.25rem .75rem 0;
  border-bottom: var(--filete-ouro);
}
.tabela td { padding: 1.05rem 1.25rem 1.05rem 0; border-bottom: var(--filete); vertical-align: top; font-size: 1rem; }
.tabela td:first-child { font-weight: 600; width: 34%; }
.tabela tr:hover td { background: var(--off-white); }
.tabela a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--ouro-tinta); }

/* ---------- PROSA LONGA ---------- */
.prosa h2 { margin-bottom: 1rem; }
.prosa h3 { margin: 2.5rem 0 .75rem; }
.prosa ul, .prosa ol { margin: 1.25rem 0; padding-left: 0; list-style: none; max-width: none; }
.prosa li { position: relative; padding-left: 1.5rem; margin-bottom: .7rem; max-width: var(--medida); }
.prosa li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; background: var(--ouro-tinta); transform: rotate(45deg);
}
/* listas médias preenchem a largura em duas colunas */
@media (min-width: 981px) {
  .prosa ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem 3rem; }
  .prosa ul li { margin-bottom: .45rem; }
}
.prosa ol { counter-reset: passo; display: block; }
.prosa ol li { padding-left: 2.25rem; }
.prosa ol li::before {
  counter-increment: passo; content: counter(passo, decimal-leading-zero);
  background: none; transform: none; width: auto; height: auto; top: 0;
  font-size: .75rem; font-weight: 600; letter-spacing: .1em;
  color: var(--ouro-tinta); font-variant-numeric: tabular-nums;
}

/* blocos internos alternam superfície para dar ritmo à página */
.bloco { padding: 2.6rem 0; border-top: var(--filete); }
.bloco:first-of-type { border-top: none; padding-top: 0; }
.secao > .caixa > .bloco:nth-of-type(even) {
  background: var(--off-white);
  border: var(--filete);
  border-top: 2px solid rgba(125, 98, 36, .3);
  padding: 2.6rem 2.4rem;
  margin-block: 1.2rem;
}

/* ---------- FAQ ---------- */
.faq { border-top: var(--filete); margin-top: 2rem; }
.faq details { border-bottom: var(--filete); }
.faq summary {
  cursor: pointer; padding: 1.15rem 2.5rem 1.15rem 0; position: relative;
  font-weight: 600; font-size: 1.0625rem; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: .5rem; top: 50%;
  transform: translateY(-50%); color: var(--ouro-tinta);
  font-size: 1.5rem; font-weight: 400; line-height: 1;
}
.faq details[open] summary::after { content: '–'; }
.faq details > div { padding: 0 2.5rem 1.5rem 0; color: var(--tinta-fraca); }
.faq details > div p { max-width: 66ch; }
.sobre-verde .faq summary { color: var(--creme); }
.sobre-verde .faq summary::after { color: var(--ouro-claro); }
.sobre-verde .faq details > div { color: var(--nevoa); }
.sobre-verde .faq, .sobre-verde .faq details { border-color: rgba(246, 242, 233, .16); }

/* ---------- FAQ: índice de temas + busca ---------- */
.faq-indice { margin-bottom: 2rem; }
.faq-indice ul { list-style: none; display: flex; flex-wrap: wrap; gap: .55rem; }
.faq-indice a {
  display: inline-block; text-decoration: none;
  font-size: .8125rem; font-weight: 600;
  padding: .55rem 1rem;
  border: var(--filete-ouro); color: var(--tinta);
  background: var(--off-white);
  transition: background 220ms, color 220ms, border-color 220ms;
}
.faq-indice a:hover, .faq-indice a:focus-visible { background: var(--verde); color: var(--creme); border-color: var(--verde); }

.faq-busca { margin-bottom: 2.5rem; max-width: 34rem; }
.faq-busca label { display: block; margin-bottom: .5rem; }
.faq-busca input {
  width: 100%; font-family: var(--texto); font-size: 1.0625rem;
  padding: .85rem 1rem;
  border: var(--filete); border-bottom: 2px solid var(--ouro-tinta);
  background: var(--off-white); color: var(--tinta);
}
.faq-busca input:focus { outline: none; border-bottom-color: var(--verde); box-shadow: 0 0 0 4px rgba(194, 160, 90, .25); }
.faq-contador { font-size: .8125rem; color: var(--tinta-fraca); margin-top: .6rem; min-height: 1.2em; }

/* estado de filtragem */
.faq details[hidden], .bloco[hidden] { display: none !important; }
.faq details mark { background: rgba(194, 160, 90, .35); color: inherit; padding: 0 .1em; }
/* pergunta aberta por link direto ganha destaque momentâneo */
.faq details:target { border-left: 3px solid var(--ouro-tinta); padding-left: .9rem; }

/* ---------- NOTA ---------- */
.nota {
  border-left: 3px solid var(--ouro-tinta);
  background: var(--off-white);
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
  color: var(--tinta-fraca); font-size: 1rem;
  max-width: var(--medida);
}
.sobre-verde .nota { border-left-color: var(--ouro); background: rgba(14, 42, 31, .45); color: var(--nevoa); }

/* ---------- IMAGEM EDITORIAL ---------- */
.banda-foto { position: relative; margin: 0; }
.banda-foto img {
  width: 100%; height: clamp(240px, 40vw, 480px);
  object-fit: cover;
  filter: grayscale(1) contrast(1.04) brightness(.92);
}
.banda-foto::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(21, 57, 43, .55), rgba(21, 57, 43, .18) 45%, rgba(246, 242, 233, .06));
  pointer-events: none;
}
.banda-foto figcaption {
  position: absolute; right: 2rem; bottom: 1rem; z-index: 2;
  font-size: .6875rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(246, 242, 233, .85);
}
.foto-prosa { margin: 2rem 0; max-width: var(--medida); }
.foto-prosa img { width: 100%; border: var(--filete-ouro); box-shadow: var(--sombra); }
.foto-prosa figcaption { margin-top: .6rem; font-size: .8125rem; color: var(--tinta-fraca); }
.sobre-verde .foto-prosa img { border: var(--filete-ouro-escuro); }
.sobre-verde .foto-prosa figcaption { color: var(--nevoa); }
.foto-socios img { filter: saturate(.94) contrast(1.02); }

/* ---------- RODAPÉ ---------- */
.rodape { background: var(--verde-fundo); color: var(--nevoa); padding: 4.5rem 2rem 2rem; }
.rodape-grade { max-width: var(--limite); margin-inline: auto; display: grid; grid-template-columns: 1.6fr 1fr 1.2fr; gap: 3.5rem; }
.rodape h2 { font-size: .75rem; font-family: var(--texto); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ouro); margin-bottom: 1.25rem; }
.rodape ul { list-style: none; }
.rodape li { margin-bottom: .7rem; }
.rodape a { color: var(--nevoa); text-decoration: none; font-size: .9375rem; }
.rodape a:hover { color: var(--ouro-claro); text-decoration: underline; text-underline-offset: .18em; }
.rodape p { font-size: .9375rem; }
.rodape-fim {
  max-width: var(--limite); margin: 3rem auto 0; padding-top: 1.5rem;
  border-top: var(--filete-ouro-escuro);
  display: flex; flex-wrap: wrap; gap: .75rem 2rem; justify-content: space-between;
  font-size: .8125rem; color: var(--nevoa);
}
.rodape-legais { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.rodape-legais button {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--texto); font-size: .8125rem; color: var(--nevoa);
}
.rodape-legais button:hover { color: var(--ouro-claro); }

/* ---------- BOTÃO WHATSAPP LIQUID GLASS (canto inferior direito) ----------
   Um único elemento: vidro por backdrop-filter, relevo e brilho por
   box-shadow interno. Nenhum pseudo-elemento — nada para vazar do círculo. */
.wa-vidro {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 95;
  width: 62px; height: 62px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 32% 26%, rgba(246, 242, 233, .20), transparent 46%),
    linear-gradient(135deg, rgba(29, 70, 54, .84), rgba(14, 42, 31, .72));
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  border: 1px solid rgba(221, 192, 132, .5);
  box-shadow:
    inset 0 1px 1px rgba(246, 242, 233, .4),
    inset 0 14px 18px -12px rgba(246, 242, 233, .30),
    inset 0 -12px 16px -10px rgba(14, 42, 31, .45),
    0 10px 30px rgba(14, 42, 31, .35);
  color: var(--creme);
  transition: transform 260ms cubic-bezier(.2, .7, .3, 1.3), box-shadow 260ms, border-color 260ms;
}
.wa-vidro svg { width: 28px; height: 28px; filter: drop-shadow(0 1px 2px rgba(14, 42, 31, .5)); }
.wa-vidro:hover {
  transform: translateY(-3px) scale(1.05);
  border-color: var(--ouro);
  box-shadow:
    inset 0 1px 1px rgba(246, 242, 233, .5),
    inset 0 14px 18px -12px rgba(246, 242, 233, .36),
    inset 0 -12px 16px -10px rgba(14, 42, 31, .4),
    0 16px 40px rgba(14, 42, 31, .48);
}
body[data-consentimento-aberto="true"] .wa-vidro { bottom: 9.5rem; }
@media (max-width: 640px) { .wa-vidro { display: none; } } /* no celular, a barra converte melhor */
@media (prefers-reduced-motion: reduce) { .wa-vidro:hover { transform: none; } }
@media print { .wa-vidro { display: none !important; } }
/* ---------- BARRA DE WHATSAPP (celular) ---------- */
.wa-barra {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 90;
  display: none; align-items: center; justify-content: center; gap: .75rem;
  background: var(--ouro); color: var(--verde-fundo);
  text-decoration: none; font-weight: 600;
  font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 1.05rem; box-shadow: var(--sombra);
  transform: translateY(140%);
  visibility: hidden;
  transition: transform 420ms cubic-bezier(.2, .7, .3, 1), visibility 420ms;
}
.wa-barra svg { width: 18px; height: 18px; }
.wa-barra[data-visivel="true"] { transform: translateY(0); visibility: visible; }

/* ---------- CONSENTIMENTO LGPD ---------- */
.consentimento {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 120;
  max-width: 36rem; margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem;
  background: var(--verde); color: var(--creme);
  border: var(--filete-ouro-escuro); padding: 1.15rem 1.35rem;
  box-shadow: var(--sombra);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(1.25rem);
  transition: opacity 420ms, transform 420ms, visibility 420ms;
}
.consentimento[data-aberto="true"] { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.consentimento p { font-size: .8125rem; line-height: 1.6; color: var(--nevoa); flex: 1; min-width: 14rem; max-width: none; }
.consentimento a { color: var(--ouro-claro); text-decoration: underline; text-underline-offset: .15em; }
.consentimento-acoes { display: flex; gap: .625rem; }
.consentimento button {
  font-family: var(--texto); font-size: .6875rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  padding: .7rem 1.25rem; cursor: pointer;
  border: var(--filete-ouro-escuro); background: none; color: var(--nevoa);
  transition: background 240ms, color 240ms;
}
.consentimento button:hover { color: var(--creme); }
.consentimento .aceitar { background: var(--ouro); border-color: var(--ouro); color: var(--verde-fundo); }
.consentimento .aceitar:hover { background: var(--ouro-claro); color: var(--verde-fundo); }
body[data-consentimento-aberto="true"] .wa-barra { bottom: 7rem; }

/* ---------- TRILHA (você está aqui) ---------- */
.trilha {
  display: flex; align-items: center; gap: .6rem;
  font-size: .8125rem; letter-spacing: .04em;
  color: var(--nevoa); margin-bottom: 1.5rem;
}
.trilha a { color: var(--nevoa); text-decoration: underline; text-underline-offset: .18em; text-decoration-color: rgba(194, 160, 90, .5); }
.trilha a:hover { color: var(--creme); }
.trilha span[aria-hidden] { opacity: .5; }

/* ---------- CRÉDITO DO ESTÚDIO ---------- */
.credito-studio {
  font-size: .625rem; font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase;
  opacity: .5;
  color: inherit; text-decoration: none;
  transition: opacity 240ms;
}
.credito-studio:hover { opacity: 1; }
.credito-studio b { font-weight: 600; color: var(--ouro-claro); }

/* ---------- ENTRADA ORQUESTRADA (toda página, CSS puro) ----------
   A sequência que os sites de referência têm: cabeçalho assenta,
   o título abre em cortina, o resto entra em cascata e o traço
   dourado assina a foto por último. */
@keyframes entra-desce { from { transform: translateY(-101%); } to { transform: none; } }
@keyframes entra-sobe  { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes entra-cortina {
  from { clip-path: inset(0 0 100% 0); transform: translateY(30px); }
  to   { clip-path: inset(0 0 -12% 0); transform: none; }
}
@keyframes entra-foto {
  from { clip-path: inset(0 0 0 101%); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes entra-swash {
  from { opacity: 0; transform: scale(.4) rotate(-9deg); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: none; }
}
@keyframes entra-filete { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.topo { animation: entra-desce 640ms cubic-bezier(.2, .65, .2, 1) both; }
.abertura .trilha,
.abertura .rotulo { animation: entra-sobe 700ms cubic-bezier(.2, .65, .2, 1) 180ms both; }
.abertura h1 { animation: entra-cortina 950ms cubic-bezier(.2, .65, .2, 1) 300ms both; }
.abertura .lede { animation: entra-sobe 800ms cubic-bezier(.2, .65, .2, 1) 620ms both; }
.abertura .lede ~ div,
.abertura .lede ~ p { animation: entra-sobe 800ms cubic-bezier(.2, .65, .2, 1) 780ms both; }
.credencial-linha {
  position: relative;
  animation: entra-sobe 800ms cubic-bezier(.2, .65, .2, 1) 950ms both;
  border-top: none;
}
.credencial-linha::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: rgba(194, 160, 90, .32);
  transform-origin: left center;
  animation: entra-filete 900ms cubic-bezier(.2, .65, .2, 1) 1150ms both;
}
.moldura { animation: entra-sobe 10ms both; }
.moldura picture, .moldura > img { display: block; animation: entra-foto 1050ms cubic-bezier(.65, 0, .2, 1) 420ms both; }
.moldura::before { opacity: 0; animation: entra-sobe 700ms ease 1250ms both; }
.moldura .swash-baixo { transform-origin: 12% 80%; animation: entra-swash 850ms cubic-bezier(.2, .8, .25, 1.2) 1150ms both; }

/* cartões entram em cascata quando o bloco assenta */
.grade .cartao { opacity: 0; transform: translateY(18px); transition: opacity 650ms cubic-bezier(.2, .6, .2, 1), transform 650ms cubic-bezier(.2, .6, .2, 1), box-shadow 320ms, border-color 320ms; }
[data-assenta].dentro .cartao { opacity: 1; transform: none; }
[data-assenta].dentro .cartao:nth-child(2) { transition-delay: 90ms, 90ms, 0ms, 0ms; }
[data-assenta].dentro .cartao:nth-child(3) { transition-delay: 180ms, 180ms, 0ms, 0ms; }
[data-assenta].dentro .cartao:nth-child(4) { transition-delay: 270ms, 270ms, 0ms, 0ms; }
[data-assenta].dentro .cartao:nth-child(5) { transition-delay: 360ms, 360ms, 0ms, 0ms; }
[data-assenta].dentro .cartao:nth-child(6) { transition-delay: 450ms, 450ms, 0ms, 0ms; }
[data-assenta].dentro .cartao:nth-child(7) { transition-delay: 540ms, 540ms, 0ms, 0ms; }
[data-assenta].dentro .cartao:nth-child(8) { transition-delay: 630ms, 630ms, 0ms, 0ms; }
[data-assenta].dentro .cartao:nth-child(9) { transition-delay: 720ms, 720ms, 0ms, 0ms; }
/* portas: o stagger olha o li pai */
.portas[data-assenta].dentro .porta:nth-child(2) .cartao { transition-delay: 90ms, 90ms, 0ms, 0ms; }
.portas[data-assenta].dentro .porta:nth-child(3) .cartao { transition-delay: 180ms, 180ms, 0ms, 0ms; }

/* ---------- MOVIMENTO ---------- */
[data-assenta] {
  opacity: 0; transform: translateY(1.25rem);
  transition: opacity var(--transicao), transform var(--transicao);
}
[data-assenta].dentro { opacity: 1; transform: none; }

@supports (animation-timeline: scroll()) {
  .progresso {
    position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 130;
    background: var(--ouro); transform-origin: left center;
    animation: progride linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes progride { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
.progresso { display: none; }
@supports (animation-timeline: scroll()) { .progresso { display: block; } }

/* nada acima da dobra nasce invisível */
.abertura [data-assenta] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-assenta] { opacity: 1; transform: none; }
  .ementa-filete { transform: scaleX(1); }
  .progresso { display: none; }
  .cursor-anel { display: none !important; }
}

/* ---------- RESPONSIVO ---------- */
@media (max-width: 1080px) {
  .topo { padding: .75rem 1.5rem; }
  .menu, .topo-fone { display: none; }
  .hamburguer { display: flex; }
  .secao, .ementa, .abertura, .faixa-trt { padding-inline: 1.5rem; }
  .hero-split { grid-template-columns: 1fr; gap: 2.75rem; }
  .moldura { max-width: 30rem; }
  .grade-3 { grid-template-columns: 1fr 1fr; }
  .spread { grid-template-columns: 1fr; }
  .spread > div { padding: 2rem 0; border-right: none !important; border-bottom: var(--filete); }
  .sobre-verde .spread > div { border-bottom: var(--filete-claro); }
  .spread > div:last-child { border-bottom: none; padding-bottom: 0; }
  .secao > .caixa > .bloco:nth-of-type(even) { padding: 2.2rem 1.5rem; }
  .rodape-grade { grid-template-columns: 1fr; gap: 2.5rem; }
  .rodape { padding: 3.5rem 1.5rem 7rem; }
  .faixa-trt-legenda { right: 1.5rem; }
}

@media (max-width: 720px) {
  .grade-3, .grade-2 { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .wa-barra { display: inline-flex; }
  .tabela, .tabela tbody, .tabela tr, .tabela td { display: block; width: 100%; }
  .tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tabela tr { border-bottom: var(--filete); padding-block: 1rem; }
  .tabela td { border-bottom: none; padding: .15rem 0; }
  .tabela td:first-child { width: auto; font-family: var(--display); font-size: var(--h3); font-weight: 400; }
}

@media print {
  .topo, .wa-barra, .consentimento, .progresso, .menu-movel, .pular, .cursor-anel { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .sobre-verde, .faixa-trt { background: #fff !important; color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}