/*
 * Estilos del visor de primeros capítulos.
 *
 * El fondo NO es negro puro: es el petróleo oscuro de la marca. Un negro plano
 * detrás de un libro parece un lector de PDF; este tono lo convierte en una sala
 * de lectura, y además es el color que la web ya usa en titulares.
 *
 * Los colores de marca salen de los tokens (`mestas-tokens.php`), con un valor de
 * respaldo por si el visor se abriera donde no estén cargados.
 */

:root {
	--mv-fondo: #10262b;          /* petróleo oscuro, hermano del #15414a de marca */
	--mv-fondo-2: #0b1b1f;
	--mv-tinta: #f4f1ec;          /* blanco cálido: el blanco puro sobre oscuro deslumbra */
	--mv-suave: rgba( 244, 241, 236, .62 );
	--mv-linea: rgba( 244, 241, 236, .14 );
	--mv-marca: var( --mestas-marca, #ef4138 );
	--mv-acento: var( --mestas-acento, #00c2d0 );
}

#mestas-visor-cargando {
	position: fixed;
	inset: auto 0 1.5rem 0;
	margin: 0 auto;
	width: max-content;
	max-width: 90vw;
	padding: .65rem 1.3rem;
	border-radius: 999px;
	background: rgba( 16, 38, 43, .93 );
	color: #fff;
	font: 500 .95rem/1.2 var( --mestas-fuente-texto, Inter, system-ui, sans-serif );
	box-shadow: 0 8px 30px rgba( 0, 0, 0, .4 );
	z-index: 2147483000;
}
#mestas-visor-cargando::after {
	content: '';
	display: inline-block;
	width: 13px; height: 13px;
	margin-left: .6rem;
	vertical-align: -2px;
	border: 2px solid rgba( 255, 255, 255, .3 );
	border-top-color: #fff;
	border-radius: 50%;
	animation: mv-gira 0.8s linear infinite;
}
@keyframes mv-gira { to { transform: rotate( 360deg ); } }

body.mv-abierto { overflow: hidden; }

.mv {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: flex;
	flex-direction: column;
	background:
		radial-gradient( 120% 80% at 50% 42%, var( --mv-fondo ) 0%, var( --mv-fondo-2 ) 100% );
	color: var( --mv-tinta );
	font-family: var( --mestas-fuente-texto, Inter, system-ui, sans-serif );
	animation: mv-entra .22s ease-out;
}
@keyframes mv-entra { from { opacity: 0; } to { opacity: 1; } }

