/* ============================================================================
   DP SITE — folha de estilo única do tema.

   Fonte de verdade dos valores: docs/TOKENS.md.
   Nenhum valor de cor, tipografia ou espaçamento pode aparecer fora da seção
   TOKENS abaixo. Todo o resto referencia custom properties.

   Seções:
     1. TOKENS
     2. RESET
     3. BASE
     4. LAYOUT
     5. COMPONENTES

   Prefixo BEM: dp-
   Mobile-first. Breakpoints (docs/TOKENS.md §7.1): 480 / 768 / 1024 / 1280 / 1440.
   ============================================================================ */

/* ============================================================================
   1. TOKENS
   ============================================================================ */

:root {
  /* ---- Grafite ---------------------------------------------------------- */
  --dp-graphite-900: #1c1f26; /* marca — tinta, superfície escura */
  --dp-graphite-800: #272b34;
  --dp-graphite-700: #353a45;
  --dp-graphite-600: #474d5a;
  --dp-graphite-500: #646b78;
  --dp-graphite-400: #8a909c;
  --dp-graphite-300: #b2b8c2;
  --dp-graphite-200: #d9dde4; /* marca — cinza claro, fios */
  --dp-graphite-100: #e7eaef;
  --dp-graphite-50:  #f5f7fa; /* marca — off white */

  /* ---- Azul estratégico ------------------------------------------------- */
  --dp-blue-800: #16407e;
  --dp-blue-700: #1b539f;
  --dp-blue-600: #2167c9; /* marca */
  --dp-blue-500: #3d80dc;
  --dp-blue-300: #9cc0ef;
  --dp-blue-200: #c6d9f1;
  --dp-blue-100: #dfeafb;
  --dp-blue-50:  #eef5fd;

  /* ---- Verde estratégico ------------------------------------------------ */
  --dp-green-800: #647700; /* [corrigido] único verde AA para texto corrido */
  --dp-green-700: #6f8500; /* 4,20:1 — só texto grande, ícone, fio */
  --dp-green-600: #94b400;
  --dp-green-500: #b6db00; /* marca — preenchimento, NUNCA texto sobre claro */
  --dp-green-400: #c9e93f;
  --dp-green-200: #e6f5a6;
  --dp-green-100: #eff8cb;
  --dp-green-50:  #f7fbe2;

  /* ---- Base ------------------------------------------------------------- */
  --dp-white: #ffffff;
  --dp-black: #0d0f13;

  /* ---- Estado ----------------------------------------------------------- */
  --dp-positive-600: #4f8a00;
  --dp-positive-100: #eaf4cf;
  --dp-warning-600:  #b06a00;
  --dp-warning-100:  #f6e8d2;
  --dp-critical-600: #c0392b;
  --dp-critical-100: #f6e1de;

  /* ---- Aliases semânticos: superfície ----------------------------------- */
  --dp-bg-page:      var(--dp-white);
  --dp-bg-alt:       var(--dp-graphite-50);
  --dp-surface:      var(--dp-white);
  --dp-surface-alt:  var(--dp-graphite-50);
  --dp-surface-dark: var(--dp-graphite-900);

  /* ---- Aliases semânticos: texto ---------------------------------------- */
  --dp-text-primary:     var(--dp-graphite-900);
  --dp-text-secondary:   var(--dp-graphite-500);
  --dp-text-muted:       var(--dp-graphite-400); /* ≥24px ou não textual */
  --dp-text-on-dark:     var(--dp-white);
  --dp-text-on-dark-dim: var(--dp-graphite-300);
  --dp-placeholder:      var(--dp-graphite-500); /* [corrigido] */

  /* ---- Aliases semânticos: acento --------------------------------------- */
  --dp-accent-strategic:      var(--dp-blue-600); /* números, dados, conceitos */
  --dp-accent-strategic-dark: var(--dp-blue-500); /* o mesmo, sobre grafite */
  --dp-accent-result:         var(--dp-green-500); /* preenchimento de resultado */
  --dp-accent-result-ink:     var(--dp-green-800); /* [corrigido] texto de resultado */
  --dp-accent-result-on-dark: var(--dp-green-500);

  /* ---- Aliases semânticos: marca e ação --------------------------------- */
  --dp-brand:         var(--dp-graphite-900);
  --dp-brand-hover:   var(--dp-graphite-800);
  --dp-brand-press:   var(--dp-black);
  --dp-link:          var(--dp-blue-600);
  --dp-link-hover:    var(--dp-blue-700);
  --dp-hairline:      var(--dp-graphite-200);
  --dp-hairline-dark: rgba(255, 255, 255, 0.12);
  --dp-overlay-light: rgba(255, 255, 255, 0.08); /* hover sobre grafite */
  --dp-overlay-scrim: rgba(28, 31, 38, 0.40);    /* fundo do drawer mobile */
  --dp-focus-ring:    var(--dp-blue-600);

  /* ---- Famílias --------------------------------------------------------- */
  --dp-font-display: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --dp-font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --dp-font-numeric: "Inter Tight", sans-serif;

  /* ---- Escala tipográfica ----------------------------------------------- */
  --dp-text-2xs:  0.6875rem; /* 11 */
  --dp-text-xs:   0.75rem;   /* 12 */
  --dp-text-sm:   0.875rem;  /* 14 */
  --dp-text-base: 1rem;      /* 16 */
  --dp-text-md:   1.125rem;  /* 18 */
  --dp-text-lg:   1.375rem;  /* 22 */
  --dp-text-xl:   1.75rem;   /* 28 */
  --dp-text-2xl:  2.25rem;   /* 36 */
  --dp-text-3xl:  3rem;      /* 48 */
  --dp-text-4xl:  4rem;      /* 64 — hero display */
  --dp-text-5xl:  5.25rem;   /* 84 — reserva, não usado no hero */

  /* Hero fluido: 36px no celular, 64px a partir de ~914px. */
  --dp-text-display: clamp(2.25rem, 7vw, 4rem);

  /* ---- Pesos ------------------------------------------------------------ */
  --dp-weight-regular:  400;
  --dp-weight-medium:   500;
  --dp-weight-semibold: 600;
  --dp-weight-bold:     700;
  --dp-weight-extra:    800;

  /* ---- Altura de linha -------------------------------------------------- */
  --dp-leading-tight:   1.04;
  --dp-leading-snug:    1.16;
  --dp-leading-normal:  1.5;
  --dp-leading-relaxed: 1.62;

  /* ---- Tracking --------------------------------------------------------- */
  --dp-tracking-tightest: -0.035em;
  --dp-tracking-tight:    -0.02em;
  --dp-tracking-snug:     -0.01em;
  --dp-tracking-normal:   0;
  --dp-tracking-wide:     0.02em;
  --dp-tracking-caps:     0.16em;

  /* ---- Papéis tipográficos ---------------------------------------------- */
  --dp-display-font:    var(--dp-font-display);
  --dp-display-weight:  var(--dp-weight-bold);
  --dp-display-spacing: var(--dp-tracking-tightest);
  --dp-heading-font:    var(--dp-font-display);
  --dp-heading-weight:  var(--dp-weight-semibold);
  --dp-body-font:       var(--dp-font-sans);
  --dp-body-weight:     var(--dp-weight-regular);
  --dp-body-leading:    var(--dp-leading-relaxed);
  --dp-eyebrow-size:    var(--dp-text-xs);

  /* ---- Espaçamento ------------------------------------------------------ */
  --dp-space-0:  0;
  --dp-space-1:  0.25rem; /* 4 */
  --dp-space-2:  0.5rem;  /* 8 */
  --dp-space-3:  0.75rem; /* 12 */
  --dp-space-4:  1rem;    /* 16 */
  --dp-space-5:  1.5rem;  /* 24 */
  --dp-space-6:  2rem;    /* 32 */
  --dp-space-7:  2.5rem;  /* 40 */
  --dp-space-8:  3rem;    /* 48 */
  --dp-space-9:  4rem;    /* 64 */
  --dp-space-10: 5.5rem;  /* 88 */
  --dp-space-11: 7rem;    /* 112 */
  --dp-space-12: 9rem;    /* 144 */

  /* ---- Raios ------------------------------------------------------------ */
  --dp-radius-xs:   3px;
  --dp-radius-sm:   6px;
  --dp-radius-md:   10px;
  --dp-radius-lg:   16px;
  --dp-radius-xl:   22px;
  --dp-radius-pill: 999px;
  --dp-radius-card: var(--dp-radius-md);

  /* ---- Bordas ----------------------------------------------------------- */
  --dp-border-width: 1px;

  /* ---- Sombras ---------------------------------------------------------- */
  --dp-shadow-none:  none;
  --dp-shadow-xs:    0 1px 2px rgba(28, 31, 38, 0.05);
  --dp-shadow-sm:    0 2px 8px rgba(28, 31, 38, 0.06);
  --dp-shadow-md:    0 8px 24px rgba(28, 31, 38, 0.07);
  --dp-shadow-lg:    0 18px 48px rgba(28, 31, 38, 0.1);
  --dp-shadow-focus: 0 0 0 3px rgba(33, 103, 201, 0.3);

  /* ---- Contêiner -------------------------------------------------------- */
  --dp-container-sm: 640px;
  --dp-container-md: 880px;
  --dp-container-lg: 1120px;
  --dp-container-xl: 1320px;

  /* ---- Ritmo (mobile-first; escala nos breakpoints abaixo) -------------- */
  --dp-gutter:    var(--dp-space-5);
  --dp-section-y: var(--dp-space-9);

  /* ---- Movimento -------------------------------------------------------- */
  --dp-ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --dp-ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
  --dp-dur-fast:    130ms;
  --dp-dur-base:    220ms;
  --dp-dur-slow:    400ms;

  /* ---- Dimensões de componente (docs/TOKENS.md §8) ---------------------- */
  /* Fora da escala de 4px porque vêm medidas do design system. */
  --dp-btn-height:          46px;
  --dp-btn-height-sm:       38px;
  --dp-btn-height-lg:       54px;
  --dp-field-height:        48px;
  --dp-textarea-min-height: 124px;
  --dp-badge-padding:       4px 9px;
  --dp-tag-padding:         7px 16px;
  --dp-gap-stat:            6px;  /* valor → rótulo, e gap de ícone em badge/tag */
  --dp-gap-field:           7px;  /* rótulo → campo → hint */
  --dp-focus-outline:       2px;
  --dp-card-lift:           3px;  /* translateY do card interativo */

  /* Alvo mínimo de toque — WCAG 2.5.8 exige 24px; 44px é o confortável. */
  --dp-touch-target:        44px;

  /* Wordmark tipográfico — docs/TOKENS.md §8.6 */
  --dp-wordmark-name:       19px;
  --dp-wordmark-descriptor: 10px; /* [corrigido] o kit usa 9px, ilegível */
  --dp-wordmark-gap:        5px;
  --dp-tracking-caps-tight: 0.14em;

  /* Cabeçalho e navegação */
  --dp-header-height:       64px;
  --dp-drawer-width:        min(360px, 86vw);
  --dp-submenu-width:       230px;
  --dp-sidebar-width:       280px;
  /* Largura minima confortavel de um card de post. E o piso que faz grade e
     mosaico cederem colunas quando a barra lateral esta ligada, em vez de
     espremer o numero escolhido no Customizer. */
  --dp-card-min:            17rem;
  --dp-nav-marker:          2px;
  --dp-whatsapp-size:       54px;

  /* ---- Camadas ---------------------------------------------------------- */
  --dp-z-base:   1;
  --dp-z-sticky: 100;
  --dp-z-drawer: 500;
  --dp-z-float:  900; /* botão flutuante de WhatsApp — abaixo do CookieYes */
  --dp-z-skip:   1000;
}

