/* ==========================================================================
   SCOLA — Editorial /book/ wizard wrapper (v1.9)
   Loaded ON TOP of editorial-home.css. Wraps the React wizard with brand UI.
   Flat editorial: no card, no shadow, no radius.
   ========================================================================== */

/* === HERO ===
   v1.16.1 — Roberto: "quisiera compactar un poco la información de tal
   manera que el banner completo del wizard quedara dentro de la primera
   vista de la página". Antes 140px top + H1 160px max + 60px bottom dejaba
   al wizard fuera del fold en muchos viewports. Ahora: padding más chico,
   H1 reducido a clamp(36-5vw-88), intro margin-top 16. En desktop 1080p
   el hero queda ~320-360px → wizard arranca ~440px from top → ~640px
   visible para el wizard en el first fold. */
.scola-eh__book-hero {
	/* v1.17.1 — banner más bajo (era 96/32). Roberto: "haciendo menos alto el
	   banner de your contact". */
	padding: 64px clamp(20px, 4vw, 48px) 24px;
	background: var(--bg);
	border-bottom: 1px solid rgba(242, 240, 234, 0.08);
}

.scola-eh__book-hero-inner {
	max-width: 1480px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: clamp(20px, 3vw, 48px);
	align-items: end;
}

.scola-eh__book-hero-right {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-self: end;
	padding-bottom: 6px;
}

/* v1.18.1 — Alinear eyebrow + intro a la misma X (Roberto: "en web solo alinea
   mejor los textos"). El eyebrow compartido (.scola-eh__hero-label) tiene un
   ::before dot + gap 32px que indentaba "// ASSISTED PROJECT BRIEF" respecto al
   intro. En el book hero ocultamos ese dot → ambos textos quedan a la izq. */
.scola-eh__book-hero-right .scola-eh__hero-label {
	gap: 0;
}
.scola-eh__book-hero-right .scola-eh__hero-label::before {
	display: none;
}

@media (max-width: 880px) {
	.scola-eh__book-hero-inner {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.scola-eh__book-hero-right {
		padding-bottom: 0;
	}
}

/* v1.18.0 — Móvil: compresión agresiva para que los campos Email y Teléfono
   entren en el primer fold (Roberto: "quiero que en móvil se pueda ver el
   campo para colocar el email y el teléfono"). Se recortan espaciados grandes
   del hero + tarjeta + lead. El intro del hero se oculta (info secundaria). */
@media (max-width: 640px) {
	.scola-eh__book-hero {
		/* v1.18.1 — padding-top mayor (era 52) para que el H1 NO se solape con
		   el logo del header sticky (Roberto: "deja un espaciado con respecto
		   al logo para que no se vea pegado"). */
		padding: 92px clamp(16px, 4vw, 24px) 16px;
	}
	.scola-eh__book-h1 {
		/* v1.18.1 — 1 sola línea (Roberto). nowrap + br oculto + font que cabe. */
		font-size: clamp(17px, 5.3vw, 26px);
		line-height: 1.1;
		white-space: nowrap;
	}
	.scola-eh__book-h1-br { display: none; }   /* quita el quiebre forzado en móvil */
	.scola-eh__book-intro {
		display: none;             /* libera el fold para el wizard */
	}
	.scola-eh__book-hero-right {
		gap: 0;
	}

	/* gap hero→wizard mínimo */
	.scola-eh__book-wizard-section { padding-top: 0; }

	/* tarjeta crema: padding chico, título contenido */
	.scola-wizard-header { padding: 16px clamp(16px, 4vw, 24px); }
	.scola-wizard-header__h1 { font-size: clamp(30px, 8vw, 40px); }

	/* main del wizard: padding vertical chico */
	.scola-wizard-main { padding: 22px clamp(16px, 4vw, 24px) 24px; }

	/* lead y separación de campos más compactos */
	.scola-step-lead { margin: 0 0 18px; font-size: 15px; }
	.scola-step-stack > * + * { margin-top: 18px; }
	.scola-field { gap: 6px; }
}

.scola-eh__book-h1 {
	font-size: clamp(36px, 5vw, 88px);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.035em;
	color: var(--ink);
	font-family: var(--sans);
	margin: 0;
	max-width: 18ch;
}

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

.scola-eh__book-intro {
	font-size: clamp(14px, 1.05vw, 16px);
	line-height: 1.55;
	color: var(--ink-2);
	max-width: 460px;
	margin: 0;                            /* v1.16.1 — sin margin-top, queda al lado del H1 en grid */
	align-self: end;
	padding-bottom: 6px;
}

/* === EDITORIAL TIMELINE (decorative under the hero) === */
.scola-eh__book-timeline {
	max-width: 1480px;
	margin: 64px auto 0;
	position: relative;
	padding: 0 4px;
}

.scola-eh__book-timeline-track {
	position: absolute;
	top: 8px;
	left: 4px;
	right: 4px;
	height: 1px;
	background: rgba(10, 10, 10, 0.18);
}

.scola-eh__book-timeline-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 12px;
	position: relative;
}

