/* ==========================================================================
   SCOLA — Editorial Home page template
   V2 design system applied to WordPress page template.
   Loaded ONLY on pages using the "Scola Editorial Home" template.
   ========================================================================== */

.scola-eh {
	/* v1.13.7 — Tokens DARK MOCHA. Roberto: "estás usando negro puro en
	   algunos fondos, pero ese color no me gusta, quisiera lo reemplazaras
	   por el color mocca que usaste en la página de book". El --bg pasa de
	   #0A0A09 (casi puro negro neutral) a #1A1410 (mocha dark warm con
	   tinte cálido marrón). El --cream también más mocha. */
	--orange: #FD8E25;
	--ink:    #F2F0EA;          /* texto principal — cream warm */
	--ink-2:  #E8E4D9;
	--muted:  #A89C8E;          /* warm gris claro para metadata */
	--light:  #3D3530;          /* hairlines borders */
	--bg:     #1A1410;          /* DARK MOCHA (era #0A0A09 casi-negro) */
	--cream:  #251A12;          /* mocha intermedio (era #1A1611) */

	/* Light mode original (preservado por si Roberto pide reversión):
	   --ink: #0A0A0A;  --ink-2: #1A1A1A;  --muted: #6E6E6E;
	   --light: #C8C8C8; --bg: #F2F0EA; --cream: #E8E4D9; */

	--serif: 'Instrument Serif', 'Times New Roman', serif;
	--sans:  'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
	--mono:  'JetBrains Mono', ui-monospace, monospace;

	background: var(--bg);
	color: var(--ink);
	font-family: var(--sans);
	-webkit-font-smoothing: antialiased;
}

.scola-eh * { box-sizing: border-box; }

.scola-eh a { color: inherit; text-decoration: none; }

/* === SYSBAR (DEPRECATED v1.10) ===
   The sysbar header is now rendered by EditorialHeader::render() in PHP.
   Styles live in editorial-header.css. The footer giant wordmark below
   still uses .scola-eh__sysbar-logo as a CSS class for the legacy wordmark
   text — keep that selector around. Everything else removed. */

.scola-eh__sysbar-logo {
	font-family: var(--sans);
	font-size: inherit;
	font-weight: 800;
	letter-spacing: -0.04em;
	text-transform: none;
	display: inline-flex;
	align-items: baseline;
}

.scola-eh__sysbar-logo::after {
	content: '';
	width: 0.32em;
	height: 0.32em;
	border-radius: 50%;
	background: var(--orange);
	display: inline-block;
	margin-left: 4px;
}

/* === HERO === */
.scola-eh__hero {
	min-height: 100vh;          /* fallback antes de dvh */
	min-height: 100dvh;         /* v1.12.0 — corrige el gap móvil por la chrome bar */
	/* v1.13.2 — Padding bottom subido (60px → clamp 80-120) para dar aire entre
	   el footer del hero y el bottom del viewport. */
	padding: 120px clamp(20px, 4vw, 48px) clamp(80px, 10vh, 120px);
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: clamp(48px, 8vh, 100px);
}

.scola-eh__hero-label {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
	display: flex;
	gap: 32px;
	align-items: center;
	flex-wrap: wrap;
}

.scola-eh__hero-label::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--orange);
	display: inline-block;
	animation: scola-eh-pulse-dot 1.5s ease infinite alternate;
}

@keyframes scola-eh-pulse-dot {
	from { opacity: 1; }
	to   { opacity: 0.3; }
}

/* v1.12.2 — Removed .scola-eh__hero-label-live: el EditorialHeader (v1.10.0+)
   ya muestra clock + coords + weather en la barra superior. Mantenerlo también
   en el hero era duplicación visual. Si en el futuro se quiere recuperar como
   ambient secundario, el JS de initClock()/initWeather() en editorial-home.js
   sigue buscando [data-scola-clock] y [data-scola-weather] — solo hace falta
   re-añadir el markup. */

.scola-eh__hero-h1 {
	/* v1.13.2 — clamp aún más conservador. La "y" de "identity" descendente
	   y la coma de "light," necesitan espacio. Antes 48-9vw-160; ahora
	   40-7.5vw-128. En 1920 viewport → 128px max, no más overflow horizontal.
	   v1.16.1 — line-height 0.98 → 1. Roberto: "al título de home déjale el
	   line spacing at 1 a ver si no se cortan las palabras light o identity".
	   Da más espacio a los descenders de "g" en light y "y" en identity. */
	font-size: clamp(40px, 7.5vw, 128px);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.035em;
	color: var(--ink);
	font-family: var(--sans);
	margin: 0;
	/* v1.12.1 — Variable axis: arranca en wght 200 y "settla" a 300 cuando .is-revealed */
	font-variation-settings: 'wght' 200;
	transition: font-variation-settings 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.scola-eh__hero-h1.is-revealed {
	font-variation-settings: 'wght' 300;
}

.scola-eh__hero-h1 em {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	color: var(--orange);
}

.scola-eh__hero-h1 .scola-eh__dot {
	display: inline-block;
	width: 0.25em;
	height: 0.25em;
	border-radius: 50%;
	background: var(--orange);
	margin-left: 0.04em;
	vertical-align: baseline;
	position: relative;
	top: -0.04em;
}

/* v1.12.0 — Word reveal stagger (palabras se deslizan desde abajo en clip-mask).
   El JS de editorial-home.js wrappea cada palabra en .scola-word > .scola-word-inner.
   v1.19.0 — SOLUCIÓN DEFINITIVA al corte de "light"/"identity": el overflow:hidden
   del clip-mask cortaba los descenders (la "g" de light, la "y" de identity) y
   parte del dot. padding-bottom da espacio al descender DENTRO del clip; el
   margin-bottom negativo compensa para que el interlineado no cambie. El slide-up
   sigue funcionando (el inner parte desde 110% abajo del área ahora más alta). */
.scola-eh__hero-h1 .scola-word {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	line-height: inherit;
	padding-bottom: 0.18em;
	margin-bottom: -0.18em;
}

.scola-eh__hero-h1 .scola-word-inner {
	display: inline-block;
	transform: translateY(110%);
	opacity: 0;
	transition:
		transform 0.95s cubic-bezier(0.16, 1, 0.3, 1),
		opacity   0.55s ease;
	will-change: transform;
}

.scola-eh__hero-h1.is-revealed .scola-word-inner {
	transform: translateY(0);
	opacity: 1;
}

/* El dot pequeño usa pop-in escala (slide-up se ve raro en un círculo tan chico) */
.scola-eh__hero-h1 .scola-word--bare {
	overflow: visible;
}
.scola-eh__hero-h1 .scola-word--bare .scola-word-inner {
	transform: scale(0);
	transform-origin: center;
}
.scola-eh__hero-h1.is-revealed .scola-word--bare .scola-word-inner {
	transform: scale(1);
}

/* v1.15.1 — Hero footer: 2 cols, CTA a la izquierda (Roberto request).
   Izq (1fr): CTA "Start a project" + booking note debajo.
   Der (1.6fr): Studio blurb (más espacio para el texto largo). */
.scola-eh__hero-footer {
	display: grid;
	grid-template-columns: 1fr 1.6fr;
	gap: clamp(24px, 4vw, 64px);
	align-items: center;
	border-top: 1px solid rgba(242,240,234,0.15);
	padding-top: 28px;
}

.scola-eh__hero-cta-wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

.scola-eh__hero-footer-left {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

@media (max-width: 768px) {
	.scola-eh__hero-footer { grid-template-columns: 1fr; gap: 28px; }
}

.scola-eh__hero-footer-label {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
	display: block;
	margin-bottom: 6px;
}

.scola-eh__hero-footer-value {
	font-family: var(--sans);
	font-size: clamp(14px, 1.3vw, 18px);
	font-weight: 400;
	color: var(--ink);
	line-height: 1.4;
}

.scola-eh__cta-primary {
	display: inline-flex !important;
	align-items: center !important;
	gap: 14px !important;
	background: #0A0A0A !important;
	color: #FFFFFF !important;
	padding: 20px 36px !important;
	border-radius: 999px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	transition: background 0.25s, transform 0.2s, color 0.25s !important;
	align-self: flex-start;
	border: 0 !important;
	cursor: pointer;
	font-family: var(--sans) !important;
	text-decoration: none !important;
}

.scola-eh__cta-primary span,
.scola-eh__cta-primary * {
	color: #FFFFFF !important;
	text-decoration: none !important;
}

.scola-eh__cta-primary:hover {
	background: #FD8E25 !important;
	color: #0A0A0A !important;
	transform: translateY(-2px);
}

.scola-eh__cta-primary:hover span,
.scola-eh__cta-primary:hover * {
	color: #0A0A0A !important;
}

.scola-eh__hero-side {
	position: absolute;
	right: 24px;
	top: 50%;
	transform: rotate(-90deg) translateX(50%);
	transform-origin: right center;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--muted);
	display: flex;
	gap: 20px;
}

.scola-eh__hero-side span:first-child {
	color: var(--orange);
	font-weight: 700;
}

@media (max-width: 1024px) { .scola-eh__hero-side { display: none; } }

/* v1.12.0 — Scroll cue MÓVIL (sustituye a hero-side rotado que estaba oculto <1024px) */
.scola-eh__hero-scroll-cue {
	display: none;
}

@media (max-width: 1024px) {
	.scola-eh__hero-scroll-cue {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		gap: 8px;
		align-self: center;
		font-family: var(--mono);
		font-size: 10px;
		letter-spacing: 0.28em;
		text-transform: uppercase;
		color: var(--muted);
		text-decoration: none;
		padding: 12px;          /* touch target ≥ 44×44 */
		min-width: 44px;
		min-height: 44px;
		justify-content: center;
	}

	.scola-eh__hero-scroll-cue-arrow {
		font-size: 16px;
		color: var(--ink);
		animation: scola-eh-scroll-bob 1.8s ease-in-out infinite;
	}

	.scola-eh__hero-scroll-cue:hover { color: var(--ink); }
}

@keyframes scola-eh-scroll-bob {
	0%, 100% { transform: translateY(0);   opacity: 0.6; }
	50%      { transform: translateY(6px); opacity: 1;   }
}

/* === MARQUEE ===
   v1.13.4 — Estética matched al footer marquee: caption mono uppercase 11px,
   con mask-image fade en los bordes laterales. Padding 14px (era 24).
   v1.13.5 — z-index 2 + position relative para no quedar detrás del shader fixed. */
.scola-eh__marquee {
	overflow: hidden;
	padding: 14px 0;
	background: var(--bg);
	border-top: 1px solid rgba(242,240,234,0.10);
	border-bottom: 1px solid rgba(242,240,234,0.10);
	-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
	        mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
	position: relative;
	/* v1.19.1 — REVERTIDO el margin-top negativo de v1.19.0: subir el marquee
	   hacía que se pintara SOBRE Branding durante el scroll, matando la pausa.
	   Ahora el marquee fluye normal tras el stack; la pausa de Branding la da su
	   margin-bottom, y el "gap" se disimula con el bg naranja del stack. */
	z-index: 2;
}

.scola-eh__marquee-track {
	display: flex;
	gap: 56px;
	width: max-content;
	animation: scola-eh-marq 35s linear infinite;
}

/* v1.13.4 — Items como caption del footer: mono uppercase 11px sutil */
.scola-eh__marquee-item {
	font-size: 11px;
	font-family: var(--mono);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1;
	color: rgba(242,240,234,0.45);
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 20px;
	-webkit-text-stroke: 0;
}

.scola-eh__marquee-item em {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	color: var(--orange);
	font-size: 13px;
	text-transform: none;
	letter-spacing: 0;
	-webkit-text-stroke: 0;
}

.scola-eh__marquee-star {
	color: var(--orange);
	font-size: 12px;
}

@keyframes scola-eh-marq { to { transform: translateX(-50%); } }

/* === MANIFESTO ===
   v1.13.5 — z-index 2 + position relative para no quedar detrás del shader fixed.
   (Roberto reportó: "desapareció la info que estaba ahí" — era el shader cubriéndolo) */
.scola-eh__manifesto {
	/* v1.22.2 — top más corto: el cintillo marquee entra justo encima, un top
	   tan alto dejaba demasiado mocha entre la banda y el "02". Bottom intacto. */
	padding: clamp(52px, 8vw, 96px) clamp(20px, 4vw, 48px) clamp(80px, 13vw, 160px);
	background: var(--bg);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: clamp(40px, 6vw, 120px);
	align-items: start;
	position: relative;
	z-index: 2;
}

@media (max-width: 968px) { .scola-eh__manifesto { grid-template-columns: 1fr; } }

.scola-eh__manifesto-sticky {
	position: sticky;
	top: 100px;
}

.scola-eh__manifesto-num {
	font-family: var(--sans);
	font-size: clamp(160px, 22vw, 280px);
	font-weight: 200;
	line-height: 0.85;
	letter-spacing: -0.06em;
	color: var(--orange);
	margin-bottom: 24px;
}

.scola-eh__label {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--muted);
}

