/* Invitación: la página entera es una hoja impresa en tinta azul sobre papel arena.
   Las medidas de la portada salen del comp aprobado (.impeccable/mocks/comp-h.png, 1024×1536):
   las posiciones son fracciones de la altura de la primera pantalla (--alto) y los tamaños, del ancho de la hoja (cqw).
   El resto de las secciones sigue el mismo sistema: tinta única, caligrafía para títulos, versalitas espaciadas, filetes finos. */

/* Los nombres de la portada son una imagen (caligrafía del comp). Títulos y versículo: Pinyon Script.
   Versalitas, texto y nombres de los padres: EB Garamond recta. Solo dos fuentes, pedido de los novios.
   Gwendolyn, Nanum Myeongjo y Libre Caslon se descartaron: los novios las vieron lejos del comp o les faltaban acentos. */
@font-face { font-family: "Pinyon Script"; src: url("fuentes/pinyon-script-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("fuentes/eb-garamond.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }

:root {
	--papel: #f6eee7;
	--papel-claro: #fbf7f1;
	--tinta: #0a2c71;
	--tinta-honda: #061f52;
	--tinta-suave: #365285;
	--linea: rgba(10, 44, 113, .38);
	--caligrafia: "Pinyon Script", cursive;
	--cursiva: "Pinyon Script", cursive;
	--versal: "EB Garamond", "Garamond", "Times New Roman", serif;
	--textura: image-set(url("plates/papel.webp") type("image/webp"), url("plates/papel.png") type("image/png"));
	--tamano-textura: clamp(84px, 21.48vw, 220px);
	/* Papel del sobre: textura propia (grano y fibras, sin repeticiones) estirada al tamaño del sobre,
	   la misma en todas las solapas para que coincidan. Opción 3 aprobada (diseno/pruebas/sobre-textura/). El sello queda sin textura. */
	--fibras: url("plates/papel-sobre.webp") 0 0 / 100% 100% no-repeat;
}

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

html { background: var(--papel); -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	color: var(--tinta);
	font-family: var(--versal);
	font-size: 1.2rem;
	line-height: 1.6;
	background-color: var(--papel);
	background-image: url("plates/papel.png");
	background-image: var(--textura);
	background-repeat: repeat;
	background-size: clamp(84px, 21.48vw, 220px);
}

img { max-width: 100%; }

a { color: inherit; }

:focus-visible { outline: 2px solid var(--tinta); outline-offset: 4px; }

.hoja {
	container-type: inline-size;
	width: 100%;
	margin: 0 auto;
}

/* En pantallas grandes la invitación es una hoja angosta centrada sobre el mismo papel. */
@media (min-width: 1100px) {
	.hoja { max-width: 40rem; }
}

/* ---------- Piezas tipográficas comunes ---------- */

.titulo {
	margin: 0;
	font-family: var(--caligrafia);
	font-weight: 400;
	font-size: clamp(2.7rem, 12.5cqw, 4.4rem);
	line-height: 1.3;
	color: var(--tinta);
	text-wrap: balance;
}

.versal {
	display: block;
	margin: 0;
	font-family: var(--versal);
	font-weight: 600;
	font-size: .82rem;
	line-height: 1.6;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--tinta);
}
span.versal, .hotel .versal { display: inline; }
.versal-grande { font-size: .95rem; letter-spacing: .2em; }
/* Versalitas centradas: el espacio extra a la izquierda compensa el tracking final */
.seccion > .versal, .titulo-doble .versal, .fechas dt, .dress-grupo h3, .pie .versal,
.portada-viaje .versal { padding-left: .24em; }
.seccion > .versal-grande, .hotel .versal-grande { padding-left: .2em; }

.ilustracion {
	display: block;
	height: auto;
	margin: 0 auto 1.25rem;
	pointer-events: none;
	user-select: none;
}

/* ---------- Portada ---------- */

