/*
Theme Name: New Aleph Press
Description: Tema editorial bilingüe para New Aleph Press. Minimalismo editorial, marfil y negro suave, serif literaria para los títulos y sans limpia para navegación y metadatos. Las portadas son las protagonistas. Funciona junto al plugin New Aleph Core: catálogo, colecciones, autores, Periscopio, envíos y newsletter.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
Author: New Aleph Press
License: GPL-2.0-or-later
Text Domain: new-aleph
*/

/* =====================================================================
 * 1. Fichas del sistema
 *
 * Cuatro colores y nada más: papel, tinta, gris editorial y un acento de
 * vino. El navy y el dorado del logotipo se reservan para dos momentos
 * concretos (marca y donación). Lo premium sale de la proporción y del
 * ritmo, no de añadir color.
 * ================================================================== */

:root {
	/* Color */
	--papel: #f5f2ec;
	--papel-2: #ebe6dc;
	--papel-3: #ffffff;
	--tinta: #14140f;
	--tinta-2: #4a4842;
	--tinta-3: #8a877e;
	--acento: #6e1f2b;
	--navy: #16293e;
	--oro: #e9bf66;

	--linea: rgba(20, 20, 15, 0.11);
	--linea-2: rgba(20, 20, 15, 0.22);

	/* Tipografía */
	--display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
	--texto: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/*
	 * Escala fluida. Cada tamaño interpola entre 320px y 1600px de ancho,
	 * así que no hay saltos bruscos al cambiar de pantalla.
	 */
	--t-display: clamp(2.85rem, 1.55rem + 6.1vw, 7rem);
	--t-1: clamp(2.1rem, 1.45rem + 3vw, 4rem);
	--t-2: clamp(1.55rem, 1.28rem + 1.3vw, 2.4rem);
	--t-3: clamp(1.12rem, 1.05rem + 0.35vw, 1.35rem);
	--t-4: clamp(1rem, 0.97rem + 0.15vw, 1.08rem);
	--t-cuerpo: clamp(1rem, 0.975rem + 0.12vw, 1.0625rem);
	--t-menor: 0.8125rem;
	--t-micro: 0.6875rem;

	/* Rasgos tipográficos recurrentes */
	--track-display: -0.022em;
	--track-titulo: -0.014em;
	--track-micro: 0.16em;

	/* Ritmo. Un solo sitio donde tocar la respiración del sitio. */
	--e1: 0.25rem;
	--e2: 0.5rem;
	--e3: 0.75rem;
	--e4: 1rem;
	--e5: 1.5rem;
	--e6: 2.25rem;
	--e7: 3.5rem;
	--e8: clamp(4rem, 2.5rem + 6vw, 8rem);
	--e9: clamp(5.5rem, 3rem + 10vw, 12rem);

	--margen: clamp(1.25rem, 0.6rem + 3.2vw, 4.5rem);
	--ancho: 1440px;
	--ancho-texto: 62ch;
	--alto-cabecera: 78px;

	/* Movimiento contenido: pocas curvas, siempre las mismas. */
	--sale: cubic-bezier(0.16, 1, 0.3, 1);
	--entra: cubic-bezier(0.65, 0, 0.35, 1);
	--d1: 220ms;
	--d2: 420ms;
	--d3: 720ms;

	/* Tokens que consume el plugin */
	--ec-color: var(--acento);
	--ec-radio: 0px;
	--ec-borde: var(--linea);
	--ec-suave: rgba(20, 20, 15, 0.045);
}

/* =====================================================================
 * 2. Reinicio
 * ================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--alto-cabecera) + var(--e5));
}

body {
	margin: 0;
	background: var(--papel);
	color: var(--tinta);
	font-family: var(--texto);
	font-size: var(--t-cuerpo);
	font-weight: 350;
	line-height: 1.7;
	font-feature-settings: "kern" 1, "liga" 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img,
picture,
svg,
video {
	display: block;
	max-width: 100%;
}

img,
video {
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

button,
input,
textarea,
select {
	font: inherit;
	color: inherit;
}

/* Foco visible y con la voz del sitio, no el azul del navegador. */
:focus-visible {
	outline: 2px solid var(--acento);
	outline-offset: 4px;
	border-radius: 1px;
}

.saltar {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	padding: var(--e3) var(--e5);
	background: var(--tinta);
	color: var(--papel);
	font-size: var(--t-menor);
}

.saltar:focus {
	left: var(--e4);
	top: var(--e4);
}

/* =====================================================================
 * 3. Tipografía
 *
 * Los titulares llevan tracking negativo y altura de línea corta: a tamaño
 * grande, una serif necesita cerrarse para no parecer suelta. Los metadatos
 * hacen lo contrario, versalitas muy abiertas. Ese contraste es la voz.
 * ================================================================== */

h1,
h2,
h3,
h4 {
	margin: 0 0 0.4em;
	font-family: var(--display);
	font-weight: 400;
	font-optical-sizing: auto;
	letter-spacing: var(--track-titulo);
	line-height: 1.06;
	text-wrap: balance;
}

h1 {
	font-size: var(--t-1);
	letter-spacing: var(--track-display);
}

h2 {
	font-size: var(--t-2);
}

h3 {
	font-size: var(--t-3);
	line-height: 1.2;
}

h4 {
	font-size: var(--t-4);
	line-height: 1.3;
}

em,
.italica {
	font-style: italic;
}

p {
	margin: 0 0 1.15em;
	text-wrap: pretty;
}

/* Antetítulo: la pieza de metadatos que ordena todo el sitio. */
.kicker {
	display: block;
	margin: 0 0 var(--e5);
	color: var(--acento);
	font-family: var(--texto);
	font-size: var(--t-micro);
	font-weight: 600;
	letter-spacing: var(--track-micro);
	line-height: 1;
	text-transform: uppercase;
}

.entradilla {
	max-width: 34ch;
	color: var(--tinta-2);
	font-family: var(--display);
	font-size: clamp(1.1rem, 1rem + 0.7vw, 1.5rem);
	font-style: italic;
	font-weight: 300;
	line-height: 1.42;
	letter-spacing: -0.005em;
}

.sumario {
	max-width: 52ch;
	color: var(--tinta-2);
	font-size: var(--t-menor);
	line-height: 1.75;
}

/* =====================================================================
 * 4. Estructura y ritmo
 * ================================================================== */

.contenedor {
	width: 100%;
	max-width: var(--ancho);
	margin-inline: auto;
	padding-inline: var(--margen);
}

.contenedor--estrecho {
	max-width: 880px;
}

.seccion {
	padding-block: var(--e9);
}

.seccion--linea {
	border-top: 1px solid var(--linea);
}

/*
 * Cabecera de sección con el número al margen. Es un gesto de revista:
 * la numeración vive fuera de la columna de texto y ancla la lectura.
 */
.seccion__cabecera {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr);
	gap: var(--e5);
	align-items: start;
	margin-bottom: var(--e8);
}

.seccion__num {
	padding-top: 0.65em;
	color: var(--tinta-3);
	font-size: var(--t-micro);
	font-weight: 600;
	letter-spacing: var(--track-micro);
	text-transform: uppercase;
	white-space: nowrap;
}

.seccion__titulo {
	max-width: 20ch;
	margin: 0;
	font-size: var(--t-2);
}

.seccion__pie {
	margin-top: var(--e7);
}

/* =====================================================================
 * 5. Cabecera y navegación
 * ================================================================== */

.cabecera {
	position: sticky;
	top: 0;
	z-index: 100;
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: background var(--d2) var(--sale), border-color var(--d2) var(--sale);
}

