/* Componentes de la moviola: cabecera, raíl, campo, ventanas, libros, tira, cartel y pie. */

/* ---------- Perforaciones: un paso de 22 px, como una película ---------- */
.esl-perforado,
.esl-rail__lista,
.esl-tira__rail,
.esl-enlace__portadas,
.esl-pie__rail {
	background-color: var(--carbon);
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='12'%3E%3Crect x='5' y='1' width='12' height='10' rx='2.5' fill='%233a3a3a'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='12'%3E%3Crect x='5' y='1' width='12' height='10' rx='2.5' fill='%233a3a3a'/%3E%3C/svg%3E");
	background-repeat: repeat-x, repeat-x;
	background-position: 0 4px, 0 calc(100% - 4px);
	background-size: 22px 12px, 22px 12px;
}

/* ---------- Cabecera ---------- */
.esl-cabecera { background: var(--tinta); }
.esl-cabecera__fila {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e-2);
	min-height: 60px;
}
.esl-marca {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--blanco);
	text-decoration: none;
	font-weight: 850;
	font-stretch: 62%;
	font-size: 1.5rem;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
	min-width: 0;
	overflow: hidden;
	padding-block: 9px; /* 44 px de zona de toque dentro de la fila de 60 */
}
.esl-marca svg { width: 22px; height: 26px; flex: none; color: var(--naranja); }
.esl-marca:hover { color: var(--naranja-vivo); }
.esl-cuenta-enlace {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--naranja);
	font-weight: 750;
	font-stretch: 75%;
	font-size: var(--t-pequeno);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}
.esl-cuenta-enlace:hover { color: var(--naranja-vivo); text-decoration: underline; }

/* ---------- Raíl de navegación: las secciones son fotogramas ---------- */
.esl-rail {
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	background: var(--carbon);
	border-block: 1px solid var(--bobina);
}
.esl-rail::-webkit-scrollbar { display: none; }
.esl-rail__lista {
	display: flex;
	gap: 6px;
	width: max-content;
	min-width: 100%;
	margin: 0;
	padding: 22px var(--gutter);
}
.esl-rail__item { scroll-snap-align: start; position: relative; }
.esl-rail__item > a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 14px;
	background: var(--tinta);
	border: 1px solid var(--bobina);
	color: var(--blanco);
	font-weight: 700;
	font-stretch: 75%;
	font-size: var(--t-pequeno);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s var(--sale), color 0.2s var(--sale);
}
.esl-rail__item > a:hover { background: var(--bobina); }
.esl-rail__item.is-actual > a {
	background: var(--naranja);
	border-color: var(--naranja);
	color: var(--tinta);
}
.esl-rail__item.is-actual::after {
	content: "";
	position: absolute;
	top: -18px;
	right: 10px;
	width: 16px;
	height: 24px;
	background: linear-gradient(135deg, var(--naranja-hondo) 0 30%, var(--naranja) 30%);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%);
}

/* ---------- Campo naranja: el título de la página ---------- */
.esl-campo {
	background: var(--naranja) url("../img/grano.png");
	color: var(--tinta);
	padding-top: var(--e-4);
}
.esl-campo h1 {
	font-size: var(--t-h1);
	font-weight: 800;
	font-stretch: 58%;
	line-height: 0.92;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	max-width: 18ch;
}
.esl-regla {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--e-2);
	--mayor: 55px;
	--menor: 11px;
	margin-top: var(--e-3);
	padding-bottom: 40px;
	background:
		repeating-linear-gradient(90deg, var(--tinta) 0 2px, transparent 2px var(--mayor)) left bottom / 100% 16px no-repeat,
		repeating-linear-gradient(90deg, var(--tinta) 0 1px, transparent 1px var(--menor)) left bottom / 100% 8px no-repeat;
	font-weight: 700;
	font-stretch: 75%;
	font-size: var(--t-rotulo);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.esl-miga ol { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0; padding: 0; list-style: none; }