.scola-eh__manifesto-text {
	font-size: clamp(28px, 4vw, 64px);
	font-weight: 300;
	line-height: 1.15;
	letter-spacing: -0.03em;
	color: var(--ink);
	font-family: var(--sans);
	margin: 0;
}

.scola-eh__manifesto-text em {
	font-family: var(--serif);
	font-style: italic;
	color: var(--orange);
	font-weight: 400;
}

.scola-eh__principles {
	margin-top: 64px;
	display: flex;
	flex-direction: column;
}

.scola-eh__principle {
	padding: 24px 0;
	border-top: 1px solid rgba(242,240,234,0.10);     /* v1.13.1 — dark hairline */
	display: grid;
	grid-template-columns: 60px 1fr auto;
	gap: 24px;
	align-items: center;
}

.scola-eh__principle:last-child { border-bottom: 1px solid rgba(242,240,234,0.10); }    /* v1.13.1 — dark hairline */

.scola-eh__principle-num {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--muted);
	letter-spacing: 0.14em;
}

.scola-eh__principle-text {
	font-weight: 500;
	color: var(--ink);
	font-size: clamp(16px, 1.4vw, 20px);
}

.scola-eh__principle-text em {
	font-family: var(--serif);
	font-style: italic;
	color: var(--orange);
	font-weight: 400;
}

.scola-eh__principle-year {
	font-family: var(--mono);
	font-size: 10px;
	color: var(--muted);
	letter-spacing: 0.14em;
}

/* === SERVICES === */
.scola-eh__services {
	background: var(--ink);
	color: #FFFFFF;
	padding: clamp(100px, 12vw, 160px) 0 0;
}

.scola-eh__services-header {
	padding: 0 clamp(20px, 4vw, 48px) 80px;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	border-bottom: 1px solid rgba(255,255,255,0.1);
	flex-wrap: wrap;
	gap: 32px;
}

.scola-eh__services-label {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--orange);
}

.scola-eh__services-title {
	font-size: clamp(40px, 7vw, 120px);
	font-weight: 300;
	line-height: 0.95;
	letter-spacing: -0.04em;
	color: #FFFFFF;
	margin: 0;
}

.scola-eh__services-title em {
	font-family: var(--serif);
	font-style: italic;
	color: var(--orange);
	font-weight: 400;
}

.scola-eh__service {
	border-bottom: 1px solid rgba(255,255,255,0.1);
	padding: clamp(40px, 5vw, 80px) clamp(20px, 4vw, 48px);
	display: grid;
	grid-template-columns: 100px 1fr 2fr auto;
	gap: clamp(20px, 3vw, 64px);
	align-items: center;
	transition: padding 0.4s ease;
	position: relative;
	overflow: hidden;
}

.scola-eh__service::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--orange);
	transform: translateY(100%);
	transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1);
	z-index: 0;
}

.scola-eh__service:hover::before { transform: translateY(0); }

.scola-eh__service:hover {
	padding-top: clamp(60px, 7vw, 100px);
	padding-bottom: clamp(60px, 7vw, 100px);
}

.scola-eh__service > * { position: relative; z-index: 1; transition: color 0.3s; }

.scola-eh__service:hover .scola-eh__service-num,
.scola-eh__service:hover .scola-eh__service-title,
.scola-eh__service:hover .scola-eh__service-desc,
.scola-eh__service:hover .scola-eh__service-year,
.scola-eh__service:hover .scola-eh__service-arrow {
	color: var(--ink);
}

.scola-eh__service:hover .scola-eh__service-title em { color: #FFFFFF; }

.scola-eh__service-num {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--muted);
	letter-spacing: 0.16em;
	font-weight: 500;
}

.scola-eh__service-title {
	font-size: clamp(36px, 5vw, 88px);
	font-weight: 300;
	letter-spacing: -0.03em;
	line-height: 0.95;
	color: #FFFFFF;
	font-family: var(--sans);
	margin: 0;
}

.scola-eh__service-title em {
	font-family: var(--serif);
	font-style: italic;
	color: var(--orange);
	font-weight: 400;
}

.scola-eh__service-desc {
	font-size: clamp(13px, 1.3vw, 16px);
	line-height: 1.6;
	color: var(--light);
	max-width: 420px;
}

.scola-eh__service-year {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	color: var(--muted);
	text-align: right;
}

.scola-eh__service-arrow {
	font-size: 24px;
	color: var(--muted);
	transition: color 0.3s, transform 0.3s;
}

.scola-eh__service:hover .scola-eh__service-arrow { transform: translate(8px, -4px); }