@media (min-width: 768px) {
  :root {
    --dp-gutter:    var(--dp-space-6);
    --dp-section-y: var(--dp-space-10);
  }
}

@media (min-width: 1024px) {
  :root {
    --dp-gutter:        var(--dp-space-7);
    --dp-section-y:     var(--dp-space-11);
    --dp-header-height: 88px;
  }
}

/* ============================================================================
   2. RESET
   ============================================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
  margin: 0;
}

ul[class],
ol[class] {
  margin: 0;
  padding: 0;
  list-style: none;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* O design system é explicitamente "sem efeitos": movimento discreto e sempre
   descartável. Ver docs/TOKENS.md §6. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================================
   3. BASE
   ============================================================================ */

body {
  font-family: var(--dp-body-font);
  font-weight: var(--dp-body-weight);
  font-size: var(--dp-text-base);
  line-height: var(--dp-body-leading);
  color: var(--dp-text-primary);
  background: var(--dp-bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--dp-heading-font);
  font-weight: var(--dp-heading-weight);
  line-height: var(--dp-leading-snug);
  letter-spacing: var(--dp-tracking-tight);
  color: var(--dp-text-primary);
  text-wrap: balance;
}

h1 {
  font-size: var(--dp-text-3xl);
  font-weight: var(--dp-weight-bold);
  line-height: var(--dp-leading-tight);
}

h2 { font-size: var(--dp-text-2xl); }
h3 { font-size: var(--dp-text-xl); }
h4 { font-size: var(--dp-text-lg); }

h5 {
  font-family: var(--dp-font-sans);
  font-size: var(--dp-text-md);
  letter-spacing: var(--dp-tracking-snug);
}

h6 {
  font-family: var(--dp-font-sans);
  font-size: var(--dp-text-base);
  letter-spacing: var(--dp-tracking-normal);
}

p {
  text-wrap: pretty;
}

a {
  color: var(--dp-link);
  text-decoration: none;
}

a:hover {
  color: var(--dp-link-hover);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Título que é link continua grafite — no design system o azul marca dado e
   conceito-chave, não manchete. O azul entra só no hover. */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; }

h1 a:hover, h2 a:hover, h3 a:hover,
h4 a:hover, h5 a:hover, h6 a:hover {
  color: var(--dp-link);
  text-decoration: none;
}

strong, b { font-weight: var(--dp-weight-semibold); }

hr {
  height: 0;
  margin: var(--dp-space-8) 0;
  border: 0;
  border-top: var(--dp-border-width) solid var(--dp-hairline);
}

code, pre, kbd, samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
}

::selection {
  background: var(--dp-green-200);
  color: var(--dp-graphite-900);
}

/* Foco visível em tudo que é interativo — nunca removido sem substituto. */
:focus-visible {
  outline: var(--dp-focus-outline) solid var(--dp-focus-ring);
  outline-offset: var(--dp-focus-outline);
}

/* ---- Papéis tipográficos utilitários ------------------------------------ */

.dp-display {
  font-family: var(--dp-display-font);
  font-weight: var(--dp-display-weight);
  font-size: var(--dp-text-display);
  line-height: var(--dp-leading-tight);
  letter-spacing: var(--dp-display-spacing);
  text-wrap: balance;
}

.dp-lead {
  font-size: var(--dp-text-md);
  line-height: var(--dp-leading-relaxed);
  color: var(--dp-text-secondary);
}

/* Números e dados estratégicos — azul, tabular (regra de cor da marca). */
.dp-num {
  font-family: var(--dp-font-numeric);
  font-variant-numeric: tabular-nums;
  color: var(--dp-accent-strategic);
}

/* Economia, ganho, resultado — verde (regra de cor da marca). */
.dp-result {
  color: var(--dp-accent-result-ink);
  font-weight: var(--dp-weight-semibold);
}

/* ============================================================================
   4. LAYOUT
   ============================================================================ */

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

.dp-container--md { max-width: var(--dp-container-md); }
.dp-container--xl { max-width: var(--dp-container-xl); }

.dp-section {
  padding-block: var(--dp-section-y);
  background: var(--dp-bg-page);
}

.dp-section--alt  { background: var(--dp-bg-alt); }

.dp-section--dark {
  background: var(--dp-surface-dark);
  color: var(--dp-text-on-dark);
}

.dp-section--dark h1,
.dp-section--dark h2,
.dp-section--dark h3,
.dp-section--dark h4,
.dp-section--dark h5,
.dp-section--dark h6 {
  color: var(--dp-text-on-dark);
}