.esl-miga li + li::before { content: "/"; margin-right: 10px; }
/* El relleno agranda la zona de toque sin mover nada: es un enlace en línea. */
.esl-miga a { text-decoration: none; padding-block: 6px; }
.esl-miga a:hover { text-decoration: underline; }
.esl-regla__cuenta { white-space: nowrap; }
.esl-regla__cifras {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 18px;
	display: flex;
	overflow: hidden;
	white-space: nowrap;
	font-size: 10px;
	font-weight: 750;
	font-stretch: 70%;
	letter-spacing: 0.04em;
	line-height: 1;
	pointer-events: none;
}
.esl-regla[style*="--n"] { --mayor: calc(100% / var(--n)); --menor: calc(100% / var(--n) / 5); }
.esl-regla__cifras span { flex: 0 0 calc(100% / var(--n, 30)); padding-left: 4px; }
@media (max-width: 599px) {
	.esl-regla--densa .esl-regla__cifras span:nth-child(even) { visibility: hidden; }
}

/* ---------- Página: ventanas blancas sobre la mesa ---------- */
.esl-pagina { padding-block: var(--e-4) var(--e-5); }
.esl-pagina > .esl-contenedor > * + * { margin-top: var(--e-3); }

.esl-ventana {
	background: var(--blanco);
	color: var(--tinta);
	padding: var(--e-3) var(--e-2);
	max-width: 880px;
}
@media (min-width: 768px) { .esl-ventana { padding: var(--e-4); } }
.esl-ventana p,
.esl-ventana li {
	font-family: var(--lectura);
	font-size: var(--t-cuerpo);
	line-height: 1.6;
	max-width: var(--medida);
}
.esl-ventana p + p,
.esl-ventana p + ul,
.esl-ventana ul + p { margin-top: 0.9em; }
.esl-ventana ul { padding-left: 1.2em; }
.esl-ventana li + li { margin-top: 0.35em; }
.esl-ventana a { color: var(--tinta); text-decoration-color: var(--naranja); }
.esl-ventana a:hover { color: var(--naranja-hondo); }
.esl-ventana h3 {
	font-size: var(--t-titulo-libro);
	font-weight: 800;
	font-stretch: 75%;
	line-height: 1.15;
	margin-bottom: 0.4em;
}
.esl-ventana * + h3 { margin-top: 1.4em; }
.esl-ventana--entrada p:first-child { font-size: 1.25rem; }

/* Abre una sección: el rótulo naranja con su regla */
.esl-contenido > h2,
.esl-seccion__titulo {
	color: var(--naranja);
	font-size: var(--t-h2);
	font-weight: 800;
	font-stretch: 62%;
	line-height: 1;
	text-transform: uppercase;
	padding-top: var(--e-2);
	border-top: 1px solid var(--naranja);
	margin-top: var(--e-5) !important;
}
.esl-contenido > h2 + * { margin-top: var(--e-2) !important; }

/* ---------- Libro en su ventana ---------- */
.esl-libros {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--e-2);
	max-width: 880px;
}
.esl-libro {
	display: grid;
	grid-template-columns: 104px 1fr;
	gap: var(--e-2);
	background: var(--blanco);
	color: var(--tinta);
	padding: var(--e-2);
	scroll-margin-top: var(--e-3);
}
@media (min-width: 600px) {
	.esl-libro { grid-template-columns: 168px 1fr; padding: var(--e-3); gap: var(--e-3); }
}
.esl-libro__portada { position: relative; align-self: start; margin: 0; }
@media (min-width: 600px) { .esl-libro__portada { grid-row: 1 / span 2; } }
.esl-libro__portada img {
	width: 100%;
	height: auto;
	box-shadow: 0 6px 14px rgb(11 11 11 / 0.22);
}
.esl-libro__titulo {
	font-size: var(--t-titulo-libro);
	font-weight: 800;
	font-stretch: 75%;
	line-height: 1.12;
}
.esl-libro__titulo a { text-decoration: none; }
.esl-libro__titulo a:hover { text-decoration: underline; text-decoration-color: var(--naranja); }
.esl-libro__datos {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 0;
	margin-top: 6px;
	color: var(--sobre-blanco);
	font-weight: 650;
	font-stretch: 80%;
	font-size: var(--t-rotulo);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.esl-libro__datos a { padding-block: 4px; }
.esl-libro__datos span + span::before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 0.9em;
	margin: 0 9px;
	background: currentColor;
	vertical-align: -1px;
}
.esl-libro__texto { grid-column: 1 / -1; }
@media (min-width: 600px) { .esl-libro__texto { grid-column: 2; } }
.esl-libro__texto p {
	font-family: var(--lectura);
	font-size: 1.0625rem;
	line-height: 1.55;
	max-width: var(--medida);
}
.esl-libro__texto p + p { margin-top: 0.7em; }
.esl-libro__texto strong { font-family: var(--marco); font-weight: 800; font-stretch: 80%; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.9em; }
.esl-libro--destacado { outline: 4px solid var(--naranja); outline-offset: -4px; }
.esl-libro__n {
	position: absolute;
	top: -8px;
	left: -8px;
	z-index: 2;
	padding: 3px 7px;
	background: var(--tinta);
	color: var(--naranja);
	font-weight: 850;
	font-stretch: 70%;
	font-size: 0.875rem;
	letter-spacing: 0.04em;
}
.esl-libro .esl-aspa { display: none; }
.esl-libro.is-leido .esl-aspa { display: block; inset: 8% 6%; }
.esl-libro.is-leido .esl-libro__portada img { filter: grayscale(0.6) brightness(0.92); }

