/**
 * Componentes
 *
 * Cada peça reutilizável do site. Nome de classe em português, igual ao do
 * PHP, para que ninguém precise traduzir mentalmente entre template e CSS.
 */

/* ---------------------------------------------------------------------
 * Botões
 * ------------------------------------------------------------------ */

.botao {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: var(--e-3) var(--e-6);
	border: var(--borda-media) solid transparent;
	border-radius: var(--raio-2);
	font-family: var(--fonte-titulo);
	font-size: var(--t-sm);
	font-weight: var(--peso-forte);
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--transicao-rapida), border-color var(--transicao-rapida), color var(--transicao-rapida);
}

.botao--principal {
	background: var(--acento);
	border-color: var(--acento);
	color: var(--texto-inverso);
}

.botao--principal:hover {
	background: color-mix(in srgb, var(--acento) 85%, black);
	border-color: color-mix(in srgb, var(--acento) 85%, black);
	color: var(--texto-inverso);
}

.botao--secundario {
	background: transparent;
	border-color: var(--linha-divisoria-forte);
	color: var(--texto);
}

.botao--secundario:hover {
	border-color: var(--acento);
	color: var(--acento-texto);
}

.botao__nota {
	margin-top: 2px;
	font-size: var(--t-xs);
	font-weight: var(--peso-normal);
	opacity: 0.8;
	letter-spacing: 0;
}

/* ---------------------------------------------------------------------
 * Etiquetas
 * ------------------------------------------------------------------ */

.etiquetas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--e-2);
	margin: 0;
}

.etiquetas__titulo {
	font-size: var(--t-xs);
	font-weight: var(--peso-forte);
	letter-spacing: var(--espaco-letra-rotulo);
	text-transform: uppercase;
	color: var(--texto-3);
}

.etiqueta {
	display: inline-block;
	padding: var(--e-1) var(--e-3);
	background: var(--fundo-2);
	border: var(--borda-fina) solid var(--linha-divisoria);
	border-radius: var(--raio-3);
	font-size: var(--t-xs);
	font-weight: var(--peso-medio);
	text-decoration: none;
	color: var(--texto-2);
	transition: border-color var(--transicao-rapida), color var(--transicao-rapida);
}

a.etiqueta:hover {
	border-color: var(--acento);
	color: var(--acento-texto);
}

.etiqueta--filtro {
	padding: var(--e-2) var(--e-4);
	font-size: var(--t-sm);
}

.filtro-dores ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-2);
	margin-bottom: var(--bloco-y);
}

/* ---------------------------------------------------------------------
 * Trilha
 * ------------------------------------------------------------------ */

.trilha {
	margin-bottom: var(--e-6);
	font-size: var(--t-xs);
	color: var(--texto-3);
}

.trilha ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--e-2);
	margin: 0;
	list-style: none;
}

.trilha li + li::before {
	margin-right: var(--e-2);
	content: '/';
	color: var(--linha-divisoria-forte);
}

.trilha a {
	text-decoration: none;
}

.trilha [aria-current='page'] {
	color: var(--texto-2);
}

/* ---------------------------------------------------------------------
 * Cartões
 * ------------------------------------------------------------------ */

.cartao {
	height: 100%;
	background: var(--superficie);
	border: var(--borda-fina) solid var(--linha-divisoria);
	border-radius: var(--raio-3);
	overflow: hidden;
	transition: border-color var(--transicao);
}

/*
 * Sem elevação e sem deslocamento no hover.
 *
 * A direção aprovada não tem sombra: profundidade vem do fio e do contraste
 * entre papel e placa. O retorno de interação é só a borda ganhando a cor da
 * linha e a foto escurecendo um pouco.
 */
.cartao:hover {
	border-color: var(--acento);
}

.cartao__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

.cartao__imagem {
	aspect-ratio: 4 / 3;
	background: var(--fundo-2);
	overflow: hidden;
}

.cartao__imagem img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity var(--transicao-lenta);
}

.cartao:hover .cartao__imagem img {
	opacity: 0.82;
}

.cartao__texto {
	display: flex;
	flex-direction: column;
	gap: var(--e-2);
	padding: var(--e-5);
}

/* A dor aparece acima do nome porque é ela que a pessoa reconhece.
   O nome da linha vem depois do problema, nunca antes. */
.cartao__dor {
	font-size: var(--t-xs);
	font-weight: var(--peso-forte);
	letter-spacing: var(--espaco-letra-rotulo);
	text-transform: uppercase;
	color: var(--acento-texto);
}

.cartao__titulo {
	font-size: var(--t-lg);
}

