@charset "UTF-8";
/* ==========================================================================
   Dianagro — Sistema de design "Agro Modular"
   70% Bento/modular + 30% construtivismo editorial contido.
   Especificação: design.md.  Identidade: azul petróleo + off-white quente.

   ÍNDICE
     1.  Fontes
     2.  Tokens
     3.  Reset e base
     4.  Tipografia
     5.  Layout
     6.  Utilitários
     7.  Ícones
     8.  Botões e links de ação
     9.  Cabeçalho e navegação
     10. Hero
     11. Faixa de métricas
     12. Categorias (Bento)
     13. Marcas
     14. Blocos editoriais
     15. Cartões e Bento genérico
     16. Faixa de valor
     17. Contato
     18. Rodapé
     19. Formulários e busca
     20. Mapa de atendimento
     21. Estados (vazio / carregando / erro)
     22. Página 404
     23. Downloads
     24. Movimento
     25. Impressão
   ========================================================================== */

/* ==========================================================================
   1. FONTES
   Auto-hospedadas: nenhuma requisição a terceiros, funciona em regiões de
   pouco sinal.

   PENDÊNCIA CONHECIDA — arquivos ausentes
   Os dois arquivos abaixo ainda NÃO estão em assets/fonts/:

     assets/fonts/inter-variable.woff2     (Inter var, 100–900, eixo wght)
     assets/fonts/manrope-variable.woff2   (Manrope var, 200–800, eixo wght)

   São fontes livres (SIL Open Font License 1.1) e o @font-face já está
   pronto: basta depositar os dois .woff2 na pasta para o site passar a usar
   Inter no texto e Manrope nos títulos, sem tocar em mais nada. Enquanto
   eles não existem, o navegador cai na pilha de sistema definida em
   --font-sans / --font-display — nenhuma requisição falha e nenhum texto
   fica invisível, apenas a tipografia fica menos própria.
   ========================================================================== */

@font-face {
  font-family: "Inter var";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-variable.woff2") format("woff2-variations");
}

@font-face {
  font-family: "Manrope var";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope-variable.woff2") format("woff2-variations");
}

/* ==========================================================================
   2. TOKENS
   Fonte única de verdade. Alinhados ao que o catálogo publica
   (src/design_tokens.py) para que os dois sites leiam como uma só marca.
   ========================================================================== */

:root {
  /* --- Marca --- */
  --brand-900: #003B55;
  --brand-800: #014665;
  --brand-700: #075C7A;
  --brand-600: #147495;
  --brand-500: #2789AA;
  --brand-100: #E3EFF4;
  --brand-300: #8FC4D8;
  --brand-50:  #F1F7F9;

  /* --- Tinta --- */
  --ink-900: #102A38;
  --ink-700: #344C58;
  --ink-500: #667982;

  /* --- Superfícies --- */
  --surface: #FFFFFF;
  --surface-warm: #F5F3EC;
  --surface-soft: #F6F8F8;
  --border: #DCE4E6;
  --border-strong: #C3D2D7;

  /* --- Estado --- */
  --success: #17864B;
  --success-bg: #E8F4ED;
  --warning: #C88A19;
  --error: #B83B3B;
  --error-bg: #FBECEC;

  /* --- Tipografia ---
     Pilha de sistema afinada para que, mesmo sem os .woff2, o display e o
     texto não venham do mesmo desenho: em Windows o display resolve em
     "Segoe UI Variable Display" e o texto em "Segoe UI Variable Text". */
  --font-sans: "Inter var", "Inter", "Segoe UI Variable Text", "Segoe UI",
    system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial,
    sans-serif;
  --font-display: "Manrope var", "Manrope", "Inter var", "Inter",
    "Segoe UI Variable Display", "Segoe UI Semibold", "Segoe UI", system-ui,
    -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  --fs-display-xl: clamp(1.875rem, 3.6vw, 3.25rem);  /* 30 → 52 */
  --fs-display:    clamp(2.25rem, 4.6vw, 3.5rem);    /* 36 → 56 */
  --fs-h1:         clamp(1.875rem, 3.4vw, 3rem);     /* 30 → 48 */
  --fs-h2:         clamp(1.625rem, 2.5vw, 2.25rem);  /* 26 → 36 */
  --fs-h3:         clamp(1.25rem, 1.7vw, 1.625rem);  /* 20 → 26 */
  --fs-body-l:     1.125rem;
  --fs-body:       1rem;
  --fs-body-s:     0.875rem;
  --fs-label:      0.8125rem;

  --lh-tight: 1.02;
  --lh-snug: 1.1;
  --lh-base: 1.55;

  --ls-display: -0.035em;
  --ls-heading: -0.02em;
  --ls-label: 0.16em;

  /* --- Espaçamento (escala 4/8/12/16/24/32/48/64/96/128) --- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* --- Layout --- */
  --container: 1440px;
  --gutter: 2rem;
  --header-h: 76px;
  --section-y: clamp(3.5rem, 7vw, 6.5rem);

  /* --- Raio --- */
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 20px;
  --r-arch: 110px;
  --r-pill: 999px;

  /* --- Sombra (contida: preferimos borda + contraste de superfície) --- */
  --shadow-card: 0 8px 28px rgba(0, 48, 70, 0.04);
  --shadow-raised: 0 14px 40px rgba(0, 48, 70, 0.08);

  /* --- Movimento --- */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-micro: 140ms;
  --t-hover: 220ms;
  --t-reveal: 400ms;

  /* --- Foco --- */
  --focus-ring: 0 0 0 3px rgba(39, 137, 170, 0.45);
}

/* ==========================================================================
   3. RESET E BASE
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Compensa o cabeçalho fixo ao pular para uma âncora. */
  scroll-padding-top: calc(var(--header-h) + var(--sp-4));
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--ink-700);
  background-color: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg,
