/* Hallmark · genre: modern-minimal · macrostructure: Marquee Hero + estantería · design-system: design.md · designed-as-app
 * pre-emit critique: P4 H4 E4 S4 R4 V4 */
/* =========================================================================
 * /libros/ · Rediseño 2026 — piezas de librería (tl-*).
 *
 * Extiende home-2026.css: el <main> lleva .tlc-home (sistema th-*) además de
 * .tlc-libros, así que aquí solo viven los componentes propios de la página:
 * tarjeta de libro, estantería con scroll, panel de recomendaciones, cita y
 * portada del hero. Mismas variables --th-* de la portada.
 * ========================================================================= */

/* 1 · HERO · portada del libro destacado ---------------------------------- */
.tl-hero-book{
	margin:0;
	justify-self:end;
	max-width:min(320px,100%);
	position:relative; /* ancla del chip "Selección del mes" */
}
.tl-hero-book a{display:block;position:relative}
/* Canto del libro: sombreado en el lomo, dibujado en CSS. */
.tl-hero-book a::after{
	content:"";
	position:absolute;inset:0 auto 0 0;width:12px;
	border-radius:var(--th-radius-sm) 0 0 var(--th-radius-sm);
	background:linear-gradient(90deg,oklch(27.2% 0.050 253.1 / .16),transparent);
	pointer-events:none;
}
.tlc-libros .tl-hero-book__img{
	display:block;width:100%;height:auto;
	border-radius:var(--th-radius-sm);
	border:var(--th-rule);
	background:var(--th-paper-3);
}
.tl-hero-book__caption{
	margin-top:var(--th-sp-sm);
	font-family:var(--th-mono);font-size:var(--th-text-xs);
	letter-spacing:.08em;text-transform:uppercase;
	color:var(--th-muted);
	text-align:center;
}

