/* 15 · Álbum de mis Quince — superficies de papel y piezas de álbum contemporáneo, notas a mano (Caveat).
   Portada: el retrato actual grande con dos o tres recuerdos y notas pequeñas; sin fotos, tarjetas de papel con
   notas. Las fotos se acomodan con pequeñas rotaciones y una se amplía a mitad del tramo y vuelve a su lugar
   (además, cualquier foto se abre en grande con Shared Element Transition al tocarla). Pocas cintas y adornos. */

.c-xv-album-de-mis-quince { --nombre-color: #59463E; --radio-foto: 3px; --hilo-ancho: 1.6; --rot-retrato: 2deg; }
.c-xv-album-de-mis-quince .rl-hilo path { stroke-dasharray: 6 8 !important; }
.c-xv-album-de-mis-quince .al-pieza { width: min(9vw, 110px); }
.c-xv-album-de-mis-quince .al-pz1 { left: 6vw; top: 7vh; }
.c-xv-album-de-mis-quince .al-pz2 { right: 6vw; bottom: 7vh; rotate: 180deg; }
.c-xv-album-de-mis-quince .rl-retrato { border: 12px solid #FBF6EC; border-bottom-width: 46px; box-shadow: 0 24px 40px -24px rgba(89, 70, 62, .55); }
.c-xv-album-de-mis-quince .rl-composicion { grid-template-columns: 1fr 1fr; }
.c-xv-album-de-mis-quince .al-recuerdos { position: absolute; inset: 0; pointer-events: none; }
.c-xv-album-de-mis-quince .al-mini { position: absolute; width: min(12vw, 170px); aspect-ratio: 1; border: 8px solid #FBF6EC; border-bottom-width: 26px; box-shadow: 0 16px 26px -16px rgba(89, 70, 62, .55); transform: rotate(calc(var(--r) * (1 - var(--m, 0) * .6))); transition: transform .3s; }
.c-xv-album-de-mis-quince .al-mini-1 { --r: -8deg; left: 4vw; top: 12vh; }
.c-xv-album-de-mis-quince .al-mini-2 { --r: 7deg; left: 30vw; bottom: 9vh; width: min(10vw, 140px); }
.c-xv-album-de-mis-quince .al-nota { position: absolute; font-family: var(--script); font-size: clamp(1.3rem, 1.8vw, 1.7rem); color: #835340; rotate: -4deg; }
.c-xv-album-de-mis-quince .al-nota-1 { left: 5vw; top: calc(12vh + min(12vw, 170px) + 40px); }
.c-xv-album-de-mis-quince .al-nota-2 { left: calc(30vw + min(10vw, 140px) + 16px); bottom: 12vh; rotate: 3deg; }
.c-xv-album-de-mis-quince .al-tarjetas { position: relative; width: 100%; aspect-ratio: 4 / 5; }
.c-xv-album-de-mis-quince .al-tarjeta { position: absolute; width: 66%; filter: drop-shadow(0 16px 20px rgba(89, 70, 62, .3)); }
.c-xv-album-de-mis-quince .al-tarjeta img { width: 100%; }
.c-xv-album-de-mis-quince .al-tarjeta span { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; font-family: var(--script); font-size: clamp(1.4rem, 2.2vw, 2rem); color: #59463E; }
.c-xv-album-de-mis-quince .al-t1 { left: 4%; top: 2%; rotate: -7deg; }
.c-xv-album-de-mis-quince .al-t2 { right: 0; top: 18%; rotate: 6deg; }
.c-xv-album-de-mis-quince .al-t3 { left: 18%; bottom: 0; rotate: -2deg; }
.c-xv-album-de-mis-quince .al-tarjeta { transition: rotate 1.4s cubic-bezier(.34,1.3,.64,1), translate 1.4s cubic-bezier(.34,1.3,.64,1); }
html:not(.rl-abierto) .c-xv-album-de-mis-quince .al-tarjeta { translate: 0 30px; rotate: 0deg; }
.c-xv-album-de-mis-quince .al-orn { position: relative; width: 70%; rotate: 4deg; }
.c-xv-album-de-mis-quince .rl-frase { font-family: var(--script); font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.25; color: #835340; }

.c-xv-album-de-mis-quince .en-fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.c-xv-album-de-mis-quince .en-pieza { position: absolute; width: min(14vw, 130px); }
.c-xv-album-de-mis-quince .en-pz1 { left: 0; top: 0; }
.c-xv-album-de-mis-quince .en-pz2 { right: 0; bottom: 0; rotate: 180deg; }
.c-xv-album-de-mis-quince .xv-entrada .xv-monograma { border-radius: 4px; rotate: -4deg; }

.c-xv-album-de-mis-quince .vj-marco-foto { width: 110px; transform: rotate(calc(-6deg + var(--vm, 0) * 12deg)); filter: drop-shadow(0 12px 14px rgba(89, 70, 62, .35)); }

/* Recuerdos con marco de papel. */
.c-xv-album-de-mis-quince .rl-recuerdo, .c-xv-album-de-mis-quince .rl-foto { border: 10px solid #FBF6EC; border-bottom-width: 34px; border-radius: 3px; }
.c-xv-album-de-mis-quince .rl-cap-t .xv-script { font-weight: 700; color: #59463E; }
.c-xv-album-de-mis-quince .rl-frases li { color: #835340; font-weight: 700; }
.c-xv-album-de-mis-quince .rl-calendario { border-radius: 3px; rotate: -2deg; }
.c-xv-album-de-mis-quince .rl-cal-mes { background: #8FA6B5; color: #22313B; }
.c-xv-album-de-mis-quince .xv-superficie { background: #FBF6EC; border-radius: 4px; box-shadow: 0 20px 30px -24px rgba(89, 70, 62, .45); }
.c-xv-album-de-mis-quince .rl-galeria .xv-galeria button { border: 8px solid #FBF6EC; border-bottom-width: 24px; box-shadow: 0 14px 22px -16px rgba(89, 70, 62, .5); }
.c-xv-album-de-mis-quince .rl-galeria .xv-galeria button:nth-child(odd) { rotate: -1.5deg; }
.c-xv-album-de-mis-quince .rl-galeria .xv-galeria button:nth-child(even) { rotate: 1.5deg; }
.c-xv-album-de-mis-quince .rl-cierre { background: radial-gradient(45% 45% at 50% 50%, rgba(143, 166, 181, .3), transparent 70%); }

@media (max-width: 760px) {
	.c-xv-album-de-mis-quince .rl-composicion { grid-template-columns: 1fr; }
	.c-xv-album-de-mis-quince .al-mini, .c-xv-album-de-mis-quince .al-nota { display: none; }
	.c-xv-album-de-mis-quince .al-pieza { width: 18vw; }
}