/* ==========================================================================
   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;
	letter-spacing: -0.03em;
	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;
	letter-spacing: -0.03em;
	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;
	letter-spacing: -0.03em;
	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;
}

/* D4 · temporada baja. Mismo lenguaje que el badge de Founder's, pero es una
   regla estructural publicada y no una promoción, así que va en cursiva de
   marca y sin el fondo naranja que grita "oferta". */
.scola-estimate__offseason {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.scola-estimate__offseason-badge {
	display: inline-flex;
	align-items: center;
	background: rgba(253,142,37,0.14);
	color: var(--orange);
	padding: 6px 12px;
	font-family: var(--mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.scola-estimate__offseason-note {
	margin: 10px 0 0;
	font-size: 12px;
	line-height: 1.45;
	color: var(--muted);
}

/* D5 · el depósito. "Book with $1,200" es la cifra que decide si se reserva
   hoy o se deja para pensarlo, así que va con el peso de un precio. */
.scola-estimate__deposit {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding-top: 16px;
	border-top: 1px solid var(--light);
}

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

.scola-estimate__deposit-value {
	font-family: var(--sans);
	font-size: 24px;
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var(--orange);
}

.scola-estimate__deposit-note {
	margin: 8px 0 0;
	font-size: 12px;
	line-height: 1.45;
	color: var(--muted);
}

/* D6 · el plan de cuotas. */
.scola-estimate__plan {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--muted);
}

.scola-estimate__plan strong { color: var(--ink); font-weight: 600; }

.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); }

/* ─────────────────────────────────────────────────────────────────
   Respaldo sin JavaScript (QuickLead)

   Se muestra cuando el wizard no puede montar: navegador sin scripts,
   bundle caído o red que nunca lo entrega. Hasta entonces va oculto.
   ───────────────────────────────────────────────────────────────── */
