/* ------------------------------------------------------------------ */
/* Página Sobre — tema escuro                                          */
/* ------------------------------------------------------------------ */

.page-id-9 main {
	background: var(--ksp-bg);
	color: var(--ksp-text);
}
.page-id-9 main h1,
.page-id-9 main h2,
.page-id-9 main h3 {
	/* Títulos/subtítulos seguem o acento azul usado no resto do site
	   (Calendário de Eventos, Música do Mês, etc.), em vez do preto/branco
	   simples do texto normal. */
	color: var(--wp--preset--color--accent-2);
}
.page-id-9 main .wp-block-list {
	color: var(--ksp-text);
}
.page-id-9 main img[alt="Facebook"],
.page-id-9 main img[alt="Twitter"],
.page-id-9 main img[alt="LinkedIn"] {
	filter: brightness(0) invert(1);
}
:root[data-theme="light"] .page-id-9 main img[alt="Facebook"],
:root[data-theme="light"] .page-id-9 main img[alt="Twitter"],
:root[data-theme="light"] .page-id-9 main img[alt="LinkedIn"] {
	filter: none;
}

/* ------------------------------------------------------------------ */
/* Imagem "Into the Ocean" — faixa divisória estática, full-width       */
/* (era um efeito de parallax com scroll; tirado por não ficar bem —    */
/* fica só a imagem, nas mesmas proporções, a separar as secções).      */
/* ------------------------------------------------------------------ */

.ksp-ocean {
	position: relative;
	box-sizing: border-box;
	/* Full-bleed correto (mesma técnica do .ksp-marquee e do .ksp-mos): usa
	   100vw + margens negativas em vez de width:100% !important, que entra
	   em conflito com o full-bleed que o próprio WordPress já aplica aos
	   blocos "alignfull" dentro de um layout constrained — essa mistura
	   deixava uma faixa branca numa das bordas. */
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}
.ksp-ocean__window {
	height: clamp(220px, 24vw, 340px);
	overflow: hidden;
	/* Sempre escuro (nunca branco), independente do modo claro/escuro —
	   evita qualquer sliver/canto branco a aparecer por trás da imagem. */
	background: #000;
}
.ksp-ocean__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}