.portada {
	--alto: var(--alto-fijo, max(100svh, 150cqw));
	position: relative;
	height: calc(var(--alto) * 0.897);
	text-align: center;
}

.portada > * {
	position: absolute;
	left: 0;
	right: 0;
	margin: 0;
	translate: 0 -50%;
}

.portada > picture { display: contents; }

.nombres { margin: 0; }
.nombres picture { display: contents; }

/* Caja medida del comp (x 318, y 318, 410×400 sobre 1024×1536), agrandada 10%: la imagen trae margen propio */
.nombres-img {
	position: absolute;
	left: 29.05cqw;
	top: calc(var(--alto) * 0.19);
	width: 44.04cqw;
	height: calc(var(--alto) * 0.2864);
	object-fit: contain;
}

.filete {
	position: absolute;
	top: calc(var(--alto) * 0.334);
	right: auto;
	height: 1px;
	background: var(--tinta);
	opacity: .55;
	translate: none;
}
.filete-izq { left: 32.62cqw; width: 12.89cqw; }
.filete-der { left: 55.66cqw; width: 11.72cqw; }

.fecha {
	top: calc(var(--alto) * 0.5104);
	font-size: max(13px, 2.98cqw);
	font-weight: 500;
	letter-spacing: .22em;
	padding-left: .22em; /* compensa el espaciado final para centrar */
	line-height: 1;
}

.lugar {
	top: calc(var(--alto) * 0.6113);
	font-size: max(12px, 2.39cqw);
	font-weight: 500;
	letter-spacing: .24em;
	padding-left: .24em;
	text-transform: uppercase;
	line-height: 1;
}

.velero {
	position: absolute;
	top: calc(var(--alto) * 0.6413);
	left: 9.28cqw;
	width: 81.05cqw;
	height: auto;
	aspect-ratio: 1813 / 819;
}

/* ---------- Versículo (su primera línea asoma al pie de la primera pantalla) ---------- */

#versiculo {
	padding: 0 8cqw;
	text-align: center;
}

.cita-biblica { margin: 0 auto; max-width: 30rem; }

.verso {
	margin: 0;
	font-family: var(--cursiva);
	font-size: max(19px, 4.1cqw);
	line-height: 1.35;
	color: var(--tinta-suave);
}

.cita {
	display: block;
	margin-top: 1em;
	font-family: var(--versal);
	font-style: normal;
	font-weight: 600;
	font-size: max(11px, 1.97cqw);
	letter-spacing: .53em;
	padding-left: .53em;
	text-transform: uppercase;
	color: var(--tinta);
}

/* ---------- Secciones ---------- */

.seccion {
	padding: clamp(4.5rem, 20cqw, 8.5rem) 8cqw 0;
	text-align: center;
}

.seccion > p,
.tarjeta > p {
	max-width: 34ch;
	margin: 1.1rem auto 0;
	text-wrap: balance;
}

.seccion > .titulo + .versal,
.seccion > .titulo + p { margin-top: 1rem; }

/* Invitación */
.padres {
	margin-top: 1.75rem;
	display: grid;
	gap: .4rem;
	justify-items: center;
}
.padres p {
	margin: 0;
	font-family: var(--versal);
	font-size: clamp(1.15rem, 4.8cqw, 1.35rem);
	line-height: 1.5;
	text-wrap: balance;
}
.padres-y {
	font-family: var(--caligrafia);
	font-size: 2.2rem;
	line-height: 1;
	color: var(--tinta-suave);
}

/* Cuenta regresiva */
.ilustracion-copas { width: clamp(9rem, 40cqw, 14rem); margin-bottom: .5rem; } /* la imagen trae margen propio */
.titulo-doble { margin: 0; font-weight: 400; }
.titulo-doble .titulo { display: block; margin-top: .1em; font-size: clamp(2.3rem, 10.5cqw, 3.6rem); }

