/* Componentes do design system Breno Dores. Só tokens (tokens.css), sem sombra e sem efeito. */
  /* Componentes do design system. Só tokens, sem sombra e sem efeito. */
  *, *::before, *::after { box-sizing: border-box; }
  body { margin: 0; background: var(--bd-fundo); color: var(--bd-texto);
         font-family: var(--bd-fonte-texto); font-size: var(--bd-texto-base);
         line-height: var(--bd-altura-linha-texto); }
  h1, h2, h3 { font-family: var(--bd-fonte-titulo); font-weight: 400; text-transform: var(--bd-caixa-titulo);
               line-height: var(--bd-altura-linha-titulo); margin: 0 0 var(--bd-esp-2); }
  h1 { font-size: var(--bd-titulo-lg); } h2 { font-size: var(--bd-titulo-md); } h3 { font-size: var(--bd-titulo-sm); }
  p { margin: 0 0 var(--bd-esp-2); max-width: var(--bd-largura-texto); }

  /* Seção */
  .bd-secao { padding: var(--bd-esp-6) var(--bd-esp-3); }
  .bd-secao__miolo { max-width: var(--bd-largura-pagina); margin: 0 auto; }
  .bd-secao--claro   { background: var(--bd-claro);      color: var(--bd-grafite); }
  .bd-secao--claro h1, .bd-secao--claro h2, .bd-secao--claro h3 { color: var(--bd-verde); }
  .bd-secao--verde   { background: var(--bd-verde);      color: var(--bd-bege); }
  .bd-secao--azul    { background: var(--bd-azul-noite); color: var(--bd-bege); }
  .bd-secao--vinho   { background: var(--bd-vinho);      color: var(--bd-bege); }
  .bd-secao--grafite { background: var(--bd-grafite);    color: var(--bd-bege); }
  .bd-secao--bege    { background: var(--bd-bege);       color: var(--bd-verde); }
  .bd-secao--verde h2, .bd-secao--azul h2, .bd-secao--vinho h2, .bd-secao--grafite h2 { color: var(--bd-bege); }
  .bd-rotulo { font-size: var(--bd-texto-xs); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 var(--bd-esp-2); }

  /* Botão */
  .bd-botao { display: inline-block; font: inherit; font-size: var(--bd-texto-sm); letter-spacing: .08em;
              text-transform: uppercase; text-decoration: none; cursor: pointer;
              padding: var(--bd-esp-2) var(--bd-esp-4); border-radius: var(--bd-raio);
              border: var(--bd-borda-forte) solid var(--bd-verde);
              background: var(--bd-verde); color: var(--bd-bege); }
  .bd-botao:hover { background: var(--bd-bege); color: var(--bd-verde); }
  .bd-botao:focus-visible { outline: var(--bd-borda-forte) solid var(--bd-vinho); outline-offset: 3px; }
  .bd-botao--vinho { background: var(--bd-vinho); border-color: var(--bd-vinho); }
  .bd-botao--vinho:hover { background: var(--bd-bege); color: var(--bd-vinho); }
  .bd-botao--contorno { background: transparent; color: var(--bd-verde); }
  .bd-botao--contorno:hover { background: var(--bd-verde); color: var(--bd-bege); }
  /* Sobre fundo escuro */
  .bd-botao--sobre-escuro { background: var(--bd-bege); border-color: var(--bd-bege); color: var(--bd-verde); }
  .bd-botao--sobre-escuro:hover { background: transparent; color: var(--bd-bege); }
  .bd-secao--verde .bd-botao:focus-visible, .bd-secao--azul .bd-botao:focus-visible,
  .bd-secao--vinho .bd-botao:focus-visible, .bd-secao--grafite .bd-botao:focus-visible { outline-color: var(--bd-bege); }

  /* Cartão */
  .bd-cartoes { display: grid; gap: var(--bd-esp-3); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
  .bd-cartao { background: var(--bd-claro); color: var(--bd-grafite); padding: var(--bd-esp-4);
               border: var(--bd-borda) solid var(--bd-verde); border-radius: var(--bd-raio); }
  .bd-cartao h3 { color: var(--bd-verde); }
  .bd-cartao--verde { background: var(--bd-verde); color: var(--bd-bege); border-color: var(--bd-verde); }
  .bd-cartao--verde h3 { color: var(--bd-bege); }
  .bd-cartao--bege { background: var(--bd-bege); color: var(--bd-verde); border-color: var(--bd-bege); }

  /* Citação */
  .bd-citacao { margin: 0; padding: 0 0 0 var(--bd-esp-3); border-left: var(--bd-borda-forte) solid var(--bd-vinho); max-width: var(--bd-largura-texto); }
  .bd-citacao p { font-family: var(--bd-fonte-titulo); text-transform: var(--bd-caixa-titulo); font-size: var(--bd-titulo-md); line-height: var(--bd-altura-linha-titulo); color: var(--bd-verde); }
  .bd-citacao footer { font-size: var(--bd-texto-sm); letter-spacing: .08em; text-transform: uppercase; color: var(--bd-grafite); }
  .bd-secao--verde .bd-citacao, .bd-secao--azul .bd-citacao, .bd-secao--vinho .bd-citacao { border-left-color: var(--bd-bege); }
  .bd-secao--verde .bd-citacao p, .bd-secao--azul .bd-citacao p, .bd-secao--vinho .bd-citacao p,
  .bd-secao--verde .bd-citacao footer, .bd-secao--azul .bd-citacao footer, .bd-secao--vinho .bd-citacao footer { color: var(--bd-bege); }