/* ============================================================================
   SITE — camada específica do website institucional
   Juselder da Mata Sociedade de Advogados · sobre o Design System v2.5.0
   Estilo: editorial de luxo — ar, hairlines, display Roxborough, neutros.
   ========================================================================== */

/* ---------------------------------------------------------------- nav ---- */
.jsld-wordmark small { display: block; }

.site-nav-cta { margin-left: .4rem; }

.menu-link.is-current {
  color: var(--jsld-teal-700);
}

.menu-link.is-current::after { transform: scaleX(1); transform-origin: left; }

/* ------------------------------------------------------ hero editorial ---- */
.hero-note {
  margin-top: var(--jsld-sp-6);
  padding-top: var(--jsld-sp-4);
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex;
  gap: .6rem;
  align-items: center;
  color: rgba(255, 255, 255, .55);
  font-size: .78rem;
  letter-spacing: .04em;
}

/* --------------------------------------------- placeholder de fotografia ---
   Enquanto a direção de fotografia não é executada, cada imagem é marcada
   com o enquadramento e o tratamento previstos (seção 10 · Imagem do DS). */
.ph {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  text-align: center;
  background:
    linear-gradient(rgba(247, 245, 242, .92), rgba(247, 245, 242, .92)),
    url('../img/padrao-pontilhado-01.svg') center/420px repeat;
  border: 1px solid var(--jsld-sand-200);
  color: var(--jsld-sand-700);
  overflow: hidden;
  isolation: isolate;
  padding: 1.4rem;
}

.ph::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('../img/simbolo-linha.svg') center/46% no-repeat;
  opacity: .16;
}

.ph--169 { aspect-ratio: 16 / 9; }
.ph--43  { aspect-ratio: 4 / 3; }
.ph--34  { aspect-ratio: 3 / 4; }
.ph--11  { aspect-ratio: 1 / 1; }
.ph--32  { aspect-ratio: 3 / 2; }

.ph__tag {
  font-family: var(--jsld-font-ui);
  font-size: .62rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--jsld-teal-700);
}

.ph__dir {
  font-size: .78rem;
  line-height: 1.55;
  max-width: 30ch;
  color: var(--jsld-sand-700);
}

.ph__specs {
  font-family: var(--jsld-font-mono);
  font-size: .62rem;
  color: var(--jsld-sand-500);
  letter-spacing: .04em;
}

.ph--dark {
  background:
    linear-gradient(rgba(0, 55, 66, .88), rgba(0, 55, 66, .88)),
    url('../img/padrao-pontilhado-01.svg') center/420px repeat;
  border-color: rgba(255, 255, 255, .16);
  color: var(--jsld-dark-text-2);
}

.ph--dark .ph__tag { color: var(--jsld-sand-500); }
.ph--dark .ph__dir { color: rgba(255, 255, 255, .66); }
.ph--dark .ph__specs { color: rgba(255, 255, 255, .38); }

/* ------------------------------------------------------------ hero card --- */
.jsld-hero__figure .ph { position: absolute; inset: 0; border: 0; aspect-ratio: auto; height: 100%; }
.jsld-hero__figure > img { position: absolute; inset: 0; }
.jsld-hero__title--long { font-size: clamp(2.3rem, 1rem + 4.2vw, 3.8rem); }

/* -------------------------------------------------------- hero interno ---- */
.page-hero {
  position: relative;
  padding: 9.5rem 0 4.2rem;
  background: var(--jsld-sand-050);
  border-bottom: 1px solid var(--jsld-sand-200);
  overflow: hidden;
  isolation: isolate;
}

.page-hero--deep {
  background: var(--jsld-grad-deep);
  border-bottom: 0;
  color: #fff;
}

.page-hero__crumb {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--jsld-font-ui);
  font-size: .64rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--jsld-sand-700);
  margin-bottom: var(--jsld-sp-5);
}

.page-hero__crumb a { color: inherit; }
.page-hero__crumb a:hover { color: var(--jsld-teal-700); }
.page-hero__crumb .sep { color: var(--jsld-sand-500); }

