/* ==========================================================================
   Carvalho & Gonçalves Advogados — Camada de componentes
   Tema claro (padrão) e escuro, alternados por <html data-theme="light|dark">.
   As cores são tokens: componentes e utilitários do Tailwind (bg-page, text-ink,
   text-accent...) leem as mesmas variáveis, então a troca de tema é instantânea.
   ========================================================================== */

@layer theme, base, components, utilities;

/* ----------------------------------------------------------- Fontes locais */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/cormorant-garamond-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/cormorant-garamond-latin-300-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); }

/* ------------------------------------------------------------------ Tokens
   Paleta da marca (única fonte de cor do site):
     Obsidiana #0D0F12 · Obsidiana-2 #14171C · Grafite #1E232A · Ardósia #4A515C
     Névoa #A3A9B3 · Osso #F9F9FB · Branco #FFFFFF
     Ouro #C5A059 (logotipo, filetes, bordas, marcas) · Ouro profundo #7A5F24 (texto dourado no tema claro:
     contraste ≥ 5:1 sobre todos os fundos claros, inclusive rodapé — WCAG AA)
   Os tons intermediários são misturas dessas cores — sem neutros fora da família.
   ------------------------------------------------------------------------- */
:root {
  --cg-obsidian: #0D0F12;
  --cg-obsidian-2: #14171C;
  --cg-graphite: #1E232A;
  --cg-slate: #4A515C;
  --cg-mist: #A3A9B3;
  --cg-bone: #F9F9FB;
  --cg-white: #FFFFFF;
  --cg-gold: #C5A059;
  --cg-gold-deep: #7A5F24;
  --cg-ease: cubic-bezier(.2, .7, .1, 1);

  /* Tema claro (padrão) */
  --cg-page: var(--cg-bone);
  --cg-surface: var(--cg-white);
  --cg-muted: color-mix(in srgb, var(--cg-graphite) 4%, var(--cg-bone));    /* #F1F2F4 */
  --cg-panel: var(--cg-white);
  --cg-ink: var(--cg-graphite);
  --cg-soft: var(--cg-slate);
  --cg-accent: var(--cg-gold-deep);      /* texto dourado: contraste AA sobre fundos claros */
  --cg-on-accent: var(--cg-bone);
  --cg-footer: color-mix(in srgb, var(--cg-graphite) 7%, var(--cg-bone));   /* #ECEDF0 */
  --cg-header: color-mix(in srgb, var(--cg-bone) 90%, transparent);
  --cg-error: #9B2C2C;
  --cg-glow: rgb(197 160 89 / .14);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --cg-page: var(--cg-obsidian);
  --cg-surface: var(--cg-obsidian-2);
  --cg-muted: color-mix(in srgb, var(--cg-obsidian-2) 50%, var(--cg-obsidian));
  --cg-panel: var(--cg-obsidian-2);
  --cg-ink: var(--cg-bone);
  --cg-soft: var(--cg-mist);
  --cg-accent: var(--cg-gold);
  --cg-on-accent: var(--cg-obsidian);
  --cg-footer: var(--cg-obsidian);
  --cg-header: color-mix(in srgb, var(--cg-obsidian) 86%, transparent);
  --cg-error: #E08585;
  --cg-glow: rgb(197 160 89 / .10);
  color-scheme: dark;
}

:root {
  --cg-line: color-mix(in srgb, var(--cg-ink) 12%, transparent);
  --cg-line-strong: color-mix(in srgb, var(--cg-ink) 24%, transparent);
}

@layer base {
  html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; -webkit-text-size-adjust: 100%; }
  body {
    font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
    background: var(--cg-page); color: var(--cg-ink);
    transition: background-color .4s var(--cg-ease), color .4s var(--cg-ease);
  }
  ::selection { background: var(--cg-gold); color: var(--cg-obsidian); }
  :focus-visible { outline: 1px solid var(--cg-accent); outline-offset: 4px; }
  em { font-style: italic; }
  h1, h2 { overflow-wrap: break-word; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  }
}