picture,
video {
  max-width: 100%;
}

img {
  height: auto;
}

/* Nunca mostrar ícone de imagem quebrada: placeholder neutro da marca. */
img.dg-img-fallback,
img:not([src]) {
  background-color: var(--surface-soft);
}

/* Âncoras são, na maioria, componentes inteiros (cartões, botões, blocos) —
   por isso o sublinhado fica restrito a links dentro de texto corrido.
   Cuidado: um seletor amplo como `li a` venceria por especificidade o
   `.dg-footer a` e pintaria o rodapé de azul escuro sobre petróleo. */
a {
  color: inherit;
  text-decoration: none;
}

p a,
.dg-prose a {
  color: var(--brand-700);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

p a:hover,
.dg-prose a:hover {
  color: var(--brand-800);
}

/* Alvo de toque mínimo de 44×44px (WCAG 2.2 — 2.5.8). */
button,
[role="button"],
input[type="submit"] {
  font: inherit;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

::selection {
  background: var(--brand-100);
  color: var(--brand-900);
}

/* ==========================================================================
   4. TIPOGRAFIA
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-display);
  color: var(--brand-800);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-body-l); }

p {
  margin: 0 0 var(--sp-4);
}

p:last-child {
  margin-bottom: 0;
}

strong,
b {
  font-weight: 650;
  color: var(--ink-900);
}

small {
  font-size: var(--fs-body-s);
}

/* Rótulo editorial em caixa alta — usar com parcimônia (design.md §4). */
.dg-eyebrow {
  display: block;
  margin: 0 0 var(--sp-3);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--brand-600);
}

.dg-eyebrow--on-dark {
  color: var(--brand-500);
}

.dg-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--brand-800);
  margin: 0 0 var(--sp-6);
}

.dg-display--xl {
  font-size: var(--fs-display-xl);
}

.dg-lead {
  font-size: var(--fs-body-l);
  line-height: var(--lh-base);
  color: var(--ink-700);
  max-width: 58ch;
}

.dg-accent {
  color: var(--brand-600);
}

/* Número grande construtivista (design.md §16). */
.dg-bignum {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--brand-800);
}

/* ==========================================================================
   5. LAYOUT
   ========================================================================== */

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

.dg-container--narrow {
  max-width: 960px;
}

.dg-container--prose {
  max-width: 720px;
}

.dg-section {
  padding-block: var(--section-y);
}

.dg-section--warm {
  background-color: var(--surface-warm);
}

.dg-section--soft {
  background-color: var(--surface-soft);
}

.dg-section--tight {
  padding-block: clamp(2rem, 4vw, 3.5rem);
}

.dg-section__head {
  max-width: 62ch;
  margin-bottom: var(--sp-12);
}

.dg-section__head--center {
  margin-inline: auto;
  text-align: center;
}

/* Grade de 12 colunas — base do sistema Bento. */
.dg-grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

/* ==========================================================================
   6. UTILITÁRIOS
   ========================================================================== */

.dg-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.dg-skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: 200;
  padding: var(--sp-3) var(--sp-6);
  background: var(--brand-800);
  color: #fff;
  border-radius: var(--r-md);
  font-weight: 650;
  text-decoration: none;
  transition: top var(--t-micro) var(--ease);
}

.dg-skip-link:focus {
  top: var(--sp-4);
  color: #fff;
}

/* Régua fina: "LINE" da gramática de marca (design.md §2). */
.dg-rule {
  height: 1px;
  border: 0;
  background: var(--border);
  margin-block: var(--sp-8);
}

.dg-rule--brand {
  background: var(--brand-800);
  height: 2px;
  width: 64px;
  margin: 0 0 var(--sp-6);
}

.dg-stack > * + * {
  margin-top: var(--sp-4);
}

.dg-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
}

.dg-text-center {
  text-align: center;
}

/* ==========================================================================
   7. ÍCONES
   Sprite inline (assets/icons/dianagro-sprite.svg), herdando currentColor.
   ========================================================================== */

.dg-icon {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  fill: currentColor;
  vertical-align: -0.125em;
}

.dg-icon--sm { font-size: 0.875rem; }
.dg-icon--lg { font-size: 1.5rem; }
.dg-icon--xl { font-size: 2rem; }

/* ==========================================================================
   8. BOTÕES E LINKS DE AÇÃO
   ========================================================================== */

.dg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: var(--sp-3) var(--sp-6);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 650;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-hover) var(--ease),
    border-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease),
    transform var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease);
}

.dg-btn:hover {
  transform: translateY(-2px);
}

.dg-btn:active {
  transform: translateY(0);
}

.dg-btn--primary {
  background-color: var(--brand-800);
  border-color: var(--brand-800);
  color: #fff;
}

.dg-btn--primary:hover {
  background-color: var(--brand-700);
  border-color: var(--brand-700);
  color: #fff;
  box-shadow: var(--shadow-raised);
}

.dg-btn--outline {
  background-color: transparent;
  border-color: var(--brand-800);
  color: var(--brand-800);
}

.dg-btn--outline:hover {
  background-color: var(--brand-800);
  color: #fff;
}

.dg-btn--ghost {
  background-color: transparent;
  border-color: var(--border-strong);
  color: var(--ink-900);
}

.dg-btn--ghost:hover {
  border-color: var(--brand-600);
  color: var(--brand-700);
  background-color: var(--brand-50);
}

.dg-btn--on-dark {
  background-color: #fff;
  border-color: #fff;
  color: var(--brand-800);
}

.dg-btn--on-dark:hover {
  background-color: var(--brand-100);
  border-color: var(--brand-100);
  color: var(--brand-900);
}

.dg-btn--lg {
  min-height: 54px;
  padding: var(--sp-4) var(--sp-8);
  font-size: var(--fs-body-l);
}

