/**
 * Página Contato: parceiros estratégicos, botão verde e medidas de desktop a partir de 1240px.
 */

/* Contato, parceiros estratégicos: rótulo leve e azulado, logos numa linha só
   (space-between, 1050px úteis como no protótipo) e a pílula verde viva de uma linha. */
.garagem-contato-secao > h3.has-azul-claro-color {
	margin-top: 52px;
	margin-bottom: 0;
	color: #2b4a8c;
	font-weight: 400;
}

.garagem-contato-logos {
	margin-top: 32px;
	align-items: center;
}

/* Pílula verde viva de fundo branco, letra e borda verdes; o hover inverte. Vence a cor da paleta do bloco de botão. */
.garagem-contato-secao .wp-block-button.is-style-pilula .wp-block-button__link.has-verde-cta-background-color {
	width: 346px;
	min-height: 68px;
	padding: 0 1.5rem;
	border: 2px solid #008633;
	border-radius: 34px;
	background-color: var(--wp--preset--color--branco, #fff) !important;
	color: #008633 !important;
	font-size: 0.9375rem;
	letter-spacing: 0.08em;
	max-width: 100%;
	white-space: normal;
}

.garagem-contato-secao .wp-block-button.is-style-pilula .wp-block-button__link.has-verde-cta-background-color:is(:hover, :focus-visible) {
	background-color: #008633 !important;
	color: var(--wp--preset--color--branco, #fff) !important;
}

.garagem-contato-secao .wp-block-buttons {
	margin-top: 68px;
}

/* Medidas do protótipo de 1440: recuos laterais, deslocamento das fotos e do botão. Abaixo de 1240px a seção
   é uma coluna simétrica. */
@media (min-width: 1240px) {
	.garagem-contato-secao > h3.has-azul-claro-color {
		padding-left: 27px;
	}

	.garagem-contato-logos {
		padding-inline: 31px 61px;
	}

	.garagem-contato-secao .garagem-blocks-texto-imagem__imagem {
		position: relative;
		left: 3px;
	}

	.garagem-contato-secao .wp-block-buttons {
		padding-right: 28px;
	}
}

@media (min-width: 1024px) and (max-width: 1239px) {
	.garagem-contato-logos {
		gap: 0 12px;
	}
}

/* Contato no celular: coluna única com respiro menor entre foto, texto e logos. */
@media (max-width: 767px) {
	.garagem-contato-secao .garagem-blocks-texto-imagem {
		row-gap: 12px;
	}

	.garagem-contato-logos {
		gap: 16px 24px;
		margin-top: 16px;
	}
}

/* Contato: botão de contorno "Preencher formulário de interesse" com cantos de 12 px e caixa alta, como o protótipo. */
body.garagem-pagina-contato .garagem-blocks-texto-imagem__botao--secundario {
	border-radius: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Contato: rótulos dos botões do hero como os do hero da Home (16 px, peso 600, 0,1em, caixa alta); o protótipo usa 6,7 px, ilegível. */
@media (min-width: 782px) {
	body.garagem-pagina-contato .wp-block-garagem-banner .garagem-blocks-banner__botao {
		font-size: 16px;
		font-weight: 600;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		white-space: nowrap;
	}
}

/* "Enviar mensagem": maior, branco e com letra azul-garagem (9,84:1 sobre branco,
   acima do mínimo AA de 4,5:1). Raio pílula e recuo lateral vêm dos tokens. */
body .garagem-newsletter--contato .garagem-newsletter__botao {
	min-width: 16rem;
	min-height: 3.5rem;
	padding-inline: var(--wp--custom--botao--recuo, 1.75rem);
	border-radius: var(--wp--custom--raio--botao, 999px);
	background-color: var(--wp--preset--color--branco, #fff);
	color: var(--wp--preset--color--azul-garagem, #1e3f8a);
	font-size: 1.0625rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}