@layer components {

  /* ------------------------------------------------------ Acessibilidade */
  .skip-link {
    position: absolute; left: 1rem; top: -4rem; z-index: 100;
    padding: .75rem 1.25rem; background: var(--cg-accent); color: var(--cg-on-accent);
    font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; transition: top .2s;
  }
  .skip-link:focus { top: 1rem; }

  /* -------------------------------------------------- Logotipo por tema */
  :root[data-theme="dark"] .logo-on-light { display: none; }
  :root:not([data-theme="dark"]) .logo-on-dark { display: none; }

  /* ------------------------------------------------------------ Cabeçalho */
  .site-header { color: var(--cg-ink); transition: background-color .5s var(--cg-ease), border-color .5s, backdrop-filter .5s; border-bottom: 1px solid transparent; }
  .site-header.is-scrolled {
    background: var(--cg-header);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border-bottom-color: rgb(197 160 89 / .22);
  }
  .nav-list { color: var(--cg-soft); }
  .nav-link { position: relative; padding-block: .5rem; transition: color .3s; }
  .nav-link::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: var(--cg-gold); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--cg-ease);
  }
  .nav-link:hover, .nav-link.is-active { color: var(--cg-accent); }
  .nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); transform-origin: left; }

  .menu-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 7px; width: 44px; height: 44px; align-items: flex-end; }
  .menu-toggle span { display: block; height: 1px; background: var(--cg-ink); transition: transform .4s var(--cg-ease), width .4s var(--cg-ease); }
  .menu-toggle span:first-child { width: 26px; }
  .menu-toggle span:last-child { width: 17px; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); width: 22px; }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); width: 22px; }
  .mobile-menu { background: var(--cg-header); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid rgb(197 160 89 / .22); }
  .mobile-link {
    display: block; padding: 1.1rem 0; border-bottom: 1px solid var(--cg-line);
    font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.75rem; font-weight: 400; color: var(--cg-ink);
  }

  /* Alternância de tema */
  .theme-toggle {
    display: inline-grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0;
    border: 1px solid var(--cg-line-strong); color: var(--cg-soft); cursor: pointer;
    transition: color .3s, border-color .3s;
  }
  .theme-toggle:hover { color: var(--cg-accent); border-color: var(--cg-gold); }
  .theme-toggle svg { width: 17px; height: 17px; }
  :root[data-theme="dark"] .theme-toggle__moon { display: none; }
  :root:not([data-theme="dark"]) .theme-toggle__sun { display: none; }

  /* -------------------------------------------------------------- Botões */
  .btn-gold, .btn-ghost, .btn-dark {
    display: inline-flex; align-items: center; gap: .9rem; min-height: 44px;
    padding: .85rem 1.6rem; font-size: .75rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase;
    transition: background-color .5s var(--cg-ease), color .5s var(--cg-ease), border-color .5s, gap .5s var(--cg-ease);
  }
  @media (min-width: 640px) { .btn-gold, .btn-ghost, .btn-dark { white-space: nowrap; } }
  .btn-gold { border: 1px solid var(--cg-gold); color: var(--cg-accent); background: transparent; }
  .btn-gold:hover { background: var(--cg-gold); border-color: var(--cg-gold); color: var(--cg-obsidian); gap: 1.2rem; }
  .btn-lg { padding: 1.15rem 2rem; font-size: .75rem; }
  .btn-ghost { border: 1px solid var(--cg-line-strong); color: var(--cg-ink); }
  .btn-ghost:hover { border-color: var(--cg-ink); }
  .btn-dark { position: relative; background: var(--cg-ink); color: var(--cg-page); padding: 1.15rem 2.4rem; border: 1px solid var(--cg-ink); }
  .btn-dark:hover { background: transparent; color: var(--cg-ink); }
  .btn-dark:disabled { opacity: .6; cursor: progress; }

  .link-quiet {
    font-size: .75rem; letter-spacing: .26em; text-transform: uppercase; color: var(--cg-soft);
    padding-block: .5rem; border-bottom: 1px solid var(--cg-line-strong); transition: color .3s, border-color .3s;
  }
  .link-quiet:hover { color: var(--cg-ink); border-color: var(--cg-accent); }
  .link-back { font-size: .75rem; letter-spacing: .26em; text-transform: uppercase; color: var(--cg-accent); border-bottom: 1px solid currentColor; padding-bottom: .25rem; }
  .footer-link { transition: color .3s; text-align: left; }
  .footer-link:hover { color: var(--cg-accent); }

  /* ------------------------------------------------------------ Rótulos */
  .eyebrow {
    display: flex; align-items: center; gap: 1rem;
    font-size: .75rem; font-weight: 400; letter-spacing: .34em; text-transform: uppercase; color: var(--cg-accent);
  }
  .eyebrow-rule { display: inline-block; width: 2.75rem; height: 1px; background: var(--cg-gold); }
  .footer-label { font-size: .75rem; letter-spacing: .34em; text-transform: uppercase; color: var(--cg-accent); }
  .site-footer { border-top: 1px solid rgb(197 160 89 / .3); }
  /* Rodapé: três colunas com os títulos na mesma linha; o logotipo fica centralizado na vertical em relação a elas. */
  .footer-grid { display: grid; gap: 2.25rem 2rem; align-items: start; padding-block: 3rem; }
  @media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1024px) {
    .footer-grid { grid-template-columns: 14rem repeat(3, auto); justify-content: center; column-gap: 3.5rem; }
    .site-footer .footer-label { white-space: nowrap; }
  }
  .footer-brand { width: 100%; max-width: 14rem; align-self: center; justify-self: center; }
  /* Bloco legal: 1 pt menor que o texto padrão (12 px → ~10,7 px), sem hifenização. */
  .site-footer .footer-legal, .site-footer .footer-legal p, .site-footer .footer-legal a { font-size: .667rem; hyphens: manual; -webkit-hyphens: manual; }
  /* Logotipo do cabeçalho: some quando o logotipo do rodapé entra na tela (fim da rolagem) e volta ao subir. */
  .site-logo { transition: opacity .5s var(--cg-ease), visibility 0s linear 0s; }
  .site-header.is-logo-hidden .site-logo { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .5s var(--cg-ease), visibility 0s linear .5s; }
  .footer-declaracao { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
  .footer-link--icon { display: inline-flex; align-items: center; gap: .6rem; }
  .footer-link--icon svg { width: 1.05rem; height: 1.05rem; color: var(--cg-accent); flex-shrink: 0; }
  .footer-email { white-space: nowrap; }
  @media (max-width: 400px) { .footer-email { white-space: normal; overflow-wrap: anywhere; } }

  /* ---------------------------------------------------------------- Hero */
  .hero__glow {
    position: absolute; z-index: -1; width: 60vw; height: 60vw; max-width: 900px; max-height: 900px;
    right: -18vw; top: -22vw; border-radius: 50%;
    background: radial-gradient(closest-side, var(--cg-glow), rgb(197 160 89 / 0));
    pointer-events: none;
  }

  /* --------------------------------------------- Tipografia institucional (reutilizável) */
  .display-1 { font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(2.5rem, 5vw, 4.6rem); font-weight: 400; line-height: 1.05; color: var(--cg-ink); }
  .display-2 { font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 400; line-height: 1.14; color: var(--cg-ink); text-wrap: balance; }
  .lede { max-width: 38rem; font-size: 1.06rem; line-height: 1.85; color: var(--cg-soft); }
  /* Espaçamento vertical compacto: transições curtas entre uma seção e outra. */
  .section { padding-block: clamp(3.5rem, 6.5vw, 5.5rem); }
  .section-sm { padding-block: clamp(2.75rem, 5vw, 4rem); }
  .section-end { padding-bottom: clamp(3.5rem, 6.5vw, 5.5rem); }
  .section-band { padding-block: clamp(3rem, 5.5vw, 4.5rem); }
  /* Abertura das páginas: altura do cabeçalho fixo (5rem / 6rem) + respiro moderado. */
  .page-hero { padding-top: calc(5rem + clamp(2rem, 4.5vw, 3.5rem)); padding-bottom: clamp(2.75rem, 5vw, 4rem); }
  @media (min-width: 768px) { .page-hero { padding-top: calc(6rem + clamp(2rem, 4.5vw, 3.5rem)); } }
  .page-hero--tight { padding-bottom: 1.75rem; }
  .page-hero--tall { padding-bottom: clamp(4rem, 8vw, 6rem); }
  .page-hero--home { padding-bottom: clamp(3.5rem, 6vw, 5rem); }

  /* ------------------------------------- Princípios (Missão · Visão · Valores) */
  .mvv__label { display: flex; align-items: center; gap: 1rem; font-family: "Inter", ui-sans-serif, sans-serif; font-size: .75rem; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: var(--cg-accent); }
  .mvv__label::before { content: ""; width: 2.75rem; height: 1px; background: var(--cg-gold); }
  .mvv__text { font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(1.35rem, 1.8vw, 1.6rem); font-weight: 400; line-height: 1.4; color: var(--cg-ink); }
  .mvv__values { counter-reset: v; border-top: 1px solid var(--cg-line); }
  .mvv__values li {
    counter-increment: v; display: flex; align-items: baseline; gap: 1rem; padding: .55rem 0;
    border-bottom: 1px solid var(--cg-line);
    font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.2rem; font-weight: 400; line-height: 1.3; color: var(--cg-ink);
  }
  .mvv__values li::before { content: counter(v, upper-roman); min-width: 1.8rem; font-size: .8rem; color: var(--cg-accent); }

  /* ------------------------------ Carrossel de princípios (abertura da página inicial) */
  .mvv-box {
    position: relative; display: flex; flex-direction: column; gap: 1.4rem;
    width: 100%; max-width: 480px; aspect-ratio: 1 / 1; margin-inline: auto; padding: 2.5rem 2.5rem 1.5rem;
    background: var(--cg-panel); outline: 1px solid rgb(197 160 89 / .35); outline-offset: 14px;
    box-shadow: 0 30px 60px -40px rgb(30 35 42 / .35);
  }
  /* Sem overflow oculto: se o texto exceder o quadrado, o quadro cresce em vez de cortar. */
  :root[data-theme="dark"] .mvv-box { box-shadow: none; }
  @media (max-width: 1023px) { .mvv-box { max-width: 560px; } }
  @media (max-width: 640px) { .mvv-box { aspect-ratio: auto; min-height: 0; padding: 2.25rem 1.75rem 1.75rem; outline-offset: 9px; } }
  .mvv-box__top { display: flex; justify-content: flex-end; }
  .mvv-box__count { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .8rem; letter-spacing: .16em; color: var(--cg-accent); }
  .mvv__stage { display: grid; flex: 1; align-content: start; }
  .mvv__slide { display: flex; flex-direction: column; gap: 1.25rem; }
  .mvv__slide + .mvv__slide { margin-top: 2.5rem; }
  /* Com JavaScript, os itens se sobrepõem na mesma célula: o quadro assume a altura do maior (sem cortes). */
  .js .mvv__slide { grid-area: 1 / 1; margin-top: 0; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .9s var(--cg-ease), transform .9s var(--cg-ease), visibility 0s linear .9s; }
  .js .mvv__slide.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .mvv-box .mvv__text { font-size: clamp(1.32rem, 1.65vw, 1.56rem); line-height: 1.38; }
  .mvv-box .mvv__values li { padding: .36rem 0; font-size: clamp(1.08rem, 1.35vw, 1.22rem); }
  .mvv-box__bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
  .mvv__nav { display: flex; gap: .5rem; }
  .mvv__dot { display: flex; align-items: center; width: 64px; height: 44px; cursor: pointer; }
  @media (max-width: 640px) { .mvv__dot { width: 48px; } }
  .mvv__dot span { position: relative; display: block; width: 100%; height: 1px; overflow: hidden; background: var(--cg-line-strong); }
  .mvv__dot span::after { content: ""; position: absolute; inset: 0; background: var(--cg-accent); transform: scaleX(0); transform-origin: left; }
  .mvv__dot[aria-current="true"] span::after { transform: scaleX(1); }
  .mvv.is-playing .mvv__dot[aria-current="true"] span::after { animation: cg-progress var(--mvv-dur, 5s) linear forwards; }
  .mvv__dot:hover span { background: color-mix(in srgb, var(--cg-ink) 40%, transparent); }
  /* Pausa: discreta, sem moldura (exigência de acessibilidade para conteúdo em movimento). */
  .mvv__toggle { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-right: -.75rem; color: color-mix(in srgb, var(--cg-soft) 70%, transparent); cursor: pointer; transition: color .3s; }
  .mvv__toggle:hover, .mvv__toggle:focus-visible { color: var(--cg-accent); }
  .mvv__toggle svg { width: 15px; height: 15px; }
  .mvv__toggle[aria-pressed="true"] .mvv__icon-pause, .mvv__toggle:not([aria-pressed="true"]) .mvv__icon-play { display: none; }

  @keyframes cg-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

  /* ------------------------------ Identificação institucional (página O Escritório) */
  .ident { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); column-gap: 2rem; border-top: 1px solid rgb(197 160 89 / .45); }
  .ident > div { padding: .8rem 0; border-bottom: 1px solid var(--cg-line); }
  .ident dt { font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--cg-accent); }
  .ident dd { margin-top: .2rem; font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.15rem; line-height: 1.35; color: var(--cg-ink); }

  /* -------------------------------------------------------- Sócios (início) */
  .partner__link { transition: color .3s; }
  .partner__link:hover { color: var(--cg-accent); }

  /* ------------------------------------------------------- Lista de áreas */
  .area-row {
    position: relative; display: grid; grid-template-columns: 3rem 1fr; gap: .5rem 1.5rem; align-items: baseline;
    padding: 2rem 0; border-bottom: 1px solid var(--cg-line); color: var(--cg-ink);
  }
  @media (min-width: 900px) { .area-row { grid-template-columns: 4rem minmax(0, 5fr) minmax(0, 6fr) 2rem; padding: 2.4rem 0; } }
  .area-row::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--cg-accent);
    transform: scaleX(0); transform-origin: left; transition: transform .8s var(--cg-ease);
  }
  .area-row:hover::before, .area-row:focus-visible::before { transform: scaleX(1); }
  .area-row__n { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.05rem; letter-spacing: .2em; color: var(--cg-accent); }
  .area-row__t { font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.15; }
  .area-row__d { grid-column: 2 / -1; font-size: .92rem; font-weight: 400; line-height: 1.7; color: var(--cg-soft); }
  @media (min-width: 900px) { .area-row__d { grid-column: auto; } }
  .area-row__arrow { display: none; color: var(--cg-ink); transition: transform .5s var(--cg-ease), color .3s; }
  @media (min-width: 900px) { .area-row__arrow { display: block; justify-self: end; } }
  .area-row:hover .area-row__arrow { transform: translateX(6px); color: var(--cg-accent); }
  .area-row--compact { padding: 1.5rem 0; }
  .area-row--compact .area-row__t { font-size: 1.4rem; }

  /* Cartões de área (visão geral) */
  .area-card { position: relative; display: flex; flex-direction: column; padding: 2.75rem 2.25rem 2.5rem; background: var(--cg-surface); transition: background-color .5s var(--cg-ease); }
  .area-card:hover { background: var(--cg-muted); }
  .area-card__n { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1rem; letter-spacing: .2em; color: var(--cg-accent); }
  .area-card__t { margin-top: 1.4rem; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(1.6rem, 2.2vw, 2rem); font-weight: 400; line-height: 1.15; color: var(--cg-ink); }
  .area-card__d { margin-top: 1rem; font-size: .95rem; font-weight: 400; line-height: 1.75; color: var(--cg-soft); }
  .area-card__note { margin-top: .9rem; font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.15rem; font-style: italic; line-height: 1.45; color: var(--cg-ink); }
  .area-card__more { display: inline-flex; align-items: center; gap: .8rem; margin-top: auto; padding-top: 2rem; font-size: .75rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--cg-ink); }
  .area-card__more svg { transition: transform .5s var(--cg-ease); }
  .area-card:hover .area-card__more { color: var(--cg-accent); }
  .area-card:hover .area-card__more svg { transform: translateX(4px); }

  /* ---------------------------------------------------------- Imagens */
  .frame { display: block; background: var(--cg-muted); outline: 1px solid rgb(197 160 89 / .4); outline-offset: 14px; }
  .ph {
    position: relative; display: grid; place-items: center; overflow: hidden;
    background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--cg-ink) 5%, transparent) 0 1px, transparent 1px 14px), var(--cg-muted);
  }
  .ph__mark { width: 28%; max-width: 160px; opacity: .35; }
  .ph__label {
    position: absolute; left: 1.25rem; right: 1.25rem; bottom: 1.1rem;
    font-size: .75rem; letter-spacing: .24em; text-transform: uppercase; color: var(--cg-soft);
  }

  /* -------------------------------------------------------- Advogados */
  .lawyer-card { display: block; }
  .lawyer-card h3 { transition: color .3s; }
  .lawyer-card:hover h3 { color: var(--cg-accent); }

  /* -------------------------------------------------------- Artigos */
  .article-card { position: relative; display: flex; flex-direction: column; padding: 2.5rem 2rem 2.25rem; background: var(--cg-surface); transition: background-color .5s var(--cg-ease); }
  .article-card:hover { background: var(--cg-muted); }
  .article-card__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; font-size: .75rem; letter-spacing: .24em; text-transform: uppercase; color: var(--cg-accent); }
  .article-card__meta time { color: var(--cg-soft); }
  .article-card__t { margin-top: 1.75rem; font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.65rem; font-weight: 400; line-height: 1.2; color: var(--cg-ink); }
  .article-card__t a::after { content: ""; position: absolute; inset: 0; }
  .article-card__d { margin-top: 1rem; font-size: .9rem; font-weight: 400; line-height: 1.75; color: var(--cg-soft); }
  .article-card__more { margin-top: auto; padding-top: 2rem; font-size: .75rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--cg-ink); }
  .article-card:hover .article-card__more { color: var(--cg-accent); }
  .chip {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1rem; border: 1px solid var(--cg-line-strong);
    font-size: .75rem; letter-spacing: .22em; text-transform: uppercase; color: var(--cg-soft); transition: border-color .3s, color .3s;
  }
  .chip:hover { color: var(--cg-ink); border-color: var(--cg-ink); }
  .chip.is-active { color: var(--cg-accent); border-color: var(--cg-gold); }

  /* ------------------------------------------------- Trilha de navegação */
  .breadcrumb ol { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--cg-soft); }
  .breadcrumb li + li::before { content: "/"; margin-right: .5rem; color: var(--cg-line-strong); }
  .breadcrumb a { transition: color .3s; }
  .breadcrumb a:hover { color: var(--cg-accent); }
  .breadcrumb [aria-current] { color: color-mix(in srgb, var(--cg-ink) 60%, transparent); }

  /* ------------------------------------------------- Páginas de área */
  .service-item { padding: 1.1rem 0; border-bottom: 1px solid var(--cg-line); font-size: 1rem; font-weight: 400; color: var(--cg-ink); }
  .situation { padding: 2rem 1.75rem 2.25rem; background: var(--cg-muted); font-size: .98rem; font-weight: 400; line-height: 1.7; color: var(--cg-ink); }
  .step { padding-top: 1.75rem; border-top: 1px solid rgb(197 160 89 / .55); }
  @media (min-width: 1024px) { .step { padding-right: 2rem; } .step + .step { padding-left: 2rem; border-left: 1px solid var(--cg-line); } }
  .step__n { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.1rem; letter-spacing: .2em; color: var(--cg-accent); }

  /* Faixa de chamada: mesma família de cores da página, delimitada por filetes dourados */
  .band { background: var(--cg-surface); color: var(--cg-ink); border-block: 1px solid rgb(197 160 89 / .45); }
  .band .band__soft { color: var(--cg-soft); }

  /* ----------------------------------------------------------- Formulário */
  .hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
  .field { display: flex; flex-direction: column; gap: .5rem; }
  .field label { font-size: .75rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--cg-soft); }
  .field input, .field select, .field textarea {
    width: 100%; padding: .75rem 0; background: transparent; border: 0; border-bottom: 1px solid var(--cg-line-strong);
    border-radius: 0; color: var(--cg-ink); font-size: 1.02rem; font-weight: 400; outline: none;
    transition: border-color .4s var(--cg-ease);
  }
  .field select option { background: var(--cg-surface); color: var(--cg-ink); }
  .field textarea { resize: vertical; min-height: 8rem; line-height: 1.7; }
  .field input::placeholder { color: color-mix(in srgb, var(--cg-soft) 60%, transparent); }
  .field input:focus, .field select:focus, .field textarea:focus { border-bottom-color: var(--cg-accent); box-shadow: 0 1px 0 0 var(--cg-accent); }
  .field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-bottom-color: var(--cg-error); }
  .field__error { min-height: 1rem; font-size: .74rem; color: var(--cg-error); }
  .select-wrap { position: relative; }
  .select-wrap select { appearance: none; -webkit-appearance: none; padding-right: 2rem; cursor: pointer; }
  .select-wrap::after {
    content: ""; position: absolute; right: .25rem; top: 50%; width: 7px; height: 7px; pointer-events: none;
    border-right: 1px solid var(--cg-ink); border-bottom: 1px solid var(--cg-ink); transform: translateY(-70%) rotate(45deg);
  }

  .consent-check { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
  .consent-check input {
    appearance: none; -webkit-appearance: none; width: 1.15rem; height: 1.15rem; margin-top: .15rem;
    border: 1px solid color-mix(in srgb, var(--cg-ink) 45%, transparent); background: transparent; display: grid; place-content: center; cursor: pointer;
    transition: border-color .3s, background-color .3s;
  }
  .consent-check input::before { content: ""; width: .55rem; height: .55rem; background: var(--cg-accent); transform: scale(0); transition: transform .3s var(--cg-ease); }
  .consent-check input:checked { border-color: var(--cg-gold); }
  .consent-check input:checked::before { transform: scale(1); }
  .consent-check label { font-size: .84rem; font-weight: 400; line-height: 1.7; color: var(--cg-soft); cursor: pointer; }
  .consent-check a, .text-link { color: var(--cg-ink); text-decoration: underline; text-decoration-color: var(--cg-accent); text-underline-offset: 3px; }

  .spinner { width: 14px; height: 14px; border: 1px solid currentColor; border-right-color: transparent; border-radius: 50%; display: none; animation: cg-spin .8s linear infinite; }
  [aria-busy="true"] .spinner { display: inline-block; }
  @keyframes cg-spin { to { transform: rotate(360deg); } }

  .form-status { padding: 1.25rem 1.5rem; font-size: .9rem; line-height: 1.6; border-top: 1px solid; }
  .form-status[data-state="success"] { color: var(--cg-ink); border-color: var(--cg-accent); background: rgb(197 160 89 / .1); }
  .form-status[data-state="error"] { color: var(--cg-error); border-color: var(--cg-error); background: color-mix(in srgb, var(--cg-error) 7%, transparent); }

  /* ------------------------------------------------- Banner LGPD (bottom sheet) */
  .consent {
    position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; color: var(--cg-ink);
    background: color-mix(in srgb, var(--cg-surface) 96%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    border-top: 1px solid rgb(197 160 89 / .55); box-shadow: 0 -20px 50px -30px rgb(30 35 42 / .35);
    transform: translateY(105%); transition: transform .9s var(--cg-ease);
  }
  .consent.is-visible { transform: translateY(0); }
  .consent__inner { max-width: 1320px; margin-inline: auto; padding: 1.5rem 1.25rem 1.75rem; }
  @media (min-width: 768px) { .consent__inner { padding: 1.75rem 2.5rem 2rem; } }
  .consent__receipt {
    display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; margin-bottom: 1.1rem;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .75rem; letter-spacing: .18em;
    text-transform: uppercase; color: var(--cg-accent);
  }
  .consent__receipt span + span::before { content: "/"; margin-right: 1.5rem; color: var(--cg-line-strong); }
  .consent__body { display: flex; flex-direction: column; gap: 1.5rem; }
  @media (min-width: 1024px) { .consent__body { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 3rem; } }
  .consent__actions { display: flex; flex-wrap: wrap; gap: .75rem; flex-shrink: 0; }

  /* ------------------------------------------------------- Texto jurídico */
  .legal h2 { margin: 3.5rem 0 1rem; font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.85rem; font-weight: 400; color: var(--cg-ink); }
  .legal h2:first-child { margin-top: 0; }
  .legal p, .legal li { font-size: 1rem; font-weight: 400; line-height: 1.85; color: var(--cg-soft); }
  .legal p + p { margin-top: 1rem; }
  .legal strong { font-weight: 500; color: var(--cg-ink); }
  .legal ul { margin-top: 1rem; padding-left: 1.25rem; list-style: none; }
  .legal li { position: relative; margin-top: .5rem; }
  .legal li::before { content: ""; position: absolute; left: -1.25rem; top: .9em; width: .6rem; height: 1px; background: var(--cg-accent); }
  .legal a { color: var(--cg-ink); text-decoration: underline; text-decoration-color: var(--cg-accent); text-underline-offset: 3px; }

  /* ------------------------------------------------------------- Revelação */
  .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 1.1s var(--cg-ease), transform 1.1s var(--cg-ease); }
  .js .reveal.is-in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }
}

