/* Fondo del inicio · «aurora»: papel claro con su trama de puntos y cuatro manchas de color de la marca, muy
   difuminadas, que se mueven despacio. El tono cambia según la sección que se está viendo (aurora.js pone data-tono). */
body:has(.aurora-fondo) { background-color: var(--sc-canvas); background-image: radial-gradient(rgb(122 46 142 / .12) 1.1px, transparent 1.5px); background-size: 24px 24px; }
body:has(.aurora-fondo) .cabeza { background: rgb(251 248 252 / .74); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }

.aurora-fondo { --a1: #E7D2F4; --a2: #FAD0E1; --a3: #FFE0C4; --a4: #D6E6FF;
	position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.aurora-fondo[data-tono="sobre"]   { --a1: #FFDDB8; --a2: #FAD0E1; --a3: #F7E6AE; --a4: #EAD6F5; }
.aurora-fondo[data-tono="disenos"] { --a1: #FACADD; --a2: #E7D2F4; --a3: #FFD8C6; --a4: #F3DDEF; }
.aurora-fondo[data-tono="pasos"]   { --a1: #CBEEE3; --a2: #D6E6FF; --a3: #E6F4D2; --a4: #E7D2F4; }
.aurora-fondo[data-tono="planes"]  { --a1: #E2CDF2; --a2: #F6C9DC; --a3: #D6E6FF; --a4: #FFE0C4; }

.aurora-mancha { position: absolute; border-radius: 50%; filter: blur(clamp(60px, 9vw, 120px)); opacity: .62; will-change: transform;
	transition: background-color 1.6s cubic-bezier(.4, 0, .2, 1); }
.aurora-mancha.m1 { width: 52vmax; height: 52vmax; left: -16vmax; top: -18vmax; background-color: var(--a1); animation: aurora-a 26s ease-in-out infinite alternate; }
.aurora-mancha.m2 { width: 46vmax; height: 46vmax; right: -18vmax; top: 18vh; background-color: var(--a2); animation: aurora-b 32s ease-in-out infinite alternate; }
.aurora-mancha.m3 { width: 50vmax; height: 50vmax; left: 4vw; bottom: -26vmax; background-color: var(--a3); animation: aurora-c 29s ease-in-out infinite alternate; }
.aurora-mancha.m4 { width: 34vmax; height: 34vmax; right: 14vw; bottom: -10vmax; background-color: var(--a4); opacity: .5; animation: aurora-d 36s ease-in-out infinite alternate; }
@keyframes aurora-a { to { transform: translate(14vw, 12vh) scale(1.12); } }
@keyframes aurora-b { to { transform: translate(-16vw, 18vh) scale(.9); } }
@keyframes aurora-c { to { transform: translate(18vw, -14vh) scale(1.08); } }
@keyframes aurora-d { to { transform: translate(-22vw, -20vh) scale(1.15); } }

@media (max-width: 700px) {
	.aurora-mancha { opacity: .5; }
}
@media (prefers-reduced-motion: reduce) {
	.aurora-mancha { animation: none; transition: none; }
}