/* ==========================================================================
   G2 · Landing para tráfico de directorios latinos.

   Hoja propia y autosuficiente: NO depende de los tokens de `.scola-eh` ni
   carga editorial-home.css. Este tráfico es casi todo móvil y a menudo con
   datos, así que la página tiene que pintar con lo mínimo.
   ========================================================================== */

.scola-dir {
	--dir-bg:     #1A1410;
	--dir-ink:    #F2F0EA;
	--dir-ink-2:  #E8E4D9;
	--dir-muted:  #A89C8E;
	--dir-line:   #3D3530;
	--dir-orange: #FD8E25;
	--dir-wa:     #075E54;
	--dir-wa-h:   #128C7E;

	background: var(--dir-bg);
	color: var(--dir-ink);
	font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	-webkit-font-smoothing: antialiased;
	padding: clamp(28px, 7vw, 64px) clamp(18px, 5vw, 48px) clamp(40px, 8vw, 80px);
	max-width: 820px;
	margin: 0 auto;
	box-sizing: border-box;
}

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

.scola-dir__kicker {
	display: block;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--dir-orange);
	margin-bottom: 14px;
}

.scola-dir__h1 {
	font-size: clamp(30px, 8vw, 46px);
	font-weight: 300;
	line-height: 1.08;
	letter-spacing: -0.03em;
	margin: 0 0 16px;
}

.scola-dir__h1 em {
	font-style: italic;
	color: var(--dir-orange);
	font-weight: 400;
}

.scola-dir__lead {
	font-size: clamp(16px, 4vw, 18px);
	line-height: 1.55;
	color: var(--dir-ink-2);
	margin: 0 0 28px;
}

/* --- WhatsApp: arriba, grande, imposible de no ver --- */

.scola-dir__wa {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	min-height: 58px;
	padding: 16px 24px;
	background: var(--dir-wa);
	color: #FFFFFF;
	border-radius: 999px;
	font-size: 17px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .18s ease;
}

.scola-dir__wa:link,
.scola-dir__wa:visited { color: #FFFFFF; }
.scola-dir__wa:hover,
.scola-dir__wa:focus-visible { background: var(--dir-wa-h); color: #FFFFFF; }
.scola-dir__wa:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }

.scola-dir__wa-icono { width: 24px; height: 24px; flex: 0 0 24px; fill: currentColor; }

.scola-dir__tel {
	display: block;
	margin-top: 14px;
	text-align: center;
	font-size: 15px;
	color: var(--dir-muted);
	text-decoration: none;
}
.scola-dir__tel:hover,
.scola-dir__tel:focus-visible { color: var(--dir-orange); }

/* --- Razones --- */

.scola-dir__razones {
	list-style: none;
	margin: 32px 0;
	padding: 0;
	border-top: 1px solid var(--dir-line);
}

.scola-dir__razones li {
	position: relative;
	padding: 14px 0 14px 26px;
	border-bottom: 1px solid var(--dir-line);
	font-size: 15px;
	line-height: 1.5;
	color: var(--dir-ink-2);
}

.scola-dir__razones li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 1.4em;
	width: 12px;
	height: 1px;
	background: var(--dir-orange);
}

/* --- Precios: el número primero --- */

.scola-dir__h2 {
	font-size: clamp(22px, 6vw, 30px);
	font-weight: 300;
	letter-spacing: -0.02em;
	margin: 0 0 18px;
}

.scola-dir__lista { list-style: none; margin: 0; padding: 0; }

.scola-dir__precio {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas: 'num label' 'num que';
	column-gap: 16px;
	padding: 16px 0;
	border-bottom: 1px solid var(--dir-line);
}

.scola-dir__precio-num {
	grid-area: num;
	align-self: center;
	font-size: clamp(22px, 6vw, 28px);
	font-weight: 300;
	color: var(--dir-orange);
	letter-spacing: -0.02em;
	min-width: 88px;
}

.scola-dir__precio-label { grid-area: label; font-size: 16px; font-weight: 600; }
.scola-dir__precio-que   { grid-area: que;   font-size: 14px; line-height: 1.45; color: var(--dir-muted); }

.scola-dir__nota {
	margin: 18px 0 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--dir-muted);
}
.scola-dir__nota a { color: var(--dir-orange); text-decoration: none; white-space: nowrap; }
.scola-dir__nota a:hover,
.scola-dir__nota a:focus-visible { text-decoration: underline; }

/* --- Cierre --- */

.scola-dir__cierre {
	margin-top: 36px;
	padding-top: 28px;
	border-top: 1px solid var(--dir-line);
}

.scola-dir__cierre p {
	font-size: clamp(16px, 4.5vw, 19px);
	line-height: 1.45;
	margin: 0 0 20px;
}

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