/* ------------------------------------------------------------------
   Onboarding hub (/curriculos/bemvindo) — redesign
   Tokens mirror the HTML prototype; :root vars are scoped so they don't
   leak into the rest of the curriculum UI.
   ------------------------------------------------------------------ */
.o-onboarding {
	--orange: #f9672e;
	--orange-ink: #c2461a;
	--orange-soft: #fde9dd;
	--orange-tint: #fff5ee;
	--cream: #faf6f1;
	--cream-2: #f5efe8;
	--border: #e8e0d8;
	--border-strong: #d7ccbf;
	--ink: #2a1f16;
	--ink-2: #5b4a3a;
	--ink-3: #8b7a68;
	--firstlook: oklch(70% 0.09 200);
	--firstlook-soft: oklch(94% 0.03 200);
	--k252: oklch(78% 0.13 75);
	--k252-soft: oklch(95% 0.05 85);
	--xp3: oklch(60% 0.14 295);
	--xp3-soft: oklch(94% 0.04 295);

	background: var(--cream);
	color: var(--ink);
	font-family: 'Inter', system-ui, sans-serif;
}
.o-onboarding a { color: inherit; text-decoration: none; }
.o-onboarding h1, .o-onboarding h2, .o-onboarding h3, .o-onboarding h4 {
	font-family: 'Figtree', 'Inter', sans-serif; letter-spacing: -0.01em;
}

/* --- Pills --- */
.o-pill {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 4px 10px; border-radius: 999px;
	font-size: 12px; font-weight: 600;
}
.o-pill--default { background: var(--cream-2); color: var(--ink-2); border: 1px solid var(--border); }
.o-pill--orange  { background: var(--orange-soft); color: var(--orange-ink); border: 1px solid #fbcfb1; }

/* --- Buttons --- */
.o-btn {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 10px 18px; border-radius: 999px;
	font-size: 14px; font-weight: 600; cursor: pointer;
	transition: transform .08s;
	border: 1px solid transparent;
}
.o-btn--lg { padding: 14px 22px; font-size: 15px; }
.o-btn--sm { padding: 6px 12px; font-size: 12px; gap: 6px; }
.o-btn--primary { background: var(--orange); color: #fff; border-color: var(--orange); }
.o-btn--outline { background: transparent; color: var(--ink); border: 1px solid var(--border-strong); }
.o-btn:active { transform: scale(0.98); }

/* Resume pill — occupies the role header's spacer area on wider
   viewports, stacks below the role title on mobile. */
.o-resume-pill {
	max-width: 260px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.o-resume-pill[hidden] { display: none !important; }

/* Scroll-to-bottom sentinel: near-invisible so the IntersectionObserver
   has a target without affecting layout. */
.o-chap-scroll-sentinel {
	height: 1px;
	width: 1px;
	margin: 0;
	padding: 0;
}

/* --- Role picker --- */
.o-picker {
	padding: 80px 24px 40px;
	background: var(--cream);
	border-bottom: 1px solid var(--border);
}
.o-picker-inner { max-width: 920px; margin: 0 auto; text-align: center; }
.o-picker-h1 {
	font-size: clamp(32px, 4.5vw, 52px);
	font-weight: 800; line-height: 1.05;
	margin: 14px auto 10px;
	letter-spacing: -0.02em;
	max-width: 680px;
}
.o-picker-lead {
	font-size: 17px; color: var(--ink-2);
	max-width: 560px; margin: 0 auto 30px;
	line-height: 1.5;
}
.o-role-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin-top: 20px;
}
@media (max-width: 820px) {
	.o-role-grid { grid-template-columns: repeat(2, 1fr); }
}
.o-role-card {
	padding: 22px;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 18px;
	display: flex; flex-direction: column; gap: 10px;
	min-height: 180px;
	text-align: left;
	color: var(--ink);
	transition: all .15s;
}
.o-role-card:hover { border-color: var(--border-strong); }
.o-role-icon {
	width: 40px; height: 40px; border-radius: 10px;
	background: var(--orange-soft); color: var(--orange-ink);
	display: grid; place-items: center;
}
.o-role-name { font-family: 'Figtree', sans-serif; font-weight: 800; font-size: 17px; margin-top: 4px; }
.o-role-blurb { font-size: 13px; color: var(--ink-2); line-height: 1.4; }

/* --- Progress strip --- */
.o-strip {
	position: sticky; top: 0; z-index: 40;
	background: rgba(250, 246, 241, 0.9);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--border);
}
.o-strip-inner {
	max-width: 1280px; margin: 0 auto;
	padding: 14px 24px;
	display: flex; align-items: center; gap: 16px;
}
.o-strip-logo {
	width: 30px; height: 30px; border-radius: 8px;
	background: var(--orange); color: #fff;
	display: grid; place-items: center;
	font-family: 'Figtree', sans-serif; font-weight: 800; font-size: 12px;
}
.o-strip-title { font-family: 'Figtree', sans-serif; font-weight: 700; font-size: 14px; }
.o-strip-bar-wrap { flex: 1; max-width: 340px; margin: 0 20px; }
.o-strip-bar { position: relative; height: 6px; background: var(--cream-2); border-radius: 99px; overflow: hidden; }
.o-strip-barfill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: var(--orange); border-radius: 99px; transition: width .3s; }
.o-strip-counter { font-size: 13px; color: var(--ink-2); font-weight: 600; }
.o-strip-counter-sub { color: var(--ink-3); font-weight: 500; }
.o-strip-store { font-size: 13px; color: var(--orange-ink); font-weight: 600; text-decoration: underline; }

