* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	--fondo: #1f0f14;
	--fondo-secundario: #3d1826;
	--resplandor: rgba(214, 169, 118, 0.28);
	--oro: #d6a976;
	--oro-claro: #f5ddbb;
	--vino: #8f2d4f;
	--vino-profundo: #5f1a33;
	--papel: #fff6ee;
	--papel-sombra: #ead6c4;
	--papel-borde: rgba(143, 45, 79, 0.16);
	--tinta: #41242f;
	--sobre: #f4d9d0;
	--sobre-luz: #fdeee7;
	--sobre-sombra: #dbb8ac;
	--sombra-suave: 0 24px 60px rgba(14, 6, 10, 0.28);
	--sombra-fuerte: 0 45px 90px rgba(12, 5, 8, 0.4);
	--radio-panel: 28px;
}

html {
	color-scheme: light;
}

body {
	min-height: 100vh;
	padding: 24px 16px 48px;
	font-family: "Cormorant Garamond", serif;
	color: var(--oro-claro);
	background:
		radial-gradient(circle at top, rgba(214, 169, 118, 0.14), transparent 36%),
		radial-gradient(circle at 20% 20%, rgba(143, 45, 79, 0.22), transparent 24%),
		radial-gradient(
			circle at 80% 0%,
			rgba(245, 221, 187, 0.08),
			transparent 22%
		),
		linear-gradient(160deg, #12080c 0%, #2a111a 42%, #16090e 100%);
	overflow-x: hidden;
}

body::before,
body::after {
	content: "";
	position: fixed;
	inset: auto;
	pointer-events: none;
	z-index: 0;
}

body::before {
	top: 8%;
	left: -8%;
	width: 280px;
	height: 280px;
	border-radius: 50%;
	background: radial-gradient(
		circle,
		rgba(214, 169, 118, 0.18),
		transparent 68%
	);
	filter: blur(18px);
}

body::after {
	right: -6%;
	bottom: 4%;
	width: 340px;
	height: 340px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(143, 45, 79, 0.2), transparent 70%);
	filter: blur(24px);
}

.skip-link {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 10px 14px;
	border-radius: 999px;
	background: rgba(255, 246, 238, 0.96);
	color: var(--vino-profundo);
	text-decoration: none;
	transform: translateY(-150%);
	transition: transform 0.25s ease;
	z-index: 30;
}

.skip-link:focus-visible {
	transform: translateY(0);
	outline: 2px solid var(--oro);
	outline-offset: 4px;
}

.pagina {
	position: relative;
	z-index: 1;
	width: min(100%, 1100px);
	min-height: calc(100vh - 72px);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 56px;
}

.hero {
	max-width: 760px;
	text-align: center;
	transition:
		opacity 0.45s ease,
		transform 0.45s ease,
		filter 0.45s ease;
}

.hero-etiqueta {
	margin-bottom: 14px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	font-size: 0.82rem;
	color: rgba(245, 221, 187, 0.78);
}

h1 {
	font-family: "Great Vibes", cursive;
	font-size: clamp(3.8rem, 9vw, 6.8rem);
	font-weight: 400;
	line-height: 0.95;
	color: #fff1e5;
	text-wrap: balance;
	text-shadow: 0 14px 30px rgba(0, 0, 0, 0.2);
}

.hero-texto {
	width: min(100%, 34ch);
	margin: 18px auto 0;
	font-size: clamp(1.15rem, 2.4vw, 1.45rem);
	line-height: 1.45;
	color: rgba(255, 241, 229, 0.8);
}

.escena-carta {
	width: 100%;
	display: flex;
	justify-content: center;
}

.contenedor {
	width: min(100%, 430px);
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}

.envoltura-sobre {
	position: relative;
	width: 100%;
	height: 300px;
	border-radius: var(--radio-panel);
	perspective: 1800px;
	filter: drop-shadow(0 30px 55px rgba(12, 5, 8, 0.35));
}

