/* ==========================================================================
   SCOLA — Blog editorial: listado y artículo.
   Se carga encima de editorial-home.css (tokens en `.scola-eh`, fondo mocha
   oscuro) y de segment-page.css, de donde salen .scola-seg__h1/h2/kicker/cta.

   Regla de color de la casa: fondo oscuro → --orange. Fondo claro →
   --orange-ink. Aquí todo el fondo es oscuro, así que manda --orange.
   ========================================================================== */

/* ==========================================================================
   1 · ARTÍCULO
   ========================================================================== */

.scola-art {
	max-width: 1600px;
	margin: 0 auto;
	padding: clamp(32px, 5vw, 72px) clamp(20px, 4vw, 48px) clamp(48px, 6vw, 96px);
	color: var(--ink);
}

/* La medida de lectura. 68 caracteres es donde el ojo deja de perder el
   renglón al saltar de línea; el H1 y las tablas se salen de ella a propósito. */
.scola-art__head,
.scola-art__body > .scola-art__section > :not(.scola-art__table-wrap):not(.scola-art__cta) {
	max-width: 68ch;
}

.scola-art__head { margin-bottom: clamp(32px, 4vw, 56px); }

.scola-art__head .scola-seg__h1 { max-width: 20ch; }

.scola-art__meta {
	font-family: var(--mono);
	font-size: 13px;
	letter-spacing: 0.04em;
	color: var(--muted);
	margin: 24px 0 0;
}

.scola-art__lang-switch {
	max-width: 1600px;
	margin: 0 auto;
	padding: clamp(20px, 3vw, 32px) clamp(20px, 4vw, 48px) 0;
}

/* --- Índice de contenidos --- */

.scola-art__toc {
	border-top: 1px solid var(--light);
	border-bottom: 1px solid var(--light);
	padding: 28px 0;
	margin-bottom: clamp(40px, 5vw, 64px);
}

.scola-art__toc-title {
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--orange);
	margin: 0 0 20px;
}

.scola-art__toc-list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: toc;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 40px;
}

@media (max-width: 768px) {
	.scola-art__toc-list { grid-template-columns: 1fr; }
}

.scola-art__toc-list li {
	counter-increment: toc;
	display: flex;
	gap: 14px;
	align-items: baseline;
}

.scola-art__toc-list li::before {
	content: counter(toc, decimal-leading-zero);
	font-family: var(--mono);
	font-size: 12px;
	color: var(--muted);
	flex: 0 0 auto;
}

.scola-art__toc-list a {
	font-size: 16px;
	line-height: 1.45;
	color: var(--ink-2);
	border-bottom: 1px solid transparent;
	transition: color .18s ease, border-color .18s ease;
}

.scola-art__toc-list a:hover,
.scola-art__toc-list a:focus-visible {
	color: var(--orange);
	border-bottom-color: var(--orange);
}

/* --- Cuerpo --- */

.scola-art__section {
	padding-top: clamp(40px, 5vw, 72px);
	/* Para que el ancla no quede pegada al header al saltar desde el índice. */
	scroll-margin-top: 96px;
}

.scola-art__section .scola-seg__h2 { margin-bottom: 28px; }

.scola-art__body p {
	font-size: clamp(16px, 1.35vw, 18px);
	line-height: 1.65;
	color: var(--ink-2);
	margin: 0 0 20px;
}

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

.scola-art__body a {
	color: var(--orange);
	border-bottom: 1px solid rgba(253, 142, 37, 0.4);
	transition: border-color .18s ease;
}

.scola-art__body a:hover,
.scola-art__body a:focus-visible { border-bottom-color: var(--orange); }

.scola-art__h3 {
	font-family: var(--sans);
	font-size: clamp(22px, 2.2vw, 30px);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--ink);
	margin: 40px 0 16px;
}

.scola-art__list {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
}

.scola-art__list li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 14px;
	font-size: clamp(16px, 1.35vw, 18px);
	line-height: 1.6;
	color: var(--ink-2);
}

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

/* --- Tablas ---
   Una tabla de cuatro columnas no cabe en 375 px. El envoltorio se lleva el
   scroll para que no lo haga la página: `overflow-x` en el body sería una
   barra horizontal en todo el sitio. Lleva tabindex para que también se pueda
   desplazar con el teclado, que es lo que pide WCAG 2.1 en una región con
   scroll. */

.scola-art__table-wrap {
	overflow-x: auto;
	margin: 0 0 12px;
	border: 1px solid var(--light);
	background: var(--surface);
	-webkit-overflow-scrolling: touch;
}