/* Tiendas: el lector decide dónde */
.esl-tiendas {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: var(--e-2) !important;
}
.esl-tiendas li { flex: 1 1 auto; min-width: 0; }
.esl-tiendas .esl-boton { width: 100%; padding-inline: 16px; }

/* ---------- Botones con taladros en los extremos ---------- */
.esl-boton {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 28px;
	border: 2px solid var(--tinta);
	background: var(--tinta);
	color: var(--blanco);
	font-family: var(--marco);
	font-weight: 800;
	font-stretch: 75%;
	font-size: var(--t-pequeno);
	letter-spacing: 0.08em;
	line-height: 1.1;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.18s var(--sale), color 0.18s var(--sale), border-color 0.18s var(--sale);
}
.esl-boton::before,
.esl-boton::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 4px;
	height: 20px;
	transform: translateY(-50%);
	background: radial-gradient(circle at 2px 2px, currentColor 1.6px, transparent 2px) 0 0 / 4px 8px repeat-y;
}
.esl-boton::before { left: 6px; }
.esl-boton::after { right: 6px; }
.esl-boton:hover { background: var(--naranja); border-color: var(--naranja); color: var(--tinta); }
.esl-boton--naranja { background: var(--naranja); border-color: var(--naranja); color: var(--tinta); }
.esl-boton--naranja:hover { background: var(--naranja-vivo); border-color: var(--naranja-vivo); }
.esl-boton--linea { background: transparent; border-color: var(--naranja); color: var(--blanco); }
.esl-boton--linea:hover { background: var(--naranja); color: var(--tinta); }
.esl-boton[disabled],
.esl-boton[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }

/* ---------- Marcas de estado: nunca color, siempre una marca ---------- */
.esl-cinta {
	position: absolute;
	left: -6px;
	right: -6px;
	bottom: 14%;
	padding: 5px 8px;
	background: var(--naranja) url("../img/grano.png");
	color: var(--tinta);
	font-family: var(--marco);
	font-weight: 850;
	font-stretch: 70%;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	line-height: 1.1;
	text-align: center;
	text-transform: uppercase;
	transform: rotate(-3deg);
	box-shadow: 0 2px 4px rgb(11 11 11 / 0.25);
}
.esl-cinta--sello { background: var(--tinta); color: var(--blanco); transform: rotate(2deg); top: 10%; bottom: auto; }
.esl-banderita {
	position: absolute;
	top: -36px;
	right: 10px;
	z-index: 2;
	display: block;
	width: 26px;
	height: 42px;
	background: linear-gradient(135deg, var(--naranja-hondo) 0 30%, var(--naranja) 30%);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%);
	transform-origin: top center;
}
.esl-aspa {
	position: absolute;
	inset: 12% 10%;
	color: var(--grasa);
	pointer-events: none;
	filter: drop-shadow(0 1px 1px rgb(11 11 11 / 0.6));
}
.esl-aspa svg { width: 100%; height: 100%; }

