/*
 * Rodapé.
 *
 * Pinta o footer.php, que é marcação nossa (`cdm-rodape__*`) — nenhuma regra
 * daqui depende do referencia.css. A versão anterior, que corrigia a cópia
 * literal do gabarito VTEX, foi descartada junto com a cópia; o rodapé
 * recriado mais antigo continua em rodape.css.antigo, para consulta. Não
 * enfileire dois.
 *
 * Mobile-first, como manda o CONTRATO.md: o empilhado é a base e as colunas
 * entram em `min-width`. Quebras: 640px (dois por linha), 900px (quatro
 * colunas e cartões de loja lado a lado), 1200px (a intro das lojas ao lado
 * dos cartões, como no desenho aprovado).
 *
 * Régua do desenho (desktop ≥ 1200px):
 *   faixa de lojas ..... intro 1fr + três cartões 3fr, gap 40px
 *   cartão ............. borda 1px, raio 12px, padding 20px
 *   título das lojas ... 36px, "Casa do Médico" em amarelo e negrito
 *   filete do título ... 72×4px, amarelo, raio cheio
 *   colunas ............ quatro iguais, divisas verticais de 1px
 *   título de coluna ... 18px negrito, com filete de 28×3px embaixo
 *   assinatura ......... linha legal e copyright, texto corrido
 */

/* ==========================================================================
   Estrutura
   ========================================================================== */

.cdm-rodape {
	/*
	 * O ritmo vertical do rodapé inteiro sai destas duas medidas. Antes cada
	 * bloco escolhia a sua (redes 12/16, endereço 16/16, selos 16/16, e no
	 * desktop 20/24 contra 24/24) e o resultado era um pedaço colado e outro
	 * solto na mesma coluna. Quem precisar mudar o respiro muda aqui.
	 */
	--cdm-rodape-titulo: var(--cdm-e-4);   /* título → primeiro conteúdo */
	--cdm-rodape-divisa: var(--cdm-e-4);   /* acima e abaixo de cada filete */
	--cdm-rodape-fio: 6px;                 /* faixa que separa o rodapé do site */
	/* Sobra de altura que o alvo de toque de 44px cria em volta de um texto
	   de uma linha. Serve para descontar espaçamento óptico. */
	--cdm-rodape-ar: calc((var(--cdm-alvo-toque) - 1.5rem) / 2);

	background: var(--cdm-fundo);
	color: var(--cdm-texto-fraco);
	font-size: var(--cdm-t-md);
	line-height: var(--cdm-altura-normal);
	margin-top: var(--cdm-e-8);
}

/*
 * A divisória é SEMPRE o topo do corpo, e é a faixa grossa. Isso resolve os
 * dois casos com uma regra só:
 *
 *   com avaliações — o widget fica solto no topo, sem traço acima dele, e a
 *     faixa separa as avaliações das colunas (é o que o cliente pediu);
 *   sem avaliações — a seção colapsa, o corpo vira o primeiro bloco e a faixa
 *     cai naturalmente no topo do rodapé, dividindo-o do conteúdo.
 *
 * A assinatura não leva traço nenhum: a linha legal já se separa pelo tamanho
 * e pelo tom do texto.
 */
.cdm-rodape__corpo {
	border-top: var(--cdm-rodape-fio) solid var(--cdm-borda-quente);
}

.cdm-rodape__corpo {
	padding-block: var(--cdm-e-6);
}

/* ==========================================================================
   1. Avaliações
   ========================================================================== */

/*
 * Só a caixa: o conteúdo é injetado pelo loader do Trustindex e a marcação
 * dele não é nossa, então nada de estilizar por dentro — na próxima versão do
 * widget as classes mudam e a regra vira lixo silencioso.
 *
 * O respiro e o filete só entram quando o widget REALMENTE pintou. O loader
 * deixa um <div> vazio no lugar enquanto não responde (e quando não responde
 * nunca), então `:not(:empty)` na seção não serve — ela tem o container e o
 * script, e casaria sempre. O teste certo é o div interno ter conteúdo.
 *
 * Sem isso, um rodapé sem avaliações abria 64px de branco entre a faixa
 * grossa do topo e as colunas, e o filete fino do corpo passava a parecer a
 * divisória do rodapé.
 */
