/* ==========================================================================
   Serviços e portfólio (carregado depois de pages.css)
   ========================================================================== */

/* ---------- Hero ---------- */
/* ---------- Serviços: hero, barra de filtros ---------- */
.page-hero__cta { white-space: nowrap; padding: 19px 34px; }
@media (max-width: 1023px) { .page-hero__cta { margin-top: 28px; } }
@media (max-width: 767px) { .page-hero__cta { display: flex; margin-top: 22px; } }

/* ---------- Serviços: seções do portfólio ---------- */
.portfolio { padding: 40px var(--gutter); }
.portfolio-section { padding: 40px 0; scroll-margin-top: 90px; }
.portfolio-section[hidden] { display: none; }
.portfolio-section__head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 8px; }
.capsule-mark--inline { width: 44px; height: 15px; margin: 0; flex: none; }
.portfolio-section__title { margin: 0; font-size: 32px; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; color: var(--navy); }
.portfolio-section__desc { margin: 0 0 36px 60px; max-width: 620px; font-size: 15px; line-height: 1.7; color: var(--text-secondary); }
.portfolio-section__links { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: -20px 0 32px 60px; }
.portfolio-section__links .text-cta { color: var(--navy); }
.portfolio-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.work-card { border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; transition: border-color var(--transition); }
.work-card:hover { border-color: var(--cyan); }
.work-card__photo { height: 260px; border-radius: 0; }
.work-card__body { padding: 24px; }
.work-card__title { margin: 0 0 6px; font-size: 18px; font-weight: 800; color: var(--navy); }
.work-card__client { margin: 0 0 16px; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.work-card__spec { margin-bottom: 18px; padding: 12px 14px; font-size: 11.5px; line-height: 2; background: var(--gray-blue); border-radius: 4px; }

@media (max-width: 1023px) {
	.portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.portfolio-section__desc { margin-left: 0; }
	.portfolio-section__links { margin-left: 0; }
}
@media (max-width: 767px) {
	.portfolio { padding: 16px 20px; }
	.portfolio-section { padding: 24px 0; }
	.portfolio-section__head { gap: 12px; }
	.capsule-mark--inline { width: 32px; height: 12px; }
	.portfolio-section__title { font-size: 24px; }
	.portfolio-section__desc { margin-bottom: 22px; font-size: 13.5px; }
	.portfolio-section__links { flex-direction: column; gap: 10px; margin: -8px 0 22px; }
	.portfolio-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.portfolio-grid > :nth-child(n+3) { display: none; }
	.work-card__photo { height: 190px; }
	.work-card__body { padding: 20px; }
	.work-card__title { font-size: 17px; margin-bottom: 5px; }
	.work-card__client { font-size: 12px; margin-bottom: 14px; }
	.work-card__spec { font-size: 10.5px; line-height: 1.9; padding: 10px 12px; margin-bottom: 16px; }
}

/* ---------- Serviços: como funciona ---------- */
.steps { padding-block: 80px; }
.eyebrow--navy { color: var(--navy); }
.steps__title { font-size: 34px; line-height: 1.2; max-width: 620px; margin-bottom: 44px; }
.steps-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.step-card { background: var(--white); border-radius: var(--radius-card); padding: 28px 26px; }
.step-card__num { display: block; margin-bottom: 16px; font-size: 13px; font-weight: 800; line-height: 1; color: var(--cyan); }
.step-card__title { margin: 0 0 8px; font-size: 17px; font-weight: 800; color: var(--navy); }
.step-card p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--text-secondary); }
@media (max-width: 1023px) {
	.steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.steps { padding-block: 44px; }
	.steps__title { font-size: 24px; margin-bottom: 24px; }
	.steps-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.step-card { padding: 22px 20px; }
}