.dp-section--dark .dp-lead { color: var(--dp-text-on-dark-dim); }
.dp-section--dark .dp-num  { color: var(--dp-accent-strategic-dark); }
.dp-section--dark .dp-result { color: var(--dp-accent-result-on-dark); }

/* .screen-reader-text é gerado pelo próprio WordPress (searchform, navegação
   de comentários, "Pular para") e precisa ser estilizado pelo tema — não basta
   ter a classe própria .dp-visually-hidden. */
.dp-visually-hidden,
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  word-wrap: normal !important;
}

/* Quando o elemento do core é focável, ele precisa reaparecer. */
.screen-reader-text:focus {
  position: absolute;
  top: var(--dp-space-2);
  left: var(--dp-space-2);
  z-index: var(--dp-z-skip);
  width: auto;
  height: auto;
  margin: 0;
  padding: var(--dp-space-3) var(--dp-space-4);
  overflow: visible;
  clip-path: none;
  font-family: var(--dp-font-sans);
  font-size: var(--dp-text-sm);
  font-weight: var(--dp-weight-semibold);
  color: var(--dp-text-on-dark);
  background: var(--dp-graphite-900);
  border-radius: var(--dp-radius-sm);
  text-decoration: none;
}

.dp-skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--dp-z-skip);
  padding: var(--dp-space-3) var(--dp-space-4);
  font-family: var(--dp-font-sans);
  font-size: var(--dp-text-sm);
  font-weight: var(--dp-weight-semibold);
  color: var(--dp-text-on-dark);
  background: var(--dp-graphite-900);
  border-radius: 0 0 var(--dp-radius-sm) 0;
  transform: translateY(-105%);
  transition: transform var(--dp-dur-fast) var(--dp-ease-out);
}

.dp-skip-link:focus {
  transform: translateY(0);
  color: var(--dp-text-on-dark);
  text-decoration: none;
}

/* ============================================================================
   5. COMPONENTES
   Porte 1:1 de design-reference/components/core/components.css, com os tokens
   corrigidos. Ver docs/TOKENS.md §8.
   ============================================================================ */

/* ---- Eyebrow ------------------------------------------------------------ */

.dp-eyebrow {
  display: inline-block;
  margin: 0;
  font-family: var(--dp-font-sans);
  font-size: var(--dp-eyebrow-size);
  font-weight: var(--dp-weight-semibold);
  letter-spacing: var(--dp-tracking-caps);
  text-transform: uppercase;
  color: var(--dp-text-secondary);
}

.dp-eyebrow--strategic { color: var(--dp-blue-600); }
.dp-eyebrow--result    { color: var(--dp-accent-result-ink); }
.dp-eyebrow--light     { color: var(--dp-graphite-300); }

/* ---- Botão -------------------------------------------------------------- */

.dp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dp-space-2);
  height: var(--dp-btn-height);
  padding-inline: var(--dp-space-5);
  font-family: var(--dp-font-sans);
  font-size: var(--dp-text-sm);
  font-weight: var(--dp-weight-semibold);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  color: var(--dp-white);
  background: var(--dp-brand);
  border: var(--dp-border-width) solid transparent;
  border-radius: var(--dp-radius-sm);
  transition:
    background var(--dp-dur-fast) var(--dp-ease-out),
    color var(--dp-dur-fast) var(--dp-ease-out),
    border-color var(--dp-dur-fast) var(--dp-ease-out),
    transform var(--dp-dur-fast) var(--dp-ease-out),
    box-shadow var(--dp-dur-fast) var(--dp-ease-out);
}

.dp-btn:hover {
  background: var(--dp-brand-hover);
  color: var(--dp-white);
  text-decoration: none;
}

.dp-btn:active {
  background: var(--dp-brand-press);
  transform: translateY(1px);
}

.dp-btn:focus-visible {
  outline: none;
  box-shadow: var(--dp-shadow-focus);
}

.dp-btn[disabled],
.dp-btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

/* Resultado (lime) — economia e oportunidade. Tinta grafite: 10,20:1. */
.dp-btn--result        { background: var(--dp-accent-result); color: var(--dp-graphite-900); }
.dp-btn--result:hover  { background: var(--dp-green-400); color: var(--dp-graphite-900); }
.dp-btn--result:active { background: var(--dp-green-600); }

/* Estratégico (azul). */
.dp-btn--strategic        { background: var(--dp-blue-600); color: var(--dp-white); }
.dp-btn--strategic:hover  { background: var(--dp-blue-700); }
.dp-btn--strategic:active { background: var(--dp-blue-800); }

/* Secundário — fio, sem preenchimento. */
.dp-btn--secondary {
  background: transparent;
  color: var(--dp-graphite-900);
  border-color: var(--dp-graphite-300);
}

.dp-btn--secondary:hover {
  background: var(--dp-graphite-50);
  color: var(--dp-graphite-900);
  border-color: var(--dp-graphite-900);
}

.dp-btn--secondary:active { background: var(--dp-graphite-100); }

/* Fantasma. */
.dp-btn--ghost       { background: transparent; color: var(--dp-graphite-900); }
.dp-btn--ghost:hover { background: var(--dp-graphite-50); color: var(--dp-graphite-900); }

/* Sobre seção grafite. */
.dp-btn--on-dark.dp-btn--secondary {
  color: var(--dp-white);
  border-color: var(--dp-hairline-dark);
}

.dp-btn--on-dark.dp-btn--secondary:hover {
  background: var(--dp-overlay-light);
  border-color: var(--dp-white);
  color: var(--dp-white);
}

.dp-btn--on-dark.dp-btn--ghost       { color: var(--dp-white); }
.dp-btn--on-dark.dp-btn--ghost:hover { background: var(--dp-overlay-light); color: var(--dp-white); }

.dp-btn--sm    { height: var(--dp-btn-height-sm); padding-inline: var(--dp-space-4); font-size: var(--dp-text-xs); }
.dp-btn--lg    { height: var(--dp-btn-height-lg); padding-inline: var(--dp-space-6); font-size: var(--dp-text-base); }
.dp-btn--block { width: 100%; }

/* ---- Badge -------------------------------------------------------------- */

.dp-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--dp-gap-stat);
  padding: var(--dp-badge-padding);
  font-family: var(--dp-font-sans);
  font-size: var(--dp-text-2xs);
  font-weight: var(--dp-weight-semibold);
  letter-spacing: var(--dp-tracking-wide);
  text-transform: uppercase;
  color: var(--dp-graphite-700);
  background: var(--dp-graphite-100);
  border-radius: var(--dp-radius-xs);
}

.dp-badge--strategic { background: var(--dp-blue-100);  color: var(--dp-blue-700); }
.dp-badge--result    { background: var(--dp-green-100); color: var(--dp-green-800); }
.dp-badge--solid     { background: var(--dp-graphite-900); color: var(--dp-white); }

/* ---- Tag ---------------------------------------------------------------- */

.dp-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--dp-gap-stat);
  padding: var(--dp-tag-padding);
  font-family: var(--dp-font-sans);
  font-size: var(--dp-text-sm);
  font-weight: var(--dp-weight-medium);
  color: var(--dp-graphite-800);
  background: var(--dp-graphite-50);
  border-radius: var(--dp-radius-pill);
}

.dp-tag--outline { background: transparent; box-shadow: inset 0 0 0 var(--dp-border-width) var(--dp-graphite-300); }
.dp-tag--solid   { background: var(--dp-graphite-900); color: var(--dp-white); }

a.dp-tag:hover { background: var(--dp-graphite-100); color: var(--dp-graphite-900); text-decoration: none; }

/* ---- Card — chapado, "sem molduras" ------------------------------------- */

.dp-card {
  padding: var(--dp-space-6);
  background: var(--dp-surface-alt);
  border-radius: var(--dp-radius-card);
  transition:
    transform var(--dp-dur-base) var(--dp-ease-out),
    background var(--dp-dur-base) var(--dp-ease-out);
}

.dp-card--plain       { background: var(--dp-white); }
.dp-card--interactive { cursor: pointer; }

.dp-card--interactive:hover {
  transform: translateY(calc(-1 * var(--dp-card-lift)));
  background: var(--dp-graphite-100);
}