@media (max-width: 968px) {
	.scola-eh__service { grid-template-columns: 60px 1fr; }
	.scola-eh__service-desc,
	.scola-eh__service-year,
	.scola-eh__service-arrow { grid-column: 2; padding-top: 12px; }
}

/* === WORK ===
   v1.14.1 — LAYOUT DINÁMICO FULL/SPLIT.
   El PHP del template alterna .scola-eh__work-full (1 proyecto 50/50
   imagen+texto) y .scola-eh__work-split (2 proyectos lado a lado más
   compactos). Modifiers --alt para swap visual entre secciones del mismo
   tipo. Pattern por total N (ver template). */

.scola-eh__work {
	background: var(--bg);
	padding: clamp(80px, 10vw, 140px) clamp(20px, 4vw, 48px);
	position: relative;
	z-index: 2;
}

.scola-eh__work-header {
	margin-bottom: clamp(48px, 6vw, 80px);
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 24px;
}

.scola-eh__work-header h2 {
	font-size: clamp(48px, 8vw, 144px);
	font-weight: 300;
	letter-spacing: -0.04em;
	line-height: 0.9;
	margin: 0;
}

.scola-eh__work-header h2 em {
	font-family: var(--serif);
	font-style: italic;
	color: var(--orange);
	font-weight: 400;
}

.scola-eh__work-year {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	color: var(--muted);
	text-transform: uppercase;
	display: block;
	margin-bottom: 8px;
}

/* === SECCIONES DINÁMICAS DEL WORK === */

.scola-eh__work-sections {
	display: flex;
	flex-direction: column;
	gap: clamp(56px, 8vw, 120px);
}

/* Kicker común a FULL y SPLIT (mono uppercase con dot pulse opcional) */
.scola-eh__work-kicker {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.20em;
	text-transform: uppercase;
	color: var(--orange);
	font-weight: 600;
}

/* ============================================================
 *  FULL — 1 proyecto, 50/50 imagen + texto
 * ============================================================ */

.scola-eh__work-full {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(32px, 5vw, 80px);
	align-items: stretch;
	min-height: clamp(420px, 60vh, 720px);
}

/* Modifier --alt: invierte el orden visual (imagen → derecha) */
.scola-eh__work-full--alt .scola-eh__work-full-media { order: 2; }
.scola-eh__work-full--alt .scola-eh__work-full-info  { order: 1; }

.scola-eh__work-full-media {
	overflow: hidden;
	background: var(--cream);
	position: relative;
}

.scola-eh__work-full-media a {
	display: block;
	width: 100%;
	height: 100%;
}

.scola-eh__work-full-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
	            filter 0.6s ease;
	filter: grayscale(75%) contrast(1.02);
}

.scola-eh__work-full-media:hover img {
	transform: scale(1.03);
	filter: grayscale(0%) contrast(1.05);
}

.scola-eh__work-full-info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: clamp(20px, 2.5vw, 36px);
	padding: clamp(20px, 4vw, 64px) clamp(20px, 3vw, 48px);
}

.scola-eh__work-full-title {
	font-family: var(--sans);
	font-weight: 300;
	font-size: clamp(36px, 5vw, 80px);
	letter-spacing: -0.04em;
	line-height: 0.98;
	color: var(--ink);
	margin: 0;
	font-variation-settings: 'wght' 300;
}

.scola-eh__work-full-title em {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	color: var(--orange);
}

.scola-eh__work-full-desc {
	font-family: var(--sans);
	font-size: clamp(15px, 1.3vw, 19px);
	line-height: 1.55;
	color: var(--muted);
	margin: 0;
	max-width: 56ch;
}

.scola-eh__work-full-cta {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	background: var(--ink);
	color: var(--bg);
	padding: 16px 28px;
	border-radius: 999px;
	font-family: var(--sans);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	align-self: flex-start;
	transition: background 0.3s, color 0.3s, transform 0.25s;
}
.scola-eh__work-full-cta:hover {
	background: var(--orange);
	color: var(--bg);
	transform: translateY(-2px);
}
.scola-eh__work-full-cta-arrow {
	display: inline-block;
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.scola-eh__work-full-cta:hover .scola-eh__work-full-cta-arrow {
	transform: translateX(8px);
}

/* ============================================================
 *  SPLIT — 2 proyectos lado a lado, compactos
 * ============================================================ */

.scola-eh__work-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(24px, 4vw, 64px);
}

.scola-eh__work-split-card {
	display: flex;
	flex-direction: column;
	gap: clamp(16px, 1.8vw, 28px);
	text-decoration: none;
	color: inherit;
}

/* Modifier --alt: invierte el orden vertical de las cards
   (texto arriba, imagen abajo — para alternar respecto a la SPLIT anterior) */
.scola-eh__work-split--alt .scola-eh__work-split-card {
	flex-direction: column-reverse;
}

.scola-eh__work-split-media {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--cream);
}

.scola-eh__work-split-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
	            filter 0.6s ease;
	filter: grayscale(75%) contrast(1.02);
}

.scola-eh__work-split-card:hover .scola-eh__work-split-media img {
	transform: scale(1.025);
	filter: grayscale(0%) contrast(1.05);
}

.scola-eh__work-split-info {
	display: flex;
	flex-direction: column;
	gap: clamp(10px, 1vw, 16px);
}

.scola-eh__work-split-title {
	font-family: var(--sans);
	font-weight: 400;
	font-size: clamp(22px, 2.2vw, 34px);
	letter-spacing: -0.025em;
	line-height: 1.1;
	color: var(--ink);
	margin: 0;
}

.scola-eh__work-split-title em {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	color: var(--orange);
}

.scola-eh__work-split-desc {
	font-family: var(--sans);
	font-size: clamp(14px, 1.1vw, 16px);
	line-height: 1.5;
	color: var(--muted);
	margin: 0;
	max-width: 48ch;
}

/* ============================================================
 *  Responsive — mobile <768
 * ============================================================ */
@media (max-width: 768px) {
	.scola-eh__work-sections {
		gap: clamp(40px, 8vw, 64px);
	}

	.scola-eh__work-full,
	.scola-eh__work-split {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	/* En mobile, las imágenes SIEMPRE van arriba (independiente de --alt) */
	.scola-eh__work-full--alt .scola-eh__work-full-media { order: unset; }
	.scola-eh__work-full--alt .scola-eh__work-full-info  { order: unset; }
	.scola-eh__work-split--alt .scola-eh__work-split-card { flex-direction: column; }

	.scola-eh__work-full-media {
		aspect-ratio: 4 / 3;
	}
	.scola-eh__work-full-info {
		padding: clamp(20px, 4vw, 32px) 0 0;
	}
}

/* === STATS ===
   v1.13.5 — Roberto cambió de opinión: ahora quiere bg NARANJA sólido (no
   shader). Texto invertido a dark (ink) para contraste sobre el naranja. */
.scola-eh__stats {
	background: var(--orange);
	color: var(--bg);                    /* dark warm sobre orange */
	padding: clamp(60px, 8vw, 100px) clamp(20px, 4vw, 48px);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(24px, 4vw, 80px);
	border-top: 1px solid rgba(10,10,10,0.15);
	border-bottom: 1px solid rgba(10,10,10,0.15);
	position: relative;
	z-index: 2;
}

/* Stat text colors invertidos sobre naranja */
.scola-eh__stats .scola-eh__stat-num {
	color: var(--bg);                    /* dark warm */
}
.scola-eh__stats .scola-eh__stat-num em {
	color: var(--bg);                    /* italic accent también dark sobre orange */
}
.scola-eh__stats .scola-eh__stat-label {
	color: rgba(10,10,10,0.7);            /* muted dark sobre orange */
	border-top: 1px solid var(--bg);      /* línea superior dark warm */
}

@media (max-width: 768px) {
	.scola-eh__stats { grid-template-columns: repeat(2, 1fr); gap: 48px 24px; }
}

.scola-eh__stat-num {
	font-size: clamp(72px, 8vw, 140px);
	font-weight: 200;
	line-height: 0.9;
	letter-spacing: -0.05em;
	color: var(--ink);
	font-family: var(--sans);
	margin: 0 0 8px;
}

.scola-eh__stat-num em {
	font-family: var(--serif);
	font-style: italic;
	color: var(--orange);
	font-weight: 400;
}

.scola-eh__stat-label {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--muted);
	border-top: 1px solid var(--orange);
	padding-top: 8px;
	max-width: 180px;
}

/* === TESTIMONIAL ===
   v1.13.5 — z-index 2 + position relative para no quedar detrás del shader fixed. */
.scola-eh__testimonial {
	background: var(--bg);
	padding: clamp(70px, 10vw, 140px) clamp(20px, 4vw, 48px);
	position: relative;
	z-index: 2;
}

/* v1.13.4 — Testimonial rediseñado: SIN imagen lateral con inicial gigante
   (Roberto: "los reviews un desastre"). Layout simple, quote centrado, max 920px. */
