/* Colección XV · BASE 1 · Editorial de retrato
   Portada asimétrica de revista. Tramo fijo breve (190vh): el nombre se desliza de lado y la ventana del retrato
   cambia de forma en tres etapas (--v0 → --v1 → --v2). Las medidas de la ventana van en vw/vh porque la escena
   ocupa la pantalla: así un círculo es un círculo y la foto (object-fit) nunca se deforma, solo cambia su máscara.
   Cada concepto redefine --v0t … --v2k (arriba, derecha, abajo, izquierda, radio). */

.base-retrato {
	--v0t: 9vh;  --v0r: 6vw;  --v0b: 9vh;  --v0l: 56vw; --v0k: 0px;
	--v1t: 9vh;  --v1r: 6vw;  --v1b: 9vh;  --v1l: 56vw; --v1k: 0px;
	--v2t: 50vh; --v2r: 5vw;  --v2b: 7vh;  --v2l: 5vw;  --v2k: 0px;
	--nombre-tam: clamp(5rem, 13.5vw, 13rem);
}
.r-portada { --m1: clamp(0, (var(--p, 0) - .04) / .44, 1); --m2: clamp(0, (var(--p, 0) - .5) / .42, 1); }
.r-escena { color: var(--tinta); }
.r-fondo { position: absolute; inset: -4% 0; }
.r-fondo picture, .r-fondo img, .r-fondo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: translateY(var(--py, 0)); }
.r-fondo picture img { transform: none; }

.r-ventana {
	position: absolute; inset: 0; z-index: 1;
	clip-path: inset(
		calc(var(--v0t) + (var(--v1t) - var(--v0t)) * var(--m1) + (var(--v2t) - var(--v1t)) * var(--m2))
		calc(var(--v0r) + (var(--v1r) - var(--v0r)) * var(--m1) + (var(--v2r) - var(--v1r)) * var(--m2))
		calc(var(--v0b) + (var(--v1b) - var(--v0b)) * var(--m1) + (var(--v2b) - var(--v1b)) * var(--m2))
		calc(var(--v0l) + (var(--v1l) - var(--v0l)) * var(--m1) + (var(--v2l) - var(--v1l)) * var(--m2))
		round calc(var(--v0k) + (var(--v1k) - var(--v0k)) * var(--m1) + (var(--v2k) - var(--v1k)) * var(--m2)));
}
.r-ventana-in { position: absolute; inset: 0; transform: scale(calc(1.08 - var(--p, 0) * .08)); }
.r-retrato { position: absolute; inset: 0; }
.r-arte { position: absolute; inset: 0; background: var(--ventana-fondo, var(--suave)); }

.r-cabecera {
	position: absolute; z-index: 3; top: max(22px, env(safe-area-inset-top)); left: 6vw; right: 6vw;
	display: flex; justify-content: space-between; gap: 16px; padding-bottom: 12px;
	border-bottom: 1px solid var(--linea); font-size: .72rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
	opacity: calc(1 - var(--m2, 0) * .6);
}
.r-titulos {
	position: absolute; z-index: 2; left: 6vw; top: 52%; display: grid; gap: 14px; justify-items: start;
	transform: translate(calc(var(--m1) * -2vw + var(--m2) * 1vw), calc(-50% - var(--m2) * 21vh));
}
.r-nombre { font-size: calc(var(--nombre-tam) * var(--n, 1)); color: var(--nombre-color, var(--tinta)); padding: .06em .12em .12em 0; }
.r-nombre-caja { position: relative; }
.r-evento { color: var(--acento); }
.r-titulos .r-fecha { padding-left: .2em; line-height: 1.55; letter-spacing: .06em; text-wrap: balance; }
.r-pista { position: absolute; z-index: 3; left: 6vw; bottom: max(24px, env(safe-area-inset-bottom)); opacity: calc(1 - var(--p, 0) * 4); }

/* ---------- secciones */
.r-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.r-grid-inv { grid-template-columns: .85fr 1.15fr; }
.r-col-texto { display: grid; gap: 22px; align-content: center; }
.r-firma { font-size: clamp(2.6rem, 5vw, 4rem); color: var(--acento); }
.r-foto-b, .r-foto-h { aspect-ratio: 4 / 5; border-radius: var(--radio-foto, 2px); transform: translateY(var(--py, 0)); }
.r-ornamento { display: grid; place-items: center; transform: translateY(var(--py, 0)); }
.r-orn { width: min(100%, 420px); }