.cdm-rodape__avaliacoes:has( .cdm-container > div:not(:empty) ) {
	padding-block: var(--cdm-e-5);
}

/* ==========================================================================
   2. Colunas
   ========================================================================== */

.cdm-rodape__grade {
	display: grid;
	gap: var(--cdm-e-6);
}

.cdm-rodape__titulo {
	color: var(--cdm-azul-titulo);
	font-size: var(--cdm-t-lg);
	font-weight: var(--cdm-peso-forte);
	line-height: var(--cdm-altura-apertada);
	margin: 0 0 var(--cdm-rodape-titulo);
}

.cdm-rodape__titulo::after {
	background: var(--cdm-amarelo);
	border-radius: var(--cdm-raio-cheio);
	content: "";
	display: block;
	height: 3px;
	margin-top: var(--cdm-e-2);
	width: 28px;
}

/* --- listas de link --- */

/*
 * ATENÇÃO À ESPECIFICIDADE DAS <ul> DAQUI.
 *
 * O base.css zera lista com `ul[class], ol[class] { margin: 0; padding: 0 }`,
 * que pontua (0,1,1) — um atributo mais um tipo. Uma classe sozinha pontua
 * (0,1,0) e PERDE, mesmo vindo depois na cascata. Foi assim que margin-top e
 * padding-top das redes e dos selos foram descartados sem erro nenhum: a
 * borda e o flex da mesma regra aplicavam, só o espaçamento sumia.
 *
 * Por isso toda regra de margem ou padding em <ul> deste arquivo vem
 * qualificada por `.cdm-rodape`, chegando a (0,2,0). Ao criar uma lista nova
 * aqui, faça igual.
 */
.cdm-rodape__links,
.cdm-rodape__contatos,
.cdm-rodape__redes {
	list-style: none;
}

/*
 * Cada link tem 44px de altura para virar alvo de toque, mas o texto ocupa só
 * uma linha. Sobram 10px de ar acima do primeiro e abaixo do último, que o
 * olho lê como espaçamento — era o que deixava a lista de links afastada do
 * título enquanto a coluna do lado parecia colada. A margem negativa devolve
 * esse ar; o filete seguinte recompõe o seu, logo abaixo.
 */
.cdm-rodape .cdm-rodape__links,
.cdm-rodape .cdm-rodape__contatos {
	margin-block: calc(var(--cdm-rodape-ar) * -1);
	padding: 0;
}

.cdm-rodape__links a,
.cdm-rodape__contatos a {
	align-items: center;
	color: var(--cdm-texto-fraco);
	display: flex;
	gap: var(--cdm-e-3);
	/* Alvo de toque de 44px sem inflar a lista: o link ocupa a linha inteira e
	   o espaçamento entre itens vem da própria altura. */
	min-height: var(--cdm-alvo-toque);
	text-decoration: none;
	transition: color var(--cdm-transicao);
}

.cdm-rodape__links a:hover,
.cdm-rodape__links a:focus-visible,
.cdm-rodape__contatos a:hover,
.cdm-rodape__contatos a:focus-visible {
	color: var(--cdm-azul);
}

.cdm-rodape__marcador {
	color: var(--cdm-amarelo);
	flex: none;
	font-size: var(--cdm-t-xs);
}

.cdm-rodape__icone {
	color: var(--cdm-amarelo);
	flex: none;
	font-size: var(--cdm-t-md);
}

/* --- redes sociais --- */

.cdm-rodape .cdm-rodape__redes {
	border-top: 1px solid var(--cdm-cinza-200);
	display: flex;
	gap: var(--cdm-e-3);
	/* Soma o ar que a lista de contatos acima devolveu, para o filete ficar à
	   mesma distância do último telefone que o das outras colunas. */
	margin-top: calc(var(--cdm-rodape-divisa) + var(--cdm-rodape-ar));
	padding-left: 0;
	padding-top: var(--cdm-rodape-divisa);
}

/*
 * Glifo no amarelo da marca, a pedido do cliente (30/08/2026).
 *
 * #F5BE00 sobre branco dá 1,71:1 — abaixo dos 3:1 que a WCAG 1.4.11 pede
 * para elemento gráfico essencial. Aqui quem sustenta a leitura do controle é
 * o círculo da borda, e o nome de cada rede vem do aria-label do link, não do
 * desenho. Se um dia o glifo precisar passar em 3:1 sozinho, o caminho é
 * escurecer o amarelo até uns #8A6800 — que já é marrom e destoa da marca.
 */
