/* Colección XV · BASE 2 · Materiales y pliegues
   Portada centrada: el objeto material ocupa la escena y deja un centro despejado (retrato opcional + nombre).
   Tramo fijo: el objeto se abre con --p (cada concepto decide cómo). Un hilo del material baja por el margen de
   toda la página (materiales.js) y una pieza del mismo material (viajero) enmarca fecha, galería y cierre.
   Recorrido suave y espacioso: columnas centradas, mucho aire, marcos delicados. */

.m-escena { display: grid; place-items: center; }
.m-fondo { position: absolute; inset: 0; }
.m-fondo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.m-objeto { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.m-objeto img { position: absolute; }
.m-centro {
	position: relative; z-index: 2; display: grid; justify-items: center; gap: 12px; text-align: center; padding: 0 6vw;
	transform: translateY(calc(var(--p, 0) * -4vh)) scale(calc(1 - var(--p, 0) * .06));
}
.m-ventana {
	width: min(24vw, 30vh); aspect-ratio: 3 / 4; margin-bottom: 14px;
	border-radius: var(--ventana-radio, 999px 999px 14px 14px);
	box-shadow: 0 30px 60px -36px color-mix(in srgb, var(--tinta) 70%, transparent);
	clip-path: inset(calc((1 - var(--abre, 1)) * 50%) 0 calc((1 - var(--abre, 1)) * 50%) 0 round var(--ventana-radio-clip, 999px 999px 14px 14px));
}
.m-nombre { font-size: calc(clamp(4.6rem, 11vw, 10rem) * var(--n, 1)); color: var(--nombre-color, var(--tinta)); padding: .05em .15em .15em; }
html.con-fotos .m-nombre { font-size: calc(clamp(3.8rem, 8vw, 7.4rem) * var(--n, 1)); }
.m-nombre-caja { position: relative; }
.m-evento { color: var(--acento); }
.m-pista { position: absolute; z-index: 3; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); transform: translateX(-50%); opacity: calc(1 - var(--p, 0) * 4); }

/* Hilo del material por el margen (lo dibuja materiales.js; se revela con el scroll). */
.m-hilo { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; z-index: 0; overflow: visible; clip-path: inset(0 0 calc((1 - var(--h, 0)) * 100%) 0); }
.m-hilo path { fill: none; stroke: var(--hilo, var(--acento-2)); stroke-width: var(--hilo-ancho, 10); stroke-linecap: round; }
.m-hilo path + path { stroke: var(--hilo2, #fff); stroke-width: calc(var(--hilo-ancho, 10) * .28); opacity: .7; }
.xv-invitacion { position: relative; }
.xv-invitacion > section, .xv-invitacion > footer { position: relative; z-index: 1; }

/* Secciones */
.m-columna { max-width: 720px; margin-inline: auto; display: grid; gap: 22px; justify-items: center; }
.m-adorno { width: min(220px, 50vw); margin-top: 10px; }
.m-adorno img, .m-orn { width: 100%; }
.m-fecha-caja { position: relative; display: grid; justify-items: center; gap: 4px; padding: clamp(36px, 6vw, 64px) clamp(36px, 7vw, 80px); margin: 6px 0 18px; }
.m-sem, .m-hora { font-size: .82rem; letter-spacing: .3em; text-transform: uppercase; color: var(--tinta-2); }
.m-dia { font-size: clamp(6rem, 14vw, 10rem); font-weight: 300; color: var(--tinta); }
.m-mes { font-family: var(--script); font-size: clamp(2.4rem, 5vw, 3.6rem); color: var(--acento); line-height: 1; }
.m-cuenta { justify-items: center; margin-bottom: 8px; }
.m-foto-h { width: min(340px, 70vw); aspect-ratio: 4 / 5; border-radius: var(--ventana-radio, 999px 999px 14px 14px); margin-bottom: 8px; }
.m-historia-t { text-align: center; }
.m-lugar { text-align: center; justify-items: center; }
.m-lugar .xv-acciones { justify-content: center; }
.m-galeria-cab { position: relative; display: grid; justify-items: center; padding: 10px 0; }
.m-galeria .xv-galeria { grid-auto-rows: clamp(150px, 18vw, 240px); }
.m-galeria .g-tercio { grid-column: span 4; }
.m-galeria .g-tercio-alta { grid-column: span 4; grid-row: span 2; }
.m-galeria .g-mitad { grid-column: span 4; }
.m-galeria .g-entera { grid-column: span 12; grid-row: span 1; }
.m-galeria .xv-galeria button { border: 1px solid var(--linea); padding: 8px; background: var(--papel); }
.m-galeria .xv-galeria button > * { border-radius: calc(var(--radio-foto, 6px) - 2px); }
.m-caja { max-width: 560px; }
.m-rsvp { box-shadow: 0 40px 80px -50px color-mix(in srgb, var(--tinta) 55%, transparent); }
.m-cierre-caja { position: relative; display: grid; justify-items: center; gap: 8px; padding: 70px 80px; }
.m-nombre-fin { font-size: calc(clamp(4rem, 10vw, 8rem) * var(--n, 1)); color: var(--acento); }

/* Viajero detrás del texto: el material acompaña sin tapar la lectura. */
.base-materiales .xv-viajero { z-index: 0; }

@media (max-width: 760px) {
	.m-ventana { width: 52vw; }
	.m-nombre { font-size: calc(clamp(3.6rem, 19vw, 5.6rem) * var(--n, 1)); }
	html.con-fotos .m-nombre { font-size: calc(clamp(3.2rem, 15vw, 4.6rem) * var(--n, 1)); }
	.m-galeria .g-tercio, .m-galeria .g-mitad { grid-column: span 3; }
	.m-galeria .g-tercio-alta { grid-column: span 3; }
	.m-galeria .g-entera { grid-column: span 6; }
	.m-cierre-caja { padding: 50px 30px; }
	.m-hilo path { stroke-width: calc(var(--hilo-ancho, 10) * .55); }
}
html.quieto .m-centro { transform: none; }