@charset "UTF-8";
/* Grade e artigo do blog — visual do site institucional Octo. */

body.octo-tem-chrome {
	--octo-ink: #16162B;
	--octo-ink-soft: #55556E;
	--octo-line: rgba(22, 22, 43, .10);
	--octo-coral: #EF4D37;
	--octo-cyan-deep: #0C8D95;
	--octo-shell: 1240px;
	--octo-pad: clamp(20px, 4.4vw, 58px);
	--octo-radius: 14px;
	background: #fff;
	color: var(--octo-ink);
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

.octo-blog {
	--shell: 1240px;
	--pad-x: clamp(20px, 4.4vw, 58px);
	--coral: #EF4D37;
	--coral-deep: #D63B26;
	--cyan-deep: #0C8D95;
	--ink: #16162B;
	--ink-soft: #55556E;
	--line: rgba(22, 22, 43, .10);
	--radius: 14px;
	--s2: 12px; --s3: 18px; --s4: 26px; --s5: 38px; --s6: 54px; --s7: 76px;
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

.octo-blog a { color: inherit; text-decoration: none; }
.octo-blog img { max-width: 100%; height: auto; display: block; }

.octo-blog .container {
	width: 100%;
	max-width: var(--shell);
	margin-inline: auto;
	padding-inline: var(--pad-x);
	position: relative;
	z-index: 3;
}

.octo-blog .page-banner {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 100%;
	min-height: clamp(340px, 42vw, 520px);
	padding: calc(var(--header-h, 82px) + 48px) 0 56px;
	overflow: hidden;
	background: #0C0C1A;
	color: #fff;
	margin: 0;
}
.octo-blog .page-banner__title,
.octo-blog .page-banner__tagline,
.octo-blog .page-banner__meta {
	position: relative;
	z-index: 3;
	width: 100%;
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
}
.octo-blog .page-banner__eyebrow {
	position: relative;
	z-index: 3;
	width: 100%;
	max-width: none;
	margin: 0 0 12px;
	padding-inline: 0;
	font-family: 'Oswald', Arial, sans-serif;
	font-size: 12px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #6CFDFF;
}
.octo-blog .page-banner__title {
	margin: 0 0 12px;
	font-family: 'Oswald', 'PhrasticMedium', Arial, sans-serif;
	font-weight: 400;
	font-size: clamp(36px, 5vw, 68px);
	line-height: 1.08;
	color: #fff;
}
.octo-blog .page-banner__tagline {
	margin: 0;
	max-width: 52ch;
	font-size: clamp(15.5px, 1.5vw, 19px);
	color: rgba(255, 255, 255, .88);
}
.octo-blog .page-banner__meta {
	margin: 18px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	font-family: 'Oswald', Arial, sans-serif;
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .7);
}
.octo-blog .page-banner__bg {
	position: absolute; inset: 0; z-index: 0;
	background-size: cover; background-position: center;
}
.octo-blog .page-banner__veil {
	position: absolute; inset: 0; z-index: 1;
	background:
		linear-gradient(0deg, rgba(8,8,18,.90) 3%, rgba(8,8,18,.48) 48%, rgba(8,8,18,.22) 100%),
		linear-gradient(90deg, rgba(8,8,18,.62) 0%, rgba(8,8,18,.06) 66%);
}
.octo-blog .page-banner:not(.page-banner--photo)::before {
	content: "";
	position: absolute; inset: 0; z-index: 1;
	background:
		radial-gradient(900px 500px at 82% -10%, rgba(108,253,255,.20), transparent 62%),
		radial-gradient(700px 460px at 6% 108%, rgba(239,77,55,.22), transparent 64%);
}

main.octo-blog .octo-blog__section {
	padding: 72px 0 96px;
}

.octo-blog__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 40px;
}
.octo-blog__filter {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	border-radius: 999px;
	border: 1px solid var(--line);
	font-family: 'Oswald', Arial, sans-serif;
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-soft);
	background: #fff;
}
.octo-blog__filter:hover,
.octo-blog__filter.is-active {
	border-color: var(--coral);
	color: var(--coral);
}

.octo-blog__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

