/* 14 · Aura de Color — campos de luz melocotón, lila y crema.
   Las formas animables son CSS (como pide el brief): tres halos que respiran y cambian de forma; un halo grande
   (viajero) cambia de forma, tamaño y posición para introducir cada capítulo. Las fotos aparecen en ventanas
   orgánicas que se estabilizan (border-radius que va de orgánico a redondeado con el avance de su sección). */

.c-xv-aura-de-color { --nombre-color: #514062; --hilo-ancho: 2; --radio-foto: 28px; }
.c-xv-aura-de-color .au-halos i { position: absolute; border-radius: 50%; filter: blur(40px); opacity: .85; transition: opacity 2s, scale 2s; animation: au-forma 14s ease-in-out infinite alternate; }
.c-xv-aura-de-color .au-h1 { width: 46vw; height: 40vw; left: 4vw; top: 6vh; background: radial-gradient(circle, #F1B49F, transparent 70%); transform: translateY(calc(var(--p, 0) * -10vh)); }
.c-xv-aura-de-color .au-h2 { width: 40vw; height: 46vw; right: 2vw; top: 22vh; background: radial-gradient(circle, #B7A0D5, transparent 70%); animation-delay: -5s !important; transform: translateY(calc(var(--p, 0) * 8vh)); }
.c-xv-aura-de-color .au-h3 { width: 30vw; height: 30vw; left: 36vw; bottom: -8vh; background: radial-gradient(circle, #FFE3CF, transparent 70%); animation-delay: -9s !important; }
@keyframes au-forma { 0% { border-radius: 50% 50% 50% 50%; } 50% { border-radius: 62% 38% 46% 54% / 40% 58% 42% 60%; } 100% { border-radius: 38% 62% 58% 42% / 56% 44% 56% 44%; } }
html:not(.rl-abierto) .c-xv-aura-de-color .rl-objeto .au-halos i { opacity: 0; scale: .6; }
.c-xv-aura-de-color .au-ventana { width: 86%; aspect-ratio: 4 / 5; border-radius: 58% 42% 50% 50% / 46% 54% 46% 54%; background: radial-gradient(circle at 35% 30%, #FFF5E9, #F6D3C4 45%, #CDB8E2); animation: au-forma 10s ease-in-out infinite alternate; box-shadow: 0 30px 60px -40px rgba(81, 64, 98, .5); }
.c-xv-aura-de-color .rl-retrato { border-radius: calc(48% - var(--m, 0) * 20%) calc(52% - var(--m, 0) * 24%) calc(46% - var(--m, 0) * 18%) calc(54% - var(--m, 0) * 26%) / calc(44% - var(--m, 0) * 16%) calc(56% - var(--m, 0) * 28%) calc(44% - var(--m, 0) * 16%) calc(56% - var(--m, 0) * 28%); }
.c-xv-aura-de-color .rl-foto, .c-xv-aura-de-color .rl-recuerdo { border-radius: calc(46% - var(--p, 0) * 30%) calc(54% - var(--p, 0) * 36%) calc(50% - var(--p, 0) * 32%) calc(50% - var(--p, 0) * 32%); }
.c-xv-aura-de-color .rl-nombre { font-size: calc(clamp(4.8rem, 10.5vw, 9rem) * var(--n, 1)); }
.c-xv-aura-de-color .rl-frase { color: #655575; }

.c-xv-aura-de-color .xv-entrada { background: #FFF5E9; }
.c-xv-aura-de-color .xv-entrada .au-halos i { animation-duration: 8s; }
.c-xv-aura-de-color .xv-entrada .xv-monograma { border: 0; background: radial-gradient(circle, #F6D3C4, #CDB8E2); color: #514062; }

/* Viajero: el halo grande detrás del texto. */
.vj-halo { width: 360px; aspect-ratio: 1; filter: blur(28px); opacity: .7;
	background: radial-gradient(circle at 40% 40%, #F1B49F, transparent 60%), radial-gradient(circle at 65% 65%, #B7A0D5, transparent 60%);
	border-radius: calc(50% + var(--vm, 0) * 12%) calc(50% - var(--vm, 0) * 14%) calc(50% + var(--vm, 0) * 8%) calc(50% - var(--vm, 0) * 10%) / calc(50% - var(--vm, 0) * 12%) calc(50% + var(--vm, 0) * 10%) calc(50% - var(--vm, 0) * 8%) calc(50% + var(--vm, 0) * 14%); }
.c-xv-aura-de-color .au-orn { display: block; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(241, 180, 159, .7), rgba(183, 160, 213, .4) 55%, transparent 70%); filter: blur(12px); }

.c-xv-aura-de-color .rl-cap-t .xv-script { color: #514062; }
.c-xv-aura-de-color .rl-frases li { color: #514062; }
.c-xv-aura-de-color .rl-calendario { border-radius: 26px; }
.c-xv-aura-de-color .rl-cal-mes { background: linear-gradient(90deg, #F1B49F, #B7A0D5); color: #2E2338; }
.c-xv-aura-de-color .xv-superficie { background: rgba(255, 251, 244, .82); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-radius: 28px; border-color: rgba(183, 160, 213, .35); }
.c-xv-aura-de-color .xv-boton:not(.xv-boton-suave) { background: linear-gradient(120deg, #514062, #6E5585); }
.c-xv-aura-de-color .rl-cierre { background: radial-gradient(45% 45% at 50% 50%, rgba(241, 180, 159, .4), transparent 70%); }
html.quieto .c-xv-aura-de-color .au-halos i, html.quieto .c-xv-aura-de-color .au-ventana { animation: none; }