.cabecera.is-solida {
	background: color-mix(in srgb, var(--papel) 86%, transparent);
	border-bottom-color: var(--linea);
	backdrop-filter: saturate(1.5) blur(14px);
	-webkit-backdrop-filter: saturate(1.5) blur(14px);
}

.cabecera__barra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e5);
	min-height: var(--alto-cabecera);
}

.marca {
	display: inline-flex;
	align-items: baseline;
	gap: 0.5rem;
	white-space: nowrap;
}

.marca__nombre {
	font-family: var(--display);
	font-size: 1.3rem;
	font-weight: 400;
	letter-spacing: -0.005em;
}

.marca__sello {
	font-family: var(--texto);
	font-size: 0.58rem;
	font-weight: 600;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--tinta-3);
	transition: color var(--d1) var(--sale);
}

.marca:hover .marca__sello {
	color: var(--acento);
}

.nav {
	display: flex;
	align-items: center;
	/*
	 * Los huecos se estrechan solos según el ancho. La navegación completa
	 * tiene que sobrevivir en portátiles normales: primero se aprieta, y solo
	 * cuando de verdad no cabe se pasa al menú de móvil.
	 */
	gap: clamp(0.7rem, -0.55rem + 2vw, 1.9rem);
}

.nav a,
.panel-boton {
	position: relative;
	padding-block: 0.4rem;
	font-size: var(--t-menor);
	letter-spacing: 0.01em;
	color: var(--tinta-2);
	transition: color var(--d1) var(--sale);
}

.nav a:hover,
.panel-boton:hover,
.nav a[aria-current="page"] {
	color: var(--tinta);
}

/*
 * Subrayado que se dibuja de izquierda a derecha y se retira por el mismo
 * lado. Es el gesto de enlace del sitio: se repite en nav, pie y flechas,
 * y no aparece ninguna otra animación de enlace.
 */
.nav a::after,
.panel-boton::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform var(--d2) var(--sale);
}

.nav a:hover::after,
.panel-boton:hover::after,
.panel-boton[aria-expanded="true"]::after,
.nav a[aria-current="page"]::after {
	transform: scaleX(1);
	transform-origin: left center;
}

.cabecera__extra {
	display: flex;
	align-items: center;
	gap: var(--e4);
}

/* Botón de menú: dos trazos que se cruzan, sin caja ni relleno. */
.menu-boton {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.menu-boton span {
	display: block;
	width: 24px;
	height: 1px;
	margin: 6px auto;
	background: var(--tinta);
	transition: transform var(--d2) var(--sale), opacity var(--d1) linear;
}

.menu-boton[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.menu-boton[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.menu-boton[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* --------------------------------------------- Mega-menú de colecciones */

.tiene-panel {
	position: relative;
}

.panel-boton {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	border: 0;
	background: none;
	cursor: pointer;
}

.panel-boton__flecha {
	display: inline-block;
	width: 0.42rem;
	height: 0.42rem;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg) translate(-1px, -2px);
	transition: transform var(--d2) var(--sale);
}

.panel-boton[aria-expanded="true"] .panel-boton__flecha {
	transform: rotate(-135deg) translate(-1px, -1px);
}

/*
 * Panel de Libros. Tres columnas con pesos distintos: el catálogo completo
 * manda, las categorías son una lista de texto y los sellos ocupan la
 * columna ancha porque son los destinos editoriales.
 */
.panel-libros {
	position: absolute;
	top: calc(100% + var(--e4));
	left: 50%;
	z-index: 110;
	width: min(94vw, 1040px);
	padding: var(--e7);
	background: var(--papel-3);
	border: 1px solid var(--linea);
	box-shadow: 0 40px 80px -50px rgba(20, 20, 15, 0.5);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, -8px);
	transition: opacity var(--d2) var(--sale), transform var(--d2) var(--sale), visibility var(--d2);
}

.panel-libros.is-abierto {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

.panel-libros__rejilla {
	display: grid;
	grid-template-columns: 1fr 1fr 1.5fr;
	gap: var(--e7);
	align-items: start;
}

.panel-col__titulo {
	margin: 0 0 var(--e5);
	padding-bottom: var(--e3);
	border-bottom: 1px solid var(--linea);
	color: var(--tinta-3);
	font-size: var(--t-micro);
	font-weight: 600;
	letter-spacing: var(--track-micro);
	text-transform: uppercase;
}

.panel-col__desc {
	max-width: 30ch;
	margin: 0 0 var(--e5);
	color: var(--tinta-2);
	font-size: var(--t-menor);
	line-height: 1.65;
}

/* Categorías: enlaces de texto finos, nunca tarjetas ni botones. */
.panel-lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.panel-lista li {
	margin-bottom: var(--e3);
}

.panel-lista a {
	position: relative;
	display: inline-block;
	padding-bottom: 2px;
	color: var(--tinta-2);
	font-size: var(--t-menor);
	transition: color var(--d1) var(--sale);
}

.panel-lista a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform var(--d2) var(--sale);
}

.panel-lista a:hover {
	color: var(--tinta);
}

.panel-lista a:hover::after {
	transform: scaleX(1);
	transform-origin: left center;
}

/* Sellos: cada uno con su filete de color. */
.panel-sello {
	padding-top: var(--e4);
	border-top: 2px solid var(--ec-color, var(--tinta));
}

.panel-sello + .panel-sello {
	margin-top: var(--e5);
}

.panel-sello__nombre {
	display: inline-block;
	margin-bottom: var(--e2);
	font-family: var(--display);
	font-size: 1.1rem;
	letter-spacing: var(--track-titulo);
	transition: transform var(--d2) var(--sale);
}

.panel-sello__nombre:hover {
	transform: translateX(3px);
}

/*
 * Rótulo y lista de las colecciones internas. Van en un nivel visual
 * claramente menor —más pequeñas, sangradas y con un filete lateral— para
 * que se lean como parte de New Aleph y no como seis sellos más.
 */
.panel-sello__rotulo {
	margin: var(--e3) 0 var(--e2);
	color: var(--tinta-3);
	font-size: var(--t-micro);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.panel-lista--internas {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 var(--e4);
	padding-left: var(--e4);
	border-left: 1px solid var(--linea);
}

.panel-lista--internas li {
	margin-bottom: var(--e2);
}

.panel-lista--internas a {
	font-size: 0.78rem;
}

/* Books: enlace al catálogo y botón del panel, uno al lado del otro. */
.panel-enlace {
	position: relative;
	padding-block: 0.4rem;
	font-size: var(--t-menor);
	color: var(--tinta-2);
	transition: color var(--d1) var(--sale);
}

.panel-enlace:hover,
.tiene-panel:hover .panel-enlace {
	color: var(--tinta);
}

/*
 * Desplegable compacto: dos destinos con su descripción. Hereda la piel del
 * panel grande pero en una sola columna estrecha.
 */
.panel-libros--compacto {
	width: min(92vw, 340px);
	padding: var(--e5);
}

.panel-item {
	display: block;
	padding: var(--e3) var(--e3);
	transition: background var(--d1) var(--sale);
}

.panel-item + .panel-item {
	border-top: 1px solid var(--linea);
}

.panel-item:hover {
	background: var(--papel);
}

.panel-item__nombre {
	display: block;
	margin-bottom: var(--e1);
	font-family: var(--display);
	font-size: 1rem;
	letter-spacing: var(--track-titulo);
}

.panel-item__desc {
	display: block;
	color: var(--tinta-2);
	font-size: 0.78rem;
	line-height: 1.55;
}

/* Apoya: algo más de presencia que el resto, sin gritar. */
.nav a.nav__apoya {
	padding: 0.42rem 0.95rem;
	border: 1px solid color-mix(in srgb, var(--oro) 75%, var(--tinta));
	border-radius: 999px;
	/*
	 * El dorado del logotipo, oscurecido un punto para que el texto pase el
	 * contraste sobre crema. Es uno de los dos únicos acentos de color del
	 * sitio, reservado para la misión.
	 */
	color: color-mix(in srgb, var(--oro) 45%, var(--tinta));
	font-weight: 500;
	transition: border-color var(--d2) var(--sale), background var(--d2) var(--sale), color var(--d2) var(--sale);
}

.nav a.nav__apoya::after {
	display: none;
}

.nav a.nav__apoya:hover,
.nav a.nav__apoya:focus-visible {
	border-color: var(--oro);
	background: var(--oro);
	color: var(--navy);
}

/* =====================================================================
 * 6. Portada
 * ================================================================== */

.hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(28rem, 76vh, 46rem);
	padding-block: var(--e9) var(--e8);
	overflow: hidden;
}

/*
 * El fondo es un degradado muy tenue, no una imagen. Deja el titular como
 * único elemento con peso y evita cargar una foto en la primera pantalla.
 */
.hero__fondo {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(58% 52% at 76% 16%, rgba(110, 31, 43, 0.07), transparent 68%),
		radial-gradient(46% 46% at 10% 88%, rgba(22, 41, 62, 0.06), transparent 70%),
		linear-gradient(178deg, var(--papel) 0%, var(--papel-2) 100%);
}

.hero__contenido {
	width: 100%;
}

.hero__titulo {
	max-width: 13ch;
	margin-bottom: var(--e5);
	font-size: var(--t-display);
	letter-spacing: var(--track-display);
	line-height: 0.98;
}

.hero__sub {
	max-width: 32ch;
}

.hero__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e3);
	margin-top: var(--e7);
}

