/*
 * Close of the blog single (EO_Related_Reads): «Sigue leyendo» and the «Siguiente post» notice. Canvas «Cierre del
 * post — Sigue leyendo» (approved 2026-11-11), La órbita light theme: paper #f7f8f6, navy #023c70, ink-soft #6d6777,
 * card border #e1e6ea, focus #0375db; Bricolage for titles, Poppins for the rest (both loaded by the site header).
 * Card image: 16:9 when the cover is wide (≥ 1.4), never a square crop; a cover that is not wide keeps its top.
 */

/* Ohio's pieces this replaces, and its demo chrome (guard: the ACF filters already turn the first two off). */
.eo-rd-page .related-posts,
.eo-rd-page .sticky-nav,
.eo-rd-page .color-switcher,
.eo-rd-page .social-bar,
.eo-rd-page .circle-cursor {
	display: none !important;
}

.eo-rd {
	--eo-rd-navy: #023c70;
	--eo-rd-soft: #6d6777;
	--eo-rd-line-c: #e1e6ea;
	--eo-rd-focus: #0375db;
	margin: 40px 0 0;
	padding: 88px 0 104px;
	background: #f7f8f6;
	color: var(--eo-rd-navy);
	font-family: "Poppins", system-ui, sans-serif;
	text-align: left;
}

.eo-rd *,
.eo-next * {
	box-sizing: border-box;
}

.eo-rd__in {
	display: flex;
	flex-direction: column;
	gap: 40px;
	width: min(1112px, calc(100% - 32px));
	margin: 0 auto;
}

.eo-rd__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px 32px;
}

.eo-rd__heading {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.eo-rd .eo-rd__t {
	margin: 0;
	font-family: "Bricolage Grotesque", system-ui, sans-serif;
	font-weight: 760;
	font-size: clamp(38px, 4.2vw, 56px);
	line-height: 0.96;
	letter-spacing: -0.03em;
	color: var(--eo-rd-navy);
}

.eo-rd .eo-rd__sub {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	color: var(--eo-rd-soft);
}

.eo-rd a.eo-rd__all {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	font-size: 15px;
	font-weight: 600;
	color: var(--eo-rd-navy);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
}

.eo-rd a.eo-rd__all:hover {
	color: #001a33;
}

.eo-rd__all svg,
.eo-rd__cta svg {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

.eo-rd__cta svg {
	width: 14px;
	height: 14px;
}

/* Desktop: three cards in a row, same height, the action at the bottom. */
.eo-rd__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
}

.eo-rd a.eo-rd__card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	background: #ffffff;
	border: 1px solid var(--eo-rd-line-c);
	border-radius: 24px;
	color: inherit;
	text-decoration: none;
}

.eo-rd a.eo-rd__card:hover {
	border-color: var(--eo-rd-navy);
	color: inherit;
}

.eo-rd a.eo-rd__card:hover .eo-rd__cta {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.eo-rd a.eo-rd__card:focus-visible,
.eo-rd a.eo-rd__all:focus-visible,
.eo-next a.eo-next__link:focus-visible,
.eo-next .eo-next__x:focus-visible {
	outline: 3px solid var(--eo-rd-focus);
	outline-offset: 3px;
}

.eo-rd__media {
	position: relative;
	display: block;
	flex: 0 0 auto;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #001a33;
}

.eo-rd__media img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.eo-rd__media--empty,
.eo-next__thumb--empty {
	display: flex;
	align-items: flex-end;
	padding: 16px 20px;
	border-bottom: 4px solid var(--eo-rd-line, #023c70);
	color: #ffffff;
	font-family: "Bricolage Grotesque", system-ui, sans-serif;
	font-weight: 700;
	font-size: 20px;
}

.eo-rd__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 12px;
	padding: 24px 28px 28px;
	min-width: 0;
}

.eo-rd__why {
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--eo-rd-soft);
}

.eo-rd__kind {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	line-height: 1.3;
	color: var(--eo-rd-soft);
}

