/* ===== Black Friday 🖤 (solo se aplica cuando <html data-evento="blackfriday">) ===== */
html[data-evento=blackfriday]{--bf1:#facc15;--bf2:#ef4444;--grad:linear-gradient(135deg,#facc15,#f59e0b)}
html[data-evento=blackfriday][data-tema=oscuro]{--bg:#0a0a0a;--pag:#050505;--card:#141414;--suave:#1c1c1c;--borde:#2e2a12;--acento:#facc15}
html[data-evento=blackfriday] body{background:radial-gradient(46rem 26rem at 92% -8%,#facc1522,transparent 60%),radial-gradient(40rem 26rem at -8% 6%,#ef444422,transparent 60%),var(--pag);background-repeat:no-repeat;background-attachment:fixed;overflow-x:clip}
html[data-evento=blackfriday] .card:hover{border-color:var(--bf1);box-shadow:0 18px 40px #facc1533}
html[data-evento=blackfriday] .tag{background:var(--bf1);color:#111}
html[data-evento=blackfriday] .tag.nuevo{background:#fff;color:#111}
html[data-evento=blackfriday] .tag.oferta{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff}
html[data-evento=blackfriday] header{border-bottom-color:#facc1555}
html[data-evento=blackfriday] #q:focus{outline-color:var(--bf1)}
html[data-evento=blackfriday] .vcard{border-color:#facc1544;box-shadow:0 8px 22px #facc1518}
@media(hover:hover){html[data-evento=blackfriday] .vcard:hover{border-color:var(--bf1);box-shadow:0 14px 32px #facc1544}}
html[data-evento=blackfriday] .vstar{background:var(--bf1);color:#111;box-shadow:0 0 12px #facc1599}
html[data-evento=blackfriday] .vtit em{background:linear-gradient(90deg,#facc15,#f59e0b);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-evento=blackfriday] .mb.on{border-color:var(--bf1);background:color-mix(in srgb,var(--bf1) 14%,var(--card))}
@media(hover:hover){html[data-evento=blackfriday] .mb:hover{border-color:var(--bf1)}}
html[data-evento=blackfriday] .vi b,html[data-evento=blackfriday] .info b{background:linear-gradient(135deg,#facc15,#f59e0b);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-evento=blackfriday] .pr b.of{background:none;-webkit-background-clip:initial;color:#ef4444}
html[data-evento=blackfriday] .mt h2::after{content:" 🖤";font-size:.65em}
html[data-evento=blackfriday] .linea h3::before{content:"⚡";width:auto;height:auto;background:none;font-size:.8rem}
html[data-evento=blackfriday] .corazon{background:#000000d9;color:#fff}
html[data-evento=blackfriday] #arriba{background:linear-gradient(135deg,#facc15,#f59e0b);color:#111}
html[data-evento=blackfriday] #como i{background:linear-gradient(135deg,#facc15,#f59e0b);color:#111}
html[data-evento=blackfriday] #barraP{box-shadow:0 10px 28px #facc1555}
html[data-evento=blackfriday] #ruleta{background:linear-gradient(135deg,#111,#3a3200 60%,#facc15);box-shadow:0 10px 26px #facc1544}
html[data-evento=blackfriday] .btn.wa{background:linear-gradient(135deg,#facc15,#f59e0b);color:#111;box-shadow:0 6px 18px #facc1566}
html[data-evento=blackfriday] footer{opacity:.8}
html[data-evento=blackfriday] .logo img{filter:drop-shadow(0 0 8px #facc1555)}

/* Cartel de temporada con cuenta regresiva real */
#evento:empty{display:none}
.bf-banner{position:relative;margin:6px 0 14px;padding:16px 18px 14px;border-radius:22px;text-align:center;color:#fff;background:#0a0a0a;border:2px solid #facc15;box-shadow:0 10px 28px #facc1533;overflow:hidden;animation:sube .7s both}
.bf-banner::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:repeating-linear-gradient(-45deg,#facc15 0 14px,#0a0a0a 14px 28px)}
.bf-banner b{display:block;margin-top:8px;font-size:clamp(1.5rem,6.4vw,2.3rem);font-weight:900;letter-spacing:.04em;line-height:1.05;color:#facc15;text-shadow:0 0 18px #facc1566}
.bf-banner small{display:block;opacity:.92;font-size:clamp(.85rem,2.8vw,1rem);margin-top:2px}
.bf-cuenta{display:inline-flex;align-items:center;gap:10px;margin-top:10px;padding:6px 16px;border-radius:99px;background:#facc15;color:#111;font-weight:800;font-size:clamp(.85rem,3vw,1rem);font-variant-numeric:tabular-nums}
.bf-cuenta i{width:10px;height:10px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 4px #ef444455;animation:bfparp 1.2s ease-in-out infinite}
@keyframes bfparp{50%{opacity:.35}}

/* Cinta que se mueve bajo el encabezado */
.bf-cinta{position:absolute;left:0;right:0;top:100%;height:24px;overflow:hidden;background:#facc15;color:#111;z-index:6;pointer-events:none;display:flex;align-items:center}
.bf-cinta div{display:flex;white-space:nowrap;font-weight:900;font-size:12px;letter-spacing:.18em;animation:bfmarq 22s linear infinite}
.bf-cinta span{padding:0 14px}
@keyframes bfmarq{to{transform:translateX(-50%)}}
html[data-evento=blackfriday] main{padding-top:30px}
@media(prefers-reduced-motion:reduce){.bf-cinta div,.bf-cuenta i{animation:none}}
html[data-evento=blackfriday] #para button.on{color:#111;background:linear-gradient(135deg,#facc15,#f59e0b)}
html[data-evento=blackfriday] .chip.on,html[data-evento=blackfriday] .pill.on{color:#111}