.cartao__resumo,
.cartao__meta {
	font-size: var(--t-sm);
	color: var(--texto-2);
}

/* ---------------------------------------------------------------------
 * Bloco de seção
 *
 * Usado pela ficha de solução, pela ficha de case e pelas listagens.
 * ------------------------------------------------------------------ */

.bloco {
	padding-block: var(--secao-y);
	border-bottom: var(--borda-fina) solid var(--linha-divisoria);
}

.bloco__titulo {
	margin-bottom: var(--e-6);
	font-size: var(--t-xl);
}

.bloco__titulo::after {
	display: block;
	width: 48px;
	height: var(--borda-forte);
	margin-top: var(--e-4);
	background: var(--acento);
	content: '';
}

/* ---------------------------------------------------------------------
 * Chamada para ação
 * ------------------------------------------------------------------ */

.cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--e-5);
	margin-top: var(--secao-y);
	padding: var(--e-7);
	background: var(--fundo-2);
	border-left: var(--borda-forte) solid var(--acento);
	border-radius: var(--raio-3);
}

.cta__titulo {
	font-family: var(--fonte-titulo);
	font-size: var(--t-lg);
	font-weight: var(--peso-forte);
	line-height: var(--altura-titulo);
	max-width: 32ch;
}

/* ---------------------------------------------------------------------
 * Busca
 * ------------------------------------------------------------------ */

.busca {
	max-width: var(--largura-estreita);
	margin-bottom: var(--bloco-y);
}

.busca__campo {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-2);
}

.busca__input {
	flex: 1 1 240px;
	min-width: 0;
	min-height: 48px;
	padding: var(--e-3) var(--e-4);
	background: var(--superficie);
	border: var(--borda-fina) solid var(--linha-divisoria-forte);
	border-radius: var(--raio-2);
	font-size: var(--t-base);
}

.busca__input:focus-visible {
	border-color: var(--acento);
}

/* ---------------------------------------------------------------------
 * Tabelas de conteúdo
 * ------------------------------------------------------------------ */

.tabela-rolagem {
	overflow-x: auto;
	margin-top: var(--e-6);
	-webkit-overflow-scrolling: touch;
}

.tabela {
	min-width: 480px;
	font-size: var(--t-sm);
}

.tabela__legenda {
	margin-bottom: var(--e-3);
	text-align: left;
	font-family: var(--fonte-dado);
	font-size: var(--t-xs);
	font-weight: var(--peso-medio);
	letter-spacing: var(--espaco-letra-rotulo);
	text-transform: uppercase;
	color: var(--texto-3);
}

.tabela th,
.tabela td {
	padding: var(--e-3) var(--e-4);
	text-align: left;
	vertical-align: top;
	border-bottom: var(--borda-fina) solid var(--linha-divisoria);
}

.tabela thead th {
	border-bottom-color: var(--linha-divisoria-forte);
	font-family: var(--fonte-dado);
	font-size: var(--t-xs);
	font-weight: var(--peso-medio);
	letter-spacing: var(--espaco-letra-rotulo);
	text-transform: uppercase;
	color: var(--texto-3);
	white-space: nowrap;
}

/*
 * O código comercial é dado, e dado se lê em monoespaçada.
 *
 * tabular-nums alinha os algarismos em coluna: VLQ 300 e VLQ 306 ficam com
 * os números um embaixo do outro, que é o que faz a tabela ser varrida com
 * o olho em vez de lida linha a linha. Quem especifica procura o código,
 * não a descrição.
 */
.tabela tbody th {
	font-family: var(--fonte-dado);
	font-weight: var(--peso-medio);
	font-variant-numeric: tabular-nums;
	color: var(--texto);
	white-space: nowrap;
}

/* ---------------------------------------------------------------------
 * Vídeo sob clique
 * ------------------------------------------------------------------ */

.video {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--vlm-grafite);
	border-radius: var(--raio-3);
	overflow: hidden;
}

.video iframe,
.video__play {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.video__play {
	padding: 0;
	background: none;
	cursor: pointer;
}

.video__play img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.85;
	transition: opacity var(--transicao), transform var(--transicao-lenta);
}

.video__play:hover img {
	opacity: 1;
	transform: scale(1.02);
}

.video__icone {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 72px;
	height: 72px;
	transform: translate(-50%, -50%);
	background: var(--acento);
	border-radius: 50%;
	box-shadow: var(--sombra-3);
}

.video__icone::after {
	position: absolute;
	top: 50%;
	left: 54%;
	width: 0;
	height: 0;
	border-left: 20px solid var(--texto-inverso);
	border-top: 12px solid transparent;
	border-bottom: 12px solid transparent;
	transform: translate(-50%, -50%);
	content: '';
}

