/* ==========================================================
   Busca do Local — Design tokens (CSS)
   Manual da Marca v2.0 · 30/09/2026
   Uso: importe este arquivo antes dos estilos do site.
   ========================================================== */

:root {
  /* ---------- Cores principais ---------- */
  --bdl-verde-escuro: #034B37;   /* títulos, fundos escuros, rodapé */
  --bdl-verde: #06875B;          /* botões, links, destaques */
  --bdl-verde-claro: #27A662;    /* ícones e detalhes (não usar em texto pequeno) */
  --bdl-laranja: #FEAD08;        /* pílulas, sublinhados, 1 destaque por seção */
  --bdl-fundo: #F8F9F9;          /* fundo padrão */
  --bdl-branco: #FFFFFF;

  /* ---------- Cores de apoio ---------- */
  --bdl-texto: #283C34;               /* parágrafos em fundo claro */
  --bdl-texto-suave: #5A6E64;         /* legendas, textos menores */
  --bdl-menta: #9ED9B8;               /* rótulos sobre verde-escuro */
  --bdl-texto-sobre-escuro: #DCEBE4;  /* parágrafos sobre verde-escuro */
  --bdl-texto-sobre-laranja: #281E00; /* texto de pílulas e botões laranja */
  --bdl-verde-hover: #057550;         /* hover do botão verde */
  --bdl-borda: #DDE5E1;               /* bordas e divisórias */

  /* ---------- Tipografia ---------- */
  --bdl-fonte: "Lexend", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --bdl-peso-regular: 400;
  --bdl-peso-semibold: 600;
  --bdl-peso-bold: 700;

  --bdl-fs-h1: clamp(2rem, 1.4rem + 3vw, 3.5rem);        /* 32 a 56 px */
  --bdl-fs-h2: clamp(1.625rem, 1.2rem + 2vw, 2.5rem);    /* 26 a 40 px */
  --bdl-fs-h3: 1.25rem;                                  /* 20 px */
  --bdl-fs-texto: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); /* 16 a 18 px */
  --bdl-fs-pequeno: 0.875rem;                            /* 14 px */
  --bdl-fs-pilula: 0.8125rem;                            /* 13 px */

  --bdl-lh-titulo: 1.1;
  --bdl-lh-texto: 1.6;
  --bdl-ls-titulo: -0.01em;
  --bdl-ls-pilula: 0.04em;

  /* ---------- Espaçamento (base 8 px) ---------- */
  --bdl-esp-1: 0.5rem;   /* 8 */
  --bdl-esp-2: 1rem;     /* 16 */
  --bdl-esp-3: 1.5rem;   /* 24 */
  --bdl-esp-4: 2rem;     /* 32 */
  --bdl-esp-5: 3rem;     /* 48 */
  --bdl-esp-6: 4rem;     /* 64 */
  --bdl-esp-7: 6rem;     /* 96 */

  /* ---------- Formas e sombras ---------- */
  --bdl-raio-pilula: 999px;
  --bdl-raio-card: 1.5rem;     /* 24 px */
  --bdl-raio-pequeno: 0.75rem; /* 12 px */
  --bdl-sombra-card: 0 12px 32px rgba(3, 75, 55, 0.10);
  --bdl-sombra-cabecalho: 0 2px 12px rgba(3, 75, 55, 0.08);

  /* ---------- Layout ---------- */
  --bdl-largura-max: 1200px;
  --bdl-margem-lateral: 1rem; /* 16 px no celular; 24 px tablet; 32 px desktop */
}

@media (min-width: 768px)  { :root { --bdl-margem-lateral: 1.5rem; } }
@media (min-width: 1024px) { :root { --bdl-margem-lateral: 2rem; } }

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--bdl-fonte);
  font-weight: var(--bdl-peso-regular);
  font-size: var(--bdl-fs-texto);
  line-height: var(--bdl-lh-texto);
  color: var(--bdl-texto);
  background: var(--bdl-fundo);
}

h1, h2, h3 {
  color: var(--bdl-verde-escuro);
  letter-spacing: var(--bdl-ls-titulo);
  line-height: var(--bdl-lh-titulo);
  margin: 0 0 var(--bdl-esp-2);
}
h1 { font-size: var(--bdl-fs-h1); font-weight: var(--bdl-peso-bold); }
h2 { font-size: var(--bdl-fs-h2); font-weight: var(--bdl-peso-bold); line-height: 1.15; }
h3 { font-size: var(--bdl-fs-h3); font-weight: var(--bdl-peso-semibold); line-height: 1.3; }

a { color: var(--bdl-verde); }
:focus-visible { outline: 3px solid var(--bdl-laranja); outline-offset: 2px; }

.bdl-container {
  max-width: var(--bdl-largura-max);
  margin-inline: auto;
  padding-inline: var(--bdl-margem-lateral);
}

/* ---------- Componentes ---------- */
.bdl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; padding: 14px 28px;
  border-radius: var(--bdl-raio-pilula);
  font: var(--bdl-peso-semibold) 1rem/1 var(--bdl-fonte);
  text-decoration: none; cursor: pointer; border: 2px solid transparent;
  transition: background-color .2s, color .2s, box-shadow .2s;
}
.bdl-btn--primario { background: var(--bdl-verde); color: var(--bdl-branco); }
.bdl-btn--primario:hover { background: var(--bdl-verde-hover); }
.bdl-btn--secundario { background: transparent; color: var(--bdl-verde-escuro); border-color: var(--bdl-verde-escuro); }
.bdl-btn--secundario:hover { background: var(--bdl-verde-escuro); color: var(--bdl-branco); }
.bdl-btn--destaque { background: var(--bdl-laranja); color: var(--bdl-texto-sobre-laranja); }
.bdl-btn--destaque:hover { box-shadow: 0 6px 18px rgba(254, 173, 8, 0.35); }

.bdl-pilula {
  display: inline-block; padding: 6px 14px;
  border-radius: var(--bdl-raio-pilula);
  background: var(--bdl-laranja); color: var(--bdl-texto-sobre-laranja);
  font: var(--bdl-peso-bold) var(--bdl-fs-pilula)/1 var(--bdl-fonte);
  text-transform: uppercase; letter-spacing: var(--bdl-ls-pilula);
}

.bdl-card {
  background: var(--bdl-branco);
  border: 1px solid var(--bdl-borda);
  border-radius: var(--bdl-raio-card);
  box-shadow: var(--bdl-sombra-card);
  padding: var(--bdl-esp-3);
}

.bdl-secao { padding-block: var(--bdl-esp-6); }
@media (min-width: 1024px) { .bdl-secao { padding-block: var(--bdl-esp-7); } }
.bdl-secao--branca { background: var(--bdl-branco); }
.bdl-secao--escura { background: var(--bdl-verde-escuro); color: var(--bdl-texto-sobre-escuro); }
.bdl-secao--escura h2, .bdl-secao--escura h3 { color: var(--bdl-branco); }

.bdl-pular-conteudo {
  position: absolute; left: -9999px; top: 0;
}
.bdl-pular-conteudo:focus {
  left: 1rem; top: 1rem; z-index: 1000;
  background: var(--bdl-branco); padding: 0.75rem 1rem; border-radius: var(--bdl-raio-pequeno);
}