.contador {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: clamp(.35rem, 2.5cqw, 1.2rem);
	margin: 2.25rem auto 0;
	font-variant-numeric: tabular-nums lining-nums;
}
.contador-unidad { display: grid; justify-items: center; gap: .55rem; min-width: 3.2ch; }
.contador-numero {
	font-family: var(--versal);
	font-weight: 400;
	font-size: clamp(2.1rem, 10.5cqw, 3.4rem);
	line-height: 1;
}
.contador-sep {
	font-size: clamp(1.4rem, 6cqw, 2.2rem);
	line-height: clamp(2.1rem, 10.5cqw, 3.4rem);
	color: var(--tinta-suave);
}
.contador-etiqueta {
	font-weight: 600;
	font-size: .78rem;
	letter-spacing: .24em;
	padding-left: .24em;
	text-transform: uppercase;
}
.contador-fin { margin-top: 1.5rem; }

.calendario { margin-top: 2.5rem; }
.calendario-alternativas {
	margin: 1rem 0 0;
	font-size: .82rem;
	color: var(--tinta-suave);
}
.calendario-alternativas a { text-underline-offset: .25em; text-decoration-thickness: 1px; }
.calendario-alternativas span { margin: 0 .5em; }

/* Fechas */
.fechas { margin: 2rem 0 0; display: grid; gap: 1.6rem; }
.fechas dt { margin-bottom: .35rem; }
.fechas dd { margin: 0; font-size: 1.12rem; line-height: 1.55; }

/* Ubicación */
.ilustracion-faro { width: clamp(7.5rem, 34cqw, 11rem); }
.hotel {
	display: grid;
	gap: .45rem;
	margin: 1.4rem auto 0 !important;
	max-width: none !important;
}

.galeria {
	display: flex;
	gap: 1rem;
	margin: 3rem -8cqw 0;
	padding: 0 8cqw 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 8cqw;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}
.galeria::-webkit-scrollbar { display: none; }
.galeria figure {
	flex: 0 0 min(84%, 30rem);
	margin: 0;
	scroll-snap-align: center;
}
.galeria img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	padding: .45rem;
	background: var(--papel-claro);
	border: 1px solid var(--linea);
}
.galeria figcaption {
	margin-top: .55rem;
	font-family: var(--cursiva);
	font-size: 1.35rem;
	line-height: 1.3;
	color: var(--tinta-suave);
}
.galeria-ayuda {
	max-width: none !important;
	margin: .4rem auto 0 !important;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .24em;
	padding-left: .24em; /* compensa el espacio final del tracking para que el texto quede centrado */
	text-transform: uppercase;
	color: var(--tinta-suave);
}

/* Viaje (ALTO VUELO): la tarjeta con doble filete es el único bloque enmarcado de la página */
.tarjeta {
	position: relative;
	padding: clamp(2.75rem, 12cqw, 4rem) clamp(1rem, 5cqw, 3rem);
	border: 1px solid var(--tinta);
}
.tarjeta::before {
	content: "";
	position: absolute;
	inset: 6px;
	border: 1px solid var(--linea);
	pointer-events: none;
}
.tarjeta-nota {
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .22em;
	padding-left: .22em; /* compensa el espacio final del tracking para que el texto quede centrado */
	text-transform: uppercase;
	color: var(--tinta-suave);
	margin-top: 1.1rem !important;
	max-width: none !important;
}

/* Botones de la tarjeta: uno debajo del otro, los dos del ancho del más largo */
.tarjeta-botones {
	display: grid;
	grid-template-columns: minmax(0, max-content);
	justify-content: center;
	gap: 1.5rem;
	margin-top: 2rem;
}
.tarjeta-botones .boton-destacado { margin-top: 0; }

