/* Colección XV · BASE 5 · Relato personal
   Portada personal: composición en dos columnas (retrato opcional o arte del concepto + nombre, «Mis XV años»,
   frase y fecha). Tramo fijo breve: la composición sube un poco y aparece el índice de capítulos.
   Recorrido por capítulos con una marca cada uno; relato.js traza un hilo de marca en marca que se dibuja con el
   scroll. En «Momentos importantes» los recuerdos se acomodan (rotación → derecho) y uno se amplía a mitad del
   tramo y vuelve a su lugar. */

.rl-portada { --m: clamp(0, (var(--p, 0) - .1) / .6, 1); }
.rl-fondo { position: absolute; inset: 0; }
.rl-fondo-img, .rl-fondo picture, .rl-fondo picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rl-objeto { position: absolute; inset: 0; pointer-events: none; }
.rl-composicion {
	position: absolute; left: 50%; top: 48%; width: min(1120px, 88vw); z-index: 2;
	display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px, 5vw, 80px); align-items: center;
	transform: translate(-50%, calc(-50% - var(--m) * 7vh));
}
html:not(.con-fotos) .rl-composicion { grid-template-columns: .8fr 1.2fr; }
.rl-retrato { aspect-ratio: 4 / 5; border-radius: var(--radio-foto, 6px); transform: rotate(calc(var(--rot-retrato, 0deg) * (1 - var(--m)))); }
.rl-arte { position: relative; aspect-ratio: 4 / 5; display: grid; place-items: center; }
.rl-titulos { display: grid; gap: 12px; justify-items: start; }
.rl-nombre { font-size: calc(clamp(4.4rem, 9.5vw, 8.4rem) * var(--n, 1)); color: var(--nombre-color, var(--tinta)); padding: .04em .15em .14em 0; margin-left: -.06em; }
.rl-frase { font-size: clamp(1.1rem, 1.8vw, 1.4rem); line-height: 1.5; color: var(--tinta-2); max-width: 24em; }
.rl-indice { position: absolute; z-index: 3; left: 50%; bottom: max(26px, 6vh); width: min(1120px, 88vw); transform: translateX(-50%); opacity: clamp(0, (var(--p, 0) - .35) * 3, 1); pointer-events: none; }
.rl-indice ol { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; border-top: 1px solid var(--linea); padding-top: 14px; }
.rl-indice a { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); text-decoration: none; transition: color .25s; }
.rl-indice a:hover { color: var(--acento); }
.rl-indice.activo { pointer-events: auto; }
.rl-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); }

/* Capítulos */
.rl-cap-in { position: relative; padding-left: clamp(0px, 7vw, 96px); }
.rl-cap-cab { position: relative; display: grid; gap: 8px; margin-bottom: clamp(28px, 5vh, 54px); }
.rl-marca { position: absolute; left: calc(-1 * clamp(0px, 7vw, 96px) + clamp(0px, 3vw, 40px)); top: .2em; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--fondo); border: 2px solid var(--hilo, var(--acento)); transform: scale(0); transition: transform .6s cubic-bezier(.34,1.56,.64,1) .2s; }
.visto .rl-marca, .rl-cap.visto .rl-marca { transform: none; }
.rl-cap-t { font-size: clamp(2.6rem, 5.6vw, 4.6rem); }
.rl-cap-t .xv-script { font-size: 1em; color: var(--tinta); }
.rl-hilo { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; z-index: 0; overflow: visible; }
.rl-hilo path { fill: none; stroke: var(--hilo, var(--acento)); stroke-width: var(--hilo-ancho, 1.6); stroke-linecap: round; }
.xv-invitacion { position: relative; }
.xv-invitacion > section, .xv-invitacion > footer { position: relative; z-index: 1; }

.rl-par { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(26px, 5vw, 80px); align-items: center; }
.rl-texto { display: grid; gap: 22px; }
.rl-foto { aspect-ratio: 4 / 5; border-radius: var(--radio-foto, 6px); }
.rl-ornamento { display: grid; place-items: center; min-height: 260px; }

/* Momentos: recuerdos que se acomodan y uno que se amplía y vuelve. */
.rl-momentos { --m: clamp(0, (var(--p, 0) - .12) / .35, 1); --b: clamp(0, 1 - max(var(--p, 0) - .56, .56 - var(--p, 0)) * 5, 1); }
.rl-recuerdos { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 2vw, 26px); align-items: center; }
.rl-recuerdo { all: unset; cursor: zoom-in; position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--radio-foto, 6px); overflow: hidden; background: var(--suave);
	box-shadow: 0 20px 40px -26px color-mix(in srgb, var(--tinta) 70%, transparent);
	transform: translateY(calc((1 - var(--m)) * (var(--i) - 1.5) * 18px)) rotate(calc((1 - var(--m)) * var(--r0, 0deg))); }