.dg-btn--block {
  width: 100%;
}

.dg-btn[disabled],
.dg-btn[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}

/* Link com seta que desloca no hover (design.md §9). */
.dg-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  font-weight: 650;
  color: var(--brand-700);
  text-decoration: none;
}

.dg-arrow-link .dg-icon {
  transition: transform var(--t-hover) var(--ease);
}

.dg-arrow-link:hover .dg-icon {
  transform: translateX(4px);
}

/* ==========================================================================
   9. CABEÇALHO E NAVEGAÇÃO
   Cabeçalho claro e preciso (design.md §7): a logo azul fica legível sem
   nenhum filtro sobre a superfície branca.
   ========================================================================== */

.dg-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(150%) blur(8px);
  border-bottom: 1px solid var(--border);
}

.dg-header.is-scrolled {
  box-shadow: 0 6px 24px rgba(0, 48, 70, 0.07);
}

.dg-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  min-height: var(--header-h);
}

.dg-header__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: 0 0 auto;
}

/* A logo oficial é usada como veio do arquivo, sem redesenho nem recolor. */
.dg-logo {
  display: block;
  height: clamp(60px, 4.4vw, 46px);
  width: auto;
}

/* Fundo escuro: converte a logo azul em branco via CSS, preservando o alfa.
   O asset em disco continua com as cores oficiais. */
.dg-logo--negative {
  filter: brightness(0) invert(1);
}

.dg-nav {
  flex: 1 1 auto;
}

.dg-nav__list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dg-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-body-s);
  font-weight: 550;
  color: var(--ink-700);
  text-decoration: none;
  transition: color var(--t-hover) var(--ease);
}

.dg-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  height: 2px;
  background-color: var(--brand-600);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-hover) var(--ease);
}

.dg-nav__link:hover,
.dg-nav__link[aria-current="page"] {
  color: var(--brand-800);
}

.dg-nav__link:hover::after,
.dg-nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}

.dg-header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 0 0 auto;
}

.dg-navtoggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  color: var(--brand-800);
  font-size: 1.375rem;
  cursor: pointer;
}

.dg-navtoggle:hover {
  border-color: var(--brand-600);
  background-color: var(--brand-50);
}

.dg-navtoggle .dg-icon--close {
  display: none;
}

.dg-navtoggle[aria-expanded="true"] .dg-icon--open {
  display: none;
}

.dg-navtoggle[aria-expanded="true"] .dg-icon--close {
  display: block;
}

/* --- Tablet e celular: menu em gaveta --- */
@media (max-width: 992px) {
  .dg-navtoggle {
    display: inline-flex;
  }

  .dg-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    display: none;
    background-color: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-raised);
  }

  .dg-nav.is-open {
    display: block;
  }

  .dg-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--sp-3) var(--gutter) var(--sp-6);
  }

  /* Empurra a marca para a esquerda e agrupa ações + hambúrguer na direita. */
  .dg-header__brand {
    margin-right: auto;
  }

  .dg-header__actions {
    order: 2;
  }

  .dg-navtoggle {
    order: 3;
  }

  .dg-nav__link {
    min-height: 48px;
    font-size: var(--fs-body);
    border-bottom: 1px solid var(--border);
  }

  .dg-nav__link::after {
    display: none;
  }
}

@media (max-width: 560px) {
  .dg-header__cta-label {
    display: none;
  }
}

/* Seis itens de navegação + logo + ação: aperta o respiro antes de quebrar. */
@media (min-width: 993px) and (max-width: 1200px) {
  .dg-nav__list {
    gap: var(--sp-4);
  }

  .dg-nav__link {
    font-size: var(--fs-label);
  }
}

/* ==========================================================================
   10. HERO
   Composição editorial assimétrica: texto à esquerda, imagem com corte em
   arco (derivado da geometria da logo) à direita.
   ========================================================================== */

.dg-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--surface);
  padding-block: clamp(1.25rem, 2.6vw, 2.5rem) 0;
}

/* CURVE — anel grande de fundo, derivado da geometria da logo (design.md §2).
   É a camada construtivista que dá o "arco" sem competir com o conteúdo. */
.dg-hero::before {
  content: "";
  position: absolute;
  left: -16rem;
  bottom: -22rem;
  width: 44rem;
  height: 44rem;
  border: 1px solid var(--border);
  border-radius: 50%;
  pointer-events: none;
}

.dg-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 4.5rem);
}

.dg-hero__copy {
  padding-bottom: clamp(0.5rem, 1.5vw, 1.5rem);
}

/* Respiro menor entre os botões do herói: com o gap padrão eles quebravam
   para a linha de baixo e o herói ficava 70px mais alto. */
.dg-hero__copy .dg-cluster {
  gap: var(--sp-3);
}

.dg-hero__title {
  font-size: var(--fs-display-xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  margin-bottom: var(--sp-6);
}

.dg-hero__lead {
  margin-bottom: var(--sp-6);
}

.dg-hero__media {
  position: relative;
  overflow: hidden;
  min-height: clamp(240px, 34vw, 430px);
  /* CURVE — serpentina (x²y + ab·y − a²x = 0). O clipPath vive no HTML, em
     tools/curva-serpentina.html fica o gerador. border-radius não produz S. */
  clip-path: url(#dg-serpentina);
  background-color: var(--surface-soft);
}

/* SVG só com definições (clipPath): não deve ocupar espaço nem aparecer. */
.dg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.dg-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Painel enviesado: camada construtivista contida (design.md §16). */
.dg-hero__media::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: clamp(90px, 17%, 230px);
  background: var(--brand-800);
  /* Corte geométrico em diagonal — mais limpo que o skew anterior. */
  clip-path: polygon(80% 0, 100% 0, 100% 100%, 0 100%);
  opacity: 0.84;
}

@media (max-width: 992px) {
  .dg-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-8);
  }

  .dg-hero__copy {
    padding-bottom: 0;
  }

  .dg-hero__media {
    /* A serpentina some no celular: numa caixa baixa ela vira ruído. */
    clip-path: none;
    border-radius: var(--r-2xl);
    min-height: clamp(240px, 52vw, 380px);
  }

  .dg-hero__media::after {
    display: none;
  }
}