.sobre {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: var(--radio-panel);
	background:
		linear-gradient(145deg, rgba(255, 255, 255, 0.3), transparent 38%),
		linear-gradient(180deg, var(--sobre-luz) 0%, var(--sobre) 100%);
	overflow: visible;
}

.sobre::before,
.sobre::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.sobre::before {
	height: 56%;
	background: linear-gradient(180deg, #fdf0e9 0%, #e9c5bb 100%);
	clip-path: polygon(0 0, 50% 100%, 100% 0);
	transform-origin: top center;
	transform-style: preserve-3d;
	backface-visibility: hidden;
	transition:
		transform 0.72s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.72s ease;
	z-index: 6;
}

.sobre::after {
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.22),
		transparent 46%
	);
	z-index: 1;
}

.boton-sobre {
	position: absolute;
	inset: 0;
	border: 0;
	border-radius: inherit;
	background: transparent;
	cursor: pointer;
	z-index: 7;
	touch-action: manipulation;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.boton-sobre:hover {
	box-shadow: inset 0 0 0 1px rgba(214, 169, 118, 0.2);
}

.solapa-derecha,
.solapa-izquierda {
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.solapa-derecha {
	clip-path: polygon(100% 0, 47% 50%, 100% 100%);
	background: linear-gradient(180deg, #f2ddd5 0%, #dfbfb2 100%);
	z-index: 4;
}

.solapa-izquierda {
	clip-path: polygon(0 0, 0 100%, 53% 50%);
	background: linear-gradient(180deg, #f7e7df 0%, #e6c9be 100%);
	z-index: 5;
}

.carta {
	position: absolute;
	left: 50%;
	top: 34px;
	width: calc(100% - 42px);
	height: 246px;
	transform: translate(-50%, 0);
	transform-origin: bottom center;
	border-radius: 24px;
	background: linear-gradient(180deg, #fffaf5 0%, var(--papel) 100%);
	box-shadow: 0 16px 32px rgba(72, 33, 46, 0.18);
	overflow: hidden;
	transition:
		transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
		width 0.7s cubic-bezier(0.22, 1, 0.36, 1),
		height 0.7s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.7s ease,
		border-radius 0.7s ease;
	z-index: 2;
}

.carta::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(
			circle at top right,
			rgba(214, 169, 118, 0.2),
			transparent 30%
		),
		linear-gradient(180deg, rgba(255, 255, 255, 0.45), transparent 22%),
		repeating-linear-gradient(
			180deg,
			transparent 0,
			transparent 30px,
			rgba(143, 45, 79, 0.07) 31px,
			transparent 32px
		);
	opacity: 0.9;
	pointer-events: none;
}

.contenido {
	position: relative;
	height: 100%;
	padding: 24px 24px 56px;
	overflow-y: hidden;
	overscroll-behavior: contain;
	touch-action: pan-y;
	color: var(--tinta);
	scrollbar-width: thin;
	scrollbar-color: rgba(143, 45, 79, 0.7) transparent;
}

.contenido::-webkit-scrollbar {
	width: 8px;
}

.contenido::-webkit-scrollbar-track {
	background: transparent;
}

.contenido::-webkit-scrollbar-thumb {
	border-radius: 999px;
	background: linear-gradient(
		180deg,
		rgba(143, 45, 79, 0.85),
		rgba(95, 26, 51, 0.95)
	);
}

.contenido::before,
.contenido::after {
	content: "";
	position: absolute;
	left: 24px;
	right: 24px;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(143, 45, 79, 0.35),
		transparent
	);
	pointer-events: none;
}

.contenido::before {
	top: 78px;
}

.contenido::after {
	bottom: 34px;
}

.encabezado-carta {
	position: sticky;
	top: -24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 0 0 16px;
	margin-bottom: 12px;
	background: linear-gradient(
		180deg,
		rgba(255, 246, 238, 0.98) 0%,
		rgba(255, 246, 238, 0.94) 74%,
		rgba(255, 246, 238, 0)
	);
	z-index: 2;
}

.marca-carta {
	font-size: 0.92rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: rgba(95, 26, 51, 0.72);
}

.boton-cerrar,
.corazon {
	border: 0;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.boton-cerrar {
	padding: 9px 14px;
	border-radius: 999px;
	background: rgba(95, 26, 51, 0.1);
	color: var(--vino-profundo);
	font-family: inherit;
	font-size: 0.96rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	transition:
		background-color 0.25s ease,
		color 0.25s ease,
		transform 0.25s ease;
	opacity: 0;
	pointer-events: none;
}

.boton-cerrar:hover {
	background: rgba(95, 26, 51, 0.16);
	color: #471326;
	transform: translateY(-1px);
}

.contenido strong {
	display: block;
	margin-bottom: 20px;
	font-family: "Great Vibes", cursive;
	font-size: clamp(2.5rem, 5vw, 3.3rem);
	line-height: 0.92;
	color: var(--vino-profundo);
	text-wrap: balance;
}

.mensaje {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding-right: 4px;
	padding-bottom: 28px;
}

.mensaje p {
	font-size: 1.18rem;
	line-height: 1.7;
	text-wrap: pretty;
}

.bloque-centro,
.bloque-fecha,
.bloque-cita,
.bloque-poema,
.bloque-contador,
.firma-final {
	text-align: center;
}

.bloque-centro {
	font-size: 1.28rem;
	font-weight: 600;
	color: var(--vino-profundo);
}

.bloque-fecha {
	padding: 10px 18px;
	border: 1px solid rgba(95, 26, 51, 0.18);
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.35);
	font-size: 1.24rem;
	color: var(--vino-profundo);
	box-shadow: 0 12px 24px rgba(95, 26, 51, 0.08);
}

.bloque-cita {
	font-style: italic;
	font-size: 1.34rem;
	color: #5c1931;
}

.bloque-poema {
	padding: 18px 20px;
	border-radius: 22px;
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.55),
		rgba(255, 255, 255, 0.28)
	);
	box-shadow: inset 0 0 0 1px rgba(143, 45, 79, 0.12);
	font-size: 1.24rem;
	color: var(--vino-profundo);
}

.bloque-contador {
	font-size: 1.56rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--vino-profundo);
	font-variant-numeric: tabular-nums;
}