/* ---------------------------------------------------------------------
 * Galeria
 * ------------------------------------------------------------------ */

.galeria {
	display: grid;
	gap: var(--e-4);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	margin-top: var(--e-6);
}

.galeria img {
	width: 100%;
	border-radius: var(--raio-2);
}

/* ---------------------------------------------------------------------
 * Arquivos para download
 * ------------------------------------------------------------------ */

.arquivos {
	display: grid;
	gap: var(--e-3);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}

.arquivo {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--e-4);
	padding: var(--e-4);
	background: var(--superficie);
	border: var(--borda-fina) solid var(--linha-divisoria);
	border-radius: var(--raio-2);
	text-decoration: none;
	transition: border-color var(--transicao-rapida), background var(--transicao-rapida);
}

.arquivo:hover {
	border-color: var(--acento);
	background: var(--fundo-2);
	color: inherit;
}

.arquivo__tipo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	padding: var(--e-1) var(--e-2);
	background: var(--vlm-grafite);
	border-radius: var(--raio-1);
	font-family: var(--fonte-dado);
	font-size: var(--t-xs);
	font-weight: var(--peso-forte);
	color: var(--texto-inverso);
}

.arquivo__nome {
	font-size: var(--t-sm);
	font-weight: var(--peso-medio);
	overflow-wrap: anywhere;
}

.arquivo__peso {
	font-size: var(--t-xs);
	color: var(--texto-3);
	white-space: nowrap;
}

/* ---------------------------------------------------------------------
 * Logotipo
 *
 * O SVG herda a cor do texto, então a troca de tema já resolve a versão:
 * vermelho no claro, branco no escuro. Largura em ch para acompanhar a
 * escala do resto sem número mágico.
 * ------------------------------------------------------------------ */

.marca {
	display: block;
	width: clamp(118px, 13vw, 156px);
	color: var(--vlm-vermelho);
	text-decoration: none;
}

.marca__svg {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------------
 * Botão de tema
 *
 * Só um dos dois ícones aparece por vez, e quem decide é o CSS — assim o
 * botão já chega certo mesmo antes do JavaScript rodar.
 * ------------------------------------------------------------------ */

.tema {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: var(--borda-fina) solid var(--linha-divisoria-forte);
	border-radius: var(--raio-0);
	background: transparent;
	color: var(--texto-2);
	cursor: pointer;
	transition: color var(--transicao-rapida), border-color var(--transicao-rapida);
}

.tema:hover {
	color: var(--texto);
	border-color: var(--texto-3);
}

.tema svg {
	width: 18px;
	height: 18px;
}

/*
 * Todas as regras de display levam .tema na frente de propósito.
 *
 * `.tema svg` tem especificidade 0,1,1 e vencia um `.tema__sol` solto, de
 * 0,1,0 — o resultado era os dois ícones aparecendo juntos no modo claro.
 * Empatando a especificidade, quem decide passa a ser a ordem, que é o que
 * se quer aqui. Erro encontrado olhando o site, não lendo o código.
 */
.tema .tema__lua { display: block; }
.tema .tema__sol { display: none; }

@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) .tema .tema__lua { display: none; }
	:root:not([data-theme='light']) .tema .tema__sol { display: block; }
}

:root[data-theme='dark'] .tema .tema__lua { display: none; }
:root[data-theme='dark'] .tema .tema__sol { display: block; }

/* ---------------------------------------------------------------------
 * Seletor de idioma
 *
 * Código de duas letras, inline, sem bandeira — bandeira representa país,
 * não idioma. O atual não é link e ganha um fio embaixo, no acento: é a
 * única marcação, porque cor sozinha não informa quem não distingue cor.
 * ------------------------------------------------------------------ */

.idiomas {
	display: flex;
	align-items: center;
	gap: 2px;
}

.idioma {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: var(--e-1) var(--e-2);
	font-family: var(--fonte-dado);
	font-size: var(--t-xs);
	font-weight: var(--peso-medio);
	letter-spacing: 0.09em;
	text-decoration: none;
	color: var(--texto-3);
	transition: color var(--transicao-rapida);
}

.idioma:hover,
.idioma:focus-visible {
	color: var(--texto);
}

.idioma--atual {
	color: var(--texto);
	box-shadow: inset 0 -2px 0 var(--acento-texto);
}

.idiomas__sep {
	width: 1px;
	height: 13px;
	background: var(--linha-divisoria-forte);
}

