/* ──────────────────────────────────────────────────────────────────────────
   Miau Carta — el cierre de Conócenos.

   ESTADO POR DEFECTO = ABIERTA. El JS añade .is-armed para plegarla y luego
   .is-open para desplegarla. Así, sin JS o con prefers-reduced-motion, la
   carta se ve abierta y legible: la animación es mejora progresiva, nunca
   requisito. El texto está siempre en el DOM.
   ────────────────────────────────────────────────────────────────────────── */

.miau-carta {
	--miau-carta-duration: 700ms;
	--miau-carta-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	/* El borde de correo aéreo de los años 60 va en rojo y azul: resulta que son
	   exactamente los de MIAU (mismos valores que las pills de Productos). */
	--miau-carta-rojo: #E7002A;
	--miau-carta-azul: #003CA5;
	--miau-carta-papel: #FBF8F1;
	/* Dos variables para el mismo número: border-image-slice NO admite unidades
	   (13px es inválido, tiene que ser 13), pero border-width sí las exige. */
	--miau-carta-franja: 13px;
	--miau-carta-slice: 13;

	width: 100%;
	display: flex;
	justify-content: center;
}

/* La perspectiva vive en el padre: si se pone en el elemento que rota, no hay
   profundidad y el pliegue se ve plano. */
.miau-carta__stage {
	perspective: 1600px;
	perspective-origin: 50% 0%;
	width: 100%;
	max-width: 1040px;
}

.miau-carta__sheet {
	position: relative;
	background-color: var(--miau-carta-papel);
	color: var(--miau-carta-azul);
	padding: 46px 52px 38px;
	transform-origin: 50% 0%;
	box-shadow:
		0 1px 0 rgba(0, 0, 0, 0.06),
		0 18px 40px -18px rgba(0, 0, 0, 0.35);

	/* Borde de correo aéreo. Se dibuja con un degradado repetido en diagonal y
	   se recorta con border-image: una sola imagen para los cuatro lados, así
	   las esquinas encajan solas.
	   `border: solid transparent` es obligatorio: define el grosor de la caja
	   del borde; sin él, border-image no tiene dónde pintarse. */
	border: var(--miau-carta-franja) solid transparent;
	border-image-source: repeating-linear-gradient(
		-45deg,
		var(--miau-carta-rojo) 0, var(--miau-carta-rojo) 11px,
		var(--miau-carta-papel) 11px, var(--miau-carta-papel) 22px,
		var(--miau-carta-azul) 22px, var(--miau-carta-azul) 33px,
		var(--miau-carta-papel) 33px, var(--miau-carta-papel) 44px
	);
	border-image-slice: var(--miau-carta-slice);
	border-image-repeat: repeat;
}

/* La marca del doblez. Se desvanece a la vez que la carta se abre. */
.miau-carta__crease {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 24px;
	transform: translateY(-50%);
	pointer-events: none;
	opacity: 0;
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0.06) 45%,
		rgba(0, 0, 0, 0.10) 50%,
		rgba(255, 255, 255, 0.5) 54%,
		rgba(0, 0, 0, 0) 100%
	);
}

/* ── Cuerpo: texto a la izquierda, foto a la derecha ─────────────────────── */
.miau-carta__cuerpo {
	display: flex;
	/* stretch, no flex-start: así la columna de la foto llega hasta abajo del
	   todo y la firma puede empujarse al pie con margin-top:auto. Con flex-start
	   la columna solo mide lo que ocupa su contenido y no hay hueco que empujar. */
	align-items: stretch;
	gap: 46px;
}

.miau-carta__body {
	flex: 1 1 auto;
	min-width: 0;
	/* El tema justifica los párrafos; una carta se escribe en bandera. */
	text-align: left;
}

.miau-carta__body > *:first-child { margin-top: 0; }
.miau-carta__body > *:last-child  { margin-bottom: 0; }

/* Columna derecha: la foto y, debajo, quién firma. En una carta la firma va
   pegada al final de lo escrito, no colgando al pie de la hoja. */