/* Cinta de colecciones entre secciones. */
.cinta {
	overflow: hidden;
	padding-block: var(--e4);
	border-block: 1px solid var(--linea);
	white-space: nowrap;
	user-select: none;
}

.cinta__pista {
	display: inline-flex;
	gap: var(--e7);
	animation: deslizar 52s linear infinite;
	will-change: transform;
}

.cinta__item {
	font-family: var(--display);
	font-size: 0.95rem;
	font-style: italic;
	color: var(--tinta-3);
}

.cinta__item::after {
	content: "·";
	margin-left: var(--e7);
	color: var(--acento);
}

@keyframes deslizar {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* --------------------------------------------------- Slider destacados */

.slider {
	padding-block: var(--e8);
	border-bottom: 1px solid var(--linea);
}

.slider__pista {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	margin: 0;
	padding: 0;
	list-style: none;
	scrollbar-width: none;
}

.slider__pista::-webkit-scrollbar {
	display: none;
}

.slider__slide {
	flex: 0 0 100%;
	scroll-snap-align: center;
	display: grid;
	grid-template-columns: minmax(0, 0.55fr) minmax(0, 1fr);
	gap: clamp(2rem, 1rem + 5vw, 6rem);
	align-items: center;
}

.slider__portada {
	position: relative;
	aspect-ratio: 2 / 3;
	max-width: 320px;
	margin-inline: auto;
	background: var(--papel-2);
	box-shadow:
		0 1px 1px rgba(20, 20, 15, 0.1),
		0 40px 60px -34px rgba(20, 20, 15, 0.55);
}

.slider__portada img,
.slider__portada svg {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.slider__titulo {
	margin: var(--e2) 0 var(--e3);
	font-size: var(--t-1);
}

.slider__autor {
	margin: 0;
	color: var(--tinta-2);
	font-family: var(--display);
	font-size: 1.05rem;
	font-style: italic;
}

.slider__frase {
	max-width: 40ch;
	margin-top: var(--e4);
}

.slider__controles {
	display: flex;
	align-items: center;
	gap: var(--e4);
	margin-top: var(--e7);
}

.slider__flecha {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid var(--linea-2);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	transition: background var(--d2) var(--sale), color var(--d2) var(--sale), border-color var(--d2) var(--sale);
}

.slider__flecha:hover:not(:disabled) {
	background: var(--tinta);
	border-color: var(--tinta);
	color: var(--papel);
}

.slider__flecha:disabled {
	opacity: 0.25;
	cursor: default;
}

.slider__pausa {
	min-height: 44px;
	padding: 0.45rem 1rem;
	border: 1px solid var(--linea);
	border-radius: 999px;
	background: transparent;
	color: var(--tinta-3);
	font-size: var(--t-micro);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color var(--d1) var(--sale), border-color var(--d1) var(--sale);
}

.slider__pausa:hover {
	color: var(--tinta);
	border-color: var(--linea-2);
}

.slider__puntos {
	display: flex;
	gap: var(--e2);
	margin-left: auto;
}

/*
 * El indicador es un trazo de dos píxeles, pero la zona que responde al dedo
 * mide 44. El pseudoelemento agranda el área sensible sin engordar el trazo.
 */
.slider__punto {
	position: relative;
	width: 2.25rem;
	height: 2px;
	padding: 0;
	border: 0;
	background: var(--linea-2);
	cursor: pointer;
	transition: background var(--d2) var(--sale);
}

.slider__punto::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 44px;
	transform: translateY(-50%);
}

.slider__punto:hover {
	background: var(--tinta-2);
}

.slider__punto[aria-current="true"] {
	background: var(--acento);
}

/* =====================================================================
 * 7. Botones y enlaces
 * ================================================================== */

/*
 * El relleno del botón sube desde abajo en el hover. Es un gesto distinto
 * al de los enlaces (línea lateral) para que se distingan sin leerlos.
 */
.boton,
.ec-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--e2);
	min-height: 46px;
	margin-top: var(--e4);
	padding: 0.85rem 1.8rem;
	border: 1px solid var(--tinta);
	border-radius: 0;
	background: transparent;
	color: var(--tinta);
	font-family: var(--texto);
	font-size: var(--t-menor);
	font-weight: 500;
	letter-spacing: 0.04em;
	cursor: pointer;
	overflow: hidden;
	isolation: isolate;
	transition: color var(--d2) var(--sale), border-color var(--d2) var(--sale);
}

.boton::before,
.ec-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--tinta);
	transform: scaleY(1);
	transform-origin: bottom center;
	transition: transform var(--d2) var(--sale);
}

.boton,
.ec-btn {
	color: var(--papel);
}

.boton:hover,
.boton:focus-visible,
.ec-btn:hover,
.ec-btn:focus-visible {
	color: var(--tinta);
}

.boton:hover::before,
.boton:focus-visible::before,
.ec-btn:hover::before,
.ec-btn:focus-visible::before {
	transform: scaleY(0);
}

.boton:active,
.ec-btn:active {
	transform: translateY(1px);
}

/* Variante de contorno: parte vacía y se rellena. */
.boton--linea,
.ec-btn--ghost {
	color: var(--tinta);
}

.boton--linea::before,
.ec-btn--ghost::before {
	transform: scaleY(0);
}

.boton--linea:hover,
.boton--linea:focus-visible,
.ec-btn--ghost:hover,
.ec-btn--ghost:focus-visible {
	color: var(--papel);
}

.boton--linea:hover::before,
.boton--linea:focus-visible::before,
.ec-btn--ghost:hover::before,
.ec-btn--ghost:focus-visible::before {
	transform: scaleY(1);
}

.boton--grande,
.ec-btn--grande {
	min-height: 54px;
	padding: 1rem 2.2rem;
	font-size: var(--t-4);
}