/* ==========================================================================
   11. FAIXA DE MÉTRICAS
   Quatro blocos Bento que sobem sobre o hero.
   ========================================================================== */

.dg-metrics {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-top: calc(-1 * var(--sp-8));
}

/* Ícone à esquerda; número e rótulo empilhados à direita (como no mockup). */
/* No index a faixa sobe sobre o herói de propósito (efeito Bento). Na área de
   atuação o herói é curto e ela cobria os botões do .dg-cluster. */
.dg-metrics--plano {
  margin-top: var(--sp-6);
}

.dg-metric {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5, 1.25rem);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  font-size: var(--fs-body-s);
  color: var(--ink-500);
}

.dg-metric--dark {
  background-color: var(--brand-800);
  border-color: var(--brand-800);
  color: rgba(255, 255, 255, 0.78);
}

.dg-metric--dark .dg-bignum {
  color: #fff;
}

.dg-metric__icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  font-size: 40px;
  color: var(--brand-700);
}

.dg-metric--dark .dg-metric__icon {
  color: var(--brand-300);
}

.dg-metric__texto {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
}

.dg-metric__label {
  font-size: var(--fs-body-s);
}

/* Entre 993 e 1200px as quatro colunas ficam estreitas: com o ícone ao lado,
   o número grande ("MG + RJ") quebra em duas linhas. Aperta o conjunto. */
@media (min-width: 993px) and (max-width: 1200px) {
  .dg-metric {
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5, 1.25rem);
  }

  .dg-metric__icon {
    width: 32px;
    height: 32px;
    font-size: 32px;
  }

  .dg-metric .dg-bignum {
    font-size: 1.625rem;
  }
}

@media (max-width: 992px) {
  .dg-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: var(--sp-8);
  }
}

@media (max-width: 560px) {
  .dg-metrics {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   12. CATEGORIAS (BENTO)
   Cinco linhas que existem de fato no acervo. Nada de categoria inventada.
   ========================================================================== */

.dg-cats {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(190px, auto);
  gap: var(--sp-4);
}

.dg-cat {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  min-height: 210px;
  /* Reserva a faixa da seta para o texto nunca passar por baixo dela. */
  padding: var(--sp-6) calc(var(--sp-6) + 44px) var(--sp-6) var(--sp-6);
  border-radius: var(--r-2xl);
  background-color: var(--brand-800);
  color: #fff;
  text-decoration: none;
  isolation: isolate;
}

/* Destaque: primeira categoria ocupa duas linhas. */
.dg-cat--feature {
  grid-column: span 6;
  grid-row: span 2;
  min-height: 100%;
  padding-right: calc(var(--sp-6) + 44px);
}

.dg-cat--half {
  grid-column: span 3;
}

.dg-cat__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-reveal) var(--ease);
}

/* Sobreposição escura na base garante contraste do texto. */
.dg-cat::after {
  content: "";
  position: absolute;
  inset: 35% 0 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgba(0, 45, 65, 0.94) 0%,
    rgba(0, 45, 65, 0.6) 45%,
    rgba(0, 45, 65, 0) 100%
  );
}

.dg-cat:hover .dg-cat__img {
  transform: scale(1.03);
}

.dg-cat__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  font-weight: 750;
  letter-spacing: -0.02em;
  color: #fff;
}

.dg-cat--feature .dg-cat__name {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
}

/* Descritor curto em caixa alta, como no mockup (design.md §16). */
.dg-cat__desc {
  margin: var(--sp-2) 0 0;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}

/* No tile em destaque cabe uma frase inteira. */
.dg-cat--feature .dg-cat__desc {
  font-size: var(--fs-body-s);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  max-width: 34ch;
}

.dg-cat__count {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}

.dg-cat__arrow {
  position: absolute;
  right: var(--sp-6);
  bottom: var(--sp-6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.38);
  background-color: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 1.125rem;
  transition: background-color var(--t-hover) var(--ease),
    color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease);
}

.dg-cat:hover .dg-cat__arrow {
  background-color: #fff;
  border-color: #fff;
  color: var(--brand-800);
}

@media (max-width: 992px) {
  .dg-cats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dg-cat--feature,
  .dg-cat--half {
    grid-column: span 1;
    grid-row: auto;
    min-height: 200px;
  }
}