.cdm-rodape__rede {
	align-items: center;
	border: 1px solid var(--cdm-cinza-300);
	border-radius: var(--cdm-raio-cheio);
	color: var(--cdm-amarelo);
	display: flex;
	height: var(--cdm-alvo-toque);
	justify-content: center;
	text-decoration: none;
	transition: background var(--cdm-transicao), border-color var(--cdm-transicao), color var(--cdm-transicao);
	width: var(--cdm-alvo-toque);
}

/* No hover a relação se inverte: o amarelo vira fundo e o glifo fica branco
   sobre ele. Preenchido, o botão fica bem mais legível que no repouso. */
.cdm-rodape__rede:hover,
.cdm-rodape__rede:focus-visible {
	background: var(--cdm-amarelo);
	border-color: var(--cdm-amarelo);
	color: var(--cdm-branco);
}

/* --- informações --- */

.cdm-rodape__info {
	display: flex;
	gap: var(--cdm-e-3);
	margin: 0;
}

/* O ícone tem que alinhar com a PRIMEIRA linha do texto, não com o centro do
   bloco: o endereço tem quatro linhas e centralizar joga o pino no meio. */
.cdm-rodape__info .cdm-rodape__icone {
	margin-top: var(--cdm-e-1);
}

.cdm-rodape__info--separada {
	border-top: 1px solid var(--cdm-cinza-200);
	margin-top: var(--cdm-rodape-divisa);
	padding-top: var(--cdm-rodape-divisa);
}

.cdm-rodape__info a {
	color: inherit;
	text-decoration: none;
	transition: color var(--cdm-transicao);
}

.cdm-rodape__info a:hover,
.cdm-rodape__info a:focus-visible {
	color: var(--cdm-azul);
}

/* Uma linha do endereço por linha da tela, como no desenho. */
.cdm-rodape__endereco {
	display: grid;
}

/* --- bandeiras e selos --- */

/*
 * Mosaico de bandeiras: OITO caixas idênticas, quatro por linha.
 *
 * O alinhamento não vem só do CSS. Cada arte é gravada num canvas comum de
 * 120x72 px (assets/img/pagamento/), já centralizada e já escalada para
 * ocupar a MESMA área visível que as vizinhas — as artes originais vinham com
 * margens e proporções diferentes, e era isso que fazia o Hipercard aparecer
 * o dobro do Elo dentro de caixas do mesmo tamanho.
 *
 * Como todos os arquivos têm exatamente as mesmas dimensões, aqui basta a
 * caixa ter a mesma proporção e a imagem preencher: o que estiver desalinhado
 * se corrige no gerador da arte, não neste arquivo.
 */
