/* =========================================================================
   Surfaces — Sections 4-7
   Ported verbatim from the Claude Design handoff (surfaces.css).
   ========================================================================= */

/* ── Shared section intros ───────────────────────────────────────────── */
.s-intro {
	text-align: center;
	max-width: 760px;
	margin: 0 auto;
	padding: 0 clamp(20px, 4vw, 56px);
}
.s-kicker {
	font-family: "Cinzel", serif;
	font-size: 11px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--color-ember);
	font-weight: 600;
	display: inline-block;
	margin-bottom: 14px;
}
.s-title {
	font-family: var(--font-display);
	font-size: clamp(34px, 4.4vw, 56px);
	font-weight: 500;
	letter-spacing: -0.015em;
	line-height: 1.05;
	color: var(--color-deep);
	margin: 0 0 14px;
}
.s-title em { font-style: italic; color: var(--color-coral); font-weight: 400; }
.s-lead {
	font-family: var(--font-display);
	font-style: italic;
	font-size: clamp(17px, 1.4vw, 19px);
	color: var(--color-ink-soft);
	line-height: 1.5;
	margin: 0;
}


/* =========================================================================
   SECTION 4 — El núcleo (Hub/Path/Atelier/Owlery)
   ========================================================================= */
.s-core {
	padding: clamp(72px, 12vh, 128px) 0 clamp(64px, 10vh, 112px);
	background:
		radial-gradient(ellipse 40% 30% at 20% 20%, rgba(252, 192, 0, 0.08), transparent 70%),
		radial-gradient(ellipse 50% 35% at 80% 80%, rgba(84, 96, 168, 0.07), transparent 70%),
		var(--color-paper);
}
.s-core__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(20px, 2vw, 28px);
	max-width: 1180px;
	margin: 48px auto 0;
	padding: 0 clamp(20px, 4vw, 56px);
}

.s-surface {
	position: relative;
	border-radius: var(--radius-xl);
	overflow: hidden;
	min-height: 360px;
	display: grid;
	grid-template-rows: 1fr auto;
	isolation: isolate;
	border: 1px solid transparent;
	transition: transform var(--dur-slow) var(--ease-out),
				box-shadow var(--dur-slow) var(--ease-out);
}
.s-surface:hover { transform: translateY(-4px); box-shadow: 0 24px 60px rgba(43, 37, 48, 0.14); }
.s-surface .j-reveal { transition-delay: var(--enter-delay, 0s); }

.s-surface__atm {
	position: absolute;
	inset: 0;
	z-index: 0;
	transition: opacity var(--dur-slow) var(--ease-out);
}
.s-surface__demo {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	padding: clamp(28px, 3vw, 40px);
}
.s-surface__body {
	position: relative;
	z-index: 2;
	padding: clamp(20px, 2vw, 28px) clamp(24px, 2.5vw, 32px) clamp(24px, 2.5vw, 32px);
	background: rgba(255, 252, 247, 0.92);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-top: var(--hairline);
}
.s-surface__kicker {
	font-family: "Cinzel", serif;
	font-size: 10.5px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--color-coral-dark);
	font-weight: 700;
	margin-bottom: 6px;
}
.s-surface__title {
	font-family: var(--font-display);
	font-size: clamp(22px, 2vw, 28px);
	font-weight: 500;
	line-height: 1.1;
	color: var(--color-deep);
	margin: 0 0 6px;
	letter-spacing: -0.01em;
}
.s-surface__cap {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 15px;
	color: var(--color-ink-soft);
	margin: 0;
	line-height: 1.45;
}