@media (max-width: 560px) {
  .dg-cats {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   13. MARCAS
   Logos oficiais sem recolor, com altura visual constante (design.md §10).
   ========================================================================== */

.dg-brands {
  padding-block: var(--sp-8);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.dg-brands__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}

.dg-brands__strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: center;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dg-brands__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 84px;
  padding: var(--sp-3) var(--sp-4);
}

/* Alguns fabricantes fornecem a marca em traço branco (uso sobre fundo escuro).
   Nesses casos o arquivo NÃO é recolorido: ele ganha um apoio escuro. Ideal é
   receber do fabricante a versão para fundo claro e remover esta classe. */
.dg-brands__item--escuro {
  background-color: var(--brand-800);
  border-radius: var(--r-lg);
}

/* Caixa DEFINIDA nos dois eixos: `object-fit` só age quando largura e altura
   são conhecidas. Com `width: auto` o navegador cai no tamanho intrínseco do
   SVG (300x150) e a marca sai minúscula. */
.dg-brands__item img {
  display: block;
  width: 100%;
  height: 56px;
  object-fit: contain;
}

@media (max-width: 560px) {
  .dg-brands__strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dg-brands__item img {
    height: 44px;
  }
}

/* ==========================================================================
   14. BLOCOS EDITORIAIS
   ========================================================================== */

.dg-editorial {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}

.dg-editorial--reverse .dg-editorial__media {
  order: -1;
}

.dg-editorial__media {
  overflow: hidden;
  border-radius: 0 clamp(80px, 11vw, 190px) 0 0;
  background-color: var(--surface-soft);
}

.dg-editorial__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (max-width: 992px) {
  .dg-editorial,
  .dg-editorial--reverse {
    grid-template-columns: minmax(0, 1fr);
  }

  .dg-editorial--reverse .dg-editorial__media {
    order: 0;
  }

  .dg-editorial__media {
    border-radius: var(--r-2xl);
  }
}

/* ==========================================================================
   15. CARTÕES E BENTO GENÉRICO
   ========================================================================== */

.dg-card {
  padding: var(--sp-8);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-card);
}

.dg-card--soft {
  background-color: var(--surface-soft);
  box-shadow: none;
}

.dg-card--brand {
  background-color: var(--brand-800);
  border-color: var(--brand-800);
  color: rgba(255, 255, 255, 0.82);
}

.dg-card--brand h2,
.dg-card--brand h3,
.dg-card--brand .dg-bignum {
  color: #fff;
}

.dg-cards-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-6);
}

/* Cartão de serviço: ícone, título e texto. */
.dg-service {
  display: flex;
  flex-direction: column;
  padding: var(--sp-8);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  transition: border-color var(--t-hover) var(--ease),
    box-shadow var(--t-hover) var(--ease);
}

.dg-service:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-card);
}

.dg-service__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--sp-6);
  border-radius: var(--r-lg);
  background-color: var(--brand-50);
  color: var(--brand-700);
  font-size: 1.5rem;
}

.dg-service h3 {
  margin-bottom: var(--sp-3);
}

.dg-service p {
  font-size: var(--fs-body-s);
  color: var(--ink-700);
}

/* Lista de benefícios com marca de verificação. */
.dg-checklist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dg-checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding-block: var(--sp-2);
  font-size: var(--fs-body-s);
}

.dg-checklist .dg-icon {
  margin-top: 0.28em;
  color: var(--success);
}

/* ==========================================================================
   16. FAIXA DE VALOR
   ========================================================================== */

.dg-value {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
  padding: clamp(2rem, 4vw, 3.5rem);
  background-color: var(--brand-800);
  border-radius: var(--r-2xl);
  color: rgba(255, 255, 255, 0.84);
}

.dg-value__title {
  margin: 0;
  color: #fff;
  font-size: var(--fs-h2);
}

.dg-value__modules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dg-value__module {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  font-size: var(--fs-body-s);
}

.dg-value__module .dg-icon {
  font-size: 1.5rem;
  color: var(--brand-500);
}

.dg-value__module strong {
  color: #fff;
  font-size: var(--fs-body);
}

@media (max-width: 992px) {
  .dg-value {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   17. CONTATO
   ========================================================================== */

.dg-contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-6);
}

.dg-contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
}

.dg-contact-item + .dg-contact-item {
  margin-top: var(--sp-6);
}

.dg-contact-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: var(--r-lg);
  background-color: var(--brand-50);
  color: var(--brand-700);
  font-size: 1.25rem;
}

.dg-contact-item h3,
.dg-contact-item h4 {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-body);
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--brand-800);
}

.dg-contact-item p {
  margin: 0;
  font-size: var(--fs-body-s);
  color: var(--ink-700);
}

.dg-contact-item a {
  color: var(--ink-700);
  text-decoration: none;
}

.dg-contact-item a:hover {
  color: var(--brand-700);
  text-decoration: underline;
}

.dg-dl {
  margin: 0;
  font-size: var(--fs-body-s);
}

.dg-dl dt {
  font-weight: 700;
  color: var(--brand-800);
  margin-top: var(--sp-3);
}

.dg-dl dd {
  margin: 0;
  color: var(--ink-700);
}

/* ==========================================================================
   18. RODAPÉ
   ========================================================================== */

.dg-footer {
  background-color: var(--brand-800);
  color: rgba(255, 255, 255, 0.78);
  padding-block: var(--sp-16) var(--sp-6);
  margin-top: var(--sp-24);
}

.dg-footer a {
  color: rgba(255, 255, 255, 0.86);
  text-decoration: none;
}

.dg-footer a:hover {
  color: #fff;
  text-decoration: underline;
}

.dg-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: var(--sp-8);
}

.dg-footer__brand img {
  display: block;
  height: 44px;
  width: auto;
  margin-bottom: var(--sp-4);
}

.dg-footer__brand p {
  font-size: var(--fs-body-s);
  max-width: 34ch;
}

.dg-footer h2,
.dg-footer h3 {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: #fff;
}

.dg-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dg-footer li + li {
  margin-top: var(--sp-3);
}

.dg-footer li,
.dg-footer p {
  font-size: var(--fs-body-s);
}

.dg-footer__contact p {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.dg-footer__contact .dg-icon {
  margin-top: 0.28em;
  color: var(--brand-500);
}

.dg-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-12);
  padding-top: var(--sp-6);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: var(--fs-body-s);
}

@media (max-width: 992px) {
  .dg-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .dg-footer__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   19. FORMULÁRIOS E BUSCA
   ========================================================================== */

.dg-field {
  display: block;
}

.dg-field__label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-body-s);
  font-weight: 650;
  color: var(--ink-900);
}

.dg-input {
  width: 100%;
  min-height: 44px;
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--ink-900);
  background-color: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  transition: border-color var(--t-hover) var(--ease),
    box-shadow var(--t-hover) var(--ease);
}