/* v1.13.9 — Container min-height FIJO. Roberto: "no quiero que el alto de
   la sección sea más alta. Quiero que se modifique el ancho del párrafo
   para que todo quede siempre a máximo 5 líneas; cuando ya quede el ancho
   máximo, entonces bajar el tamaño del texto". El template asigna un bucket
   modifier según el length del quote (calculado en PHP). Cada bucket tiene
   su font-size y max-width abajo. */
.scola-eh__testimonial-cycle {
	position: relative;
	min-height: clamp(360px, 42vh, 520px);
	max-width: 1100px;
	margin: 0 auto;
}

.scola-eh__testimonial-item {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	gap: clamp(24px, 3vh, 40px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.8s ease;
}

.scola-eh__testimonial-item.is-active {
	opacity: 1;
	pointer-events: auto;
}

/* === BUCKETS DE LONGITUD ===
   Cada bucket apunta a ~5 líneas con su font-size + max-width.
   Calc orientativo: max chars/línea ≈ max-width × 0.55 (italic serif).

   short    (≤140 chars)   → font grande, ancho contenido
   medium   (141–280)      → font medio, ancho medio
   long     (281–450)      → font menos, ancho amplio
   xlong    (>450)         → font mínimo legible, ancho max */

.scola-eh__testimonial-item--short .scola-eh__testimonial-quote {
	font-size: clamp(22px, 2.6vw, 38px);
	max-width: 28ch;
}

.scola-eh__testimonial-item--medium .scola-eh__testimonial-quote {
	font-size: clamp(20px, 2.3vw, 32px);
	max-width: 40ch;
}

.scola-eh__testimonial-item--long .scola-eh__testimonial-quote {
	font-size: clamp(18px, 1.95vw, 26px);
	max-width: 52ch;
}

.scola-eh__testimonial-item--xlong .scola-eh__testimonial-quote {
	font-size: clamp(15px, 1.6vw, 20px);
	max-width: 64ch;
}

@media (prefers-reduced-motion: reduce) {
	.scola-eh__testimonial-item { transition: none; }
}

.scola-eh__testimonial-label {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--orange);
	display: flex;
	gap: 20px;
	justify-content: center;          /* v1.13.4 — center */
	align-items: center;
	flex-wrap: wrap;
}

/* v1.13.8 — Pill cream con texto dark mocha (alto contraste). La regla
   antigua position: absolute al final del archivo (vestigio de cuando el
   testimonial tenía imagen lateral) está REMOVIDA abajo. */
.scola-eh__testimonial-google {
	background: var(--ink);                  /* cream */
	color: var(--bg);                         /* dark mocha — alto contraste sobre cream */
	padding: 4px 12px;
	border-radius: 999px;
	letter-spacing: 0.14em;
	font-weight: 700;
	font-family: var(--mono);
	font-size: 9px;
	line-height: 1;
}

.scola-eh__testimonial-quote {
	/* v1.13.9 — font-size y max-width se sobrescriben por bucket modifier */
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var(--ink);
	margin: 0;
}

.scola-eh__testimonial-quote em {
	font-family: var(--serif);
	font-style: italic;
	color: var(--orange);
	font-weight: 400;
}

.scola-eh__testimonial-author {
	/* v1.13.4 — Layout vertical centrado debajo del quote */
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: center;
	padding-top: 24px;
	border-top: 1px solid rgba(242,240,234,0.15);
	min-width: 200px;
}

.scola-eh__testimonial-name {
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.scola-eh__testimonial-role {
	font-family: var(--mono);
	font-size: 10px;
	color: var(--muted);
	letter-spacing: 0.14em;
}

/* v1.13.8 — Quitado margin-left:auto (vestigio del layout antiguo con
   grid 3-col en testimonial-author). Ahora author es flex column
   center, las stars se centran naturalmente con el resto. */
.scola-eh__testimonial-stars {
	color: var(--orange);
	font-size: 14px;
	letter-spacing: 3px;
}

/* v1.13.8 — REMOVIDAS las reglas obsoletas del testimonial v1 (imagen
   lateral con inicial gigante + Google badge position: absolute con bg
   blanco y texto cream invisible). Estas eran vestigios del layout antes
   del v1.13.4 cuando el testimonial era grid 1fr/1fr con imagen a la
   derecha. La regla nueva está arriba (.scola-eh__testimonial-google
   como pill cream + dark visible). */

/* === CTA ===
   v1.13.5 — z-index 2 (position relative ya estaba) para no quedar detrás del shader fixed. */
/* v1.19.0 — "Let's talk" con shader cálido en movimiento (naranja/rojo/amarillo)
   sobre base mocha, en lugar del naranja sólido. Roberto quiere evaluar el
   efecto para posiblemente extenderlo a otras secciones. El canvas va detrás
   (z-index 0); el contenido en .scola-eh__cta-inner (z-index 1). Fallback:
   background var(--bg) si WebGL no carga. */
.scola-eh__cta {
	background: var(--bg);
	color: var(--ink);
	padding: clamp(80px, 12vw, 160px) clamp(20px, 4vw, 48px);
	position: relative;
	z-index: 2;
	overflow: hidden;
}

.scola-eh__cta-shader {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 0;
	pointer-events: none;
}

.scola-eh__cta-inner {
	position: relative;
	z-index: 1;
}

.scola-eh__cta-label {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--ink);
	margin-bottom: 40px;
	display: flex;
	align-items: center;
	gap: 16px;
}

.scola-eh__cta-label::before {
	content: '';
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--ink);
	animation: scola-eh-pulse-dot 1.5s ease infinite alternate;
}

.scola-eh__cta-h2 {
	font-size: clamp(80px, 14vw, 280px);
	font-weight: 300;
	letter-spacing: -0.05em;
	line-height: 0.85;
	color: var(--ink);
	font-family: var(--sans);
	margin: 0 0 64px;
	/* v1.19.0 — sombra sutil para legibilidad del título cream sobre las zonas
	   más brillantes (amarillo) del shader cálido. */
	text-shadow: 0 2px 24px rgba(26, 20, 16, 0.35);
}

.scola-eh__cta-h2 em {
	font-family: var(--serif);
	font-style: italic;
	color: var(--ink);
	font-weight: 400;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.12em;
}

.scola-eh__cta-lines {
	max-width: 1200px;
	display: flex;
	flex-direction: column;
}

.scola-eh__cta-line {
	display: grid;
	grid-template-columns: 200px 1fr auto;
	gap: 32px;
	padding: 24px 0;
	/* v1.19.0 — hairlines cream (eran negros para el fondo naranja sólido; ahora
	   el CTA es shader sobre base mocha). */
	border-top: 1px solid rgba(242,240,234,0.22);
	align-items: center;
	transition: padding 0.3s;
}

.scola-eh__cta-line:hover { padding: 32px 0; }
.scola-eh__cta-line:hover .scola-eh__cta-line-arrow { transform: translateX(8px); }

.scola-eh__cta-line:last-child { border-bottom: 1px solid rgba(242,240,234,0.22); }

.scola-eh__cta-line-label {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(242,240,234,0.7);
}

.scola-eh__cta-line-value {
	font-family: var(--sans);
	font-size: clamp(20px, 2.4vw, 32px);
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var(--ink);
}

.scola-eh__cta-line-value em {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
}

.scola-eh__cta-line-arrow {
	font-size: 22px;
	transition: transform 0.3s;
}

@media (max-width: 768px) {
	.scola-eh__cta-line { grid-template-columns: 1fr auto; }
	.scola-eh__cta-line-label { grid-column: 1 / -1; }
}

/* === FOOTER === */
.scola-eh__footer {
	background: var(--ink);
	color: var(--light);
	padding: 80px clamp(20px, 4vw, 48px) 32px;
}

.scola-eh__footer-giant {
	font-size: clamp(60px, 12vw, 240px);
	font-weight: 900;
	letter-spacing: -0.06em;
	line-height: 0.85;
	color: transparent;
	-webkit-text-stroke: 1px rgba(255,255,255,0.15);
	margin-bottom: 80px;
	overflow: hidden;
	white-space: nowrap;
}

.scola-eh__footer-giant em {
	font-family: var(--serif);
	font-style: italic;
	-webkit-text-stroke: 1px var(--orange);
	font-weight: 400;
}

.scola-eh__footer-cols {
	border-top: 1px solid rgba(255,255,255,0.1);
	padding-top: 40px;
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: 40px;
	margin-bottom: 60px;
}

@media (max-width: 768px) {
	.scola-eh__footer-cols { grid-template-columns: 1fr 1fr; gap: 32px; }
}

.scola-eh__footer h4 {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #FFFFFF;
	margin: 0 0 20px;
}

.scola-eh__footer ul { list-style: none; padding: 0; margin: 0; }
.scola-eh__footer ul li { margin-bottom: 8px; }

.scola-eh__footer a {
	font-size: 14px;
	color: var(--light);
	transition: color 0.2s;
	font-family: var(--sans);
}
.scola-eh__footer a:hover { color: var(--orange); }