.boton--pequeno {
	min-height: 38px;
	margin-top: 0;
	padding: 0.5rem 1.05rem;
	font-size: var(--t-micro);
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

/* Donación: el único uso del dorado como relleno en todo el sitio. */
.boton--donar {
	border-color: var(--oro);
	color: var(--navy);
}

.boton--donar::before {
	background: var(--oro);
}

.boton--donar:hover,
.boton--donar:focus-visible {
	border-color: var(--navy);
	color: var(--navy);
}

.boton--donar:hover::before,
.boton--donar:focus-visible::before {
	transform: scaleY(1);
	background: color-mix(in srgb, var(--oro) 65%, var(--papel));
}

/* Enlace con flecha: la flecha avanza, la línea se dibuja. */
.enlace-flecha {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--e2);
	padding-bottom: var(--e1);
	font-size: var(--t-menor);
	letter-spacing: 0.03em;
	color: var(--tinta);
}

.enlace-flecha::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--linea-2);
	transform-origin: left center;
	transition: background var(--d2) var(--sale);
}

.enlace-flecha span {
	display: inline-block;
	transition: transform var(--d2) var(--sale);
}

.enlace-flecha:hover {
	color: var(--acento);
}

.enlace-flecha:hover::after {
	background: var(--acento);
}

.enlace-flecha:hover span {
	transform: translateX(5px);
}

/* =====================================================================
 * 8. Rejillas del catálogo
 *
 * Columnas explícitas por tramo en vez de auto-fill: así se controla
 * exactamente cuántas portadas hay en cada pantalla y no aparecen filas
 * huérfanas ni portadas gigantes.
 * ================================================================== */