.r-fecha-grid { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "k k" "dia datos" "cuenta cuenta"; gap: 12px clamp(24px, 4vw, 64px); align-items: end; }
.r-fecha-k { grid-area: k; }
.r-dia-caja { grid-area: dia; position: relative; padding: .04em .1em; }
.r-dia { display: block; font-size: clamp(8rem, 22vw, 19rem); color: var(--tinta); }
.r-fecha-datos { grid-area: datos; display: grid; gap: 4px; padding-bottom: 2.2vw; }
.r-mes { font-size: clamp(2.4rem, 6vw, 5rem); font-weight: 300; line-height: 1; letter-spacing: -.02em; text-transform: lowercase; }
.r-anio { font-size: 1.4rem; font-weight: 600; letter-spacing: .3em; color: var(--acento); }
.r-sem { color: var(--tinta-2); letter-spacing: .08em; }
.r-cuenta-caja { grid-area: cuenta; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding-top: 28px; margin-top: 18px; border-top: 1px solid var(--linea); }
.r-cuenta { justify-items: start; }

.r-cita { font-size: clamp(1.5rem, 3vw, 2.4rem); line-height: 1.3; font-weight: 300; letter-spacing: -.01em; }
.r-reticula { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--tinta); }
.r-lugar { padding: 28px clamp(0px, 3vw, 40px) 8px 0; border-right: 1px solid var(--linea); }
.r-lugar + .r-lugar { padding-left: clamp(20px, 3vw, 40px); border-right: 0; }
.r-dos { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(24px, 5vw, 80px); align-items: start; }
.r-dos .xv-itinerario { margin: 0; max-width: none; }

.r-galeria .xv-galeria { grid-auto-rows: clamp(140px, 16vw, 230px); }
.r-galeria .g-alta { grid-column: span 4; grid-row: span 2; }
.r-galeria .g-media { grid-column: span 4; }
.r-galeria .g-ancha { grid-column: span 8; }
.r-galeria-cab { position: relative; display: inline-block; padding: 6px 18px 0 0; }
.r-detalles { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.r-detalles .xv-regalo, .r-detalles .xv-colab { margin: 0; justify-items: start; text-align: left; padding: 0; }
.r-detalles .xv-dato { justify-items: start; }
.r-rsvp { box-shadow: 0 30px 60px -40px color-mix(in srgb, var(--tinta) 60%, transparent); }
.r-cierre-nombre { position: relative; padding: .1em .3em; }
.r-nombre-fin { font-size: calc(clamp(4.5rem, 12vw, 10rem) * var(--n, 1)); color: var(--acento); }

/* ---------- el viajero: marco de esquinas que cambia de proporción (--vm) */
.base-retrato .xv-viajero { --vj-base: 300; z-index: 4; }
.vj-marco { position: relative; width: calc(300px * var(--vs, 1)); height: calc(300px * var(--vs, 1) * (.42 + var(--vm, 0) * .58)); }
.vj-marco i { position: absolute; width: 22px; height: 22px; border: 0 solid var(--marco, var(--acento)); }
.vj-marco i:nth-child(1) { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.vj-marco i:nth-child(2) { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.vj-marco i:nth-child(3) { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }
.vj-marco i:nth-child(4) { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }

/* ---------- sin retrato: la ventana muestra la composición del concepto */
html:not(.con-fotos) .base-retrato { --ventana-fondo: transparent; }

@media (max-width: 760px) {
	.base-retrato {
		--v0t: 36vh; --v0r: 10vw; --v0b: 10vh; --v0l: 34vw; --v0k: 0px;
		--v1t: 36vh; --v1r: 10vw; --v1b: 10vh; --v1l: 34vw; --v1k: 0px;
		--v2t: 46vh; --v2r: 4vw;  --v2b: 12vh; --v2l: 4vw;  --v2k: 0px;
		--nombre-tam: clamp(3.6rem, 21vw, 6rem);
	}
	.r-titulos { left: 6vw; right: 6vw; top: 26%; transform: translateY(calc(-50% - var(--m2) * 6vh)); }
	.r-cabecera span:nth-child(2) { display: none; }
	.r-grid, .r-grid-inv, .r-dos, .r-detalles { grid-template-columns: 1fr; }
	.r-grid-inv > figure { order: 2; }
	.r-fecha-grid { grid-template-columns: 1fr; grid-template-areas: "k" "dia" "datos" "cuenta"; }
	.r-fecha-datos { padding-bottom: 0; }
	.r-reticula { grid-template-columns: 1fr; }
	.r-lugar, .r-lugar + .r-lugar { padding: 24px 0; border-right: 0; border-bottom: 1px solid var(--linea); }
	.r-galeria .g-alta { grid-column: span 3; }
	.r-galeria .g-media { grid-column: span 3; }
	.r-galeria .g-ancha { grid-column: span 6; }
	.r-ornamento { max-width: 70%; margin-inline: auto; }
}

/* Movimiento reducido: la ventana queda en su forma final y los títulos en su lugar. */
html.quieto .r-portada { --m1: 1; --m2: 0; }
html.quieto .r-titulos { transform: translateY(-50%); }
@media (max-width: 760px) { html.quieto .r-titulos { transform: translateY(-50%); } }