/* ===== OFERTA NAVIDEÑA ===== */
.xmas{position:relative;overflow:hidden;background:#0B3B2E;color:#fff;border:4px solid var(--ink);border-radius:8px 64px 8px 64px;box-shadow:14px 14px 0 var(--red);padding:clamp(70px,8vw,96px) clamp(22px,4.5vw,56px) clamp(28px,5vw,56px);display:flex;flex-wrap:wrap;gap:36px;align-items:center}
.xmas>.xm-left,.xmas>.xm-right{position:relative;z-index:2}
.xm-left{flex:1 1 380px;min-width:0}.xm-right{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;align-items:center;gap:8px}
.xmas h2{color:#fff}.xmas .gold{color:#FFD23F;text-shadow:3px 3px 0 var(--ink)}
.xmas .lead{color:#D8EFE3}.xmas h3{margin-top:22px;color:#FFD23F;font-size:34px}
.xmas .kicker{background:#FFD23F;color:var(--ink);border:3px solid var(--ink)}
.xm-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px;font-size:18px}
.xm-list li{position:relative;padding-left:30px}
.xm-list li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;background:#FFD23F;border:2px solid var(--ink);clip-path:polygon(50% 0,62% 36%,100% 38%,70% 60%,80% 100%,50% 76%,20% 100%,30% 60%,0 38%,38% 36%)}
.snow{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.snow b{position:absolute;top:-12px;width:var(--z);height:var(--z);background:#fff;border-radius:50%;animation:snowfall var(--s) linear var(--dl) infinite}
@keyframes snowfall{0%{transform:translate(0,-10px)}50%{transform:translate(16px,260px)}100%{transform:translate(-8px,620px)}}
.lights{position:absolute;top:0;left:0;right:0;height:56px;z-index:3;pointer-events:none}
.lights svg{position:absolute;left:0;top:6px;width:100%;height:34px}
.bulbs{position:absolute;left:0;right:0;top:8px;display:flex;justify-content:space-around;padding:0 6px}
.bulbs i{display:block;width:14px;height:22px;background:var(--c);border:3px solid var(--ink);border-radius:50% 50% 45% 45%;margin-top:14px;box-shadow:0 0 14px var(--c);animation:twinkle 2.4s ease-in-out var(--d) infinite}
.bulbs i:nth-child(odd){margin-top:2px}
@keyframes twinkle{0%,100%{opacity:1;box-shadow:0 0 16px var(--c)}50%{opacity:.35;box-shadow:0 0 3px var(--c)}}
.hat{position:absolute;top:30px;left:10px;width:84px;transform:rotate(-18deg);z-index:4}
.tree{width:min(100%,250px);height:auto;filter:drop-shadow(0 8px 0 rgba(0,0,0,.25));animation:sway 6s ease-in-out infinite;transform-origin:50% 100%}
@keyframes sway{0%,100%{transform:rotate(-1.4deg)}50%{transform:rotate(1.4deg)}}
.tree .star{transform-origin:140px 36px;animation:starpulse 2.6s ease-in-out infinite}
@keyframes starpulse{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.14) rotate(8deg)}}
.tree .tw{animation:twinkle 1.8s ease-in-out infinite;--c:#fff}
.xm-price{background:#fff;color:var(--ink);border:4px solid var(--ink);border-radius:6px 32px 6px 32px;box-shadow:8px 8px 0 #FFD23F;padding:20px 24px;width:100%;max-width:390px}
.xm-price .save{background:var(--red);color:#fff;border:3px solid var(--ink)}
.xm-price .of{margin:10px 0 0;font-weight:600;letter-spacing:2px;text-transform:uppercase;font-size:14px;color:var(--muted)}
.xm-price .pu{margin:0 0 14px;color:var(--muted)}.xm-price .pn{margin:12px 0 0;font-size:14px;color:var(--muted)}
.xm-price .bigprice{font-size:clamp(64px,7vw,92px)}
.xm-price .mini span{border-color:var(--ink)}
.xm-timer{margin-top:24px}.xm-timer .tl{font-weight:600;font-size:14px;letter-spacing:2.5px;text-transform:uppercase;color:#FFD23F;margin-bottom:8px}
.tb{display:flex;flex-wrap:wrap;gap:10px}
.tb div{background:#fff;color:var(--ink);border:3px solid var(--ink);border-radius:4px 16px 4px 16px;box-shadow:4px 4px 0 var(--red);min-width:74px;padding:6px 10px;text-align:center}
.tb b{display:block;font:800 italic 40px/1 var(--disp)}.tb span{font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
@media(max-width:600px){.hat{width:64px;left:-10px}.lights{height:50px}.bulbs i:nth-child(n+17){display:none}}
@media(prefers-reduced-motion:reduce){.snow b,.bulbs i,.tree,.tree .star,.tree .tw{animation:none !important}}

.xm-price>div{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px}
.xm-price .old{margin:0}
.xm-price .btn{display:block;width:100%;font-size:21px;padding:0 10px;text-align:center}
.xm-price .btn span{display:inline}
.xm-price .btn{line-height:1.15;padding-top:12px;padding-bottom:12px;min-height:56px}
@media(max-width:600px){.hat{left:4px}}