/* ==========================================================================
   Páginas internas: hero, faixas e seções compartilhadas
   (Sobre e Serviços têm arquivos próprios: sobre.css e servicos.css)
   ========================================================================== */

/* ---------- Hero das páginas internas ---------- */
.page-hero { background: var(--navy); padding: 70px var(--gutter) 76px; }
.page-hero .page-hero__capsules { inset: auto; width: 500px; height: 220px; }
.page-hero__capsules--tr { top: -20px; right: -40px; }
.page-hero__capsules--br { bottom: -30px; right: -40px; }
.page-hero__capsules--bl { bottom: -30px; left: -40px; }
.page-hero__inner--split { display: flex; justify-content: space-between; align-items: flex-end; gap: 64px; }
.page-hero__content { max-width: 860px; }
.eyebrow--light { color: var(--cyan-light); margin-bottom: 20px; }
.page-hero__title {
	margin: 0 0 20px;
	font-size: 48px;
	line-height: 1.1;
	font-weight: 800;
	letter-spacing: -.025em;
	color: var(--white);
	text-wrap: balance;
}
.page-hero__text { margin: 0; max-width: 680px; font-size: 17px; line-height: 1.7; color: var(--text-on-navy); }
.page-hero__meta { margin: 24px 0 0; font: 600 12.5px/1.8 var(--font-mono); color: var(--text-on-navy-tertiary); }

@media (max-width: 1023px) {
	.page-hero__inner--split { display: block; }
	.page-hero__title { font-size: 40px; }
}
@media (max-width: 767px) {
	.page-hero { padding: 36px 20px; }
	.page-hero .page-hero__capsules { width: 290px; height: 150px; }
	.eyebrow--light { margin-bottom: 14px; }
	.page-hero__title { font-size: 28px; line-height: 1.14; letter-spacing: -.02em; margin-bottom: 14px; }
	.page-hero__text { font-size: 14.5px; }
	.page-hero__meta { font-size: 11.5px; margin-top: 16px; }
}

/* ---------- Lista com marcador cápsula ---------- */
.capsule-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.capsule-list li { display: flex; gap: 16px; align-items: flex-start; }
.capsule-list__mark { flex: none; width: 26px; height: 10px; margin-top: 7px; border-radius: var(--radius-pill); background: var(--cyan); }
.capsule-list__title { margin: 0 0 5px; font-size: 15.5px; font-weight: 800; color: var(--navy); }
.capsule-list p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--text-secondary); }
@media (max-width: 767px) {
	.capsule-list li { gap: 12px; }
	.capsule-list__mark { width: 22px; height: 9px; margin-top: 6px; }
	.capsule-list__title { font-size: 14.5px; margin-bottom: 4px; }
	.capsule-list p { font-size: 13px; line-height: 1.6; }
}

/* ---------- Barra de filtros (Serviços e Blog) ---------- */
.filter-bar {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	padding: 22px var(--gutter);
	background: var(--white);
	border-bottom: 1px solid var(--border-divider);
}
.admin-bar .filter-bar { top: 32px; }
.filter-bar__label { margin-right: 8px; font: 600 11px/1 var(--font-mono); letter-spacing: .1em; color: var(--text-secondary); }
.filter-bar__count { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.chip-btn {
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--navy);
	background: var(--white);
	border: 1px solid var(--border-input);
	border-radius: var(--radius-pill);
	padding: 10px 22px;
	cursor: pointer;
	white-space: nowrap;
	transition: border-color var(--transition), background-color var(--transition), color var(--transition);
}
.chip-btn:hover { border-color: var(--cyan); }
.chip-btn.is-active, a.chip-btn.is-active { background: var(--navy); border-color: var(--navy); color: var(--white); }
a.chip-btn { display: inline-block; }
@media (max-width: 782px) { .admin-bar .filter-bar { top: 0; } }
@media (max-width: 767px) {
	.filter-bar { position: static; gap: 8px; padding: 16px 20px; }
	.chip-btn { font-size: 12.5px; padding: 9px 18px; }
}

/* ---------- 404 e páginas genéricas ---------- */
.not-found { display: flex; flex-direction: column; gap: 40px; }
.not-found__links { display: flex; flex-wrap: wrap; gap: 12px; }
.not-found__search { max-width: 520px; }
.not-found__search .newsletter__row { display: flex; gap: 10px; }
.not-found__search .input { flex: 1; min-width: 0; }
.prose--page { max-width: 780px; }
@media (max-width: 767px) {
	.not-found__links { flex-direction: column; }
	.not-found__search .newsletter__row { flex-direction: column; }
}