.ec-grid {
	display: grid;
	gap: var(--e6) var(--e5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ec-grid--libros,
.ec-grid--autores {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ec-grid--novedades,
.ec-grid--albums,
.ec-grid--convocatorias,
.ec-grid--servicios {
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 600px) {
	.ec-grid--libros { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ec-grid--autores { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ec-grid--novedades,
	.ec-grid--convocatorias,
	.ec-grid--servicios,
	.ec-grid--albums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
	.ec-grid--libros { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.ec-grid--autores { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.ec-grid--novedades,
	.ec-grid--servicios,
	.ec-grid--albums { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
	.ec-grid--libros { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--e7) var(--e6); }
	.ec-grid--autores { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* =====================================================================
 * 9. Fichas
 * ================================================================== */

.ec-card {
	position: relative;
	margin: 0;
	min-width: 0;
}

.ec-card__link {
	display: block;
	color: inherit;
}

/* ------------------------------------------------------ Libro */

/*
 * La portada se apoya en dos sombras: una pegada, que da el canto, y otra
 * muy abierta y suave, que da el aire. Al pasar el cursor el libro se
 * levanta unos milímetros y la sombra se abre. Nada de escalar la imagen.
 */
.ec-card--libro .ec-card__portada {
	position: relative;
	display: block;
	aspect-ratio: 2 / 3;
	background: var(--papel-2);
	box-shadow:
		0 1px 1px rgba(20, 20, 15, 0.12),
		0 18px 30px -22px rgba(20, 20, 15, 0.5);
	transition: transform var(--d3) var(--sale), box-shadow var(--d3) var(--sale);
}

.ec-card--libro .ec-card__portada img,
.ec-card--libro .ec-card__portada svg {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Filo de las páginas, insinuado con una línea a la izquierda. */
.ec-card--libro .ec-card__portada::after {
	content: "";
	position: absolute;
	inset-block: 0;
	left: 0;
	width: 4px;
	background: linear-gradient(90deg, rgba(20, 20, 15, 0.2), transparent);
	pointer-events: none;
}

.ec-card--libro .ec-card__link:hover .ec-card__portada {
	transform: translateY(-7px);
	box-shadow:
		0 1px 1px rgba(20, 20, 15, 0.14),
		0 40px 55px -30px rgba(20, 20, 15, 0.55);
}

.ec-card__portada--vacia {
	display: grid;
	place-items: center;
	color: var(--tinta-3);
	font-family: var(--display);
	font-size: 1.6rem;
}

.ec-card__body {
	display: block;
	padding-top: var(--e4);
}

.ec-card__coleccion {
	display: inline-block;
	margin-bottom: var(--e2);
	color: var(--ec-color, var(--acento));
	font-size: var(--t-micro);
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.ec-card__titulo {
	position: relative;
	display: inline;
	margin: 0;
	font-family: var(--display);
	font-size: var(--t-3);
	font-weight: 400;
	line-height: 1.22;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 1px;
	transition: background-size var(--d3) var(--sale);
}

/* El subrayado del título se dibuja al pasar por la ficha entera. */
.ec-card__link:hover .ec-card__titulo {
	background-size: 100% 1px;
}

.ec-card__autor {
	display: block;
	margin-top: var(--e2);
	color: var(--tinta-2);
	font-family: var(--display);
	font-size: 0.92rem;
	font-style: italic;
}

.ec-card__fecha,
.ec-card__pais {
	display: block;
	color: var(--tinta-3);
	font-size: var(--t-micro);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ec-card__texto {
	margin: var(--e3) 0 0;
	color: var(--tinta-2);
	font-size: var(--t-menor);
	line-height: 1.65;
}

.ec-card__precio {
	margin: var(--e4) 0;
	font-family: var(--display);
	font-size: 1.25rem;
}

/* ------------------------------------------------------ Autor */

.ec-card--autor .ec-card__link {
	text-align: center;
}

.ec-card__retrato {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 50%;
	background: var(--papel-2);
}

.ec-card__retrato img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.04);
	transition: filter var(--d3) var(--sale), transform var(--d3) var(--sale);
}

.ec-card--autor .ec-card__link:hover .ec-card__retrato img {
	filter: grayscale(0) contrast(1);
	transform: scale(1.03);
}

/* Un aro finísimo que aparece: sustituye al típico salto de la tarjeta. */
.ec-card__retrato::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid transparent;
	border-radius: 50%;
	transition: border-color var(--d3) var(--sale);
}

.ec-card--autor .ec-card__link:hover .ec-card__retrato::after {
	border-color: var(--acento);
}

.ec-card__retrato--vacio {
	display: grid;
	place-items: center;
	color: var(--acento);
	font-family: var(--display);
	font-size: clamp(1.5rem, 1rem + 1.5vw, 2.2rem);
}

.ec-card--autor .ec-card__titulo {
	font-size: var(--t-4);
}

.ec-card--autor .ec-card__pais {
	margin-top: var(--e1);
}

/* ------------------------------------- Novedad, convocatoria, servicio */

.ec-card__media {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--papel-2);
}

.ec-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--d3) var(--sale);
}

.ec-card__link:hover .ec-card__media img {
	transform: scale(1.035);
}

.ec-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e3);
	align-items: baseline;
	margin-bottom: var(--e2);
}

.ec-card__tipo {
	padding: 0.14rem 0.55rem;
	border: 1px solid var(--linea);
	border-radius: 999px;
	color: var(--acento);
	font-size: var(--t-micro);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ec-card__dossier {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--e2);
	margin-top: var(--e3);
	padding-bottom: var(--e1);
	font-size: var(--t-menor);
	color: var(--tinta-2);
	border-bottom: 1px solid var(--linea-2);
	transition: color var(--d2) var(--sale), border-color var(--d2) var(--sale);
}

.ec-card__dossier span {
	display: inline-block;
	transition: transform var(--d2) var(--sale);
}

.ec-card__dossier:hover {
	color: var(--acento);
	border-bottom-color: var(--acento);
}

.ec-card__dossier:hover span {
	transform: translateY(3px);
}

.ec-card--convocatoria,
.ec-card--servicio {
	padding: var(--e6);
	border: 1px solid var(--linea);
	background: var(--papel-3);
	transition: border-color var(--d2) var(--sale), transform var(--d2) var(--sale);
}

.ec-card--convocatoria:hover,
.ec-card--servicio:hover {
	border-color: var(--linea-2);
	transform: translateY(-3px);
}

.ec-card__icono {
	display: block;
	margin-bottom: var(--e3);
	font-size: 1.6rem;
	line-height: 1;
}

/* =====================================================================
 * 10. Colecciones
 * ================================================================== */

.ec-colecciones {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--e5);
}

@media (min-width: 600px) {
	.ec-colecciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.ec-colecciones { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.ec-coleccion {
	position: relative;
	display: block;
	padding: var(--e6) var(--e5) var(--e5);
	border-top: 2px solid var(--ec-color, var(--tinta));
	background: var(--papel-3);
	transition: transform var(--d3) var(--sale), box-shadow var(--d3) var(--sale);
}

.ec-coleccion:hover {
	transform: translateY(-4px);
	box-shadow: 0 30px 45px -35px rgba(20, 20, 15, 0.5);
}

.ec-coleccion__nombre {
	display: block;
	font-family: var(--display);
	font-size: 1.3rem;
	font-weight: 400;
	letter-spacing: var(--track-titulo);
	line-height: 1.15;
}

.ec-coleccion__desc {
	display: block;
	margin-top: var(--e3);
	color: var(--tinta-2);
	font-size: var(--t-menor);
	line-height: 1.65;
}

.ec-coleccion__cuenta {
	display: block;
	margin-top: var(--e5);
	color: var(--ec-color, var(--acento));
	font-size: var(--t-micro);
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

/* =====================================================================
 * 11. Filtros e índice alfabético
 * ================================================================== */

.ec-filtros {
	margin: var(--e6) 0 var(--e7);
	padding-bottom: var(--e5);
	border-bottom: 1px solid var(--linea);
}

.ec-filtros__titulo {
	margin: 0 0 var(--e4);
	color: var(--tinta-3);
	font-size: var(--t-micro);
	font-weight: 600;
	letter-spacing: var(--track-micro);
	text-transform: uppercase;
}

.ec-filtros__campos {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--e4);
}

@media (min-width: 600px) {
	.ec-filtros__campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.ec-filtros__campos { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.ec-filtros label {
	display: block;
	margin-bottom: var(--e1);
	color: var(--tinta-3);
	font-size: var(--t-micro);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ec-filtros select {
	width: 100%;
	min-height: 46px;
	padding: 0.6rem 2rem 0.6rem 0.75rem;
	border: 1px solid var(--linea);
	border-radius: 0;
	background: var(--papel-3);
	background-image: linear-gradient(45deg, transparent 50%, var(--tinta-2) 50%), linear-gradient(135deg, var(--tinta-2) 50%, transparent 50%);
	background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	font-size: var(--t-menor);
	appearance: none;
	transition: border-color var(--d1) var(--sale);
}

.ec-filtros select:hover {
	border-color: var(--linea-2);
}

.ec-filtro,
.ec-indice {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e2);
	margin: var(--e5) 0;
}

.ec-indice {
	position: sticky;
	top: var(--alto-cabecera);
	z-index: 5;
	padding-block: var(--e3);
	border-bottom: 1px solid var(--linea);
	background: var(--papel);
}

.ec-filtro a,
.ec-indice a {
	display: grid;
	place-items: center;
	min-width: 40px;
	min-height: 40px;
	padding: 0 0.7rem;
	border: 1px solid var(--linea);
	border-radius: 999px;
	font-size: var(--t-menor);
	transition: border-color var(--d1) var(--sale), background var(--d1) var(--sale), color var(--d1) var(--sale);
}

.ec-filtro a:hover,
.ec-indice a:hover {
	border-color: var(--tinta);
}

.ec-filtro a.is-activo {
	background: var(--tinta);
	border-color: var(--tinta);
	color: var(--papel);
}

.ec-grupo {
	margin: var(--e8) 0;
	scroll-margin-top: calc(var(--alto-cabecera) + 4rem);
}

.ec-grupo__letra {
	margin: 0 0 var(--e5);
	padding-bottom: var(--e3);
	border-bottom: 1px solid var(--linea);
	color: var(--acento);
	font-size: var(--t-2);
}

/* =====================================================================
 * 12. Fichas de detalle
 * ================================================================== */

.entrada {
	padding-block: var(--e8);
}

.entrada__cabecera {
	margin-bottom: var(--e8);
}

.entrada__titulo {
	max-width: 16ch;
	font-size: var(--t-1);
}

.entrada__contenido {
	max-width: var(--ancho-texto);
	font-size: var(--t-cuerpo);
}

.entrada__contenido > p:first-of-type {
	color: var(--tinta-2);
	font-size: 1.1rem;
	line-height: 1.65;
}

.libro {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--e7);
	align-items: start;
}

@media (min-width: 900px) {
	.libro {
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
		gap: clamp(3rem, 1rem + 6vw, 7rem);
	}
}

.libro__portada {
	position: relative;
	aspect-ratio: 2 / 3;
	max-width: 340px;
	overflow: hidden;
	background: var(--papel-2);
	box-shadow:
		0 1px 2px rgba(20, 20, 15, 0.12),
		0 50px 70px -40px rgba(20, 20, 15, 0.55);
}

@media (min-width: 900px) {
	.libro__portada {
		position: sticky;
		top: calc(var(--alto-cabecera) + var(--e5));
	}
}

.libro__portada img,
.libro__portada svg {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.autor-cabecera {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--e5);
	margin-bottom: var(--e8);
}

@media (min-width: 700px) {
	.autor-cabecera {
		grid-template-columns: 190px minmax(0, 1fr);
		gap: var(--e7);
		align-items: center;
	}
}

.autor-cabecera__retrato {
	width: 150px;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 50%;
	background: var(--papel-2);
}

@media (min-width: 700px) {
	.autor-cabecera__retrato { width: 100%; }
}

.autor-cabecera__retrato img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.04);
}

/* Ficha técnica */

.ec-ficha {
	margin: var(--e7) 0;
	padding: var(--e6);
	border: 1px solid var(--linea);
	background: var(--papel-3);
}

.ec-ficha__titulo {
	margin: 0 0 var(--e5);
	color: var(--acento);
	font-family: var(--texto);
	font-size: var(--t-micro);
	font-weight: 600;
	letter-spacing: var(--track-micro);
	text-transform: uppercase;
}

.ec-datos {
	display: grid;
	gap: 0;
	margin: 0;
}

.ec-dato {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--e1);
	padding-block: var(--e3);
	border-bottom: 1px solid var(--linea);
}

@media (min-width: 560px) {
	.ec-dato {
		grid-template-columns: minmax(7.5rem, 32%) minmax(0, 1fr);
		gap: var(--e4);
		align-items: baseline;
	}
}

.ec-dato:last-child {
	border-bottom: 0;
}

.ec-dato dt {
	margin: 0;
	color: var(--tinta-3);
	font-size: var(--t-micro);
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.ec-dato dd {
	margin: 0;
	font-size: var(--t-menor);
}

.ec-relacionados {
	margin-top: var(--e9);
	padding-top: var(--e7);
	border-top: 1px solid var(--linea);
}

.ec-relacionados h2 {
	margin-bottom: var(--e6);
	font-size: var(--t-3);
	letter-spacing: var(--track-micro);
	font-family: var(--texto);
	font-size: var(--t-micro);
	font-weight: 600;
	text-transform: uppercase;
	color: var(--tinta-3);
}

.ec-enlaces {
	font-size: var(--t-menor);
	color: var(--tinta-2);
}

/* Etiquetas de estado */

.ec-badge {
	display: inline-block;
	margin-bottom: var(--e4);
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
	background: var(--tinta-2);
	color: var(--papel);
	font-size: var(--t-micro);
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

.ec-estado--abierta .ec-badge,
.ec-estado--permanente .ec-badge { background: #1d6b47; }
.ec-estado--proximamente .ec-badge { background: var(--acento); }
.ec-estado--cerrada .ec-badge { background: var(--tinta-3); }
.ec-estado--cerrada { opacity: 0.7; }

/* =====================================================================
 * 13. Paginación, newsletter y avisos
 * ================================================================== */

.ec-paginacion {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e2);
	justify-content: center;
	margin-top: var(--e8);
}

.ec-paginacion .page-numbers {
	display: grid;
	place-items: center;
	min-width: 46px;
	min-height: 46px;
	padding: 0 var(--e3);
	border: 1px solid var(--linea);
	font-size: var(--t-menor);
	transition: border-color var(--d1) var(--sale);
}

.ec-paginacion .page-numbers:hover { border-color: var(--tinta); }

.ec-paginacion .page-numbers.current {
	background: var(--tinta);
	border-color: var(--tinta);
	color: var(--papel);
}

.ec-newsletter {
	padding: var(--e8) var(--e7);
	border: 1px solid var(--linea);
	background: var(--papel-3);
}

.ec-newsletter__titulo {
	max-width: 18ch;
	margin: 0 0 var(--e3);
	font-family: var(--display);
	font-size: var(--t-2);
	font-weight: 400;
}

.ec-newsletter__texto {
	max-width: 52ch;
	margin: 0 0 var(--e6);
	color: var(--tinta-2);
	font-size: var(--t-menor);
	line-height: 1.7;
}

.ec-newsletter__form {
	display: grid;
	gap: var(--e4);
	max-width: 34rem;
}

.ec-campo {
	display: grid;
	gap: var(--e1);
	margin: 0;
}

.ec-campo label {
	color: var(--tinta-3);
	font-size: var(--t-micro);
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.ec-campo input[type="text"],
.ec-campo input[type="email"],
.ec-campo input[type="search"],
.ec-campo textarea {
	width: 100%;
	min-height: 48px;
	padding: 0.75rem 0;
	border: 0;
	border-bottom: 1px solid var(--linea-2);
	border-radius: 0;
	background: transparent;
	font-size: var(--t-4);
	transition: border-color var(--d2) var(--sale);
}

.ec-campo input:focus,
.ec-campo textarea:focus {
	outline: none;
	border-bottom-color: var(--acento);
}

.ec-campo input::placeholder,
.ec-campo textarea::placeholder {
	color: var(--tinta-3);
}

.ec-campo--check label {
	display: flex;
	gap: var(--e3);
	align-items: flex-start;
	color: var(--tinta-2);
	font-size: var(--t-menor);
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.6;
	text-transform: none;
}

.ec-campo--check input {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 0.2em;
	accent-color: var(--acento);
}

.ec-newsletter__form .ec-btn {
	justify-self: start;
	margin-top: var(--e2);
}

.ec-hp {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.ec-aviso {
	margin: 0 0 var(--e4);
	padding: var(--e3) var(--e4);
	border-left: 2px solid currentColor;
	font-size: var(--t-menor);
}

.ec-aviso--ok { color: #1d6b47; }
.ec-aviso--error { color: var(--acento); }

.ec-vacio {
	margin: var(--e7) 0;
	color: var(--tinta-3);
	font-family: var(--display);
	font-style: italic;
}

/* Galería */

.ec-fotos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--e3);
	margin: var(--e6) 0;
}

@media (min-width: 700px) {
	.ec-fotos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
	.ec-fotos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.ec-foto {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--papel-2);
}

.ec-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--d3) var(--sale);
}

.ec-foto:hover img { transform: scale(1.04); }

/* Selector de idioma */

.ec-idioma {
	display: inline-flex;
	gap: var(--e2);
	align-items: center;
	font-size: var(--t-micro);
	font-weight: 600;
	letter-spacing: 0.13em;
}

.ec-idioma span { color: var(--linea-2); }

/*
 * Área táctil de 44px, aunque el texto sean dos letras. Se consigue con un
 * pseudoelemento que agranda la zona sensible sin descolocar el diseño.
 */
.ec-idioma a {
	position: relative;
	padding: 0.35rem 0.2rem;
	color: var(--tinta-3);
	transition: color var(--d1) var(--sale);
}

.ec-idioma a::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: max(100%, 44px);
	height: 44px;
	transform: translate(-50%, -50%);
}

.ec-idioma a:hover { color: var(--tinta); }

.ec-idioma a.is-activo { color: var(--acento); }

/* =====================================================================
 * 14. Pie de página
 *
 * Composición asimétrica: la marca ocupa toda una columna ancha a la
 * izquierda y las listas se agrupan a la derecha. No son cuatro columnas
 * iguales, que es lo que hace que un pie parezca de plantilla.
 * ================================================================== */

.pie {
	margin-top: var(--e9);
	padding-block: var(--e8) var(--e5);
	border-top: 1px solid var(--linea);
	background: var(--papel-2);
}

.pie__rejilla {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--e7);
}

@media (min-width: 700px) {
	.pie__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.pie__rejilla {
		grid-template-columns: 1.3fr repeat(3, minmax(0, 0.8fr)) 1.1fr;
		gap: var(--e6);
	}

	/* La newsletter cierra la fila, separada por un filete. */
	.pie__newsletter {
		padding-left: var(--e5);
		border-left: 1px solid var(--linea);
	}
}

.pie__nota {
	max-width: 24ch;
	margin-top: var(--e3);
	font-size: 0.78rem;
}

.pie__marca {
	font-family: var(--display);
	font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
	line-height: 1.05;
	letter-spacing: var(--track-titulo);
}

.pie__lema {
	max-width: 28ch;
	margin-top: var(--e4);
	color: var(--tinta-2);
	font-family: var(--display);
	font-style: italic;
	font-size: 1rem;
}

.pie__titulo {
	margin: 0 0 var(--e4);
	color: var(--tinta-3);
	font-size: var(--t-micro);
	font-weight: 600;
	letter-spacing: var(--track-micro);
	text-transform: uppercase;
}

.pie ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pie li { margin-bottom: var(--e3); }

.pie li a {
	position: relative;
	display: inline-block;
	padding-bottom: 2px;
	color: var(--tinta-2);
	font-size: var(--t-menor);
	transition: color var(--d1) var(--sale);
}

.pie li a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform var(--d2) var(--sale);
}

.pie li a:hover { color: var(--tinta); }

.pie li a:hover::after {
	transform: scaleX(1);
	transform-origin: left center;
}

/* -------------------------------------------------------- Redes sociales */

.social {
	display: flex;
	gap: var(--e2);
	margin-top: var(--e5);
	padding: 0;
	list-style: none;
}

.social a {
	display: grid;
	place-items: center;
	width: 50px;
	height: 50px;
	border: 1px solid var(--linea);
	border-radius: 50%;
	color: var(--tinta-2);
	transition: color var(--d2) var(--sale), border-color var(--d2) var(--sale), transform var(--d2) var(--sale);
}

/*
 * Los iconos no son enlaces de texto: fuera el subrayado animado del pie.
 * El selector repite «.pie» a propósito para ganar en especificidad a
 * «.pie li a::after», que si no seguiría generando la línea.
 */
.pie .social a::after,
.social a::after {
	content: none;
}

.social a:hover,
.social a:focus-visible {
	color: var(--acento);
	border-color: var(--acento);
	transform: translateY(-2px);
}

.social svg {
	display: block;
	width: 34px;
	height: 34px;
	fill: currentColor;
}

/*
 * Tamaño óptico, no matemático: la «f» de Facebook es alta y estrecha
 * (viewBox 320x512), así que a igual altura que el cuadrado de Instagram
 * parecería más pequeña. Se le da algo más de alto y el ancho sale solo.
 */
.social .icono-fb {
	width: auto;
	height: 36px;
}

.pie__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e4);
	justify-content: space-between;
	align-items: baseline;
	margin-top: var(--e8);
	padding-top: var(--e5);
	border-top: 1px solid var(--linea);
	color: var(--tinta-3);
	font-size: var(--t-micro);
	letter-spacing: 0.05em;
}