.dp-card--dark {
  background: var(--dp-surface-dark);
  color: var(--dp-text-on-dark);
}

/* Item de lista editorial — fio superior, sem caixa. */
.dp-card--ruled {
  padding-inline: 0;
  background: transparent;
  border-top: var(--dp-border-width) solid var(--dp-hairline);
  border-radius: 0;
}

/* ---- Stat --------------------------------------------------------------- */

.dp-stat {
  display: flex;
  flex-direction: column;
  gap: var(--dp-gap-stat);
}

.dp-stat__value {
  font-family: var(--dp-font-numeric);
  font-size: var(--dp-text-4xl);
  font-weight: var(--dp-weight-bold);
  line-height: 0.95;
  letter-spacing: var(--dp-tracking-tight);
  font-variant-numeric: tabular-nums;
  color: var(--dp-accent-strategic); /* azul = número */
}

.dp-stat__unit { font-size: 0.6em; }

.dp-stat__label {
  font-family: var(--dp-font-sans);
  font-size: var(--dp-text-sm);
  color: var(--dp-text-secondary);
}

.dp-stat--result .dp-stat__value { color: var(--dp-accent-result-ink); } /* verde = resultado */
.dp-stat--on-dark .dp-stat__value { color: var(--dp-accent-strategic-dark); }
.dp-stat--on-dark .dp-stat__label { color: var(--dp-text-on-dark-dim); }
.dp-stat--result.dp-stat--on-dark .dp-stat__value { color: var(--dp-accent-result-on-dark); }

/* ---- Campo -------------------------------------------------------------- */

.dp-field {
  display: flex;
  flex-direction: column;
  gap: var(--dp-gap-field);
}

.dp-field__label {
  font-family: var(--dp-font-sans);
  font-size: var(--dp-text-sm);
  font-weight: var(--dp-weight-semibold);
  color: var(--dp-text-primary);
}

.dp-field__hint {
  font-size: var(--dp-text-xs);
  color: var(--dp-text-secondary);
}

.dp-input,
.dp-textarea,
.dp-select {
  width: 100%;
  height: var(--dp-field-height);
  padding-inline: var(--dp-space-4);
  font-family: var(--dp-font-sans);
  font-size: var(--dp-text-base);
  color: var(--dp-text-primary);
  background: var(--dp-white);
  border: var(--dp-border-width) solid var(--dp-graphite-300);
  border-radius: var(--dp-radius-sm);
  transition:
    border-color var(--dp-dur-fast) var(--dp-ease-out),
    box-shadow var(--dp-dur-fast) var(--dp-ease-out);
}

.dp-textarea {
  height: auto;
  min-height: var(--dp-textarea-min-height);
  padding: var(--dp-space-3) var(--dp-space-4);
  line-height: var(--dp-leading-normal);
  resize: vertical;
}

.dp-input::placeholder,
.dp-textarea::placeholder {
  color: var(--dp-placeholder);
  opacity: 1;
}

.dp-input:focus,
.dp-textarea:focus,
.dp-select:focus {
  outline: none;
  border-color: var(--dp-blue-600);
  box-shadow: var(--dp-shadow-focus);
}

.dp-field--error .dp-input,
.dp-field--error .dp-textarea,
.dp-field--error .dp-select { border-color: var(--dp-critical-600); }

.dp-field--error .dp-field__hint { color: var(--dp-critical-600); }

/* ============================================================================
   6. CABEÇALHO
   ============================================================================ */

.dp-topbar {
  font-size: var(--dp-text-sm);
  color: var(--dp-text-secondary);
  background: var(--dp-bg-alt);
}

.dp-topbar__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dp-space-2) var(--dp-space-5);
  align-items: center;
  justify-content: flex-end;
  min-height: var(--dp-space-7);
  padding-block: var(--dp-space-2);
}

.dp-topbar__item {
  display: inline-flex;
  gap: var(--dp-space-2);
  align-items: center;
  color: var(--dp-text-secondary);
}

a.dp-topbar__item:hover { color: var(--dp-text-primary); text-decoration: none; }

.dp-header {
  position: relative;
  z-index: var(--dp-z-sticky);
  background: var(--dp-bg-page);
  border-bottom: var(--dp-border-width) solid transparent;
  transition: border-color var(--dp-dur-base) var(--dp-ease-out);
}

.dp-header--sticky { position: sticky; top: 0; }

/* Fio só depois que a página rola — sem moldura permanente sob o cabeçalho. */
.dp-header--scrolled { border-bottom-color: var(--dp-hairline); }

.dp-header__inner {
  display: flex;
  gap: var(--dp-space-4);
  align-items: center;
  justify-content: space-between;
  min-height: var(--dp-header-height);
}

/* ---- Marca --------------------------------------------------------------- */

.dp-branding { min-width: 0; }

.dp-branding__logo { margin: 0; }

.dp-branding__logo img { width: auto; max-height: var(--dp-touch-target); }

.dp-wordmark {
  display: inline-flex;
  flex-direction: column;
  gap: var(--dp-wordmark-gap);
  color: var(--dp-text-primary);
}

.dp-wordmark:hover { color: var(--dp-text-primary); text-decoration: none; }

.dp-wordmark__name {
  margin: 0;
  font-family: var(--dp-font-display);
  font-size: var(--dp-wordmark-name);
  font-weight: var(--dp-weight-bold);
  line-height: 1;
  letter-spacing: var(--dp-tracking-caps);
  text-transform: uppercase;
  color: inherit;
}

.dp-wordmark__descriptor {
  font-family: var(--dp-font-sans);
  font-size: var(--dp-wordmark-descriptor);
  font-weight: var(--dp-weight-medium);
  line-height: 1.2;
  letter-spacing: var(--dp-tracking-caps-tight);
  text-transform: uppercase;
  color: var(--dp-text-secondary);
}

/* ============================================================================
   7. NAVEGAÇÃO
   Mobile-first: drawer até 1023px, barra a partir de 1024px.
   O breakpoint está espelhado em assets/js/navigation.js.
   ============================================================================ */

.dp-nav-trigger {
  display: inline-flex;
  gap: var(--dp-space-2);
  align-items: center;
  padding: var(--dp-space-2) var(--dp-space-3);
  font-family: var(--dp-font-sans);
  font-size: var(--dp-text-sm);
  font-weight: var(--dp-weight-semibold);
  color: var(--dp-text-primary);
  cursor: pointer;
  border-radius: var(--dp-radius-sm);
}

.dp-nav-trigger:hover { background: var(--dp-graphite-50); }

.dp-nav-trigger__icon { display: inline-flex; }

/* Um ícone por estado, trocado por aria-expanded — sem classe extra. */
.dp-nav-trigger .dp-icon--close,
.dp-nav-trigger[aria-expanded="true"] .dp-icon--menu { display: none; }
.dp-nav-trigger[aria-expanded="true"] .dp-icon--close { display: block; }

.dp-nav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--dp-z-drawer);
  display: flex;
  flex-direction: column;
  gap: var(--dp-space-5);
  width: var(--dp-drawer-width);
  padding: var(--dp-space-9) var(--dp-gutter) var(--dp-space-6);
  overflow-y: auto;
  background: var(--dp-bg-page);
  box-shadow: var(--dp-shadow-lg);
  transform: translateX(100%);
  transition: transform var(--dp-dur-base) var(--dp-ease-out);
}

.dp-nav-open .dp-nav { transform: translateX(0); }

/*
 * O .dp-header é sticky com z-index próprio, o que cria um contexto de
 * empilhamento: o z-index do drawer fica confinado nele e não consegue
 * competir com o overlay, que é irmão do header. Sem isto o drawer abre ATRÁS
 * do scrim. Elevar o header inteiro enquanto o menu está aberto resolve na
 * raiz, em vez de ficar inflando o z-index do drawer.
 */
.dp-nav-open .dp-header { z-index: calc(var(--dp-z-drawer) + 1); }

/* Sem JS o drawer nunca abriria — então ele não é drawer. */
.dp-no-js .dp-nav {
  position: static;
  width: auto;
  padding: 0 0 var(--dp-space-5);
  overflow: visible;
  box-shadow: none;
  transform: none;
}

