/* mmp-revista.css — visor de revista a sangre completa con vuelta de página 3D.
   Dos puestas en escena: pliego (2 páginas, escritorio) y vertical (1 página, móvil). */

.mmp-revista {
	--mmp-oro: #d4af37;
	--mmp-negro: #050505;
	--mmp-texto: #ffffff;
	--mmp-ratio: 0.7071;      /* ancho/alto de una página, lo inyecta PHP */
	--mmp-por-vista: 2;       /* páginas visibles a la vez */
	--mmp-gap: 0px;           /* separación entre páginas (solo carril de respaldo) */
	--mmp-max-alto: 100vh;    /* techo de altura */

	/* --- Flipbook --- */
	--mmp-vuelta: 0.85s;                              /* duración de la vuelta */
	--mmp-curva: cubic-bezier(0.645, 0.045, 0.355, 1);
	--mmp-perspectiva: 2600px;
	--mmp-desplaz: 0%;        /* corrimiento del libro (portada / contraportada) */
	--mmp-escala: 1;          /* zoom del libro */
	--mmp-pan-x: 0px;
	--mmp-pan-y: 0px;

	background-color: var(--mmp-negro);
	color: var(--mmp-texto);

	/* --- Sangre completa: rompe cualquier contenedor del tema --- */
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
	padding: 0;
	overflow-x: clip;         /* recorta la página que se va de pantalla al voltear */
	margin: 0 !important;
}

/* Anula el padding global del tema de bloques (has-global-padding). */
.entry-content > .mmp-revista,
.wp-block-post-content > .mmp-revista {
	margin-inline: calc(50% - 50vw);
	padding-inline: 0;
}

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

.mmp-revista__edicion {
	position: absolute;
	top: 1rem;
	left: 1.2rem;
	z-index: 5;
	margin: 0;
	font-family: 'DM Sans', sans-serif;
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--mmp-oro);
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}

/* ---------- Marco ---------- */
.mmp-revista__frame {
	position: relative;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	background: none;
}

/* ---------- Barra de herramientas (flotante sobre la revista) ---------- */
.mmp-revista__toolbar {
	position: absolute;
	top: 1rem;
	right: 1rem;
	display: flex;
	gap: 2px;
	border: 1px solid rgba(212, 175, 55, 0.6);
	border-radius: 6px;
	overflow: hidden;
	background-color: rgba(5, 5, 5, 0.85);
	z-index: 5;
}

.mmp-revista__tool {
	display: grid;
	place-items: center;
	width: 40px;
	height: 36px;
	border: none;
	background: transparent;
	color: var(--mmp-oro);
	cursor: pointer;
	transition: background-color 0.25s ease;
}

.mmp-revista__tool svg { width: 18px; height: 18px; }
.mmp-revista__tool:hover,
.mmp-revista__tool[aria-pressed="true"] { background-color: rgba(212, 175, 55, 0.22); }
.mmp-revista__tool:focus-visible { outline: 2px solid var(--mmp-oro); outline-offset: -2px; }

/* ---------- Viewport ---------- */
.mmp-revista__viewport {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	aspect-ratio: calc(var(--mmp-ratio) * var(--mmp-por-vista));
	max-height: var(--mmp-max-alto);
	background-color: #000000;
	touch-action: pan-y;
	perspective: var(--mmp-perspectiva);
	perspective-origin: 50% 45%;
}

/* En vertical la hoja sale del marco al girar: el recorte lo hace la sección. */
.mmp-revista.is-single .mmp-revista__viewport { overflow: visible; }

/* ============================================================
   CARRIL PLANO — respaldo sin JS y vista previa del editor
   ============================================================ */
.mmp-revista__track {
	display: flex;
	height: 100%;
	margin: 0;
	padding: 0;
	gap: var(--mmp-gap);
}

.mmp-revista__track[hidden] { display: none; }

.mmp-revista__page {
	flex: 0 0 calc(100% / var(--mmp-por-vista));
	margin: 0;
	padding: 0;
	height: 100%;
}

.mmp-revista__page img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* ============================================================
   LIBRO
   ============================================================ */
.mmp-revista__book {
	position: absolute;
	top: 0;
	left: 50%;
	height: 100%;
	aspect-ratio: calc(var(--mmp-ratio) * 2);
	max-width: 100%;
	transform-style: preserve-3d;
	transform:
		translate(
			calc(-50% + var(--mmp-desplaz) + var(--mmp-pan-x)),
			var(--mmp-pan-y)
		)
		scale(var(--mmp-escala));
	transition: transform 0.6s var(--mmp-curva);
}

/* Vertical: el libro mide una sola página. */
.mmp-revista.is-single .mmp-revista__book { aspect-ratio: var(--mmp-ratio); }