.cdm-rodape .cdm-rodape__miniaturas {
	display: grid;
	gap: var(--cdm-e-2);
	grid-template-columns: repeat(4, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	max-width: 320px;
	padding: 0;
}

.cdm-rodape__miniatura {
	align-items: center;
	/* 120x72 é a proporção do canvas das artes: a caixa acompanha, então a
	   arte nunca sobra nem falta espaço nas bordas. */
	aspect-ratio: 5 / 3;
	background: var(--cdm-superficie);
	border: 1px solid var(--cdm-cinza-200);
	border-radius: var(--cdm-raio-sm);
	display: flex;
	justify-content: center;
	overflow: hidden;
}

/*
 * `width: 100%` e não `max-width`: as oito imagens têm o mesmo tamanho de
 * arquivo, então preencher a caixa deixa todas rigorosamente do mesmo
 * tamanho, alinhadas nas duas direções. A margem de respiro já está dentro
 * do PNG.
 */
.cdm-rodape__miniatura img {
	display: block;
	height: 100%;
	object-fit: contain;
	width: 100%;
}

/* --- selos de segurança --- */

/*
 * Mesma disciplina do mosaico de bandeiras: as quatro artes são gravadas num
 * canvas comum de 180x96, já centralizadas e equalizadas por área visível
 * (todas em ~80 de lado equivalente), e aqui só ganham a caixa. Sem moldura —
 * selo tem forma e cor próprias, e emoldurar faz cada um parecer um botão.
 *
 * O canvas é alto (96, não 72) por causa do ANVISA: ele é quase quadrado e,
 * num canvas baixo, batia no teto e ficava menor que os três selos largos.
 *
 * Duas colunas: são artes largas (o "SITE BLINDADO" tem 165px de arte útil) e
 * em quatro colunas viravam tarja ilegível.
 */
.cdm-rodape .cdm-rodape__selos {
	border-top: 1px solid var(--cdm-borda-quente);
	display: grid;
	/* Mesmo vão nas duas direções: é o que faz a grade ler como mosaico. */
	gap: var(--cdm-e-3);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	list-style: none;
	margin-top: var(--cdm-rodape-divisa);
	max-width: 320px;
	padding: var(--cdm-rodape-divisa) 0 0;
}

.cdm-rodape__selos li {
	align-items: center;
	/* 180x96, a proporção do canvas das artes. */
	aspect-ratio: 15 / 8;
	display: flex;
	justify-content: center;
}

.cdm-rodape__selos img {
	display: block;
	height: 100%;
	object-fit: contain;
	width: 100%;
}

/* ==========================================================================
   3. Assinatura
   ========================================================================== */

/* Sem fundo próprio: o rodapé inteiro é uma superfície só. A assinatura já se
   separa das colunas pelo tamanho e pelo tom do texto. */
.cdm-rodape__assinatura {
	padding-block: var(--cdm-e-5);
}

.cdm-rodape__legal {
	color: var(--cdm-texto-fraco);
	display: grid;
	font-size: var(--cdm-t-sm);
	gap: var(--cdm-e-1);
	margin: 0;
}

/* ==========================================================================
   ≥ 640px — dois por linha
   ========================================================================== */

@media (min-width: 640px) {

	.cdm-rodape__grade {
		gap: var(--cdm-e-10) var(--cdm-e-8);
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ==========================================================================
   ≥ 900px — a grade do desenho
   ========================================================================== */

@media (min-width: 900px) {

	/* Da grade de quatro colunas em diante sobra largura, e o respiro cresce.
	   Uma linha por medida: todo bloco acompanha. */
	.cdm-rodape {
		--cdm-rodape-titulo: var(--cdm-e-6);
		--cdm-rodape-divisa: var(--cdm-e-6);
	}

	.cdm-rodape__corpo {
		padding-block: var(--cdm-e-8);
	}

	.cdm-rodape__titulo::after {
		margin-top: var(--cdm-e-3);
	}

	.cdm-rodape__legal {
		font-size: var(--cdm-t-base);
	}

	.cdm-rodape__grade {
		gap: 0;
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/*
	 * Divisa vertical entre colunas. Vai na borda ESQUERDA de cada coluna
	 * menos a primeira: assim a última não fica com um filete solto na
	 * direita se a grade um dia tiver menos de quatro colunas.
	 */
	.cdm-rodape__coluna + .cdm-rodape__coluna {
		border-left: 1px solid var(--cdm-cinza-200);
		padding-left: var(--cdm-e-8);
	}

	.cdm-rodape__coluna:not(:last-child) {
		padding-right: var(--cdm-e-8);
	}

}

/* ==========================================================================
   ≥ 1200px — intro das lojas ao lado dos cartões
   ========================================================================== */

@media (min-width: 1200px) {

	.cdm-rodape__corpo {
		padding-block: var(--cdm-e-10);
	}

	/*
	 * Colunas propositalmente desiguais. Com quatro de 1fr, "Barra da Tijuca,
	 * Rio de Janeiro/RJ" quebrava em duas linhas por uns poucos pixels, e a
	 * arte dos selos sobrava espaço à direita. As frações abaixo dão o
	 * excedente para quem precisa dele.
	 */
	.cdm-rodape__grade {
		grid-template-columns: 1fr 1fr 1.2fr 1.05fr;
	}
}

/* ==========================================================================
   Movimento reduzido
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	.cdm-rodape__links a,
	.cdm-rodape__contatos a,
	.cdm-rodape__rede,
	.cdm-rodape__info a {
		transition: none;
	}
}