.page-hero--deep .page-hero__crumb { color: rgba(255, 255, 255, .6); }
.page-hero--deep .page-hero__crumb a:hover { color: #fff; }

.page-hero h1 {
  font-size: clamp(2.4rem, 1.4rem + 4vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.022em;
  max-width: 18ch;
  margin: 0 0 var(--jsld-sp-4);
}

.page-hero--deep h1 { color: #fff; }

.page-hero__lead {
  font-size: var(--jsld-fs-body-lg);
  line-height: 1.75;
  color: var(--jsld-ink-400);
  max-width: 58ch;
  margin: 0;
}

.page-hero--deep .page-hero__lead { color: rgba(255, 255, 255, .78); }

.page-hero__mark {
  position: absolute;
  right: -6%;
  bottom: -11%;
  width: clamp(280px, 34vw, 540px);
  opacity: .07;
  z-index: -1;
  pointer-events: none;
}

/* ------------------------------------------------------------- editorial -- */
.ed-lead {
  font-family: var(--jsld-font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.35rem, 1rem + 1.6vw, 1.9rem);
  line-height: 1.5;
  color: var(--jsld-teal-900);
  max-width: 30ch;
  margin: 0;
}

.ed-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.ed-split--article { grid-template-columns: .9fr 1.1fr; }

@media (max-width: 900px) {
  .ed-split, .ed-split--article { grid-template-columns: 1fr; }
}

.ed-rule {
  border: 0;
  border-top: 1px solid var(--jsld-sand-200);
  margin: 0;
}

/* --------------------------------------------------------- strip sóbria --- */
.strip {
  border-top: 1px solid var(--jsld-sand-200);
  border-bottom: 1px solid var(--jsld-sand-200);
  background: var(--jsld-paper);
  padding: 1.1rem 0;
}

.strip__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .9rem 2.6rem;
  font-family: var(--jsld-font-ui);
  font-size: .66rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--jsld-sand-700);
}

.strip__row i { color: var(--jsld-sand-500); font-style: normal; }

/* ---------------------------------------------------- lista de credenciais - */
.cred-list { list-style: none; margin: 0; padding: 0; }

.cred-list li {
  display: flex;
  gap: .9rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--jsld-sand-200);
  font-size: var(--jsld-fs-body-sm);
  line-height: 1.6;
}

.cred-list li:last-child { border-bottom: 0; }

.cred-list .ic {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: .15rem;
  color: var(--jsld-teal-700);
}

/* ------------------------------------------------------ cartão de artigo --- */
.post-card {
  display: flex;
  flex-direction: column;
  background: var(--jsld-paper);
  border: 1px solid var(--jsld-sand-200);
  transition: transform var(--jsld-dur-3) var(--jsld-ease-out),
    box-shadow var(--jsld-dur-3) var(--jsld-ease-out),
    border-color var(--jsld-dur-3) var(--jsld-ease);
}

.post-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--jsld-shadow-2);
  border-color: var(--jsld-sand-500);
}

.post-card__body { padding: 1.5rem 1.6rem 1.7rem; display: flex; flex-direction: column; gap: .7rem; flex: 1; }

.post-card__meta {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-family: var(--jsld-font-ui);
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--jsld-sand-700);
}

.post-card__title {
  font-family: var(--jsld-font-display);
  font-weight: 600;
  font-size: 1.22rem;
  line-height: 1.32;
  letter-spacing: -.008em;
  color: var(--jsld-teal-900);
  margin: 0;
}

.post-card:hover .post-card__title { color: var(--jsld-teal-700); }

.post-card__excerpt {
  font-size: var(--jsld-fs-body-sm);
  color: var(--jsld-ink-400);
  margin: 0;
  flex: 1;
}

.post-card__foot {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--jsld-font-ui);
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--jsld-teal-700);
}

.post-card__foot .ic { width: 14px; height: 14px; transition: transform var(--jsld-dur-2) var(--jsld-ease); }
.post-card:hover .post-card__foot .ic { transform: translateX(4px); }

.post-card .ph { border: 0; border-bottom: 1px solid var(--jsld-sand-200); }

/* -------------------------------------------------------------- contato ---- */
.contact-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-info { display: flex; flex-direction: column; gap: 0; }

.contact-info__item {
  display: flex;
  gap: 1.1rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--jsld-sand-200);
}

.contact-info__item:first-child { padding-top: 0; }

.contact-info__item .ic {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: .2rem;
  color: var(--jsld-teal-700);
}

.contact-info__item h4 {
  font-family: var(--jsld-font-ui);
  font-size: .66rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--jsld-sand-700);
  margin: 0 0 .3rem;
}

