/* ===== Tema de Halloween ===== Se activa con en index.html. Para apagarlo, borra ese atributo. */ :root[data-tema="halloween"] { --pumpkin: #f97316; --night: #14061f; --witch: #7c3aed; } /* ----- Pantalla de entrada ----- */ .spooky { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; text-align: center; overflow: hidden; background: radial-gradient(circle at 50% 30%, #3b0f4f 0%, var(--night) 55%, #000 100%); color: #fff; padding: 24px 16px; transition: opacity .7s, visibility .7s; } .spooky.bye { opacity: 0; visibility: hidden; } .spooky__moon { position: absolute; top: 8%; right: 12%; width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff7d6, #fcd34d 60%, #f59e0b); box-shadow: 0 0 60px 20px rgba(252, 211, 77, .35), 0 0 140px 60px rgba(249, 115, 22, .15); animation: moonGlow 4s ease-in-out infinite; } @keyframes moonGlow { 50% { box-shadow: 0 0 80px 30px rgba(252, 211, 77, .5), 0 0 180px 80px rgba(249, 115, 22, .22); } } .spooky__inner { position: relative; z-index: 2; display: grid; gap: .8rem; justify-items: center; max-width: 380px; } .spooky__logo { width: min(240px, 64vw); filter: drop-shadow(0 0 22px rgba(249, 115, 22, .55)); animation: spookyPop 1s cubic-bezier(.2, 1.4, .4, 1) both, float 3.4s ease-in-out 1s infinite; } .spooky__title { font-family: "Creepster", "Poppins", cursive; font-weight: 400; font-size: clamp(2.6rem, 13vw, 4rem); line-height: 1; color: var(--pumpkin); text-shadow: 0 0 18px rgba(249, 115, 22, .8), 0 4px 0 #7c2d12; letter-spacing: .03em; animation: spookyPop .9s .35s both, flicker 3s 1.5s infinite; } @keyframes flicker { 0%, 100% { opacity: 1; } 92% { opacity: 1; } 93% { opacity: .35; } 94% { opacity: 1; } 96% { opacity: .5; } 97% { opacity: 1; } } .spooky__text { color: #e9d5ff; animation: spookyRise .8s .6s both; } .spooky__btn { margin-top: .4rem; border: 0; border-radius: 999px; padding: .95rem 1.6rem; font-weight: 800; font-size: 1rem; background: linear-gradient(135deg, #fb923c, var(--pumpkin)); color: #1c0a00; box-shadow: 0 0 30px rgba(249, 115, 22, .6); animation: spookyRise .8s .85s both, promoPulse 2s 1.8s ease-in-out infinite; } .spooky__skip { color: #c4b5fd; font-size: .75rem; animation: spookyRise .8s 1s both; } @keyframes spookyPop { from { opacity: 0; transform: scale(.4) rotate(-8deg); } } @keyframes spookyRise { from { opacity: 0; transform: translateY(24px); } } .spooky__ground { position: absolute; left: -5%; right: -5%; bottom: -10px; height: 26vh; z-index: 1; background: radial-gradient(ellipse at 50% 100%, #000 55%, transparent 72%); } .spooky__pumpkins { position: absolute; bottom: 5vh; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 8%; z-index: 2; font-size: 2.6rem; } .spooky__pumpkins span { animation: pumpkinGlow 1.6s ease-in-out infinite; } .spooky__pumpkins span:nth-child(2) { font-size: 1.8rem; align-self: flex-end; animation-delay: .5s; } .spooky__pumpkins span:nth-child(3) { animation-delay: 1s; } @keyframes pumpkinGlow { 50% { filter: drop-shadow(0 0 14px rgba(249, 115, 22, .9)); transform: translateY(-4px); } } /* ----- Murciélagos que cruzan la pantalla ----- */ .bat { position: fixed; z-index: 45; pointer-events: none; font-size: 26px; left: -60px; animation: batFly var(--dur, 7s) linear forwards; } .bat i { display: inline-block; font-style: normal; animation: flap .22s ease-in-out infinite alternate; } @keyframes flap { to { transform: scaleX(.55) scaleY(1.1); } } @keyframes batFly { 0% { transform: translate(0, 0) rotate(8deg); } 25% { transform: translate(28vw, -6vh) rotate(-6deg); } 50% { transform: translate(55vw, 4vh) rotate(8deg); } 75% { transform: translate(82vw, -8vh) rotate(-6deg); } 100% { transform: translate(calc(100vw + 120px), 2vh) rotate(6deg); } } .spooky .bat { position: absolute; z-index: 1; } /* ----- Araña colgando ----- */ .spider { position: fixed; top: 62px; right: 86px; z-index: 35; pointer-events: none; display: flex; flex-direction: column; align-items: center; transform-origin: top center; animation: spiderDrop 7s ease-in-out infinite; } .spider::before { content: ""; width: 1px; height: var(--thread, 90px); background: rgba(255, 255, 255, .55); animation: thread 7s ease-in-out infinite; } .spider span { font-size: 26px; margin-top: -4px; animation: spiderWiggle 1.2s ease-in-out infinite; } @keyframes thread { 0%, 100% { height: 30px; } 45%, 60% { height: 130px; } } @keyframes spiderDrop { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(6deg); } 70% { transform: rotate(-5deg); } } @keyframes spiderWiggle { 50% { transform: rotate(12deg); } } /* ----- Telarañas en las esquinas ----- */ .web { position: absolute; width: 110px; height: 110px; pointer-events: none; z-index: 1; opacity: .55; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='white' stroke-width='1.1'%3E%3Cpath d='M0 0 L100 100 M0 0 L100 45 M0 0 L45 100 M0 0 L100 0 M0 0 L0 100'/%3E%3Cpath d='M18 0 Q18 12 12 18 Q10 12 0 18'/%3E%3Cpath d='M38 0 Q36 22 24 36 Q22 26 0 38 M28 28'/%3E%3Cpath d='M60 0 Q56 30 40 52 Q32 44 0 60'/%3E%3Cpath d='M85 0 Q78 40 58 72 Q42 64 0 85'/%3E%3Cpath d='M38 0 Q37 18 33 20 M60 0 Q58 27 50 32 M85 0 Q82 36 70 45'/%3E%3C/svg%3E") no-repeat; } .web--tl { top: 0; left: 0; } .web--tr { top: 0; right: 0; transform: scaleX(-1); } .menu .web { opacity: .22; filter: invert(1); } /* ----- Niebla al pie de la portada ----- */ :root[data-tema="halloween"] .hero { position: relative; overflow: hidden; background: radial-gradient(circle at 50% 18%, #4a1260 0%, #2a0a2e 30%, var(--wine) 58%); } .fog { position: absolute; left: -50%; right: -50%; bottom: -20px; height: 160px; z-index: 0; pointer-events: none; opacity: .5; background: radial-gradient(ellipse at 20% 60%, rgba(255,255,255,.35), transparent 60%), radial-gradient(ellipse at 60% 70%, rgba(233,213,255,.3), transparent 60%), radial-gradient(ellipse at 90% 60%, rgba(255,255,255,.25), transparent 60%); filter: blur(18px); animation: fogDrift 18s ease-in-out infinite alternate; } @keyframes fogDrift { to { transform: translateX(22%); } } :root[data-tema="halloween"] .hero__text, :root[data-tema="halloween"] .hero__cups { position: relative; z-index: 2; } /* ----- Detalles de color ----- */ .boo-tag { display: inline-flex; align-items: center; gap: .35rem; margin: 0 auto .6rem; padding: .35rem .9rem; border-radius: 999px; background: rgba(249, 115, 22, .15); border: 1px solid rgba(249, 115, 22, .5); color: #fdba74; font-weight: 700; font-size: .8rem; animation: rise .8s .1s both, pumpkinGlow 2s 1s ease-in-out infinite; } :root[data-tema="halloween"] .hero h1 span { color: #fb923c; text-shadow: 0 0 18px rgba(249, 115, 22, .55); } :root[data-tema="halloween"] .cart-btn { background: var(--pumpkin); box-shadow: 0 8px 20px -6px var(--pumpkin); } :root[data-tema="halloween"] .btn--pink { background: linear-gradient(135deg, #fb923c, #ea580c); box-shadow: 0 12px 26px -10px #ea580c; } :root[data-tema="halloween"] .gourmet__title em { color: #fb923c; } :root[data-tema="halloween"] .g-card span { background: linear-gradient(135deg, #7c2d12, #581c87); } :root[data-tema="halloween"] .chip.is-active { background: #3b0764; border-color: #3b0764; } :root[data-tema="halloween"] .add { background: var(--pumpkin); box-shadow: 0 8px 16px -8px var(--pumpkin); } :root[data-tema="halloween"] .card::after { content: "🕸️"; position: absolute; top: 4px; right: 6px; font-size: .9rem; opacity: .35; pointer-events: none; } :root[data-tema="halloween"] .menu { position: relative; } :root[data-tema="halloween"] .berries i { opacity: .3; }