.rl-recuerdo > * { width: 100%; height: 100%; }
.rl-recuerdo:focus-visible { outline: 2px solid var(--acento); outline-offset: 4px; }
.rl-recuerdo-0 { --r0: -9deg; }
.rl-recuerdo-1 { --r0: 6deg; z-index: 2; transform: translateY(calc((1 - var(--m)) * -9px)) rotate(calc((1 - var(--m)) * 6deg)) scale(calc(1 + var(--b) * .42)); transition: box-shadow .4s; }
.rl-recuerdo-2 { --r0: -4deg; }
.rl-recuerdo-3 { --r0: 10deg; }
.rl-frases { display: grid; gap: 12px; }
.rl-frases li { font-family: var(--script); font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.1; color: var(--acento); }
.rl-frases li:nth-child(2) { padding-left: 8vw; }
.rl-frases li:nth-child(3) { padding-left: 16vw; }

/* El día */
.rl-fecha { display: grid; grid-template-columns: auto 1fr; gap: clamp(26px, 5vw, 70px); align-items: center; margin-bottom: clamp(36px, 6vh, 64px); }
.rl-calendario { position: relative; display: grid; justify-items: center; width: clamp(200px, 22vw, 270px); padding: 0 0 22px; background: var(--papel); border: 1px solid var(--linea); border-radius: 14px; overflow: hidden; box-shadow: 0 30px 50px -36px color-mix(in srgb, var(--tinta) 60%, transparent); }
.rl-cal-mes { width: 100%; text-align: center; padding: 12px; background: var(--boton); color: var(--boton-tinta); font-size: .8rem; letter-spacing: .26em; text-transform: uppercase; font-weight: 600; }
.rl-cal-dia { font-size: clamp(5.4rem, 9vw, 7.4rem); line-height: 1; margin-top: 10px; }
.rl-cal-sem { color: var(--tinta-2); font-size: .9rem; }
.rl-cuenta-caja { display: grid; gap: 18px; justify-items: start; }
.rl-cuenta { justify-items: start; }
.rl-dos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); margin-top: clamp(40px, 7vh, 72px); align-items: start; }
.rl-sub { margin-bottom: 14px; }
.rl-dos .xv-itinerario { margin: 0; }
.rl-dos .xv-vestimenta { justify-items: start; text-align: left; }
.rl-dos .xv-muestras { justify-content: flex-start; }
.rl-detalles .xv-regalo, .rl-detalles .xv-colab { margin: 0; }
.rl-galeria { margin-top: clamp(40px, 7vh, 72px); }
.rl-galeria .xv-galeria { grid-auto-rows: clamp(140px, 16vw, 220px); }
.rl-galeria .g-tercio { grid-column: span 4; }
.rl-galeria .g-mitad { grid-column: span 6; }
.rl-galeria .g-entera { grid-column: span 12; grid-row: span 2; }
.rl-rsvp { margin-inline: auto; }
.rl-nombre-fin { font-size: calc(clamp(4.2rem, 10vw, 8rem) * var(--n, 1)); color: var(--acento); }

.base-relato .xv-viajero { z-index: 0; }

@media (max-width: 760px) {
	.rl-composicion, html:not(.con-fotos) .rl-composicion { grid-template-columns: 1fr; gap: 18px; top: 50%; width: 88vw; }
	.rl-retrato, .rl-arte { width: 56vw; justify-self: center; }
	.rl-titulos { justify-items: center; text-align: center; }
	.rl-nombre { font-size: calc(clamp(3.6rem, 18vw, 5.4rem) * var(--n, 1)); margin: 0; }
	.rl-indice { display: none; }
	.rl-cap-in { padding-left: 26px; }
	.rl-marca { left: -26px; margin-left: 5px; }
	.rl-par, .rl-fecha, .rl-dos { grid-template-columns: 1fr; }
	.rl-recuerdos { grid-template-columns: 1fr 1fr; }
	.rl-galeria .g-tercio, .rl-galeria .g-mitad { grid-column: span 3; }
	.rl-galeria .g-entera { grid-column: span 6; }
	.rl-frases li:nth-child(2) { padding-left: 4vw; }
	.rl-frases li:nth-child(3) { padding-left: 8vw; }
}
html.quieto .rl-portada { --m: 0; }
html.quieto .rl-indice { opacity: 1; pointer-events: auto; position: absolute; }
html.quieto .rl-momentos { --m: 1; --b: 0; }
html.quieto .rl-marca { transform: none; }