/* 06 · Perlas Modernas — perlas de nácar en crema y rosa antiguo.
   El hilo de perlas dibuja una curva amplia alrededor del nombre; al bajar, la curva (el viajero, 22 perlas)
   se desplaza y se cierra en un círculo alrededor de la fecha: cada perla va de su punto en la curva a su
   punto en el círculo con --vm. El margen lleva un hilo de perlas (trazo punteado de puntas redondas). */

.c-xv-perlas-modernas { --nombre-color: #55434A; --radio: 20px; --radio-foto: 999px; --hilo-ancho: 9; --hilo: #E3CCD2; --hilo2: transparent; }
.c-xv-perlas-modernas .m-hilo path:first-child { stroke-dasharray: 0 20; }

.c-xv-perlas-modernas .m-fondo-img { opacity: .95; }
.c-xv-perlas-modernas .pe-velo { position: absolute; inset: 0; background: radial-gradient(60% 55% at 50% 45%, #FFFBF5, transparent 70%), linear-gradient(180deg, #F7F0E6, #F3E3E1); }
.c-xv-perlas-modernas .pe-hilo {
	width: min(52vw, 80vh); left: 50%; top: -3vh;
	transform: translateX(-50%) translateY(calc(var(--p, 0) * -10vh)) scale(calc(1 - var(--p, 0) * .12));
	opacity: calc(1 - var(--p, 0) * 1.2);
	filter: drop-shadow(0 10px 12px rgba(85, 67, 74, .18));
}
html:not(.m-abierto) .c-xv-perlas-modernas .pe-hilo { clip-path: inset(0 50% 0 50%); }
html.m-abierto .c-xv-perlas-modernas .pe-hilo { clip-path: inset(0 0 0 0); transition: clip-path 1.8s cubic-bezier(.77,0,.175,1); }
.c-xv-perlas-modernas .m-centro { padding-top: 16vh; }
html.con-fotos .c-xv-perlas-modernas .m-centro { padding-top: 10vh; }
.c-xv-perlas-modernas .m-ventana { --ventana-radio: 50%; --ventana-radio-clip: 50%; aspect-ratio: 1; width: min(22vw, 28vh); box-shadow: 0 0 0 8px #FFFBF5, 0 0 0 9px #C79CA8; }
.c-xv-perlas-modernas .m-evento { color: #8A5566; }

/* Entrada */
.c-xv-perlas-modernas .xv-entrada { background: radial-gradient(70% 60% at 50% 40%, #FFFBF5, #F3E3E1); }
.c-xv-perlas-modernas .en-hilo { position: absolute; width: min(110vw, 1100px); left: 50%; top: 6vh; transform: translateX(-50%); }
.c-xv-perlas-modernas .xv-entrada-contenido { margin-top: 8vh; }

/* Viajero: las perlas, de la curva al círculo. */
.c-xv-perlas-modernas .xv-viajero { --vj-base: 380; }
.vj-perlas { position: relative; width: 300px; height: 300px; }
.vj-perlas i {
	position: absolute; width: calc(var(--r) * 2); height: calc(var(--r) * 2); border-radius: 50%;
	left: calc(var(--x0) + (var(--x1) - var(--x0)) * var(--vm, 0) - var(--r));
	top: calc(var(--y0) + (var(--y1) - var(--y0)) * var(--vm, 0) - var(--r));
	background: radial-gradient(circle at 34% 30%, #FFFFFF 0 12%, #FBF4EE 26%, #E7DED8 62%, #D4B3BC 88%, #C79CA8);
	box-shadow: 0 2px 4px rgba(85, 67, 74, .25);
}

/* Secciones */
.c-xv-perlas-modernas .xv-titulo { font-weight: 300; letter-spacing: -.01em; }
.c-xv-perlas-modernas .m-fecha-caja { padding: 70px 80px; }
.c-xv-perlas-modernas .m-dia { font-weight: 200; }
.c-xv-perlas-modernas .m-cuenta { --tam: clamp(1.8rem, 3.6vw, 2.6rem); }
.c-xv-perlas-modernas .xv-superficie { background: rgba(255, 251, 245, .92); border-color: rgba(199, 156, 168, .45); }
.c-xv-perlas-modernas .m-galeria .xv-galeria button { border-radius: 999px 999px 18px 18px; padding: 6px; }
.c-xv-perlas-modernas .m-galeria .xv-galeria button > * { border-radius: 999px 999px 14px 14px; }
.c-xv-perlas-modernas .m-galeria .g-entera, .c-xv-perlas-modernas .m-galeria .g-entera > * { border-radius: 18px; }
.c-xv-perlas-modernas .m-foto-h { --ventana-radio: 50%; aspect-ratio: 1; }

@media (max-width: 760px) {
	.c-xv-perlas-modernas .pe-hilo { width: 110vw; top: 4vh; }
	.c-xv-perlas-modernas .m-ventana { width: 46vw; }
	.c-xv-perlas-modernas .m-fecha-caja { padding: 56px 50px; }
	.c-xv-perlas-modernas .m-cuenta { --tam: clamp(1.1rem, 5.2vw, 1.4rem); }
	.c-xv-perlas-modernas .xv-viajero { --vj-base: 460; }
}