/* ==========================================================================
   BOTÕES
   ==========================================================================

   .botao--primario    Fundo verde, texto branco (ação principal, ex.: "Ver edital").
   .botao--secundario  Contorno verde (ação secundária, ex.: "Mais conteúdos").
   .botao-icone        Botão quadrado só com ícone (lupa, menu, fechar).
                       Área de toque de 44 x 44 px (recomendação de acessibilidade).

   Cores: base/variaveis.css (--cor-primaria). Cantos: --raio-pilula.
   ========================================================================== */

.botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--espaco-2);
	min-height: 44px;
	padding: 0.625rem 1.25rem;
	border: 1.5px solid transparent;
	border-radius: var(--raio-pilula);
	font-family: var(--fonte-corpo);
	font-size: 0.9375rem;
	font-weight: var(--peso-semi);
	line-height: 1.2;
	text-decoration: none;
	transition: background-color var(--transicao), color var(--transicao), border-color var(--transicao);
}

.botao--primario {
	background: var(--cor-primaria);
	color: var(--cor-sobre-primaria);
}

.botao--primario:hover {
	background: var(--cor-primaria-hover);
	color: var(--cor-sobre-primaria);
}

.botao--secundario {
	background: transparent;
	border-color: var(--cor-primaria);
	color: var(--cor-primaria);
}

.botao--secundario:hover {
	background: var(--cor-primaria);
	color: var(--cor-sobre-primaria);
}

.botao-icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--raio-pilula);
	background: transparent;
	color: var(--cor-texto);
	text-decoration: none;
	transition: background-color var(--transicao), color var(--transicao);
}

.botao-icone:hover {
	background: var(--cor-superficie);
	color: var(--cor-primaria);
}