.octo-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.octo-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 22px 50px rgba(22, 22, 43, .12);
	border-color: transparent;
}
.octo-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #0C0C1A;
}
.octo-card__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .6s ease;
}
.octo-card:hover .octo-card__media img { transform: scale(1.06); }
.octo-card__placeholder { display: block; width: 100%; height: 100%; background: #14142A; }
.octo-card__body {
	padding: var(--s4);
	display: flex;
	flex-direction: column;
	flex: 1;
}
.octo-card__cat {
	font-family: 'Oswald', Arial, sans-serif;
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--cyan-deep);
	margin-bottom: 8px;
}
.octo-card__title {
	margin: 0 0 var(--s2);
	font-family: 'Oswald', Arial, sans-serif;
	font-weight: 400;
	font-size: 22px;
	line-height: 1.2;
	color: var(--ink);
}
.octo-card__excerpt {
	color: var(--ink-soft);
	font-size: 15.5px;
	line-height: 1.6;
	margin: 0 0 var(--s4);
}
.octo-card__more {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: 'Oswald', Arial, sans-serif;
	font-size: 12.5px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ink);
}
.octo-card__more::after {
	content: "";
	width: 22px; height: 1px;
	background: var(--coral);
}
.octo-card__more:hover { color: var(--coral); gap: 14px; }

.octo-blog__empty {
	text-align: center;
	padding: 60px 0;
	color: var(--ink-soft);
}

.octo-blog__pager {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: var(--s6);
	list-style: none;
	padding: 0;
}
.octo-blog__pager li { margin: 0; }
.octo-blog__pager a,
.octo-blog__pager span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border-radius: 999px;
	border: 1px solid var(--line);
	font-family: 'Oswald', Arial, sans-serif;
	font-size: 13px;
	letter-spacing: .08em;
}
.octo-blog__pager .current,
.octo-blog__pager a:hover {
	background: var(--coral);
	border-color: var(--coral);
	color: #fff;
}

main.octo-blog .octo-article {
	padding: 72px 0 48px;
}
.octo-article__content {
	max-width: none;
	margin: 0;
	font-size: 17.5px;
	line-height: 1.85;
	color: var(--ink);
}
.octo-article__content > *:first-child { margin-top: 0; }
.octo-article__content h2,
.octo-article__content h3 {
	font-family: 'Oswald', Arial, sans-serif;
	font-weight: 400;
	line-height: 1.25;
	margin: 2.2em 0 0.7em;
}
.octo-article__content p { margin: 0 0 1.45em; }
.octo-article__content a { color: var(--cyan-deep); }
.octo-article__content img { border-radius: 10px; margin: 2em 0; }
.octo-article__content ul,
.octo-article__content ol { margin: 0 0 1.6em; padding-left: 1.3em; }
.octo-article__content li { margin-bottom: 0.45em; }
.octo-article__content blockquote {
	margin: 2em 0;
	padding: 8px 0 8px 22px;
	border-left: 3px solid var(--coral);
	color: var(--ink-soft);
}

.octo-article__tags {
	max-width: none;
	margin: 56px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}
.octo-article__tags-label {
	font-family: 'Oswald', Arial, sans-serif;
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--ink-soft);
	margin-right: 6px;
}
.octo-article__tag {
	padding: 6px 14px;
	border-radius: 999px;
	border: 1px solid var(--line);
	font-size: 13px;
	color: var(--ink-soft);
}
.octo-article__tag:hover { border-color: var(--coral); color: var(--coral); }

.octo-article__nav {
	max-width: none;
	margin: 64px 0 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--s4);
	border-top: 1px solid var(--line);
	padding-top: 40px;
}
.octo-article__nav-label {
	display: block;
	font-family: 'Oswald', Arial, sans-serif;
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--cyan-deep);
	margin-bottom: 6px;
}
.octo-article__nav a { font-family: 'Oswald', Arial, sans-serif; font-size: 18px; }
.octo-article__nav a:hover { color: var(--coral); }
.octo-article__nav-item--next { text-align: right; }

main.octo-blog .octo-related {
	padding: 56px 0 104px;
}
.octo-related h2 {
	font-family: 'Oswald', Arial, sans-serif;
	font-weight: 400;
	font-size: clamp(28px, 3.5vw, 42px);
	margin: 0 0 36px;
}

@media (max-width: 980px) {
	.octo-blog__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
	.octo-blog__grid { grid-template-columns: 1fr; }
	.octo-article__nav { grid-template-columns: 1fr; }
	.octo-article__nav-item--next { text-align: left; }
}