.scola-art__table-wrap:focus-visible {
	outline: 2px solid var(--orange);
	outline-offset: 2px;
}

.scola-art__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	min-width: 560px;
}

.scola-art__table th,
.scola-art__table td {
	padding: 16px 20px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--light);
	line-height: 1.5;
}

.scola-art__table thead th {
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--orange);
	background: var(--surface-2);
	white-space: nowrap;
}

.scola-art__table tbody th {
	font-weight: 600;
	color: var(--ink);
	white-space: nowrap;
}

.scola-art__table tbody td { color: var(--ink-2); }

.scola-art__table tbody tr:last-child th,
.scola-art__table tbody tr:last-child td { border-bottom: 0; }

.scola-art__table-note {
	font-size: 13px !important;
	line-height: 1.5;
	color: var(--muted) !important;
	margin: 0 0 32px !important;
}

/* --- Destacado --- */

.scola-art__callout {
	border-left: 2px solid var(--orange);
	background: var(--surface);
	padding: 24px 28px;
	margin: 0 0 28px;
}

.scola-art__callout-title {
	display: block;
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--orange);
	margin-bottom: 12px;
}

.scola-art__callout p { margin: 0 !important; }

/* --- Llamada a la acción dentro del texto --- */

.scola-art__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 28px;
	padding: 28px 0 8px;
	border-top: 1px solid var(--light);
	margin-top: 32px;
}

.scola-art__cta p {
	margin: 0 !important;
	color: var(--muted) !important;
	font-size: 16px !important;
}

/* --- FAQ y relacionados --- */

.scola-art__faq { padding-top: clamp(48px, 6vw, 88px); }

.scola-art__related { padding-top: clamp(48px, 6vw, 88px); }

.scola-art__related-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: var(--light);
	border: 1px solid var(--light);
	margin-top: 32px;
}

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

.scola-art__related-item {
	display: block;
	padding: 28px 24px;
	background: var(--bg);
	transition: background .18s ease;
}

.scola-art__related-item:hover,
.scola-art__related-item:focus-visible { background: var(--surface); }

.scola-art__related-item b {
	display: block;
	font-size: 19px;
	font-weight: 500;
	color: var(--orange);
	margin-bottom: 10px;
}

.scola-art__related-item span {
	display: block;
	font-size: 15px;
	line-height: 1.5;
	color: var(--muted);
}

/* ==========================================================================
   2 · LISTADO
   ========================================================================== */

.scola-blog { padding-top: clamp(32px, 5vw, 72px); padding-bottom: clamp(48px, 6vw, 96px); }

.scola-blog__head { margin-bottom: clamp(40px, 5vw, 72px); }

.scola-blog__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--light);
}

.scola-blog__item { border-bottom: 1px solid var(--light); }

.scola-blog__link {
	display: block;
	padding: clamp(28px, 3.5vw, 44px) 0;
	transition: opacity .18s ease;
}

.scola-blog__link:hover,
.scola-blog__link:focus-visible { opacity: 1; }

.scola-blog__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 18px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 16px;
}

.scola-blog__cat { color: var(--orange); }

.scola-blog__lang {
	border: 1px solid var(--light);
	padding: 3px 8px;
	letter-spacing: 0.1em;
	text-transform: none;
}

.scola-blog__title {
	font-family: var(--sans);
	font-size: clamp(26px, 3.6vw, 48px);
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: var(--ink);
	margin: 0 0 16px;
	max-width: 22ch;
	transition: color .18s ease;
}

.scola-blog__link:hover .scola-blog__title,
.scola-blog__link:focus-visible .scola-blog__title { color: var(--orange); }

.scola-blog__excerpt {
	font-size: clamp(15px, 1.3vw, 17px);
	line-height: 1.6;
	color: var(--ink-2);
	max-width: 62ch;
	margin: 0 0 18px;
}

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

.scola-blog__empty {
	font-size: 17px;
	color: var(--muted);
	padding: 48px 0;
}

.scola-blog__pagination {
	padding-top: 40px;
	font-family: var(--mono);
	font-size: 13px;
	letter-spacing: 0.08em;
}

.scola-blog__pagination a { color: var(--orange); }

.scola-blog__pagination .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.scola-blog__pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 20px;
	align-items: center;
}

/* ==========================================================================
   3 · MOVIMIENTO
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.scola-art__toc-list a,
	.scola-art__related-item,
	.scola-blog__title,
	.scola-blog__link { transition: none; }

	html { scroll-behavior: auto; }
}