.contact-info__item p { margin: 0; font-size: var(--jsld-fs-body-sm); line-height: 1.7; }

/* ------------------------------------------------------------ ícone util --- */
.ic {
  display: inline-block;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ic--16 { width: 16px; height: 16px; }
.ic--20 { width: 20px; height: 20px; }
.ic--24 { width: 24px; height: 24px; }

.ic--brand { fill: currentColor; stroke: none; }

/* ------------------------------------------------------- área detalhada ---- */
.area-block { scroll-margin-top: 110px; }

.area-block + .area-block { margin-top: var(--jsld-sp-8); padding-top: var(--jsld-sp-8); border-top: 1px solid var(--jsld-sand-200); }

.area-block__head { display: flex; align-items: baseline; gap: 1.3rem; margin-bottom: var(--jsld-sp-5); }

.area-block__num {
  font-family: var(--jsld-font-display);
  font-weight: 300;
  font-size: 3.4rem;
  line-height: 1;
  color: var(--jsld-sand-500);
}

.area-block__head h2 { margin: 0; font-size: var(--jsld-fs-h3); }

.area-index {
  position: sticky;
  top: 110px;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-left: 1px solid var(--jsld-sand-200);
}

.area-index a {
  display: flex;
  gap: .8rem;
  align-items: baseline;
  padding: .7rem 0 .7rem 1.2rem;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--jsld-ink-400);
  font-size: var(--jsld-fs-body-sm);
  transition: color var(--jsld-dur-2) var(--jsld-ease), border-color var(--jsld-dur-2) var(--jsld-ease);
}

.area-index a b {
  font-family: var(--jsld-font-mono);
  font-weight: 400;
  font-size: .68rem;
  color: var(--jsld-sand-500);
}

.area-index a:hover, .area-index a.is-active {
  color: var(--jsld-teal-700);
  border-left-color: var(--jsld-teal-700);
}

@media (max-width: 900px) {
  .area-index { position: static; flex-direction: row; flex-wrap: wrap; gap: .5rem; border-left: 0; margin-bottom: var(--jsld-sp-6); }
  .area-index a { border: 1px solid var(--jsld-sand-200); padding: .45rem .9rem; }
  .area-index a:hover, .area-index a.is-active { border-color: var(--jsld-teal-700); }
}

/* ---------------------------------------------------------- CTA final ------ */
.cta-band { text-align: center; }

.cta-band h2 {
  color: #fff;
  font-size: clamp(2rem, 1.2rem + 3.4vw, 3.4rem);
  letter-spacing: -.02em;
  max-width: 20ch;
  margin: 0 auto var(--jsld-sp-4);
}

.cta-band p { color: rgba(255, 255, 255, .72); max-width: 52ch; margin: 0 auto var(--jsld-sp-6); }

/* -------------------------------------------------------------- footer ----- */
.jsld-footer .site-map a { color: inherit; }
.jsld-footer .site-map a:hover { color: #fff; }

.footer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; font-size: .84rem; }

.footer-list li { display: flex; gap: .6rem; align-items: baseline; line-height: 1.65; }

.footer-list .ic { width: 13px; height: 13px; flex: 0 0 auto; transform: translateY(2px); color: var(--jsld-sand-500); }

.footer-legal {
  font-size: .72rem;
  color: rgba(255, 255, 255, .45);
  line-height: 1.7;
  max-width: 72ch;
  margin: var(--jsld-sp-6) 0 0;
}

/* --------------------------------------------------------- utilidades ------ */
.mt-0 { margin-top: 0 !important; }
.measure { max-width: 62ch; }
.center { text-align: center; }

.section-pad { padding: var(--jsld-sp-9) 0; }

@media (max-width: 768px) { .section-pad { padding: var(--jsld-sp-8) 0; } }

/* ------------------------------------------------------- nav mobile -------- */
.jsld-nav__toggle { flex-direction: column; justify-content: center; gap: 4px; width: 42px; height: 38px; align-items: center; }
.jsld-nav__toggle span { display: block; width: 18px; height: 2px; background: currentColor; transition: transform var(--jsld-dur-2) var(--jsld-ease); }

@media (max-width: 860px) {
  .site-nav-cta { display: none; }
}

/* social: os quadrados 38px do DS mandam; o svg fica fixo em 16px */
.jsld-social svg.ic { width: 16px !important; height: 16px !important; }