/* ---------------------------------------------------------------------
 * Seção — o ritmo padrão de qualquer página longa
 * ------------------------------------------------------------------ */

.secao {
	padding-block: var(--secao-y);
	border-top: var(--borda-fina) solid var(--linha-divisoria);
}

.secao__topo {
	max-width: 56ch;
	margin-bottom: var(--bloco-y);
}

.secao__titulo {
	font-size: var(--t-xl);
}

.secao__texto {
	margin-top: var(--e-3);
	font-size: var(--t-sm);
	color: var(--texto-2);
}

.secao__acao {
	margin-top: var(--e-7);
}

/* ---------------------------------------------------------------------
 * Régua de dados
 *
 * Os números que sustentam o preço. Monoespaçada porque são dado, e com
 * fio em cima porque fecham a abertura.
 * ------------------------------------------------------------------ */

.regua {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-2) var(--e-7);
	margin-top: var(--e-7);
	padding-top: var(--e-3);
	border-top: var(--borda-fina) solid var(--linha-divisoria);
	font-family: var(--fonte-dado);
	font-size: var(--t-xs);
	color: var(--texto-3);
}

/* ---------------------------------------------------------------------
 * Catálogo
 *
 * Foto preenchendo a célula, sem padding interno. Nome e categoria
 * embaixo, na mesma linha de base. Nenhuma borda em volta: o fio é o
 * contorno interno da placa, e só.
 * ------------------------------------------------------------------ */

.catalogo {
	display: grid;
	gap: var(--e-7) var(--e-4);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.item {
	min-width: 0;
}

.item__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.item__foto {
	display: block;
	background: var(--superficie);
	box-shadow: var(--fio-interno);
	overflow: hidden;
}

.item__foto img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: opacity var(--transicao);
}

.item__link:hover .item__foto img {
	opacity: 0.8;
}

/* Sem foto, a célula guarda o lugar em vez de encolher. */
.item__sem-foto {
	display: block;
	aspect-ratio: 4 / 3;
	background:
		repeating-linear-gradient(
			45deg,
			transparent,
			transparent 7px,
			var(--grade) 7px,
			var(--grade) 8px
		);
}

.item__nome {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--e-3);
	margin-top: var(--e-3);
}

.item__titulo {
	font-family: var(--fonte-titulo);
	font-size: var(--t-base);
	font-weight: var(--peso-forte);
	color: var(--texto);
}

.item__categoria {
	flex: none;
	font-family: var(--fonte-dado);
	font-size: var(--t-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--texto-3);
}

/* ---------------------------------------------------------------------
 * Tabela de linhas
 * ------------------------------------------------------------------ */

.rolagem {
	overflow-x: auto;
}

.tabela-linhas {
	width: 100%;
	min-width: 520px;
	border-collapse: collapse;
	font-size: var(--t-sm);
}

.tabela-linhas caption {
	padding-bottom: var(--e-3);
	text-align: left;
	font-family: var(--fonte-dado);
	font-size: var(--t-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--texto-3);
}

.tabela-linhas th,
.tabela-linhas td {
	padding: var(--e-3) var(--e-5) var(--e-3) 0;
	text-align: left;
	vertical-align: top;
	border-top: var(--borda-fina) solid var(--linha-divisoria);
}

.tabela-linhas thead th {
	border-top: 0;
	padding-top: 0;
	font-family: var(--fonte-dado);
	font-size: var(--t-xs);
	font-weight: var(--peso-medio);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--texto-3);
	white-space: nowrap;
}

.tabela-linhas tbody th {
	font-family: var(--fonte-dado);
	font-weight: var(--peso-medio);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--texto);
}

.tabela-linhas tbody th a {
	text-decoration: none;
	color: inherit;
}

.tabela-linhas tbody th a:hover {
	color: var(--acento-texto);
}

.tabela-linhas tbody td {
	color: var(--texto-2);
}

.tabela-linhas tbody tr:last-child th,
.tabela-linhas tbody tr:last-child td {
	border-bottom: var(--borda-fina) solid var(--linha-divisoria);
}

/* A amostra é identidade, não texto: usa a cor cheia do manual. */
.amostra {
	display: inline-block;
	width: 26px;
	height: 10px;
	margin-right: var(--e-2);
	vertical-align: 1px;
	background: var(--texto-3);
	box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.35);
}

.amostra.linha-frog { background: var(--linha-frog-1); }
.amostra.linha-frog-quadra { background: var(--linha-frog-quadra-1); }
.amostra.linha-tuca { background: var(--linha-tuca-2); }
.amostra.linha-ema { background: var(--linha-ema-1); }
.amostra.linha-apis { background: var(--linha-apis-1); }
.amostra.linha-zigus { background: var(--linha-zigus-1); }
.amostra.linha-umi { background: var(--linha-umi-1); }