.eo-rd__bar {
	flex: 0 0 auto;
	width: 24px;
	height: 4px;
	border-radius: 2px;
}

.eo-rd .eo-rd__title {
	margin: 0;
	padding: 0;
	font-family: "Bricolage Grotesque", system-ui, sans-serif;
	font-weight: 700;
	font-size: 23px;
	line-height: 1.14;
	letter-spacing: -0.015em;
	color: var(--eo-rd-navy);
	text-transform: none;
}

.eo-rd__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 12px;
	margin-top: auto;
	padding-top: 8px;
}

.eo-rd__meta {
	font-size: 13px;
	line-height: 1.4;
	color: var(--eo-rd-soft);
}

.eo-rd__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--eo-rd-navy);
	white-space: nowrap;
}

/* Tablet: the first read leads (image beside the text), the other two are rows. */
@media (max-width: 1099px) {
	.eo-rd {
		padding: 64px 0 80px;
	}

	.eo-rd__in {
		gap: 28px;
	}

	.eo-rd__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.eo-rd a.eo-rd__card--lead {
		flex-direction: row;
		align-items: center;
		border-radius: 24px;
	}

	.eo-rd__card--lead .eo-rd__media {
		width: 45%;
		align-self: center;
	}

	.eo-rd__card--lead .eo-rd__media--tall {
		aspect-ratio: 4 / 3;
	}

	.eo-rd__card--lead .eo-rd__body {
		padding: 22px 24px;
	}

	.eo-rd a.eo-rd__card:not(.eo-rd__card--lead) {
		flex-direction: row;
		align-items: center;
		gap: 20px;
		padding: 16px;
		border-radius: 20px;
	}

	.eo-rd__card:not(.eo-rd__card--lead) .eo-rd__media {
		width: 176px;
		border-radius: 12px;
	}

	.eo-rd__card:not(.eo-rd__card--lead) .eo-rd__body {
		gap: 6px;
		padding: 0;
	}

	.eo-rd__card:not(.eo-rd__card--lead) .eo-rd__kind {
		display: none;
	}

	.eo-rd__card:not(.eo-rd__card--lead) .eo-rd__title {
		font-size: 19px;
		line-height: 1.16;
	}

	.eo-rd__card:not(.eo-rd__card--lead) .eo-rd__cta {
		display: none;
	}

	.eo-rd__card:not(.eo-rd__card--lead) .eo-rd__foot {
		padding-top: 0;
	}
}

/* Phone: the lead stacks (image on top), the rows get compact, «Ver todo» becomes a full-width button at the end. */
@media (max-width: 767px) {
	.eo-rd {
		margin-top: 24px;
		padding: 48px 0 56px;
	}

	.eo-rd__in {
		gap: 22px;
	}

	.eo-rd__head {
		display: contents;
	}

	.eo-rd__heading {
		order: 0;
		gap: 8px;
	}

	.eo-rd__grid {
		order: 1;
	}

	.eo-rd a.eo-rd__all {
		order: 2;
		justify-content: center;
		min-height: 48px;
		border: 1px solid var(--eo-rd-navy);
		border-radius: 999px;
		text-decoration: none;
	}

	.eo-rd .eo-rd__sub {
		font-size: 14px;
	}

	.eo-rd a.eo-rd__card--lead {
		flex-direction: column;
		align-items: stretch;
		border-radius: 22px;
	}

	.eo-rd__card--lead .eo-rd__media {
		width: 100%;
		max-height: 60vh;
	}

	.eo-rd__card--lead .eo-rd__body {
		gap: 10px;
		padding: 18px 20px 20px;
	}

	.eo-rd__card--lead .eo-rd__title {
		font-size: 21px;
	}

	.eo-rd a.eo-rd__card:not(.eo-rd__card--lead) {
		align-items: flex-start;
		gap: 14px;
		padding: 14px;
		border-radius: 18px;
	}

	.eo-rd__card:not(.eo-rd__card--lead) .eo-rd__media {
		width: 112px;
		border-radius: 10px;
	}

	.eo-rd__card:not(.eo-rd__card--lead) .eo-rd__why {
		font-size: 10.5px;
	}

	.eo-rd__card:not(.eo-rd__card--lead) .eo-rd__title {
		font-size: 16px;
		line-height: 1.18;
	}

	.eo-rd__card:not(.eo-rd__card--lead) .eo-rd__meta {
		font-size: 12px;
	}
}

