/* Temporada visual (Halloween y Navidad). Todo cuelga de html[data-season]; sin el atributo no se ve nada.
   Reglas: sin imágenes, solo SVG; pointer-events:none; nada fixed sobre CTAs ni sobre el chat/WhatsApp;
   movimiento solo con transform y solo si el usuario no pidió menos movimiento. */
:root{--mks-bg:#14101C;--mks-or:#FF7A00;--mks-or-d:#C2410C;--mks-pk-d:#C8105F;--mks-web:#7d7292}

/* ---------- Contenedor (oculto fuera de temporada) ---------- */
.mks-root{display:none}
html[data-season="halloween"] .mks-root,html[data-season="navidad"] .mks-root{display:block}

/* ---------- Cintillo superior (en el flujo, altura fija = sin CLS; el script de cabecera ya decidió) ---------- */
.mks-bar{display:flex;align-items:center;justify-content:center;gap:10px;min-height:34px;padding:6px 52px;background:var(--mks-bg);color:#fff;font:600 13px/1.2 "DM Sans",system-ui,sans-serif;text-align:center;position:relative;z-index:9001}
.mks-pk{width:18px;height:18px;flex:none}
.mks-txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mks-link{color:#FFB070;font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.mks-link:hover,.mks-link:focus-visible{color:#fff}
@media (max-width:600px){.mks-bar{padding:6px 12px;font-size:12px}.mks-link{display:none}}

/* ---------- Decoración (absolute: sale con el scroll, no tapa el header pegajoso ni el carrito) ---------- */
.mks-deco{position:absolute;top:0;left:0;right:0;height:0;z-index:9100;pointer-events:none}
.mks-web{position:absolute;top:0;width:76px;height:76px;opacity:.75;pointer-events:none}
.mks-web svg{display:block;width:100%;height:100%}
.mks-web path{fill:none;stroke:var(--mks-web);stroke-width:1.1;stroke-linecap:round}
.mks-web-l{left:0}
.mks-web-r{right:0;transform:scaleX(-1)}
@media (max-width:640px){.mks-web{width:56px;height:56px;opacity:.65}}

/* ---------- Araña con hilo: solo escritorio y solo con movimiento permitido ---------- */
.mks-spider{display:none;position:absolute;top:0;left:max(120px,9vw);width:34px;pointer-events:none}
.mks-spider svg{display:block;width:34px;height:34px}
.mks-thread{position:absolute;left:50%;bottom:100%;width:1px;height:120vh;background:#6b647a}
@media (min-width:1024px) and (prefers-reduced-motion:no-preference){
	html[data-season="halloween"][data-motion="on"] .mks-spider{display:block;animation:mks-drop 10s ease-in-out infinite;will-change:transform}
}
@keyframes mks-drop{0%,100%{transform:translateY(-60px)}40%,62%{transform:translateY(46px)}}

/* ---------- Botón primario: degradado naranja -> rosa (blanco >= 5:1 en ambos extremos) + telaraña en la esquina ---------- */
html[data-season="halloween"] .mk .btn-m,
html[data-season="halloween"] .btn-primary,
html[data-season="halloween"] .ts-btn-grad,
html[data-season="halloween"] .woocommerce .single_add_to_cart_button{
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.55' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M100 0L10 0M100 0L60 90M100 0L100 100M100 0L30 60M80 0Q70 35 100 30M50 0Q50 60 100 55'/%3E%3C/g%3E%3C/svg%3E") right top/30px 30px no-repeat,
		linear-gradient(135deg,var(--mks-or-d),var(--mks-pk-d))!important;
	color:#fff!important;text-shadow:0 1px 1px rgba(0,0,0,.25);font-weight:700;border-color:transparent!important;
	box-shadow:0 6px 18px rgba(194,65,12,.28)!important}
html[data-season="halloween"] .mk .btn-m:hover,
html[data-season="halloween"] .btn-primary:hover,
html[data-season="halloween"] .ts-btn-grad:hover,
html[data-season="halloween"] .woocommerce .single_add_to_cart_button:hover{filter:brightness(.92)}

/* ---------- Murciélagos y arañas caminando: capa fija sin interacción, solo transform, solo con movimiento permitido ---------- */
.mks-fly{display:none}
@media (prefers-reduced-motion:no-preference){
	html[data-season="halloween"][data-motion="on"] .mks-fly{display:block;position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:8000;contain:strict}
}
.mks-bat,.mks-walk{position:absolute;pointer-events:none;will-change:transform}
.mks-bat{left:0;width:46px;height:23px;animation:mks-cross var(--d,20s) linear var(--w,0s) infinite}
.mks-bat i{display:block;animation:mks-bob 2.4s ease-in-out infinite}
.mks-bat svg{display:block;width:100%;height:100%}
.mks-wing{transform-origin:24px 12px;animation:mks-flap .32s ease-in-out infinite alternate}
.mks-bat-1{top:14%;--d:19s;--w:-3s}
.mks-bat-2{top:32%;--d:27s;--w:-14s;width:38px;height:19px;--y:80px}
.mks-bat-3{top:58%;--d:23s;--w:-9s;width:52px;height:26px;--y:-90px}
.mks-bat-4{top:8%;--d:31s;--w:-21s;width:34px;height:17px;--y:120px}
@keyframes mks-cross{0%{transform:translate3d(-12vw,0,0)}60%,100%{transform:translate3d(112vw,var(--y,60px),0)}}
@keyframes mks-bob{0%,100%{transform:translateY(-14px)}50%{transform:translateY(14px)}}
@keyframes mks-flap{from{transform:scaleY(1)}to{transform:scaleY(.45)}}
.mks-walk{width:26px;height:26px}
.mks-walk svg{display:block;width:100%;height:100%}
.mks-walk i{display:block;animation:mks-skit .5s steps(2,end) infinite}
.mks-walk-b{bottom:3px;left:0;animation:mks-wx 38s linear -6s infinite}
.mks-walk-l{left:2px;top:22%;animation:mks-wy 44s linear -18s infinite}
.mks-walk-l i{transform:rotate(90deg)}
.mks-walk-r{right:2px;left:auto;top:22%;animation:mks-wy 52s linear -30s infinite reverse}
.mks-walk-r i{transform:rotate(-90deg)}
@keyframes mks-wx{from{transform:translate3d(-40px,0,0)}to{transform:translate3d(105vw,0,0)}}
@keyframes mks-wy{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,68vh,0)}}
@keyframes mks-skit{0%{translate:0 0}100%{translate:0 -1.5px}}
@media (max-width:760px){.mks-bat-3,.mks-bat-4,.mks-walk-l,.mks-walk-r{display:none}.mks-bat{transform-origin:0 0}}

/* ---------- Carrito / pago (modo foco): sin cintillo ni araña, telarañas discretas ---------- */
body.mk-focus .mks-bar,body.mk-focus .mks-spider,body.mk-focus .mks-fly{display:none!important}
body.mk-focus .mks-web{width:48px;height:48px;opacity:.45}

@media print{.mks-root{display:none!important}}

/* =====================================================================
   NAVIDAD (1/11 al 6/1). Rojo #C8102E / verde #1F7A4D / dorado #E3B341 sobre la marca Patas.
   Fase a (1-14/11): estática. Fase b (15/11-20/12): + luces y nieve. Fase c (21/12-6/1): solo cintillo, gorro y botón.
   ===================================================================== */
:root{--mks-rd:#C8102E;--mks-rd-d:#8E0B20;--mks-gd:#E3B341;--mks-gr:#1F7A4D}

/* Cintillo: textos de Halloween/Navidad conmutados por temporada y por fecha (data-msg) */
.mks-bar .mks-h,.mks-bar .mks-n,.mks-bar .mks-m-box,.mks-bar .mks-m-express,.mks-bar .mks-m-greet{display:none}
html[data-season="halloween"] .mks-bar .mks-h{display:inline-flex}
html[data-season="halloween"] .mks-bar .mks-txt.mks-h{display:block}
html[data-season="navidad"] .mks-bar .mks-n{display:inline-flex}
html[data-season="navidad"] .mks-bar .mks-m-box,
html[data-season="navidad"][data-msg="box"] .mks-bar .mks-m-box,
html[data-season="navidad"][data-msg="express"] .mks-bar .mks-m-express,
html[data-season="navidad"][data-msg="greet"] .mks-bar .mks-m-greet{display:block}
html[data-season="navidad"][data-msg="express"] .mks-bar .mks-m-box,
html[data-season="navidad"][data-msg="greet"] .mks-bar .mks-m-box{display:none}
html[data-season="navidad"] .mks-bar{background:var(--mks-rd-d)}
html[data-season="navidad"] .mks-link{color:#FFE29A}
html[data-season="navidad"] .mks-link:hover,html[data-season="navidad"] .mks-link:focus-visible{color:#fff}
html[data-season="navidad"] .mks-deco,html[data-season="navidad"] .mks-fly{display:none!important}

/* Gorro de Papa Noel sobre el logo (decorativo, sin tocar el archivo del logo) */
html[data-season="navidad"] .mk .logo.mk-brand{position:relative}
html[data-season="navidad"] .mk .logo.mk-brand::before{content:"";position:absolute;left:-7px;top:-13px;width:34px;height:27px;pointer-events:none;transform:rotate(-14deg);
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 32'%3E%3Cpath d='M4 26C6 10 16 3 30 6c-4 3-5 7-5 12z' fill='%23C8102E'/%3E%3Cpath d='M2 24c8 4 22 4 32-1l1 6C24 34 10 33 1 29z' fill='%23fff' stroke='%23d5dbe6'/%3E%3Ccircle cx='31' cy='6' r='4.2' fill='%23fff' stroke='%23d5dbe6'/%3E%3C/svg%3E") center/contain no-repeat}
body.mk-focus .mk .logo.mk-brand::before{display:none}

/* Botón primario rojo con estrella dorada (blanco sobre rojo >= 5.9:1) */
html[data-season="navidad"] .mk .btn-m,
html[data-season="navidad"] .btn-primary,
html[data-season="navidad"] .ts-btn-grad,
html[data-season="navidad"] .woocommerce .single_add_to_cart_button{
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l2.6 7.4L22 11l-7.4 2.6L12 21l-2.6-7.4L2 11l7.4-2.6z' fill='%23E3B341'/%3E%3C/svg%3E") right 8px top 6px/13px 13px no-repeat,
		linear-gradient(135deg,var(--mks-rd),var(--mks-rd-d))!important;
	color:#fff!important;font-weight:700;border-color:transparent!important;box-shadow:0 6px 18px rgba(142,11,32,.28)!important}
html[data-season="navidad"] .mk .btn-m:hover,
html[data-season="navidad"] .btn-primary:hover,
html[data-season="navidad"] .ts-btn-grad:hover,
html[data-season="navidad"] .woocommerce .single_add_to_cart_button:hover{filter:brightness(.92)}

/* Nieve acumulada arriba de cada tarjeta de producto (estática) */
html[data-season="navidad"] .mk .prod{position:relative}
html[data-season="navidad"] .mk .prod::before{content:"";position:absolute;left:0;right:0;top:0;height:9px;z-index:3;pointer-events:none;
	background:radial-gradient(circle at 9px 0,#fff 0 6.5px,transparent 7.5px) 0 0/18px 9px repeat-x;filter:drop-shadow(0 1px 1px rgba(10,31,68,.12))}

/* Sello «Regalo corporativo» en productos para regalar, y moño en el Box navideño */
html[data-season="navidad"] .mk .prod .pimg{position:relative}
html[data-season="navidad"] .mk .prod:is([data-key^="kit-"],[data-key="caja-regalo"],[data-key^="agenda"],[data-key^="botella-termica"],[data-key^="botella-acero"],[data-key^="jarro"],[data-key^="termo"],[data-key^="taza"]) .pimg::after{
	content:"Regalo corporativo";position:absolute;left:8px;bottom:8px;z-index:2;pointer-events:none;padding:3px 8px;border-radius:999px;background:var(--mks-gd);color:#4a3500;font:700 11px/1.2 "DM Sans",system-ui,sans-serif}
html[data-season="navidad"] .mk .prod[data-key="kit-navidad"]::after{content:"";position:absolute;right:8px;top:12px;width:40px;height:34px;z-index:4;pointer-events:none;
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 40'%3E%3Cpath d='M24 22C14 8 3 6 3 14s12 10 21 8Z' fill='%23C8102E'/%3E%3Cpath d='M24 22C34 8 45 6 45 14s-12 10-21 8Z' fill='%23C8102E'/%3E%3Cpath d='M24 22L12 36M24 22l12 14' stroke='%23E3B341' stroke-width='4' stroke-linecap='round'/%3E%3Ccircle cx='24' cy='22' r='5' fill='%23E3B341'/%3E%3C/svg%3E") center/contain no-repeat}

/* Hero: tinte verde muy suave (fase b) */
html[data-season="navidad"]:not([data-phase="a"]):not([data-phase="c"]) .mk .hero{background:linear-gradient(180deg,rgba(31,122,77,.07),transparent 70%)}

/* Guirnalda de luces bajo el header (fase b): dos capas que titilan en alternancia, solo opacity */
html[data-season="navidad"][data-phase="b"] .mk header.main::before,
html[data-season="navidad"][data-phase="b"] .mk header.main::after{content:"";position:absolute;left:0;right:0;top:100%;height:24px;z-index:-1;pointer-events:none}
html[data-season="navidad"][data-phase="b"] .mk header.main::before{
	background:
		radial-gradient(circle at 24px 12px,#C8102E 0 4px,rgba(200,16,46,.28) 5px,transparent 11px),
		radial-gradient(circle at 96px 12px,#E3B341 0 4px,rgba(227,179,65,.3) 5px,transparent 11px),
		linear-gradient(#3a3a3a,#3a3a3a) 0 3px/100% 1px no-repeat;
	background-size:144px 24px,144px 24px,100% 1px;background-repeat:repeat-x,repeat-x,no-repeat}
html[data-season="navidad"][data-phase="b"] .mk header.main::after{
	background:
		radial-gradient(circle at 60px 12px,#1F7A4D 0 4px,rgba(31,122,77,.3) 5px,transparent 11px),
		radial-gradient(circle at 132px 12px,#fff 0 4px,rgba(255,255,255,.55) 5px,transparent 11px);
	background-size:144px 24px,144px 24px;background-repeat:repeat-x,repeat-x}
@media (prefers-reduced-motion:no-preference){
	html[data-season="navidad"][data-phase="b"][data-motion="on"] .mk header.main::before{animation:mks-tw 1.8s ease-in-out infinite alternate}
	html[data-season="navidad"][data-phase="b"][data-motion="on"] .mk header.main::after{animation:mks-tw 1.8s ease-in-out -.9s infinite alternate}
}
@keyframes mks-tw{from{opacity:1}to{opacity:.35}}
@media (max-width:640px){html[data-season="navidad"][data-phase="b"] .mk header.main::before,html[data-season="navidad"][data-phase="b"] .mk header.main::after{height:20px}}
body.mk-focus.mk-focus header.main::before,body.mk-focus header.main::after{display:none!important}

/* Nieve ligera (fase b, escritorio): 22 copos creados por JS, solo transform; JS la omite con movimiento reducido */
.mks-snow{display:none}
html[data-season="navidad"][data-phase="b"][data-motion="on"] .mks-snow{display:block;position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:8000;contain:strict}
.mks-snow i{position:absolute;top:-12px;border-radius:50%;background:#fff;box-shadow:0 0 2px rgba(10,31,68,.35);animation:mks-fall linear infinite;will-change:transform}
.mks-snow.mks-paused i{animation-play-state:paused}
@keyframes mks-fall{0%{transform:translate3d(0,-5vh,0)}50%{transform:translate3d(18px,55vh,0)}100%{transform:translate3d(-12px,108vh,0)}}
body.mk-focus .mks-snow{display:none!important}

/* Confeti dorado al generar la cotización (JS lo crea 1,5 s) */
.mks-confetti{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:9999}
.mks-confetti i{position:absolute;top:40%;width:8px;height:12px;opacity:0;animation:mks-conf 1.5s ease-out forwards}
@keyframes mks-conf{0%{opacity:1;transform:translate3d(0,0,0) rotate(0)}100%{opacity:0;transform:translate3d(var(--dx,0),55vh,0) rotate(var(--r,360deg))}}

/* ---------- Navidad (más color): rojo y verde en toda la marca ---------- */
html[data-season="navidad"] .mk{--m:#C8102E;--m-dark:#8E0B20;--pink:#C8102E;--y:#E3B341;--soft-m:#FCE8EB;--soft-y:#FFF4D6;
	--grad:linear-gradient(135deg,#C8102E 0%,#8E0B20 100%);--grad-dark:linear-gradient(135deg,#A00D25 0%,#6E0818 100%)}
/* Franja tipo bastón de caramelo arriba del header */
html[data-season="navidad"] .mk header.main{border-top:4px solid;border-image:repeating-linear-gradient(135deg,#C8102E 0 14px,#fff 14px 20px,#1F7A4D 20px 34px,#fff 34px 40px) 1}
body.mk-focus.mk-focus header.main{border-top-width:0}
/* Verde: botón de categorías, pequeños titulares y etiquetas */
html[data-season="navidad"] .mk .allcats{background:var(--mks-gr)!important;box-shadow:0 4px 12px rgba(31,122,77,.28)}
html[data-season="navidad"] .mk .allcats:hover{background:#17623D!important}
html[data-season="navidad"] .mk .kicker{color:var(--mks-gr)}
html[data-season="navidad"] .mk .pill.x,html[data-season="navidad"] .mk .mfeat-tag{background:var(--mks-gr)!important}
html[data-season="navidad"] .mk .prod:hover{border-color:rgba(31,122,77,.35)}
html[data-season="navidad"] .mk .chip:hover{border-color:var(--mks-gr)}
/* Pie de página: verde bosque con toques rojos */
html[data-season="navidad"] .pf,html[data-season="navidad"] .lr{--pf-bg:#0E3B2A;--pf-bg2:#14503A;--pf-pink:#FF5A6E;--pf-grad:linear-gradient(135deg,#C8102E,#8E0B20);--pf-txt:#D5E6DC;--pf-muted:#9CBBAA}
html[data-season="navidad"] .pf::before{background:radial-gradient(800px 400px at 110% 0%,rgba(31,122,77,.55),transparent 60%),radial-gradient(700px 360px at -10% 100%,rgba(200,16,46,.28),transparent 60%)}

/* ---------- Hover de botones: arbolito de Navidad con luces que titilan ---------- */
html[data-season="navidad"] .mk .btn-m,
html[data-season="navidad"] .btn-primary,
html[data-season="navidad"] .ts-btn-grad,
html[data-season="navidad"] .woocommerce .single_add_to_cart_button{position:relative;overflow:visible}
html[data-season="navidad"] .mk .btn-m::after,
html[data-season="navidad"] .btn-primary::after,
html[data-season="navidad"] .ts-btn-grad::after,
html[data-season="navidad"] .woocommerce .single_add_to_cart_button::after{content:"";position:absolute;right:16px;bottom:calc(100% - 8px);width:40px;height:50px;pointer-events:none;z-index:2;
	background:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2032%2040%22%3E%3Cstyle%3E.l%7Banimation:t%201.2s%20ease-in-out%20infinite%20alternate%7D.l2%7Banimation-delay:-.6s%7D%40keyframes%20t%7Bfrom%7Bopacity:1%7Dto%7Bopacity:.25%7D%7D%40media%20%28prefers-reduced-motion:reduce%29%7B.l%7Banimation:none%7D%7D%3C/style%3E%3Crect%20x=%2214%22%20y=%2233%22%20width=%224%22%20height=%226%22%20rx=%221%22%20fill=%22%237a4a1d%22/%3E%3Cpath%20d=%22M16%209L6%2020h5L3%2029h9L4%2036h24l-8-7h9l-8-9h5z%22%20fill=%22%231F7A4D%22/%3E%3Cpath%20d=%22M16%209L6%2020h5L3%2029h9L4%2036h24l-8-7h9l-8-9h5z%22%20fill=%22none%22%20stroke=%22%2314583a%22%20stroke-width=%221%22/%3E%3Cpath%20d=%22M16%201l1.7%204.6L22%206l-3.6%202.6L19.6%2013%2016%2010.3%2012.4%2013l1.2-4.4L10%206l4.3-.4z%22%20fill=%22%23E3B341%22/%3E%3Ccircle%20class=%22l%22%20cx=%2213%22%20cy=%2217%22%20r=%221.9%22%20fill=%22%23C8102E%22/%3E%3Ccircle%20class=%22l%20l2%22%20cx=%2219.5%22%20cy=%2223%22%20r=%221.9%22%20fill=%22%23E3B341%22/%3E%3Ccircle%20class=%22l%22%20cx=%2210.5%22%20cy=%2226%22%20r=%221.9%22%20fill=%22%23fff%22/%3E%3Ccircle%20class=%22l%20l2%22%20cx=%2222%22%20cy=%2231%22%20r=%221.9%22%20fill=%22%23C8102E%22/%3E%3Ccircle%20class=%22l%22%20cx=%2215%22%20cy=%2231%22%20r=%221.9%22%20fill=%22%23E3B341%22/%3E%3Ccircle%20class=%22l%20l2%22%20cx=%2216%22%20cy=%2222%22%20r=%221.7%22%20fill=%22%23fff%22/%3E%3C/svg%3E") center/contain no-repeat;opacity:0;transform:translateY(8px) scale(.55);transform-origin:50% 100%;
	transition:opacity .22s ease,transform .3s cubic-bezier(.34,1.56,.64,1)}
@media (hover:hover){
html[data-season="navidad"] .mk .btn-m:hover::after,
html[data-season="navidad"] .btn-primary:hover::after,
html[data-season="navidad"] .ts-btn-grad:hover::after,
html[data-season="navidad"] .woocommerce .single_add_to_cart_button:hover::after,
html[data-season="navidad"] .mk .btn-m:focus-visible::after,
html[data-season="navidad"] .btn-primary:focus-visible::after,
html[data-season="navidad"] .ts-btn-grad:focus-visible::after,
html[data-season="navidad"] .woocommerce .single_add_to_cart_button:focus-visible::after{opacity:1;transform:none}
}