.s-surface--warm { border-color: rgba(252, 60, 48, 0.18); }
.s-surface--warm .s-surface__atm {
	background:
		radial-gradient(ellipse 50% 60% at 80% 30%, rgba(252, 192, 0, 0.20), transparent 60%),
		linear-gradient(180deg, #F5C8B0 0%, #FBDFC8 40%, #FFEFD6 70%, #FFFCF7 100%);
}

.s-surface--stone { border-color: rgba(84, 96, 168, 0.28); }
.s-surface--stone .s-surface__atm {
	background:
		radial-gradient(ellipse 80% 70% at 50% 80%, rgba(252, 160, 60, 0.16), transparent 70%),
		linear-gradient(180deg, #2E2236 0%, #3A2C44 60%, #473655 100%);
}
.s-surface--stone .s-surface__kicker { color: var(--color-ember); }

.s-surface--atelier { border-color: rgba(248, 207, 142, 0.30); }
.s-surface--atelier .s-surface__atm {
	background:
		radial-gradient(ellipse 70% 50% at 30% 30%, rgba(140, 214, 208, 0.18), transparent 60%),
		radial-gradient(ellipse 60% 50% at 80% 70%, rgba(239, 203, 142, 0.16), transparent 60%),
		linear-gradient(180deg, #050D16 0%, #0D1A2D 60%, #182845 100%);
}
.s-surface--atelier .s-surface__kicker { color: #EFCB8E; }

.s-surface--owlery { border-color: rgba(124, 58, 237, 0.30); }
.s-surface--owlery .s-surface__atm {
	background:
		radial-gradient(ellipse 60% 50% at 70% 30%, rgba(245, 158, 11, 0.18), transparent 60%),
		radial-gradient(ellipse 40% 50% at 20% 80%, rgba(168, 85, 247, 0.18), transparent 70%),
		linear-gradient(180deg, #1E1B4B 0%, #3B0764 50%, #5B21B6 100%);
}
.s-surface--owlery .s-surface__kicker { color: #F59E0B; }

.demo { width: 100%; max-width: 320px; height: auto; }

.hub-tile {
	transform: translateY(20px);
	opacity: 0;
	animation: hub-tile-in 0.6s var(--ease-out) forwards;
	animation-delay: calc(var(--d, 0s) + 0.4s);
}
@keyframes hub-tile-in { to { transform: translateY(0); opacity: 1; } }

/* Hub mini-demo — keep it alive after the entrance animation finishes so it
   reads as live next to Path's glowing stone, Atelier's typewriter and
   Owlery's sliding letter. Three layered loops, all subtle: */
.demo-hub__sun {
	transform-box: fill-box;
	transform-origin: center;
	animation: demo-hub-sun 4.2s ease-in-out infinite;
}
.demo-hub__sun-halo {
	transform-box: fill-box;
	transform-origin: center;
	animation: demo-hub-halo 4.2s ease-in-out infinite;
}
.demo-hub__foliage {
	transform-box: fill-box;
	transform-origin: center;
	animation: demo-hub-foliage 5s ease-in-out infinite;
}
.demo-hub__sweep {
	animation: demo-hub-sweep 7.2s var(--ease-in-out) infinite;
}
@keyframes demo-hub-sun {
	0%, 100% { transform: scale(1);    filter: brightness(1); }
	50%      { transform: scale(1.06); filter: brightness(1.08); }
}
@keyframes demo-hub-halo {
	0%, 100% { transform: scale(0.95); opacity: 0.55; }
	50%      { transform: scale(1.10); opacity: 0.95; }
}
@keyframes demo-hub-foliage {
	0%, 100% { transform: scale(1)    translateY(0); }
	50%      { transform: scale(1.06) translateY(-0.6px); }
}
@keyframes demo-hub-sweep {
	0%        { transform: translateX(0);    opacity: 0; }
	8%, 18%   { opacity: 0.85; }
	35%       { opacity: 0; }
	100%      { transform: translateX(180px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.demo-hub__sun,
	.demo-hub__sun-halo,
	.demo-hub__foliage,
	.demo-hub__sweep { animation: none; }
}

.path-stone.is-current circle:first-of-type {
	animation: path-glow 2.6s ease-in-out infinite;
	transform-origin: center;
	transform-box: fill-box;
}
@keyframes path-glow {
	0%, 100% { transform: scale(1);    opacity: 0.8; }
	50%      { transform: scale(1.15); opacity: 1; }
}

.demo-atelier { width: 100%; max-width: 320px; }
.demo-atelier__sheet {
	background: linear-gradient(180deg, #F4EFE2 0%, #ECE5D2 100%);
	border-radius: 12px;
	padding: 18px 20px 16px;
	font-family: var(--font-body);
	border: 1px solid rgba(239, 203, 142, 0.40);
	box-shadow: 0 12px 36px rgba(5, 13, 22, 0.45),
				inset 0 0 60px rgba(140, 214, 208, 0.05);
	position: relative;
}
.demo-atelier__overline {
	font-family: "Cinzel", serif;
	font-size: 9px;
	letter-spacing: 0.22em;
	color: #C8362A;
	font-weight: 600;
	margin-bottom: 8px;
}
.demo-atelier__line {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 14px;
	color: #0D1A2D;
	line-height: 1.4;
	min-height: 56px;
}
.demo-atelier__caret {
	display: inline-block;
	width: 6px;
	height: 1.05em;
	background: #C8362A;
	vertical-align: middle;
	margin-left: 1px;
	animation: caret-blink 0.9s steps(1) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }
.demo-atelier__hint {
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px dashed rgba(13, 26, 45, 0.18);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(13, 26, 45, 0.55);
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 6px;
}
.dot { width: 6px; height: 6px; border-radius: 50%; background: #5460A8; }
.dot--teal { background: #8CD6D0; }

.demo-owlery {
	width: 100%;
	max-width: 280px;
	aspect-ratio: 5 / 3;
	display: grid;
	place-items: center;
}
.demo-owlery__envelope {
	position: relative;
	width: 220px;
	height: 140px;
	background: linear-gradient(180deg, #FEF3C7 0%, #FDE68A 100%);
	border-radius: 6px;
	box-shadow: 0 18px 40px rgba(30, 27, 75, 0.50);
	overflow: hidden;
}
.demo-owlery__envelope::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 80px;
	background: linear-gradient(180deg, #F59E0B 0%, #D97706 100%);
	clip-path: polygon(0 0, 50% 60%, 100% 0);
	z-index: 1;
}
.demo-owlery__envelope::after {
	content: "";
	position: absolute;
	bottom: 0; left: 0; right: 0;
	height: 70px;
	background: linear-gradient(180deg, #FBBF24 0%, #F59E0B 100%);
	clip-path: polygon(0 60%, 50% 0, 100% 60%, 100% 100%, 0 100%);
	z-index: 3;
}
.demo-owlery__letter {
	position: absolute;
	inset: auto 16px 18px 16px;
	background: #FEF3C7;
	height: 96px;
	padding: 12px 12px 0;
	border-radius: 2px;
	box-shadow: 0 2px 8px rgba(30, 27, 75, 0.30);
	z-index: 2;
	animation: letter-slide 4s var(--ease-in-out) infinite;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
@keyframes letter-slide {
	0%, 12%  { transform: translateY(46px); }
	50%, 75% { transform: translateY(-26px); }
	88%, 100%{ transform: translateY(46px); }
}
.demo-owlery__overline {
	font-family: "Cinzel", serif;
	font-size: 8.5px;
	letter-spacing: 0.18em;
	color: #5B21B6;
	font-weight: 700;
	text-transform: uppercase;
}
.demo-owlery__line {
	display: block;
	width: 100%;
	height: 4px;
	border-radius: 2px;
	background: rgba(91, 33, 182, 0.22);
}
.demo-owlery__line.short { width: 70%; }
.demo-owlery__seal {
	position: absolute;
	z-index: 4;
	bottom: 14px;
	left: 50%;
	transform: translateX(-50%);
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, #C8362A, #7C1D1D);
	color: #FEF3C7;
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 600;
	font-size: 14px;
	display: grid;
	place-items: center;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}


/* =========================================================================
   SECTION 5 — Maestría
   ========================================================================= */
.s-mastery {
	padding: clamp(80px, 14vh, 144px) 0 clamp(72px, 12vh, 128px);
	background:
		radial-gradient(ellipse 50% 60% at 50% 50%, rgba(67, 198, 172, 0.06), transparent 70%),
		radial-gradient(ellipse 60% 50% at 80% 20%, rgba(181, 58, 139, 0.06), transparent 70%),
		linear-gradient(180deg, #060A1C 0%, #0F1730 100%);
	color: #E8EAF6;
	position: relative;
	isolation: isolate;
}
.s-mastery::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 30% 40% at 20% 70%, rgba(44, 91, 206, 0.12), transparent 70%),
		radial-gradient(ellipse 25% 30% at 70% 30%, rgba(67, 198, 172, 0.10), transparent 70%);
	pointer-events: none;
	z-index: 0;
	animation: aurora-drift 22s ease-in-out infinite;
}
@keyframes aurora-drift {
	0%, 100% { transform: translate(0, 0); }
	33%      { transform: translate(2%, -1%); }
	66%      { transform: translate(-1%, 2%); }
}
.s-mastery .s-intro { position: relative; z-index: 1; }
.s-mastery .s-kicker { color: #F8C25C; }
.s-mastery .s-title  { color: #E8EAF6; }
.s-mastery .s-title em { color: #F8C25C; }
.s-mastery .s-lead  { color: rgba(232, 234, 246, 0.72); }

.s-mirror {
	position: relative;
	z-index: 1;
	max-width: 540px;
	margin: 48px auto 0;
	padding: 0 clamp(20px, 4vw, 56px);
}
.s-mirror__caption {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 8px;
	padding: 0 8px;
}
.s-mirror__kicker {
	font-family: "Cinzel", serif;
	font-size: 11px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: #F8C25C;
	font-weight: 600;
}
.s-mirror__sub {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 13px;
	color: rgba(232, 234, 246, 0.65);
}
.s-mirror__svg {
	width: 100%;
	height: auto;
	filter: drop-shadow(0 24px 60px rgba(252, 120, 12, 0.15));
}
.s-mirror__poly {
	transition: all 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.s-mastery__row {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	max-width: 1080px;
	margin: 64px auto 0;
	padding: 0 clamp(20px, 4vw, 56px);
}
.s-cell {
	background: rgba(15, 23, 48, 0.66);
	border: 1px solid rgba(248, 194, 92, 0.22);
	border-radius: var(--radius-xl);
	padding: clamp(24px, 2.6vw, 36px);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	position: relative;
	overflow: hidden;
}
.s-cell__kicker {
	font-family: "Cinzel", serif;
	font-size: 10.5px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--color-coral-dark);
	font-weight: 700;
	margin-bottom: 8px;
}
.s-cell--grammar .s-cell__kicker { color: #FCC000; }
.s-cell--exam    .s-cell__kicker { color: #43C6AC; }
.s-cell__title {
	font-family: var(--font-display);
	font-size: clamp(20px, 1.8vw, 26px);
	font-weight: 500;
	line-height: 1.15;
	color: #FFFCF7;
	margin: 0 0 8px;
	letter-spacing: -0.01em;
}
.s-cell__cap {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 15px;
	color: rgba(232, 234, 246, 0.66);
	margin: 0 0 20px;
	line-height: 1.45;
}

.s-grammar-lanterns {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px 10px;
}
.s-lantern {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	opacity: 0.55;
	transition: opacity var(--dur-base) var(--ease-out);
}
.s-lantern.is-lit { opacity: 1; }
.s-lantern__bulb {
	width: 22px;
	height: 26px;
	border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%;
	background: radial-gradient(ellipse at 50% 40%, #2A2245 0%, #14101F 100%);
	border: 1px solid rgba(248, 194, 92, 0.30);
	position: relative;
}
.s-lantern.is-lit .s-lantern__bulb {
	background: radial-gradient(ellipse at 50% 50%, #FFE2A3 0%, #FFB466 60%, #C8362A 100%);
	box-shadow: 0 0 14px rgba(252, 160, 60, 0.65);
}
.s-lantern.is-glow .s-lantern__bulb {
	animation: lantern-pulse 2.4s ease-in-out infinite;
}
@keyframes lantern-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(252, 160, 60, 0); }
	50%      { box-shadow: 0 0 16px rgba(252, 160, 60, 0.5); background: radial-gradient(ellipse at 50% 50%, #4A3B5E 0%, #2A2245 100%); }
}
.s-lantern__label {
	font-family: var(--font-body);
	font-size: 10px;
	letter-spacing: 0.06em;
	color: rgba(232, 234, 246, 0.75);
	text-align: center;
}

.s-exam-papers {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.s-paper {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	border-radius: var(--radius-md);
	background: rgba(232, 234, 246, 0.04);
	border: 1px solid rgba(248, 194, 92, 0.10);
	font-family: var(--font-body);
	font-size: 13px;
	color: rgba(232, 234, 246, 0.86);
}
.s-paper__dot { width: 8px; height: 8px; border-radius: 50%; }
.s-paper--done    .s-paper__dot { background: #43C6AC; box-shadow: 0 0 8px rgba(67, 198, 172, 0.5); }
.s-paper--done    { border-color: rgba(67, 198, 172, 0.30); }
.s-paper--active  .s-paper__dot { background: #F8C25C; box-shadow: 0 0 8px rgba(248, 194, 92, 0.6); animation: paper-pulse 2s ease-in-out infinite; }
.s-paper--coming  .s-paper__dot { background: rgba(232, 234, 246, 0.20); }
.s-paper--coming  { color: rgba(232, 234, 246, 0.50); }
@keyframes paper-pulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.4); }
}
.s-exam-countdown {
	margin-top: 12px;
	padding: 12px 14px;
	border-radius: var(--radius-md);
	border: 1px solid rgba(248, 194, 92, 0.28);
	background: linear-gradient(135deg, rgba(248, 194, 92, 0.10), rgba(252, 120, 12, 0.08));
	display: flex;
	align-items: baseline;
	gap: 10px;
}
.s-exam-countdown__num {
	font-family: var(--font-display);
	font-size: 32px;
	font-weight: 600;
	color: #FFFCF7;
	letter-spacing: -0.02em;
}
.s-exam-countdown__lbl {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 13px;
	color: rgba(232, 234, 246, 0.65);
}


/* =========================================================================
   SECTION 6 — Capa reflexiva
   ========================================================================= */
.s-lyrical {
	padding: clamp(80px, 14vh, 144px) 0 clamp(72px, 12vh, 128px);
	background:
		radial-gradient(ellipse 40% 50% at 20% 30%, rgba(132, 178, 93, 0.10), transparent 70%),
		radial-gradient(ellipse 50% 40% at 80% 70%, rgba(84, 96, 168, 0.08), transparent 70%),
		var(--color-paper-warm);
	border-top: var(--hairline);
	border-bottom: var(--hairline);
}
.s-lyrical__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	max-width: 1180px;
	margin: 56px auto 0;
	padding: 0 clamp(20px, 4vw, 56px);
}
.s-lyrical-card {
	position: relative;
	border-radius: var(--radius-xl);
	overflow: hidden;
	min-height: 360px;
	padding: clamp(28px, 2.6vw, 36px);
	border: var(--hairline);
	transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.s-lyrical-card:hover { transform: translateY(-4px); box-shadow: 0 18px 50px rgba(43, 37, 48, 0.12); }
.s-lyrical-card__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.s-lyrical-card__body { position: relative; z-index: 1; }
.s-lyrical-card__title {
	font-family: var(--font-display);
	font-size: clamp(22px, 2vw, 28px);
	font-weight: 500;
	line-height: 1.1;
	color: var(--color-deep);
	margin: 0 0 6px;
	letter-spacing: -0.01em;
}
.s-lyrical-card__cap {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 15px;
	color: var(--color-ink-soft);
	margin: 0 0 18px;
	line-height: 1.45;
}
.s-cell__kicker--violet { color: var(--color-indigo); }
.s-cell__kicker--ember  { color: var(--color-ember); }
.s-cell__kicker--moss   { color: var(--color-moss-deep); }
.s-cell__kicker--gold   { color: #B47C1A; }

/* Moonlight */
.s-moon {
	background: linear-gradient(180deg, #1E1B4B 0%, #2A2245 60%, #14101F 100%);
	border-color: rgba(168, 85, 247, 0.20);
}
.s-moon .s-cell__kicker { color: #C9B9F2; }
.s-moon .s-lyrical-card__title { color: #FFFCF7; }
.s-moon .s-lyrical-card__cap   { color: rgba(255, 252, 247, 0.65); }
.s-moon__star-bg {
	position: absolute;
	width: 1.5px;
	height: 1.5px;
	background: rgba(255, 252, 247, 0.85);
	border-radius: 50%;
	animation: twinkle 5s ease-in-out infinite;
}
@keyframes twinkle {
	0%, 100% { opacity: 0.3; }
	50%      { opacity: 1; }
}
.s-moon__cal { margin-top: 4px; }
.s-moon__month {
	font-family: "Cinzel", serif;
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: rgba(255, 252, 247, 0.65);
	margin-bottom: 10px;
}
.s-moon__grid {
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	gap: 6px;
}
.s-moon__day {
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	background: rgba(255, 252, 247, 0.04);
	border-radius: 4px;
	font-family: var(--font-body);
	font-size: 9px;
	color: rgba(255, 252, 247, 0.30);
	position: relative;
}
.s-moon__num { font-weight: 500; }
.s-moon__day.has-star { background: rgba(252, 192, 0, 0.12); }
.s-moon__star {
	width: 100%;
	height: 100%;
	transform: scale(0);
	animation: star-pop 0.6s var(--ease-bounce) forwards;
	animation-delay: var(--d, 0s);
	filter: drop-shadow(0 0 4px rgba(252, 192, 0, 0.5));
}
@keyframes star-pop { to { transform: scale(0.6); } }

/* Spellbook */
.s-spell { background: linear-gradient(180deg, #FFFCF7 0%, #F4E9D8 100%); border-color: rgba(252, 120, 12, 0.20); }
.s-spell__counter {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 18px;
	padding-bottom: 14px;
	border-bottom: var(--hairline);
}
.s-spell__num {
	font-family: var(--font-display);
	font-size: clamp(40px, 4vw, 56px);
	font-weight: 600;
	color: var(--color-deep);
	letter-spacing: -0.02em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	transition: transform 200ms var(--ease-bounce);
	animation: spell-tick 1.6s linear infinite;
}
@keyframes spell-tick {
	0%, 100% { transform: translateY(0); }
	4%       { transform: translateY(-2px); }
	10%      { transform: translateY(0); }
}
.s-spell__lbl {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 15px;
	color: var(--color-ink-soft);
}
.s-spell__row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.s-word {
	font-family: var(--font-display);
	font-size: 14px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(252, 120, 12, 0.10);
	color: var(--color-ember);
	border: 1px solid rgba(252, 120, 12, 0.18);
	font-weight: 500;
}
.s-spell__form {
	display: flex;
	gap: 8px;
	margin-top: 10px;
}
.s-spell__form input {
	flex: 1;
	padding: 10px 14px;
	border-radius: 999px;
	border: 1px solid var(--color-line);
	background: rgba(255, 252, 247, 0.6);
	font-family: var(--font-body);
	font-size: 13px;
	font-style: italic;
	color: var(--color-ink-soft);
}
.s-spell__form button {
	width: 36px; height: 36px; border-radius: 50%;
	background: var(--color-coral);
	color: #FFFCF7;
	border: none;
	font-size: 18px;
	font-weight: 600;
	cursor: not-allowed;
	opacity: 0.6;
}

/* Lexicon Grove */
.s-lex {
	background:
		radial-gradient(ellipse 80% 50% at 50% 10%, rgba(63, 111, 74, 0.10), transparent 70%),
		linear-gradient(180deg, #1E2B1A 0%, #14201A 100%);
	border-color: rgba(132, 178, 93, 0.25);
}
.s-lex .s-cell__kicker { color: #A9D38A; }
.s-lex .s-lyrical-card__title { color: #F4EFE2; }
.s-lex .s-lyrical-card__cap   { color: rgba(244, 239, 226, 0.65); }
.s-lex__tiles {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: 6px;
}
.s-lex-tile {
	position: relative;
	aspect-ratio: 3/2;
	overflow: hidden;
	border-radius: 10px;
}
.s-lex-tile__inner { position: absolute; inset: 0; }
.s-lex-tile__face {
	position: absolute;
	inset: 0;
	border-radius: 10px;
	border: 1px solid rgba(132, 178, 93, 0.30);
	display: grid;
	place-items: center;
	padding: 8px;
	text-align: center;
	opacity: 0;
	transform: scale(0.94);
	backface-visibility: visible;
}
.s-lex-tile__face--front {
	background: linear-gradient(135deg, rgba(63, 111, 74, 0.40), rgba(42, 79, 51, 0.40));
	animation: lex-front 9s ease-in-out infinite;
	animation-delay: var(--d, 0s);
}
.s-lex-tile__face--back {
	background: linear-gradient(135deg, rgba(252, 192, 0, 0.16), rgba(252, 120, 12, 0.12));
	border-color: rgba(252, 192, 0, 0.35);
	animation: lex-back 9s ease-in-out infinite;
	animation-delay: var(--d, 0s);
}
@keyframes lex-front {
	0%, 35%   { opacity: 1; transform: scale(1); }
	45%, 85%  { opacity: 0; transform: scale(0.94); }
	95%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes lex-back {
	0%, 35%   { opacity: 0; transform: scale(0.94); }
	45%, 85%  { opacity: 1; transform: scale(1); }
	95%, 100% { opacity: 0; transform: scale(0.94); }
}
.s-lex-tile__en {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 16px;
	color: #F4EFE2;
	font-weight: 500;
}
.s-lex-tile__es {
	font-family: var(--font-display);
	font-size: 14px;
	color: #FFD63B;
}
.s-lex-tile__leaf {
	position: absolute;
	top: 8px; right: 10px;
	width: 6px; height: 8px;
	background: linear-gradient(135deg, #84B25D, #3F6F4A);
	border-radius: 0 100% 0 100%;
	transform: rotate(-30deg);
}

/* Verses */
.s-verses {
	background: linear-gradient(180deg, #FFFCF7 0%, #F4E9D8 100%);
	border-color: rgba(180, 124, 26, 0.18);
}
.s-verses__scroll { display: grid; place-items: center; padding-top: 4px; }
.s-verses__paper {
	width: 100%;
	max-width: 320px;
	padding: 22px 24px 26px;
	background: linear-gradient(180deg, #FEF9EE 0%, #F4E9D8 100%);
	border: 1px solid rgba(180, 124, 26, 0.18);
	border-radius: 8px;
	box-shadow: 0 12px 32px rgba(180, 124, 26, 0.18);
	font-family: var(--font-display);
	position: relative;
}
.s-verses__paper::before,
.s-verses__paper::after {
	content: "";
	position: absolute;
	left: 0; right: 0;
	height: 3px;
	background: repeating-linear-gradient(90deg,
		transparent 0px, transparent 2px,
		#F4E9D8 2px, #F4E9D8 5px);
}
.s-verses__paper::before { top: 0; }
.s-verses__paper::after  { bottom: 0; }
.s-verses__title {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 18px;
	color: var(--color-deep);
	margin-bottom: 2px;
}
.s-verses__author {
	font-family: "Cinzel", serif;
	font-size: 9.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-ink-soft);
	margin-bottom: 14px;
}
.s-verses__line {
	font-family: var(--font-display);
	font-size: 15px;
	font-style: italic;
	color: var(--color-ink);
	margin: 0 0 4px;
	line-height: 1.45;
	opacity: 0;
	animation: verse-fade 1.2s ease-out forwards;
}
.s-verses__line:nth-of-type(1) { animation-delay: 0.2s; }
.s-verses__line:nth-of-type(2) { animation-delay: 0.5s; }
.s-verses__line:nth-of-type(3) { animation-delay: 0.8s; }
.s-verses__line:nth-of-type(4) { animation-delay: 1.1s; }
@keyframes verse-fade {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: none; }
}


/* =========================================================================
   SECTION 7 — Lado humano
   ========================================================================= */
.s-human {
	padding: clamp(80px, 14vh, 144px) 0 clamp(64px, 10vh, 112px);
	background: var(--color-paper);
}
.s-human__grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 24px;
	max-width: 1180px;
	margin: 56px auto 0;
	padding: 0 clamp(20px, 4vw, 56px);
}
.s-human-card {
	background: var(--color-paper);
	border: var(--hairline);
	border-radius: var(--radius-xl);
	padding: clamp(24px, 2.4vw, 32px);
	display: flex;
	flex-direction: column;
	gap: 14px;
	transition: transform var(--dur-base) var(--ease-out),
				border-color var(--dur-base) var(--ease-out),
				box-shadow var(--dur-base) var(--ease-out);
}
.s-human-card:hover {
	transform: translateY(-4px);
	border-color: rgba(252, 60, 48, 0.25);
	box-shadow: 0 14px 40px rgba(43, 37, 48, 0.10);
}
.s-human-card__kicker {
	font-family: "Cinzel", serif;
	font-size: 10.5px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--color-coral-dark);
	font-weight: 700;
}
.s-human-card__title {
	font-family: var(--font-display);
	font-size: clamp(20px, 1.8vw, 26px);
	font-weight: 500;
	line-height: 1.1;
	color: var(--color-deep);
	margin: 0;
	letter-spacing: -0.01em;
}
.s-human-card__cap {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 15px;
	color: var(--color-ink-soft);
	margin: 0;
	line-height: 1.45;
}

.s-class-phone {
	margin-top: auto;
	padding: 14px;
	background: linear-gradient(180deg, #FAF4E8 0%, #F4E9D8 100%);
	border-radius: var(--radius-lg);
	border: var(--hairline);
}
.s-class-phone__screen {
	background: linear-gradient(180deg, #14101F 0%, #2A2245 100%);
	border-radius: 14px;
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	color: #F4E9D8;
}
.s-class-phone__hd { display: flex; justify-content: space-between; align-items: center; }
.s-class-phone__avatars { display: flex; }
.s-class-phone__avatars span {
	width: 24px; height: 24px;
	border-radius: 50%;
	display: grid; place-items: center;
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: 600;
	color: #FFFCF7;
	border: 1.5px solid #14101F;
	margin-left: -8px;
}
.s-class-phone__avatars span:first-child { margin-left: 0; }
.s-class-phone__time {
	font-family: var(--font-body);
	font-size: 11px;
	color: rgba(244, 233, 216, 0.65);
	letter-spacing: 0.04em;
}
.s-class-phone__lbl {
	font-family: "Cinzel", serif;
	font-size: 9px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--color-sun);
	font-weight: 600;
}
.s-class-phone__wave {
	display: flex;
	align-items: center;
	gap: 2px;
	height: 30px;
}
.s-class-phone__wave span {
	flex: 1;
	height: var(--h, 12px);
	background: linear-gradient(180deg, #FCC000, #FC780C);
	border-radius: 2px;
	animation: wave-pulse 1.4s ease-in-out infinite;
	animation-delay: var(--d, 0s);
	transform-origin: center;
}
@keyframes wave-pulse {
	0%, 100% { transform: scaleY(0.5); }
	50%      { transform: scaleY(1.4); }
}
.s-class-phone__meta {
	display: flex;
	justify-content: space-between;
	font-family: var(--font-mono);
	font-size: 10px;
	color: rgba(244, 233, 216, 0.55);
}

.s-note {
	margin-top: 4px;
	padding: 18px 20px 22px;
	background: linear-gradient(180deg, #FEF9EE 0%, #F4E9D8 100%);
	border: 1px solid rgba(180, 124, 26, 0.18);
	border-radius: var(--radius-md);
	font-family: var(--font-display);
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--color-ink);
	position: relative;
	box-shadow: 0 8px 20px rgba(180, 124, 26, 0.10);
}
.s-note__date {
	font-family: "Cinzel", serif;
	font-size: 9.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--color-ember);
	font-weight: 600;
	margin-bottom: 8px;
}
.s-note p { margin: 0 0 10px; }
.s-note em { font-style: italic; color: var(--color-coral); font-weight: 500; }
.s-note__sig {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 15px;
	color: var(--color-coral);
	margin-top: 10px;
}
.s-note__ornament {
	position: absolute;
	bottom: -10px;
	left: 18px;
	width: 16px; height: 16px;
	background: var(--color-coral);
	border-radius: 50%;
	box-shadow: 0 0 0 3px rgba(252, 60, 48, 0.18);
	opacity: 0.85;
}

.s-guardian__split {
	margin-top: 6px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.s-guardian__half {
	padding: 14px 16px;
	border-radius: var(--radius-md);
	border: var(--hairline);
	background: rgba(252, 192, 0, 0.04);
}
.s-guardian__half--family {
	background: rgba(84, 96, 168, 0.06);
	border-color: rgba(84, 96, 168, 0.18);
}
.s-guardian__head {
	font-family: "Cinzel", serif;
	font-size: 9.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--color-deep);
	font-weight: 600;
	margin-bottom: 8px;
}
.s-guardian__half ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-family: var(--font-display);
	font-style: italic;
	font-size: 13.5px;
	color: var(--color-ink-soft);
}
.s-guardian__half li::before {
	content: "›";
	color: var(--color-coral);
	margin-right: 6px;
	font-style: normal;
}


/* =========================================================================
   Reduced motion / motion-off
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
	.hub-tile, .path-stone.is-current circle,
	.demo-atelier__caret, .demo-owlery__letter,
	.s-lantern.is-glow .s-lantern__bulb,
	.s-paper--active .s-paper__dot,
	.s-mastery::before,
	.s-moon__star-bg, .s-moon__star, .s-lex-tile__face,
	.s-class-phone__wave span,
	.s-spell__num,
	.s-verses__line
	{ animation: none !important; }
}
body[data-motion="off"] .hub-tile,
body[data-motion="off"] .demo-hub__sun,
body[data-motion="off"] .demo-hub__sun-halo,
body[data-motion="off"] .demo-hub__foliage,
body[data-motion="off"] .demo-hub__sweep,
body[data-motion="off"] .path-stone.is-current circle,
body[data-motion="off"] .demo-atelier__caret,
body[data-motion="off"] .demo-owlery__letter,
body[data-motion="off"] .s-lantern.is-glow .s-lantern__bulb,
body[data-motion="off"] .s-paper--active .s-paper__dot,
body[data-motion="off"] .s-mastery::before,
body[data-motion="off"] .s-moon__star-bg,
body[data-motion="off"] .s-moon__star,
body[data-motion="off"] .s-lex-tile__face,
body[data-motion="off"] .s-class-phone__wave span,
body[data-motion="off"] .s-spell__num,
body[data-motion="off"] .s-verses__line {
	animation: none !important;
}


/* =========================================================================
   Mobile
   ========================================================================= */
@media (max-width: 860px) {
	.s-core__grid,
	.s-mastery__row,
	.s-lyrical__grid,
	.s-human__grid { grid-template-columns: 1fr; }
}

/* Phone tuning (2026-05-18) — tighten paddings and typography for ≤560px.
   At 860px the grids collapse to 1fr but sections still inherit desktop
   padding. This block makes the marketing surfaces feel native on phones. */
@media (max-width: 560px) {
	.s-core,
	.s-mastery,
	.s-lyrical,
	.s-human { padding: 56px 18px; }

	.s-core__grid    { gap: 18px; }
	.s-mastery__row  { gap: 18px; }
	.s-lyrical__grid { gap: 18px; }
	.s-human__grid   { gap: 18px; }

	.s-lyrical-card { padding: 22px 20px; }
	.s-lyrical-card__title { font-size: 22px; }
	.s-lyrical-card__cap   { font-size: 13px; }
}