.dp-no-js .dp-nav-trigger { display: none; }

.dp-nav-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--dp-z-drawer) - 1);
  background: var(--dp-overlay-scrim);
}

.dp-nav-open { overflow: hidden; }

.dp-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--dp-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dp-nav__item { position: relative; }

.dp-nav__link {
  display: block;
  padding: var(--dp-space-3) 0;
  font-family: var(--dp-font-sans);
  font-size: var(--dp-text-md);
  font-weight: var(--dp-weight-medium);
  color: var(--dp-text-secondary);
}

.dp-nav__link:hover { color: var(--dp-text-primary); text-decoration: none; }

.dp-nav__item--current > .dp-nav__link {
  font-weight: var(--dp-weight-semibold);
  color: var(--dp-text-primary);
}

.dp-nav__toggle {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--dp-touch-target);
  height: var(--dp-touch-target);
  color: var(--dp-text-secondary);
  cursor: pointer;
  border-radius: var(--dp-radius-sm);
}

.dp-nav__toggle:hover { color: var(--dp-text-primary); background: var(--dp-graphite-50); }

.dp-nav__chevron { transition: transform var(--dp-dur-fast) var(--dp-ease-out); }

.dp-nav__toggle[aria-expanded="true"] .dp-nav__chevron { transform: rotate(180deg); }

.dp-nav__submenu {
  display: none;
  margin: 0 0 var(--dp-space-2);
  padding: 0 0 0 var(--dp-space-4);
  list-style: none;
  border-left: var(--dp-border-width) solid var(--dp-hairline);
}

.dp-nav__item--open > .dp-nav__submenu { display: block; }

/* Sem JS os submenus ficam sempre abertos, em vez de inalcançáveis. */
.dp-no-js .dp-nav__submenu { display: block; }
.dp-no-js .dp-nav__toggle { display: none; }

.dp-nav__submenu .dp-nav__link { font-size: var(--dp-text-base); }

.dp-nav__action { align-self: flex-start; }

@media (min-width: 1024px) {
  .dp-nav-trigger,
  .dp-nav-overlay { display: none; }

  .dp-nav {
    position: static;
    flex-direction: row;
    gap: var(--dp-space-1);
    align-items: center;
    width: auto;
    padding: 0;
    overflow: visible;
    background: none;
    box-shadow: none;
    transform: none;
  }

  .dp-nav__list { flex-direction: row; align-items: center; }

  .dp-nav__link {
    padding: var(--dp-space-2) var(--dp-space-3);
    font-size: var(--dp-text-sm);
  }

  /* Marcador do item ativo — fio azul de 2px, sem caixa. */
  .dp-nav__item--current > .dp-nav__link::after {
    content: "";
    position: absolute;
    right: var(--dp-space-3);
    bottom: 0;
    left: var(--dp-space-3);
    height: var(--dp-nav-marker);
    background: var(--dp-accent-strategic);
  }

  .dp-nav__item--has-children > .dp-nav__link { padding-right: var(--dp-space-6); }

  .dp-nav__toggle {
    top: 50%;
    width: var(--dp-space-6);
    height: var(--dp-space-6);
    transform: translateY(-50%);
  }

  .dp-nav__submenu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: var(--dp-z-sticky);
    min-width: var(--dp-submenu-width);
    margin: 0;
    padding: var(--dp-space-2);
    background: var(--dp-surface);
    border-left: 0;
    border-radius: var(--dp-radius-card);
    box-shadow: var(--dp-shadow-md);
  }

  .dp-nav__submenu .dp-nav__link { padding: var(--dp-space-2) var(--dp-space-3); }

  .dp-nav__action { margin-left: var(--dp-space-3); }

  .dp-nav-open { overflow: visible; }
}

/* ============================================================================
   8. RODAPÉ
   ============================================================================ */

.dp-footer {
  padding-block: var(--dp-space-10) var(--dp-space-7);
  color: var(--dp-text-on-dark-dim);
  background: var(--dp-surface-dark);
}

.dp-footer .dp-wordmark,
.dp-footer .dp-wordmark__name { color: var(--dp-text-on-dark); }

.dp-footer .dp-wordmark__descriptor { color: var(--dp-graphite-300); }

.dp-footer a { color: var(--dp-text-on-dark-dim); }
.dp-footer a:hover { color: var(--dp-white); }

.dp-footer__columns { display: grid; gap: var(--dp-space-8); }

.dp-footer__text {
  max-width: 42ch;
  margin-top: var(--dp-space-5);
  font-size: var(--dp-text-sm);
  line-height: var(--dp-leading-relaxed);
}

.dp-footer__label {
  margin: 0 0 var(--dp-space-4);
  font-family: var(--dp-font-sans);
  font-size: var(--dp-text-2xs);
  font-weight: var(--dp-weight-bold);
  letter-spacing: var(--dp-tracking-caps-tight);
  text-transform: uppercase;
  color: var(--dp-graphite-400);
}

.dp-footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--dp-space-3);
  margin: 0;
  padding: 0;
  font-size: var(--dp-text-sm);
  list-style: none;
}

.dp-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dp-space-3) var(--dp-space-6);
  justify-content: space-between;
  margin-top: var(--dp-space-8);
  padding-top: var(--dp-space-5);
  font-size: var(--dp-text-xs);
  color: var(--dp-graphite-400);
  border-top: var(--dp-border-width) solid var(--dp-hairline-dark);
}

.dp-footer__legal p { margin: 0 0 var(--dp-space-1); }

.dp-footer__oab { margin-left: var(--dp-space-2); }

.dp-footer__legal-menu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dp-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dp-social {
  display: flex;
  gap: var(--dp-space-2);
  margin: var(--dp-space-5) 0 0;
  padding: 0;
  list-style: none;
}

.dp-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--dp-space-7);
  height: var(--dp-space-7);
  color: var(--dp-graphite-300);
  border-radius: var(--dp-radius-sm);
}

.dp-social__link:hover { color: var(--dp-white); background: var(--dp-overlay-light); }

@media (min-width: 768px) {
  .dp-footer__columns {
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: var(--dp-space-8) var(--dp-space-7);
  }
}

/* ---- Botão flutuante de WhatsApp ---------------------------------------- */

/* Rótulo neutro por exigência do CED/OAB — o botão informa um canal, não
   convida à contratação. Camada abaixo do banner de consentimento. */
.dp-whatsapp {
  position: fixed;
  right: var(--dp-gutter);
  bottom: var(--dp-gutter);
  z-index: var(--dp-z-float);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--dp-whatsapp-size);
  height: var(--dp-whatsapp-size);
  color: var(--dp-graphite-900);
  background: var(--dp-accent-result);
  border-radius: var(--dp-radius-pill);
  box-shadow: var(--dp-shadow-md);
  transition: transform var(--dp-dur-fast) var(--dp-ease-out),
              background var(--dp-dur-fast) var(--dp-ease-out);
}

.dp-whatsapp:hover { color: var(--dp-graphite-900); background: var(--dp-green-400); }
.dp-whatsapp:active { transform: translateY(1px); }

/* ============================================================================
   9. POSTS, ARQUIVO E BUSCA
   ============================================================================ */

.dp-breadcrumbs {
  margin-bottom: var(--dp-space-5);
  font-size: var(--dp-text-xs);
  color: var(--dp-text-secondary);
}

.dp-breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dp-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dp-breadcrumbs__list li + li::before {
  content: "/";
  margin-right: var(--dp-space-2);
  color: var(--dp-graphite-300);
}

.dp-archive__header { margin-bottom: var(--dp-space-8); }

.dp-posts { display: flex; flex-direction: column; }

.dp-post { padding-block: var(--dp-space-6); }

.dp-post__title { margin: 0 0 var(--dp-space-2); font-size: var(--dp-text-xl); }

.dp-post__excerpt {
  max-width: 68ch;
  margin-block: var(--dp-space-4);
  color: var(--dp-text-secondary);
}

.dp-post__excerpt p:last-child { margin-bottom: 0; }

.dp-thumb {
  margin-bottom: var(--dp-space-5);
  overflow: hidden;
  border-radius: var(--dp-radius-card);
}