.scola-eh__book-timeline-item {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-top: 0;
}

.scola-eh__book-timeline-dot {
	width: 17px;
	height: 17px;
	border-radius: 999px;
	background: var(--bg);
	border: 1px solid var(--ink);
	display: block;
	position: relative;
}

.scola-eh__book-timeline-item:first-child .scola-eh__book-timeline-dot {
	background: var(--orange);
	border-color: var(--orange);
}

.scola-eh__book-timeline-num {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	color: var(--orange);
	font-weight: 700;
}

.scola-eh__book-timeline-label {
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink);
}

@media (max-width: 760px) {
	.scola-eh__book-timeline-list { grid-template-columns: repeat(3, 1fr); gap: 24px 12px; }
	.scola-eh__book-timeline-track { display: none; }
	.scola-eh__book-timeline-dot { display: none; }
}

/* === WIZARD SECTION ===
   v1.16.1 — Roberto: "el banner completo del wizard quedara dentro de la
   primera vista de la página". Wizard arranca inmediato después del hero
   compactado. min-height reducido (era 600/540) para que React decida la
   altura natural y no fuerce scroll vacío. */
.scola-eh__book-wizard-section {
	padding: 24px 0 0;
	background: var(--bg);
	border-bottom: 1px solid rgba(10, 10, 10, 0.08);
}

.scola-eh__book-wizard-inner {
	max-width: 1480px;
	margin: 0 auto;
	padding: 0 clamp(20px, 4vw, 48px);
	background: transparent;
	border: none;
	box-shadow: none;
	border-radius: 0;
	min-height: 480px;
}

/* The wizard root */
.scola-eh__book-wizard-inner #scola-wizard-root,
.scola-eh__book-wizard-inner .scola-wizard-shell {
	min-height: 460px;
}

/* === TRUST STRIP (below wizard) === */
.scola-eh__book-trust {
	background: var(--cream);
	padding: clamp(48px, 6vw, 80px) clamp(20px, 4vw, 48px);
	border-top: 1px solid rgba(10,10,10,0.08);
	border-bottom: 1px solid rgba(10,10,10,0.08);
}

.scola-eh__book-trust-inner {
	max-width: 1480px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(20px, 3vw, 48px);
}

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

.scola-eh__book-trust-item {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.scola-eh__book-trust-num {
	font-family: var(--sans);
	font-size: clamp(32px, 4vw, 56px);
	font-weight: 200;
	letter-spacing: -0.04em;
	line-height: 1;
	color: var(--ink);
}

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

/* v1.17.0 — Stepper compacto móvil "Paso N / 6 — Label".
   Renderizado por Stepper.jsx, oculto en desktop. Ver media query 720px. */
.scola-stepper__compact {
	display: none;
}

.scola-eh__book-trust-label {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
	border-top: 1px solid var(--orange);
	padding-top: 6px;
}

/* ==========================================================================
 *  v1.9 — WIZARD INTERNAL STYLES (editorial language)
 *  These extend the React wizard. Loaded by editorial-book.css so they apply
 *  inside #scola-wizard-root rendered by the [scola_wizard] shortcode.
 * ========================================================================== */

#scola-wizard-root .scola-wizard-shell {
	background: transparent;
	color: var(--ink);
	font-family: var(--sans);
}