.scola-eh__footer-brand p {
	color: var(--muted);
	font-size: 13px;
	line-height: 1.6;
	max-width: 280px;
	margin-bottom: 24px;
}

.scola-eh__footer-bottom {
	border-top: 1px solid rgba(255,255,255,0.08);
	padding-top: 24px;
	display: flex;
	justify-content: space-between;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	flex-wrap: wrap;
	gap: 16px;
}

/* === FULL-BLEED ESCAPE + HIDE THEME WRAPPERS ===
   Cuando el template editorial está activo, escapamos cualquier
   container del tema (Blocksy, Elementor) que constraine el ancho.
   ================================================================ */

/* Force body / page wrappers to be full-width */
body.scola-editorial-template,
body.scola-editorial-template main,
body.scola-editorial-template article,
body.scola-editorial-template .site,
body.scola-editorial-template .site-content,
body.scola-editorial-template .content-area,
body.scola-editorial-template .entry-content,
body.scola-editorial-template .ct-container,
body.scola-editorial-template .ct-container-fluid,
body.scola-editorial-template [class*="page-content"],
body.scola-editorial-template [class*="entry-content"],
body.scola-editorial-template [class*="elementor-section-wrap"],
body.scola-editorial-template .elementor-section-wrap,
body.scola-editorial-template .elementor-section,
body.scola-editorial-template .elementor-container,
body.scola-editorial-template .e-con,
body.scola-editorial-template .e-con-inner,
body.scola-editorial-template .e-con-boxed,
body.scola-editorial-template .e-con-full {
	max-width: none !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	box-sizing: border-box !important;
}

body.scola-editorial-template {
	margin: 0 !important;
	padding: 0 !important;
	background: #F2F0EA !important;
}

/* The .scola-eh container itself should fill 100vw */
body.scola-editorial-template .scola-eh {
	width: 100vw !important;
	max-width: 100vw !important;
	margin: 0 !important;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw !important;
	margin-right: -50vw !important;
}

/* === HIDE THEME HEADER/FOOTER === */
/* Elementor header — multiple possible selectors */
body.scola-editorial-template .elementor-location-header,
body.scola-editorial-template [data-elementor-type="header"],
body.scola-editorial-template #site-header,
body.scola-editorial-template > #site-header,
body.scola-editorial-template header.site-header,
body.scola-editorial-template header[role="banner"],
body.scola-editorial-template .ct-header,
body.scola-editorial-template div[id="site-header"][data-element_type="container"] {
	display: none !important;
	visibility: hidden !important;
	height: 0 !important;
	max-height: 0 !important;
	overflow: hidden !important;
}

/* Theme footer */
body.scola-editorial-template footer.site-footer,
body.scola-editorial-template .elementor-location-footer,
body.scola-editorial-template [data-elementor-type="footer"],
body.scola-editorial-template .ct-footer {
	display: none !important;
}

/* Prevent vertical gap from sticky/fixed offset that themes inject */
body.scola-editorial-template .ct-sticky-header-target,
body.scola-editorial-template [class*="sticky-header-target"] {
	display: none !important;
}

/* Reduce motion respect */
@media (prefers-reduced-motion: reduce) {
	.scola-eh__hero-label::before { animation: none; }
	.scola-eh__cta-label::before { animation: none; }
	.scola-eh__marquee-track { animation: none; }
	.scola-eh__hero-scroll-cue-arrow { animation: none; }

	/* v1.12.0 — Word reveal: mostrar texto inmediato sin desliz */
	.scola-eh__hero-h1 .scola-word-inner {
		transform: none;
		opacity: 1;
		transition: none;
	}
}

/* ============================================================
 *  v1.8 — Google Maps embed (editorial location section)
 * ============================================================ */

/* v1.15.1 — z-index 2 + position relative para no quedar detrás del shader fixed
   (fix coherente con marquee/manifesto/work/testimonial de v1.13.5).
   Roberto reportó: "al lado del mapa no aparece find studio, el texto desapareció" —
   era el shader cubriendo el text del map-header. Hairlines actualizadas a cream-alpha. */
.scola-eh__map {
	background: var(--bg);
	padding: 80px 48px 96px;
	border-top: 1px solid rgba(242, 240, 234, 0.08);
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	gap: 64px;
	align-items: stretch;
	position: relative;
	z-index: 2;
}

.scola-eh__map--dark {
	background: var(--ink);
	color: var(--bg);
	border-top-color: rgba(255, 255, 255, 0.08);
}

.scola-eh__map-header {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
	max-width: 420px;
}

.scola-eh__map-label {
	font-family: var(--mono, 'JetBrains Mono', monospace);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
}

.scola-eh__map--dark .scola-eh__map-label {
	color: rgba(255, 255, 255, 0.6);
}

.scola-eh__map-title {
	font-family: var(--sans, 'Hanken Grotesk', sans-serif);
	font-weight: 300;
	font-size: clamp(40px, 6vw, 88px);
	line-height: 0.95;
	letter-spacing: -0.03em;
	margin: 0;
	color: inherit;
}

.scola-eh__map-title em {
	font-family: var(--serif, 'Instrument Serif', serif);
	font-style: italic;
	font-weight: 400;
	color: var(--orange);
}

.scola-eh__map-blurb {
	font-size: 16px;
	line-height: 1.55;
	color: var(--muted);
	margin: 8px 0 0;
}

.scola-eh__map--dark .scola-eh__map-blurb {
	color: rgba(255, 255, 255, 0.7);
}

.scola-eh__map-blurb a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 4px;
	font-family: var(--mono, 'JetBrains Mono', monospace);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-left: 8px;
	white-space: nowrap;
}

.scola-eh__map-blurb a:hover { color: var(--orange); }

.scola-eh__map-iframe-wrap {
	position: relative;
	min-height: 420px;
	overflow: hidden;
	border: 1px solid rgba(242, 240, 234, 0.08);     /* v1.15.1 — dark mode */
	background: #e8e8e8;
}

.scola-eh__map--dark .scola-eh__map-iframe-wrap {
	border-color: rgba(255, 255, 255, 0.08);
}

@media (max-width: 900px) {
	.scola-eh__map {
		grid-template-columns: 1fr;
		gap: 32px;
		padding: 56px 24px 64px;
	}
	.scola-eh__map-iframe-wrap { min-height: 320px; }
}

/* ============================================================
 *  v1.12.1 — Tanda C polish (audit ui-ux-pro-max P2)
 *  Sub-headline / progress bar / vertical rail / booking note
 *  / lazy-travel arrow / cursor labeled support.
 * ============================================================ */

/* 12 — Page progress bar (fixed top, 1px naranja, scaleX por JS) */
.scola-eh__progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: rgba(10, 10, 10, 0.06);
	z-index: 99998;          /* debajo del header (--scola-z-header) y del cursor */
	pointer-events: none;
}

.scola-eh__progress-fill {
	height: 100%;
	width: 100%;
	background: var(--orange);
	transform: scaleX(0);
	transform-origin: left center;
	will-change: transform;
}

/* 15 — Vertical rail edge izquierdo del hero + date caption rotada */
.scola-eh__hero {
	border-left: 1px solid rgba(10, 10, 10, 0.08);
}

.scola-eh__hero-rail-caption {
	position: absolute;
	left: 14px;
	bottom: 96px;
	transform: rotate(-90deg);
	transform-origin: left bottom;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	pointer-events: none;
}

@media (max-width: 1024px) {
	.scola-eh__hero { border-left: 0; }
	.scola-eh__hero-rail-caption { display: none; }
}

/* 11 — Sub-headline italic bajo el H1 */
.scola-eh__hero-headline {
	display: flex;
	flex-direction: column;
	gap: clamp(20px, 2.4vw, 36px);
}

.scola-eh__hero-sub {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(20px, 2.2vw, 30px);
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--muted);
	margin: 0;
	max-width: 28ch;
}

.scola-eh__hero-sub em {
	color: var(--orange);
	font-style: italic;
}

/* Reveal del sub: usa la mecánica existente .scola-reveal (definida en editorial.css).
   Aquí solo el "estado destino" — el resto lo maneja editorial.js cuando el IntersectionObserver dispara. */

/* 14 — Booking note bajo el CTA (envoltura vertical) */
/* v1.15.1 — CTA wrap alineado a la izquierda (Roberto request).
   Stack vertical para que la booking note quede debajo del CTA. */
.scola-eh__hero-cta-wrap {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 12px;
}

@media (max-width: 768px) {
	.scola-eh__hero-cta-wrap {
		align-items: flex-start;
	}
}

.scola-eh__hero-cta-note {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

/* 16 — CTA arrow "lazy travel" — el arrow viaja despacio en hover en vez de
   un snap de gap. Gap del CTA queda fijo; solo se mueve el arrow. */
.scola-eh__cta-arrow {
	display: inline-block !important;
	transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) !important;
	will-change: transform;
}