/* ─────────────── «Siguiente post» ───────────────
 * v2 (operator, 2026-11-11: the first one read like a utility row): image first — the cover whole in 16:9 — then two
 * lines, the label and the title; the close sits quietly on the label row. Ohio's composition, done right.
 * v3 (operator: «still doesn't read as a Next post»): the three cues of an «up next» — a forward arrow beside the title,
 * a reading-progress line that fills as the article ends (related.js → --eo-next-p) and an entrance from the side it
 * leads to.
 */

.eo-next {
	position: fixed;
	right: 28px;
	bottom: 28px;
	z-index: 90;
	display: block;
	width: 320px;
	max-width: calc(100vw - 32px);
	overflow: hidden;
	background: #ffffff;
	border-radius: 18px;
	box-shadow: 0 1px 2px rgba(0, 26, 51, 0.06), 0 16px 40px rgba(0, 26, 51, 0.18);
	color: #023c70;
	font-family: "Poppins", system-ui, sans-serif;
	text-align: left;
	opacity: 0;
	transform: translateX(32px);
}

.eo-next[hidden] {
	display: none;
}

.eo-next.is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: no-preference) {
	.eo-next {
		transition: opacity 0.35s cubic-bezier(0.2, 0, 0, 1), transform 0.5s cubic-bezier(0.2, 0, 0, 1);
	}

	.eo-next__go svg {
		transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1);
	}

	.eo-next a.eo-next__link:hover .eo-next__go svg {
		transform: translateX(3px);
	}

	.eo-next__progress span {
		transition: transform 0.2s linear;
	}

	.eo-next__thumb img {
		transition: transform 0.6s cubic-bezier(0.2, 0, 0, 1);
	}

	.eo-next a.eo-next__link:hover .eo-next__thumb img {
		transform: scale(1.04);
	}
}

.eo-next a.eo-next__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.eo-next a.eo-next__link:hover {
	color: inherit;
}