/* Botones */
.boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .7em;
	min-height: 3rem;
	padding: 1em 1.8em 1em calc(1.8em + .22em); /* el espacio extra a la izquierda compensa el tracking final */
	border: 1px solid var(--tinta);
	border-radius: 0;
	max-width: 100%;
	box-sizing: border-box;
	text-align: center;
	background: transparent;
	color: var(--tinta);
	font-family: var(--versal);
	font-weight: 600;
	font-size: .84rem;
	line-height: 1.2;
	letter-spacing: .22em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease;
}
.boton:hover { background: var(--tinta); color: var(--papel); }
.boton:active { background: var(--tinta-honda); color: var(--papel); }

.boton-destacado {
	margin-top: 2rem;
	padding: 1.25em 1.1em 1.25em calc(1.1em + .14em);
	font-size: .88rem;
	letter-spacing: .14em;
	margin-inline: 5px; /* deja sitio al filete exterior para que el conjunto quede centrado */
	max-width: calc(100% - 10px);
	background: var(--tinta);
	color: var(--papel);
	box-shadow: 0 0 0 4px var(--papel), 0 0 0 5px var(--tinta);
}
.boton-destacado:hover { background: var(--tinta-honda); }
/* Teléfonos angostos: menos aire y tracking para que el texto entre en una línea */
@container (max-width: 380px) {
	.boton-destacado { padding: 1.25em .7em 1.25em calc(.7em + .1em); letter-spacing: .1em; gap: .55em; }
}
.icono-whatsapp { width: 1.45em; height: 1.45em; flex: none; }

.seccion > .boton { margin-top: 2rem; }

/* Dress code */
.dress {
	display: grid;
	gap: 2.5rem;
	margin-top: 2.5rem;
}
.dress-grupo h3 { margin-bottom: .5rem; }
.dress-grupo p { max-width: 30ch; margin: 0 auto; text-wrap: balance; }
.paleta {
	list-style: none;
	padding: 0;
	margin: 1.4rem auto 0;
	max-width: 22rem;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.1rem .5rem;
}
.paleta li {
	display: grid;
	justify-items: center;
	gap: .45rem;
	font-size: .78rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: .14em;
	padding-left: .14em; /* compensa el espacio final del tracking para que el texto quede centrado */
	text-transform: uppercase;
}
.muestra {
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 50%;
	background: var(--c);
	box-shadow: inset 0 0 0 1px rgba(10, 44, 113, .18), 0 0 0 3px var(--papel), 0 0 0 4px var(--linea);
}
@container (min-width: 600px) {
	.dress { grid-template-columns: 1fr 1fr; }
}
.nota {
	margin-top: 2rem !important;
	font-size: .9rem;
	color: var(--tinta-suave);
}