/* ==========================================================================
   Equipe, redes profissionais e painel administrativo
   ========================================================================== */
@layer components {
  /* Ícones de redes profissionais */
  .social { display: flex; flex-wrap: wrap; gap: .5rem; }
  .social a {
    display: inline-grid; place-items: center; width: 44px; height: 44px;
    border: 1px solid var(--cg-line-strong); color: var(--cg-soft);
    transition: color .3s, border-color .3s, background-color .3s;
  }
  .social a:hover, .social a:focus-visible { color: var(--cg-accent); border-color: var(--cg-gold); background: rgb(197 160 89 / .06); }
  .social svg { width: 18px; height: 18px; }

  /* Painel */
  .adm-card { background: var(--cg-surface); border: 1px solid var(--cg-line); }
  .adm-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
  .adm-table th { padding: .85rem 1.5rem; text-align: left; font-size: .75rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--cg-soft); border-bottom: 1px solid var(--cg-line-strong); }
  .adm-table td { padding: 1rem 1.5rem; border-bottom: 1px solid var(--cg-line); vertical-align: middle; }
  .adm-table tr:last-child td { border-bottom: 0; }
  .adm-actions { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; }
  .adm-btn {
    display: inline-flex; align-items: center; justify-content: center; min-height: 38px; min-width: 38px; padding: 0 .85rem;
    border: 1px solid var(--cg-line-strong); background: transparent; color: var(--cg-ink);
    font-size: .78rem; letter-spacing: .06em; cursor: pointer; transition: color .3s, border-color .3s;
  }
  .adm-btn:hover { border-color: var(--cg-gold); color: var(--cg-accent); }
  .adm-btn--danger:hover { border-color: var(--cg-error); color: var(--cg-error); }
  .adm-help { font-size: .84rem; line-height: 1.7; color: var(--cg-soft); }
  .adm-help code, .adm-card code { padding: .05rem .35rem; background: var(--cg-muted); font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .8rem; color: var(--cg-ink); }
  .adm-mono { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .92rem !important; line-height: 1.75; }
  .adm-thumb { display: grid; place-items: center; width: 160px; aspect-ratio: 4 / 5; background: var(--cg-muted); outline: 1px solid rgb(197 160 89 / .4); outline-offset: 6px; }
  .adm-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .adm-thumb span { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cg-soft); }
  .adm-card .field input[type="file"] { border-bottom: 0; padding: .5rem 0; font-size: .9rem; }
  .adm-card .field input[type="checkbox"] { width: auto; padding: 0; border: 1px solid var(--cg-line-strong); }
  .adm-card .field textarea { border: 1px solid var(--cg-line-strong); padding: .85rem 1rem; }
  .adm-card .field textarea:focus { border-color: var(--cg-accent); }
  .adm-card .field.is-invalid textarea { border-color: var(--cg-error); }
  @media (max-width: 760px) {
    .adm-table thead { display: none; }
    .adm-table tr { display: block; padding: .9rem 1.25rem; border-bottom: 1px solid var(--cg-line); }
    .adm-table td { display: block; padding: .2rem 0; border: 0; }
    .adm-actions { justify-content: flex-start; margin-top: .6rem; }
  }
}