.firma-final {
	font-size: 1.3rem;
	color: var(--vino-profundo);
}

.corazon {
	position: absolute;
	top: 52%;
	left: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 86px;
	height: 86px;
	border-radius: 50%;
	background: radial-gradient(
		circle at 32% 30%,
		#f7a7b8 0%,
		#d85c7d 28%,
		#9f2449 70%,
		#6a1230 100%
	);
	box-shadow:
		inset 0 2px 12px rgba(255, 255, 255, 0.28),
		inset 0 -10px 18px rgba(85, 15, 39, 0.3),
		0 18px 38px rgba(95, 26, 51, 0.38);
	transform: translate(-50%, -10%);
	transition:
		transform 0.45s ease,
		opacity 0.45s ease,
		box-shadow 0.45s ease;
	z-index: 8;
}

.corazon::before {
	content: "";
	position: absolute;
	inset: 8px;
	border-radius: 50%;
	border: 1px dashed rgba(255, 241, 229, 0.55);
}

.corazon:hover {
	transform: translate(-50%, -14%);
	box-shadow:
		inset 0 2px 12px rgba(255, 255, 255, 0.28),
		inset 0 -10px 18px rgba(85, 15, 39, 0.3),
		0 22px 44px rgba(95, 26, 51, 0.44);
}

.corazon-icono {
	position: relative;
	width: 22px;
	height: 22px;
	transform: rotate(45deg);
	background: var(--oro-claro);
	border-radius: 4px;
	box-shadow: 0 3px 8px rgba(95, 26, 51, 0.16);
}

.corazon-icono::before,
.corazon-icono::after {
	content: "";
	position: absolute;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--oro-claro);
}

