/* 04 · Ballet de Seda — cinta rosa empolvado con pliegues amplios sobre marfil.
   El lazo rodea el centro (las alas a los lados del retrato) y al bajar se suelta: cada lazada se aparta y gira.
   La cinta sigue por el margen de toda la invitación (hilo de seda) y un tramo de cinta acompaña las secciones. */

.c-xv-ballet-de-seda { --nombre-color: #3E2A35; --radio: 24px; --radio-foto: 18px; --hilo-ancho: 16; --lazo: min(44vw, 52vh); }

/* Lazo completo arriba y dos cintas que caen por los lados. Al abrir, el lazo baja a su lugar y las cintas se
   despliegan; con el scroll el lazo sube y se achica, y las cintas se abren hacia los márgenes. */
.c-xv-ballet-de-seda .m-objeto img { filter: drop-shadow(0 26px 30px rgba(110, 74, 98, .2)); transition: translate 1.8s cubic-bezier(.77,0,.175,1), rotate 1.8s cubic-bezier(.77,0,.175,1), opacity 1.2s, scale 1.8s cubic-bezier(.34,1.2,.64,1); }
.c-xv-ballet-de-seda .seda-lazo { width: var(--lazo); left: 50%; top: 1vh; transform: translateX(-50%) translateY(calc(var(--p, 0) * -16vh)) scale(calc(1 - var(--p, 0) * .3)); z-index: 2; }
.c-xv-ballet-de-seda .seda-cinta { height: 74vh; top: calc(1vh + var(--lazo) * .36); z-index: 1; }
.c-xv-ballet-de-seda .seda-cinta-izq { right: calc(50% + var(--lazo) * .1); transform-origin: 90% 0; transform: translateX(calc(var(--p, 0) * -18vw)) rotate(calc(var(--p, 0) * 8deg)); }
.c-xv-ballet-de-seda .seda-cinta-der { left: calc(50% + var(--lazo) * .1); transform-origin: 10% 0; transform: translateX(calc(var(--p, 0) * 18vw)) rotate(calc(var(--p, 0) * -8deg)); }
html:not(.m-abierto) .c-xv-ballet-de-seda .seda-lazo { translate: 0 -8vh; scale: .8; }
html:not(.m-abierto) .c-xv-ballet-de-seda .seda-cinta { scale: 1 .2; opacity: 0; }
.c-xv-ballet-de-seda .m-centro { padding-top: 30vh; }
html.con-fotos .c-xv-ballet-de-seda .m-centro { padding-top: 24vh; }
.c-xv-ballet-de-seda .m-ventana { --ventana-radio: 999px 999px 999px 999px; --ventana-radio-clip: 999px; border: 6px solid #FFFDFA; }
.c-xv-ballet-de-seda .m-evento { letter-spacing: .5em; color: #7E5670; }

/* Entrada: el lazo atado arriba con sus cintas. */
.c-xv-ballet-de-seda .xv-entrada { background: radial-gradient(80% 70% at 50% 30%, #FFFFFF, #F5E3E6); }
.c-xv-ballet-de-seda .en-lazo { position: absolute; width: min(40vw, 46vh); left: 50%; top: 2vh; transform: translateX(-50%); }
.c-xv-ballet-de-seda .en-cinta-izq, .c-xv-ballet-de-seda .en-cinta-der { position: absolute; height: 60vh; top: calc(2vh + min(40vw, 46vh) * .36); opacity: .9; }
.c-xv-ballet-de-seda .en-cinta-izq { right: calc(50% + min(40vw, 46vh) * .12); }
.c-xv-ballet-de-seda .en-cinta-der { left: calc(50% + min(40vw, 46vh) * .12); }
.c-xv-ballet-de-seda .xv-entrada-contenido { margin-top: 26vh; padding: 24px 28px; border-radius: 30px; background: radial-gradient(closest-side, rgba(255, 253, 250, .92), rgba(255, 253, 250, .6) 70%, transparent); }
.c-xv-ballet-de-seda .xv-entrada .xv-monograma { display: none; }

/* Viajero: un tramo de cinta que ondula detrás del texto. */
.c-xv-ballet-de-seda .xv-viajero { --vj-base: 520; }
.c-xv-ballet-de-seda .vj-cinta { width: 110px; transform: rotate(calc(-20deg + var(--vm, 0) * 40deg)); opacity: .6; }

/* Secciones: aire, curvas y malva. */
.c-xv-ballet-de-seda .xv-titulo { font-weight: 400; letter-spacing: -.01em; }
.c-xv-ballet-de-seda .m-fecha-caja { background: rgba(255, 253, 250, .75); border-radius: 999px; border: 1px solid rgba(197, 173, 135, .55); }
.c-xv-ballet-de-seda .m-dia { color: #3E2A35; font-weight: 200; }
.c-xv-ballet-de-seda .xv-superficie { background: rgba(255, 253, 250, .9); border-color: rgba(197, 173, 135, .45); }
.c-xv-ballet-de-seda .m-orn { width: 160%; margin-left: -30%; filter: drop-shadow(0 18px 22px rgba(110, 74, 98, .18)); }
.c-xv-ballet-de-seda .m-cierre-caja { background: radial-gradient(closest-side, rgba(217, 180, 190, .45), transparent); }

@media (max-width: 760px) {
	.c-xv-ballet-de-seda { --lazo: 86vw; }
	.c-xv-ballet-de-seda .seda-cinta { height: 62vh; }
	.c-xv-ballet-de-seda .m-centro { padding-top: 30vh; }
	html.con-fotos .c-xv-ballet-de-seda .m-centro { padding-top: 22vh; }
	.c-xv-ballet-de-seda .en-lazo { width: 78vw; }
	.c-xv-ballet-de-seda .en-cinta-izq, .c-xv-ballet-de-seda .en-cinta-der { top: calc(2vh + 78vw * .36); height: 50vh; }
	.c-xv-ballet-de-seda .en-cinta-izq { right: calc(50% + 78vw * .12); }
	.c-xv-ballet-de-seda .en-cinta-der { left: calc(50% + 78vw * .12); }
}

/* Las colas enmarcan el nombre, sin pasar por sus letras. */
.c-xv-ballet-de-seda .seda-cinta-izq { right: calc(50% + var(--lazo) * .36); }
.c-xv-ballet-de-seda .seda-cinta-der { left: calc(50% + var(--lazo) * .36); }