.scola-quick-wrap[hidden]{display:none}
.scola-quick{
	max-width:720px;margin:0 auto;padding:clamp(28px,4vw,48px);
	background:#FAFAF7;border:1px solid rgba(20,10,2,.12);border-radius:18px;
	font-family:'Manrope',-apple-system,BlinkMacSystemFont,sans-serif;color:#140A02;
}
.scola-quick__intro{margin:0 0 22px;font-size:17px;line-height:1.5;color:rgba(20,10,2,.74)}
.scola-quick__form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.scola-quick__campo{display:flex;flex-direction:column;gap:7px}
.scola-quick__campo--ancho{grid-column:1/-1}
.scola-quick__campo span{
	font-size:11px;letter-spacing:.14em;text-transform:uppercase;
	color:rgba(20,10,2,.62);display:flex;gap:7px;align-items:baseline;
}
.scola-quick__campo i{font-style:normal;text-transform:none;letter-spacing:0;font-size:11px;opacity:.6}
.scola-quick__campo input,.scola-quick__campo textarea{
	font:inherit;font-size:16px;                    /* 16px evita el zoom de iOS al enfocar */
	padding:13px 14px;border:1px solid rgba(20,10,2,.22);border-radius:10px;
	background:#fff;color:#140A02;width:100%;
}
.scola-quick__campo input:focus-visible,.scola-quick__campo textarea:focus-visible{
	outline:2px solid #FD8E25;outline-offset:1px;border-color:transparent;
}
.scola-quick__enviar{
	grid-column:1/-1;justify-self:start;
	background:#140A02;color:#FD8E25;border:0;cursor:pointer;
	font:inherit;font-weight:700;font-size:14px;letter-spacing:.06em;
	padding:16px 34px;border-radius:999px;min-height:48px;
	transition:background .25s ease,color .25s ease;
}
.scola-quick__enviar:hover{background:#FD8E25;color:#140A02}
.scola-quick__directo{margin:22px 0 0;font-size:14px;color:rgba(20,10,2,.68)}
.scola-quick__directo a{color:#140A02;text-decoration:underline;text-underline-offset:3px}
.scola-quick__trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.scola-quick__aviso{
	margin:0 0 20px;padding:14px 18px;border-radius:10px;font-size:15px;line-height:1.45;
}
.scola-quick__aviso--bien{background:rgba(45,140,70,.12);color:#1d5c2e;border:1px solid rgba(45,140,70,.3)}
.scola-quick__aviso--mal{background:rgba(190,60,40,.10);color:#8a2c1c;border:1px solid rgba(190,60,40,.28)}
@media(max-width:640px){
	.scola-quick__form{grid-template-columns:1fr}
	.scola-quick__enviar{justify-self:stretch;text-align:center}
}

/* ==========================================================================
   Wizard en móvil — ajustes de tamaño
   ==========================================================================
   Medido a 375×812 recorriendo los 6 pasos. El layout ya era correcto (una
   columna, sin desbordamiento horizontal, el sticky de navegación se comporta);
   lo que faltaba era escalar el TAMAÑO de dos componentes.

   1. Las tarjetas de servicio tenían `min-height: 248px` y titular de 28px sin
      variante móvil: el bloque @media de 720px de más arriba solo traducía el
      :hover a táctil, nunca las medidas. Tres tarjetas ocupaban 1,66 pantallas,
      así que la tercera opción caía fuera de vista en el paso cuyo trabajo es
      justamente comparar las tres.

   2. Los chips medían 41px de alto — por debajo de los 44px que recomiendan
      tanto Apple como las WCAG para un objetivo táctil.
   ========================================================================== */
@media (max-width: 720px) {

	.scola-svc-card {
		min-height: 168px;
		padding: 20px 18px 18px;
		gap: 12px;
	}

	.scola-svc-card__title {
		font-size: 22px;
	}

	.scola-svc-card__icon svg {
		width: 40px;
		height: 40px;
	}

	/* Objetivo táctil mínimo. El padding lateral se queda como está: lo que
	   faltaba era altura, no anchura. */
	.scola-chip {
		min-height: 44px;
	}
}

/* ---- El combo foto + video en el paso 1 ----
   Va debajo de la rejilla de servicios y a lo ancho, no como una cuarta
   tarjeta: es una opción de otra naturaleza (dos servicios a la vez) y
   mezclarla en la rejilla la haría parecer un servicio más.

   Usa los MISMOS tokens que .scola-svc-card (--bg, --ink, --ink-2). Ojo con
   los nombres: la paleta del wizard es oscura, así que `--ink` es el crema del
   TEXTO y `--bg` el marrón del fondo. La primera versión de este bloque puso
   un fondo blanco fijo y `color:inherit`, y salió una tarjeta blanca con
   texto crema encima: ilegible. */
.scola-svc-bundle{
	display:flex; align-items:center; gap:16px; width:100%; margin-top:14px;
	padding:18px 20px; text-align:left; cursor:pointer;
	background:var(--bg); color:var(--ink);
	border:1px solid rgba(242,240,234,.16); border-radius:14px;
	font-family:var(--sans);
	transition:border-color .2s ease, box-shadow .2s ease;
}
.scola-svc-bundle:hover{ border-color:var(--orange); }
.scola-svc-bundle.is-active{ border-color:var(--orange); box-shadow:inset 0 0 0 1px var(--orange); }
.scola-svc-bundle__tag{
	flex:none; font-family:var(--mono); font-size:10px; font-weight:700;
	letter-spacing:.16em; text-transform:uppercase; color:var(--bg);
	background:var(--orange); border-radius:999px; padding:6px 12px;
}
.scola-svc-bundle__main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.scola-svc-bundle__title{ font-weight:600; font-size:18px; color:var(--ink); }
.scola-svc-bundle__desc{ font-size:13px; line-height:1.5; color:var(--muted); }
.scola-svc-bundle__state{
	flex:none; display:inline-flex; align-items:center; gap:6px;
	font-family:var(--mono); font-size:11px; letter-spacing:.1em;
	text-transform:uppercase; color:var(--muted); white-space:nowrap;
}
.scola-svc-bundle.is-active .scola-svc-bundle__state{ color:var(--orange); }
@media (max-width:560px){
	.scola-svc-bundle{ flex-wrap:wrap; gap:10px; padding:16px; }
	.scola-svc-bundle__state{ width:100%; }
}