/* =========================================================================
 * Mi Propia Historia — página de inicio
 * ====================================================================== */

.mph-inicio {
	--i-blanco: #FFFFFF;
	--i-arena: #F6F1EC;
	--i-cielo: #F8F0DA;
	--i-salvia: #B5D3CB;
	--i-rubor: #EFCFC0;
	--i-caramelo: #D98E5B;
	--i-canela: #A8613A;
	--i-tinta: #2B2522;
	--i-gris: #574E49;
	--i-gris-suave: #6E6560;
	--i-linea: #E3DAD2;
	--i-mano: 'Caveat', cursive;

	font-family: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
	color: var(--i-tinta);
	background: var(--i-blanco);
	overflow: hidden;
	-webkit-font-smoothing: antialiased;
}

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

.mph-inicio a {
	color: var(--i-tinta);
	text-decoration: none !important;
}

.mph-inicio section {
	position: relative;
}

.mph-i-contenedor {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 32px;
}

.mph-i-angosto {
	max-width: 860px;
}

.mph-i-centro {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

/* ---------- Tipografía ---------- */
.mph-i-h1 {
	margin: 0;
	font-weight: 400;
	font-size: clamp(32px, 4.2vw, 54px);
	line-height: 1.15;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--i-tinta);
}

.mph-i-h2 {
	margin: 0;
	font-weight: 400;
	font-size: clamp(24px, 2.8vw, 34px);
	line-height: 1.35;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--i-tinta);
	max-width: 780px;
}

.mph-i-h3 {
	margin: 0;
	font-weight: 500;
	font-size: 16px;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.mph-i-h3-serif {
	margin: 0;
	font-weight: 400;
	font-size: 24px;
}

.mph-i-lead {
	margin: 0;
	font-size: 18px;
	line-height: 1.75;
	color: var(--i-gris);
	max-width: 470px;
}

.mph-i-texto {
	margin: 0;
	font-size: 17px;
	line-height: 1.8;
	color: var(--i-gris-suave);
	max-width: 640px;
}

.mph-i-mano {
	font-family: var(--i-mano);
	font-weight: 700;
	font-size: 26px;
	line-height: 1;
	color: var(--i-caramelo);
}

/* ---------- Botones ---------- */
.mph-inicio .mph-i-boton,
.mph-inicio .mph-i-boton-linea {
	display: inline-block;
	font-weight: 500;
	font-size: 13px;
	letter-spacing: .18em;
	text-transform: uppercase;
	text-align: center;
	padding: 19px 36px;
	transition: background-color .25s, color .25s, transform .25s, box-shadow .25s;
}

.mph-inicio .mph-i-boton {
	background: var(--i-canela);
	color: #FFFFFF;
}

.mph-inicio .mph-i-boton:hover,
.mph-inicio .mph-i-boton:focus-visible {
	background: #8F5130;
	color: #FFFFFF;
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(168, 97, 58, .22);
}

.mph-inicio .mph-i-boton-linea {
	border: 1px solid var(--i-tinta);
	color: var(--i-tinta);
}

.mph-inicio .mph-i-boton-linea:hover,
.mph-inicio .mph-i-boton-linea:focus-visible {
	background: var(--i-tinta);
	color: #FFFFFF;
}

.mph-inicio .mph-i-enlace {
	display: inline-block;
	font-weight: 500;
	font-size: 13px;
	letter-spacing: .18em;
	text-transform: uppercase;
	padding: 12px 0 6px;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 100% 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size .35s ease, color .25s;
}

.mph-inicio .mph-i-enlace:hover {
	color: var(--i-canela);
	background-size: 40% 1px;
}

.mph-inicio a:focus-visible {
	outline: 2px solid var(--i-caramelo);
	outline-offset: 3px;
}

/* ---------- Portada ---------- */
.mph-i-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	background: var(--i-cielo);
	min-height: min(88vh, 760px);
}

.mph-i-hero-foto {
	position: relative;
	overflow: hidden;
	min-height: 480px;
}