/* ---------- La tira: el orden de lectura como película ---------- */
.esl-tira { max-width: none; }
.esl-tira__cabeza {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--e-1) var(--e-2);
	margin-bottom: var(--e-2);
}
.esl-tira__titulo {
	color: var(--naranja);
	font-size: var(--t-h2);
	font-weight: 800;
	font-stretch: 62%;
	line-height: 1;
	text-transform: uppercase;
}
.esl-tira__estado {
	color: var(--sobre-negro);
	font-weight: 650;
	font-stretch: 80%;
	font-size: var(--t-pequeno);
	letter-spacing: 0.04em;
}
.esl-tira__estado b { color: var(--blanco); font-weight: 800; }
.esl-tira__comprar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	flex-basis: 100%;
}
.esl-tira__comprar-texto { color: var(--sobre-negro); font-weight: 750; font-stretch: 75%; font-size: var(--t-rotulo); letter-spacing: 0.1em; text-transform: uppercase; margin-right: 4px; }
.esl-tira__comprar .esl-boton { flex: 1 1 auto; min-height: 44px; padding: 0 16px; }
@media (max-width: 599px) {
	.esl-tira__comprar-texto { flex-basis: 100%; }
}
@media (min-width: 600px) {
	.esl-tira__comprar .esl-boton { flex: 0 0 auto; padding: 0 22px; }
}
.esl-tira__rollo {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	margin-inline: calc(var(--gutter) * -1);
	overscroll-behavior-x: contain;
}
.esl-tira__rail {
	display: flex;
	gap: 10px;
	width: max-content;
	min-width: 100%;
	margin: 0;
	padding: 52px var(--gutter) 30px;
}
.esl-fotograma {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 132px;
	scroll-snap-align: start;
	scroll-margin-left: var(--gutter);
}
@media (min-width: 768px) { .esl-fotograma { width: 156px; } }
.esl-fotograma__ventana {
	position: relative;
	display: block;
	padding: 6px;
	background: var(--blanco);
	outline: 0 solid var(--naranja);
	transition: outline-width 0.2s var(--sale);
}
.esl-fotograma__ventana img { width: 100%; aspect-ratio: 2 / 3; object-fit: contain; }
.esl-fotograma__n {
	position: absolute;
	top: -28px;
	left: 0;
	color: var(--sobre-negro);
	font-weight: 800;
	font-stretch: 70%;
	font-size: var(--t-pequeno);
	letter-spacing: 0.06em;
}
/* Títulos de dos letras (It): el relleno ensancha la zona de toque y el margen negativo lo compensa, sin mover nada. */
.esl-libro__titulo a,
.esl-cartel td a { padding-inline: 6px; margin-inline: -6px; }
.esl-fotograma__titulo {
	margin-top: 10px;
	font-weight: 700;
	font-stretch: 80%;
	font-size: var(--t-pequeno);
	line-height: 1.2;
}
.esl-fotograma__ano { color: var(--sobre-negro); font-size: var(--t-rotulo); font-weight: 600; letter-spacing: 0.06em; margin-top: 2px; }
.esl-fotograma__marca {
	margin-top: auto;
	padding-top: 10px;
}
.esl-fotograma__marca button {
	width: 100%;
	min-height: 44px;
	padding: 0 8px;
	border: 1px solid var(--bobina);
	background: transparent;
	color: var(--sobre-negro);
	font-weight: 700;
	font-stretch: 75%;
	font-size: var(--t-rotulo);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
}
.esl-fotograma__marca button:hover { border-color: var(--naranja); color: var(--blanco); }
.esl-fotograma__marca button[aria-pressed="true"] { border-color: var(--grasa); color: var(--blanco); }
.esl-fotograma .esl-aspa,
.esl-fotograma .esl-banderita { display: none; }
.esl-fotograma.is-leido .esl-aspa { display: block; }
.esl-fotograma.is-leido .esl-fotograma__ventana img { filter: grayscale(0.6) brightness(0.92); }
.esl-fotograma.is-siguiente .esl-fotograma__ventana { outline-width: 4px; }
.esl-fotograma.is-siguiente .esl-banderita { display: block; animation: esl-cae 0.45s var(--sale) both; }
.esl-fotograma.is-siguiente .esl-fotograma__n { color: var(--naranja); }
@keyframes esl-cae {
	from { transform: scaleY(0.2) rotate(-8deg); }
	to { transform: scaleY(1) rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
	.esl-fotograma.is-siguiente .esl-banderita { animation: none; }
}

/* Lo que queda fuera de la serie cuelga de alfileres */
.esl-colgados { margin-top: var(--e-3); }
.esl-colgados__titulo { color: var(--sobre-negro); font-weight: 750; font-stretch: 75%; font-size: var(--t-pequeno); letter-spacing: 0.08em; text-transform: uppercase; }
.esl-colgados__hilo {
	display: flex;
	flex-wrap: wrap;
	gap: 26px 14px;
	margin-top: var(--e-2) !important;
	padding-top: 12px;
	background: linear-gradient(var(--bobina), var(--bobina)) 0 17px / 100% 1px no-repeat;
}
.esl-colgado {
	position: relative;
	width: 96px;
	transform: rotate(var(--giro, -2deg));
	transform-origin: top center;
}
.esl-colgado:nth-child(2n) { --giro: 2.5deg; }
.esl-colgado:nth-child(3n) { --giro: -1deg; }
.esl-colgado::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 2;
	width: 12px;
	height: 12px;
	margin: -1px 0 0 -6px;
	border-radius: 50%;
	background: var(--naranja);
	box-shadow: 0 1px 2px rgb(0 0 0 / 0.6);
}
.esl-colgado img { padding: 4px; background: var(--blanco); width: 100%; aspect-ratio: 2 / 3; object-fit: contain; }
.esl-colgado p { margin-top: 6px; font-size: var(--t-rotulo); font-weight: 650; font-stretch: 80%; line-height: 1.25; color: var(--sobre-negro); }