/* ==========================================================================
   Indicador de rolagem (todas as páginas): seta animada que sinaliza conteúdo
   abaixo da primeira tela. Some ao rolar; clique leva à seção seguinte.
   ========================================================================== */
@layer components {
  .scroll-cue {
    position: fixed; z-index: 55; left: 50%; bottom: max(1.25rem, env(safe-area-inset-bottom));
    display: flex; flex-direction: column; align-items: center; gap: .6rem;
    padding: 0; background: none; border: 0; color: var(--cg-accent); cursor: pointer;
    transform: translate(-50%, 12px); opacity: 0; visibility: hidden;
    transition: opacity .6s var(--cg-ease), transform .6s var(--cg-ease), bottom .5s var(--cg-ease), visibility 0s linear .6s;
  }
  .scroll-cue.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
  .scroll-cue__label {
    padding: .3rem .7rem; font-size: .66rem; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; white-space: nowrap;
    color: var(--cg-accent); background: color-mix(in srgb, var(--cg-page) 85%, transparent);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  .scroll-cue__ring {
    position: relative; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
    border: 1px solid var(--cg-gold); background: color-mix(in srgb, var(--cg-page) 88%, transparent);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    box-shadow: 0 14px 30px -18px rgb(30 35 42 / .45);
    transition: background-color .4s var(--cg-ease), color .4s var(--cg-ease);
  }
  /* Halo que se expande: chama a atenção sem ruído. */
  .scroll-cue__ring::before {
    content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--cg-gold);
    animation: cg-cue-ring 2.4s var(--cg-ease) infinite;
  }
  .scroll-cue svg { width: 18px; height: 22px; animation: cg-cue-bob 1.8s ease-in-out infinite; }
  .scroll-cue .chev-2 { animation: cg-cue-fade 1.8s ease-in-out infinite; }
  .scroll-cue:hover .scroll-cue__ring, .scroll-cue:focus-visible .scroll-cue__ring { background: var(--cg-gold); color: var(--cg-obsidian); }
  .scroll-cue:focus-visible { outline: none; }
  .scroll-cue:focus-visible .scroll-cue__ring { outline: 1px solid var(--cg-accent); outline-offset: 4px; }
  @media (max-width: 640px) {
    .scroll-cue__ring { width: 48px; height: 48px; }
    .scroll-cue__label { font-size: .6rem; }
  }
  @keyframes cg-cue-ring { 0% { transform: scale(1); opacity: .8; } 80%, 100% { transform: scale(1.55); opacity: 0; } }
  @keyframes cg-cue-bob { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(4px); } }
  @keyframes cg-cue-fade { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
  @media (prefers-reduced-motion: reduce) {
    .scroll-cue__ring::before, .scroll-cue svg, .scroll-cue .chev-2 { animation: none; }
    .scroll-cue__ring::before { opacity: 0; }
  }
  @media print { .scroll-cue { display: none; } }
}