/* ---- Header ---- (la "tarjeta" crema del wizard)
   v1.18.0 — removido el __meta (// STEP N/06 estaba repetido con el Stepper).
   Queda solo el título grande → tarjeta más baja + título protagonista
   (Roberto: "eliminarlo de la tarjeta crema y darle más tamaño al título").
   bg var(--ink)=cream + texto var(--bg)=mocha (alto contraste). */
.scola-wizard-header {
	background: var(--ink);
	color: var(--bg);
	padding: clamp(22px, 2.6vw, 36px) clamp(20px, 4vw, 64px);
	border-top: 1px solid rgba(26, 20, 16, 0.08);
}

/* v1.18.1 — "// STEP N / 06" en el banner crema. Oculto en desktop (manda el
   Stepper de 6 dots); visible en móvil alineado a la izquierda, arriba del
   título (ver media query 720px). */
.scola-wizard-header__step {
	display: none;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--orange);
	font-weight: 700;
}

.scola-wizard-header__h1 {
	margin: 0;
	font-family: var(--sans);
	font-weight: 300;
	font-size: clamp(36px, 4.6vw, 68px);
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--bg);
}

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

/* ---- Stepper ---- (las "fases 1 al 6")
   v1.17.1 — menos alto + LEGIBILIDAD. El fondo es var(--cream) = #251A12
   (mocha oscuro), pero los textos venían en rgba(10,10,10,X) (negro) →
   negro sobre mocha = ilegible (Roberto: "mucho texto con el fondo mocca
   no se lee"). Todos los rgba negros pasan a cream rgba(242,240,234,X). */
.scola-stepper {
	background: var(--cream);
	padding: 16px clamp(20px, 4vw, 64px) 20px;
	border-bottom: 1px solid rgba(242, 240, 234, 0.08);
	position: relative;
}

.scola-stepper__track {
	position: absolute;
	left: clamp(20px, 4vw, 64px);
	right: clamp(20px, 4vw, 64px);
	bottom: 14px;
	height: 2px;
	background: rgba(242, 240, 234, 0.15);
	pointer-events: none;
}

.scola-stepper__track-fill {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	background: var(--orange);
	transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.scola-stepper__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 8px;
	position: relative;
}

.scola-stepper__item { min-width: 0; }

.scola-stepper__btn {
	background: none;
	border: 0;
	padding: 0 0 14px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	width: 100%;
	cursor: default;
	text-align: left;
	color: rgba(242, 240, 234, 0.5);   /* v1.17.1 — cream tenue (era negro, ilegible sobre mocha) */
	font-family: var(--mono);
	transition: color 0.2s ease;
}

.scola-stepper__item.is-done .scola-stepper__btn { cursor: pointer; color: var(--ink); }
.scola-stepper__item.is-active .scola-stepper__btn { color: var(--ink); }
.scola-stepper__item.is-done .scola-stepper__btn:hover { color: var(--orange); }

.scola-stepper__marker {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	background: var(--bg);
	border: 1px solid currentColor;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	position: relative;
	flex-shrink: 0;
}

.scola-stepper__item.is-active .scola-stepper__marker {
	background: var(--ink);
	color: var(--bg);
	border-color: var(--ink);
}

.scola-stepper__item.is-done .scola-stepper__marker {
	background: var(--orange);
	color: var(--bg);                  /* v1.17.1 — mocha sobre naranja (mejor contraste que cream) */
	border-color: var(--orange);
}

.scola-stepper__num { font-feature-settings: "tnum"; }

.scola-stepper__pulse {
	position: absolute;
	inset: -4px;
	border-radius: 999px;
	border: 1px solid var(--orange);
	animation: scolaStepperPulse 1.6s ease-out infinite;
	pointer-events: none;
}

@keyframes scolaStepperPulse {
	0%   { transform: scale(0.9); opacity: 0.7; }
	100% { transform: scale(1.45); opacity: 0; }
}

.scola-stepper__label {
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

/* v1.18.1 — Móvil: Roberto pidió eliminar la sección inferior (el stepper
   mocha con dots/compact + barra) y mover el "// STEP N / 06" al banner crema
   (alineado a la izquierda, sin la palabra CONTACT que era redundante con
   "Your contact." del banner). Ahorra una sección entera y se ve más limpio. */
@media (max-width: 720px) {
	.scola-stepper { display: none; }

	.scola-wizard-header__step {
		display: block;
		margin-bottom: 10px;
	}
}

/* ---- Wizard body ---- */
.scola-wizard-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 0;
	background: var(--bg);
}