/* drawer acima do masthead */
.jsld-nav__drawer { z-index: var(--jsld-z-drawer, 1000); }
.jsld-nav__drawer-scrim { z-index: 950; }

/* ============================================================================
   SITE v2 — variações de cards do Design System v2.5.0 (seção 11.3 + templates)
   + fotografia real (Assets/Fotos) no lugar dos placeholders.
   ========================================================================== */

/* ------------------------------------------------------------ equipe ------ */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2rem);
  margin-top: var(--jsld-sp-7);
}

.team-card {
  display: grid;
  grid-template-columns: minmax(150px, 190px) 1fr;
  background: #fff;
  border: 1px solid var(--jsld-teal-a08);
  transition: transform var(--jsld-dur-3) var(--jsld-ease), box-shadow var(--jsld-dur-3) var(--jsld-ease);
}

.team-card:hover { transform: translateY(-5px); box-shadow: var(--jsld-shadow-2); }

.team-card .ph {
  border: 0;
  border-right: 1px solid var(--jsld-sand-200);
  aspect-ratio: auto;
  height: 100%;
  min-height: 220px;
}

.team-card__body {
  padding: clamp(1.2rem, 2vw, 1.7rem) clamp(1.2rem, 2.2vw, 1.8rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.team-card__body h3 {
  font-size: var(--jsld-fs-h5);
  margin: 0 0 .3rem;
}

.team-card__role {
  font-family: var(--jsld-font-ui);
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--jsld-teal-700);
  margin: 0 0 .9rem;
}

.team-card__bio {
  font-size: var(--jsld-fs-body-sm);
  color: var(--jsld-ink-400);
  margin: 0 0 1.1rem;
}

.team-card__links { display: flex; gap: .55rem; }

.team-card__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--jsld-teal-a24);
  color: var(--jsld-teal-700);
  transition: background var(--jsld-dur-2) var(--jsld-ease), color var(--jsld-dur-2) var(--jsld-ease), border-color var(--jsld-dur-2) var(--jsld-ease);
}

.team-card__link .ic { width: 16px; height: 16px; }

.team-card__link:hover,
.team-card__link:focus-visible {
  background: var(--jsld-teal-700);
  border-color: var(--jsld-teal-700);
  color: #fff;
}

@media (max-width: 900px) {
  .team-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .team-card { grid-template-columns: 1fr; }
  .team-card .ph { border-right: 0; border-bottom: 1px solid var(--jsld-sand-200); aspect-ratio: 4 / 3; height: auto; min-height: 0; }
}

/* ------------------------- c · card de mídia do DS (.jsld-media) ----------- */
/* Tratamento único de fotografia no site: o card de mídia do Design System
   v2.5.0 (P&B .85 -> cor no hover, parallax interno 1.05 -> 1.14, borda teal
   e legenda em gradiente). A base vem de ds.css; aqui só os aspectos extras
   e os ajustes de contexto. */
.jsld-media--169 .jsld-media__img { aspect-ratio: 16 / 9; }
.jsld-media--43  .jsld-media__img { aspect-ratio: 4 / 3; }
.jsld-media--34  .jsld-media__img { aspect-ratio: 3 / 4; }
.jsld-media--32  .jsld-media__img { aspect-ratio: 3 / 2; }

.jsld-media__body .jsld-caption { color: rgba(255, 255, 255, .78); margin: 0; }

/* Miniatura dentro do card de publicação: sem borda dupla e reagindo ao
   hover do card inteiro, não só da imagem. */
.post-card .jsld-media {
  border: 0;
  border-bottom: 1px solid var(--jsld-sand-200);
}

.post-card:hover .jsld-media__img img {
  transform: scale(1.14);
  filter: grayscale(0) brightness(1);
}

/* Em telas sem hover (toque), a foto já entra em cor. */
@media (hover: none) {
  .jsld-media .jsld-media__img img { filter: grayscale(0) brightness(1); transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .jsld-media .jsld-media__img img,
  .jsld-media:hover .jsld-media__img img { transform: none; }
}

.jsld-media__body .jsld-media__kicker {
  display: block;
  font-family: var(--jsld-font-ui);
  font-size: .6rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--jsld-sand-500);
  margin-bottom: .45rem;
}