/* 2 · TARJETA DE LIBRO ---------------------------------------------------- */
.tl-card{
	display:flex;flex-direction:column;
	min-width:0;
	background:var(--th-paper);
	border:var(--th-rule);
	border-radius:var(--th-radius-lg);
	padding:var(--th-sp-md);
	transition:border-color var(--th-dur) var(--th-ease);
}
.tl-card:hover{border-color:var(--th-border-strong)}
/* El hover acerca la portada (zoom sutil), no mueve la tarjeta entera. */
.tlc-libros .tl-card__img{transition:transform var(--th-dur) var(--th-ease)}
.tl-card:hover .tl-card__img{transform:scale(1.04)}
/* Foco de teclado visible en la tarjeta completa. */
.tl-card:focus-within{outline:2px solid var(--th-focus);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
	.tl-card:hover .tl-card__img{transform:none}
}
.tl-card__media{
	position:relative;display:block;
	aspect-ratio:2/3;
	border-radius:var(--th-radius-sm);
	overflow:hidden;
	background:var(--th-paper-3);
	margin-bottom:var(--th-sp-md);
}
.tlc-libros .tl-card__img{
	display:block;width:100%;height:100%;
	object-fit:cover;object-position:center top;
}
.tl-card__badge{
	position:absolute;top:var(--th-sp-xs);left:var(--th-sp-xs);
	padding:var(--th-sp-3xs) var(--th-sp-sm);
	background:var(--th-accent);color:#fff;
	border-radius:var(--th-pill);
	font-size:var(--th-text-xs);font-weight:600;letter-spacing:.02em;
}
.tl-card__body{display:flex;flex-direction:column;flex:1;min-width:0}
.tlc-libros .tl-card__title{
	font-size:var(--th-text-base);font-weight:600;line-height:1.35;letter-spacing:-.01em;
	margin:0 0 var(--th-sp-2xs);
	overflow-wrap:anywhere;
	/* Títulos kilométricos (subtítulo incluido): tres líneas y puntos. */
	display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
/* El `a{color:#eb801d}` global (snippet custom-css-js) teñía los títulos. */
.tlc-libros .tl-card__title a,
.tlc-libros .tl-card__title a:link,
.tlc-libros .tl-card__title a:visited{color:var(--th-ink);text-decoration:none}
.tlc-libros .tl-card__title a:hover{color:var(--th-accent-deep)}
.tlc-libros .tl-card__title a:focus-visible{outline:2px solid var(--th-focus);outline-offset:2px}
.tl-card__author{
	margin:0 0 var(--th-sp-sm);
	font-size:var(--th-text-sm);color:var(--th-muted);
}
.tl-card__price{
	margin:auto 0 0;padding-top:var(--th-sp-xs);
	font-family:var(--th-mono);font-weight:700;font-size:var(--th-text-md);
	letter-spacing:-.02em;color:var(--th-ink);
	font-variant-numeric:tabular-nums;
}
/* Woo marca ofertas con <del>+<ins>. */
.tl-card__price del{color:var(--th-muted);font-weight:500;font-size:var(--th-text-sm)}
.tl-card__price ins{text-decoration:none}
.tlc-libros .tl-card__cta,
.tlc-libros a.tl-card__cta,
.tlc-libros a.tl-card__cta:link,
.tlc-libros a.tl-card__cta:visited{
	display:inline-flex;align-items:center;justify-content:center;
	min-height:44px;margin-top:var(--th-sp-md);padding:0 var(--th-sp-lg);
	border-radius:var(--th-pill);
	background:var(--th-accent);border:1px solid var(--th-accent);
	color:#fff;
	font-family:var(--th-font);font-size:var(--th-text-sm);font-weight:600;
	line-height:1;text-decoration:none;white-space:nowrap;
	transition:background var(--th-dur) var(--th-ease),border-color var(--th-dur) var(--th-ease);
}
.tlc-libros a.tl-card__cta:hover,
.tlc-libros a.tl-card__cta:focus{background:var(--th-accent-deep);border-color:var(--th-accent-deep);color:#fff}
.tlc-libros a.tl-card__cta:focus-visible{outline:2px solid var(--th-focus);outline-offset:3px}

/* Variante compacta (estantería). */
.tl-card--small{padding:var(--th-sp-sm)}
.tl-card--small .tl-card__author{display:none}
.tlc-libros .tl-card--small .tl-card__title{font-size:var(--th-text-sm);-webkit-line-clamp:2}
.tl-card--small .tl-card__price{font-size:var(--th-text-base)}

/* 3 · ESTANTERÍA con scroll ------------------------------------------------ */
.tl-shelf{
	display:grid;
	grid-auto-flow:column;
	grid-auto-columns:clamp(160px,17vw,200px);
	gap:var(--th-sp-md);
	overflow-x:auto;
	overscroll-behavior-x:contain;
	scroll-snap-type:x proximity;
	padding:var(--th-sp-2xs) var(--th-sp-2xs) var(--th-sp-md);
	scrollbar-color:var(--th-border-strong) transparent;
}
.tl-shelf>.tl-card{scroll-snap-align:start}
.tl-shelf:focus-visible{outline:2px solid var(--th-focus);outline-offset:4px}
.tl-shelf::-webkit-scrollbar{height:8px}
.tl-shelf::-webkit-scrollbar-thumb{background:var(--th-border-strong);border-radius:var(--th-pill)}
.tl-shelf::-webkit-scrollbar-track{background:transparent}

/* 3b · CARRUSEL (libros-2026.js sobre la estantería) ----------------------- */
.tl-carousel{position:relative}
/* Sin JS los botones llevan [hidden]; con JS la estantería pierde el snap
 * (pelearía con los recolocados del bucle) y el arrastre manda. */
.tl-carousel.is-enhanced .tl-shelf{
	scroll-snap-type:none;
	cursor:grab;
	scrollbar-width:none;
}
.tl-carousel.is-enhanced .tl-shelf::-webkit-scrollbar{display:none}
.tl-carousel.is-enhanced .tl-shelf.is-dragging{cursor:grabbing;user-select:none}
.tl-carousel.is-enhanced .tl-shelf img{user-select:none;-webkit-user-drag:none}
.tlc-libros .tl-carousel__arrow{
	position:absolute;top:50%;translate:0 -50%;
	z-index:2;
	display:grid;place-items:center;
	width:46px;height:46px;padding:0;
	border-radius:50%;
	background:var(--th-paper);
	border:1px solid var(--th-border-strong);
	color:var(--th-ink);
	cursor:pointer;
	box-shadow:0 10px 24px -14px oklch(27.2% 0.050 253.1 / .45);
	transition:background var(--th-dur) var(--th-ease),
	           border-color var(--th-dur) var(--th-ease),
	           color var(--th-dur) var(--th-ease);
}
.tlc-libros .tl-carousel__arrow:hover{background:var(--th-ink);border-color:var(--th-ink);color:#fff}
.tlc-libros .tl-carousel__arrow:active{translate:0 calc(-50% + 1px)}
.tlc-libros .tl-carousel__arrow:focus-visible{outline:2px solid var(--th-focus);outline-offset:3px}
.tlc-libros .tl-carousel__arrow[hidden]{display:none}
.tl-carousel__arrow--prev{left:-14px}
.tl-carousel__arrow--next{right:-14px}
@media (max-width:767px){
	.tlc-libros .tl-carousel__arrow{width:40px;height:40px}
	.tl-carousel__arrow--prev{left:-6px}
	.tl-carousel__arrow--next{right:-6px}
}

/* 4 · CATÁLOGO ------------------------------------------------------------- */
/* Cuatro por fila; las dos primeras filas a la vista y el resto destapa con
 * "Ver más libros" (.tl-card--extra + .is-expanded, en libros-2026.js). */
.tl-grid{
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:var(--th-sp-md);
}
.tl-grid .tl-card--extra{display:none}
.tl-grid.is-expanded .tl-card--extra{display:flex}
.tl-more{margin:var(--th-sp-xl) 0 0;text-align:center}
.tlc-libros .tl-more .th-btn{width:auto}
.tlc-libros .tl-more__btn[hidden]{display:none}
@media (max-width:1024px){
	.tl-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* 4b · FRANJA DE DATOS del hero, vestida como la sección ------------------- */
.tlc-libros .th-facts{
	border-top:0;
	padding-top:0;
	gap:var(--th-sp-md);
}
.tlc-libros .th-fact{
	background:var(--th-paper-2);
	border:var(--th-rule);
	border-radius:var(--th-radius-lg);
	padding:var(--th-sp-lg);
}
.tlc-libros .th-fact__icon{background:var(--th-paper)}

/* 5 · RECOMENDACIONES · panel tinta ---------------------------------------- */
.tl-reco{
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);
	gap:var(--th-sp-2xl);
	align-items:center;
	padding:clamp(1.75rem,3.5vw,3.5rem);
	background:var(--th-ink);
	border-radius:var(--th-radius-lg);
}
.th-eyebrow--on-ink{color:var(--th-accent-icon-ink)}
.tlc-libros .tl-reco__title{
	font-size:var(--th-section);font-weight:700;line-height:1.1;letter-spacing:-.025em;
	color:#fff;
	margin:0 0 var(--th-sp-md);
	overflow-wrap:anywhere;
}
.tl-reco__claim{
	margin:0 0 var(--th-sp-md);
	font-size:var(--th-text-md);font-weight:600;line-height:1.45;
	color:oklch(100% 0 90 / .92);
}
.tl-reco__body{
	margin:0;
	font-size:var(--th-text-sm);line-height:1.65;
	color:oklch(100% 0 90 / .74);
}
.tlc-libros .tl-reco__body a,
.tlc-libros .tl-reco__body a:link,
.tlc-libros .tl-reco__body a:visited{
	color:var(--th-accent-icon-ink);
	text-decoration:underline;text-underline-offset:2px;
}
.tlc-libros .tl-reco__body a:hover{color:#fff}
.tlc-libros .tl-reco__body a:focus-visible{outline:2px solid var(--th-focus-on-ink);outline-offset:2px}
.tl-reco__books{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:var(--th-sp-md);
}
/* Fotografía de biblioteca bajo la tinta (URL por --th-photo). */
.tl-reco--photo{
	background-image:
		linear-gradient(115deg,oklch(27.2% 0.050 253.1 / .96) 42%,oklch(27.2% 0.050 253.1 / .72)),
		var(--th-photo);
	background-size:cover;
	background-position:center;
}

/* Tarjetas sobre tinta: velo blanco, texto claro. */
.tl-reco .tl-card{background:oklch(100% 0 90 / .07);border-color:oklch(100% 0 90 / .16)}
.tl-reco .tl-card:hover{border-color:oklch(100% 0 90 / .34)}
.tlc-libros .tl-reco .tl-card__title a,
.tlc-libros .tl-reco .tl-card__title a:link,
.tlc-libros .tl-reco .tl-card__title a:visited{color:#fff}
.tlc-libros .tl-reco .tl-card__title a:hover{color:var(--th-accent-icon-ink)}
.tlc-libros .tl-reco .tl-card__title a:focus-visible{outline-color:var(--th-focus-on-ink)}
.tl-reco .tl-card__author{color:oklch(100% 0 90 / .6)}
.tl-reco .tl-card__price{color:var(--th-accent-icon-ink)}
.tl-reco .tl-card__price del{color:oklch(100% 0 90 / .5)}

/* 6 · CITA · panel cálido premium ------------------------------------------ */
.tl-quote{
	position:relative;
	overflow:hidden;
	display:grid;
	grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);
	grid-template-areas:
		"text   book"
		"source book";
	column-gap:var(--th-sp-2xl);
	margin:0;
	padding:clamp(2rem,4vw,3.5rem);
	background:var(--th-accent-wash);
	border:1px solid var(--th-accent-edge);
	border-radius:var(--th-radius-lg);
}
/* Comilla-marca de agua gigante detrás del texto. */
.tl-quote::before{
	content:"“";
	position:absolute;
	top:-.12em;left:.02em;
	font-size:16rem;line-height:1;font-weight:700;
	font-family:var(--th-font);
	color:oklch(73.2% 0.161 57.2 / .16);
	pointer-events:none;
}
.tlc-libros .tl-quote__text{
	grid-area:text;
	position:relative;
	align-self:center;
	margin:0;border:0;padding:var(--th-sp-xl) 0 0 var(--th-sp-xl);
	font-size:clamp(1.35rem,1.8vw,1.85rem);
	/* Betheme pone los blockquote en itálica; el sistema es roman. */
	font-style:normal;
	font-weight:600;line-height:1.4;letter-spacing:-.015em;
	color:var(--th-ink);
	background:transparent;
	max-width:26em;
}
.tl-quote__text *{font-style:normal}
.tl-quote__source{
	grid-area:source;
	align-self:end;
	position:relative;
	margin-top:var(--th-sp-xl);
	margin-left:var(--th-sp-xl);
	padding-left:var(--th-sp-md);
	border-left:3px solid var(--th-accent);
	font-size:var(--th-text-sm);color:var(--th-muted);
	line-height:1.5;
}
.tl-quote__source cite{font-style:normal;font-weight:600;color:var(--th-ink-soft)}
.tl-quote__book{
	grid-area:book;
	position:relative;
	display:flex;flex-direction:column;align-items:center;gap:var(--th-sp-lg);
	justify-self:end;align-self:center;
	max-width:230px;
}
.tl-quote__book a{display:block}
/* La portada, ligeramente girada como un libro dejado sobre la mesa;
 * al pasar el ratón se endereza. */
.tlc-libros .tl-quote__img{
	display:block;width:100%;height:auto;
	border-radius:var(--th-radius-sm);
	background:var(--th-paper-3);
	box-shadow:0 30px 55px -28px oklch(27.2% 0.050 253.1 / .5);
	transform:rotate(-3deg);
	transition:transform var(--th-dur) var(--th-ease);
}
.tl-quote__book a:hover .tl-quote__img,
.tl-quote__book a:focus-visible .tl-quote__img{transform:rotate(0deg)}
.tl-quote__book a:focus-visible{outline:2px solid var(--th-focus);outline-offset:4px;border-radius:var(--th-radius-sm)}
.tlc-libros .tl-quote__book .th-btn{width:auto}
@media (prefers-reduced-motion:reduce){
	.tlc-libros .tl-quote__img{transform:none}
}

/* 7 · RESPONSIVE ----------------------------------------------------------- */
@media (max-width:1024px){
	.tl-reco{grid-template-columns:minmax(0,1fr)}
	.tl-reco__books{max-width:640px}
}
@media (max-width:899px){
	.tl-hero-book{justify-self:center;max-width:min(260px,72vw)}

	/* Hero móvil recompuesto: eyebrow → titular → PORTADA → entradilla → CTAs.
	 * La portada sube entre el titular y el texto (display:contents aplana la
	 * columna de copy para poder intercalar la figura vía order). */
	.tlc-libros .th-hero__grid{gap:0}
	.tlc-libros .th-hero__copy{display:contents}
	.tlc-libros .th-eyebrow{order:1;margin-bottom:var(--th-sp-sm)}
	.tlc-libros .th-hero__title{order:2;margin-bottom:var(--th-sp-md)}
	.tlc-libros .tl-hero-book{order:3;margin:var(--th-sp-xs) auto var(--th-sp-lg)}
	.tlc-libros .th-hero__lede{order:4;margin-bottom:var(--th-sp-lg)}
	.tlc-libros .th-hero__actions{order:5}
}
@media (max-width:767px){
	.tl-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--th-sp-sm)}
	.tl-card{padding:var(--th-sp-sm)}
	.tlc-libros .tl-card__title{font-size:var(--th-text-sm)}
	.tl-reco__books{grid-template-columns:repeat(2,minmax(0,1fr))}
	.tl-reco__books>.tl-card:nth-child(3){display:none}
	.tl-quote{
		grid-template-columns:minmax(0,1fr);
		grid-template-areas:"text" "source" "book";
	}
	.tl-quote__text{padding:var(--th-sp-lg) 0 0}
	.tl-quote__source{margin-left:0}
	.tl-quote::before{font-size:9rem}
	.tl-quote__book{justify-self:center;margin-top:var(--th-sp-xl)}
}

/* 8 · MÓVIL PREMIUM --------------------------------------------------------- */
/* Franja de datos: 2×2 compacta SIEMPRE en móvil (las tarjetas apiladas a una
 * columna comían una pantalla entera; las claves aquí son cortas: 13 · BOE ·
 * Envío · 100%). Gana a la caída a 1 columna de home-2026.css (≤400px). */
@media (max-width:767px){
	.tlc-libros .th-facts{
		grid-template-columns:repeat(2,minmax(0,1fr));
		gap:var(--th-sp-sm);
		margin-top:var(--th-sp-xl);
	}
	.tlc-libros .th-fact{padding:var(--th-sp-sm) var(--th-sp-md)}
	.tlc-libros .th-fact__icon{width:32px;height:32px}
	.tlc-libros .th-fact__k{font-size:var(--th-text-base)}
	.tlc-libros .th-fact__v{font-size:var(--th-text-xs)}
}
@media (max-width:400px){
	.tlc-libros .th-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:639px){
	/* Entradilla del hero: un punto más contenida para no empujar la portada. */
	.tlc-libros .th-hero__lede{font-size:var(--th-text-base);line-height:1.6}

	/* Panel tinta de recomendaciones: aire contenido y covers equilibradas. */
	.tlc-libros .tl-reco{padding:var(--th-sp-lg);gap:var(--th-sp-lg)}
	.tlc-libros .tl-reco__title{font-size:clamp(1.35rem,5.6vw,1.6rem)}
	.tlc-libros .tl-reco__claim{font-size:var(--th-text-base)}
	.tlc-libros .tl-reco__books{gap:var(--th-sp-sm)}

	/* Cita: elegante, no gigante. */
	.tlc-libros .tl-quote{padding:var(--th-sp-lg) var(--th-sp-md) var(--th-sp-xl)}
	.tlc-libros .tl-quote__text{
		font-size:1.14rem;line-height:1.55;font-weight:500;
		padding:var(--th-sp-md) 0 0;
	}
	.tl-quote::before{font-size:6.5rem}
	.tl-quote__book{max-width:180px}
}