.dg-input::placeholder {
  color: var(--ink-500);
}

.dg-input:focus {
  outline: none;
  border-color: var(--brand-600);
  box-shadow: var(--focus-ring);
}

/* Campo de busca dominante: ícone à esquerda, ação à direita. */
.dg-search {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2);
  background-color: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  transition: border-color var(--t-hover) var(--ease),
    box-shadow var(--t-hover) var(--ease);
}

.dg-search:focus-within {
  border-color: var(--brand-600);
  box-shadow: var(--focus-ring);
}

.dg-search__icon {
  margin-left: var(--sp-3);
  color: var(--ink-500);
  font-size: 1.125rem;
}

.dg-search__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 48px;
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-sans);
  font-size: var(--fs-body-l);
  color: var(--ink-900);
  background: transparent;
  border: 0;
}

.dg-search__input:focus {
  outline: none;
}

.dg-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.dg-search__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--r-md);
  color: var(--ink-500);
  font-size: 1.125rem;
  cursor: pointer;
}

.dg-search__clear:hover {
  background-color: var(--surface-soft);
  color: var(--brand-700);
}

.dg-search__clear[hidden] {
  display: none;
}

@media (max-width: 560px) {
  .dg-search {
    flex-wrap: wrap;
  }

  .dg-search__input {
    font-size: var(--fs-body);
  }

  .dg-search .dg-btn {
    width: 100%;
  }
}

/* ==========================================================================
   20. MAPA DE ATENDIMENTO
   Modo vetorial por padrão (sem tiles, sem requisições externas);
   o mapa geográfico com tiles é opt-in.
   ========================================================================== */

.dg-map {
  position: relative;
  background-color: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  overflow: hidden;

  /* Cores da camada de contexto — as MESMAS que gerar_dados_web.py usa no
     area-atuacao.svg (CORES_UF), para a ilustração da home e o mapa interativo
     lerem igual. SP e ES ficam em branco: são só o recorte do Sudeste. */
  --uf-mg-fill: #D6E7EE;
  --uf-mg-stroke: #7FA9BB;
  --uf-rj-fill: #A9D3E2;
  --uf-rj-stroke: #4E93AE;
  --uf-contexto-fill: #FFFFFF;
  --uf-contexto-stroke: #AFC3CB;
}

.dg-map__canvas {
  display: block;
  width: 100%;
  height: auto;
  /* Fallback sem JavaScript. Com JS, area-atuacao.js troca isto pela extensão
     real do desenho (meta.quadro), para a caixa 1000×1000 não virar margem
     morta nas laterais. */
  aspect-ratio: 16 / 11;
  touch-action: manipulation;
}

/* UFs de contexto — ficam atrás das microrregiões, sem receber ponteiro. */
.dg-map__uf {
  fill: var(--uf-contexto-fill);
  stroke: var(--uf-contexto-stroke);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  pointer-events: none;
}

.dg-map__uf--mg {
  fill: var(--uf-mg-fill);
  stroke: var(--uf-mg-stroke);
}

.dg-map__uf--rj {
  fill: var(--uf-rj-fill);
  stroke: var(--uf-rj-stroke);
}

.dg-map__canvas:focus-visible {
  outline: 3px solid var(--brand-500);
  outline-offset: -3px;
}

.dg-map__canvas.is-interactive {
  cursor: grab;
  touch-action: none;
}

.dg-map__canvas.is-interactive:active {
  cursor: grabbing;
}

/* Regiões */
.dg-map__region {
  fill: var(--brand-700);
  stroke: var(--surface);
  stroke-width: 0.9;
  vector-effect: non-scaling-stroke;
  transition: fill var(--t-hover) var(--ease);
}

.dg-map__region:focus-visible {
  outline: none;
  stroke: var(--brand-900);
  stroke-width: 2.5;
}

.dg-map__region.is-active,
.dg-map__region:hover {
  fill: var(--brand-500);
}

.dg-map__region.is-selected {
  fill: var(--brand-900);
}

.dg-map__region.is-dimmed {
  fill: var(--brand-100);
}

/* Sedes municipais — um ponto por município atendido. Branco sobre o azul
   escuro das microrregiões: antes era --brand-900 a 34% sobre o mesmo tom, ou
   seja, invisível — e por isso o botão do mapa parecia não fazer nada. O raio
   é reajustado pelo JS a cada mudança de zoom. */
.dg-map__mun {
  fill: var(--surface);
  opacity: 0.92;
  pointer-events: none;
}

/* Nome do município sob o cursor. Elemento próprio, e não <title>: o nativo
   demora ~1 s, não aceita estilo e não segue o sistema de design. */
.dg-map__dica {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-sm);
  background-color: var(--brand-900);
  color: var(--brand-50);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 4px 14px rgb(0 59 85 / 28%);
}

.dg-map__dica[hidden] {
  display: none;
}

/* Marcador da cidade encontrada */
.dg-map__pin {
  fill: var(--error);
  stroke: #fff;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.dg-map__pin-halo {
  fill: var(--error);
  opacity: 0.22;
  pointer-events: none;
}

.dg-map__camada[hidden] {
  display: none;
}

/* --- Barra de ações do mapa: alvos de 44×44 px --- */
.dg-map__toolbar {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  z-index: 3;
}

.dg-map__acao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background-color: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  color: var(--brand-800);
  font-size: 1.125rem;
  cursor: pointer;
  transition: background-color var(--t-hover) var(--ease),
    border-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease);
}

.dg-map__acao:hover {
  background-color: var(--brand-50);
  border-color: var(--brand-600);
  color: var(--brand-700);
}

.dg-map__acao[aria-pressed="true"] {
  background-color: var(--brand-800);
  border-color: var(--brand-800);
  color: #fff;
}

