/* Selo com logo e ilustracao no topo de servicos (29/10/2026). Sem bordas de 1px. */
.zf-svc-selo {
	margin: 0;
	padding: 6px 16px 6px 6px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border-radius: 999px;
	background: rgba(122, 30, 246, 0.16);
	font-size: 13px;
	font-weight: 700;
	color: #e4e4e7;
}
.zf-svc-selo__logo {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #1e1b2a;
	display: flex;
	align-items: center;
	justify-content: center;
}
.zf-svc-selo__logo img { width: auto; height: 20px; display: block; }
.zf-svc-visual {
	width: 100%;
	max-width: 60rem;
	margin: 0;
	filter: drop-shadow(0 0 60px rgba(97, 9, 215, 0.25));
}
.zf-svc-visual svg { display: block; width: 100%; height: auto; }

/* Montagem da ilustracao (29/10/2026) */
.zf-sv-montar .zf-sv-p {
	opacity: 0;
	transform: translate3d(0, 18px, 0) scale(0.97);
	transform-box: fill-box;
	transform-origin: 50% 50%;
}
.zf-sv-montar .zf-sv-flut { transform: translate3d(28px, 0, 0) scale(0.9); }
.zf-sv-montar .zf-sv-selo { transform: scale(0.4); }
.zf-sv-montar .zf-sv-barra { transform: scaleX(0); transform-box: fill-box; transform-origin: 0 50%; }
.zf-sv-montado .zf-sv-p {
	opacity: 1;
	transform: none;
	transition: opacity 0.55s ease, transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: calc(var(--i, 0) * 110ms);
}
.zf-sv-montado .zf-sv-selo { transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); transition-delay: calc(var(--i, 0) * 110ms); }
.zf-sv-montado .zf-sv-barra { transform: scaleX(1); transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 2.4s; }
.zf-sv-montado .zf-sv-pulso { transform-box: fill-box; transform-origin: 50% 50%; animation: zf-sv-pulso 2.4s ease-in-out 3s infinite; }
@keyframes zf-sv-pulso { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) {
	.zf-svc-visual * { animation: none !important; transition: none !important; }
}

/* Marcadores explicativos sobre a ilustracao (29/10/2026) */
.zf-svc-visual { position: relative; }
.zf-sv-dicas { position: absolute; inset: 0; aspect-ratio: 960 / 600; height: auto; }
.zf-sv-dica {
	position: absolute;
	width: 24px;
	height: 24px;
	margin: -12px 0 0 -12px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #7a1ef6;
	box-shadow: 0 0 0 4px rgba(122, 30, 246, 0.25), 0 6px 16px rgba(10, 10, 11, 0.35);
	color: #ffffff;
	font: 800 11px/1 "Plus Jakarta Sans", system-ui, sans-serif;
	cursor: pointer;
	z-index: 2;
	transition: transform 0.2s ease, background-color 0.2s ease;
}
.zf-sv-dica::before {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	background: rgba(122, 30, 246, 0.35);
	animation: zf-sv-onda 2.4s ease-out infinite;
	animation-delay: calc(var(--d, 0) * 200ms);
	z-index: -1;
}
@keyframes zf-sv-onda { 0% { transform: scale(1); opacity: 0.7; } 80%, 100% { transform: scale(1.9); opacity: 0; } }
.zf-sv-dica:hover,
.zf-sv-dica:focus-visible { transform: scale(1.12); background: #9a54f8; z-index: 5; }
.zf-sv-dica:focus-visible { outline: 2px solid #bd8efa; outline-offset: 3px; }
.zf-sv-dica__n { position: relative; }

.zf-sv-dica__tip {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 12px);
	width: 250px;
	padding: 12px 14px;
	border-radius: 12px;
	background: #18181b;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
	color: #c4c4cc;
	font: 500 13px/1.5 "Plus Jakarta Sans", system-ui, sans-serif;
	text-align: left;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translate3d(-50%, 6px, 0);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.zf-sv-dica__tip strong { display: block; margin-bottom: 3px; font-size: 13.5px; font-weight: 700; color: #ffffff; }
.zf-sv-dica:hover .zf-sv-dica__tip,
.zf-sv-dica:focus .zf-sv-dica__tip { opacity: 1; visibility: visible; transform: translate3d(-50%, 0, 0); }
.zf-sv-dica--esq .zf-sv-dica__tip { left: auto; right: -8px; transform: translate3d(0, 6px, 0); }
.zf-sv-dica--esq:hover .zf-sv-dica__tip,
.zf-sv-dica--esq:focus .zf-sv-dica__tip { transform: none; }
.zf-sv-dica--dir .zf-sv-dica__tip { left: -8px; transform: translate3d(0, 6px, 0); }
.zf-sv-dica--dir:hover .zf-sv-dica__tip,
.zf-sv-dica--dir:focus .zf-sv-dica__tip { transform: none; }
.zf-sv-dica--baixo .zf-sv-dica__tip { bottom: auto; top: calc(100% + 12px); }

.zf-sv-legenda { margin-top: 14px; font-size: 13px; color: #8b8b95; text-align: center; }

/* Os marcadores entram depois da montagem */
.zf-sv-montar .zf-sv-dica { opacity: 0; transform: scale(0.4); }
.zf-sv-montado .zf-sv-dica { opacity: 1; transform: none; transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); transition-delay: calc(2.6s + var(--d, 0) * 80ms); }
.zf-sv-montado .zf-sv-dica:hover,
.zf-sv-montado .zf-sv-dica:focus-visible { transform: scale(1.12); transition-delay: 0s; }

@media (max-width: 639px) {
	.zf-sv-dica { width: 20px; height: 20px; margin: -10px 0 0 -10px; font-size: 10px; }
	.zf-sv-dica__tip { width: 210px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
	.zf-sv-dica::before { animation: none; }
}
/* Ajustes (29/10/2026): camada dos marcadores so sobre a ilustracao; busca com cursor piscando */
.zf-sv-dicas { inset: auto; left: 0; top: 0; width: 100%; }
.zf-sv-montar .zf-sv-busca { transform: translate3d(0, -10px, 0) scale(0.97); transform-origin: 50% 0; }
.zf-sv-montado .zf-sv-cursor { animation: zf-sv-cursor 1s steps(1) 3s infinite; }
@keyframes zf-sv-cursor { 50% { opacity: 0; } }