.scola-eh__cta-primary:hover .scola-eh__cta-arrow {
	transform: translateX(10px);
}

/* Reduce motion respect para los nuevos elementos */
@media (prefers-reduced-motion: reduce) {
	.scola-eh__hero-h1 {
		transition: none;
		font-variation-settings: 'wght' 300;
	}
	.scola-eh__cta-arrow {
		transition: none !important;
	}
	.scola-eh__progress-fill {
		transform: scaleX(0);
	}
}

/* ============================================================
 *  v1.13.0 — EXPERIENCE: HERO DARK + SHADER + 3-PANEL STACK
 *
 *  Tres secciones funcionales:
 *   1. Shader WebGL + grain overlay (background visible solo durante el experience)
 *   2. Hero sticky con paleta dark warm scoped a .scola-eh__experience
 *   3. Stack: 3 paneles full-screen apilados con sticky reveal
 *
 *  El resto del sitio (manifesto, work, stats, testimonial, CTA, map, footer)
 *  conserva su paleta cream original.
 * ============================================================ */

/* ---------- Shader canvas (visible siempre — degrade gracioso al dark bg si WebGL falla) ---------- */
.scola-eh__shader{
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	z-index: 0;                       /* detrás del contenido (.scola-eh con bg dark) */
	display: block;
	pointer-events: none;
	opacity: 1;                       /* v1.13.1 — visible por default. JS lo apaga cuando experience sale del viewport */
	transition: opacity 0.8s ease;
}

.scola-eh__shader.is-inactive{ opacity: 0; }

/* SVG film grain — encima del shader, debajo del contenido */
.scola-eh__grain{
	position: fixed;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
	opacity: 0.50;                    /* v1.13.1 — visible por default */
	mix-blend-mode: soft-light;
	transition: opacity 0.8s ease;
}

.scola-eh__grain.is-inactive{ opacity: 0; }

/* ---------- Experience container ----------
   v1.13.1 — Sin background propio: el .scola-eh root ya es dark warm
   global, y necesitamos que el canvas+grain (fixed detrás) sean visibles.
   Si el experience tuviera bg dark, taparía el shader.
   v1.13.7 — Tokens *-exp actualizados a dark mocha. */
.scola-eh__experience{
	--orange-exp: #FD8E25;
	--ink-exp:    #F2F0EA;
	--bg-exp:     #1A1410;        /* mocha dark warm (match .scola-eh root) */
	--muted-exp:  #A89C8E;
	--cream-exp:  #E8E4D9;

	position: relative;
	isolation: isolate;
	background: transparent;          /* CRÍTICO: deja ver el shader detrás */
	color: var(--ink-exp);
	z-index: 2;
}

/* Hero override dentro del experience: sticky + tokens dark + textos invertidos */
.scola-eh__experience .scola-eh__hero{
	position: sticky;
	top: 0;
	/* v1.17.0 — height: 100dvh (era 100vh). En móvil la barra de URL del
	   navegador hace que 100vh sea más alto que el viewport visible →
	   el contenido del hero se cortaba. dvh sigue el viewport dinámico. */
	height: 100dvh;
	min-height: 100dvh;
	z-index: 5;                       /* sobre el grain (1), debajo de los panels (10) */
	color: var(--ink-exp);
	border-left: 1px solid rgba(242,240,234,0.08);
	background: transparent;          /* deja ver el shader detrás */
}

/* Hero texto: en el experience, --ink/--muted se reemplazan localmente */
.scola-eh__experience .scola-eh__hero-label{ color: var(--muted-exp); }
.scola-eh__experience .scola-eh__hero-label::before{
	box-shadow: 0 0 12px rgba(253,142,37,0.5);
}

.scola-eh__experience .scola-eh__hero-h1{
	color: var(--ink-exp);
}
.scola-eh__experience .scola-eh__hero-h1 .scola-eh__dot{
	box-shadow: 0 0 32px rgba(253,142,37,0.45);
}

.scola-eh__experience .scola-eh__hero-sub{ color: var(--ink-exp); }

.scola-eh__experience .scola-eh__hero-footer{
	border-top: 1px solid rgba(242,240,234,0.15);
}
.scola-eh__experience .scola-eh__hero-footer-label{ color: var(--muted-exp); }
.scola-eh__experience .scola-eh__hero-footer-value{ color: var(--ink-exp); }

.scola-eh__experience .scola-eh__hero-side{ color: var(--muted-exp); }
.scola-eh__experience .scola-eh__hero-side span:first-child{ color: var(--orange-exp); }

.scola-eh__experience .scola-eh__hero-rail-caption{ color: var(--muted-exp); }

.scola-eh__experience .scola-eh__hero-scroll-cue{ color: var(--muted-exp); }
.scola-eh__experience .scola-eh__hero-scroll-cue-arrow{ color: var(--ink-exp); }

.scola-eh__experience .scola-eh__hero-cta-note{ color: var(--muted-exp); }

/* CTA dentro del experience: bg cream + text dark (alta contraste sobre dark) */
.scola-eh__experience .scola-eh__cta-primary{
	background: var(--ink-exp) !important;   /* cream pill */
	color: var(--bg-exp) !important;          /* texto dark */
	box-shadow:
		0 8px 24px -8px rgba(242,240,234,0.15),
		0 2px 0 0 rgba(10,10,10,0.20) inset;
}
.scola-eh__experience .scola-eh__cta-primary span,
.scola-eh__experience .scola-eh__cta-primary *{
	color: var(--bg-exp) !important;
}
.scola-eh__experience .scola-eh__cta-primary:hover{
	background: var(--orange-exp) !important;
	color: var(--bg-exp) !important;
}
.scola-eh__experience .scola-eh__cta-primary:hover span,
.scola-eh__experience .scola-eh__cta-primary:hover *{
	color: var(--bg-exp) !important;
}

/* ---------- STACK + PANELS ---------- */

.scola-eh__stack{
	position: relative;
	background: var(--bg-exp);
	/* v1.22.2 — z-index 6 (por ENCIMA del hero z5). Así el fondo mocha del stack
	   TAPA al hero en el gap de margin que deja Branding al soltarse. Antes el
	   hero (z5) se colaba por ese margin transparente → se veía el naranja del
	   hero + su dot + el botón, y parecía que "el hero no terminaba de subir"
	   (lo que Roberto reportó). Los paneles (z10) y el marquee (z11) siguen
	   dentro de este contexto, encima de todo; sólo el fondo del stack sube a
	   cubrir el hero. NO rompe el reveal hero→panel (el panel sigue tapando al
	   hero) — verificado en navegador. */
	z-index: 6;
}

.scola-eh__panel{
	position: sticky;
	top: 0;
	/* v1.17.0 — height: 100dvh (era 100vh) para que el panel sticky no se
	   corte con la barra del navegador móvil. */
	height: 100dvh;
	min-height: 100dvh;
	overflow: hidden;
	background: var(--orange-exp);
	color: #FFFFFF;
	display: flex;
	flex-direction: column;
	isolation: isolate;
	z-index: 10;                      /* encima del hero (5) */
	/* v1.13.1 — "Respiro" entre paneles: cada panel suma 30vh de scroll
	   space después de su 100dvh visible. */
	margin-bottom: 30vh;
}

/* v1.20.2 — Branding usa el MISMO margin-bottom que Foto/Video (30vh, el del
   .scola-eh__panel base, ya no se override aquí). El marquee es ahora un panel
   que lo cubre (como Video cubre a Foto), así que el cover es instantáneo y NO
   hay vacío. El 90vh de v1.20.0/1 dejaba que Branding se soltara ~100vh antes
   de que el marquee subiera → pantallas mocha vacías (el bug del video). */
/* (regla :last-child eliminada — Branding hereda el margin-bottom: 30vh base) */

/* Image background con blend soft-light (look editorial fashion magazine) */
.scola-eh__panel-img{
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	mix-blend-mode: soft-light;
	opacity: 0.95;
	filter: grayscale(0.35) contrast(1.15);
	z-index: 0;
	pointer-events: none;
}

/* Sutiles radials para volumen (highlight + shadow) */
.scola-eh__panel::before{
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.15) 0%, transparent 55%),
		radial-gradient(ellipse at 80% 80%, rgba(10,10,10,0.20)   0%, transparent 55%);
	z-index: 1;
	pointer-events: none;
}

.scola-eh__panel-inner{
	position: relative;
	z-index: 2;
	flex: 1;
	/* v1.13.6 — padding vertical reducido para que el contenido entre cómodo
	   en 100vh sin que el meta se corte. Gap también más compacto. */
	padding: clamp(32px, 5vh, 72px) clamp(20px, 4vw, 64px);
	display: grid;
	grid-template-rows: auto 1fr auto;
	gap: clamp(20px, 3vh, 40px);
}