/* =====================================================================
 * 15. Menú de móvil a pantalla completa
 * ================================================================== */

@media (max-width: 980px) {
	.menu-boton { display: block; }

	/*
	 * Pantalla completa y tipografía grande: el menú es una página, no un
	 * desplegable. Se ancla al borde inferior real de la cabecera para no
	 * solaparse con la barra de administración de WordPress.
	 */
	/*
	 * Se ancla al borde inferior REAL de la cabecera con top:100%, no a una
	 * altura escrita a mano. Con un valor fijo se solapa en cuanto algo ocupa
	 * espacio encima: la barra de administración de WordPress, un aviso de
	 * cookies o un banner.
	 */
	.nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 90;
		display: block;
		height: calc(100vh - var(--alto-cabecera));
		height: calc(100dvh - var(--alto-cabecera));
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: var(--e7) var(--margen) var(--e8);
		background: var(--papel);
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--d2) var(--sale), visibility var(--d2);
	}

	.nav.is-abierta {
		opacity: 1;
		visibility: visible;
	}

	.nav a,
	.tiene-panel {
		display: block;
		width: 100%;
	}

	.nav > a,
	.panel-boton {
		padding-block: var(--e4);
		border-bottom: 1px solid var(--linea);
		font-family: var(--display);
		font-size: clamp(1.5rem, 1.1rem + 2vw, 2.1rem);
		font-weight: 400;
		letter-spacing: var(--track-titulo);
		color: var(--tinta);
	}

	.panel-boton {
		display: flex;
		justify-content: space-between;
		width: 100%;
		text-align: left;
	}

	/* En el menú grande no hace falta el subrayado. */
	.nav > a::after,
	.panel-boton::after { display: none; }

	/* Entrada escalonada de los enlaces, muy corta. */
	.nav.is-abierta > * {
		animation: entrar-menu var(--d3) var(--sale) backwards;
	}

	.nav.is-abierta > *:nth-child(1) { animation-delay: 40ms; }
	.nav.is-abierta > *:nth-child(2) { animation-delay: 80ms; }
	.nav.is-abierta > *:nth-child(3) { animation-delay: 120ms; }
	.nav.is-abierta > *:nth-child(4) { animation-delay: 160ms; }
	.nav.is-abierta > *:nth-child(5) { animation-delay: 200ms; }
	.nav.is-abierta > *:nth-child(6) { animation-delay: 240ms; }
	.nav.is-abierta > *:nth-child(7) { animation-delay: 280ms; }
	.nav.is-abierta > *:nth-child(8) { animation-delay: 320ms; }

	@keyframes entrar-menu {
		from { opacity: 0; transform: translateY(12px); }
		to { opacity: 1; transform: none; }
	}

	/* El panel de colecciones pasa a acordeón dentro del menú. */
	.panel-libros {
		position: static;
		width: 100%;
		max-height: 0;
		padding: 0;
		border: 0;
		box-shadow: none;
		background: transparent;
		opacity: 1;
		visibility: visible;
		overflow: hidden;
		transform: none;
		transition: max-height var(--d3) var(--sale), padding var(--d3) var(--sale);
	}

	.panel-libros.is-abierto {
		max-height: 90vh;
		padding: var(--e5) 0;
		transform: none;
	}

	.panel-libros__rejilla {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--e5);
	}

	.panel-linea--subsello {
		grid-template-columns: minmax(0, 1fr);
		margin-top: 0;
	}

	.panel-linea--subsello .panel-linea__desc {
		grid-row: auto;
		margin-bottom: var(--e3);
	}

	.seccion__cabecera {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--e3);
	}

	.seccion__num { padding-top: 0; }
}