.dg-map__legenda {
  position: absolute;
  left: var(--sp-4);
  bottom: var(--sp-4);
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  background-color: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  font-size: var(--fs-label);
  color: var(--ink-700);
}

.dg-map__legenda-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.dg-map__swatch {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  border-radius: 3px;
  background-color: var(--brand-700);
}

.dg-map__swatch--selecionada {
  background-color: var(--brand-900);
}

.dg-map__swatch--pin {
  background-color: var(--error);
  border-radius: 50%;
}

/* Alternativa textual do mapa — sempre disponível, também para SEO. */
.dg-map__fallback {
  margin-top: var(--sp-4);
  font-size: var(--fs-body-s);
  color: var(--ink-500);
}

@media (max-width: 768px) {
  .dg-map__canvas {
    /* Fallback sem JavaScript: no celular o quadro quadrado dá mais altura de
       toque. Com JS, area-atuacao.js sobrescreve com a proporção dos dados. */
    aspect-ratio: 1 / 1;
  }

  .dg-map__toolbar {
    top: var(--sp-2);
    right: var(--sp-2);
  }

  .dg-map__legenda {
    position: static;
    margin: 0;
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
    background-color: var(--surface);
  }
}

/* --- Figuras do mapa: herói e mapa interativo --- */
.dg-mapa-figura {
  /* Limita o mapa: em coluna larga ele crescia junto e esticava o herói. */
  max-width: 400px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  background-color: var(--surface-soft);
}

/* A silhueta é conteúdo, não decoração: mostra o quadro inteiro. A proporção
   é a do viewBox real da ilustração — o valor precisa acompanhar o gerador
   (hoje 1030 × 907), senão o mapa é exibido achatado. */
.dg-mapa-figura img {
  /* `.dg-hero__media img` é `position: absolute` (a foto preenche o arco).
     O mapa é conteúdo e precisa voltar ao fluxo, senão o <figure> colapsa e o
     `overflow: hidden` corta a imagem inteira. */
  position: static;
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  aspect-ratio: 1030 / 907;
}

/* Container do mapa: o SVG cuida da própria proporção. */
.dg-mapa-caixa {
  background-color: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  overflow: hidden;
}

.dg-mapa-caixa .dg-map {
  border: 0;
  border-radius: 0;
}

/* No herói da área de atuação a figura é o próprio conteúdo: nada de
   sobreposição escura nem recorte — o mapa aparece inteiro. */
/* Na área de atuação a coluna de texto é mais larga: os dois botões do
   .dg-cluster passam a caber lado a lado, o que também encurta o herói.
   Só em tela larga — sem o @media, a especificidade desta regra venceria o
   empilhamento de uma coluna abaixo de 992px e o mapa sairia com 124px. */
@media (min-width: 993px) {
  .dg-hero--atuacao .dg-hero__inner {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  }
}

.dg-hero__media--mapa {
  min-height: 0;
  padding: 0;
  border-radius: var(--r-2xl);
  background-color: var(--surface-soft);
  /* O mapa não leva a serpentina do herói da home. Sem isto, o clip-path
     herdado aponta para um id que só existe no index.html e o navegador
     simplesmente não desenha o elemento. */
  clip-path: none;
}

.dg-hero__media--mapa::after {
  display: none;
}

@media (max-width: 992px) {
  .dg-hero__media--mapa {
    border-radius: var(--r-2xl);
    min-height: 0;
  }
}

/* --- Resultado da busca de cidade --- */
.dg-atuacao__resultado {
  margin-top: var(--sp-6);
}

.dg-aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-6);
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  background-color: var(--surface-soft);
}

.dg-aviso .dg-icon {
  font-size: 1.5rem;
  margin-top: 0.1em;
}

.dg-aviso--ok {
  border-color: #BFE0CD;
  background-color: var(--success-bg);
}

.dg-aviso--ok .dg-icon {
  color: var(--success);
}

.dg-aviso--erro {
  border-color: #E8C4C4;
  background-color: var(--error-bg);
}

.dg-aviso--erro .dg-icon {
  color: var(--error);
}

.dg-aviso h3 {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-body-l);
  font-family: var(--font-sans);
}

.dg-aviso p {
  margin: 0;
  font-size: var(--fs-body-s);
}

/* --- Lista de regiões e cidades --- */
.dg-regioes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dg-regiao {
  padding: var(--sp-6);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  transition: border-color var(--t-hover) var(--ease),
    box-shadow var(--t-hover) var(--ease);
}

.dg-regiao:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-card);
}

.dg-regiao.is-aberta {
  border-color: var(--brand-600);
  box-shadow: var(--shadow-card);
}

.dg-regiao[hidden],
.dg-regiao__cidades li[hidden] {
  display: none;
}

.dg-regiao__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}

.dg-regiao__nome {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--brand-800);
}

.dg-regiao__nome:focus-visible {
  outline: 3px solid var(--brand-500);
  outline-offset: 4px;
  border-radius: var(--r-sm);
}

.dg-regiao__uf {
  flex: 0 0 auto;
  padding: 2px var(--sp-3);
  border-radius: var(--r-pill);
  background-color: var(--surface-soft);
  border: 1px solid var(--border);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--brand-800);
}

.dg-regiao__cidades {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dg-regiao__cidades li {
  font-size: var(--fs-body-s);
}

.dg-cidade {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-1);
  min-height: 32px;
  padding: 6px var(--sp-3);
  background-color: var(--surface-soft);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-size: var(--fs-body-s);
  color: var(--ink-700);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-hover) var(--ease),
    color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease);
}

.dg-cidade:hover {
  background-color: var(--brand-50);
  border-color: var(--border);
  color: var(--brand-800);
}