/* Pliego: portada y contraportada se centran en vez de quedar de lado. */
.mmp-revista.is-spread.is-closed { --mmp-desplaz: -25%; }
.mmp-revista.is-spread.is-ended  { --mmp-desplaz: 25%; }

/* Mesa: sombra bajo el libro, da peso al objeto. */
.mmp-revista__book::after {
	content: '';
	position: absolute;
	left: 4%;
	right: 4%;
	bottom: -14px;
	height: 24px;
	border-radius: 50%;
	background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0) 70%);
	transform: translateZ(-1px);
	pointer-events: none;
}

/* --- Hoja --- */
.mmp-revista__sheet {
	position: absolute;
	top: 0;
	left: 50%;
	width: 50%;
	height: 100%;
	margin: 0;
	transform-origin: left center;
	transform-style: preserve-3d;
	transition: transform var(--mmp-vuelta) var(--mmp-curva);
}

/* Vertical: la hoja ocupa todo el libro y gira hacia fuera de pantalla. */
.mmp-revista.is-single .mmp-revista__sheet { left: 0; width: 100%; }
.mmp-revista.is-single .mmp-revista__sheet.is-flipped { pointer-events: none; }

.mmp-revista__sheet.is-flipped { transform: rotateY(-180deg); }
.mmp-revista__sheet.is-turning,
.mmp-revista__sheet.is-turning-back { will-change: transform; }

/* --- Caras --- */
.mmp-revista__face {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background-color: #0a0a0a;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.mmp-revista__face--back { transform: rotateY(180deg); }

.mmp-revista__face .mmp-revista__page {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	flex: none;
}

/* Reverso sin contenido: hoja de cortesía en pliego, dorso del papel en vertical. */
.mmp-revista__face--empty {
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 55%),
		#0d0d0d;
}

/* Sombra fija del lomo: la cara siempre tiene su canto interior más oscuro.
   En el dorso el eje está espejeado, por eso el gradiente va al revés. */
.mmp-revista__face::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 2;
}
.mmp-revista__face--front::after {
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 11%);
}
.mmp-revista__face--back::after {
	background: linear-gradient(270deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 11%);
}

/* Sombra dinámica: la cara que se aleja se apaga, la que llega se enciende. */
.mmp-revista__face::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 3;
	opacity: 0;
	pointer-events: none;
	background-color: rgba(0, 0, 0, 0.62);
}

@keyframes mmpEntraSombra { from { opacity: 0; }    to { opacity: 0.62; } }
@keyframes mmpSaleSombra  { from { opacity: 0.62; } to { opacity: 0; } }

.mmp-revista__sheet.is-turning .mmp-revista__face--front::before {
	animation: mmpEntraSombra var(--mmp-vuelta) var(--mmp-curva);
}
.mmp-revista__sheet.is-turning .mmp-revista__face--back::before {
	animation: mmpSaleSombra var(--mmp-vuelta) var(--mmp-curva);
}
.mmp-revista__sheet.is-turning-back .mmp-revista__face--front::before {
	animation: mmpSaleSombra var(--mmp-vuelta) var(--mmp-curva);
}
.mmp-revista__sheet.is-turning-back .mmp-revista__face--back::before {
	animation: mmpEntraSombra var(--mmp-vuelta) var(--mmp-curva);
}

/* Reposicionar sin animar (miniaturas, cambio de breakpoint, arrastre del zoom). */
.mmp-revista__book.is-instant,
.mmp-revista__book.is-instant .mmp-revista__sheet {
	transition: none !important;
}

/* ---------- Zoom ---------- */
.mmp-revista.is-book.is-zoomed { --mmp-escala: 1.7; }
.mmp-revista.is-book.is-zoomed .mmp-revista__viewport { cursor: grab; }
.mmp-revista.is-book.is-zoomed .mmp-revista__viewport:active { cursor: grabbing; }
.mmp-revista.is-zoomed .mmp-revista__nav { opacity: 0; pointer-events: none; }

/* Respaldo sin JS (editor): el zoom actúa sobre la imagen del carril. */
.mmp-revista:not(.is-book).is-zoomed .mmp-revista__viewport { overflow: auto; cursor: grab; }
.mmp-revista:not(.is-book).is-zoomed .mmp-revista__page img { transform: scale(1.85); transform-origin: center top; }

/* ---------- Flechas ---------- */
.mmp-revista__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(212, 175, 55, 0.5);
	border-radius: 50%;
	background-color: rgba(5, 5, 5, 0.7);
	color: var(--mmp-oro);
	cursor: pointer;
	z-index: 6;
	transition: background-color 0.25s ease, opacity 0.25s ease;
}