/* ── Cabecera ─────────────────────────────────────────────────────────────── */
.mv-cab {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .55rem clamp( .7rem, 2vw, 1.4rem );
	border-bottom: 1px solid var( --mv-linea );
	flex: 0 0 auto;
}
.mv-tit { min-width: 0; line-height: 1.25; }
.mv-tit strong {
	display: block;
	font-family: var( --mestas-fuente-titular, Heebo, system-ui, sans-serif );
	font-size: clamp( .95rem, 2.2vw, 1.08rem );
	font-weight: 800;
	letter-spacing: -.01em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.mv-tit span { font-size: .8rem; color: var( --mv-suave ); }

/* Un «Volver» con todas las letras, además de la X. La X la entiende quien ya
   sabe que está en una ventana; «Volver al libro» lo entiende todo el mundo, y
   además dice ADÓNDE se vuelve, que es lo que la gente quiere saber. */
.mv-volver {
	display: flex; align-items: center; gap: .5rem;
	margin-left: auto; margin-right: .6rem;
	padding: .55rem 1rem .55rem .8rem;
	min-height: 44px;
	border: 1px solid var( --mv-linea );
	border-radius: 999px;
	background: transparent;
	color: var( --mv-tinta );
	font: 600 .86rem/1 var( --mestas-fuente-texto, Inter, system-ui, sans-serif );
	cursor: pointer;
	transition: background .15s, border-color .15s, transform .15s;
}
.mv-volver:hover { background: rgba( 244, 241, 236, .1 ); border-color: transparent; transform: translateX( -2px ); }
.mv-volver:focus-visible { outline: 2px solid var( --mv-acento ); }

.mv-acc { display: flex; gap: .3rem; flex: 0 0 auto; }

/* 44 px de lado: por debajo no se pulsa con el pulgar. */
.mv-b {
	display: grid;
	place-items: center;
	width: 44px; height: 44px;
	border: 0; border-radius: 10px;
	background: transparent;
	color: var( --mv-tinta );
	cursor: pointer;
	transition: background .15s;
}
.mv-b:hover, .mv-b:focus-visible { background: rgba( 244, 241, 236, .12 ); }
.mv-b:focus-visible { outline: 2px solid var( --mv-acento ); outline-offset: -2px; }
.mv-cerrar:hover { background: var( --mv-marca ); }

/* ── La escena ────────────────────────────────────────────────────────────── */
.mv-escena {
	position: relative;
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: 54px 1fr 54px;
	align-items: center;
	justify-items: center;
	gap: .3rem;
	padding: .6rem .4rem;
	min-height: 0;
	overflow: hidden;
}

.mv-zona {
	display: grid;
	place-items: center;
	transition: transform .2s ease-out;
	will-change: transform;
}
.mv-ampliado .mv-zona { cursor: grab; }

/* El libro lo monta StPageFlip: aquí sólo se le da el suelo, el volumen y la
   sombra. Las clases `stf__*` son suyas; se tocan lo justo. */
.mv-libro {
	position: relative;
	filter: drop-shadow( 0 26px 46px rgba( 0, 0, 0, .62 ) );
}

/* ── EL GROSOR DEL LIBRO ──────────────────────────────────────────────────────
   El canto de hojas a cada lado. Es lo que más hace que parezca un objeto y no
   una pantalla: sin él, dos páginas flotando en negro son dos rectángulos.
   Las rayitas del degradado son las hojas; con un color plano parece plástico.
   Se dibujan DETRÁS (z-index negativo) para que la hoja que gira pase por
   encima, como pasa en el papel. */
.mv-libro::before, .mv-libro::after {
	content: '';
	position: absolute;
	top: 6px; bottom: 6px;
	width: 16px;
	z-index: -1;
	pointer-events: none;
}
.mv-libro::before {
	left: -13px;
	background: repeating-linear-gradient( to right, #fbfaf6 0 1px, #cfc9be 1px 2px );
	border-radius: 4px 0 0 4px;
	box-shadow: -4px 10px 18px -8px rgba( 0, 0, 0, .7 );
}
.mv-libro::after {
	right: -13px;
	background: repeating-linear-gradient( to left, #fbfaf6 0 1px, #cfc9be 1px 2px );
	border-radius: 0 4px 4px 0;
	box-shadow: 4px 10px 18px -8px rgba( 0, 0, 0, .7 );
}
/* En una sola página (teléfono) no hay taco a los lados: es una hoja. */
.mv-una .mv-libro::before, .mv-una .mv-libro::after { display: none; }
/* Libro cerrado (solo la tapa): sin bloque de páginas, que ahí queda flotando. */
.mv-tapa .mv-libro::before, .mv-tapa .mv-libro::after { display: none; }

/* Un punto de textura de papel. Muy sutil a propósito: si se nota, ensucia el
   texto; si no está, el blanco de la pantalla delata que no es papel. */
.mv-pagina::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: .5;
	background-image:
		radial-gradient( circle at 20% 30%, rgba( 120, 100, 70, .022 ) 0 1px, transparent 1px ),
		radial-gradient( circle at 70% 60%, rgba( 120, 100, 70, .020 ) 0 1px, transparent 1px );
	background-size: 7px 7px, 11px 11px;
}

.mv-pagina {
	background: #fdfcfa;
	overflow: hidden;
}
.mv-pagina canvas { display: block; width: 100%; height: 100%; }

/* Mientras una hoja no está pintada, papel en blanco en vez de un hueco negro. */
.mv-pagina:not(.mv-lista)::after {
	content: '';
	position: absolute;
	inset: 0;
	background: #fdfcfa;
}

/* ── LA SOMBRA DEL LOMO ───────────────────────────────────────────────────────
   La librería dibuja el pliegue MIENTRAS pasas la hoja, pero en reposo deja las
   dos páginas planas y blancas: se pierde el centro del libro y parecen dos
   folios pegados. Este degradado lo devuelve.

   ⚠️ EL SELECTOR VA EN EL MISMO ELEMENTO, sin espacio. StPageFlip no envuelve la
   página: le AÑADE sus clases encima, así que el elemento es
   `.mv-pagina.stf__item.--left`. Escrito como descendiente («.stf__item
   .mv-pagina») no casa con nada y la sombra no aparece: eso fue exactamente lo
   que pasó, y por eso el libro se veía todo blanco por el centro. */
.mv-pagina::before {
	content: '';
	position: absolute;
	top: 0; bottom: 0;
	width: 9%;
	z-index: 3;
	pointer-events: none;
}
.mv-pagina.--left::before {
	right: 0;
	background: linear-gradient( to right,
		transparent 0%,
		rgba( 45, 33, 22, .025 ) 55%,
		rgba( 38, 28, 18, .075 ) 82%,
		rgba( 28, 20, 12, .19 ) 100% );
}
.mv-pagina.--right::before {
	left: 0;
	background: linear-gradient( to left,
		transparent 0%,
		rgba( 45, 33, 22, .025 ) 55%,
		rgba( 38, 28, 18, .075 ) 82%,
		rgba( 28, 20, 12, .19 ) 100% );
}
/* La cubierta va sola y no tiene lomo contra el que curvarse. */
.mv-p-cubierta::before { display: none; }

/* ── Flechas ──────────────────────────────────────────────────────────────── */
.mv-flecha {
	display: grid; place-items: center;
	width: 48px; height: 84px;
	border: 0; border-radius: 12px;
	background: rgba( 244, 241, 236, .06 );
	color: var( --mv-tinta );
	cursor: pointer;
	transition: background .15s, transform .15s;
}
.mv-flecha:hover:not(:disabled) { background: rgba( 244, 241, 236, .16 ); transform: scale( 1.04 ); }
.mv-flecha:disabled { opacity: .16; cursor: default; }
.mv-flecha:focus-visible { outline: 2px solid var( --mv-acento ); }

/* ── Pie ──────────────────────────────────────────────────────────────────── */
.mv-pie {
	display: flex;
	align-items: center;
	gap: .9rem;
	padding: .5rem clamp( .7rem, 2vw, 1.4rem ) calc( .5rem + env( safe-area-inset-bottom ) );
	border-top: 1px solid var( --mv-linea );
	flex: 0 0 auto;
}
.mv-rango {
	flex: 1 1 auto;
	height: 26px;
	accent-color: var( --mv-marca );
	cursor: pointer;
}
.mv-cuenta { font-size: .8rem; color: var( --mv-suave ); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ── Índice de páginas ────────────────────────────────────────────────────── */
/* ⚠️ `display: grid` ANULA el atributo `hidden`, que equivale a `display: none`.
   Sin esta regla el panel sigue ahí, invisible y a pantalla completa, y se come
   todos los clics: el visor parecía muerto. Lo mismo vale para `.mv-flip`. */
.mv-tiras[hidden], .mv-flip[hidden] { display: none !important; }

.mv-tiras {
	position: absolute;
	inset: 0;
	z-index: 20;
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 110px, 1fr ) );
	gap: .8rem;
	padding: 1rem;
	overflow-y: auto;
	background: rgba( 11, 27, 31, .97 );
	backdrop-filter: blur( 6px );
}
.mv-tira {
	position: relative;
	border: 1px solid var( --mv-linea );
	border-radius: 4px;
	background: #fff;
	padding: 0;
	cursor: pointer;
	line-height: 0;
	transition: transform .12s, border-color .12s;
}
.mv-tira:hover { transform: translateY( -3px ); border-color: var( --mv-marca ); }
.mv-tira canvas { width: 100%; height: auto; display: block; }
.mv-tira span {
	position: absolute;
	inset: auto .25rem .25rem auto;
	padding: .05rem .35rem;
	border-radius: 4px;
	background: rgba( 11, 27, 31, .82 );
	color: var( --mv-tinta );
	font-size: .7rem; line-height: 1.5;
}

/* ── Avisos flotantes ─────────────────────────────────────────────────────── */
.mv-seguir {
	position: absolute;
	inset: auto auto 1rem 50%;
	transform: translateX( -50% );
	display: flex; align-items: center; gap: .7rem;
	padding: .55rem .6rem .55rem 1rem;
	border-radius: 999px;
	background: rgba( 11, 27, 31, .95 );
	border: 1px solid var( --mv-linea );
	font-size: .85rem;
	z-index: 12;
	animation: mv-sube .3s ease-out;
}
@keyframes mv-sube { from { opacity: 0; transform: translate( -50%, 12px ); } to { opacity: 1; transform: translate( -50%, 0 ); } }
.mv-seguir button {
	border: 0; border-radius: 999px;
	padding: .4rem 1rem;
	background: var( --mv-marca );
	color: #fff; font-weight: 700; cursor: pointer;
}

/* ── El final de la muestra ───────────────────────────────────────────────── */
.mv-fin {
	position: absolute;
	inset: auto 0 1.2rem 0;
	margin: 0 auto;
	width: min( 34rem, 92% );
	padding: 1.2rem 1.4rem;
	border-radius: 16px;
	background: rgba( 11, 27, 31, .96 );
	border: 1px solid var( --mv-linea );
	box-shadow: 0 20px 60px rgba( 0, 0, 0, .5 );
	text-align: center;
	z-index: 15;
	animation: mv-sube .35s ease-out;
}
.mv-fin-t {
	margin: 0 0 .35rem;
	font-family: var( --mestas-fuente-titular, Heebo, system-ui, sans-serif );
	font-weight: 800; font-size: 1.1rem;
}
.mv-fin p { margin: 0 0 .9rem; font-size: .88rem; color: var( --mv-suave ); }
.mv-fin-b { display: flex; gap: .6rem; justify-content: center; align-items: center; flex-wrap: wrap; }
/* ── LOS BOTONES DE COMPRA, EXACTAMENTE LOS DE LA FICHA ───────────────────────
   Mismos colores y mismo cambio al pasar el ratón que en la ficha del libro
   (`mestas-ficha-lab-tpl/estilos.css`), copiados de allí y no inventados:

     · Amazon      → turquesa #00c7ce, y al pasar el ratón rojo #ef4138
     · Buscalibre  → rojo #ef4138, y al pasar el ratón turquesa #00c2d0

   Los tenía yo al revés. Y el naranja de Amazon se descarta a propósito: la web
   lleva años con este botón y el cliente lo reconoce así. */
.mv-comprar {
	display: inline-block;
	padding: .8rem 1.5rem;
	border: 1px solid transparent;
	border-radius: 10px;
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
	transition: background .18s, border-color .18s;
}
/* Amazon, y el mismo tono para el botón que quiera pedirlo con `tono: 'acento'`
   (en el catálogo, «Escribir a Carlos»: es la acción que se quiere, así que va
   en el color que no lleva ningún otro botón de la caja). */
.mv-comprar-amz, .mv-comprar-alt { background: #00c7ce; border-color: #00c7ce; color: #fff; }
.mv-comprar-amz:hover, .mv-comprar-alt:hover { background: #ef4138; border-color: #ef4138; color: #fff; }
/* Buscalibre */
.mv-comprar-bl { background: #ef4138; border-color: #ef4138; color: #fff; }
.mv-comprar-bl:hover { background: #00c2d0; border-color: #00c2d0; color: #fff; }
/* Descargar el PDF. Va MÁS PEQUEÑO y sin relleno a propósito: es la salida
   secundaria. Los dos de al lado piden una conversación, que es lo que se
   busca; este solo se lleva el documento, y con el mismo peso visual les
   robaría el clic. La flecha lo dice antes de leerlo. */
.mv-comprar-pdf {
	display: inline-flex; align-items: center; gap: .4rem;
	padding: .5rem .9rem;
	font-size: .82rem; font-weight: 700;
	background: transparent;
	border-color: var( --mv-linea );
	color: var( --mv-suave );
}
.mv-comprar-pdf:hover { border-color: var( --mv-acento ); color: var( --mv-tinta ); }
.mv-fin-x {
	margin-top: .8rem;
	border: 0; background: none;
	color: var( --mv-suave );
	font-size: .82rem; text-decoration: underline; cursor: pointer;
}

/* ── Teléfono ─────────────────────────────────────────────────────────────── */
@media ( max-width: 899px ) {
	.mv-escena { grid-template-columns: 1fr; padding: .4rem; }

	/* El aviso de «seguir donde lo dejaste», más pequeño: en 390 px ocupaba media
	   pantalla y tapaba el libro, que es lo que la gente ha venido a ver. Tiene
	   que recordar, no estorbar. */
	.mv-seguir {
		bottom: .5rem;
		gap: .45rem;
		padding: .3rem .3rem .3rem .7rem;
		font-size: .72rem;
		max-width: 92%;
	}
	.mv-seguir button { padding: .3rem .7rem; font-size: .72rem; }
	.mv-flecha { display: none; }            /* aquí se pasa con el dedo */
	/* En 390 px, el título y el botón de volver no caben los dos, y el título ya
	   está en la ficha de detrás: manda el botón. */
	.mv-tit { display: none; }
	.mv-volver { margin-left: 0; margin-right: auto; }
	.mv-pantalla { display: none; }          /* en el móvil ya es pantalla completa */
	.mv-tiras { grid-template-columns: repeat( auto-fill, minmax( 84px, 1fr ) ); }
}

/* Con «reducir movimiento» se acorta la entrada, pero el giro de página SE
   MANTIENE: apagarlo del todo dejaba el visor pareciendo roto. Quien no lo quiera
   tiene el interruptor de la barra. */
@media ( prefers-reduced-motion: reduce ) {
	.mv, .mv-fin, .mv-seguir { animation-duration: .01ms; }
}
.mv-sin-anim .mv-flip.mv-girando,
.mv-sin-anim .mv-vuela .mv-sombra-vuelo { animation-duration: .01ms !important; }
.mv-sin-anim .mv-anim { opacity: .4; }