/* ---------- Cartel: la lista completa en orden ---------- */
.esl-cartel { width: 100%; max-width: 880px; border-collapse: collapse; background: var(--blanco); color: var(--tinta); }
.esl-cartel caption { text-align: left; padding-bottom: var(--e-2); color: var(--naranja); font-weight: 800; font-stretch: 62%; font-size: var(--t-h2); line-height: 1; text-transform: uppercase; }
.esl-cartel th,
.esl-cartel td { padding: 12px var(--e-2); border-bottom: 1px solid #d9d2cb; text-align: left; vertical-align: top; }
.esl-cartel thead th {
	background: var(--tinta);
	color: var(--blanco);
	font-weight: 750;
	font-stretch: 75%;
	font-size: var(--t-rotulo);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-bottom: 0;
}
.esl-cartel td { font-family: var(--lectura); font-size: 1.0625rem; line-height: 1.35; }
.esl-cartel td.esl-cartel__n,
.esl-cartel td.esl-cartel__ano { font-family: var(--marco); font-weight: 800; font-stretch: 75%; white-space: nowrap; }
.esl-cartel td.esl-cartel__n { color: var(--naranja-hondo); width: 3.5em; }
.esl-cartel td a { padding-block: 12px; }
.esl-cartel small { display: block; font-family: var(--marco); font-size: var(--t-rotulo); letter-spacing: 0.06em; text-transform: uppercase; color: var(--sobre-blanco); margin-top: 3px; }
.esl-cartel tr.is-leido td:not(.esl-cartel__n) { text-decoration: line-through; text-decoration-color: var(--naranja); text-decoration-thickness: 2px; }
.esl-cartel tr.is-siguiente { background: #fff1e8; }
/* El siguiente se marca, no solo se colorea: número en tinta y la banderita al lado. */
.esl-cartel tr.is-siguiente td.esl-cartel__n { color: var(--tinta); }
.esl-cartel tr.is-siguiente td.esl-cartel__n::after {
	content: "";
	display: inline-block;
	width: 11px;
	height: 16px;
	margin-left: 6px;
	vertical-align: -2px;
	background: linear-gradient(135deg, var(--naranja-hondo) 0 30%, var(--naranja) 30%);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%);
}
@media (max-width: 599px) {
	.esl-cartel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	.esl-cartel tr { display: grid; grid-template-columns: 3em 1fr auto; border-bottom: 1px solid #d9d2cb; }
	.esl-cartel td { border: 0; padding: 12px 8px; }
	.esl-cartel td.esl-cartel__n { padding-left: var(--e-2); }
}

/* ---------- Preguntas ---------- */
.esl-preguntas { max-width: 880px; }

/* ---------- Aviso de afiliado y pie ---------- */
.esl-aviso {
	max-width: 880px;
	margin-top: var(--e-5) !important;
	padding-top: var(--e-2);
	border-top: 1px solid var(--bobina);
	color: var(--sobre-negro);
	font-family: var(--lectura);
	font-size: var(--t-pequeno);
	line-height: 1.55;
}
.esl-aviso strong { font-family: var(--marco); color: var(--blanco); font-weight: 800; font-stretch: 75%; letter-spacing: 0.06em; text-transform: uppercase; }
.esl-aviso a { color: var(--blanco); text-decoration-color: var(--naranja); }

.esl-pie { margin-top: var(--e-5); }
.esl-pie__rail { height: 30px; }
.esl-pie__cuerpo { padding-block: var(--e-4); display: grid; gap: var(--e-3); }
@media (min-width: 768px) { .esl-pie__cuerpo { grid-template-columns: 1.4fr 1fr 1fr; } }
.esl-pie__texto { color: var(--sobre-negro); font-family: var(--lectura); font-size: var(--t-pequeno); max-width: 42ch; margin-top: var(--e-2); }
.esl-pie__titulo { color: var(--naranja); font-weight: 800; font-stretch: 70%; font-size: var(--t-pequeno); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: var(--e-1); }
.esl-pie ul a { display: inline-flex; min-height: 44px; align-items: center; color: var(--blanco); text-decoration: none; font-weight: 600; font-stretch: 85%; }
.esl-pie ul a:hover { color: var(--naranja-vivo); text-decoration: underline; }
.esl-pie__legal { border-top: 1px solid var(--bobina); padding-block: var(--e-2); color: var(--sobre-negro); font-size: var(--t-rotulo); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; }

/* ---------- Fotogramas que llevan a otras páginas (portada y páginas índice) ---------- */
.esl-enlaces {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
}
.esl-enlace {
	position: relative;
	display: flex;
	flex-direction: column;
	padding-bottom: var(--e-2);
	background: var(--tinta);
	border: 1px solid var(--bobina);
	transition: border-color 0.2s var(--sale);
}
.esl-enlace:hover,
.esl-enlace:focus-within { border-color: var(--naranja); }
.esl-enlace__portadas { display: flex; gap: 8px; padding: 26px var(--e-2) 22px; }
.esl-enlace__portadas img { width: 30%; max-width: 88px; aspect-ratio: 2 / 3; object-fit: contain; padding: 3px; background: var(--blanco); }
.esl-enlace__titulo {
	margin-top: var(--e-2);
	padding-inline: var(--e-2);
	font-size: 1.625rem;
	font-weight: 800;
	font-stretch: 62%;
	line-height: 1;
	text-transform: uppercase;
}
.esl-enlace__titulo a { color: var(--blanco); text-decoration: none; }
.esl-enlace__titulo a::after { content: ""; position: absolute; inset: 0; }
.esl-enlace:hover .esl-enlace__titulo a { color: var(--naranja-vivo); }
.esl-enlace__resumen { padding: 8px var(--e-2) 0; color: var(--sobre-negro); font-family: var(--lectura); font-size: var(--t-pequeno); line-height: 1.45; }
.esl-enlace__cuenta { margin-top: auto; padding: 12px var(--e-2) 0; color: var(--naranja); font-weight: 750; font-stretch: 75%; font-size: var(--t-rotulo); letter-spacing: 0.1em; text-transform: uppercase; }
@media (min-width: 900px) {
	.esl-enlaces--destaca .esl-enlace:first-child { grid-column: span 2; }
	.esl-enlaces--destaca .esl-enlace:first-child .esl-enlace__titulo { font-size: 2.25rem; }
}

/* ---------- Acertijos: cada caso en su ventana, con el plano grande ---------- */
.esl-acertijos { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-3); max-width: 880px; }
.esl-acertijo { background: var(--blanco); color: var(--tinta); padding: var(--e-3) var(--e-2); }
@media (min-width: 768px) { .esl-acertijo { padding: var(--e-4); } }
.esl-acertijo h3 { font-size: 1.75rem; font-weight: 850; font-stretch: 62%; line-height: 1; text-transform: uppercase; }
.esl-acertijo__nivel { margin-top: 6px; color: var(--naranja-hondo); font-weight: 750; font-stretch: 78%; font-size: var(--t-rotulo); letter-spacing: 0.1em; text-transform: uppercase; }
.esl-acertijo > p:not(.esl-acertijo__nivel),
.esl-acertijo li,
.esl-acertijo details p { font-family: var(--lectura); font-size: 1.0625rem; line-height: 1.55; max-width: var(--medida); }
.esl-acertijo > p:not(.esl-acertijo__nivel) { margin-top: var(--e-2); }
.esl-acertijo__plano { margin: var(--e-3) 0 0; max-width: 560px; }
.esl-acertijo__plano svg { width: 100%; height: auto; }
.esl-acertijo__leyenda { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: var(--e-2) !important; font-size: 0.9375rem !important; }
.esl-acertijo__leyenda li { font-size: 0.9375rem; }
.esl-acertijo__pistas { margin-top: var(--e-3); padding-left: 1.4em; }
.esl-acertijo__pistas li + li { margin-top: 0.4em; }
.esl-acertijo details { margin-top: var(--e-2); border-top: 1px solid #d9d2cb; padding-top: var(--e-2); }
.esl-acertijo summary {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--tinta);
	font-weight: 750;
	font-stretch: 78%;
	font-size: var(--t-rotulo);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	list-style: none;
}
.esl-acertijo summary::-webkit-details-marker { display: none; }
.esl-acertijo summary:hover,
.esl-acertijo details[open] > summary { background: var(--tinta); color: var(--blanco); }
.esl-acertijo details > :not(summary) { margin-top: var(--e-2); }
.esl-reglas h3 { font-size: 1.5rem; font-weight: 850; font-stretch: 65%; text-transform: uppercase; }
.esl-reglas ul { margin-top: var(--e-2); }
.esl-libro--imprimible .esl-libro__portada img { box-shadow: 0 2px 8px rgb(11 11 11 / 0.18); border: 1px solid #e3ddd6; }

/* ---------- Buscador ---------- */
.esl-cabecera__acciones { display: flex; align-items: center; gap: var(--e-3); }
.esl-cuenta-enlace .esl-lupa { width: 17px; height: 17px; margin-right: 7px; flex: none; }
.esl-cuenta-enlace { white-space: nowrap; }
@media (max-width: 439px) {
	.esl-cabecera__acciones { gap: var(--e-2); }
	.esl-cabecera__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	.esl-cuenta-enlace .esl-lupa { width: 22px; height: 22px; margin-right: 0; }
	.esl-cuenta-enlace { min-width: 44px; justify-content: center; }
}
.esl-busca { background: var(--carbon); border-top: 1px solid var(--bobina); }
.esl-busca[hidden] { display: none; }
.esl-busca__fila { display: flex; gap: 8px; padding-block: 12px; }
.esl-busca input[type="search"] {
	flex: 1;
	min-width: 0;
	min-height: 46px;
	padding: 0 14px;
	border: 2px solid var(--blanco);
	border-radius: 0;
	background: var(--blanco);
	color: var(--tinta);
	font-family: var(--lectura);
	font-size: 1.0625rem;
}
.esl-busca input[type="search"]:focus-visible { outline: 3px solid var(--naranja); outline-offset: 0; }
.esl-busca-grande { max-width: 880px; }
.esl-busca-grande input[type="search"] { font-size: 1.125rem; }