@media (max-width: 1024px) {
	.scola-wizard-body { grid-template-columns: 1fr; }
}

.scola-wizard-main {
	padding: clamp(36px, 5vw, 80px) clamp(20px, 4vw, 64px);
	min-width: 0;
}

.scola-wizard-aside {
	padding: clamp(36px, 5vw, 64px) clamp(20px, 4vw, 48px);
	border-left: 1px solid rgba(10, 10, 10, 0.08);
	background: var(--cream);
}

@media (max-width: 1024px) {
	.scola-wizard-aside { border-left: none; border-top: 1px solid rgba(10, 10, 10, 0.08); }
}

/* ---- Step shared ---- */
.scola-step-lead {
	font-size: clamp(16px, 1.4vw, 19px);
	color: var(--ink-2);
	line-height: 1.55;
	margin: 0 0 40px;
	max-width: 640px;
}

.scola-step-stack > * + * { margin-top: 32px; }

/* ---- Service grid (Step1) ---- */
.scola-svc-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

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

.scola-svc-card {
	position: relative;
	background: var(--bg);
	border: 1px solid rgba(10, 10, 10, 0.12);
	padding: 28px 24px 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	text-align: left;
	cursor: pointer;
	color: var(--ink);
	overflow: hidden;
	transition: border-color 0.2s ease, transform 0.2s ease;
	min-height: 248px;          /* v1.17.1 — un poco más bajas (era 280) sin apretar el contenido */
}

.scola-svc-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--orange);
	transform: translateY(101%);
	transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
	z-index: 0;
}

/* v1.17.1 — en hover/active el fondo de la card es NARANJA → el texto debe ser
   mocha (var(--bg)) para contraste alto, no cream (var(--ink)) que se leía mal
   sobre naranja. */
.scola-svc-card:hover { border-color: var(--ink); }
.scola-svc-card:hover::before { transform: translateY(0); }
.scola-svc-card:hover .scola-svc-card__num,
.scola-svc-card:hover .scola-svc-card__title,
.scola-svc-card:hover .scola-svc-card__desc,
.scola-svc-card:hover .scola-svc-card__state,
.scola-svc-card:hover .scola-svc-card__icon { color: var(--bg); position: relative; z-index: 1; }

.scola-svc-card.is-active { border-color: var(--orange); background: var(--orange); }
.scola-svc-card.is-active::before { transform: translateY(0); }
.scola-svc-card.is-active .scola-svc-card__num,
.scola-svc-card.is-active .scola-svc-card__title,
.scola-svc-card.is-active .scola-svc-card__desc,
.scola-svc-card.is-active .scola-svc-card__state,
.scola-svc-card.is-active .scola-svc-card__icon { color: var(--bg); position: relative; z-index: 1; }

.scola-svc-card__num {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	position: relative;
	z-index: 1;
}

.scola-svc-card__icon {
	color: var(--ink);
	margin-top: auto;
	position: relative;
	z-index: 1;
	display: inline-flex;
}

.scola-svc-card__title {
	font-family: var(--sans);
	font-size: 28px;
	font-weight: 300;
	letter-spacing: -0.02em;
	line-height: 1;
	color: var(--ink);
	position: relative;
	z-index: 1;
}

.scola-svc-card__desc {
	font-size: 13px;
	line-height: 1.5;
	color: var(--ink-2);
	position: relative;
	z-index: 1;
}

.scola-svc-card__state {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-top: 1px solid rgba(10, 10, 10, 0.18);
	padding-top: 12px;
	position: relative;
	z-index: 1;
}

.scola-svc-card.is-active .scola-svc-card__state { color: var(--bg); border-color: rgba(26, 20, 16, 0.4); }

/* ---- Subtype groups (Step2) ---- */
.scola-subtype-groups > * + * { margin-top: 36px; }

.scola-subtype-group__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(10, 10, 10, 0.08);
}

.scola-subtype-group__num {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	color: var(--orange);
	font-weight: 700;
}