/*
 * Hay un botón de donar en la cabecera y otro dentro del menú de móvil.
 * Solo puede verse uno cada vez: en escritorio manda el de la cabecera y en
 * móvil el del menú, donde hay sitio para que se lea bien.
 */
.nav .boton--donar {
	display: none;
}

@media (max-width: 980px) {
	.cabecera__extra .boton--donar {
		display: none;
	}

	.nav .boton--donar {
		display: inline-flex;
		margin-top: var(--e6);
		width: 100%;
	}
}

/*
 * Franja intermedia: portátiles pequeños y tablets en horizontal. Se recorta
 * el margen lateral de la cabecera y se aprieta el pastilla de Support antes
 * que esconder ningún enlace.
 */
@media (min-width: 981px) and (max-width: 1200px) {
	/*
	 * Se estrecha el margen lateral de la propia cabecera. Sacar la barra del
	 * contenedor con márgenes negativos la hacía más ancha que la ventana y
	 * provocaba desplazamiento horizontal.
	 */
	.cabecera .contenedor {
		--margen: clamp(1rem, -1.6rem + 3.4vw, 2rem);
	}

	.nav a,
	.panel-enlace,
	.panel-boton {
		font-size: 0.78rem;
	}

	.nav a.nav__apoya {
		padding-inline: 0.7rem;
	}

	.marca__sello {
		display: none;
	}
}

/* =====================================================================
 * 16. Movimiento
 *
 * Tres tratamientos distintos y ninguno más. Un solo efecto repetido en
 * todo el sitio delata la plantilla; tres bien elegidos leen como
 * dirección de arte.
 * ================================================================== */

/*
 * 1) Títulos: la línea de texto se descubre desde abajo, como si saliera
 *    de la caja. Es el gesto principal y solo se usa en titulares.
 */
.js-revelar .revelar-titulo {
	clip-path: inset(0 0 108% 0);
	transition: clip-path 1s var(--sale);
}

.js-revelar .revelar-titulo.is-visible {
	clip-path: inset(0 0 -10% 0);
}

/* 2) Bloques: aparición mínima, ocho píxeles, sin rebote. */
.js-revelar .revelar {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity var(--d3) var(--sale), transform var(--d3) var(--sale);
}

.js-revelar .revelar.is-visible {
	opacity: 1;
	transform: none;
}

/* 3) Portadas: entran desde una escala imperceptible, nunca desplazadas. */
.js-revelar .revelar-imagen {
	opacity: 0;
	transform: scale(1.015);
	transition: opacity 1s var(--sale), transform 1.2s var(--sale);
}

.js-revelar .revelar-imagen.is-visible {
	opacity: 1;
	transform: none;
}

/* =====================================================================
 * 16b. WooCommerce
 *
 * WooCommerce trae su propia hoja de estilos. Aquí no se pelea con ella:
 * se le devuelven las piezas al lenguaje del sitio —rejilla de portadas,
 * botones, campos con filete— y se dejan quietas las que ya funcionan.
 * ================================================================== */