.dp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dp-space-2);
  align-items: center;
  margin: 0;
}

.dp-meta__sep { color: var(--dp-graphite-300); }

/* ---- Paginação do core --------------------------------------------------- */

.navigation.pagination { margin-top: var(--dp-space-8); }

.navigation.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dp-space-2);
  align-items: center;
}

.navigation.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--dp-space-7);
  height: var(--dp-space-7);
  padding-inline: var(--dp-space-3);
  font-size: var(--dp-text-sm);
  font-weight: var(--dp-weight-medium);
  color: var(--dp-text-secondary);
  border-radius: var(--dp-radius-sm);
}

.navigation.pagination a.page-numbers:hover {
  color: var(--dp-text-primary);
  background: var(--dp-graphite-50);
  text-decoration: none;
}

.navigation.pagination .page-numbers.current {
  font-weight: var(--dp-weight-semibold);
  color: var(--dp-white);
  background: var(--dp-brand);
}

/* ---- Busca --------------------------------------------------------------- */

.dp-search__row { display: flex; flex-wrap: wrap; gap: var(--dp-space-3); }

.dp-search__field { flex: 1 1 240px; }

.dp-search__submit { flex: 0 0 auto; height: var(--dp-field-height); }

.dp-404__search { margin-block: var(--dp-space-7); }
.dp-404__heading { margin-top: var(--dp-space-9); font-size: var(--dp-text-lg); }
.dp-404__home { margin-top: var(--dp-space-8); }

/* ============================================================================
   10. ÍCONES
   ============================================================================ */

.dp-icon { flex: 0 0 auto; }

/* Todos os ícones do tema são outline, inclusive o do botão de WhatsApp: o
   design system pede pictograma próprio e sem marca de terceiro. Quem nomeia o
   canal é o rótulo acessível do botão, não o desenho. */
.dp-icon--whatsapp { stroke-width: 1.9; }

/* ============================================================================
   11. LAYOUT DO BLOG (Customizer)
   O número de colunas da grade sai de inc/customizer/css-vars.php, porque é
   configurável — a regra abaixo só define o comportamento base.
   ============================================================================ */

.dp-posts--grade {
  display: grid;
  gap: var(--dp-space-5);
}

/*
 * Default de colunas AQUI, e nao so no CSS inline do Customizer.
 *
 * A faixa de ultimas publicacoes da home usa --grade de forma fixa, enquanto o
 * inline so e emitido quando o ARQUIVO do blog esta em grade. Sem este default,
 * a home colapsava para coluna unica sempre que o arquivo estava em lista — uma
 * configuracao governando silenciosamente a outra. O inline continua vencendo
 * quando existe, por vir depois na cascata.
 */
@media (min-width: 768px) {
  .dp-posts--grade {
    grid-template-columns: repeat(
      auto-fill,
      minmax(max(var(--dp-card-min), 100% / 3 - var(--dp-space-5)), 1fr)
    );
  }
}

/* Em grade o card volta a ser card: preenchimento chapado, sem o fio superior
   da lista editorial. Continua sem borda e sem sombra. */
.dp-posts--grade .dp-post {
  padding: var(--dp-space-6);
  border-top: 0;
}

.dp-posts--grade .dp-post__title { font-size: var(--dp-text-lg); }

.dp-posts--grade .dp-post__excerpt { max-width: none; }

/* ---- Mosaico ------------------------------------------------------------
   Multicoluna do CSS, nao um script de masonry: a altura de cada card e a do
   proprio conteudo, o navegador distribui, e nao ha JS nem reflow depois do
   carregamento das imagens. O numero de colunas sai do Customizer.

   `column-count` so entra a partir de 768px; abaixo disso e coluna unica, que
   e o comportamento herdado de .dp-posts. */
.dp-posts--mosaico {
  /*
   * `display: block` e obrigatorio aqui.
   *
   * .dp-posts e um flex container, e multicoluna NAO se aplica a flex: o
   * `column-count` fica no computed style, sem efeito nenhum, e os cards
   * empilham numa coluna so — parecendo que a opcao nao funciona.
   */
  display: block;
  /*
   * `column-width` + `column-count` juntos: a contagem vira TETO e a largura,
   * piso. Com a barra lateral ligada o main cai para ~710px, e tres colunas
   * fixas dariam 220px cada — o navegador cede uma coluna sozinho.
   */
  column-width: var(--dp-card-min);
  column-count: 3;
  column-gap: var(--dp-space-5);
}

.dp-posts--mosaico .dp-post {
  /* Sem isto o navegador parte o card ao meio na virada de coluna. */
  break-inside: avoid;
  padding: var(--dp-space-6);
  margin-bottom: var(--dp-space-5);
  border-top: 0;
}

.dp-posts--mosaico .dp-post__title { font-size: var(--dp-text-lg); }

.dp-posts--mosaico .dp-post__excerpt { max-width: none; }

/* A imagem do mosaico nao tem proporcao fixa: e dela que vem o escalonamento. */
.dp-posts--mosaico .dp-thumb img {
  width: 100%;
  height: auto;
}

/* ============================================================================
   12. LAYOUT DE CONTEÚDO E BARRA LATERAL
   ============================================================================ */

.dp-layout { display: grid; gap: var(--dp-space-9); }

@media (min-width: 1024px) {
  .dp-layout--sidebar {
    grid-template-columns: minmax(0, 1fr) var(--dp-sidebar-width);
    gap: var(--dp-space-9) var(--dp-space-8);
    align-items: start;
  }
}

.dp-layout__main { min-width: 0; }

.dp-layout__aside {
  display: flex;
  flex-direction: column;
  gap: var(--dp-space-7);
}

.dp-widget__title {
  margin: 0 0 var(--dp-space-4);
  font-family: var(--dp-font-sans);
  font-size: var(--dp-text-2xs);
  font-weight: var(--dp-weight-bold);
  letter-spacing: var(--dp-tracking-caps-tight);
  text-transform: uppercase;
  color: var(--dp-text-secondary);
}

.dp-widget ul {
  display: flex;
  flex-direction: column;
  gap: var(--dp-space-3);
  margin: 0;
  padding: 0;
  font-size: var(--dp-text-sm);
  list-style: none;
}

.dp-widget a { color: var(--dp-text-primary); }
.dp-widget a:hover { color: var(--dp-link); }

.dp-empty { max-width: var(--dp-container-sm); }
.dp-empty__search { margin-top: var(--dp-space-6); }
.dp-archive__search { margin-top: var(--dp-space-6); max-width: var(--dp-container-sm); }

/* ---- Termos (categorias e temas) ---------------------------------------- */

.dp-terms__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dp-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ============================================================================
   13. PROSA — conteúdo editorial
   ESCOPADO em .entry-content / .dp-prose, NUNCA em seletor de elemento global.
   É isto que impede o CSS do tema de vazar sobre o conteúdo do Elementor.
   ============================================================================ */

.dp-prose {
  max-width: 68ch;
  font-size: var(--dp-text-md);
  line-height: var(--dp-leading-relaxed);
}

.dp-prose > * + * { margin-top: var(--dp-space-5); }

.dp-prose h2,
.dp-prose h3,
.dp-prose h4,
.dp-prose h5,
.dp-prose h6 { margin-top: var(--dp-space-8); }

.dp-prose h2 { font-size: var(--dp-text-xl); }
.dp-prose h3 { font-size: var(--dp-text-lg); }
.dp-prose h4 { font-size: var(--dp-text-md); }

.dp-prose ul,
.dp-prose ol { padding-left: var(--dp-space-5); }

.dp-prose li + li { margin-top: var(--dp-space-2); }

.dp-prose a { text-decoration: underline; text-underline-offset: 0.18em; }

/* Citação editorial: fio à esquerda, sem aspas decorativas nem caixa. */
.dp-prose blockquote {
  margin-inline: 0;
  padding-left: var(--dp-space-5);
  font-size: var(--dp-text-lg);
  line-height: var(--dp-leading-snug);
  color: var(--dp-text-secondary);
  border-left: var(--dp-nav-marker) solid var(--dp-accent-strategic);
}

.dp-prose blockquote cite {
  display: block;
  margin-top: var(--dp-space-3);
  font-size: var(--dp-text-sm);
  font-style: normal;
  color: var(--dp-text-secondary);
}

