/* 10 · Órbita Quince — aros cromados con reflejos lila y plata sobre negro violeta.
   El anillo grande gira alrededor de la apertura y, con el scroll, cambia de perspectiva (se inclina como una
   órbita) mientras la apertura pasa de círculo a panorámica. Un aro pequeño (viajero) sigue de órbita en órbita. */

.c-xv-orbita-quince { --nombre-color: #F4F0FA; --anillo: min(80vh, 62vw); }
.c-xv-orbita-quince .or-anillos { position: absolute; left: 50%; top: calc(var(--a1t) + 20vh); width: var(--anillo); aspect-ratio: 1400 / 889; transform: translate(-50%, -50%) scale(calc(1 + var(--p, 0) * .25)); perspective: 900px; opacity: calc(1 - var(--p, 0) * .8); transition: scale 2s cubic-bezier(.34,1.2,.64,1), opacity 1.2s; }
.c-xv-orbita-quince .or-anillos img { inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 20px 40px rgba(165, 138, 230, .35)); }
/* Los aros ya vienen en perspectiva: oscilan como una órbita y, con el scroll, se aplanan aún más. */
.c-xv-orbita-quince .or-a { animation: or-orbita 9s ease-in-out infinite; transform: rotateX(calc(var(--p, 0) * 50deg)); }
.c-xv-orbita-quince .or-b { width: 86% !important; height: 86% !important; left: 7% !important; top: 12% !important; animation: or-orbita-b 12s ease-in-out infinite; opacity: .9; transform: rotateX(calc(var(--p, 0) * 60deg)); }
@keyframes or-orbita { 0%, 100% { rotate: -6deg; } 50% { rotate: 6deg; } }
@keyframes or-orbita-b { 0%, 100% { rotate: 14deg; } 50% { rotate: -2deg; } }
@keyframes or-gira { to { rotate: 360deg; } }
html:not(.e-abierto) .c-xv-orbita-quince .or-anillos { scale: .55; opacity: 0; }
.c-xv-orbita-quince .or-nebulosa { position: absolute; inset: 0; background: radial-gradient(40% 50% at 45% 45%, rgba(165, 138, 230, .7), transparent 70%), radial-gradient(30% 40% at 62% 55%, rgba(201, 206, 216, .45), transparent 70%), #211B2D; }
.c-xv-orbita-quince .e-nombre { letter-spacing: .02em; }
.c-xv-orbita-quince .e-evento { color: #B9A3EE; }

.c-xv-orbita-quince .en-fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.c-xv-orbita-quince .en-anillo { position: absolute; width: min(110vh, 96vw); left: 50%; top: 50%; translate: -50% -50%; animation: or-orbita 9s ease-in-out infinite; opacity: .55; }
.c-xv-orbita-quince .xv-entrada .xv-monograma { border-color: #A58AE6; color: #F4F0FA; }

.c-xv-orbita-quince .vj-anillo { width: 220px; animation: or-orbita 7s ease-in-out infinite; }
.c-xv-orbita-quince .xv-viajero { perspective: 600px; }

.c-xv-orbita-quince .xv-titulo { font-weight: 300; letter-spacing: -.01em; }
.c-xv-orbita-quince .xv-titulo .xv-script { color: #B9A3EE; font-size: 1.6em; }
.c-xv-orbita-quince .e-mes { color: #B9A3EE; }
.c-xv-orbita-quince .xv-superficie { background: rgba(33, 27, 45, .88); border-color: rgba(165, 138, 230, .3); }
.c-xv-orbita-quince .xv-contador-btn, .c-xv-orbita-quince .xv-campo textarea, .c-xv-orbita-quince .xv-buscar input { background: #16121E; }
.c-xv-orbita-quince .xv-check { background: rgba(22, 18, 30, .6); }
.c-xv-orbita-quince .e-cierre { background: radial-gradient(50% 45% at 50% 40%, rgba(165, 138, 230, .22), transparent 70%); }
@media (max-width: 760px) { .c-xv-orbita-quince { --anillo: 112vw; } .c-xv-orbita-quince .or-anillos { top: calc(var(--a1t) + 38vw); } }

/* La órbita de apertura acompaña el monograma, sin atravesar los datos. */
.c-xv-orbita-quince .en-anillo { top:19%; }