.mmp-revista__nav svg { width: 22px; height: 22px; }
.mmp-revista__nav--prev { left: 1rem; }
.mmp-revista__nav--next { right: 1rem; }
.mmp-revista__nav:hover { background-color: rgba(212, 175, 55, 0.3); }
.mmp-revista__nav:focus-visible { outline: 2px solid var(--mmp-oro); outline-offset: 2px; }
.mmp-revista__nav[disabled] { opacity: 0.25; cursor: default; }

/* ---------- Barra de progreso ---------- */
.mmp-revista__progress {
	position: relative;
	z-index: 6;
	height: 3px;
	margin: 0;
	border-radius: 0;
	background-color: rgba(255, 255, 255, 0.15);
	overflow: hidden;
}

.mmp-revista__progress-bar {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 0;
	background: linear-gradient(90deg, var(--mmp-oro), #9b1b30);
	transition: width 0.45s ease;
}

/* ---------- Miniaturas ---------- */
.mmp-revista__thumbs {
	position: relative;
	z-index: 6;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
	gap: 0.6rem;
	margin: 0;
	padding: 1rem;
	max-height: 320px;
	overflow-y: auto;
	background-color: rgba(0, 0, 0, 0.6);
}

.mmp-revista__thumbs[hidden] { display: none; }

.mmp-revista__thumb {
	position: relative;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 4px;
	background: transparent;
	cursor: pointer;
	overflow: hidden;
	transition: border-color 0.25s ease;
}

.mmp-revista__thumb img { display: block; width: 100%; height: auto; }
.mmp-revista__thumb span {
	position: absolute;
	bottom: 0;
	right: 0;
	padding: 1px 6px;
	font-family: 'DM Sans', sans-serif;
	font-size: 10px;
	background-color: rgba(5, 5, 5, 0.8);
	color: var(--mmp-oro);
}
.mmp-revista__thumb:hover,
.mmp-revista__thumb.is-current { border-color: var(--mmp-oro); }

/* ---------- Pie ---------- */
.mmp-revista__footer {
	position: relative;
	z-index: 6;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 2rem;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 1rem;
	background-color: var(--mmp-negro);
	font-family: 'DM Sans', sans-serif;
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.mmp-revista__counter { color: #cccccc; }

.mmp-revista__download {
	display: inline-flex;
	align-items: center;
	padding: 0.6rem 1.4rem;
	border: 1px solid var(--mmp-oro);
	border-radius: 4px;
	color: var(--mmp-oro);
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.mmp-revista__download:hover { background-color: var(--mmp-oro); color: var(--mmp-negro); }

/* ---------- Estado vacío y editor ---------- */
.mmp-revista__empty {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 3rem;
	text-align: center;
	font-family: 'DM Sans', sans-serif;
	font-size: 13px;
	color: #cccccc;
}
.mmp-revista__empty strong { color: var(--mmp-oro); font-size: 16px; letter-spacing: 2px; }

/* En el editor no corre el viewScript: mostramos solo el primer pliego. */
.mmp-revista--preview .mmp-revista__page:nth-child(n + 3) { display: none; }
.mmp-revista--preview .mmp-revista__nav,
.mmp-revista--preview .mmp-revista__thumbs { display: none; }

/* El lienzo del editor es más angosto que la ventana: ahí no forzamos 100vw. */
.editor-styles-wrapper .mmp-revista {
	width: 100%;
	max-width: 100%;
	margin-inline: 0;
}

/* ---------- Pantalla completa ---------- */
.mmp-revista:fullscreen {
	width: 100vw;
	margin-inline: 0;
	display: grid;
	align-content: center;
}
.mmp-revista:fullscreen .mmp-revista__viewport { max-height: 100vh; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.mmp-revista {
		--mmp-por-vista: 1;
		--mmp-perspectiva: 1200px;  /* la hoja es angosta: menos perspectiva, más volumen */
		--mmp-vuelta: 0.7s;
	}
	.mmp-revista__nav { width: 38px; height: 38px; }
	.mmp-revista__nav--prev { left: 0.5rem; }
	.mmp-revista__nav--next { right: 0.5rem; }
	.mmp-revista__footer { flex-direction: column; gap: 0.8rem; }
	.mmp-revista__toolbar { top: 0.6rem; right: 0.6rem; }
	.mmp-revista__edicion { top: 0.7rem; left: 0.8rem; }
}

@media (prefers-reduced-motion: reduce) {
	.mmp-revista { --mmp-vuelta: 0.001s; }
	.mmp-revista__book,
	.mmp-revista__sheet,
	.mmp-revista__progress-bar { transition: none; }
	.mmp-revista__face::before { animation: none !important; }
}
/* Fuera de la ventana la hoja no existe como capa: en iOS cada cara
   compuesta reserva memoria de vídeo y una revista entera tumba la pestaña. */
.mmp-revista__sheet.is-lejos { display: none; }