/* --------------------------------- t1 · card de citação (feed) ------------- */
.quote-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(140deg, #00252D 0%, #003742 58%, #004854 100%);
  color: #fff;
  padding: clamp(2.4rem, 5vw, 4.2rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1.6rem, 3vw, 2.6rem);
  border: 1px solid rgba(255, 255, 255, .08);
}

.quote-card__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .07;
  pointer-events: none;
}

.quote-card__mark { width: 54px; height: auto; }

.quote-card__quote {
  font-family: var(--jsld-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 1rem + 2.2vw, 2.4rem);
  line-height: 1.35;
  letter-spacing: -.01em;
  color: #fff;
  max-width: 24ch;
  margin: 0;
}

.quote-card__eyebrow {
  font-family: var(--jsld-font-ui);
  font-size: .64rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--jsld-sand-500);
  margin: 0 0 1rem;
}

.quote-card__foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--jsld-font-ui);
  font-size: .64rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}

/* --------------------------------- t2 · card de notícia (feed) ------------- */
/* Variante do cartão de publicação: filete teal à esquerda, régua areia,
   selo outline — como no template T2 do DS. */
.post-card--t2 { position: relative; background: var(--jsld-sand-050); }

.post-card--t2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--jsld-teal-700);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--jsld-dur-3) var(--jsld-ease-out);
  z-index: 2;
}

.post-card--t2:hover::before { transform: scaleY(1); }

.post-card__rule {
  width: 46px;
  height: 3px;
  background: var(--jsld-sand-500);
  margin: 0 0 .2rem;
}

/* --------------------------------- t3 · card de área (feed) ---------------- */
/* Área de atuação no estado do template T3: cartela teal, número fantasma,
   texto claro. O hover mantém a elevação e acende o brilho areia. */
.jsld-area--t3 {
  background: var(--jsld-grad-deep);
  border-color: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .85);
  display: flex;
  flex-direction: column;
}

.jsld-area--t3::before {
  background: radial-gradient(circle at 78% 18%, rgba(183, 174, 165, .32), transparent 62%);
  clip-path: none;
  opacity: 0;
  transition: opacity var(--jsld-dur-4) var(--jsld-ease);
}

.jsld-area--t3:hover::before { clip-path: none; opacity: 1; }

.jsld-area--t3 h4,
.jsld-on-dark .jsld-area--t3 h4,
.jsld-area--t3 p,
.jsld-on-dark .jsld-area--t3 p { color: #fff; }

.jsld-area--t3 p,
.jsld-on-dark .jsld-area--t3 p { color: rgba(255, 255, 255, .78); }

.jsld-area--t3 .jsld-area__icon { color: var(--jsld-sand-500); }

.jsld-area--t3 .jsld-area__num {
  position: static;
  order: -1;
  font-size: 2.9rem;
  font-weight: 300;
  color: rgba(255, 255, 255, .26);
  margin-bottom: .9rem;
  transition: color var(--jsld-dur-3) var(--jsld-ease);
}

.jsld-area--t3:hover .jsld-area__num { color: rgba(183, 174, 165, .55); }

.jsld-area--t3 .jsld-area__eyebrow {
  font-family: var(--jsld-font-ui);
  font-size: .58rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
  display: block;
  margin-bottom: .8rem;
}

/* sala de leitura: grid da galeria da sede (sobre) */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--jsld-sp-5); }

