@charset "UTF-8";
/* Bolinha de cor de cada acabamento — partilhada pela ficha (artigo.php) e pelo
   Estúdio 3D (estudio3d.php). */

.ai-dot {
	flex: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--c, #ccc);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}

/* Cor de cada acabamento, definida por classe (não por "style" inline —
   a CSP do site é script-src/style-src 'self' sem unsafe-inline, por isso
   um style="--c:..." no HTML fica sempre bloqueado e a bolinha cai para o
   #ccc/--c de reserva acima). Os valores têm de acompanhar
   includes/acabamentos.php se algum dia mudar uma cor. */
.ai-dot--inox     { --c: #B9B6AA; }
.ai-dot--natural  { --c: #B4B8C2; }
.ai-dot--bronze   { --c: #8C7853; }
.ai-dot--dourado  { --c: #E8C24A; }
.ai-dot--branco   { --c: #FFFFFF; }
.ai-dot--preto    { --c: #1A1A1A; }
.ai-dot--verde    { --c: #006400; }
.ai-dot--castanho { --c: #996633; }

/* acabamento anodizado — alumínio metalizado tingido com a cor */
.ai-dot--metal {
	background-image:
		linear-gradient(135deg,
			rgba(255, 255, 255, 0.85) 0%,
			rgba(255, 255, 255, 0.15) 24%,
			rgba(255, 255, 255, 0) 42%,
			rgba(0, 0, 0, 0.12) 62%,
			rgba(0, 0, 0, 0.42) 100%),
		linear-gradient(var(--c, #b9b6aa), var(--c, #b9b6aa));
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.18),
		inset 0 1px 1px rgba(255, 255, 255, 0.5);
}