.mph-i-hero-foto .mph-i-foto-img,
.mph-i-hero-foto .mph-i-foto-vacia {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.mph-i-foto-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mph-i-foto-vacia {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.mph-i-foto-vacia .mph-deco-arcoiris {
	opacity: .85;
}

.mph-i-mancha {
	position: absolute;
	left: 40px;
	bottom: 40px;
	width: 230px;
	height: 150px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--i-salvia);
	border-radius: 46% 54% 42% 58% / 55% 45% 55% 45%;
	transform: rotate(-6deg);
	text-align: center;
	box-shadow: 0 12px 30px rgba(43, 37, 34, .08);
}

.mph-i-mancha span {
	font-family: var(--i-mano);
	font-weight: 700;
	font-size: 32px;
	line-height: 1;
	color: var(--i-tinta);
}

.mph-i-hero-texto {
	position: relative;
	padding: clamp(48px, 7vw, 96px) clamp(28px, 5vw, 72px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 30px;
}

.mph-i-hero-texto > .mph-deco-arcoiris {
	position: absolute;
	right: clamp(28px, 5vw, 64px);
	top: 48px;
}

.mph-i-botones {
	display: flex;
	gap: 26px;
	flex-wrap: wrap;
	align-items: center;
}

.mph-i-ramita {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 14px;
	color: var(--i-tinta);
}

.mph-i-ramita p {
	margin: 0;
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
	line-height: 1.8;
}

/* ---------- Introducción ---------- */
.mph-i-intro {
	padding: clamp(80px, 10vw, 120px) 0 clamp(64px, 8vw, 96px);
}

.mph-i-deco {
	position: absolute;
	pointer-events: none;
}

.mph-i-deco-1 { left: 12%; top: 90px; }
.mph-i-deco-2 { right: 14%; top: 150px; }
.mph-i-deco-3 { left: 4%; top: 80px; }
.mph-i-deco-4 { right: -16px; top: -16px; }

/* ---------- Familia ---------- */
.mph-i-familia {
	padding: 0 0 clamp(80px, 10vw, 120px);
}

.mph-i-dos {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(40px, 6vw, 80px);
	align-items: center;
}

.mph-i-columna {
	display: flex;
	flex-direction: column;
	gap: 22px;
	align-items: flex-start;
}

.mph-i-izq {
	text-align: left;
}

.mph-i-foto {
	position: relative;
	overflow: hidden;
}

.mph-i-foto-ancha {
	position: relative;
	aspect-ratio: 5 / 3.4;
	max-width: 100%;
}

.mph-i-foto-ancha > .mph-i-marco {
	position: absolute;
	inset: 0;
}

.mph-i-foto-ancha > .mph-deco-corazones {
	position: absolute;
	right: -22px;
	top: -30px;
	z-index: 1;
}

.mph-i-foto-alta {
	aspect-ratio: 3 / 4;
}

.mph-i-capitulo:hover .mph-i-foto-alta .mph-i-foto-img {
	scale: 1.04;
}

/* ---------- Cómo funciona ---------- */
.mph-i-como {
	background: var(--i-arena);
	padding: clamp(80px, 10vw, 110px) 0;
}

.mph-i-pasos {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 36px;
	margin-top: 60px;
	text-align: center;
}

.mph-i-paso {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

.mph-i-paso p {
	margin: 0;
	color: var(--i-gris-suave);
	line-height: 1.7;
}

.mph-i-paso-icono {
	width: 88px;
	height: 88px;
	border-radius: 50%;
	background: var(--i-blanco);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}

.mph-i-paso:hover .mph-i-paso-icono {
	transform: translateY(-4px) rotate(-4deg);
}

/* ---------- Capítulos ---------- */
.mph-i-capitulos {
	padding: clamp(80px, 10vw, 120px) 0 clamp(70px, 9vw, 110px);
}

.mph-i-tres {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 36px;
	margin-top: 56px;
}

.mph-i-capitulo {
	display: flex;
	flex-direction: column;
	gap: 18px;
	text-align: center;
}

.mph-i-capitulo p {
	margin: 0;
	color: var(--i-gris-suave);
	line-height: 1.7;
}

.mph-i-lista {
	margin: 56px auto 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 30px;
	max-width: 900px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.mph-i-separador {
	color: var(--i-caramelo);
}

/* ---------- Palabras ---------- */
.mph-i-palabras {
	background: var(--i-arena);
	padding: clamp(80px, 10vw, 110px) 0;
}

.mph-i-cita {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	text-align: center;
}

.mph-i-corazones {
	display: flex;
	gap: 6px;
}

.mph-i-corazones .mph-i-deco {
	position: static;
}

.mph-i-cita blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 21px;
	line-height: 1.55;
	font-style: normal;
	color: var(--i-tinta);
}

.mph-i-cita figcaption {
	font-size: 12px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--i-gris-suave);
}

/* ---------- Planes ---------- */
.mph-i-planes {
	padding: clamp(80px, 10vw, 120px) 0;
}

.mph-i-tarifas {
	align-items: stretch;
}

.mph-i-plan {
	position: relative;
	border: 1px solid var(--i-linea);
	padding: 44px 32px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	text-align: center;
	background: var(--i-blanco);
	transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s;
}

.mph-i-plan:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 40px rgba(43, 37, 34, .07);
}

.mph-i-plan.is-destacado {
	background: var(--i-arena);
	border-color: var(--i-arena);
}

.mph-i-favorito {
	position: absolute;
	top: -20px;
	left: 50%;
	transform: translateX(-50%) rotate(-3deg);
	background: var(--i-salvia);
	font-family: var(--i-mano);
	font-weight: 700;
	font-size: 22px;
	padding: 4px 18px;
	border-radius: 40% 60% 50% 50%;
	white-space: nowrap;
}

.mph-i-precio {
	margin: 0;
	font-weight: 300;
	font-size: 56px;
	line-height: 1;
}

.mph-i-periodo {
	margin: -10px 0 0;
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--i-gris-suave);
}