/* --- Role header --- */
.o-role-header {
	background: var(--cream);
	border-bottom: 1px solid var(--border);
	padding: 28px 24px;
}
.o-role-header-inner {
	max-width: 1280px; margin: 0 auto;
	display: flex; align-items: center; gap: 16px;
	flex-wrap: wrap;
}
.o-role-change {
	background: transparent;
	border: 1px solid var(--border);
	border-radius: 99px;
	padding: 6px 14px;
	font-size: 12px;
	color: var(--ink-2);
	display: inline-flex; align-items: center; gap: 6px;
}
.o-role-eyebrow {
	font-size: 12px; color: var(--ink-3);
	font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
}
.o-role-title { font-family: 'Figtree', sans-serif; font-weight: 800; font-size: 20px; }
.o-role-spacer { flex: 1; }

/* --- Hub (pillar section) --- */
.o-hub { padding: 52px 24px 80px; }
.o-hub-inner { max-width: 980px; margin: 0 auto; }
.o-hub-intro { margin-bottom: 34px; }
.o-hub-h2 { font-size: clamp(26px, 3.2vw, 36px); font-weight: 800; line-height: 1.15; margin: 0 0 8px; letter-spacing: -0.02em; }
.o-hub-lead { font-size: 16px; color: var(--ink-2); margin: 0; max-width: 620px; }

/* --- Pillar card --- */
.o-pillar {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 18px;
	margin-bottom: 18px;
	overflow: hidden;
}
.o-pillar[data-tone="firstlook"] .o-pillar-head { background: var(--firstlook-soft); }
.o-pillar[data-tone="firstlook"] .o-pillar-n    { background: var(--firstlook); }
.o-pillar[data-tone="k252"] .o-pillar-head      { background: var(--k252-soft); }
.o-pillar[data-tone="k252"] .o-pillar-n         { background: var(--k252); }
.o-pillar[data-tone="xp3"] .o-pillar-head       { background: var(--xp3-soft); }
.o-pillar[data-tone="xp3"] .o-pillar-n          { background: var(--xp3); }

.o-pillar-head {
	display: flex; gap: 18px; align-items: center;
	padding: 22px 24px;
	border-bottom: 1px solid var(--border);
	background: var(--orange-soft); /* default if no tone */
}
.o-pillar-n {
	width: 48px; height: 48px; border-radius: 12px;
	background: var(--orange); color: #fff;
	display: grid; place-items: center;
	font-family: 'Figtree', sans-serif; font-weight: 800; font-size: 18px;
}
.o-pillar-head-text { flex: 1; }
.o-pillar-title { font-family: 'Figtree', sans-serif; font-size: 20px; font-weight: 800; }
.o-pillar-subtitle { font-size: 13px; color: var(--ink-2); }
.o-pillar-count { font-size: 13px; color: var(--ink-2); font-weight: 600; }

.o-pillar--empty {
	padding: 32px 24px;
	color: var(--ink-3);
	text-align: center;
}

/* --- Chapter list --- */
.o-chap-list { margin: 0; padding: 0; list-style: none; }
.o-chap-row {
	display: flex; gap: 14px; align-items: center;
	padding: 16px 24px;
	border-top: 1px solid var(--border);
	cursor: pointer;
	background: #fff;
	transition: background .15s;
}
.o-chap-row:hover { background: var(--cream); }
.o-chap-row.is-done { background: var(--cream); }
.o-chap-row.is-done .o-chap-title { text-decoration: line-through; color: var(--ink-3); }

.o-chap-check {
	width: 24px; height: 24px; border-radius: 99px;
	border: 2px solid var(--border-strong);
	display: grid; place-items: center;
	color: transparent;
	flex-shrink: 0;
	transition: background .15s, border-color .15s, color .15s;
}
.o-chap-row.is-done .o-chap-check {
	background: var(--orange);
	border-color: var(--orange);
	color: #fff;
}
.o-pillar[data-tone="firstlook"] .o-chap-row.is-done .o-chap-check { background: var(--firstlook); border-color: var(--firstlook); }
.o-pillar[data-tone="k252"] .o-chap-row.is-done .o-chap-check      { background: var(--k252);      border-color: var(--k252); }
.o-pillar[data-tone="xp3"] .o-chap-row.is-done .o-chap-check       { background: var(--xp3);       border-color: var(--xp3); }

.o-chap-body { flex: 1; min-width: 0; }
.o-chap-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.o-chap-title { font-weight: 700; font-size: 15px; color: var(--ink); }
.o-chap-desc { font-size: 13px; color: var(--ink-2); margin-top: 4px; }
.o-chap-chevron { color: var(--ink-3); }