/* ==========================================================================
   Texto corrido justificado (todo o site). Títulos, rótulos, metadados e
   elementos com alinhamento próprio (text-left/center/right) ficam de fora.
   ========================================================================== */
@layer components {
  /* :where() zera a especificidade: qualquer exceção abaixo (ou utilitário) prevalece. */
  :where(main p, main li, .site-footer p, .legal p, .legal li) {
    text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word;
  }
  /* Exceções: rótulos, metadados, contadores, avisos e listas de navegação */
  .eyebrow, .eyebrow *, .footer-label, .breadcrumb *, .article-card__meta, .article-card__more, .mvv-box__count,
  .nav-list *, .mobile-link, .chip, .form-status, .field__error, .consent *, .ident *, .step__n, .area-row__n,
  .area-card__n, .area-card__more, .footer-link, .social *, .btn-gold, .btn-dark, .btn-ghost, .link-quiet, .link-back,
  .adm-card *, .field label, .consent-check label, main h1, main h2, main h3, main h4 {
    text-align: left; hyphens: manual; -webkit-hyphens: manual;
  }
}


/* ==========================================================================
   Artigo (visual law): leitura rápida, hierarquia clara, PDF e chamada para contato
   ========================================================================== */
@layer components {
  .read-progress { position: fixed; z-index: 60; top: 0; left: 0; right: 0; height: 3px; background: var(--cg-gold); transform: scaleX(0); transform-origin: left; pointer-events: none; }

  .art-head { max-width: 820px; margin: 2.5rem auto 0; }
  .art-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: .75rem; letter-spacing: .26em; text-transform: uppercase; color: var(--cg-soft); }
  .art-meta__cat { color: var(--cg-accent); }
  .art-title { margin-top: 1.5rem; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(2.1rem, 4.2vw, 3.6rem); font-weight: 400; line-height: 1.1; color: var(--cg-ink); text-wrap: balance; }
  .art-lede { margin-top: 1.5rem; font-size: 1.1rem; line-height: 1.75; color: var(--cg-soft); }
  .art-actions { margin-top: 2rem; }

  /* Botão de PDF: ícone dourado + rótulo em duas linhas */
  .btn-pdf { display: inline-flex; align-items: center; gap: 1rem; min-height: 56px; padding: .6rem 1.5rem; border: 1px solid var(--cg-gold); color: var(--cg-ink); background: color-mix(in srgb, var(--cg-gold) 7%, transparent); transition: background-color .4s var(--cg-ease), border-color .4s, color .4s; }
  .btn-pdf svg { width: 1.35rem; height: 1.35rem; color: var(--cg-accent); flex-shrink: 0; transition: transform .4s var(--cg-ease), color .4s; }
  .btn-pdf span { display: flex; flex-direction: column; font-size: .75rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; line-height: 1.35; }
  .btn-pdf small { font-size: .68rem; font-weight: 400; letter-spacing: .14em; color: var(--cg-soft); }
  .btn-pdf:hover, .btn-pdf:focus-visible { background: var(--cg-gold); color: var(--cg-obsidian); }
  .btn-pdf:hover svg, .btn-pdf:focus-visible svg { transform: translateY(2px); color: var(--cg-obsidian); }
  .btn-pdf:hover small, .btn-pdf:focus-visible small { color: var(--cg-obsidian); }
  .btn-pdf--ghost { background: transparent; border-color: var(--cg-line-strong); min-height: 56px; }

  .art-wrap { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem); }
  .art-col { max-width: 720px; margin-inline: auto; padding-inline: 1.25rem; }
  @media (min-width: 768px) { .art-col { padding-inline: 0; } }

  /* Em resumo: leitura em 15 segundos */
  .resumo { padding: 1.75rem 1.75rem 1.5rem; background: var(--cg-panel); outline: 1px solid rgb(197 160 89 / .4); outline-offset: 8px; box-shadow: 0 24px 50px -38px rgb(30 35 42 / .4); margin-block: .5rem 2.5rem; }
  :root[data-theme="dark"] .resumo { box-shadow: none; }
  .resumo__title { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .75rem; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; color: var(--cg-accent); }
  .resumo__list { counter-reset: r; margin-top: 1.1rem; border-top: 1px solid rgb(197 160 89 / .45); }
  .resumo__list li { counter-increment: r; display: grid; grid-template-columns: 2.1rem 1fr; gap: .25rem; padding: .8rem 0; border-bottom: 1px solid var(--cg-line); font-size: 1rem; line-height: 1.6; color: var(--cg-ink); }
  .resumo__list li::before { content: counter(r, decimal-leading-zero); font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.05rem; letter-spacing: .1em; color: var(--cg-accent); }
  .resumo__list li:last-child { border-bottom: 0; }

  /* Índice */
  .toc { margin-bottom: 2.75rem; padding: 1.1rem 0 1.25rem; border-block: 1px solid var(--cg-line); }
  .toc__title { font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; color: var(--cg-soft); }
  .toc ol { counter-reset: t; display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
  .toc li { counter-increment: t; }
  .toc a { display: inline-flex; gap: .55rem; align-items: baseline; padding: .45rem .85rem; border: 1px solid var(--cg-line-strong); font-size: .85rem; line-height: 1.35; color: var(--cg-ink); transition: border-color .3s, color .3s; text-align: left; }
  .toc a::before { content: counter(t, decimal-leading-zero); font-size: .72rem; letter-spacing: .12em; color: var(--cg-accent); }
  .toc a:hover, .toc a:focus-visible { border-color: var(--cg-gold); color: var(--cg-accent); }

  /* Corpo */
  .art-body { counter-reset: sec; }
  .art-body p { font-size: 1.06rem; line-height: 1.9; color: var(--cg-soft); }
  .art-body p + p { margin-top: 1.1rem; }
  .art-body h2 {
    counter-increment: sec; display: flex; align-items: baseline; gap: 1rem; margin: 3rem 0 1.1rem; padding-top: 1.4rem;
    border-top: 1px solid rgb(197 160 89 / .45); scroll-margin-top: 6.5rem;
    font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(1.55rem, 2.6vw, 1.95rem); font-weight: 400; line-height: 1.2; color: var(--cg-ink);
  }
  .art-body h2::before { content: counter(sec, decimal-leading-zero); font-size: .95rem; letter-spacing: .18em; color: var(--cg-accent); }
  .art-body h2:first-child { margin-top: 0; }
  .art-body ul { margin-top: 1.1rem; padding: 0; list-style: none; border-top: 1px solid var(--cg-line); }
  .art-body li { position: relative; padding: .75rem 0 .75rem 1.5rem; border-bottom: 1px solid var(--cg-line); font-size: 1rem; line-height: 1.7; color: var(--cg-ink); }
  .art-body li::before { content: ""; position: absolute; left: 0; top: 1.5em; width: .65rem; height: 1px; background: var(--cg-accent); }
  .callout { margin: 1.9rem 0; padding: 1.15rem 1.35rem 1.2rem; border-left: 2px solid var(--cg-gold); background: var(--cg-muted); }
  .art-body .callout p { text-align: left; hyphens: manual; font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.3rem; line-height: 1.45; color: var(--cg-ink); }

  /* Chamada para contato */
  .art-cta { margin-top: 3.5rem; padding: 2.25rem 2rem; background: var(--cg-panel); outline: 1px solid rgb(197 160 89 / .4); outline-offset: 8px; box-shadow: 0 24px 50px -38px rgb(30 35 42 / .4); }
  :root[data-theme="dark"] .art-cta { box-shadow: none; }
  .art-cta__title { margin-top: 1.25rem; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 400; line-height: 1.15; color: var(--cg-ink); }
  .art-cta__text { margin-top: 1rem; font-size: 1rem; line-height: 1.75; color: var(--cg-soft); }
  .art-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.75rem; }
  .art-note { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--cg-line); font-size: .85rem; line-height: 1.7; color: var(--cg-soft); }

  @media print { .read-progress, .art-cta, .toc { display: none; } }
}