.eo-next a.eo-next__link:hover .eo-next__title {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.eo-next a.eo-next__link:focus-visible {
	outline-offset: -3px;
	border-radius: 18px;
}

.eo-next__thumb {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #001a33;
}

.eo-next__thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.eo-next__thumb--empty {
	padding: 16px 18px;
	font-size: 18px;
}

.eo-next__text {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 6px 14px;
	padding: 14px 16px 16px 18px;
}

.eo-next__why {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 6px;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.4;
	color: #6d6777;
	grid-column: 1 / -1;
}

.eo-next__label {
	font-weight: 600;
	color: #023c70;
}

.eo-next__reason::before,
.eo-next__mins::before {
	content: "·";
	margin-right: 6px;
}

.eo-next__mins {
	display: none;
}

.eo-next__title {
	display: -webkit-box;
	overflow: hidden;
	font-family: "Bricolage Grotesque", system-ui, sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: #023c70;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* The forward cue: a navy disc with the arrow, beside the title. */
.eo-next__go {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #023c70;
	color: #ffffff;
}

.eo-next a.eo-next__link:hover .eo-next__go {
	background: #001a33;
}

.eo-next__go svg {
	width: 18px;
	height: 18px;
}

/* Reading progress: a thin line where the image meets the text (the article ending → the next one). */
.eo-next__progress {
	position: absolute;
	top: 177px;
	right: 0;
	left: 0;
	height: 3px;
	background: rgba(2, 60, 112, 0.14);
	pointer-events: none;
}

.eo-next__progress span {
	display: block;
	height: 100%;
	background: #0e8c82;
	transform: scaleX(var(--eo-next-p, 0));
	transform-origin: 0 50%;
}

/* Close: quiet, on the label row under the image (covers carry their mark at the top, never covered). The card is
   320 px wide on desktop, so the image ends at 180 px. */
.eo-next .eo-next__x {
	position: absolute;
	top: 184px;
	right: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #6d6777;
	cursor: pointer;
}

.eo-next .eo-next__x::before {
	content: "";
	position: absolute;
	inset: -4px;
}

.eo-next .eo-next__x:hover {
	background: #f1f2f2;
	color: #023c70;
}

.eo-next__x svg {
	width: 14px;
	height: 14px;
}

.eo-next__why {
	padding-right: 30px;
}

/* Phone and tablet: a one-line bar at the bottom. */
@media (max-width: 1099px) {
	.eo-next {
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		gap: 4px;
		width: auto;
		max-width: none;
		padding: 10px 6px calc(10px + env(safe-area-inset-bottom, 0px)) 12px;
		border-top: 1px solid #e1e6ea;
		border-radius: 0;
		box-shadow: 0 -8px 20px rgba(0, 26, 51, 0.08);
		transform: translateY(16px);
	}

	.eo-next a.eo-next__link {
		display: flex;
		flex: 1 1 auto;
		align-items: center;
		gap: 12px;
		min-width: 0;
		min-height: 52px;
		border-radius: 12px;
	}

	.eo-next__thumb {
		flex: 0 0 auto;
		width: 76px;
		border-radius: 8px;
	}

	.eo-next__text {
		align-items: center;
		gap: 2px 12px;
		min-width: 0;
		padding: 0;
	}

	.eo-next__why,
	.eo-next__title {
		grid-column: 1;
	}

	.eo-next__go {
		grid-column: 2;
		grid-row: 1 / 3;
		width: 36px;
		height: 36px;
	}

	.eo-next__go svg {
		width: 16px;
		height: 16px;
	}

	.eo-next__progress {
		top: 0;
	}

	.eo-next__why {
		flex-wrap: nowrap;
		font-size: 11.5px;
		white-space: nowrap;
	}

	.eo-next__reason {
		display: none;
	}

	.eo-next__mins {
		display: inline;
	}

	.eo-next__title {
		display: block;
		font-size: 15px;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.eo-next .eo-next__x {
		position: static;
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
	}

	.eo-next__why {
		padding-right: 0;
	}

	.eo-next .eo-next__x::before {
		display: none;
	}
}

/* ─────────────── Glitch subscription band (closes the post; comments are closed) ───────────────
 * The Glitch archive's band (TASK-2056, canvas «Tema · Glitch» v79) with its values, scoped here: navy card, byte trail,
 * Bricolage title with the green «con punto de vista.», Guttery narrator, the real Growth Forms pill in white.
 */

.eo-rd:has(~ .eo-sub) {
	padding-bottom: 72px;
}

.eo-sub {
	padding: 0 0 104px;
	background: #f7f8f6;
	font-family: "Poppins", system-ui, sans-serif;
	text-align: left;
}

.eo-sub * {
	box-sizing: border-box;
}

.eo-sub__in {
	width: min(1112px, calc(100% - 32px));
	margin: 0 auto;
}

.eo-sub__c {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 40px 64px;
	align-items: center;
	padding: 56px 64px 56px 72px;
	overflow: hidden;
	border-radius: 40px;
	background: #001a33;
	color: #ffffff;
}

@media (min-width: 1100px) {
	.eo-sub__c:has(greenhouse-form) {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

.eo-sub__bytes {
	position: absolute;
	top: 0;
	right: 0;
	width: 280px;
	height: auto;
	opacity: 0.9;
	pointer-events: none;
}

.eo-sub__l,
.eo-sub__r {
	position: relative;
	z-index: 1;
}

.eo-sub .eo-sub__eyb {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #cfe4fa;
}

.eo-sub__eyb span {
	flex: none;
	width: 28px;
	height: 5px;
	border-radius: 3px;
	background: #6ec207;
}

.eo-sub .eo-sub__t {
	margin: 20px 0 0;
	font-family: "Bricolage Grotesque", system-ui, sans-serif;
	font-size: 46px;
	line-height: 0.98;
	letter-spacing: -0.02em;
	color: #ffffff;
	text-transform: none;
}

.eo-sub__in-l {
	display: block;
	font-weight: 300;
	font-size: 0.72em;
	letter-spacing: 0.01em;
}

.eo-sub__out {
	display: block;
	font-weight: 800;
	font-stretch: 78%;
	font-variation-settings: "wdth" 78;
	color: #6ec207;
}

.eo-sub .eo-sub__d {
	max-width: 520px;
	margin: 20px 0 0;
	font-size: 17px;
	line-height: 1.55;
	color: #cfe4fa;
}

.eo-sub__r {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}

.eo-sub__mul {
	display: inline-block;
	margin: 0 0 4px 4px;
	font-family: "Guttery", cursive;
	font-size: 30px;
	line-height: 1;
	font-weight: 400;
	color: #6ec207;
	white-space: nowrap;
	transform: rotate(-4deg);
	transform-origin: left bottom;
}

/* The real form: tone and alignment are the host's (`--ghf-inline-*`); the renderer keeps the rest. */
.eo-sub greenhouse-form.eo-inline-pill {
	--ghf-font: "Poppins", system-ui, sans-serif;
	--ghf-inline-align: flex-start;
	--ghf-inline-note-align: left;
	--ghf-inline-width-idle: 284px;
	--ghf-inline-tone: #ffffff;
	--ghf-inline-tone-hover: #e6edf3;
	--ghf-inline-tone-active: #cfe4fa;
	--ghf-inline-on-tone: #001a33;
	display: block;
	width: 480px;
	max-width: 100%;
}

/* Fallback before the renderer (or without JS): the canvas pill and its notice. */
.eo-sub a.eo-sub__pill {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	height: 60px;
	margin: 0;
	padding: 0 24px 0 28px;
	border-radius: 999px;
	background: #ffffff;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
	color: #001a33;
	font-size: 17px;
	font-weight: 600;
	text-decoration: none;
}

.eo-sub a.eo-sub__pill:hover {
	color: #001a33;
}

.eo-sub__pill img {
	display: block;
	width: auto;
	height: 21px;
}

.eo-sub a.eo-sub__pill:focus-visible {
	outline: 2px solid #36c8bf;
	outline-offset: 4px;
}

.eo-sub .eo-sub__n {
	margin: 12px 0 0;
	font-size: 14px;
	color: #9fb3c8;
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
	.eo-sub a.eo-sub__pill {
		transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1);
	}

	.eo-sub a.eo-sub__pill:hover {
		transform: translateY(-3px);
	}
}

@media (max-width: 1099px) {
	.eo-rd:has(~ .eo-sub) {
		padding-bottom: 56px;
	}

	.eo-sub {
		padding-bottom: 80px;
	}
}

@media (max-width: 767px) {
	.eo-sub {
		padding-bottom: 64px;
	}

	.eo-sub__c {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
		padding: 44px 24px 40px;
		border-radius: 26px;
	}

	.eo-sub .eo-sub__t {
		font-size: 34px;
	}

	.eo-sub .eo-sub__d {
		margin-top: 16px;
		font-size: 15px;
	}

	.eo-sub a.eo-sub__pill {
		height: 54px;
		padding: 0 20px 0 22px;
		font-size: 16px;
		gap: 10px;
	}

	.eo-sub__pill img {
		height: 19px;
	}

	.eo-sub .eo-sub__n {
		font-size: 12px;
	}

	.eo-sub__bytes {
		width: 180px;
	}

	.eo-sub greenhouse-form.eo-inline-pill {
		width: 100%;
	}
}