/* --- Next step CTA --- */
.o-next {
	padding: 54px 24px;
	background: var(--cream-2);
	border-top: 1px solid var(--border);
}
.o-next-inner {
	max-width: 860px; margin: 0 auto;
	text-align: center;
}
.o-next-h3 {
	font-size: 28px; font-weight: 800;
	margin: 10px 0 8px; letter-spacing: -0.02em;
}
.o-next-lead {
	font-size: 15px; color: var(--ink-2);
	margin: 0 auto 20px; max-width: 500px;
}
.o-next-actions {
	display: flex; gap: 10px; justify-content: center;
	flex-wrap: wrap;
}

/* --- Hub video block (OnboardingVideo) --- */
.o-video-inner {
	max-width: 860px; margin: 0 auto;
	padding: 32px 24px;
	display: grid; gap: 18px;
}
.o-video-head { text-align: center; }
.o-video-h3 {
	font-size: 24px; font-weight: 800;
	margin: 10px 0 6px; letter-spacing: -0.02em;
}
.o-video-lead {
	font-size: 15px; color: var(--ink-2);
	margin: 0 auto; max-width: 560px;
}
.o-video-player {
	aspect-ratio: 16/9; background: #000;
	border-radius: 14px; overflow: hidden;
}
.o-video-player video,
.o-video-player iframe {
	width: 100%; height: 100%; display: block;
}

/* ==================================================================
   Chapter page (/curriculos/bemvindo/<pillar>/<chapter>)
   Shared chrome + per-body-type styles. All rules are scoped to
   `.o-onboarding.o-chap-page` so the tokens from the hub apply but
   there's no chance of bleeding into the hub itself.
   ================================================================== */

.o-chap-page { padding-bottom: 80px; }

/* --- Sticky top strip (logo · breadcrumb · progress · role pill) --- */
.o-chap-page .o-chap-strip {
	position: sticky; top: 0; z-index: 40;
	background: rgba(250, 246, 241, 0.92);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--border);
}
.o-chap-page .o-chap-strip-inner {
	max-width: 1180px; margin: 0 auto;
	padding: 12px 24px;
	display: flex; align-items: center; gap: 16px;
	flex-wrap: wrap;
}
.o-chap-page .o-chap-crumb {
	display: flex; align-items: center; gap: 6px;
	flex: 1; min-width: 0;
	font-size: 13px; color: var(--ink-2);
	flex-wrap: wrap;
}
.o-chap-page .o-chap-crumb-link {
	color: var(--ink-2); font-weight: 600;
	display: inline-flex; align-items: center; gap: 6px;
	white-space: nowrap;
}
.o-chap-page .o-chap-crumb-link:hover { color: var(--orange-ink); }
.o-chap-page .o-chap-crumb-current {
	color: var(--ink); font-weight: 700;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	max-width: 280px;
}
.o-chap-page .o-chap-strip-progress {
	display: flex; align-items: center; gap: 12px;
}
.o-chap-page .o-chap-strip-progress .o-strip-counter {
	font-size: 12px; color: var(--ink-3); font-weight: 600;
	white-space: nowrap;
}
.o-chap-page .o-chap-strip-progress .o-strip-bar-wrap {
	width: 120px;
}
.o-chap-page .o-chap-strip-progress .o-strip-bar {
	height: 5px; background: var(--cream-2);
	border-radius: 99px; overflow: hidden;
}
.o-chap-page .o-chap-strip-progress .o-strip-barfill {
	height: 100%; width: 0%;
	background: var(--orange); border-radius: 99px;
	transition: width .3s;
}
.o-chap-page .o-chap-role-pill { white-space: nowrap; }

/* Mobile (≤640px): the strip's four-column flex (logo · breadcrumb ·
   progress · role pill) bloats into 3-4 wrapped rows on a phone, and
   the long pillar crumb link ("Pilar 02 · Como implementar") had no
   truncation — it overflowed and overlapped neighbouring rows through
   the rgba(.92) backdrop-filter background. The mobile rules collapse
   the strip into two compact lines: [PL · breadcrumb] and
   [progress · role pill], drop the redundant pillar crumb (the chapter
   header right below already shows the pillar badge and title), and
   make the strip background fully opaque so any chapter content that
   slips under it on scroll can't bleed through. */
@media (max-width: 640px) {
	.o-chap-page .o-chap-strip {
		background: var(--cream);
		backdrop-filter: none;
	}
	.o-chap-page .o-chap-strip-inner {
		padding: 10px 16px;
		gap: 10px;
	}
	.o-chap-page .o-chap-crumb {
		font-size: 12px;
		gap: 4px;
		flex-wrap: nowrap;
		overflow: hidden;
	}
	/* Drop the middle pillar crumb + its trailing chevron on phone —
	   the chapter header below already names the pillar. The chevron
	   is the SVG that immediately follows the second crumb-link. */
	.o-chap-page .o-chap-crumb .o-chap-crumb-link:nth-of-type(2),
	.o-chap-page .o-chap-crumb .o-chap-crumb-link:nth-of-type(2) + svg {
		display: none;
	}
	.o-chap-page .o-chap-crumb-current {
		max-width: none;
		flex: 1; min-width: 0;
	}
	.o-chap-page .o-chap-strip-progress {
		gap: 8px;
		flex: 1; min-width: 0;
	}
	.o-chap-page .o-chap-strip-progress .o-strip-bar-wrap {
		width: auto; flex: 1; min-width: 60px;
	}
	.o-chap-page .o-chap-role-pill {
		font-size: 11px;
		padding: 3px 10px;
	}
}

