/* 11 · Disco Couture — esfera disco plateada con reflejos violeta y fucsia; fiesta editorial con luces medidas.
   La esfera cuelga a la izquierda y gira despacio (los reflejos recorren sus bordes); la apertura del retrato
   queda a la derecha. Con el scroll la esfera se desplaza al lateral y deja ver todo; reaparece junto al programa.
   Zonas crema dan descanso visual en detalles y confirmación. */

.c-xv-disco-couture {
	--nombre-color: #F7F0EC; --bola: min(56vh, 40vw);
	--a0t: 40vh; --a0r: 30vw; --a0b: 60vh; --a0l: 70vw;
	--a1t: 14vh; --a1r: calc(30vw - 24vh); --a1b: 38vh; --a1l: calc(70vw - 24vh); --a1k: 24vh;
	--a2t: 10vh; --a2r: 6vw; --a2b: 40vh; --a2l: 6vw; --a2k: 18px;
}
.c-xv-disco-couture .dc-esfera { position: absolute; left: 28vw; top: 38vh; width: var(--bola); aspect-ratio: 1; transform: translate(-50%, -50%) translateX(calc(var(--p, 0) * -40vw)) rotate(calc(var(--p, 0) * -25deg)); }
.c-xv-disco-couture .dc-hilo { position: absolute; left: 50%; bottom: 96%; width: 2px; height: 60vh; background: linear-gradient(transparent, #D6D3DF); }
.c-xv-disco-couture .dc-bola { inset: 0; width: 100%; filter: drop-shadow(0 30px 60px rgba(213, 72, 148, .45)); animation: dc-balanceo 9s ease-in-out infinite; }
.c-xv-disco-couture .dc-reflejo { position: absolute; inset: 4%; border-radius: 50%; mix-blend-mode: screen; pointer-events: none;
	background: radial-gradient(8% 8% at 30% 30%, #fff, transparent), radial-gradient(5% 5% at 60% 22%, #F1D7EA, transparent), radial-gradient(6% 6% at 74% 62%, #fff, transparent), radial-gradient(4% 4% at 42% 72%, #D6D3DF, transparent);
	background-size: 200% 100%; animation: dc-gira 7s linear infinite; }
@keyframes dc-gira { from { background-position: 0 0; } to { background-position: -200% 0; } }
@keyframes dc-balanceo { 0%, 100% { rotate: -3deg; } 50% { rotate: 3deg; } }
.c-xv-disco-couture .dc-destellos { left: -16%; top: -12%; width: 132%; animation: dc-titila 3.4s ease-in-out infinite; pointer-events: none; }
@keyframes dc-titila { 0%, 100% { opacity: .25; scale: .96; } 50% { opacity: 1; scale: 1.02; } }
html:not(.e-abierto) .c-xv-disco-couture .dc-esfera { top: -30vh; }
.c-xv-disco-couture .dc-esfera { transition: top 1.8s cubic-bezier(.34,1.15,.64,1); }
.c-xv-disco-couture .dc-luces { position: absolute; inset: 0; overflow: hidden;
	background: radial-gradient(circle, rgba(247, 240, 236, .9) 0 1.5px, transparent 2.5px) 0 0 / 46px 46px,
		radial-gradient(circle, rgba(242, 155, 203, .8) 0 1.2px, transparent 2.2px) 23px 23px / 46px 46px,
		radial-gradient(45% 55% at 50% 55%, #A3367F, #4A2366 60%, #2A1840); }
.c-xv-disco-couture .dc-luces::before { content: ""; position: absolute; inset: -50%; background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(247, 240, 236, .16) 0 4deg, transparent 4deg 18deg); animation: or-gira-disco 30s linear infinite; }
@keyframes or-gira-disco { to { rotate: 360deg; } }
.c-xv-disco-couture .e-titulos { left: 50%; }
.c-xv-disco-couture .e-nombre { color: #F7F0EC; text-shadow: 0 0 40px rgba(213, 72, 148, .45); }
.c-xv-disco-couture .e-evento { color: #F29BCB; }

.c-xv-disco-couture .en-fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.c-xv-disco-couture .en-esfera { position: absolute; width: min(30vh, 40vw); left: 50%; top: -6vh; translate: -50% 0; animation: dc-balanceo 6s ease-in-out infinite; }
.c-xv-disco-couture .xv-entrada-contenido { margin-top: 14vh; }
.c-xv-disco-couture .xv-entrada .xv-monograma { display: none; }

.c-xv-disco-couture .vj-esfera { width: 150px; filter: drop-shadow(0 20px 30px rgba(213, 72, 148, .35)); transform: rotate(calc(var(--vm, 0) * 40deg)); }

/* Flip de láminas con su propio fondo. */
.c-xv-disco-couture .e-cuenta .xv-num { font-weight: 600; }
.c-xv-disco-couture .xv-titulo { font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: clamp(1.8rem, 4vw, 3.2rem); }
.c-xv-disco-couture .xv-titulo .xv-script { text-transform: none; color: #F29BCB; font-size: 1.5em; }
.c-xv-disco-couture .e-mes { color: #F29BCB; }
/* Descanso crema: detalles y confirmación en superficies claras con su propia tinta. */
.c-xv-disco-couture .e-detalles, .c-xv-disco-couture .e-confirmar { --tinta: #2A1840; --tinta-2: #5A4670; --acento: #A3236A; --linea: rgba(42, 24, 64, .16); --papel: #F7F0EC; --boton: #2A1840; --boton-tinta: #F7F0EC; color: #2A1840; }
.c-xv-disco-couture .e-detalles .e-marco, .c-xv-disco-couture .e-confirmar .e-marco { background: #F7F0EC; border-radius: 28px; padding: clamp(28px, 5vw, 64px); }
.c-xv-disco-couture .e-detalles .xv-titulo .xv-script, .c-xv-disco-couture .e-confirmar .xv-titulo .xv-script { color: #A3236A; }
.c-xv-disco-couture .xv-superficie { background: rgba(58, 34, 83, .9); }
.c-xv-disco-couture .e-detalles .xv-superficie, .c-xv-disco-couture .e-confirmar .xv-superficie { background: #FFFFFF; }
.c-xv-disco-couture .e-cierre { background: radial-gradient(50% 45% at 50% 45%, rgba(213, 72, 148, .3), transparent 70%); }

@media (max-width: 760px) {
	.c-xv-disco-couture {
		--bola: 50vw;
		--a0t: 40vh; --a0r: 50vw; --a0b: 60vh; --a0l: 50vw;
		--a1t: 26vh; --a1r: 18vw; --a1b: 40vh; --a1l: 18vw; --a1k: 32vw;
		--a2t: 22vh; --a2r: 4vw; --a2b: 40vh; --a2l: 4vw;
	}
	.c-xv-disco-couture .dc-esfera { left: 50%; top: 13vh; }
}

/* La esfera viajera no tapa la fecha: en la estación de la fecha (--vm = 1) se coloca arriba a la derecha y no crece. */
.c-xv-disco-couture .xv-viajero { transform: translate(var(--vx, 50vw), var(--vy, 50vh)) translate(-50%, -50%) translate(calc(var(--vm, 0) * 210px), calc(var(--vm, 0) * -170px)) scale(min(var(--vs, 1), .9)) rotate(var(--vr, 0deg)); }

/* Segunda revisión: ancho real de pantalla sin desplazamiento lateral. */
@media (max-width:760px) {
 .c-xv-disco-couture .e-confirmar .e-marco { min-width:0; max-width:calc(100% - 40px); }
 .c-xv-disco-couture .e-confirmar .xv-rsvp { width:100%; min-width:0; padding:20px 18px; }
 .c-xv-disco-couture .e-confirmar fieldset { min-width:0; }
 .c-xv-disco-couture .e-confirmar .xv-rsvp .xv-boton { white-space:normal; padding-inline:16px; }
}

@media (max-width:760px) {
 .c-xv-disco-couture .e-confirmar .e-marco { max-width:100%; padding:24px 14px; }
 .c-xv-disco-couture .e-confirmar .xv-contador { gap:8px; max-width:100%; }
 .c-xv-disco-couture .e-confirmar .xv-contador-btn { width:44px; height:44px; flex:0 0 44px; }
}