.mph-i-plan ul {
	margin: 0;
	padding: 22px 0 0;
	border-top: 1px solid var(--i-linea);
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
	line-height: 1.5;
	color: var(--i-gris);
	flex-grow: 1;
}

.mph-i-plan .mph-i-boton,
.mph-i-plan .mph-i-boton-linea {
	padding-left: 16px;
	padding-right: 16px;
}

/* ---------- Preguntas ---------- */
.mph-i-preguntas {
	padding: 0 0 clamp(80px, 10vw, 120px);
}

.mph-i-faq {
	margin-top: 40px;
	border-top: 1px solid var(--i-linea);
}

.mph-i-faq details {
	border-bottom: 1px solid var(--i-linea);
	padding: 0 4px;
}

.mph-i-faq summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 24px 0;
	font-size: 18px;
	cursor: pointer;
	list-style: none;
}

.mph-i-faq summary::-webkit-details-marker {
	display: none;
}

.mph-i-mas {
	font-size: 28px;
	font-weight: 300;
	line-height: 1;
	color: var(--i-canela);
	transition: transform .3s ease;
}

.mph-i-faq details[open] .mph-i-mas {
	transform: rotate(45deg);
}

.mph-i-faq details p {
	margin: 0 0 24px;
	line-height: 1.75;
	color: var(--i-gris-suave);
	animation: mph-i-aparecer .45s ease both;
}

/* ---------- Cierre ---------- */
.mph-i-cierre {
	min-height: 560px;
	display: flex;
	align-items: center;
	background: #EFE7E0;
	overflow: hidden;
}