.dp-prose figure { margin-inline: 0; }

.dp-prose img { border-radius: var(--dp-radius-card); }

.dp-prose pre {
  padding: var(--dp-space-5);
  overflow-x: auto;
  font-size: var(--dp-text-sm);
  background: var(--dp-surface-alt);
  border-radius: var(--dp-radius-card);
}

.dp-prose code {
  padding: 2px 5px;
  background: var(--dp-surface-alt);
  border-radius: var(--dp-radius-xs);
}

.dp-prose pre code { padding: 0; background: none; }

/* Tabela rola dentro do próprio contêiner, sem empurrar a página. */
.dp-prose table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  font-size: var(--dp-text-sm);
}

.dp-prose th,
.dp-prose td {
  padding: var(--dp-space-3);
  text-align: left;
  border-bottom: var(--dp-border-width) solid var(--dp-hairline);
}

.dp-prose th { font-weight: var(--dp-weight-semibold); }

/* ---- Classes de conteúdo geradas pelo WordPress ------------------------- */

.dp-prose .alignleft {
  float: left;
  margin: var(--dp-space-1) var(--dp-space-5) var(--dp-space-4) 0;
}

.dp-prose .alignright {
  float: right;
  margin: var(--dp-space-1) 0 var(--dp-space-4) var(--dp-space-5);
}

.dp-prose .aligncenter {
  display: block;
  margin-inline: auto;
}

.dp-prose .alignwide { max-width: var(--dp-container-lg); }
.dp-prose .alignfull { max-width: none; }

.dp-prose .wp-caption { max-width: 100%; }

.dp-prose .wp-caption-text,
.dp-prose figcaption,
.dp-prose .gallery-caption {
  margin-top: var(--dp-space-3);
  font-size: var(--dp-text-sm);
  color: var(--dp-text-secondary);
}

/* Destaque de post fixado e de comentário do autor do post. */
.dp-post.sticky { position: relative; }

.dp-post.sticky::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: var(--dp-space-6);
  height: var(--dp-nav-marker);
  background: var(--dp-accent-strategic);
}

/* Classes emitidas pelo wp_list_comments(), nao pelo tema: o <li> recebe
   .bypostauthor e o filho e um <article class="comment-body">. */
.bypostauthor > .comment-body {
  padding-left: var(--dp-space-4);
  border-left: var(--dp-nav-marker) solid var(--dp-accent-strategic);
}

/* ---- Publicação individual ---------------------------------------------- */

.dp-single__header { margin-bottom: var(--dp-space-7); }

.dp-single__title {
  margin: var(--dp-space-4) 0 var(--dp-space-4);
  font-size: var(--dp-text-2xl);
}

.dp-single__thumb { margin: 0 0 var(--dp-space-8); }

.dp-single__thumb img { border-radius: var(--dp-radius-card); }

.dp-single__footer {
  margin-top: var(--dp-space-8);
  padding-top: var(--dp-space-5);
  border-top: var(--dp-border-width) solid var(--dp-hairline);
}

.dp-pagelinks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dp-space-3);
  align-items: center;
  margin-top: var(--dp-space-7);
  padding-top: var(--dp-space-5);
  border-top: var(--dp-border-width) solid var(--dp-hairline);
}

.dp-pagelinks__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--dp-space-7);
  height: var(--dp-space-7);
  padding-inline: var(--dp-space-3);
  font-size: var(--dp-text-sm);
  border-radius: var(--dp-radius-sm);
}

.dp-pagelinks a .dp-pagelinks__item { color: var(--dp-text-secondary); }
.dp-pagelinks a:hover .dp-pagelinks__item { background: var(--dp-graphite-50); }

/* ---- Navegação entre publicações ---------------------------------------- */

.dp-postnav { margin-top: var(--dp-space-9); }

.dp-postnav .nav-links {
  display: grid;
  gap: var(--dp-space-5);
}

@media (min-width: 768px) {
  .dp-postnav .nav-links { grid-template-columns: 1fr 1fr; }
  .dp-postnav .nav-next { text-align: right; }
}

.dp-postnav a {
  display: block;
  padding: var(--dp-space-5);
  color: var(--dp-text-primary);
  background: var(--dp-surface-alt);
  border-radius: var(--dp-radius-card);
}

.dp-postnav a:hover { background: var(--dp-graphite-100); text-decoration: none; }

.dp-postnav__title {
  display: block;
  margin-top: var(--dp-space-2);
  font-family: var(--dp-font-display);
  font-size: var(--dp-text-md);
  font-weight: var(--dp-weight-semibold);
  line-height: var(--dp-leading-snug);
}

/* ============================================================================
   14. COMENTÁRIOS
   ============================================================================ */

.dp-comments {
  margin-top: var(--dp-space-10);
  padding-top: var(--dp-space-7);
  border-top: var(--dp-border-width) solid var(--dp-hairline);
}

.dp-comments__title { font-size: var(--dp-text-lg); }

.dp-comments__list,
.dp-comments__list .children {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dp-comments__list > li { padding-block: var(--dp-space-6); }
.dp-comments__list > li + li { border-top: var(--dp-border-width) solid var(--dp-hairline); }

/* Respostas recuam, mas param de recuar cedo — em telas estreitas um
   encadeamento profundo comprime o texto até virar coluna de uma palavra. */
.dp-comments__list .children {
  margin-top: var(--dp-space-5);
  padding-left: var(--dp-space-4);
  border-left: var(--dp-border-width) solid var(--dp-hairline);
}

@media (min-width: 768px) {
  .dp-comments__list .children { padding-left: var(--dp-space-7); }
}

.dp-comments__list .comment-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dp-space-3);
  align-items: center;
  margin-bottom: var(--dp-space-3);
}

.dp-comments__list .comment-author { display: inline-flex; gap: var(--dp-space-3); align-items: center; }
.dp-comments__list .comment-author img { border-radius: var(--dp-radius-pill); }
.dp-comments__list .fn { font-style: normal; font-weight: var(--dp-weight-semibold); }
.dp-comments__list .says { display: none; }

.dp-comments__list .comment-metadata,
.dp-comments__list .reply {
  font-size: var(--dp-text-xs);
  color: var(--dp-text-secondary);
}

.dp-comments__list .comment-content { font-size: var(--dp-text-base); }
.dp-comments__list .comment-content > * + * { margin-top: var(--dp-space-4); }

.dp-comments__list .comment-awaiting-moderation {
  display: block;
  margin-top: var(--dp-space-3);
  font-size: var(--dp-text-sm);
  color: var(--dp-warning-600);
}

.dp-comments__closed {
  margin-top: var(--dp-space-6);
  font-size: var(--dp-text-sm);
  color: var(--dp-text-secondary);
}

.comment-navigation,
.comments-pagination { margin-block: var(--dp-space-5); font-size: var(--dp-text-sm); }

/* ---- Formulário ---------------------------------------------------------- */

.dp-comment-form { margin-top: var(--dp-space-7); }

.dp-comment-form .dp-field { margin-bottom: var(--dp-space-5); }

.dp-comment-form__notes {
  margin-bottom: var(--dp-space-5);
  font-size: var(--dp-text-sm);
  color: var(--dp-text-secondary);
}

.dp-field--inline {
  flex-direction: row;
  gap: var(--dp-space-3);
  align-items: flex-start;
}

.dp-field--inline label {
  font-size: var(--dp-text-sm);
  color: var(--dp-text-secondary);
}

.dp-field--inline input[type="checkbox"] {
  width: var(--dp-space-4);
  height: var(--dp-space-4);
  margin-top: 3px;
  accent-color: var(--dp-accent-strategic);
}

.comment-reply-title { font-size: var(--dp-text-lg); }
.comment-reply-title small { margin-left: var(--dp-space-3); font-size: var(--dp-text-sm); font-weight: var(--dp-weight-regular); }

/* ============================================================================
   15. ABERTURA E BLOCOS INSTITUCIONAIS
   ============================================================================ */

.dp-hero { padding-block: var(--dp-space-9) var(--dp-section-y); }

