/* ==========================================================================
   Serviços — estilos específicos (Figma Desktop - Serviços 19627:2281)
   O hero reutiliza .page-hero (main.css); as etapas reutilizam .card-grid
   e .info-card. Aqui ficam só os ajustes desta página.
   ========================================================================== */

/* ---- Hero ------------------------------------------------------------------ */
.servicos-hero__title { max-width: 660px; }
.servicos-hero__title .accent { color: var(--c-mint); }
.servicos-hero__title, .servicos-hero__lead {
	opacity: 0; transform: translateY(24px);
	animation: servicosHeroIn 1s var(--ease-out) forwards;
}
.servicos-hero__title { animation-delay: 0.15s; }
.servicos-hero__lead { animation-delay: 0.4s; max-width: 429px; }
@keyframes servicosHeroIn { to { opacity: 1; transform: none; } }

/* ---- Lista de serviços (usa .detail-row do main.css) ---------------------- */
.servicos-list { padding-block: var(--section-y-sm); overflow: hidden; }
.servicos-list__extra {
	margin-top: 80px; display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center;
}
.servicos-list__extra-text { font-size: 20px; line-height: 1.5; color: var(--c-ink); max-width: 640px; }

/* ---- Processo -------------------------------------------------------------- */
.servicos-process { padding-block: var(--section-y-sm); }
.servicos-process__head { margin-bottom: 60px; }
.servicos-process__head .section-head__text { max-width: 676px; }
.servicos-step__num {
	display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
	height: 43px; padding: 0 9px; border-radius: var(--radius-sm);
	background: var(--c-ice); color: var(--c-cyan);
	font-size: 14px; line-height: 21px; font-weight: 700; letter-spacing: 0.06em;
	transition: background-color 0.4s var(--ease-out), color 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.servicos-step__dot {
	width: 8px; height: 8px; flex: 0 0 8px; background: currentColor;
	transition: transform 0.4s var(--ease-out);
}
.servicos-step__index { display: inline-block; }
/* Micro-animação: ao passar o cursor, o número enche-se de ciano e fica branco */
.servicos-step:hover .servicos-step__num,
.servicos-step:focus-within .servicos-step__num { background: var(--c-cyan); color: var(--c-white); transform: translateY(-2px); }
.servicos-step:hover .servicos-step__dot { transform: scale(1.2); }
.servicos-step__body { display: flex; flex-direction: column; }
.servicos-step__body .info-card__title { max-width: 319px; }
.servicos-step__body .info-card__text { max-width: 319px; }

/* ---- Responsivo ------------------------------------------------------------ */
@media (max-width: 1280px) {
}
@media (max-width: 1024px) {
	.servicos-list__extra { margin-top: 64px; }
	.servicos-process__head { margin-bottom: 48px; }
}
@media (max-width: 760px) {
	.servicos-process__head { margin-bottom: 40px; }
	.servicos-list__extra-text { font-size: 18px; }
}
@media (max-width: 600px) {
	.servicos-hero__lead { max-width: none; }
	.servicos-list__extra { margin-top: 56px; gap: 18px; }
	.servicos-list__extra-text { font-size: 17px; }
	.servicos-step { min-height: 0; gap: 40px; padding: 28px 24px; }
}