.mph-i-cierre-foto {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.mph-i-cierre-foto .mph-i-foto-img,
.mph-i-cierre-foto .mph-i-foto-vacia {
	position: absolute;
	left: 0;
	right: 0;
	top: -12%;
	height: 124%;
	width: 100%;
}

.mph-i-cierre-foto .mph-i-foto-vacia {
	justify-content: flex-end;
	padding-right: 12%;
}

.mph-i-cierre-interior {
	position: relative;
	width: 100%;
	max-width: 1400px;
	padding-top: 72px;
	padding-bottom: 72px;
}

.mph-i-caja {
	position: relative;
	background: var(--i-blanco);
	max-width: 420px;
	padding: 56px 44px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 20px;
	text-align: center;
}

.mph-i-caja .mph-i-h2 {
	font-size: 26px;
}

.mph-i-caja p {
	margin: 0;
	color: var(--i-gris-suave);
	line-height: 1.7;
}

.mph-i-caja .mph-i-enlace {
	align-self: center;
}


/* ---------- Marcos de foto: cortina + paralaje ---------- */
.mph-i-marco {
	position: relative;
	overflow: hidden;
}

.mph-i-marco > .mph-i-foto-img,
.mph-i-marco > .mph-i-foto-vacia {
	position: absolute;
	left: 0;
	right: 0;
	top: -8%;
	width: 100%;
	height: 116%;
	will-change: transform;
}

.mph-i-hero-foto.mph-i-marco > .mph-i-foto-img,
.mph-i-hero-foto.mph-i-marco > .mph-i-foto-vacia {
	inset: auto;
	left: 0;
	right: 0;
	top: -6%;
	height: 112%;
}

.mph-i-cortina {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: var(--i-arena);
	transform-origin: right center;
	transform: scaleX(0);
	pointer-events: none;
}

.mph-i-hero-foto .mph-i-cortina {
	background: var(--i-cielo);
	transform-origin: left center;
}

.mph-i-hero-foto .mph-i-mancha {
	z-index: 3;
}

.mph-i-deco-5 { right: 6%; top: 56px; }

/* =========================================================================
 * Animaciones suaves
 * ====================================================================== */

@keyframes mph-i-aparecer {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

@keyframes mph-i-flotar {
	0%, 100% { translate: 0 0; }
	50% { translate: 0 -10px; }
}

@keyframes mph-i-mecer {
	0%, 100% { transform: rotate(-6deg); }
	50% { transform: rotate(-2deg) translateY(-4px); }
}

@keyframes mph-i-girar {
	to { rotate: 360deg; }
}

@keyframes mph-i-zoom {
	from { transform: scale(1.08); }
	to { transform: scale(1); }
}

@keyframes mph-i-arcoiris {
	from { stroke-dashoffset: 200; }
	to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: no-preference) {
	.mph-i-flotar { animation: mph-i-flotar 6s ease-in-out infinite; }
	.mph-i-flotar-lento { animation: mph-i-flotar 9s ease-in-out infinite 1s; }
	.mph-i-mecer { animation: mph-i-mecer 7s ease-in-out infinite; }
	.mph-i-girar { animation: mph-i-girar 40s linear infinite; }
	.mph-i-hero-texto > .mph-deco-arcoiris,
	.mph-i-foto-ancha > .mph-deco-corazones { animation: mph-i-flotar 7s ease-in-out infinite; }

	.mph-js .mph-i-arcoiris-grande path {
		stroke-dasharray: 200;
		stroke-dashoffset: 200;
	}

	.mph-js .mph-i-arcoiris-grande.is-visible path {
		animation: mph-i-arcoiris 1.6s cubic-bezier(.3, .7, .2, 1) forwards;
	}

	.mph-js .mph-i-arcoiris-grande.is-visible path:nth-child(2) { animation-delay: .2s; }
	.mph-js .mph-i-arcoiris-grande.is-visible path:nth-child(3) { animation-delay: .4s; }

	/* Aparición al hacer scroll (solo si JavaScript está activo) */
	.mph-js .mph-inicio [data-mph-animar] {
		opacity: 0;
		transform: translateY(28px);
		transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1);
		transition-delay: calc(var(--mph-retraso, 0) * 120ms);
	}

	.mph-js .mph-inicio [data-mph-animar="derecha"] {
		transform: translateX(32px);
	}

	.mph-js .mph-inicio [data-mph-animar].is-visible {
		opacity: 1;
		transform: none;
	}

	/* Títulos: llegan con las letras separadas y se acomodan */
	.mph-js .mph-inicio .mph-i-h2[data-mph-animar] {
		transition-property: opacity, transform, letter-spacing;
		transition-duration: .9s, .9s, 1.5s;
	}

	.mph-js .mph-inicio .mph-i-h2[data-mph-animar]:not(.is-visible) {
		letter-spacing: .3em;
	}

	/* Fotos: una cortina se retira y la imagen se asienta */
	.mph-js .mph-i-marco .mph-i-cortina {
		transition: transform 1.3s cubic-bezier(.77, 0, .18, 1);
		transition-delay: calc(var(--mph-retraso, 0) * 160ms);
	}

	.mph-js .mph-i-marco:not(.is-visible) .mph-i-cortina {
		transform: scaleX(1);
	}

	.mph-js .mph-i-marco > .mph-i-foto-img,
	.mph-js .mph-i-marco > .mph-i-foto-vacia {
		transition: scale 1.9s cubic-bezier(.2, .7, .2, 1);
		transition-delay: calc(var(--mph-retraso, 0) * 160ms);
	}

	.mph-js .mph-i-marco:not(.is-visible) > .mph-i-foto-img,
	.mph-js .mph-i-marco:not(.is-visible) > .mph-i-foto-vacia {
		scale: 1.12;
	}
}

/* =========================================================================
 * Celular y tableta
 * ====================================================================== */

@media (max-width: 900px) {
	.mph-i-hero,
	.mph-i-dos {
		grid-template-columns: minmax(0, 1fr);
	}

	.mph-i-hero-foto {
		min-height: 420px;
	}

	.mph-i-pasos,
	.mph-i-tres {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mph-i-tarifas {
		grid-template-columns: minmax(0, 1fr);
		max-width: 460px;
		margin-left: auto;
		margin-right: auto;
		gap: 44px;
	}
}

@media (max-width: 600px) {
	.mph-i-contenedor {
		padding: 0 20px;
	}

	.mph-i-hero-foto {
		min-height: 360px;
	}

	.mph-i-mancha {
		left: 20px;
		bottom: 20px;
		width: 180px;
		height: 116px;
	}

	.mph-i-mancha span {
		font-size: 26px;
	}

	.mph-i-hero-texto > .mph-deco-arcoiris {
		top: 28px;
		width: 48px;
		height: auto;
	}

	.mph-i-pasos,
	.mph-i-tres {
		grid-template-columns: minmax(0, 1fr);
	}

	.mph-i-botones .mph-i-boton {
		width: 100%;
	}

	.mph-i-cierre-foto {
		position: relative;
		height: 300px;
		width: 100%;
	}

	.mph-i-cierre {
		flex-direction: column;
		min-height: 0;
	}

	.mph-i-cierre-interior {
		padding-top: 0;
		padding-bottom: 48px;
		margin-top: -60px;
	}

	.mph-i-caja {
		max-width: none;
		padding: 40px 26px;
	}

	.mph-i-deco-1,
	.mph-i-deco-2 {
		display: none;
	}
}

/* ---------- Libro impreso para llenar a mano ---------- */
.mph-i-impreso {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	align-items: center;
	gap: clamp(24px, 4vw, 48px);
	max-width: 820px;
	margin: clamp(56px, 7vw, 80px) auto 0;
	padding: clamp(24px, 4vw, 36px) clamp(24px, 4vw, 44px);
	background: var(--i-cielo);
}

.mph-i-impreso img {
	display: block;
	width: 100%;
	height: auto;
	box-shadow: 6px 10px 24px rgba(43, 37, 34, .18);
	transform: rotate(-3deg);
}

.mph-i-impreso-mano {
	margin: 0 0 4px;
	font-family: var(--i-mano);
	font-size: 26px;
	color: var(--i-canela);
}

.mph-i-impreso .mph-i-h3 {
	margin: 0 0 10px;
}

.mph-i-impreso p:not(.mph-i-impreso-mano) {
	margin: 0 0 20px;
	line-height: 1.6;
	color: var(--i-gris);
}

@media (max-width: 560px) {
	.mph-i-impreso {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.mph-i-impreso img {
		width: 140px;
		margin: 0 auto;
	}
}

/* ---------- Precio de lanzamiento y opciones del libro ---------- */
.mph-i-lanzamiento {
	margin: -8px 0 -6px;
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--i-canela);
}

.mph-i-lanzamiento s {
	margin-left: 4px;
	color: var(--i-gris-suave);
}

.mph-i-desde {
	display: block;
	margin-bottom: 4px;
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--i-gris-suave);
}

.mph-i-opciones {
	display: grid;
	gap: 10px;
}

.mph-i-envio {
	margin: -6px 0 0;
	font-size: 13px;
	color: var(--i-gris-suave);
}

/* ---------- Botón flotante de WhatsApp ---------- */
.mph-inicio .mph-i-whatsapp {
	position: fixed;
	left: 18px;
	bottom: calc(18px + env(safe-area-inset-bottom, 0px));
	z-index: 60;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #25D366;
	box-shadow: 0 8px 22px rgba(43, 37, 34, .22);
	transition: transform .2s;
}

.mph-inicio .mph-i-whatsapp:hover,
.mph-inicio .mph-i-whatsapp:focus-visible {
	transform: scale(1.06);
}

/* =========================================================================
 * Así se ve por dentro (1.14.0)
 * ====================================================================== */
.mph-i-dentro {
	background: var(--i-cielo);
	padding: clamp(80px, 10vw, 120px) 0;
}

.mph-i-hojear {
	position: relative;
	max-width: 1040px;
	margin: 40px auto 0;
}

.mph-i-pliegos {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.mph-i-pliegos::-webkit-scrollbar { display: none; }
.mph-i-pliegos:focus-visible { outline: 2px solid var(--i-caramelo); outline-offset: 6px; }

.mph-i-pliego {
	flex: 0 0 100%;
	margin: 0;
	padding: 12px 28px 4px;
	scroll-snap-align: center;
	text-align: center;
}

.mph-i-pliego-img {
	display: block;
	width: 100%;
	height: auto;
	background: #FFF;
	box-shadow: 0 22px 50px rgba(43, 37, 34, .16), 0 2px 6px rgba(43, 37, 34, .06);
}

.mph-i-pliego figcaption {
	margin-top: 22px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--i-gris);
}

.mph-inicio .mph-i-flecha {
	position: absolute;
	top: calc(50% - 40px);
	width: 52px;
	height: 52px;
	border: 0;
	border-radius: 50%;
	background: #FFF;
	color: var(--i-canela);
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 8px 22px rgba(43, 37, 34, .14);
	transition: transform .2s, opacity .2s;
}

.mph-i-flecha:hover { transform: scale(1.06); }
.mph-i-flecha[disabled] { opacity: 0; pointer-events: none; }
.mph-i-flecha-ant { left: -8px; }
.mph-i-flecha-sig { right: -8px; }

.mph-i-puntos {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 14px;
}

.mph-inicio .mph-i-puntos button {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #D9C9B4;
	cursor: pointer;
	transition: background-color .2s, transform .2s;
}

.mph-inicio .mph-i-puntos button[aria-selected="true"] {
	background: var(--i-canela);
	transform: scale(1.25);
}

.mph-i-dentro-dos {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
	gap: clamp(40px, 6vw, 80px);
	align-items: end;
	margin-top: clamp(64px, 8vw, 96px);
}

.mph-i-dentro-portada,
.mph-i-dentro-cel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	text-align: center;
}