.scola-eh__panel-top{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 24px;
	flex-wrap: wrap;
}

.scola-eh__panel-kicker{
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.95);
	font-weight: 600;
}

.scola-eh__panel-index{
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.75);
	font-variant-numeric: tabular-nums;
}

.scola-eh__panel-center{
	align-self: center;
	max-width: 30ch;             /* v1.13.6 — más amplio para que "Sessions that earn the reprint" entre en 2 líneas, no en 5 */
}

.scola-eh__panel-title{
	font-family: var(--sans);
	/* v1.13.6 — Bajado clamp 56-10vw-180 → 40-7vw-120. El título estaba
	   rompiéndose en una palabra por línea por max-width estrecho + font
	   gigante, lo que hacía overflow vertical del panel (height: 100vh
	   + overflow: hidden) y cortaba el meta strip. */
	font-size: clamp(40px, 7vw, 120px);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.04em;
	color: #FFFFFF;
	margin: 0 0 clamp(12px, 1.5vh, 24px);
	font-variation-settings: 'wght' 300;
}
.scola-eh__panel-title em{
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	color: var(--bg-exp);             /* italic dark sobre orange — contraste fuerte */
}

.scola-eh__panel-desc{
	font-family: var(--sans);
	font-size: clamp(16px, 1.4vw, 22px);
	line-height: 1.45;
	color: rgba(255,255,255,0.92);
	max-width: 42ch;             /* v1.13.5 — sin margin auto, alineado natural */
}

.scola-eh__panel-bottom{
	/* v1.13.6 — padding-right reducido (180-22vw-280 → 140-18vw-240) para que
	   el meta strip tenga más ancho disponible. El CTA absolute sigue en
	   bottom-right cerca del número. */
	display: flex;
	justify-content: flex-start;
	align-items: flex-end;
	gap: 24px;
	flex-wrap: wrap;
	border-top: 1px solid rgba(255,255,255,0.20);
	padding-top: clamp(20px, 3vh, 32px);
	padding-right: clamp(140px, 18vw, 240px);
}

.scola-eh__panel-meta{
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.85);
	display: flex;
	gap: clamp(16px, 2vw, 32px);
	flex-wrap: wrap;
	font-variant-numeric: tabular-nums;
}

.scola-eh__panel-cta{
	/* v1.13.4 — Posicionado absolute en bottom-right, MISMA posición que el
	   número outlined gigante. Roberto: "el boton quisiera estuviera mas
	   hacia la zona donde esta el numero, y que se vea en la misma posición
	   para todas las páginas". */
	position: absolute;
	right: clamp(20px, 4vw, 64px);
	bottom: clamp(36px, 6vh, 80px);
	z-index: 3;                  /* sobre el número outlined (0) y el inner content (2) */

	display: inline-flex !important;
	align-items: center;
	gap: 14px;
	padding: 18px 32px;
	border-radius: 999px;
	background: var(--bg-exp);
	color: var(--ink-exp);
	font-family: var(--sans);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	transition: transform 0.25s, background 0.3s, color 0.3s;
	text-decoration: none;
}
.scola-eh__panel-cta:hover{
	background: #FFFFFF;
	color: var(--bg-exp);
	transform: translateY(-2px);
}
.scola-eh__panel-cta-arrow{
	display: inline-block;
	transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.scola-eh__panel-cta:hover .scola-eh__panel-cta-arrow{ transform: translateX(10px); }

.scola-eh__panel-number{
	position: absolute;
	right: clamp(20px, 4vw, 64px);
	bottom: clamp(120px, 18vh, 200px);
	font-family: var(--sans);
	font-weight: 900;
	font-size: clamp(180px, 28vw, 460px);
	line-height: 0.82;
	letter-spacing: -0.06em;
	color: transparent;
	-webkit-text-stroke: 1px rgba(255,255,255,0.22);
	pointer-events: none;
	z-index: 0;
	font-variation-settings: 'wght' 900;
}

.scola-eh__panel-side{
	position: absolute;
	right: 18px;
	top: 50%;
	transform: rotate(-90deg) translateX(50%);
	transform-origin: right center;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.70);
	pointer-events: none;
	z-index: 2;
	white-space: nowrap;
}

/* ---------- Panel CREAM variant (sandwich entre dos naranjas) ---------- */
.scola-eh__panel--cream{
	background: var(--ink-exp);       /* cream */
	color: var(--bg-exp);
}

.scola-eh__panel--cream .scola-eh__panel-kicker{ color: rgba(10,10,10,0.95); }
.scola-eh__panel--cream .scola-eh__panel-index{  color: rgba(10,10,10,0.65); }
.scola-eh__panel--cream .scola-eh__panel-title{  color: var(--bg-exp); }
.scola-eh__panel--cream .scola-eh__panel-title em{ color: var(--orange-exp); }
.scola-eh__panel--cream .scola-eh__panel-desc{   color: rgba(10,10,10,0.85); }
.scola-eh__panel--cream .scola-eh__panel-bottom{ border-top-color: rgba(10,10,10,0.20); }
.scola-eh__panel--cream .scola-eh__panel-meta{   color: rgba(10,10,10,0.75); }
.scola-eh__panel--cream .scola-eh__panel-number{ -webkit-text-stroke-color: rgba(10,10,10,0.22); }
.scola-eh__panel--cream .scola-eh__panel-side{   color: rgba(10,10,10,0.55); }

.scola-eh__panel--cream .scola-eh__panel-cta{
	background: var(--bg-exp);
	color: var(--ink-exp);
}
.scola-eh__panel--cream .scola-eh__panel-cta:hover{
	background: var(--orange-exp);
	color: var(--bg-exp);
}

.scola-eh__panel--cream::before{
	background:
		radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.40) 0%, transparent 55%),
		radial-gradient(ellipse at 80% 80%, rgba(10,10,10,0.18)   0%, transparent 55%);
}

/* ---------- Panel MARQUEE (banda de cierre del stack, v1.22.1) ----------
   v1.20.1 lo hizo un panel sticky full-screen (100dvh) para "cubrir" a Branding,
   pero el cintillo es una banda delgada → centrado en 100dvh dejaba media
   pantalla mocha vacía (Roberto: "tanto espacio al texto animado"). Ahora es
   una BANDA COMPACTA (relative, auto-height): Branding conserva su pausa (su
   margin-bottom 30vh) y el cintillo entra como banda de transición al manifesto,
   sin pantalla vacía. z-index 11 para que suba por encima de Branding al salir. */
.scola-eh__panel--marquee{
	position: relative;            /* override: ya no sticky */
	height: auto;                  /* override: ya no 100dvh */
	min-height: 0;
	overflow: hidden;
	background: var(--bg-exp);
	color: var(--ink-exp);
	display: flex;
	align-items: center;
	margin-bottom: 0;
	padding: clamp(20px, 3.5vh, 40px) 0;  /* v1.22.2 — banda más fina (Roberto: "hacer el banner más pequeño") */
	z-index: 11;
	border-top: 1px solid rgba(242,240,234,0.08);
	border-bottom: 1px solid rgba(242,240,234,0.08);
}
.scola-eh__panel--marquee::before,
.scola-eh__panel--marquee::after{
	display: none;                 /* sin radials ni scrim */
}
.scola-eh__panel--marquee .scola-eh__marquee{
	width: 100%;
	margin: 0;
	border: none;                  /* el borde lo lleva el panel-banda */
}

/* ---------- REVEALS por panel ---------- */

.scola-eh__panel-kicker{
	opacity: 0;
	transform: translateX(-22px);
	transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1),
	            transform 0.95s cubic-bezier(0.16,1,0.3,1);
}
.scola-eh__panel-index{
	opacity: 0;
	transform: translateX(22px);
	transition: opacity 0.7s 0.1s cubic-bezier(0.16,1,0.3,1),
	            transform 0.95s 0.1s cubic-bezier(0.16,1,0.3,1);
}

/* Word reveal — JS wrappea cada palabra en .scola-eh__panel-word > -word-inner.
   v1.20.2 — padding-bottom + margin-bottom negativo para que el clip (overflow
   hidden) NO recorte los descenders del título (causaba que el h2 reportara
   menos altura y la descripción se solapara encima). */
.scola-eh__panel-title .scola-eh__panel-word{
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	line-height: inherit;
	padding-bottom: 0.16em;
	margin-bottom: -0.16em;
}
.scola-eh__panel-title .scola-eh__panel-word-inner{
	display: inline-block;
	transform: translateY(110%);
	opacity: 0;
	transition: transform 1.05s cubic-bezier(0.16,1,0.3,1),
	            opacity 0.55s ease;
	will-change: transform;
}

.scola-eh__panel-desc{
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.85s 0.55s ease,
	            transform 1s 0.55s cubic-bezier(0.16,1,0.3,1);
}