.scola-subtype-group__icon { color: var(--ink); display: inline-flex; }

.scola-subtype-group__title {
	font-family: var(--sans);
	font-weight: 300;
	font-size: 22px;
	margin: 0;
	color: var(--ink);
	letter-spacing: -0.02em;
}

/* ---- Chips (subtypes, contact prefs) ---- */
.scola-chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.scola-chip {
	background: var(--bg);
	border: 1px solid rgba(10, 10, 10, 0.14);
	padding: 10px 16px;
	font-family: var(--sans);
	font-size: 14px;
	color: var(--ink);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: all 0.2s ease;
}

.scola-chip:hover { border-color: var(--ink); }

.scola-chip.is-active {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--bg);
}

.scola-chip__check { display: inline-flex; color: var(--orange); }

/* ---- Form fields ---- */
.scola-form-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

.scola-form-grid--2col {
	grid-template-columns: 1fr 1fr;
}

@media (max-width: 640px) {
	.scola-form-grid--2col { grid-template-columns: 1fr; }
}

.scola-field { display: flex; flex-direction: column; gap: 8px; }
.scola-field--full { grid-column: 1 / -1; }

.scola-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-2);
}

.scola-input {
	width: 100%;
	background: var(--bg);
	border: 1px solid rgba(10, 10, 10, 0.18);
	padding: 14px 16px;
	font-family: var(--sans);
	font-size: 16px;
	color: var(--ink);
	border-radius: 0;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.scola-input:focus {
	outline: none;
	border-color: var(--orange);
	background: #FFFFFF;
}

.scola-input.has-error { border-color: #DC2626; }

.scola-textarea { resize: vertical; min-height: 100px; }

.scola-select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
	background-position: right 18px center, right 12px center;
	background-size: 6px 6px;
	background-repeat: no-repeat;
	padding-right: 36px;
}

.scola-field__hint {
	font-size: 12px;
	color: var(--muted);
	line-height: 1.5;
}

.scola-field__hint--between {
	display: flex;
	justify-content: space-between;
	gap: 12px;
}

.scola-field__hint--right { text-align: right; }

.scola-field__hint-accent {
	color: var(--orange);
	font-weight: 600;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* ---- Stacked row option (durations) ---- */
.scola-stack { display: flex; flex-direction: column; gap: 8px; }

.scola-row-option {
	background: var(--bg);
	border: 1px solid rgba(10, 10, 10, 0.14);
	padding: 14px 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: var(--sans);
	font-size: 14px;
	color: var(--ink);
	cursor: pointer;
	transition: all 0.2s ease;
}

.scola-row-option:hover { border-color: var(--ink); }

.scola-row-option.is-active {
	border-color: var(--orange);
	background: rgba(253, 142, 37, 0.08);
}

.scola-row-option.is-active svg { color: var(--orange); }

/* ---- Addons ---- */
.scola-addons-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

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

.scola-addon {
	background: var(--bg);
	border: 1px solid rgba(10, 10, 10, 0.14);
	padding: 14px 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	font-family: var(--sans);
	font-size: 14px;
	color: var(--ink);
	cursor: pointer;
	transition: all 0.2s ease;
	text-align: left;
}

.scola-addon:hover { border-color: var(--ink); }

.scola-addon.is-active {
	border-color: var(--orange);
	background: rgba(253, 142, 37, 0.08);
}

.scola-addon__main {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.scola-addon__check {
	width: 16px;
	height: 16px;
	border: 1px solid rgba(10, 10, 10, 0.3);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--orange);
}

.scola-addon.is-active .scola-addon__check { border-color: var(--orange); background: var(--orange); color: var(--ink); }

.scola-addon__price {
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	font-weight: 700;
	color: var(--orange);
}

/* ---- Nav buttons ---- */
.scola-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	margin-top: 48px;
	padding-top: 28px;
	border-top: 1px solid rgba(10, 10, 10, 0.12);
}

.scola-nav__back {
	background: none;
	border: 0;
	padding: 12px 4px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-2);
	cursor: pointer;
	transition: opacity 0.2s ease, color 0.2s ease;
}

.scola-nav__back:hover:not(:disabled) { color: var(--orange); }
.scola-nav__back:disabled { opacity: 0.3; cursor: not-allowed; }