/* ---------------------------------------------------------------------
 * Canais de contato
 *
 * Vêm antes do formulário na página. Telefone e WhatsApp em corpo maior
 * que o rótulo: quem está com o celular na mão não deve precisar procurar.
 * ------------------------------------------------------------------ */

.canais {
	display: grid;
	gap: var(--e-7) var(--e-8);
	grid-template-columns: minmax(0, 1fr);
	padding-block: var(--bloco-y);
	border-top: var(--borda-fina) solid var(--linha-divisoria);
	border-bottom: var(--borda-fina) solid var(--linha-divisoria);
}

@media (min-width: 48rem) {
	.canais {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

.canais__diretos,
.canais__unidades {
	display: flex;
	flex-direction: column;
	gap: var(--e-5);
	margin: 0;
}

.canal,
.unidade {
	display: flex;
	flex-direction: column;
	gap: var(--e-1);
	margin: 0;
}

.canal__rotulo,
.unidade__rotulo {
	font-family: var(--fonte-dado);
	font-size: var(--t-xs);
	letter-spacing: var(--espaco-letra-rotulo);
	text-transform: uppercase;
	color: var(--texto-3);
}

.canal__valor {
	font-size: var(--t-lg);
	font-weight: var(--peso-forte);
	color: var(--texto);
	text-decoration: none;
	/* Alvo de toque confortável sem inflar a altura da linha. */
	padding-block: var(--e-1);
}

.canal__valor:hover,
.canal__valor:focus-visible {
	color: var(--acento-texto);
}

.unidade__cidade {
	font-size: var(--t-base);
	font-weight: var(--peso-forte);
	color: var(--texto);
}

.unidade__endereco {
	font-size: var(--t-sm);
	color: var(--texto-2);
}

/* ---------------------------------------------------------------------
 * Formulário
 *
 * Campo em coluna única, rótulo acima. Formulário de duas colunas economiza
 * tela e custa erro de preenchimento — e aqui cada envio perdido é um
 * cliente perdido.
 * ------------------------------------------------------------------ */

.secao--formulario {
	border-top: 0;
}

.formulario {
	display: flex;
	flex-direction: column;
	gap: var(--e-5);
	max-width: 46rem;
}

.formulario__campo {
	display: flex;
	flex-direction: column;
	gap: var(--e-2);
	margin: 0;
}

.formulario__campo label {
	font-family: var(--fonte-dado);
	font-size: var(--t-xs);
	letter-spacing: var(--espaco-letra-rotulo);
	text-transform: uppercase;
	color: var(--texto-3);
}

.formulario__req {
	color: var(--acento-texto);
}

.formulario input,
.formulario select,
.formulario textarea {
	width: 100%;
	padding: var(--e-3) var(--e-4);
	font-family: var(--fonte-texto);
	font-size: var(--t-base);
	color: var(--texto);
	background: var(--superficie);
	border: var(--borda-fina) solid var(--linha-divisoria-forte);
	border-radius: var(--raio-0);
	/* Altura mínima de alvo de toque. */
	min-height: 48px;
	transition: border-color var(--transicao-rapida);
}

.formulario textarea {
	min-height: 9rem;
	resize: vertical;
	line-height: var(--altura-texto);
}

.formulario input:focus-visible,
.formulario select:focus-visible,
.formulario textarea:focus-visible {
	border-color: var(--acento-texto);
	outline: var(--borda-media) solid var(--acento-texto);
	outline-offset: 1px;
}

/*
 * A armadilha de robô. Fica fora da tela em vez de display:none, porque
 * alguns robôs ignoram campo com display:none — e leitor de tela não cai
 * nela por causa do aria-hidden no HTML.
 */
.formulario__armadilha {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.formulario__acoes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--e-4);
	margin: var(--e-2) 0 0;
}

.formulario__nota {
	font-size: var(--t-xs);
	color: var(--texto-3);
}

/* ---------------------------------------------------------------------
 * Aviso
 * ------------------------------------------------------------------ */

.aviso {
	margin: 0 0 var(--e-5);
	padding: var(--e-4) var(--e-5);
	max-width: 46rem;
	font-size: var(--t-sm);
	background: var(--fundo-2);
	box-shadow: var(--fio-interno);
	border-left: var(--borda-forte) solid var(--texto-3);
}

.aviso--erro {
	border-left-color: var(--erro);
	color: var(--texto);
}