.scola-eh__panel-meta span{
	opacity: 0;
	transform: translateY(14px);
	display: inline-block;
	transition: opacity 0.55s ease,
	            transform 0.7s cubic-bezier(0.16,1,0.3,1);
}

.scola-eh__panel.is-active .scola-eh__panel-meta span:nth-child(1){ transition-delay: 0.60s; }
.scola-eh__panel.is-active .scola-eh__panel-meta span:nth-child(2){ transition-delay: 0.70s; }
.scola-eh__panel.is-active .scola-eh__panel-meta span:nth-child(3){ transition-delay: 0.80s; }
.scola-eh__panel.is-active .scola-eh__panel-meta span:nth-child(4){ transition-delay: 0.90s; }

.scola-eh__panel-cta{
	opacity: 0;
	transform: scale(0.92) translateY(8px);
	transition: opacity 0.7s 0.85s ease,
	            transform 0.95s 0.85s cubic-bezier(0.34, 1.56, 0.64, 1);  /* bounce */
}

.scola-eh__panel-number{
	opacity: 0;
	transform: translateY(60px);
	transition: opacity 1.3s 0.30s ease,
	            transform 1.5s 0.30s cubic-bezier(0.16,1,0.3,1);
}

.scola-eh__panel.is-active .scola-eh__panel-kicker,
.scola-eh__panel.is-active .scola-eh__panel-index,
.scola-eh__panel.is-active .scola-eh__panel-desc,
.scola-eh__panel.is-active .scola-eh__panel-cta,
.scola-eh__panel.is-active .scola-eh__panel-number,
.scola-eh__panel.is-active .scola-eh__panel-meta span{
	opacity: 1;
	transform: none;
}

.scola-eh__panel.is-active .scola-eh__panel-title .scola-eh__panel-word-inner{
	transform: translateY(0);
	opacity: 1;
}

/* Responsive — panels en mobile (v1.13.4 · reescrito v1.17.0)
   Roberto eligió MANTENER el stack-reveal sticky + WebGL también en móvil.
   Por eso aquí no se simplifica el efecto — solo se arreglan los problemas
   de legibilidad en pantalla chica:
   - Scrim sólido bajo el contenido para garantizar contraste 4.5:1 del
     texto blanco sobre la imagen soft-light.
   - Número gigante reescalado y movido DETRÁS del título (opacidad baja)
     para que no choque con el meta ni el título en pantallas cortas.
   - Título clamp más conservador + máx 3 líneas. */
/* v1.19.1 — Paneles móvil: EQUILIBRIO GRÁFICO (Roberto: "todo el texto quedó
   arriba, el botón pegado al piso, no hay equilibrio — déjalo respirar").
   Causa raíz: .scola-eh__panel-cta es HERMANO de .scola-eh__panel-inner (no
   hijo). El inner tiene flex:1 → llena el panel → el contenido queda arriba y
   el CTA (hermano, después) cae al fondo. SOLUCIÓN: el .scola-eh__panel (flex
   column) CENTRA verticalmente el grupo [inner + cta]; el inner deja de ser
   flex:1 (se ajusta al contenido); el CTA respira con margin. Resultado: el
   bloque completo (kicker→título→desc→meta→botón) centrado en el panel, con
   la imagen llenando el resto arriba/abajo. */
@media (max-width: 768px){
	/* El panel centra el grupo verticalmente */
	.scola-eh__panel{
		justify-content: center;
		padding: 88px 0;            /* aire arriba (header) y abajo, el grupo se centra dentro */
	}

	/* Scrim full para legibilidad del texto sobre la imagen */
	.scola-eh__panel::after{
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(
			to bottom,
			rgba(26, 20, 16, 0.20) 0%,
			rgba(26, 20, 16, 0.32) 50%,
			rgba(26, 20, 16, 0.42) 100%
		);
		z-index: 1;
		pointer-events: none;
	}

	/* Inner: altura = contenido (NO flex:1), sin padding vertical (lo da el panel) */
	.scola-eh__panel-inner{
		flex: 0 0 auto;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		gap: 14px;
		padding: 0 clamp(22px, 6vw, 36px);
	}

	.scola-eh__panel-top{ gap: 8px; }

	/* v1.20.2 — panel-center como flex column con gap: separa título y desc de
	   forma GARANTIZADA (antes se solapaban — Roberto: "todas 3 tienen el mismo
	   problema"). */
	.scola-eh__panel-center{
		align-self: stretch;
		max-width: 100%;
		display: flex;
		flex-direction: column;
		gap: clamp(12px, 2vh, 20px);
	}

	.scola-eh__panel-title{
		/* sin line-clamp → título completo. Un poco más chico para que no
		   desborde el ancho en móvil. */
		font-size: clamp(28px, 7.4vw, 42px);
		line-height: 1.08;
		margin: 0;
	}

	.scola-eh__panel-desc{ font-size: clamp(14px, 3.6vw, 17px); line-height: 1.5; max-width: 100%; }

	.scola-eh__panel-bottom{
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		padding-right: 0;
		padding-top: 16px;
	}
	.scola-eh__panel-meta{ font-size: 10px; gap: 12px; justify-content: flex-start; }

	/* Número gigante detrás, esquina superior, sutil — no compite con el texto */
	.scola-eh__panel-number{
		font-size: clamp(110px, 32vw, 140px);
		right: clamp(12px, 4vw, 24px);
		left: auto;
		top: 6%;
		bottom: auto;
		transform: none;
		opacity: 0.14;
		z-index: 0;
	}
	.scola-eh__panel-side{ display: none; }

	/* CTA: hermano del inner, en el flujo del panel (centrado con el grupo).
	   margin-top generoso = RESPIRA, no pegado abajo. Alineado con el contenido. */
	.scola-eh__panel-cta{
		position: static;
		right: auto;
		bottom: auto;
		margin: 28px clamp(22px, 6vw, 36px) 0;
		min-height: 44px;
		align-self: flex-start;
	}
}

/* Reduce motion — todos los reveals instantáneos */
@media (prefers-reduced-motion: reduce){
	.scola-eh__shader,
	.scola-eh__grain{ transition: none !important; }

	.scola-eh__panel-kicker,
	.scola-eh__panel-index,
	.scola-eh__panel-desc,
	.scola-eh__panel-cta,
	.scola-eh__panel-number,
	.scola-eh__panel-meta span,
	.scola-eh__panel-title .scola-eh__panel-word-inner{
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* ============================================================
 *  v1.22.0 — Pulido tipográfico (impeccable typeset register)
 *  text-wrap: balance en headings (líneas parejas, sin huérfanas);
 *  text-wrap: pretty en prosa larga (menos viudas/huérfanas).
 *  Progressive enhancement — navegadores sin soporte lo ignoran.
 * ============================================================ */
.scola-eh__cta-h2,
.scola-eh__work-header h2,
.scola-eh__work-full-title,
.scola-eh__work-split-title {
	text-wrap: balance;
}

.scola-eh__manifesto-text,
.scola-eh__testimonial-quote,
.scola-eh__panel-desc,
.scola-eh__work-full-desc,
.scola-eh__work-split-desc {
	text-wrap: pretty;
}

/* ============================================================
 *  v1.22.1 — Section reveals VARIADOS (impeccable animate)
 *  Cada sección entra con un movimiento propio (left / up / scale +
 *  stagger), no el mismo fade uniforme. SEGURO: el estado inicial
 *  (opacity:0) solo aplica bajo html.scola-eh-anim, que el JS añade.
 *  Sin JS → contenido visible por defecto (nunca secciones en blanco).
 * ============================================================ */
html.scola-eh-anim [data-reveal] {
	opacity: 0;
	transition: opacity 0.85s ease, transform 1s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;
}
html.scola-eh-anim [data-reveal].is-inview { opacity: 1; transform: none; }

html.scola-eh-anim [data-reveal="up"]    { transform: translateY(30px); }
html.scola-eh-anim [data-reveal="left"]  { transform: translateX(-44px); }
html.scola-eh-anim [data-reveal="scale"] { transform: scale(0.955); transform-origin: left center; }

/* Stagger: los hijos directos entran escalonados */
html.scola-eh-anim [data-reveal-stagger] > * {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;
}
html.scola-eh-anim [data-reveal-stagger].is-inview > * { opacity: 1; transform: none; }
html.scola-eh-anim [data-reveal-stagger].is-inview > *:nth-child(2) { transition-delay: 0.07s; }
html.scola-eh-anim [data-reveal-stagger].is-inview > *:nth-child(3) { transition-delay: 0.14s; }
html.scola-eh-anim [data-reveal-stagger].is-inview > *:nth-child(4) { transition-delay: 0.21s; }
html.scola-eh-anim [data-reveal-stagger].is-inview > *:nth-child(5) { transition-delay: 0.28s; }

@media (prefers-reduced-motion: reduce) {
	html.scola-eh-anim [data-reveal],
	html.scola-eh-anim [data-reveal-stagger] > * {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}