.dg-cidade:focus-visible {
  outline: 3px solid var(--brand-500);
  outline-offset: 2px;
}

.dg-cidade__uf {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-500);
}

.dg-cidade.is-hit {
  background-color: var(--brand-800);
  border-color: var(--brand-800);
  color: #fff;
  font-weight: 650;
}

.dg-cidade.is-hit .dg-cidade__uf {
  color: rgba(255, 255, 255, 0.78);
}

/* --- Busca de cidade: alternativas --- */
.dg-alternativas {
  margin-top: var(--sp-6);
}

.dg-alternativas[hidden] {
  display: none;
}

.dg-alternativas h3 {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-500);
}

.dg-alternativas ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dg-resultado__contagem {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-body-s);
  color: var(--ink-500);
}

/* ==========================================================================
   21. ESTADOS
   ========================================================================== */

.dg-state {
  padding: var(--sp-16) var(--sp-6);
  text-align: center;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-2xl);
  background-color: var(--surface-soft);
}

.dg-state .dg-icon {
  font-size: 2.5rem;
  color: var(--brand-600);
  margin-bottom: var(--sp-4);
}

.dg-state h3 {
  margin-bottom: var(--sp-2);
}

.dg-state p {
  color: var(--ink-500);
  margin-bottom: var(--sp-6);
}

.dg-state--erro .dg-icon {
  color: var(--error);
}

/* Esqueleto de carregamento com a geometria do conteúdo final. */
.dg-skeleton {
  border-radius: var(--r-xl);
  background: linear-gradient(
    90deg,
    var(--surface-soft) 25%,
    #EDF2F3 50%,
    var(--surface-soft) 75%
  );
  background-size: 200% 100%;
  animation: dg-shimmer 1.4s var(--ease) infinite;
}

@keyframes dg-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ==========================================================================
   22. PÁGINA 404
   ========================================================================== */

.dg-erro {
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: clamp(4rem, 10vw, 8rem);
}

.dg-erro__codigo {
  font-family: var(--font-display);
  font-size: clamp(5rem, 16vw, 11rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--brand-100);
  margin: 0;
}

.dg-erro__titulo {
  margin: calc(-1 * var(--sp-6)) 0 var(--sp-4);
}

.dg-erro__acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
}

/* ==========================================================================
   23. DOWNLOADS
   ========================================================================== */

.dg-files {
  display: grid;
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dg-file {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-6);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  transition: border-color var(--t-hover) var(--ease),
    box-shadow var(--t-hover) var(--ease);
}

.dg-file:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-card);
}

.dg-file__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  border-radius: var(--r-lg);
  background-color: var(--brand-800);
  color: #fff;
  font-size: 1.5rem;
}

.dg-file__icon--android {
  background-color: #1F8B4C;
}

.dg-file__info {
  flex: 1 1 auto;
  min-width: 0;
}

.dg-file__info h3 {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-body-l);
}

.dg-file__nome {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-body-s);
  color: var(--ink-500);
  word-break: break-all;
}

.dg-file__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  font-size: var(--fs-body-s);
  color: var(--ink-500);
}

.dg-file__meta span {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.dg-file__meta .dg-icon {
  color: var(--brand-600);
}

@media (max-width: 768px) {
  .dg-file {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .dg-file__info {
    width: 100%;
  }

  .dg-file .dg-btn {
    width: 100%;
  }
}

/* ==========================================================================
   24. MOVIMENTO
   ========================================================================== */

/* A classe é aplicada por JS (a partir de [data-dg-reveal]); sem JS o
   conteúdo simplesmente aparece, nunca fica invisível. */
.dg-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--t-reveal) var(--ease),
    transform var(--t-reveal) var(--ease);
}

.dg-reveal.is-visible {
  opacity: 1;
  transform: none;
}

@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;
  }

  .dg-reveal {
    opacity: 1;
    transform: none;
  }

  .dg-btn:hover,
  .dg-cat:hover .dg-cat__img {
    transform: none;
  }
}

/* ==========================================================================
   25. IMPRESSÃO
   ========================================================================== */

@media print {
  .dg-header,
  .dg-navtoggle,
  .dg-footer,
  .dg-map__toolbar {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
  }

  .dg-card,
  .dg-service,
  .dg-file {
    border: 1px solid #999;
    box-shadow: none;
  }

  .dg-logo--negative {
    filter: none;
  }
}

/* ==========================================================================
   26. AJUSTES DO LOCKUP DE MARCA E DA TAGLINE
   Classes introduzidas pelo Open Design no HTML e que ainda não tinham
   estilo. Sem isto, `.dg-brand-motto` é texto inline dentro do flex do
   cabeçalho e empurra a página 59 px além da viewport em 390 px.
   ========================================================================== */

.dg-header__brand {
  gap: var(--sp-3);
}

.dg-brand-motto {
  display: block;
  max-width: 16ch;   /* duas linhas: 'SAÚDE ANIMAL' / 'DE QUALIDADE' */
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-600);
}

.dg-header__cta-arrow {
  transition: transform var(--t-hover) var(--ease);
}

.dg-btn:hover .dg-header__cta-arrow {
  transform: translateX(3px);
}

.dg-hero__motto {
  display: inline-block;
  margin: var(--sp-2) 0 var(--sp-6);
  padding-top: var(--sp-3);
  border-top: 2px solid var(--brand-800);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--brand-800);
}

/* O lockup da marca não cabe ao lado da logo enquanto o cabeçalho ainda tem
   os cinco itens de navegação e o botão do catálogo: abaixo de 1200px ele
   quebrava em três linhas e apertava tudo. */
@media (max-width: 1199px) {
  .dg-brand-motto {
    display: none;
  }
}

@media (max-width: 768px) {
  .dg-hero__motto {
    margin-bottom: var(--sp-6);
  }
}