.miau-carta__lado {
	flex: 0 0 268px;
	display: flex;
	flex-direction: column;
}

.miau-carta__photo {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.miau-carta__photo img {
	width: 100%;
	height: auto;
	/* Ligeramente torcida, como una foto metida en el sobre a mano. */
	transform: rotate(-1.6deg);
	box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.45);
}

.miau-carta__photo figcaption {
	margin-top: 14px;
	font-size: 14px;
	opacity: 0.7;
	text-align: center;
}

/* margin-top:auto se come todo el hueco libre de la columna y deja la firma
   pegada al pie, a la altura del final del texto. El margen de abajo es el
   respiro mínimo si el texto y la foto acaban casi a la vez. */
.miau-carta__sign {
	margin: 28px 0 0;
	margin-top: auto;
	padding-top: 28px;
	text-align: right;
	font-style: italic;
}

/* ── Plegada ─────────────────────────────────────────────────────────────
   Solo cuando el JS la arma. rotateX negativo con origen arriba = la hoja
   cae hacia atrás, como el papel doblado antes de abrirlo. */
.miau-carta.is-armed .miau-carta__sheet {
	transform: rotateX(-88deg);
	opacity: 0;
	transition:
		transform var(--miau-carta-duration) var(--miau-carta-ease),
		opacity calc(var(--miau-carta-duration) * 0.45) ease-out;
}

.miau-carta.is-armed .miau-carta__crease {
	opacity: 1;
	transition: opacity calc(var(--miau-carta-duration) * 0.8) ease-out;
}

/* La firma y la foto llegan después: primero se abre el papel, luego aparece
   quién lo firma. */
.miau-carta.is-armed .miau-carta__sign,
.miau-carta.is-armed .miau-carta__photo {
	opacity: 0;
	transition: opacity 500ms ease-out calc(var(--miau-carta-duration) * 0.75);
}

/* ── Abierta ─────────────────────────────────────────────────────────── */
.miau-carta.is-armed.is-open .miau-carta__sheet {
	transform: rotateX(0deg);
	opacity: 1;
}

.miau-carta.is-armed.is-open .miau-carta__crease { opacity: 0; }

.miau-carta.is-armed.is-open .miau-carta__sign,
.miau-carta.is-armed.is-open .miau-carta__photo { opacity: 1; }

/* ── Móvil ───────────────────────────────────────────────────────────────
   La foto baja debajo del texto y el giro es menor: en pantalla pequeña el
   recorrido grande se ve roto. */
@media (max-width: 767px) {
	.miau-carta {
		--miau-carta-franja: 9px;
		--miau-carta-slice: 9;
	}

	.miau-carta__sheet {
		padding: 28px 20px 26px;
	}

	.miau-carta__cuerpo {
		flex-direction: column;
		gap: 28px;
	}

	.miau-carta__lado {
		flex: 0 0 auto;
		align-self: stretch;
	}

	.miau-carta__photo {
		align-self: center;
		max-width: 220px;
	}

	/* Apilado no hay hueco libre que empujar: la firma va justo bajo la foto. */
	.miau-carta__sign {
		margin-top: 18px;
		padding-top: 0;
		text-align: center;
	}

	.miau-carta.is-armed .miau-carta__sheet {
		transform: rotateX(-60deg);
	}
}

/* ── Respeto a quien no quiere movimiento ────────────────────────────────
   Cinturón y tirantes: el JS ya no arma si hay reduced-motion, pero si algo
   fallara, aquí se anula igual. */
@media (prefers-reduced-motion: reduce) {
	.miau-carta .miau-carta__sheet,
	.miau-carta .miau-carta__crease,
	.miau-carta .miau-carta__sign,
	.miau-carta .miau-carta__photo {
		transform: none !important;
		opacity: 1 !important;
		transition: none !important;
	}

	.miau-carta .miau-carta__crease { opacity: 0 !important; }

	/* La foto conserva su inclinación: es estética, no movimiento. */
	.miau-carta .miau-carta__photo img {
		transform: rotate(-1.6deg) !important;
	}
}