.dp-hero__grid {
  display: grid;
  gap: var(--dp-space-8);
  align-items: center;
}

@media (min-width: 1024px) {
  .dp-hero__grid { grid-template-columns: 1.1fr 0.9fr; gap: var(--dp-space-9); }
  .dp-hero__grid--solo { grid-template-columns: minmax(0, 720px); }
}

.dp-hero__title { margin-block: var(--dp-space-5) var(--dp-space-5); }

.dp-hero__lead { max-width: 46ch; margin-bottom: var(--dp-space-7); }

.dp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dp-space-3);
}

.dp-hero__media { margin: 0; }

.dp-hero__image {
  width: 100%;
  border-radius: var(--dp-radius-card);
}

/* ---- Cabeçalho de bloco -------------------------------------------------- */

.dp-block__head { max-width: 44ch; margin-bottom: var(--dp-space-8); }

.dp-block__head h2 { margin-top: var(--dp-space-4); font-size: var(--dp-text-2xl); }

.dp-block__head--row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dp-space-5);
  align-items: flex-end;
  justify-content: space-between;
  max-width: none;
}

/* ---- Pilares ------------------------------------------------------------- */

.dp-pillars { display: grid; gap: var(--dp-space-8); }

/* Duas colunas no meio-termo e quatro no desktop largo.
   Era `repeat(3, ...)` fixo, escrito quando os pilares eram tres. Com o quarto
   (defesa fiscal) isso deixaria um orfao sozinho na segunda linha; 2x2 e depois
   4x1 fecha em qualquer largura. */
@media (min-width: 768px) {
  .dp-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dp-space-7) 0; }

  /* Separação por fio, não por caixa — regra "sem molduras" do brand book. */
  .dp-pillar + .dp-pillar {
    padding-left: var(--dp-space-6);
    border-left: var(--dp-border-width) solid var(--dp-hairline);
  }

  .dp-pillar { padding-right: var(--dp-space-6); }

  /* Em 2 colunas, o item que abre linha nao leva fio a esquerda. */
  .dp-pillar:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }
}

@media (min-width: 1200px) {
  .dp-pillars { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }

  /* Volta a valer para todos menos o primeiro: linha unica. */
  .dp-pillar:nth-child(odd) {
    padding-left: var(--dp-space-6);
    border-left: var(--dp-border-width) solid var(--dp-hairline);
  }

  .dp-pillar:first-child {
    padding-left: 0;
    border-left: 0;
  }
}

.dp-pillar__n {
  margin: 0;
  font-size: var(--dp-text-lg);
  font-weight: var(--dp-weight-bold);
  letter-spacing: var(--dp-tracking-wide);
}

.dp-pillar__name { margin: var(--dp-space-3) 0; font-size: var(--dp-text-2xl); }

.dp-pillar__desc {
  margin: 0 0 var(--dp-space-5);
  color: var(--dp-text-secondary);
}

.dp-pillar__list {
  display: flex;
  flex-direction: column;
  gap: var(--dp-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dp-pillar__list li {
  display: flex;
  gap: var(--dp-space-3);
  align-items: flex-start;
  font-size: var(--dp-text-sm);
  color: var(--dp-graphite-700);
}

/* Verde marca resultado e oportunidade — aqui o check de uma frente de atuação.
   Tom escurecido porque é elemento pequeno sobre fundo claro. */
.dp-pillar__list .dp-icon {
  margin-top: 3px;
  color: var(--dp-accent-result-ink);
}

/* ---- Faixa de dados ------------------------------------------------------ */

.dp-facts { padding-block: var(--dp-space-9); }

.dp-facts__grid {
  display: grid;
  gap: var(--dp-space-7);
}

@media (min-width: 640px) {
  .dp-facts__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.dp-facts .dp-stat__label { max-width: 26ch; }

/* ---- Públicos ------------------------------------------------------------ */

.dp-audiences { display: grid; gap: var(--dp-space-8); }

@media (min-width: 1024px) {
  .dp-audiences { grid-template-columns: 0.8fr 1.2fr; gap: var(--dp-space-9); }
  .dp-audiences .dp-block__head { margin-bottom: 0; }
}

.dp-audience {
  display: grid;
  gap: var(--dp-space-2);
  padding-block: var(--dp-space-5);
  border-top: var(--dp-border-width) solid var(--dp-hairline);
}

@media (min-width: 768px) {
  .dp-audience { grid-template-columns: 180px 1fr; gap: var(--dp-space-6); }
}

.dp-audience__name { margin: 0; font-size: var(--dp-text-xl); }
.dp-audience__desc { margin: 0; color: var(--dp-text-secondary); }

/* ---- Método -------------------------------------------------------------- */

.dp-steps {
  display: grid;
  gap: var(--dp-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .dp-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.dp-step__n {
  margin: 0 0 var(--dp-space-4);
  font-size: var(--dp-text-sm);
  font-weight: var(--dp-weight-bold);
}

/* Fio horizontal marcando a etapa — mesma lógica do fio dos pilares. */
.dp-step__n::after {
  content: "";
  display: block;
  margin-top: var(--dp-space-4);
  height: var(--dp-border-width);
  background: var(--dp-graphite-300);
}

.dp-step__title { margin: 0 0 var(--dp-space-2); font-size: var(--dp-text-lg); }

.dp-step__desc {
  margin: 0;
  font-size: var(--dp-text-sm);
  color: var(--dp-text-secondary);
}

/* ---- Bloco de contato ---------------------------------------------------- */

.dp-contact {
  display: grid;
  gap: var(--dp-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .dp-contact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .dp-contact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.dp-contact__item {
  display: flex;
  gap: var(--dp-space-4);
  align-items: flex-start;
}

.dp-contact__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--dp-space-7);
  height: var(--dp-space-7);
  color: var(--dp-accent-strategic-dark);
  background: var(--dp-overlay-light);
  border-radius: var(--dp-radius-sm);
}

.dp-contact__body { display: flex; flex-direction: column; gap: var(--dp-space-1); }

.dp-contact__label {
  font-family: var(--dp-font-sans);
  font-size: var(--dp-text-2xs);
  font-weight: var(--dp-weight-bold);
  letter-spacing: var(--dp-tracking-caps-tight);
  text-transform: uppercase;
  color: var(--dp-graphite-400);
}

.dp-contact__value { color: var(--dp-text-on-dark); font-size: var(--dp-text-base); }
a.dp-contact__value:hover { color: var(--dp-accent-result); }

/* ---- Cabeçalho de página interna ---------------------------------------- */

.dp-pagehead { margin-bottom: var(--dp-space-8); }

.dp-pagehead__title { margin-bottom: var(--dp-space-4); font-size: var(--dp-text-2xl); }

/* Página em largura total: o Elementor manda no miolo, o tema não interfere. */
.dp-page--full > .entry-content { max-width: none; }

/* ============================================================================
   16. TIPOS DE CONTEÚDO PRÓPRIOS
   ============================================================================ */

/* ---- Áreas de atuação ---------------------------------------------------- */

.dp-areas {
  display: grid;
  gap: var(--dp-space-5);
}

@media (min-width: 768px) {
  .dp-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .dp-areas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.dp-area-item {
  display: flex;
  flex-direction: column;
  gap: var(--dp-space-3);
  padding: var(--dp-space-6);
}

.dp-area-item__title { margin: 0; font-size: var(--dp-text-xl); }

.dp-area-item__desc {
  margin: 0;
  color: var(--dp-text-secondary);
}

/* O botão desce para a base do card, alinhando os botões entre irmãos de
   alturas diferentes. */
.dp-area-item .dp-btn {
  align-self: flex-start;
  margin-top: auto;
}

.dp-area-item .dp-thumb { margin-bottom: var(--dp-space-2); }

/* ---- Publicações --------------------------------------------------------- */

.dp-archive__filtros { margin-top: var(--dp-space-5); }

.dp-archive__voltar {
  margin-top: var(--dp-space-4);
  font-size: var(--dp-text-sm);
}

/* Os termos aparecem entre o resumo e o botão; sem a margem eles encostam. */
.dp-post .dp-terms { margin-block: var(--dp-space-4); }

.dp-single__header .dp-terms { margin-bottom: var(--dp-space-4); }