/* Regalos */
.ilustracion-caracol { width: clamp(5rem, 22cqw, 7.5rem); }
.cuentas { margin: 2.25rem auto 0; max-width: 24rem; }
.cuentas summary {
	display: inline-flex;
	align-items: center;
	gap: .6em;
	min-height: 2.75rem;
	cursor: pointer;
	list-style: none;
	border-bottom: 1px solid var(--linea);
}
.cuentas summary::-webkit-details-marker { display: none; }
.cuentas summary::after { content: "+"; font-size: 1.1rem; font-weight: 400; letter-spacing: 0; }
.cuentas[open] summary::after { content: "–"; }
.cuenta { margin-top: 1.4rem; text-align: left; }
.cuenta dl { margin: 0; display: grid; gap: .9rem; }
.cuenta dt {
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--tinta-suave);
}
.cuenta dd { margin: .1rem 0 0; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.copiar {
	min-height: 2.25rem;
	padding: .3em .9em;
	border: 1px solid var(--linea);
	background: transparent;
	color: var(--tinta);
	font: 600 .76rem/1 var(--versal);
	letter-spacing: .2em;
	text-transform: uppercase;
	cursor: pointer;
}
.copiar:hover { border-color: var(--tinta); }

/* Canciones */
.formulario {
	display: grid;
	gap: 1.5rem;
	max-width: 24rem;
	margin: 2.25rem auto 0;
	text-align: left;
}
.formulario label { display: grid; gap: .35rem; }
.formulario input {
	width: 100%;
	padding: .55rem 0 .5rem;
	border: 0;
	border-bottom: 1px solid var(--linea);
	border-radius: 0;
	background: transparent;
	color: var(--tinta);
	font: 400 1.1rem/1.4 var(--versal);
}
.formulario input:focus { outline: none; border-bottom: 2px solid var(--tinta); padding-bottom: calc(.5rem - 1px); }
.formulario input:focus-visible { outline: none; }
.formulario .boton { justify-self: center; margin-top: .75rem; }
.form-estado { margin: 0; min-height: 1.5em; text-align: center; font-size: .92rem; color: var(--tinta-suave); }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Pie */
.pie {
	padding: clamp(5rem, 22cqw, 9rem) 8cqw clamp(4rem, 16cqw, 6rem);
	text-align: center;
}
.ilustracion-estrella { width: 2.6rem; margin-bottom: 1.5rem; }
.pie-nombres {
	margin: 0 0 .6rem;
	font-family: var(--caligrafia);
	font-size: clamp(2.3rem, 10cqw, 3.4rem);
	line-height: 1.3;
}
.pie-nombres span { font-size: .75em; color: var(--tinta-suave); }

/* ---------- Página del viaje (viaje/index.html) ----------
   Misma hoja, tinta y tipografías; portada corta en flujo normal (sin el sistema de medidas del comp). */

.portada-viaje {
	padding: max(2rem, env(safe-area-inset-top)) 8cqw 0;
	text-align: center;
}
.volver {
	display: inline-block;
	padding: .6rem 0 .6rem .24em; /* compensa el tracking final */
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .24em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid var(--linea);
	color: var(--tinta-suave);
}
.volver::before { content: "‹\a0\a0"; letter-spacing: 0; }
.volver:hover { color: var(--tinta); border-color: var(--tinta); }
/* La imagen de los nombres trae mucho margen propio: se recorta con márgenes negativos */
.nombres-chico {
	display: block;
	width: clamp(11rem, 50cqw, 17rem);
	height: auto;
	margin: -.75rem auto .5rem; /* la imagen trae ~13% de aire arriba y ~5% abajo */
	aspect-ratio: 1;
}
.portada-viaje .versal { margin-top: .4rem; }
.fecha-viaje {
	margin: 1.4rem 0 0;
	font-size: max(14px, 3.6cqw);
	font-weight: 500;
	letter-spacing: .22em;
	padding-left: .22em;
	line-height: 1;
}
.velero-viaje {
	display: block;
	width: 92%;
	height: auto;
	margin: 1.75rem auto 0;
}
.intro {
	max-width: 32ch;
	margin: 2rem auto 0;
	font-size: 1.25rem;
	text-wrap: balance;
}

/* El paquete incluye: mismo par versal + texto que las fechas, en dos columnas cuando hay lugar */
.lista-datos dd { max-width: 30ch; margin-inline: auto; text-wrap: balance; }
@container (min-width: 600px) {
	.lista-datos { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
	.lista-datos > div:last-child:nth-child(odd) { grid-column: 1 / -1; } /* si queda uno solo en la última fila, va centrado */
}

/* Tarifas: como la carta de un menú, con línea de puntos hasta el precio */
.tarifas {
	list-style: none;
	padding: 0;
	margin: 2.25rem auto 0;
	max-width: 26rem;
	display: grid;
	gap: 1.5rem;
	text-align: left;
}
.tarifas li {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: end;
	gap: .6rem;
}
.tarifa-tipo { display: grid; gap: .05rem; }
.tarifa-detalle { font-size: .95rem; line-height: 1.35; color: var(--tinta-suave); }
.tarifa-puntos { border-bottom: 1px dotted var(--linea); margin-bottom: .45rem; min-width: .75rem; }
.tarifa-precio {
	font-size: clamp(1.35rem, 6cqw, 1.6rem);
	line-height: 1.2;
	white-space: nowrap;
	font-variant-numeric: lining-nums tabular-nums;
}

/* Seña: el monto grande, como un precio de la carta */
.sena-monto {
	margin: 1.25rem auto 0 !important;
	font-size: clamp(2.4rem, 11cqw, 3.2rem);
	line-height: 1.1;
	font-variant-numeric: lining-nums;
}
.sena-monto + .versal { margin-top: .5rem !important; }

.observaciones { margin-top: 2.5rem; }
.observaciones ul {
	margin: 1.4rem 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: .9rem;
	text-align: left;
	font-size: 1.02rem;
	line-height: 1.5;
}
.observaciones li { padding-left: 1.1rem; position: relative; }
.observaciones li::before { content: "·"; position: absolute; left: .2rem; color: var(--tinta-suave); }

#hotel .galeria { margin-top: 2.5rem; }

/* Logo de la agencia en la tarjeta de reserva: versión oficial en azul para fondos claros (va bajo la textura de tinta, como el resto) */
.logo-agencia {
	display: block;
	width: clamp(11rem, 58cqw, 15rem);
	height: auto;
	margin: 1.75rem auto .25rem;
}

.pie-volver { margin-top: 2.5rem; }

/* ---------- Sobre de apertura ---------- */

.sobre { display: none; }

html.con-sobre body { overflow: hidden; }
html.con-sobre .sobre {
	position: fixed;
	inset: 0;
	z-index: 10;
	display: grid;
	place-items: center;
	padding: 1.5rem;
	background-color: var(--papel);
	background-image: url("plates/papel.png");
	background-image: var(--textura);
	background-size: clamp(84px, 21.48vw, 220px);
	transition: opacity .7s ease .9s, visibility 0s linear 1.6s;
}

.sobre-boton {
	display: grid;
	justify-items: center;
	gap: clamp(2rem, 9vw, 3.25rem);
	padding: 0;
	border: 0;
	background: none;
	color: var(--tinta);
	font: inherit;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.sobre-boton:focus-visible { outline-offset: 10px; }

.sobre-papel {
	position: relative;
	display: block;
	width: min(88vw, 30rem);
	aspect-ratio: 1.45 / 1;
	/* El interior del sobre (solo se ve al abrirse la solapa): liso y un poco más oscuro, para que contraste con el papel */
	background: linear-gradient(180deg, #e9e0d3 0%, #f0e9df 55%, #f4eee6 100%);
	perspective: 1400px;
	box-shadow: 0 1px 1px rgba(60, 45, 25, .08), 0 22px 40px -26px rgba(60, 45, 25, .55);
}
.sobre-papel > span { position: absolute; inset: 0; }
.sobre-solapa-izq { background: linear-gradient(100deg, rgba(150,120,80,.07), rgba(150,120,80,0)), var(--fibras); clip-path: polygon(0 0, 50.5% 55%, 0 100%); }
.sobre-solapa-der { background: linear-gradient(260deg, rgba(150,120,80,.07), rgba(150,120,80,0)), var(--fibras); clip-path: polygon(100% 0, 49.5% 55%, 100% 100%); }
.sobre-solapa-sombra {
	background: rgba(70, 50, 25, .13);
	clip-path: polygon(0 0, 100% 0, 50% 66%);
	filter: blur(2px);
	transition: opacity .4s ease .35s;
}
.sobre.abriendo .sobre-solapa-sombra { opacity: 0; }
.sobre-solapa-abajo { background: linear-gradient(0deg, rgba(150,120,80,.02), rgba(255,255,255,.12)), var(--fibras); clip-path: polygon(0 100%, 50% 44%, 100% 100%); }
.sobre-solapa {
	background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(150,120,80,.03)), var(--fibras);
	clip-path: polygon(0 0, 100% 0, 50% 63%);
	transform-origin: 50% 0;
	transition: transform .85s cubic-bezier(.45, 0, .2, 1) .35s;
	backface-visibility: hidden;
}
.sobre-sello {
	position: absolute;
	left: 50%;
	top: 62%;
	width: 19%;
	height: auto;
	translate: -50% -50%;
	filter: drop-shadow(0 4px 5px rgba(6, 31, 82, .28));
	transition: transform .35s ease, opacity .35s ease;
}
.sobre-boton:hover .sobre-sello { transform: scale(1.04); }

.sobre-leyenda {
	font-weight: 600;
	font-size: .74rem;
	letter-spacing: .3em;
	padding-left: .3em;
	text-transform: uppercase;
	animation: latido 2.6s ease-in-out infinite;
}
@keyframes latido { 50% { opacity: .45; } }

/* Abriendo: el sello se rompe, la solapa se levanta y el sobre se desvanece */
.sobre.abriendo .sobre-sello { transform: scale(.55) rotate(-12deg); opacity: 0; }
.sobre.abriendo .sobre-solapa { transform: rotateX(180deg); }
.sobre.abriendo .sobre-leyenda { animation: none; opacity: 0; transition: opacity .3s; }
.sobre.abriendo { opacity: 0; visibility: hidden; }
html.sobre-abierto .sobre { display: none; }
html.sobre-abierto body { overflow: auto; }

/* La invitación aparece debajo mientras el sobre se va */
html.con-sobre .portada { opacity: 0; transition: opacity 1.1s ease 1s; }
html.con-sobre.sobre-abriendo .portada,
html.con-sobre.sobre-abierto .portada { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
	html.con-sobre .sobre { transition: opacity .3s ease, visibility 0s linear .3s !important; }
}

/* Los nombres reciben el foco al abrir el sobre (para lectores de pantalla); no son interactivos. */
.nombres:focus { outline: none; }

/* ---------- Textura de tinta ----------
   Capa de fibras del mismo papel, en un tono algo más oscuro que el fondo, con modo "aclarar":
   sobre el papel no cambia nada (el papel ya es más claro) y sobre la tinta aclara apenas las fibras,
   como papel que asoma a través de la impresión. No agrega color. Si no carga, la página se ve igual.
   Acompaña el scroll y está alineada con el fondo. Las fotos del hotel quedan por encima. */
body { position: relative; }
.textura-tinta {
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
	background-image: url("plates/textura-tinta.webp");
	background-size: var(--tamano-textura);
	background-repeat: repeat;
	mix-blend-mode: lighten;
}
.galeria { position: relative; z-index: 6; }

/* ---------- Música ----------
   Gramófono fijo arriba a la derecha, debajo de la textura de tinta (z-index menor) y debajo del sobre. */
.musica {
	position: fixed;
	top: max(.75rem, env(safe-area-inset-top));
	right: max(.75rem, env(safe-area-inset-right));
	z-index: 4;
	width: 3.25rem;
	height: 3.25rem;
	padding: .2rem;
	border: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	opacity: .78;
	transition: opacity .3s ease;
	-webkit-tap-highlight-color: transparent;
}
.musica[hidden] { display: none; }
.musica img { display: block; width: 100%; height: auto; transform-origin: 50% 85%; }
.musica:hover, .musica[aria-pressed="true"] { opacity: 1; }
/* Apagado: titila como "Toque para abrir", para invitar a tocarlo */
.musica[aria-pressed="false"] { animation: latido 2.6s ease-in-out infinite; }
.musica[aria-pressed="false"]:hover { animation: none; }
/* Aviso al entrar: una tarjetita de papel debajo del gramófono, con un piquito que lo señala */
.musica-aviso {
	position: fixed;
	top: calc(max(.75rem, env(safe-area-inset-top)) + 3.25rem + .6rem);
	right: max(.5rem, env(safe-area-inset-right));
	z-index: 4;
	margin: 0;
	padding: .55rem .9rem .6rem;
	display: grid;
	justify-items: center;
	background: var(--papel-claro);
	border: 1px solid var(--linea);
	box-shadow: 0 8px 18px -12px rgba(60, 45, 25, .45);
	text-align: center;
	pointer-events: none;
	opacity: 0;
	translate: 0 -.4rem;
	transition: opacity .8s ease, translate .8s ease;
}
.musica-aviso[hidden] { display: none; }
.musica-aviso.visible { opacity: 1; translate: 0 0; }
.musica-aviso::before {
	content: "";
	position: absolute;
	top: -6px;
	right: calc(1.625rem + .25rem - 5px); /* centrado bajo el gramófono */
	width: 10px;
	height: 10px;
	background: var(--papel-claro);
	border-top: 1px solid var(--linea);
	border-left: 1px solid var(--linea);
	rotate: 45deg;
}
.musica-aviso-titulo { font-family: var(--caligrafia); font-size: 1.5rem; line-height: 1.1; }
.musica-aviso-texto {
	font-size: .66rem;
	font-weight: 600;
	letter-spacing: .22em;
	padding-left: .22em;
	text-transform: uppercase;
	color: var(--tinta-suave);
}
/* Sonando: la bocina se mece apenas */
.musica[aria-pressed="true"] img { animation: mecer 2.4s ease-in-out infinite; }
@keyframes mecer { 0%, 100% { rotate: -4deg; } 50% { rotate: 4deg; } }
/* Pausado: una barra fina en tinta cruza el gramófono */
.musica[aria-pressed="false"]::after {
	content: "";
	position: absolute;
	left: 18%;
	right: 18%;
	top: 50%;
	height: 1px;
	background: var(--tinta-suave);
	rotate: -38deg;
	opacity: .7;
}

/* ---------- Fotos ampliables ---------- */
.galeria-abrir {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
}

.visor {
	width: 100vw;
	height: 100dvh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: #071a42;
	color: var(--papel);
	overflow: hidden;
}
.visor::backdrop { background: rgba(6, 22, 56, .6); }
.visor[open] { display: block; animation: visor-entra .25s ease; }
@keyframes visor-entra { from { opacity: 0; } }

.visor-pista {
	display: flex;
	height: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior: contain;
}
.visor-pista::-webkit-scrollbar { display: none; }
.visor-pista:focus-visible { outline: none; }
.visor-foto {
	flex: 0 0 100%;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 1rem;
	padding: 4rem 1rem 2.5rem;
	scroll-snap-align: center;
}
.visor-foto img {
	max-width: min(100%, 1366px);
	max-height: calc(100dvh - 9rem);
	width: auto;
	height: auto;
	object-fit: contain;
}
.visor-foto p {
	margin: 0;
	font-family: var(--cursiva);
	font-size: 1.6rem;
	line-height: 1.3;
	color: var(--papel);
}

.visor-boton {
	position: absolute;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 1px solid rgba(246, 238, 231, .45);
	border-radius: 50%;
	background: rgba(6, 22, 56, .45);
	color: var(--papel);
	font: 400 1.9rem/1 var(--versal);
	cursor: pointer;
}
.visor-boton:hover { background: rgba(246, 238, 231, .15); }
.visor-boton:focus-visible { outline: 2px solid var(--papel); outline-offset: 3px; }
.visor-cerrar { top: max(1rem, env(safe-area-inset-top)); right: 1rem; }
.visor-anterior, .visor-siguiente { top: 50%; translate: 0 -50%; }
.visor-anterior { left: 1rem; }
.visor-siguiente { right: 1rem; }
@media (hover: none) and (pointer: coarse) {
	.visor-anterior, .visor-siguiente { display: none; } /* en el teléfono se desliza con el dedo */
}
html.visor-abierto body { overflow: hidden; }