/* ============================================ PLANTILLAS DE FONDO - tukotillon.com Se activan añadiendo una clase al : Sin clase = plantilla por defecto ============================================ */ /* ============================================================ UTILIDAD COMPARTIDA - OPTIMIZADA PARA VISIBILIDAD ============================================================ */ .fondo-decorativo { position: fixed; /* Cambiado de absolute a fixed */ top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 0; /* Detrás de todo el contenido */ overflow: hidden; } .fondo-decorativo::before, .fondo-decorativo::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .fondo-decorativo::before { content: ''; /* Los gradientes y puntos se mantienen igual */ } .fondo-decorativo::after { content: ''; font-size: 1.8rem; /* Ligeramente más grande */ line-height: 2.4rem; word-break: break-all; overflow: hidden; opacity: 0.25; /* Aumentado de 0.15-0.20 para mejor visibilidad */ letter-spacing: 0.5rem; will-change: transform; animation: flotar-motivos 18s linear infinite; } @keyframes flotar-motivos { 0% { transform: translateY(0); } 100% { transform: translateY(-60px); } } /* Ajuste para que la tarjeta esté POR ENCIMA del fondo */ .contenedor { position: relative; z-index: 1; /* Por encima del fondo (z-index: 0) */ } .tarjeta { position: relative; z-index: 2; /* Por encima de todo */ /* El resto de estilos de .tarjeta se mantienen */ } /* ============================================================ GLOBOS ============================================================ */ body.plantilla-globos { background: #e8f4fd; } body.plantilla-globos .fondo-decorativo { background: radial-gradient(circle at 15% 20%, rgba(59, 130, 246, 0.12) 0%, transparent 50%), radial-gradient(circle at 85% 80%, rgba(236, 72, 153, 0.10) 0%, transparent 50%), radial-gradient(circle at 50% 50%, rgba(250, 204, 21, 0.08) 0%, transparent 70%), linear-gradient(135deg, #e8f4fd 0%, #c21d83 100%); } body.plantilla-globos .fondo-decorativo::before { background-image: radial-gradient(circle at 25% 35%, rgba(59, 130, 246, 0.18) 2px, transparent 2px), radial-gradient(circle at 75% 65%, rgba(236, 72, 153, 0.14) 3px, transparent 3px); background-size: 55px 55px, 75px 75px; } body.plantilla-globos .fondo-decorativo::after { content: "🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈🎈"; opacity: 0.22; } body.plantilla-globos .tarjeta { border-color: rgba(59, 130, 246, 0.25); } body.plantilla-globos .tarjeta__titulo-principal { background: linear-gradient(135deg, #2563eb 0%, #ec4899 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } body.plantilla-globos .tarjeta__titulo-cumpleanos { border-bottom-color: #60a5fa; color: #1d4ed8; } body.plantilla-globos .tarjeta__mensaje-contenedor { background: linear-gradient(135deg, #eff6ff 0%, #fdf2f8 100%); border-left-color: #3b82f6; } /* ============================================================ 2. AMOR ============================================================ */ body.plantilla-amor { background: #fdf2f8; } body.plantilla-amor .fondo-decorativo { background: radial-gradient(circle at 15% 20%, rgba(220, 38, 38, 0.10) 0%, transparent 50%), radial-gradient(circle at 85% 80%, rgba(236, 72, 153, 0.12) 0%, transparent 50%), radial-gradient(circle at 50% 50%, rgba(253, 242, 248, 0.4) 0%, transparent 70%), linear-gradient(135deg, #fdf2f8 0%, #ffe4e6 100%); } body.plantilla-amor .fondo-decorativo::before { background-image: radial-gradient(circle at 20% 30%, rgba(220, 38, 38, 0.16) 2px, transparent 2px), radial-gradient(circle at 80% 70%, rgba(236, 72, 153, 0.12) 3px, transparent 3px); background-size: 50px 50px, 70px 70px; } body.plantilla-amor .fondo-decorativo::after { content: "❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️"; opacity: 0.20; animation-duration: 22s; } body.plantilla-amor .tarjeta { border-color: rgba(220, 38, 38, 0.22); } body.plantilla-amor .tarjeta__titulo-principal { background: linear-gradient(135deg, #dc2626 0%, #ec4899 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } body.plantilla-amor .tarjeta__titulo-cumpleanos { border-bottom-color: #f87171; color: #b91c1c; } body.plantilla-amor .tarjeta__mensaje-contenedor { background: linear-gradient(135deg, #fff1f2 0%, #fdf2f8 100%); border-left-color: #ef4444; } /* ============================================================ 3. ESTRELLAS ============================================================ */ body.plantilla-estrellas { background: #f0f0ff; } body.plantilla-estrellas .fondo-decorativo { background: radial-gradient(circle at 15% 20%, rgba(109, 40, 217, 0.10) 0%, transparent 50%), radial-gradient(circle at 85% 80%, rgba(234, 179, 8, 0.14) 0%, transparent 50%), radial-gradient(circle at 50% 50%, rgba(240, 240, 255, 0.4) 0%, transparent 70%), linear-gradient(135deg, #f0f0ff 0%, #fef9c3 100%); } body.plantilla-estrellas .fondo-decorativo::before { background-image: radial-gradient(circle at 20% 30%, rgba(109, 40, 217, 0.14) 2px, transparent 2px), radial-gradient(circle at 80% 70%, rgba(234, 179, 8, 0.16) 3px, transparent 3px); background-size: 45px 45px, 65px 65px; } body.plantilla-estrellas .fondo-decorativo::after { content: "⭐✨⭐✨⭐✨⭐✨⭐✨⭐✨⭐✨⭐✨⭐✨⭐✨⭐✨⭐✨⭐✨⭐✨⭐✨⭐✨⭐✨⭐✨⭐✨⭐✨⭐✨⭐✨⭐✨⭐✨"; opacity: 0.28; /* Aumentado para mejor visibilidad */ animation-duration: 25s; animation-direction: alternate; } body.plantilla-estrellas .tarjeta { border-color: rgba(234, 179, 8, 0.30); } body.plantilla-estrellas .tarjeta__titulo-principal { background: linear-gradient(135deg, #7c3aed 0%, #eab308 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } body.plantilla-estrellas .tarjeta__titulo-cumpleanos { border-bottom-color: #facc15; color: #6d28d9; } body.plantilla-estrellas .tarjeta__mensaje-contenedor { background: linear-gradient(135deg, #fefce8 0%, #f5f3ff 100%); border-left-color: #a855f7; } /* ============================================================ 4. CUMPLE - MÁS FESTIVA ============================================================ */ body.plantilla-cumple { background: #fffbeb; } body.plantilla-cumple .fondo-decorativo { background: radial-gradient(circle at 15% 20%, rgba(249, 115, 22, 0.10) 0%, transparent 50%), radial-gradient(circle at 85% 80%, rgba(34, 197, 94, 0.10) 0%, transparent 50%), radial-gradient(circle at 50% 50%, rgba(255, 251, 235, 0.4) 0%, transparent 70%), linear-gradient(135deg, #fffbeb 0%, #ecfdf5 100%); } body.plantilla-cumple .fondo-decorativo::before { background-image: radial-gradient(circle at 20% 30%, rgba(249, 115, 22, 0.15) 2px, transparent 2px), radial-gradient(circle at 80% 70%, rgba(34, 197, 94, 0.12) 3px, transparent 3px); background-size: 50px 50px, 72px 72px; } body.plantilla-cumple .fondo-decorativo::after { content: "🎉🎂🎊🎉🎊🎉🎊🎉🎂🎊🎉🎊🎉🎊🎉🎂🎊🎂🎊🎂🎊🎉🎂🎉🎂🎊🎉🎊🎉🎊🎉🎂🎊🎉🎊🎉🎊"; opacity: 0.26; /* Aumentado significativamente */ animation-duration: 20s; } body.plantilla-cumple .tarjeta { border-color: rgba(249, 115, 22, 0.25); } body.plantilla-cumple .tarjeta__titulo-principal { background: linear-gradient(135deg, #ea580c 0%, #16a34a 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } body.plantilla-cumple .tarjeta__titulo-cumpleanos { border-bottom-color: #fb923c; color: #c2410c; } body.plantilla-cumple .tarjeta__mensaje-contenedor { background: linear-gradient(135deg, #fff7ed 0%, #f0fdf4 100%); border-left-color: #f97316; } /* ============================================================ COLEGIO ============================================================ */ body.plantilla-cole { background: #2f8fd8; } body.plantilla-cole .fondo-decorativo { background: radial-gradient(circle at 15% 20%, rgba(59, 131, 246, 0.6) 0%, transparent 50%), radial-gradient(circle at 85% 80%, rgba(100, 236, 58, 0.233) 0%, transparent 50%), radial-gradient(circle at 50% 50%, rgba(250, 204, 21, 0.235) 0%, transparent 70%), linear-gradient(135deg, #257ec3 0%, #13cb13 100%); } body.plantilla-cole .fondo-decorativo::before { background-image: radial-gradient(circle at 25% 35%, rgba(59, 130, 246, 0.18) 2px, transparent 2px), radial-gradient(circle at 75% 65%, rgba(91, 236, 72, 0.189) 3px, transparent 3px); background-size: 55px 55px, 75px 75px; } body.plantilla-cole .fondo-decorativo::after { content: "👨‍🎓🎓👨‍🎓🎓👨‍🎓🎓👨‍🎓🎓👨‍🎓🎓👨‍🎓🎓👨‍🎓🎓👨‍🎓🎓👨‍🎓🎓👨‍🎓🎓👨‍🎓🎓👨‍🎓🎓👨‍🎓🎓👨‍🎓🎓👨‍🎓🎓👨‍🎓🎓👨‍🎓🎓👨‍🎓🎓👨‍🎓🎓👨‍🎓🎓👨‍🎓🎓"; opacity: 0.22; } body.plantilla-cole .tarjeta { border-color: rgba(29, 86, 178, 0.25); } body.plantilla-cole .tarjeta__titulo-principal { background: linear-gradient(135deg, #2558c6 0%, #22640e 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } body.plantilla-cole .tarjeta__titulo-cumpleanos { border-bottom-color: #60a5fa; color: #1d4fd84a; } body.plantilla-cole .tarjeta__mensaje-contenedor { background: linear-gradient(135deg, #387fd13c 0%, #21ec3c41 100%); border-left-color: #3b82f6; } /* ============================================================ ACCESIBILIDAD: Reducir movimiento ============================================================ */ @media (prefers-reduced-motion: reduce) { .fondo-decorativo::after { animation: none !important; will-change: auto; } }