.woocommerce ul.products,
ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--e6) var(--e5);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 600px) {
	.woocommerce ul.products,
	ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
	.woocommerce ul.products,
	ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
	.woocommerce ul.products,
	ul.products {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: var(--e7) var(--e6);
	}
}

/* WooCommerce flota y da anchos en porcentaje a sus fichas: aquí manda la rejilla. */
.woocommerce ul.products li.product {
	width: auto;
	max-width: none;
	margin: 0;
	float: none;
	clear: none;
	text-align: left;
}

.woocommerce ul.products li.product::before,
.woocommerce ul.products li.product::after {
	content: none;
}

.ec-card__precio-mini {
	display: block;
	margin-top: var(--e2);
	color: var(--tinta-3);
	font-size: var(--t-menor);
}

.ec-card__precio-mini del {
	opacity: 0.6;
	margin-right: var(--e2);
}

/* Distintivo de oferta: discreto y en el idioma del sitio. */
.woocommerce span.onsale {
	position: absolute;
	top: var(--e3);
	left: var(--e3);
	z-index: 2;
	min-height: 0;
	min-width: 0;
	margin: 0;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	background: var(--acento);
	color: #fff;
	font-size: var(--t-micro);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.6;
}

/* --------------------------------------------------- Ficha del libro */

.woo--ficha div.product {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--e7);
	align-items: start;
}

@media (min-width: 900px) {
	.woo--ficha div.product {
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
		gap: clamp(3rem, 1rem + 6vw, 7rem);
	}
}

.woo--ficha div.product .summary {
	margin: 0;
	width: auto;
	float: none;
}

.woo--ficha div.product .product_title {
	max-width: 16ch;
	margin: 0 0 var(--e4);
	font-size: var(--t-1);
}

.woo-autores {
	margin: 0 0 var(--e5);
	color: var(--tinta-2);
	font-family: var(--display);
	font-size: 1.05rem;
	font-style: italic;
}

.woo-autores a {
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 1px;
	transition: background-size var(--d2) var(--sale);
}

.woo-autores a:hover { background-size: 100% 1px; }

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	margin: 0 0 var(--e5);
	color: var(--tinta);
	font-family: var(--display);
	font-size: 1.6rem;
}

.woocommerce div.product p.price del { opacity: 0.5; }

.woocommerce div.product .woocommerce-product-details__short-description {
	max-width: 46ch;
	margin-bottom: var(--e6);
	color: var(--tinta-2);
}

/* La ficha técnica ocupa el ancho completo, debajo de las dos columnas. */
.woo-ficha {
	grid-column: 1 / -1;
	padding-inline: 0;
}

/* --------------------------------------------------- Formulario de compra */

.woocommerce div.product form.cart {
	margin-bottom: var(--e6);
}

.woocommerce div.product form.cart .variations {
	width: 100%;
	margin-bottom: var(--e5);
	border-collapse: collapse;
}

.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td {
	padding: var(--e3) 0;
	border-bottom: 1px solid var(--linea);
	text-align: left;
	vertical-align: middle;
}

.woocommerce div.product form.cart .variations label {
	color: var(--tinta-3);
	font-size: var(--t-micro);
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.woocommerce div.product form.cart .variations select,
.woocommerce .quantity .qty {
	min-height: 46px;
	padding: 0.55rem 0.7rem;
	border: 1px solid var(--linea);
	border-radius: 0;
	background: var(--papel-3);
	font-size: var(--t-menor);
}

.woocommerce .quantity .qty {
	width: 5rem;
	text-align: center;
}

.woocommerce div.product form.cart .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.9rem 2rem;
	border: 1px solid var(--tinta);
	border-radius: 0;
	background: var(--tinta);
	color: var(--papel);
	font-family: var(--texto);
	font-size: var(--t-menor);
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: none;
	transition: background var(--d2) var(--sale), color var(--d2) var(--sale);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background: transparent;
	color: var(--tinta);
}

/* --------------------------------------------------- Carrito y pago */

.woocommerce table.shop_table {
	border: 0;
	border-radius: 0;
	border-collapse: collapse;
}

.woocommerce table.shop_table th {
	padding: var(--e3) var(--e3) var(--e3) 0;
	border-bottom: 1px solid var(--linea-2);
	color: var(--tinta-3);
	font-size: var(--t-micro);
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.woocommerce table.shop_table td {
	padding: var(--e4) var(--e3) var(--e4) 0;
	border-top: 0;
	border-bottom: 1px solid var(--linea);
	font-size: var(--t-menor);
}

.woocommerce table.cart img {
	width: 64px;
	box-shadow: 0 1px 1px rgba(20, 20, 15, 0.12), 0 10px 16px -12px rgba(20, 20, 15, 0.5);
}

.woocommerce .cart_totals h2,
.woocommerce-checkout h3,
.woocommerce-billing-fields h3 {
	font-family: var(--texto);
	font-size: var(--t-micro);
	font-weight: 600;
	letter-spacing: var(--track-micro);
	text-transform: uppercase;
	color: var(--tinta-3);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	min-height: 48px;
	padding: 0.7rem 0;
	border: 0;
	border-bottom: 1px solid var(--linea-2);
	border-radius: 0;
	background: transparent;
	font-size: var(--t-4);
}

.woocommerce form .form-row label {
	color: var(--tinta-3);
	font-size: var(--t-micro);
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

/* Avisos: filete lateral, como el resto de avisos del sitio. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	padding: var(--e4) var(--e5);
	border: 0;
	border-left: 2px solid var(--acento);
	border-radius: 0;
	background: var(--papel-3);
	font-size: var(--t-menor);
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	content: none;
}

.woocommerce-message { border-left-color: #1d6b47; }

/* Carrito vacío */
.cart-empty,
.woocommerce .cart-empty {
	font-family: var(--display);
	font-size: var(--t-2);
	font-style: italic;
	color: var(--tinta-2);
}

/* =====================================================================
 * 17. Preferencias del usuario e impresión
 * ================================================================== */

/*
 * Solo se apaga el movimiento, no los cambios de color ni los subrayados.
 * Muchos equipos con Windows traen «reducir movimiento» activado de fábrica
 * y apagarlo todo dejaría la web con aspecto de rota.
 */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	.cinta__pista { animation: none; }

	.js-revelar .revelar,
	.js-revelar .revelar-titulo,
	.js-revelar .revelar-imagen {
		opacity: 1;
		clip-path: none;
		transform: none;
		transition: none;
	}

	.nav.is-abierta > * { animation: none; }

	.ec-card--libro .ec-card__link:hover .ec-card__portada,
	.ec-coleccion:hover,
	.ec-card--convocatoria:hover,
	.ec-card--servicio:hover,
	.enlace-flecha:hover span,
	.social a:hover,
	.ec-card__link:hover .ec-card__media img,
	.ec-card--autor .ec-card__link:hover .ec-card__retrato img,
	.ec-foto:hover img,
	.panel-linea:hover .panel-linea__nombre {
		transform: none;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

@media print {
	.cabecera,
	.pie,
	.cinta,
	.slider__controles,
	.ec-filtros,
	.ec-filtro,
	.ec-indice,
	.aviso-maqueta { display: none; }

	body { background: #fff; color: #000; }
	.ec-card__portada { box-shadow: none; }
}

/* Aviso de maqueta: solo en la vista previa, nunca en la web publicada. */
.aviso-maqueta {
	margin: 0;
	padding: var(--e3) var(--e4);
	background: var(--navy);
	color: #fff;
	font-size: var(--t-micro);
	letter-spacing: 0.04em;
	text-align: center;
}

.aviso-maqueta strong { color: var(--oro); }