.corazon-icono::before {
	top: -11px;
	left: 0;
}

.corazon-icono::after {
	top: 0;
	left: -11px;
}

.indicacion {
	width: min(100%, 32ch);
	text-align: center;
	font-size: 1.08rem;
	line-height: 1.45;
	color: rgba(255, 241, 229, 0.76);
	text-wrap: balance;
}

.boton-sobre:focus-visible,
.boton-cerrar:focus-visible,
.corazon:focus-visible,
.contenido:focus-visible {
	outline: 2px solid var(--oro-claro);
	outline-offset: 4px;
}

.abierto .sobre::before {
	transform: rotateX(180deg);
	box-shadow: 0 14px 34px rgba(52, 16, 29, 0.18);
}

.abierto .corazon {
	transform: translate(-50%, -24%) scale(0.88) rotate(10deg);
	opacity: 0;
	pointer-events: none;
}

.abierto .boton-sobre {
	opacity: 0;
	pointer-events: none;
}

.carta.mostrar-carta,
.carta.cerrando-carta {
	transform: translate(-50%, -96px);
	z-index: 9;
}

.carta.abierta {
	width: min(92vw, 620px);
	height: min(72vh, 660px);
	transform: translate(-50%, -168px) rotate(-0.6deg);
	border-radius: 28px;
	box-shadow: var(--sombra-fuerte);
	z-index: 10;
}

.carta.abierta .contenido {
	overflow-y: auto;
}

.carta.abierta .boton-cerrar {
	opacity: 1;
	pointer-events: auto;
}

.contenido.reveal-listo [data-reveal] {
	opacity: 0.18;
	transform: translateY(28px);
	filter: blur(3px);
}

.contenido.reveal-listo [data-reveal].visible {
	opacity: 1;
	transform: translateY(0);
	filter: blur(0);
}

body.lectura-activa .hero {
	opacity: 0.28;
	transform: translateY(-18px) scale(0.98);
	filter: blur(1px);
}

body.lectura-activa .indicacion {
	color: rgba(255, 241, 229, 0.94);
}

@media screen and (max-width: 720px) {
	.pagina {
		justify-content: flex-start;
		gap: 38px;
		min-height: auto;
	}

	.hero {
		margin-top: 20px;
	}

	.envoltura-sobre {
		height: 270px;
	}

	.carta {
		width: calc(100% - 34px);
		height: 228px;
	}

	.carta.abierta {
		width: min(92vw, 560px);
		height: min(72dvh, 620px);
		transform: translate(-50%, -150px);
	}
}

@media screen and (max-width: 520px) {
	body {
		padding-inline: 12px;
	}

	.hero-etiqueta {
		font-size: 0.74rem;
		letter-spacing: 0.22em;
	}

	.hero-texto {
		font-size: 1.05rem;
	}

	.contenedor {
		width: min(100%, 340px);
		gap: 18px;
	}

	.envoltura-sobre {
		height: 240px;
	}

	.corazon {
		width: 74px;
		height: 74px;
	}

	.carta {
		width: calc(100% - 28px);
		height: 194px;
		top: 42px;
		border-radius: 22px;
	}

	.carta.abierta {
		width: min(94vw, 480px);
		height: min(78dvh, 620px);
		transform: translate(-50%, -132px);
	}

	.contenido {
		padding: 22px 18px 72px;
	}

	.contenido::before,
	.contenido::after {
		left: 18px;
		right: 18px;
	}

	.encabezado-carta {
		top: -22px;
	}

	.contenido strong {
		font-size: 2.3rem;
	}

	.mensaje p {
		font-size: 1.04rem;
		line-height: 1.62;
	}

	.mensaje {
		padding-bottom: 44px;
	}

	.bloque-fecha,
	.bloque-poema {
		padding-inline: 14px;
	}

	.bloque-cita,
	.bloque-contador,
	.firma-final {
		font-size: 1.18rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}

	body.lectura-activa .hero {
		transform: none;
		filter: none;
	}
}