/* v1.18.0 — Continue con stroke naranja resaltado (Roberto). Texto mocha sobre
   naranja para contraste (era cream). En disabled mantiene un stroke naranja
   tenue para señalar que es la acción principal aunque falte completar. */
.scola-nav__next {
	background: var(--orange);
	color: var(--bg);
	border: 1.5px solid var(--orange);
	padding: 17px 32px;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: 0 0 0 3px rgba(253, 142, 37, 0.18);
}

.scola-nav__next:hover:not(:disabled) {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--bg);
	box-shadow: 0 0 0 3px rgba(242, 240, 234, 0.15);
}

.scola-nav__next:disabled {
	background: transparent;
	border-color: rgba(253, 142, 37, 0.55);
	color: rgba(253, 142, 37, 0.85);
	box-shadow: none;
	cursor: not-allowed;
}

/* v1.17.0 — Móvil: barra de navegación STICKY abajo (Roberto). Los botones
   Back/Continue quedan siempre visibles al fondo del viewport sin tener
   que scrollear hasta el final del paso. Respeta safe-area (notch/gesture
   bar). Touch targets ≥48px. */
@media (max-width: 720px) {
	.scola-nav {
		position: sticky;
		bottom: 0;
		margin-top: 32px;
		/* sangra hacia los bordes del .scola-wizard-main (padding horizontal
		   clamp 20-4vw-64) para que la barra llegue de borde a borde */
		margin-left: calc(-1 * clamp(20px, 4vw, 64px));
		margin-right: calc(-1 * clamp(20px, 4vw, 64px));
		padding: 14px clamp(20px, 4vw, 64px);
		padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
		background: var(--bg);
		border-top: 1px solid rgba(10, 10, 10, 0.12);
		box-shadow: 0 -8px 24px -12px rgba(10, 10, 10, 0.25);
		z-index: 20;
	}
	.scola-nav__back {
		min-height: 48px;
	}
	.scola-nav__next {
		min-height: 48px;
		padding: 14px 24px;
		flex: 0 0 auto;
	}
}

/* ---- Errors ---- */
.scola-error {
	font-size: 12px;
	color: #DC2626;
	margin: 4px 0 0;
}

.scola-error-box {
	padding: 16px 20px;
	background: #FEF2F2;
	border: 1px solid #DC2626;
	color: #DC2626;
	font-size: 14px;
}

.scola-fine-print {
	font-size: 12px;
	color: var(--muted);
	line-height: 1.5;
}

/* ---- Estimate sidebar ---- */
.scola-estimate {
	position: sticky;
	top: 24px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.scola-estimate__kicker {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}

.scola-estimate__empty {
	font-size: 14px;
	color: var(--muted);
	margin: 0;
	line-height: 1.5;
}

.scola-estimate__founders {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	background: var(--orange);
	color: var(--ink);
	padding: 6px 12px;
	font-family: var(--mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.scola-estimate__strike {
	font-size: 14px;
	color: var(--muted);
	text-decoration: line-through;
}

.scola-estimate__price {
	font-family: var(--sans);
	font-size: clamp(36px, 4vw, 52px);
	font-weight: 200;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--ink);
}

.scola-estimate__price-sep { color: var(--muted); font-weight: 400; padding: 0 4px; }

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

.scola-estimate__custom {
	padding: 16px;
	border: 1px solid var(--orange);
	background: rgba(253, 142, 37, 0.08);
}

.scola-estimate__custom-title {
	font-family: var(--sans);
	font-weight: 600;
	font-size: 15px;
	color: var(--ink);
	margin-bottom: 4px;
}

.scola-estimate__custom-desc {
	font-size: 12px;
	color: var(--ink-2);
	line-height: 1.5;
}

.scola-estimate__divider {
	border: 0;
	border-top: 1px solid rgba(10, 10, 10, 0.12);
	margin: 4px 0;
}

.scola-estimate__block { display: flex; flex-direction: column; gap: 10px; }

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

.scola-estimate__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.scola-estimate__list-item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--ink);
}

.scola-estimate__addons {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.scola-estimate__addon {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: var(--ink);
}

.scola-estimate__addon-price { color: var(--orange); font-weight: 700; font-family: var(--mono); }