@media (max-width: 900px) { .gallery-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------ cabeçalho · gradiente ---- */
/* Navbar sobre o gradiente institucional (--jsld-grad-deep · PANTONE 3155 C):
   lettering branco, monograma e setas em dourado (--jsld-sand-500). */
.site-header.jsld-nav {
  background: var(--jsld-grad-deep);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.site-header.jsld-nav.ast-sticky-shrunk {
  background: var(--jsld-grad-deep);
  box-shadow: var(--jsld-shadow-2);
}

/* marca: monograma dourado (padrão do símbolo) + lettering branco */
.site-header .site-branding .jsld-wordmark { color: #fff; }
.site-header .site-branding .jsld-wordmark small { color: var(--jsld-sand-500); }

/* menu de topo: branco; item atual/hover com sublinhado dourado */
.site-header .main-header-menu > .menu-item > .menu-link { color: rgba(255, 255, 255, .92); }

.site-header .main-header-menu > .menu-item > .menu-link:hover,
.site-header .main-header-menu > .menu-item > .menu-link.is-current,
.site-header .main-header-menu .current-menu-item > .menu-link,
.site-header .jsld-has-sub.is-active > .jsld-sub-toggle { color: #fff; }

.site-header .main-header-menu > .menu-item > .menu-link::after { background: var(--jsld-sand-500); }

/* setas em dourado: chevrons dos dropdowns e seta do CTA */
.site-header .jsld-sub-toggle > .ic,
.site-header .site-nav-cta .elementor-button-icon .ic { color: var(--jsld-sand-500); }

/* CTA ganha contorno sutil para não fundir com o gradiente */
.site-header .site-nav-cta .jsld-btn--primary { border: 1px solid rgba(255, 255, 255, .24); }

/* submenu continua painel claro — reforça as cores originais */
.site-header .jsld-nav__sub .menu-link { color: var(--jsld-ink-700); }

.site-header .jsld-nav__sub .menu-link:hover,
.site-header .jsld-nav__sub .menu-link.is-current { color: var(--jsld-teal-700); }

/* hambúrguer (mobile) branco */
.site-header .jsld-nav__toggle { color: #fff; }

/* ------------------------------------------------ menu · h5 Greycliff CF --- */
/* Itens do menu em Greycliff CF · 600 · 16px, sem caixa alta.
   Links <a> e toggles <button> compartilham a mesma métrica para
   alinharem na mesma linha de base. */
.site-header .main-header-menu { align-items: center; }

.site-header .main-header-menu .menu-link {
  display: inline-flex;
  align-items: center;
  font-family: var(--jsld-font-sans);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  margin: 0;
}

/* submenu proporcional, mesma família */
.site-header .jsld-nav__sub .menu-link { font-size: 1rem; }

/* drawer (mobile) acompanha */
.jsld-nav__drawer .jsld-drawer-link {
  font-family: var(--jsld-font-sans);
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none;
}

/* --------------------------- t2 · variação sem imagem (tipográfica) -------- */
/* Cartela clara do template T2: filete teal fixo, selo outline, régua areia,
   título display maior e data no rodapé. Usada em Jurisprudências e
   Publicações; Notícias & Eventos mantém a imagem em destaque. */
.post-card--noimg { background: var(--jsld-sand-050); }

.post-card--noimg::before { transform: scaleY(1); }

.post-card--noimg .post-card__body { padding: 1.9rem 1.9rem 1.7rem; gap: .9rem; }

.post-card--noimg .post-card__rule { margin-top: 1.6rem; }

.post-card--noimg .post-card__title {
  font-size: 1.5rem;
  line-height: 1.26;
  letter-spacing: -.012em;
}

.post-card__footrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.post-card__date {
  font-family: var(--jsld-font-ui);
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--jsld-sand-700);
  white-space: nowrap;
}

/* ------------------------------------------- marca · cores oficiais -------- */
/* O sprite do símbolo agora segue a arte oficial: hastes em --jsld-lk-1,
   ponto + gancho em --jsld-lk-2 (dourado). O padrão de fundo (tapestry)
   permanece monocromático em areia, como nos templates do DS. */
.jsld-tapestry-tile { --jsld-lk-1: #B7AEA5; --jsld-lk-2: #B7AEA5; }

/* ------------------------------------------- marca oficial no cabeçalho ---- */
/* O cabeçalho usa o lockup horizontal oficial (assets/img/logo-horizontal.svg,
   embutido no sprite como #jsld-horizontal) — não o símbolo + texto digitado.
   Versão branco com dourado: --jsld-lk-1 branco, --jsld-lk-2 areia. */
.site-branding__logo {
  display: block;
  width: clamp(178px, 15.5vw, 224px);
  aspect-ratio: 530 / 76;
  height: auto;
  flex: none;
  transition: opacity var(--jsld-dur-2) var(--jsld-ease),
    width var(--jsld-dur-3) var(--jsld-ease);
}

.site-branding:hover .site-branding__logo { opacity: .82; }

.ast-sticky-shrunk .site-branding__logo { width: clamp(164px, 13.5vw, 200px); }

.jsld-drawer__logo { width: 186px; aspect-ratio: 530 / 76; height: auto; display: block; }

@media (max-width: 560px) {
  .site-branding__logo { width: 168px; }
}

/* ============================================================================
   ██  CAMADA v3 — website-v3 (site-v0.4.0) · 2026-09-09
   Novidades: 9 áreas com subpágina própria, menu largo, valores, novo rodapé.
   Só o que o ds.css não resolve. Nunca editar o ds.css.
   ========================================================================== */

/* --- Header: barra que era style="" no v2 --------------------------------- */
.jsld-nav__bar { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }

/* --- Dropdown largo: 9 áreas em 2 colunas -------------------------------- */
.jsld-nav__sub--wide {
  display: grid; grid-template-columns: repeat(2, minmax(210px, 1fr));
  gap: .1rem .6rem; min-width: 480px;
}
.jsld-nav__sub--wide .jsld-nav__sub-all { grid-column: 1 / -1; border-top: 1px solid var(--jsld-sand-a24); margin-top: .35rem; padding-top: .35rem; }
.jsld-nav__sub--wide .jsld-nav__sub-all .menu-link { color: var(--jsld-sand-500); }
@media (max-width: 1100px) { .jsld-nav__sub--wide { grid-template-columns: 1fr; min-width: 260px; } }

/* --- Drawer mobile -------------------------------------------------------- */
.jsld-drawer__close { color: #fff; font-size: 1.4rem; }
.jsld-drawer-link--all { color: var(--jsld-sand-500); font-style: italic; }

/* --- Utilitários de espaçamento (eram style="" no v2) --------------------- */
.jsld-stack--center { justify-content: center; }
.jsld-stack--mt { margin-top: 1.6rem; }
.jsld-stack--mt-sm { margin-top: .6rem; }
.jsld-grid--mt { margin-top: var(--jsld-sp-7); }
.footer-list--mt { margin-top: 1.4rem; }
.jsld-caption--form { margin-top: 1rem; color: var(--jsld-ink-400); }

/* --- Cards ---------------------------------------------------------------- */
.jsld-card--cta {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: 1rem; background: var(--jsld-grad-deep); border: 0;
}
.jsld-card--cta p { color: rgba(255,255,255,.78); margin: 0; font-size: var(--jsld-fs-body-sm); }
.jsld-card__num {
  position: absolute; top: .9rem; right: 1.1rem;
  font-family: var(--jsld-font-display); font-weight: 300; font-size: 2.4rem;
  line-height: 1; color: var(--jsld-teal-100); pointer-events: none;
}

/* --- Rodapé --------------------------------------------------------------- */
.jsld-footer__logo { width: 132px; height: auto; aspect-ratio: 1 / 1.18; }
.jsld-footer__tagline { margin: 0; max-width: 38ch; }
.jsld-footer__nauweb { color: var(--jsld-sand-500); }
.footer-list__mail { text-decoration: underline; }
.site-map--areas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 1.2rem; align-content: start; }
.site-map--areas h4 { grid-column: 1 / -1; }
@media (max-width: 900px) { .site-map--areas { grid-template-columns: 1fr; } }

/* --- Assinatura do fundador ---------------------------------------------- */
.founder-sig { display: flex; flex-direction: column; gap: .1rem; margin: 1rem 0 0; }
.founder-sig strong { font-family: var(--jsld-font-display); font-size: var(--jsld-fs-h5); font-weight: 500; color: var(--jsld-teal-900); }
.founder-sig span { font-family: var(--jsld-font-ui); font-size: var(--jsld-fs-label); letter-spacing: .2em; text-transform: uppercase; color: var(--jsld-sand-700); }

/* ==========================================================================
   PÁGINAS DE ÁREA
   ========================================================================== */
.page-hero--area .page-hero__lead { font-family: var(--jsld-font-display); font-style: italic; color: var(--jsld-teal-700); }

.area-sub {
  font-family: var(--jsld-font-ui); font-size: var(--jsld-fs-h6);
  letter-spacing: .16em; text-transform: uppercase; color: var(--jsld-teal-700);
  margin: var(--jsld-sp-6) 0 .6rem;
}
.area-sub:first-child { margin-top: 0; }

/* Escopo em colunas — 1, 2 ou 3 conforme a área tiver conteúdo */
.area-escopo { display: grid; gap: clamp(1.6rem, 3vw, 3rem); }
.area-escopo--1 { grid-template-columns: minmax(0, 62ch); }
.area-escopo--2 { grid-template-columns: repeat(2, 1fr); }
.area-escopo--3 { grid-template-columns: repeat(3, 1fr); }
.area-escopo__col { min-width: 0; }
.area-escopo__title {
  font-family: var(--jsld-font-ui); font-size: var(--jsld-fs-h6);
  letter-spacing: .18em; text-transform: uppercase; color: var(--jsld-teal-700);
  margin: 0 0 1rem; padding-bottom: .7rem; border-bottom: 1px solid var(--jsld-sand-500);
}
@media (max-width: 900px) { .area-escopo--2, .area-escopo--3 { grid-template-columns: 1fr; } }

/* Bloco de destaque (sub-serviço aprofundado) */
.area-destaque__intro { margin-top: .8rem; color: var(--jsld-ink-400); }
.area-destaque__card h4 { margin: 0 0 .6rem; }
.area-destaque__card p { margin: 0; font-size: var(--jsld-fs-body-sm); color: var(--jsld-ink-400); }

/* Lista de instrumentos fundiários — 2 colunas em telas largas */
.area-instrumentos { columns: 2; column-gap: clamp(2rem, 4vw, 4rem); }
.area-instrumentos li { break-inside: avoid; }
@media (max-width: 900px) { .area-instrumentos { columns: 1; } }

/* CTA da própria área */
.area-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: clamp(1.5rem, 4vw, 3.5rem); flex-wrap: wrap; }
.area-cta__inner .ed-lead { max-width: 46ch; }
.ed-lead--light { color: #fff; }

/* ==========================================================================
   ÍNDICE DE ÁREAS (areas-de-atuacao.html)
   ========================================================================== */
.area-index-list { display: flex; flex-direction: column; border-top: 1px solid var(--jsld-sand-200); }
.area-row {
  display: grid; grid-template-columns: auto auto 1fr auto; align-items: center;
  gap: clamp(.9rem, 2vw, 1.8rem); padding: clamp(1.1rem, 2.2vw, 1.7rem) .2rem;
  border-bottom: 1px solid var(--jsld-sand-200); color: inherit; text-decoration: none;
  transition: background var(--jsld-dur-2) var(--jsld-ease-out), padding-left var(--jsld-dur-2) var(--jsld-ease-out);
}
.area-row:hover, .area-row:focus-visible { background: var(--jsld-teal-050); padding-left: 1rem; }
.area-row__num { font-family: var(--jsld-font-mono, monospace); font-size: var(--jsld-fs-caption); color: var(--jsld-sand-500); }
.area-row__icon { color: var(--jsld-teal-700); display: grid; place-items: center; }
.area-row__body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.area-row__body strong { font-family: var(--jsld-font-display); font-size: var(--jsld-fs-h4); font-weight: 400; color: var(--jsld-teal-900); }
.area-row__tag { font-family: var(--jsld-font-display); font-style: italic; color: var(--jsld-teal-700); font-size: var(--jsld-fs-body-sm); }
.area-row__desc { font-size: var(--jsld-fs-body-sm); color: var(--jsld-ink-400); max-width: 62ch; }
.area-row__go { color: var(--jsld-teal-700); transition: transform var(--jsld-dur-2) var(--jsld-ease-out); }
.area-row:hover .area-row__go { transform: translateX(5px); }
@media (max-width: 700px) {
  .area-row { grid-template-columns: auto 1fr; row-gap: .5rem; }
  .area-row__icon { grid-row: 1; }
  .area-row__body { grid-column: 1 / -1; }
  .area-row__go { display: none; }
}

/* ==========================================================================
   CONTATO
   ========================================================================== */
.contact-map { margin-top: 1.4rem; }

/* --- Acabamento v3 -------------------------------------------------------- */
/* Vírgula logo após itálico da display herda o side bearing e "descola" */
.jsld-tight { margin-left: -.16em; font-style: normal; }

/* Página de área: a foto acompanha a leitura do texto, que é bem mais alto */
.ed-split--article > :first-child { position: sticky; top: 104px; }
@media (max-width: 900px) { .ed-split--article > :first-child { position: static; } }

/* Correção: o contador da hero é um <span>, e `.jsld-hero__stat span` (rótulo,
   .62rem) vencia o `.jsld-hero__stat b` (número, 2rem) — o "20" saía miúdo. */
.jsld-hero__stat b .jsld-count,
.jsld-hero__stat b span { font-size: inherit; letter-spacing: normal; text-transform: none;
  font-family: inherit; color: inherit; }