/* --- In-body chapter header (pillar badge + type/time + h1 + desc) --- */
.o-chap-page .o-chap-header {
	padding: 40px 0 24px;
	border-bottom: 1px solid var(--border);
	margin-bottom: 28px;
}
.o-chap-page .o-chap-meta {
	display: flex; align-items: center; gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}
.o-chap-page .o-chap-pillar-badge {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 4px 12px 4px 6px;
	border-radius: 999px;
	background: var(--orange-soft);
	border: 1px solid #fbcfb1;
	font-size: 12px; font-weight: 700; color: var(--ink);
}
.o-chap-page .o-chap-pillar-badge[data-tone="firstlook"] {
	background: var(--firstlook-soft);
	border-color: var(--firstlook);
}
.o-chap-page .o-chap-pillar-badge[data-tone="firstlook"] .o-chap-pillar-badge-n {
	background: var(--firstlook);
}
.o-chap-page .o-chap-pillar-badge[data-tone="k252"] {
	background: var(--k252-soft);
	border-color: var(--k252);
}
.o-chap-page .o-chap-pillar-badge[data-tone="k252"] .o-chap-pillar-badge-n {
	background: var(--k252);
}
.o-chap-page .o-chap-pillar-badge[data-tone="xp3"] {
	background: var(--xp3-soft);
	border-color: var(--xp3);
}
.o-chap-page .o-chap-pillar-badge[data-tone="xp3"] .o-chap-pillar-badge-n {
	background: var(--xp3);
}
.o-chap-page .o-chap-pillar-badge-n {
	width: 22px; height: 22px; border-radius: 99px;
	background: var(--orange); color: #fff;
	display: grid; place-items: center;
	font-family: 'Figtree', sans-serif; font-weight: 800; font-size: 11px;
	flex-shrink: 0;
}
.o-chap-page .o-chap-pillar-badge-title { white-space: nowrap; }
.o-chap-page .o-chap-type-pill {
	background: var(--cream-2); color: var(--ink-2);
	border: 1px solid var(--border);
}
.o-chap-page .o-chap-time-pill {
	background: var(--cream-2); color: var(--ink-3);
	border: 1px solid var(--border);
}
.o-chap-page .o-chap-h1 {
	font-size: clamp(30px, 4vw, 44px);
	font-weight: 800; line-height: 1.08; letter-spacing: -0.025em;
	margin: 0 0 12px; max-width: 820px;
}
.o-chap-page .o-chap-lede {
	font-size: 17px; color: var(--ink-2); line-height: 1.5;
	margin: 0; max-width: 720px;
}

/* --- Main body container --- */
/* The main column is wide enough to host a read/guide layout with a
   220px TOC rail + ~820px body column. Header, completion and footer
   are capped at 820px individually so they line up with the single-
   column body types without stretching across the rail's gutter. */
.o-chap-page .o-chap-main {
	max-width: 1100px; margin: 0 auto;
	padding: 0 24px 8px;
}
.o-chap-page .o-chap-body-wrap { min-width: 0; }
.o-chap-page .o-chap-body-stub {
	font-size: 15px; color: var(--ink-3);
	padding: 40px 0; text-align: center;
}

/* --- Completion block --- */
.o-chap-page .o-chap-completion {
	max-width: 820px; margin: 36px 0 0;
}
.o-chap-page .o-chap-complete-box {
	padding: 20px 22px;
	background: #fff; color: var(--ink);
	border: 1px solid var(--border); border-radius: 18px;
	display: flex; align-items: center; gap: 16px;
	flex-wrap: wrap;
	transition: background .2s, color .2s, border-color .2s;
}
/* Done state — ChapterPageScript toggles .is-done on the box whenever
   any mark button flips. The whole card goes ink-dark; child spans and
   helpers invert via the selectors below. */
.o-chap-page .o-chap-complete-box.is-done {
	background: var(--ink); color: #fff;
	border-color: var(--ink);
}
.o-chap-page .o-chap-complete-circle {
	width: 40px; height: 40px; border-radius: 99px;
	background: transparent;
	border: 2px solid var(--border-strong);
	color: transparent;
	display: grid; place-items: center;
	cursor: pointer; flex-shrink: 0;
	transition: background .15s, border-color .15s, color .15s;
}
.o-chap-page .o-chap-complete-circle.is-done {
	background: var(--orange); border-color: var(--orange); color: #fff;
}
.o-chap-page .o-chap-complete-text { flex: 1; min-width: 220px; }
.o-chap-page .o-chap-complete-title {
	font-family: 'Figtree', sans-serif; font-weight: 800; font-size: 17px;
	line-height: 1.2;
}
.o-chap-page .o-chap-complete-title [data-onboarding-complete-done] { display: none; }
.o-chap-page .o-chap-complete-box.is-done
	.o-chap-complete-title [data-onboarding-complete-todo] { display: none; }