.mph-i-dentro-portada p,
.mph-i-dentro-cel p {
	margin: 0;
	max-width: 380px;
	line-height: 1.7;
	color: var(--i-gris-suave);
}

.mph-i-libro3d {
	position: relative;
	width: min(300px, 70vw);
	margin-bottom: 20px;
	transform: perspective(1200px) rotateY(-14deg) rotateZ(-1deg);
	transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

.mph-i-dentro-portada:hover .mph-i-libro3d { transform: perspective(1200px) rotateY(-4deg); }

.mph-i-libro3d::before {
	/* Lomo y grosor */
	content: '';
	position: absolute;
	left: -10px;
	top: 1%;
	bottom: 1%;
	width: 14px;
	background: linear-gradient(90deg, #C9D9DF, #EAF2F4);
	border-radius: 3px 0 0 3px;
}

.mph-i-portada-img {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	border-radius: 2px 6px 6px 2px;
	box-shadow: 18px 24px 40px rgba(43, 37, 34, .22), inset 6px 0 10px rgba(0, 0, 0, .08);
}

.mph-i-celulares {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	margin-bottom: 20px;
}

.mph-i-celular {
	position: relative;
	width: clamp(120px, 15vw, 190px);
	padding: 7px;
	background: #2B2522;
	border-radius: 28px;
	box-shadow: 0 20px 40px rgba(43, 37, 34, .2);
}

.mph-i-celular::before {
	content: '';
	position: absolute;
	top: 12px;
	left: 50%;
	z-index: 1;
	width: 26%;
	height: 7px;
	border-radius: 6px;
	background: #2B2522;
	transform: translateX(-50%);
}

.mph-i-celular-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 9 / 19.5;
	object-fit: cover;
	object-position: top;
	border-radius: 22px;
	background: #FFF;
}

.mph-i-celular-1 { transform: rotate(-6deg) translate(18px, 14px); }
.mph-i-celular-2 { z-index: 1; width: clamp(140px, 17vw, 215px); }
.mph-i-celular-3 { transform: rotate(6deg) translate(-18px, 14px); }

/* =========================================================================
 * Regálalo (1.14.0)
 * ====================================================================== */
.mph-i-regalo {
	background: linear-gradient(180deg, #FFF 0%, #FBF3EC 100%);
	padding: clamp(80px, 10vw, 120px) 0;
}

.mph-i-deco-6 { left: 6%; top: 60px; }

.mph-i-regalo-tarjeta {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	container-type: inline-size;
}

.mph-i-tarjeta {
	display: grid;
	grid-template-columns: 40% 60%;
	width: 100%;
	max-width: 520px;
	aspect-ratio: 7 / 5;
	overflow: hidden;
	background: #FEF9E2;
	border-radius: 10px;
	box-shadow: 0 26px 60px rgba(43, 37, 34, .16);
	transform: rotate(-3deg);
	transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

.mph-i-regalo-tarjeta:hover .mph-i-tarjeta { transform: rotate(-1deg) translateY(-4px); }

.mph-i-tarjeta-arte {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: linear-gradient(180deg, #EAF5F7, #FEF9E2);
}

.mph-i-tarjeta-arte img { width: 46%; height: auto; }
.mph-i-tarjeta-arte .mph-i-tarjeta-cinta { width: 80%; margin-top: -6%; }

.mph-i-tarjeta-texto {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	padding: 8% 9%;
	border-left: 3px solid #99D3DD;
	text-align: left;
}

.mph-i-tarjeta-titulo { font-size: clamp(13px, 3.4cqw, 19px); color: #1B5176; letter-spacing: .04em; }
.mph-i-tarjeta-para { font-family: 'Kalam', cursive; font-size: clamp(24px, 6.4cqw, 36px); line-height: 1; color: var(--i-canela); }
.mph-i-tarjeta-msj { font-family: 'Kalam', cursive; font-size: clamp(12px, 2.8cqw, 15px); line-height: 1.35; color: #1B5176; }
.mph-i-tarjeta-de { font-family: 'Kalam', cursive; font-size: clamp(11px, 2.6cqw, 14px); color: var(--i-gris); }

.mph-i-tarjeta-codigo {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	padding-top: 10px;
	border-top: 1px dashed #D9C9B4;
	font-weight: 500;
	font-size: clamp(12px, 3.2cqw, 17px);
	letter-spacing: .12em;
	color: #1B5176;
}

.mph-i-tarjeta-codigo i {
	flex: none;
	width: clamp(22px, 6cqw, 34px);
	aspect-ratio: 1;
	display: block;
}

.mph-i-tarjeta-codigo svg { display: block; width: 100%; height: 100%; }

.mph-i-tarjeta-nota { font-size: 24px; text-align: center; }

.mph-i-regalo-pasos {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: rg;
	display: flex;
	flex-direction: column;
	gap: 10px;
	color: var(--i-gris);
}

.mph-i-regalo-pasos li {
	counter-increment: rg;
	display: flex;
	align-items: center;
	gap: 12px;
	line-height: 1.5;
}

.mph-i-regalo-pasos li::before {
	content: counter(rg);
	flex: none;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--i-salvia);
	font-family: var(--i-mano);
	font-weight: 700;
	font-size: 20px;
	color: var(--i-tinta);
}

.mph-i-regalo-planes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	width: 100%;
	margin-top: 6px;
}

.mph-inicio .mph-i-regalo-planes a {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 12px;
	letter-spacing: .12em;
}

.mph-i-regalo-planes b { font-weight: 400; font-size: 18px; letter-spacing: .02em; }

.mph-i-regalo-nota { margin: 0; font-size: 14px; line-height: 1.6; color: var(--i-gris-suave); }

.mph-i-regalar-enlace {
	margin: 36px 0 0;
	text-align: center;
	color: var(--i-gris-suave);
}

.mph-i-regalar-enlace .mph-i-enlace { margin-left: 6px; color: var(--i-canela); }

@media (max-width: 900px) {
	.mph-i-dentro-dos { grid-template-columns: minmax(0, 1fr); }
	.mph-i-flecha-ant { left: 4px; }
	.mph-i-flecha-sig { right: 4px; }
	.mph-inicio .mph-i-flecha { width: 42px; height: 42px; font-size: 24px; top: calc(50% - 46px); }
	.mph-i-regalo-tarjeta { order: 2; }
}

@media (max-width: 600px) {
	.mph-i-pliego { padding: 8px 6px 4px; }
	.mph-i-celular { width: 30vw; border-radius: 20px; padding: 5px; }
	.mph-i-celular-2 { width: 35vw; }
	.mph-i-celular-img { border-radius: 16px; }
	.mph-i-regalo-planes { grid-template-columns: minmax(0, 1fr); }
	.mph-i-deco-6 { display: none; }
}