/* ===== Navidad 🎄 (solo se aplica cuando <html data-evento="navidad">) ===== */
html[data-evento=navidad]{--nv1:#d62839;--nv2:#16a34a;--nv3:#f5b700;--grad:linear-gradient(135deg,#d62839,#16a34a)}
html[data-evento=navidad][data-tema=oscuro]{--bg:#0b1410;--pag:#06100b;--card:#101c16;--suave:#16251d;--borde:#23402f}
html[data-evento=navidad] body{background:radial-gradient(46rem 26rem at 92% -8%,#d6283922,transparent 60%),radial-gradient(40rem 26rem at -8% 6%,#16a34a26,transparent 60%),radial-gradient(34rem 22rem at 50% 108%,#f5b70018,transparent 60%),var(--pag);background-repeat:no-repeat;background-attachment:fixed;overflow-x:clip}
html[data-evento=navidad] .card:hover{border-color:var(--nv1);box-shadow:0 18px 40px #d6283933}
html[data-evento=navidad] .tag{background:linear-gradient(135deg,#d62839,#b91c1c)}
html[data-evento=navidad] .tag.nuevo{background:linear-gradient(135deg,#16a34a,#15803d)}
html[data-evento=navidad] #q:focus{outline-color:var(--nv2)}
html[data-evento=navidad] header{border-bottom-color:#16a34a55}
html[data-evento=navidad] .vcard{border-color:#16a34a44;box-shadow:0 8px 22px #16a34a22}
@media(hover:hover){html[data-evento=navidad] .vcard:hover{border-color:var(--nv1);box-shadow:0 14px 32px #d6283944}}
html[data-evento=navidad] .vstar{background:linear-gradient(135deg,#d62839,#b91c1c);box-shadow:0 0 12px #d6283977}
html[data-evento=navidad] .vtit em{background:linear-gradient(90deg,#d62839,#16a34a);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-evento=navidad] .mb.on{border-color:var(--nv2);background:color-mix(in srgb,var(--nv2) 14%,var(--card))}
@media(hover:hover){html[data-evento=navidad] .mb:hover{border-color:var(--nv2)}}
html[data-evento=navidad] .vi b,html[data-evento=navidad] .info b{background:linear-gradient(135deg,#d62839,#b91c1c);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-evento=navidad] .pr b.of{background:none;-webkit-background-clip:initial;color:#d62839}
html[data-evento=navidad] .mt h2::after{content:" 🎄";font-size:.65em}
html[data-evento=navidad] .linea h3::before{content:"⭐";width:auto;height:auto;background:none;font-size:.8rem}
html[data-evento=navidad] .corazon{background:#0b1410d9;color:#fff}
html[data-evento=navidad] #arriba{background:linear-gradient(135deg,#d62839,#16a34a)}
html[data-evento=navidad] #como i{background:linear-gradient(135deg,#d62839,#16a34a)}
html[data-evento=navidad] #barraP{box-shadow:0 10px 28px #d6283966}
html[data-evento=navidad] #ruleta{background:linear-gradient(135deg,#d62839,#16a34a);box-shadow:0 10px 26px #d6283955}
html[data-evento=navidad] .btn.wa{background:linear-gradient(135deg,#d62839,#b91c1c);box-shadow:0 6px 18px #d6283966}
html[data-evento=navidad] footer{opacity:.8}
html[data-evento=navidad] .logo{position:relative;cursor:pointer}
html[data-evento=navidad] .logo::after{content:"🎅";position:absolute;left:-10px;top:-14px;font-size:22px;transform:rotate(-18deg);filter:drop-shadow(0 2px 3px #0004)}

/* Cartel de temporada con cuenta regresiva */
#evento:empty{display:none}
.nv-banner{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;margin:6px 0 14px;padding:14px 14px;border-radius:24px;text-align:center;color:#fff;overflow:hidden;cursor:pointer;
  background:linear-gradient(110deg,#991b1b,#d62839 42%,#15803d 100%);box-shadow:0 12px 30px #d6283944;animation:sube .7s both}
.nv-banner::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,#ffffff10 0 14px,transparent 14px 30px);pointer-events:none}
.nv-tx{position:relative;flex:1;min-width:0}
.nv-tx b{display:block;font-size:clamp(1.05rem,3.8vw,1.45rem);letter-spacing:-.01em;text-shadow:0 0 14px #ffe08a99}
.nv-tx small{display:block;opacity:.95;font-size:clamp(.82rem,2.8vw,1rem);margin-top:1px}
.nv-arbol{flex:none;width:clamp(44px,12vw,62px);height:auto;filter:drop-shadow(0 4px 6px #0005);position:relative}
.nv-arbol:last-of-type{transform:scaleX(-1)}
.nv-bola{animation:nvluz 1.6s ease-in-out infinite}.nv-bola:nth-of-type(2n){animation-delay:-.5s}.nv-bola:nth-of-type(3n){animation-delay:-1.1s}
.nv-star{transform-origin:32px 8px;animation:nvstar 2.4s ease-in-out infinite}
@keyframes nvstar{50%{transform:scale(1.2) rotate(8deg)}}
.nv-brillo{position:absolute;pointer-events:none;color:#fde68a;opacity:.75;animation:nvluz 2.2s ease-in-out infinite}
.nv-reloj{display:flex;justify-content:center;gap:7px;margin-top:9px}.nv-reloj[hidden]{display:none}
.nv-n{min-width:50px;padding:5px 6px 4px;border-radius:12px;background:#00000040;border:1px solid #ffffff33;backdrop-filter:blur(4px)}
.nv-n b{display:block;font-size:clamp(1.05rem,4.6vw,1.45rem);line-height:1.1;font-variant-numeric:tabular-nums;text-shadow:none}
.nv-n b.tic{animation:nvtic .35s}
@keyframes nvtic{40%{transform:translateY(-3px) scale(1.12);color:#fde68a}}
.nv-n small{display:block;font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;opacity:.85;margin:0}

/* Luces navideñas bajo el encabezado (tócalas: modo fiesta) */
.nv-luces{position:absolute;left:0;right:0;top:100%;height:22px;z-index:6;display:flex;justify-content:space-around;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}
.nv-luces i{position:relative;width:10px;height:14px;margin-top:4px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:var(--c);box-shadow:0 0 10px 2px var(--c);animation:nvluz 1.8s ease-in-out infinite;animation-delay:var(--d)}
.nv-luces i::before{content:"";position:absolute;left:50%;top:-5px;width:6px;height:5px;background:#555;border-radius:2px;transform:translateX(-50%)}
@keyframes nvluz{0%,100%{opacity:1}50%{opacity:.35}}
html.nv-fiesta .nv-luces i{animation:nvfiesta .45s ease-in-out infinite;animation-delay:calc(var(--d) / 4)}
@keyframes nvfiesta{0%,100%{opacity:1;transform:scale(1.25);filter:hue-rotate(0)}50%{opacity:.5;transform:scale(.85);filter:hue-rotate(140deg)}}
html.nv-fiesta body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:2;background:radial-gradient(circle at 20% 0,#ef444433,transparent 45%),radial-gradient(circle at 80% 0,#22c55e33,transparent 45%),radial-gradient(circle at 50% 100%,#facc1530,transparent 50%);animation:nvfl .6s ease-in-out infinite alternate}
@keyframes nvfl{to{opacity:.35}}

/* Nieve interactiva (canvas) */
.nv-cv{position:fixed;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}

/* Trineo de Santa */
.nv-trineo{position:fixed;left:0;top:calc(var(--hh,62px) + 34px);z-index:4;font-size:clamp(1.6rem,6vw,2.3rem);line-height:1;cursor:pointer;opacity:0;pointer-events:none;transform:translateX(-340px);white-space:nowrap;-webkit-tap-highlight-color:transparent}
.nv-trineo.va{opacity:1;pointer-events:auto;animation:nvtr 13s linear forwards}
.tr-in{position:relative;display:inline-flex;align-items:flex-end;gap:2px;animation:nvola 1.1s ease-in-out infinite;filter:drop-shadow(0 4px 6px #0004)}
.tr-r{display:inline-block;animation:nvgal .5s ease-in-out infinite}.tr-r:nth-child(2){animation-delay:-.25s}
.tr-s{position:relative;display:inline-block;margin-left:4px}.tr-s i{position:absolute;left:18%;top:-.62em;font-style:normal;font-size:.8em}
.tr-in::after{content:"✨";position:absolute;right:100%;top:30%;margin-right:4px;animation:nvluz .7s infinite;opacity:.8}
@keyframes nvtr{from{transform:translateX(-340px)}to{transform:translateX(calc(100vw + 40px))}}
@keyframes nvola{50%{transform:translateY(-12px) rotate(-3deg)}}
@keyframes nvgal{50%{transform:translateY(-4px) rotate(-6deg)}}
.nv-cae{position:fixed;z-index:20;pointer-events:none;font-size:1.6rem;animation:nvcaida var(--t,2s) cubic-bezier(.4,0,.8,.6) forwards}
@keyframes nvcaida{0%{transform:translate(0,0) rotate(0);opacity:1}85%{opacity:1}100%{transform:translate(var(--dx),calc(100vh - 80px)) rotate(var(--r));opacity:0}}

/* Botones flotantes (regalo del día + villancico), arriba del botón de WhatsApp */
#nvDial{position:fixed;right:16px;bottom:calc(78px + env(safe-area-inset-bottom));z-index:6;display:flex;flex-direction:column;gap:10px}
#nvDial button{position:relative;width:46px;height:46px;border:0;border-radius:50%;cursor:pointer;font-size:1.3rem;display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(135deg,#d62839,#16a34a);box-shadow:0 8px 22px #d6283966;-webkit-tap-highlight-color:transparent;transition:transform .2s}
#nvDial button:active{transform:scale(.9)}
#nvMusica.on{animation:nvola 1s ease-in-out infinite;background:linear-gradient(135deg,#f5b700,#d62839)}
#nvRegalo span{animation:nvbob 2.2s ease-in-out infinite}
#nvRegalo i{position:absolute;right:1px;top:1px;width:12px;height:12px;border-radius:50%;background:#facc15;border:2px solid #fff;animation:nvluz 1s infinite}
#nvRegalo.visto i{display:none}
@media(hover:hover){#nvDial button:hover{transform:translateY(-3px) scale(1.06)}}

/* Regalo del día */
#dRegalo{border:0;border-radius:28px;padding:22px 20px 20px;width:min(92vw,380px);text-align:center;color:var(--txt);background:var(--bg);box-shadow:0 30px 70px #0007;overflow:hidden}
#dRegalo::backdrop{background:#04120acc;backdrop-filter:blur(3px)}
#dRegalo[open]{animation:nvpop .35s cubic-bezier(.2,1.4,.4,1)}
@keyframes nvpop{from{opacity:0;transform:scale(.8) translateY(20px)}}
#dRegalo::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 0,#d6283933,transparent 50%),radial-gradient(circle at 90% 10%,#16a34a33,transparent 50%);pointer-events:none}
.rg-x{position:absolute;right:12px;top:12px;width:36px;height:36px;border-radius:50%;border:0;background:var(--suave);color:var(--txt);cursor:pointer;font-size:1rem;z-index:2}
.rg-caja{position:relative;display:inline-block;font-size:5.5rem;line-height:1;cursor:pointer;margin:8px 0 4px;animation:nvsac 1.4s ease-in-out infinite;transform-origin:50% 90%;-webkit-tap-highlight-color:transparent;user-select:none}
.rg-lazo{position:absolute;left:50%;top:-.28em;font-size:.5em;transform:translateX(-50%);opacity:0}
@keyframes nvsac{0%,100%{transform:rotate(0)}20%{transform:rotate(-6deg)}40%{transform:rotate(6deg)}60%{transform:rotate(-4deg)}80%{transform:rotate(3deg)}}
.rg-caja.abierta{animation:nvabre .6s ease-out forwards}
@keyframes nvabre{0%{transform:scale(1)}40%{transform:scale(1.35) rotate(8deg)}100%{transform:scale(.55) translateY(-12px);opacity:.35}}
.rg-t{position:relative;display:block;font-size:1.3rem;letter-spacing:-.01em}
.rg-s{position:relative;display:block;opacity:.75;margin:2px 0 8px}
.rg-card{position:relative;display:flex;gap:12px;align-items:center;text-align:left;padding:10px;border-radius:20px;border:2px solid #16a34a55;background:var(--card);animation:nvpop .5s both}
.rg-card img{width:96px;height:96px;object-fit:contain;border-radius:14px;background:#fff;flex:none}
.rg-card small{display:block;opacity:.65;text-transform:uppercase;letter-spacing:.06em;font-size:.68rem}
.rg-card b{display:block;line-height:1.2;margin:2px 0}
.rg-card em{font-style:normal;font-weight:800;font-size:1.15rem;color:#d62839}
.rg-bt{position:relative;display:flex;gap:8px;margin-top:12px}
.rg-bt button{flex:1;min-height:46px;border:0;border-radius:99px;font:inherit;font-weight:700;cursor:pointer;color:#fff;background:linear-gradient(135deg,#d62839,#b91c1c);box-shadow:0 6px 16px #d6283955}
.rg-bt .rg-otro{background:linear-gradient(135deg,#16a34a,#15803d);box-shadow:0 6px 16px #16a34a55}

/* Tarjetas con nieve encima + inclinación 3D con el mouse */
html[data-evento=navidad] .card::after{content:"";position:absolute;left:0;right:0;top:0;height:13px;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse 15px 10px at 14px 0,#fff 68%,#fff0 72%) 0 0/36px 100% repeat-x,radial-gradient(ellipse 10px 8px at 5px 0,#eef2f7 68%,#eef2f700 72%) 0 0/23px 100% repeat-x;filter:drop-shadow(0 1px 1px #0002)}
.rel .card::after{display:none}
@media(hover:hover){html[data-evento=navidad] .card:hover,html[data-evento=navidad] .card.ver:hover{transform:perspective(800px) translateY(-6px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .12s,box-shadow .25s,border-color .25s}}

/* Barra de progreso de bastón de caramelo */
html[data-evento=navidad] #progreso{background:repeating-linear-gradient(-45deg,#d62839 0 8px,#fff 8px 16px)!important;background-size:23px 23px;animation:nvcane 1s linear infinite}
@keyframes nvcane{to{background-position:23px 0}}

/* Nieve acumulada en el pie de página */
html[data-evento=navidad] footer{position:relative;padding-top:34px}
html[data-evento=navidad] footer::before{content:"";position:absolute;left:0;right:0;top:0;height:22px;
  background:radial-gradient(ellipse 30px 18px at 30px 0,#fff 70%,#fff0 74%) 0 0/70px 100% repeat-x,radial-gradient(ellipse 22px 14px at 8px 0,#e8eef7 70%,#e8eef700 74%) 0 0/46px 100% repeat-x;opacity:.9}

@media(max-width:600px){.nv-luces i:nth-child(even){display:none}.nv-n{min-width:46px}.nv-banner{gap:8px;padding:12px 10px}}
@media(prefers-reduced-motion:reduce){.nv-cv,.nv-trineo{display:none}.nv-luces i,.nv-bola,.nv-star,.nv-brillo,#nvRegalo span,#nvMusica.on,.rg-caja{animation:none}}