/* Pastel con velas: imagen del pastel apagado y llamas superpuestas en las posiciones de sus mechas. */
.pastel { position: relative; aspect-ratio: 1 / 1; width: min(560px, 100%); margin-inline: auto; }
.pastel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent 100%); mask-image: radial-gradient(closest-side, #000 70%, transparent 100%); }
.pastel .brillo { position: absolute; left: 50%; top: 12%; width: 52%; height: 34%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 196, 102, 0.55), transparent); transform: translate(-50%, -50%); transition: opacity 0.8s; pointer-events: none; }
[data-estado="apagadas"] .pastel .brillo { opacity: 0; }
.mechas { position: absolute; inset: 0; container-type: inline-size; }
.mecha { position: absolute; width: 0; height: 0; }
.llama { position: absolute; left: -1.05cqi; bottom: -0.3cqi; width: 2.1cqi; height: 4.6cqi; transform-origin: 50% 92%; filter: drop-shadow(0 0 0.8cqi rgba(255, 180, 90, 0.85)); animation: parpadeo 0.9s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -0.17s); transition: opacity 0.25s, transform 0.25s;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 44'%3E%3Cdefs%3E%3CradialGradient id='f' cx='50%25' cy='74%25' r='70%25'%3E%3Cstop offset='0' stop-color='%23fffbe8'/%3E%3Cstop offset='.32' stop-color='%23ffe9a0'/%3E%3Cstop offset='.62' stop-color='%23ffb347'/%3E%3Cstop offset='.86' stop-color='%23ff7b2c' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23ff6a1f' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M10 1C13 10 19 19 18 29C17.4 37.6 13.6 43 10 43C6.4 43 2.6 37.6 2 29C1 19 7 10 10 1Z' fill='url(%23f)'/%3E%3Cpath d='M10 15C11.8 20.4 14.6 25.6 14 31.4C13.6 35.6 11.8 38.4 10 38.4C8.2 38.4 6.4 35.6 6 31.4C5.4 25.6 8.2 20.4 10 15Z' fill='%23fffdf4' fill-opacity='.92'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
[data-soplando] .llama { transform: skew(-14deg) scaleY(0.82); }
.mecha[data-encendida="false"] .llama { opacity: 0; transform: scale(0.3, 0.1); }
.humo { position: absolute; left: -1.5cqi; bottom: 0; width: 3cqi; height: 8cqi; border-radius: 50%; background: radial-gradient(ellipse at 50% 80%, rgba(120, 110, 120, 0.45), transparent 70%); opacity: 0; transform-origin: 50% 100%; }
.mecha[data-encendida="false"] .humo { animation: humo 2.6s ease-out forwards; }
.chispas { position: absolute; left: 50%; top: 30%; width: 0; height: 0; pointer-events: none; }
.chispas i { position: absolute; width: 10px; height: 14px; border-radius: 2px; background: var(--c); opacity: 0; }
[data-estado="apagadas"] .chispas i { animation: chispa 1.4s cubic-bezier(0.15, 0.7, 0.3, 1) forwards; }
@keyframes parpadeo { 0% { transform: scale(1) rotate(-1deg); } 100% { transform: scale(0.94, 1.06) rotate(1.5deg); } }
@keyframes humo { 0% { opacity: 0.7; transform: translateY(0) scale(0.6); } 100% { opacity: 0; transform: translateY(-10cqi) scale(1.6) rotate(12deg); } }
@keyframes chispa { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) rotate(0); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--dist) * -1)) rotate(320deg); } }

/* Confeti de fondo: piezas que caen despacio; --x, --d, --delay, --r y --c salen del HTML. */
.confeti { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.confeti i { position: absolute; top: -6%; left: var(--x); width: 9px; height: 14px; border-radius: 2px; background: var(--c); opacity: 0.85; transform: rotate(var(--r)); animation: caer var(--d) linear infinite; animation-delay: var(--delay); }
.confeti i:nth-child(3n) { width: 8px; height: 8px; border-radius: 50%; }
@keyframes caer { 0% { transform: translateZ(0) rotate(var(--r)); } 100% { transform: translate3d(40px, 112vh, 0) rotate(calc(var(--r) + 540deg)); } }
@media (prefers-reduced-motion: reduce) { .confeti { display: none; } }
.soplar { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
[data-soplando] .soplar { transform: scale(0.97); box-shadow: 0 8px 20px -12px rgba(209, 38, 79, 0.8); }

/* Globos con la edad. */
.globos { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.globo { position: absolute; top: 4%; width: 22%; animation: flotar 5.8s ease-in-out infinite; filter: drop-shadow(0 18px 22px rgba(209, 38, 79, 0.18)); }
.globo img { display: block; width: 100%; height: auto; }
.globo.izq { left: 0; transform: rotate(-8deg); }
.globo.der { right: 0; animation-delay: -2.6s; transform: rotate(7deg); }
.globo.solo { right: 2%; }
.soplar[data-oculto] { visibility: hidden; }