.o-chap-page .o-chap-complete-box.is-done
	.o-chap-complete-title [data-onboarding-complete-done] { display: inline; }
.o-chap-page .o-chap-complete-help {
	font-size: 13px; color: var(--ink-3); margin-top: 3px;
	line-height: 1.45;
}
.o-chap-page .o-chap-complete-box.is-done .o-chap-complete-help {
	color: rgba(255, 255, 255, 0.6);
}
.o-chap-page .o-chap-mark {
	background: var(--orange); color: #fff; border: 1px solid var(--orange);
	padding: 10px 18px; border-radius: 999px;
	font-size: 14px; font-weight: 600; cursor: pointer;
}
.o-chap-page .o-chap-mark.is-done {
	background: transparent; color: #fff; border-color: rgba(255,255,255,0.3);
}
.o-chap-page .o-chap-mark.is-disabled,
.o-chap-page .o-chap-mark[disabled] {
	opacity: .45; cursor: not-allowed;
}

/* --- Footer (card-style prev/next) --- */
.o-chap-page .o-chap-footer {
	max-width: 820px; margin: 40px 0 0;
	padding: 24px 0 0;
	border-top: 1px solid var(--border);
	display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.o-chap-page .o-chap-nav {
	background: #fff; color: var(--ink);
	border: 1px solid var(--border); border-radius: 16px;
	padding: 16px 18px;
	display: flex; align-items: center; gap: 14px;
	text-decoration: none;
	transition: border-color .15s, transform .08s;
}
.o-chap-page .o-chap-nav:hover { border-color: var(--border-strong); }
.o-chap-page .o-chap-nav:active { transform: scale(0.995); }
.o-chap-page .o-chap-nav--prev { justify-content: flex-start; text-align: left; }
.o-chap-page .o-chap-nav--next { justify-content: flex-end; text-align: right; }
.o-chap-page .o-chap-nav-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.o-chap-page .o-chap-nav-eyebrow {
	font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
	color: var(--ink-3); font-weight: 700;
}
.o-chap-page .o-chap-nav-title {
	font-family: 'Figtree', sans-serif; font-weight: 700; font-size: 15px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.o-chap-page .o-chap-nav--pillar-end {
	background: var(--ink); color: #fff; border-color: var(--ink);
}
.o-chap-page .o-chap-nav--pillar-end .o-chap-nav-eyebrow {
	color: rgba(255, 255, 255, 0.65);
}
.o-chap-page .o-chap-nav--finish {
	background: var(--orange); color: #fff; border-color: var(--orange);
}
.o-chap-page .o-chap-nav--finish .o-chap-nav-eyebrow {
	color: rgba(255, 255, 255, 0.75);
}
.o-chap-page .o-chap-nav.is-disabled { opacity: .45; cursor: not-allowed; }
.o-chap-page .o-chap-nav-spacer { /* empty slot when there's no prev */ }
@media (max-width: 640px) {
	.o-chap-page .o-chap-footer { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------
   read — article (two-column with sticky TOC rail when ShowTOC is on)
   ------------------------------------------------------------------ */
.o-chap-page .o-chap-read-inner {
	display: grid; grid-template-columns: 1fr; gap: 28px;
	align-items: start;
}
@media (min-width: 1000px) {
	.o-chap-page .o-chap-read-inner:has(.o-chap-toc) {
		grid-template-columns: 220px 1fr;
		gap: 56px;
	}
}
.o-chap-page .o-chap-read-body-col {
	display: grid; gap: 22px; min-width: 0;
	font-size: 17px; color: var(--ink-2); line-height: 1.65;
}
.o-chap-page .o-chap-lede-body {
	font-family: 'Figtree', sans-serif;
	font-size: 20px; font-weight: 500;
	color: var(--ink); line-height: 1.45;
	letter-spacing: -0.01em;
	margin: 0 0 8px;
}

/* Left-side rail TOC — "Neste capítulo" with numbered (01, 02, …)
   entries. Becomes a stacked list above the body below 1000px; above
   1000px it's a sticky sidebar flush with the top strip. */
.o-chap-page .o-chap-toc {
	font-size: 13px;
}
@media (min-width: 1000px) {
	.o-chap-page .o-chap-toc {
		position: sticky; top: 80px;
		align-self: start;
		padding: 0;
	}
}
.o-chap-page .o-chap-toc-title {
	font-size: 11px; font-weight: 700; color: var(--ink-3);
	text-transform: uppercase; letter-spacing: 0.08em;
	margin-bottom: 12px;
}
.o-chap-page .o-chap-toc-list {
	list-style: none; margin: 0; padding: 0 0 0 14px;
	border-left: 1px solid var(--border);
	display: flex; flex-direction: column; gap: 10px;
}
.o-chap-page .o-chap-toc-list a {
	display: inline-flex; align-items: baseline; gap: 8px;
	color: var(--ink-2); text-decoration: none;
	line-height: 1.4;
}
.o-chap-page .o-chap-toc-list a:hover { color: var(--orange-ink); }
.o-chap-page .o-chap-toc-n {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 11px; color: var(--ink-3);
	flex-shrink: 0;
}
.o-chap-page .o-chap-toc-label { font-weight: 600; }
.o-chap-page .o-chap-read-section { scroll-margin-top: 96px; }
.o-chap-page .o-chap-read-h2 {
	font-size: 22px; font-weight: 800; letter-spacing: -0.01em;
	margin: 8px 0 10px;
}
.o-chap-page .o-chap-read-body { font-size: 16px; line-height: 1.65; color: var(--ink); }
.o-chap-page .o-chap-read-body p { margin: 0 0 12px; }
/* Section callouts — optional per-section accent that either pulls a
   single quote out (dark) or adds an orange-tinted tip. Sits after the
   section body so the narrative flow stays readable. */
.o-chap-page .o-chap-read-callout {
	margin: 14px 0 0;
	padding: 16px 20px;
	border-radius: 14px;
	font-size: 15px; line-height: 1.55;
}
.o-chap-page .o-chap-read-callout--quote {
	background: var(--ink); color: #fff;
	font-family: 'Figtree', sans-serif;
	font-weight: 600; font-size: 17px;
	letter-spacing: -0.01em;
}
.o-chap-page .o-chap-read-callout--note {
	background: var(--orange-tint); color: var(--ink);
	border: 1px solid var(--orange-soft);
}

/* ------------------------------------------------------------------
   video
   ------------------------------------------------------------------ */
.o-chap-page .o-chap-video-inner { display: grid; gap: 20px; }
.o-chap-page .o-chap-video-player {
	aspect-ratio: 16/9; background: #000;
	border-radius: 14px; overflow: hidden;
}
.o-chap-page .o-chap-video-player video,
.o-chap-page .o-chap-video-player iframe {
	width: 100%; height: 100%; display: block;
}
.o-chap-page .o-chap-video-intro { font-size: 15px; color: var(--ink-2); }
.o-chap-page .o-chap-video-transcript-wrap summary {
	font-size: 14px; font-weight: 600; cursor: pointer;
	padding: 10px 0; color: var(--ink-2);
}
.o-chap-page .o-chap-video-transcript {
	font-size: 14px; line-height: 1.6; color: var(--ink-2);
	padding: 12px 0;
}
.o-chap-page .o-chap-related {
	background: var(--cream-2);
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 16px 18px;
}
.o-chap-page .o-chap-related-title {
	font-size: 12px; font-weight: 700; color: var(--ink-3);
	text-transform: uppercase; letter-spacing: 0.06em;
	margin-bottom: 8px;
}
.o-chap-page .o-chap-related-list { margin: 0; padding-left: 18px; font-size: 14px; }
.o-chap-page .o-chap-related-link { color: var(--orange-ink); text-decoration: underline; }

/* ------------------------------------------------------------------
   link — interstitial (rare; most link chapters redirect directly)
   ------------------------------------------------------------------ */
.o-chap-page .o-chap-link-inner {
	display: grid; gap: 22px; text-align: center;
	padding: 12px 0;
}
.o-chap-page .o-chap-link-preamble {
	font-size: 16px; color: var(--ink-2); line-height: 1.55;
	max-width: 520px; margin: 0 auto;
}
.o-chap-page .o-chap-link-cta { margin: 0 auto; }

/* ------------------------------------------------------------------
   story — narrative
   ------------------------------------------------------------------ */
.o-chap-page .o-chap-story-inner { display: grid; gap: 22px; }
.o-chap-page .o-chap-story-hero {
	margin: -8px 0 4px;
	border-radius: 16px; overflow: hidden;
	aspect-ratio: 3/2; background: var(--cream-2);
}
.o-chap-page .o-chap-story-hero-img,
.o-chap-page .o-chap-story-hero .v-img,
.o-chap-page .o-chap-story-hero img {
	width: 100%; height: 100%; object-fit: cover; display: block;
}
.o-chap-page .o-chap-story-attr {
	display: flex; align-items: center; gap: 12px;
	padding: 10px 0;
}
.o-chap-page .o-chap-story-avatar {
	width: 44px; height: 44px; border-radius: 99px;
	overflow: hidden; background: var(--cream-2); flex-shrink: 0;
}
.o-chap-page .o-chap-story-avatar-img,
.o-chap-page .o-chap-story-avatar img {
	width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Initials fallback when no avatar image was cleared for publication —
   keeps the attribution block visually anchored without a photo. */
.o-chap-page .o-chap-story-avatar--initials {
	display: grid; place-items: center;
	background: var(--orange); color: #fff;
	font-family: 'Figtree', sans-serif; font-weight: 800;
	font-size: 15px; letter-spacing: 0.02em;
	text-transform: uppercase;
}
.o-chap-page .o-chap-story-attr-name { font-weight: 700; font-size: 15px; }
.o-chap-page .o-chap-story-attr-sub { font-size: 13px; color: var(--ink-3); }
.o-chap-page .o-chap-story-quote {
	margin: 0; padding: 18px 24px;
	border-left: 3px solid var(--orange);
	background: var(--orange-tint);
	border-radius: 0 12px 12px 0;
	font-size: 19px; font-weight: 600;
	font-family: 'Figtree', sans-serif;
	color: var(--ink); line-height: 1.4;
}
.o-chap-page .o-chap-story-quote p { margin: 0; }
.o-chap-page .o-chap-story-body { font-size: 16px; line-height: 1.65; color: var(--ink); }
.o-chap-page .o-chap-story-body p { margin: 0 0 12px; }
.o-chap-page .o-chap-story-takeaways {
	background: var(--cream-2);
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 16px 18px;
}
.o-chap-page .o-chap-story-takeaway-title {
	font-size: 12px; font-weight: 700; color: var(--ink-3);
	text-transform: uppercase; letter-spacing: 0.06em;
	margin-bottom: 8px;
}
.o-chap-page .o-chap-story-takeaway-list { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.5; }

/* ------------------------------------------------------------------
   task — single action
   ------------------------------------------------------------------ */
.o-chap-page .o-chap-task-inner { display: grid; gap: 18px; }
.o-chap-page .o-chap-task-intro { font-size: 16px; color: var(--ink); line-height: 1.55; }
.o-chap-page .o-chap-task-instructions { font-size: 15px; line-height: 1.6; color: var(--ink); }
.o-chap-page .o-chap-task-instructions ol,
.o-chap-page .o-chap-task-instructions ul { padding-left: 22px; }
.o-chap-page .o-chap-task-instructions li + li { margin-top: 6px; }
.o-chap-page .o-chap-task-action {
	align-self: flex-start; margin-top: 4px;
}
.o-chap-page .o-chap-task-confirmation {
	display: none;
	background: var(--cream-2);
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 14px 16px;
	font-size: 15px; color: var(--ink-2); line-height: 1.5;
}
/* When the shared mark button has the done class, swap which body
   block shows. The is-done class is toggled on the mark button by
   ChapterPageScript, not on the task body — use :has() to read it. */
.o-chap-page:has(.o-chap-mark.is-done) .o-chap-task-instructions { display: none; }
.o-chap-page:has(.o-chap-mark.is-done) .o-chap-task-confirmation { display: block; }

/* ------------------------------------------------------------------
   checklist
   ------------------------------------------------------------------ */
.o-chap-page .o-chap-checklist-inner { display: grid; gap: 14px; }
.o-chap-page .o-chap-checklist-intro { font-size: 15px; color: var(--ink-2); line-height: 1.55; }
.o-chap-page .o-chap-checklist-list {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 10px;
}
.o-chap-page .o-chap-checklist-item {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 14px 16px;
	display: grid; grid-template-columns: auto 1fr; column-gap: 12px;
	align-items: start;
}
.o-chap-page .o-chap-checklist-cb {
	width: 18px; height: 18px; margin-top: 2px;
	accent-color: var(--orange);
	cursor: pointer;
}
.o-chap-page .o-chap-checklist-label {
	grid-column: 2; display: flex; gap: 8px; align-items: center;
	font-size: 15px; font-weight: 600; cursor: pointer;
}
.o-chap-page .o-chap-checklist-title { }
.o-chap-page .o-chap-checklist-dot { color: var(--ink-3); }
.o-chap-page .o-chap-checklist-pill {
	background: var(--cream-2); color: var(--ink-3);
	border: 1px solid var(--border);
	border-radius: 999px; padding: 1px 8px;
	font-size: 11px; font-weight: 600;
}
.o-chap-page .o-chap-checklist-desc {
	grid-column: 2; font-size: 14px; color: var(--ink-2); line-height: 1.5;
	margin-top: 4px;
}
.o-chap-page .o-chap-checklist-link {
	grid-column: 2;
	display: inline-flex; align-items: center; gap: 4px;
	font-size: 13px; color: var(--orange-ink);
	margin-top: 6px; text-decoration: underline;
}
.o-chap-page .o-chap-checklist-counter {
	font-size: 13px; color: var(--ink-3); font-weight: 600;
	margin-top: 6px;
}
.o-chap-page .o-chap-checklist-count { color: var(--orange-ink); }

/* ------------------------------------------------------------------
   guide — sections + steps + optional TOC rail
   ------------------------------------------------------------------ */
.o-chap-page .o-chap-guide-inner { display: grid; gap: 22px; }
.o-chap-page .o-chap-guide-intro { font-size: 16px; color: var(--ink-2); line-height: 1.55; }
.o-chap-page .o-chap-guide-layout {
	display: grid; grid-template-columns: 1fr; gap: 28px;
}
@media (min-width: 1100px) {
	/* TOC rail only when there's room — the main body column stays
	   readable (720px) and the rail sits to its left. */
	.o-chap-page .o-chap-guide-layout:has(.o-chap-guide-toc) {
		grid-template-columns: 220px 1fr;
	}
	.o-chap-page .o-chap-main:has(.o-chap-guide-layout .o-chap-guide-toc) {
		max-width: 1000px;
	}
}
.o-chap-page .o-chap-guide-toc {
	position: sticky; top: 104px;
	align-self: start;
	font-size: 14px;
	padding: 16px 0;
	border-right: 1px solid var(--border);
}
.o-chap-page .o-chap-guide-toc-title {
	font-size: 12px; font-weight: 700; color: var(--ink-3);
	text-transform: uppercase; letter-spacing: 0.06em;
	margin-bottom: 8px;
}
.o-chap-page .o-chap-guide-toc-list {
	margin: 0; padding-left: 18px; line-height: 1.8;
}
.o-chap-page .o-chap-guide-toc-list a {
	color: var(--ink-2);
}
.o-chap-page .o-chap-guide-toc-list a:hover { color: var(--orange-ink); }
.o-chap-page .o-chap-guide-body { display: grid; gap: 28px; min-width: 0; }
.o-chap-page .o-chap-guide-section { scroll-margin-top: 104px; }
.o-chap-page .o-chap-guide-section-h2 {
	font-size: 22px; font-weight: 800; letter-spacing: -0.01em;
	margin: 0 0 10px;
}
.o-chap-page .o-chap-guide-section-intro {
	font-size: 15px; color: var(--ink-2); line-height: 1.55;
	margin-bottom: 12px;
}
.o-chap-page .o-chap-guide-step-list {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 12px;
	counter-reset: guide-step;
}
.o-chap-page .o-chap-guide-step {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 16px 18px;
	display: grid; gap: 10px;
}
.o-chap-page .o-chap-guide-step-head {
	display: grid; grid-template-columns: auto 1fr; column-gap: 12px;
	align-items: center;
}
.o-chap-page .o-chap-guide-step-cb {
	width: 18px; height: 18px; accent-color: var(--orange); cursor: pointer;
}
.o-chap-page .o-chap-guide-step-label {
	grid-column: 2;
	display: flex; align-items: center; gap: 10px;
	cursor: pointer;
}
.o-chap-page .o-chap-guide-step-n {
	display: inline-grid; place-items: center;
	width: 28px; height: 28px; border-radius: 99px;
	background: var(--orange-soft); color: var(--orange-ink);
	font-family: 'Figtree', sans-serif; font-weight: 800; font-size: 14px;
}
.o-chap-page .o-chap-guide-step-heading { font-weight: 700; font-size: 15px; }
.o-chap-page .o-chap-guide-step-body {
	font-size: 15px; line-height: 1.6; color: var(--ink);
	margin-left: 30px;
}
.o-chap-page .o-chap-guide-step-body p { margin: 0 0 8px; }
.o-chap-page .o-chap-guide-step-media { margin-left: 30px; border-radius: 10px; overflow: hidden; }
.o-chap-page .o-chap-guide-step-media-img,
.o-chap-page .o-chap-guide-step-media .v-img,
.o-chap-page .o-chap-guide-step-media img {
	width: 100%; display: block;
}
.o-chap-page .o-chap-guide-step-cb:checked ~ .o-chap-guide-step-label .o-chap-guide-step-n {
	background: var(--orange); color: #fff;
}

/* ------------------------------------------------------------------
   Contextual "How to use this" panel (monthly/weekly pages)
   ------------------------------------------------------------------ */
.how-to-panel {
	background: #fff7f2;
	border: 1px solid #fce1d1;
	border-radius: 16px;
	padding: 18px 20px;
	margin: 0 0 24px;
}
.how-to-header {
	display: flex;
	align-items: center;
	margin-bottom: 12px;
}
.how-to-title {
	font-weight: 700;
	color: #222;
	font-size: 1.05rem;
}
.how-to-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
@media (max-width: 680px) {
	.how-to-cols { grid-template-columns: 1fr; }
}
.how-to-col-label {
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-size: 0.75rem;
	font-weight: 700;
	color: #f9672e;
	margin-bottom: 2px;
}
.how-to-col-body {
	color: #333;
	font-size: 0.95rem;
	margin: 0;
	line-height: 1.5;
}

/* "Personalizar capítulo" CTA — premium feature entry point shown on
   guide-type chapter pages, between body and completion box. */
.o-chap-editor-cta {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 12px 20px;
	margin: 28px 0 20px;
	padding: 18px 22px;
	background: linear-gradient(135deg, #fff5ee 0%, #fde9dd 100%);
	border: 1px solid #fbcfb1;
	border-radius: 16px;
	text-decoration: none;
	color: inherit;
	transition: transform 0.15s, box-shadow 0.15s;
}
.o-chap-editor-cta:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 22px -10px rgba(249, 103, 46, 0.35);
}
.o-chap-editor-cta-title {
	grid-column: 1;
	grid-row: 1;
	font-family: 'Figtree', 'Inter', sans-serif;
	font-weight: 800;
	font-size: 1rem;
	color: #c2461a;
}
.o-chap-editor-cta-desc {
	grid-column: 1;
	grid-row: 2;
	font-size: 0.875rem;
	color: #5b4a3a;
}
.o-chap-editor-cta-pill {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
	padding: 4px 12px;
	background: #2a1f16;
	color: #fff;
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}