/*
 * Escenas temáticas del logo: araña con telaraña (Halloween), fuegos tricolor (Fiestas Patrias)
 * y gorro, luces, nieve y regalo (Navidad). Solo se carga cuando la temática usa una escena.
 * Las animaciones solo corren con movimiento permitido; sin movimiento queda una pose estática.
 */

html[data-season-skin] .header .logo > a {
    position: relative;
    isolation: isolate;
}

.season-logo-fx {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.logo .season-logo-fx,
.logo .season-logo-fx span {
    display: block;
}

.season-logo-fx > * {
    position: absolute;
}

.season-logo-fx svg {
    display: block;
    overflow: visible;
}

/* ---------- Halloween: telaraña detrás del logo y araña que camina sobre él ---------- */

.season-logo-fx--spider {
    --fx-web: rgba(226, 232, 255, .36);
    --fx-web-glow: rgba(176, 150, 255, .4);
    --fx-dew: #eef4ff;
    --fx-silk: rgba(236, 240, 255, .8);
    --fx-leg: #1d1626;
    --fx-body: #150e1e;
    --fx-hi: #6a4a8c;
    --fx-lo: #08050d;
    --fx-rim: rgba(255, 200, 140, .85);
    --fx-mark: var(--season-primary, #ff7a00);
    --fx-eye: #ffbf3a;
    --fx-shadow: rgba(0, 0, 0, .55);
}

html.light-theme .season-logo-fx--spider {
    --fx-web: rgba(38, 28, 52, .22);
    --fx-web-glow: rgba(255, 255, 255, .9);
    --fx-dew: #38bdf8;
    --fx-silk: rgba(38, 28, 52, .55);
    --fx-leg: #1c1b22;
    --fx-body: #18171d;
    --fx-hi: #55535f;
    --fx-lo: #08080a;
    --fx-rim: rgba(255, 255, 255, 0);
    --fx-eye: #f97316;
    --fx-shadow: rgba(30, 20, 40, .35);
}

.season-logo-fx__web {
    z-index: -1;
    left: 22%;
    top: 40%;
    width: 112px;
    height: 112px;
    color: var(--fx-web);
    transform: translate(-50%, -50%);
    -webkit-mask-image: radial-gradient(circle, #000 42%, transparent 68%);
    mask-image: radial-gradient(circle, #000 42%, transparent 68%);
    filter: drop-shadow(0 0 1.5px var(--fx-web-glow));
}

.season-logo-fx__web-spoke { stroke-width: .6; }
.season-logo-fx__web-ring { stroke-width: .5; }

.season-logo-fx__dew {
    fill: var(--fx-dew);
    opacity: .85;
}

.season-logo-fx__walk-x,
.season-logo-fx__walk-y {
    inset: 0;
    z-index: 2;
}

.season-logo-fx__walk-x { transform: translateX(74%); }
.season-logo-fx__walk-y { position: absolute; transform: translateY(52%); }

.season-logo-fx__silk {
    position: absolute;
    left: 0;
    top: -20px;
    width: 1px;
    height: calc(52% + 20px);
    margin-left: -.5px;
    background: linear-gradient(transparent, var(--fx-silk) 35%);
    transform-origin: top center;
    transform: scaleY(0);
}

.season-logo-fx__spider {
    position: absolute;
    left: 0;
    top: 0;
    width: 19px;
    height: 22px;
    margin: -11px 0 0 -9.5px;
    transform: rotate(270deg);
    filter: drop-shadow(0 0 1px var(--fx-rim)) drop-shadow(1px 3px 2px var(--fx-shadow));
}

.season-logo-fx__legs,
.season-logo-fx__palps { stroke: var(--fx-leg); }

.season-logo-fx__gait {
    transform-box: view-box;
    transform-origin: 12px 12px;
}

.season-logo-fx__thorax { fill: var(--fx-body); }

.season-logo-fx__abdomen {
    stroke: var(--fx-rim);
    stroke-width: .4;
}

.season-logo-fx__stop-hi { stop-color: var(--fx-hi); }
.season-logo-fx__stop-lo { stop-color: var(--fx-lo); }
.season-logo-fx__mark { fill: var(--fx-mark); }

.season-logo-fx__eye {
    fill: var(--fx-eye);
    transform-box: fill-box;
    transform-origin: center;
}

.season-logo-fx__eye--small { opacity: .75; }

/* ---------- Fiestas Patrias: fuegos artificiales y destellos tricolor ---------- */

html[data-season-logo="tricolor"],
.season-logo-fx--tricolor {
    --fx-red: #ff4d5e;
    --fx-blue: #74acff;
    --fx-white: #ffffff;
    --fx-glow-a: rgba(255, 77, 94, .6);
    --fx-glow-b: rgba(116, 172, 255, .6);
}

html.light-theme[data-season-logo="tricolor"],
html.light-theme .season-logo-fx--tricolor {
    --fx-red: #d21034;
    --fx-blue: #0b4ea2;
    --fx-white: #e0a400;
    --fx-glow-a: rgba(210, 16, 52, .3);
    --fx-glow-b: rgba(11, 78, 162, .3);
}

.season-logo-fx__burst {
    left: var(--x);
    top: var(--y);
    z-index: 2;
    width: calc(34px * var(--s, 1));
    height: calc(34px * var(--s, 1));
    margin: calc(-17px * var(--s, 1)) 0 0 calc(-17px * var(--s, 1));
    opacity: 0;
    filter: drop-shadow(0 0 3px currentColor);
}

html.light-theme .season-logo-fx__burst {
    filter: drop-shadow(0 1px 1px rgba(15, 23, 42, .18));
}

.season-logo-fx__burst--red { color: var(--fx-red); }
.season-logo-fx__burst--blue { color: var(--fx-blue); }
.season-logo-fx__burst--white { color: var(--fx-white); }

.season-logo-fx__burst-trail {
    stroke: currentColor;
    stroke-width: 1.3;
}

.season-logo-fx__burst-core { fill: currentColor; }

.season-logo-fx__burst-rays {
    stroke: currentColor;
    stroke-width: 1.35;
    fill: currentColor;
}

.season-logo-fx__burst-trail,
.season-logo-fx__burst-core,
.season-logo-fx__burst-rays {
    transform-box: view-box;
    transform-origin: 0 0;
}

.season-logo-fx__spark {
    left: var(--x);
    top: var(--y);
    z-index: 2;
    width: calc(14px * var(--s, 1));
    height: calc(14px * var(--s, 1));
    opacity: .9;
    transform: scale(.7);
}

.season-logo-fx__spark--red { fill: var(--fx-red); }
.season-logo-fx__spark--blue { fill: var(--fx-blue); }
.season-logo-fx__spark--white {
    fill: var(--fx-white);
    filter: drop-shadow(0 0 3px color-mix(in srgb, var(--fx-white) 70%, transparent));
}

/* ---------- Navidad: gorro, luces, nieve y regalo ---------- */

.season-logo-fx--gift {
    --fx-hat-hi: #ff5463;
    --fx-hat-lo: #b0102a;
    --fx-fur: #ffffff;
    --fx-fur-stroke: rgba(255, 255, 255, 0);
    --fx-fur-shade: rgba(160, 190, 225, .75);
    --fx-wire: #3b7a52;
    --fx-cap: #d9c27a;
    --fx-bulb-red: #ff3b5c;
    --fx-bulb-gold: #ffcb45;
    --fx-bulb-green: #3ee58f;
    --fx-bulb-blue: #52c7ff;
    --fx-halo: .95;
    --fx-flake: #ffffff;
    --fx-flake-glow: rgba(255, 255, 255, .7);
    --fx-gift-base: var(--season-primary, #c81e3a);
    --fx-ribbon: #f6c453;
    --fx-puff: #ffffff;
    --fx-fall: 58px;
}

html.light-theme .season-logo-fx--gift {
    --fx-fur-stroke: rgba(120, 155, 195, .55);
    --fx-fur-shade: rgba(110, 150, 195, .8);
    --fx-wire: #1f4d2e;
    --fx-cap: #b8963e;
    --fx-bulb-red: #e11d48;
    --fx-bulb-gold: #f59e0b;
    --fx-bulb-green: #16a34a;
    --fx-bulb-blue: #0284c7;
    --fx-halo: .4;
    --fx-flake: #8fb9e8;
    --fx-flake-glow: rgba(30, 64, 175, .25);
    --fx-ribbon: #e6ab1e;
    --fx-puff: #dbeafe;
}

.season-logo-fx__hat {
    left: 17%;
    top: -31%;
    z-index: 2;
    width: 30px;
    height: auto;
    transform: rotate(-14deg);
    transform-origin: 30% 80%;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .28));
}

.season-logo-fx__hat-hi { stop-color: var(--fx-hat-hi); }
.season-logo-fx__hat-lo { stop-color: var(--fx-hat-lo); }
.season-logo-fx__hat-shine { fill: rgba(255, 255, 255, .22); }

.season-logo-fx__hat-tip {
    transform-box: view-box;
    transform-origin: 16px 27px;
}

.season-logo-fx__fur {
    fill: var(--fx-fur);
    stroke: var(--fx-fur-stroke);
    stroke-width: .6;
}

.season-logo-fx__fur-shade {
    stroke: var(--fx-fur-shade);
    stroke-width: 1.2;
}

.season-logo-fx__garland {
    left: 41%;
    top: 4%;
    z-index: 2;
    width: 60%;
    height: auto;
}

.season-logo-fx__wire {
    stroke: var(--fx-wire);
    stroke-width: .9;
}

.season-logo-fx__light--red { --tone: var(--fx-bulb-red); }
.season-logo-fx__light--gold { --tone: var(--fx-bulb-gold); }
.season-logo-fx__light--green { --tone: var(--fx-bulb-green); }
.season-logo-fx__light--blue { --tone: var(--fx-bulb-blue); }

.season-logo-fx__bulb { fill: var(--tone); }
.season-logo-fx__bulb-shine { fill: rgba(255, 255, 255, .7); }
.season-logo-fx__cap { fill: var(--fx-cap); }

.season-logo-fx__halo {
    fill: var(--tone);
    opacity: calc(var(--fx-halo) * .7);
}

.season-logo-fx__flake {
    left: var(--x);
    top: -8px;
    z-index: 2;
    width: calc(10px * var(--s, 1));
    height: calc(10px * var(--s, 1));
    color: var(--fx-flake);
    opacity: 0;
    filter: drop-shadow(0 0 1.5px var(--fx-flake-glow));
}

.season-logo-fx__flake--far {
    filter: blur(.4px) drop-shadow(0 0 1px var(--fx-flake-glow));
}

.season-logo-fx__gift {
    right: -16px;
    bottom: -2px;
    z-index: 2;
    width: 22px;
    height: 22px;
    transform-origin: bottom center;
}

.season-logo-fx__gift-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .3));
}

.season-logo-fx__gift-hi { stop-color: color-mix(in srgb, var(--fx-gift-base) 78%, #fff); }
.season-logo-fx__gift-lo { stop-color: color-mix(in srgb, var(--fx-gift-base) 88%, #000); }
.season-logo-fx__gift-shade { fill: rgba(0, 0, 0, .14); }
.season-logo-fx__gift-lid { fill: color-mix(in srgb, var(--fx-gift-base) 80%, #000); }
.season-logo-fx__ribbon-band { fill: var(--fx-ribbon); }
.season-logo-fx__ribbon-knot { fill: color-mix(in srgb, var(--fx-ribbon) 78%, #8a4b00); }

.season-logo-fx__lid {
    transform-box: fill-box;
    transform-origin: left bottom;
}

.season-logo-fx__puff {
    position: absolute;
    left: -15%;
    bottom: -3px;
    width: 130%;
    height: auto;
    fill: var(--fx-puff);
    opacity: 0;
    transform-origin: bottom center;
}

.season-logo-fx__pop {
    position: absolute;
    left: 30%;
    top: -60%;
    width: 60%;
    height: 60%;
    fill: var(--fx-ribbon);
    opacity: 0;
}

/* ---------- Coreografía (solo con movimiento permitido) ---------- */

html:not(.seasonal-reduce):not(.seasonal-paused):not([data-season-motion="off"]) .season-logo-fx__web {
    animation: fx-web-breathe 7s ease-in-out 2.4s infinite;
}

html:not(.seasonal-reduce):not(.seasonal-paused):not([data-season-motion="off"]) .season-logo-fx__web-spoke {
    animation: fx-web-draw 1.1s cubic-bezier(.6, 0, .2, 1) calc(var(--i) * 45ms) backwards;
}

html:not(.seasonal-reduce):not(.seasonal-paused):not([data-season-motion="off"]) .season-logo-fx__web-ring {
    animation: fx-web-draw 1.3s ease-out calc(.55s + var(--i) * 150ms) backwards;
}

html:not(.seasonal-reduce):not(.seasonal-paused):not([data-season-motion="off"]) .season-logo-fx__dew {
    animation: fx-dew 3.4s ease-in-out calc(2s + var(--i) * .8s) infinite backwards;
}

html:not(.seasonal-reduce):not(.seasonal-paused):not([data-season-motion="off"]) .season-logo-fx__walk-x {
    animation: fx-spider-x 16s ease-in-out infinite;
}

html:not(.seasonal-reduce):not(.seasonal-paused):not([data-season-motion="off"]) .season-logo-fx__walk-y {
    animation: fx-spider-y 16s ease-in-out infinite;
}

html:not(.seasonal-reduce):not(.seasonal-paused):not([data-season-motion="off"]) .season-logo-fx__spider {
    animation: fx-spider-turn 16s ease-in-out infinite;
}

html:not(.seasonal-reduce):not(.seasonal-paused):not([data-season-motion="off"]) .season-logo-fx__silk {
    animation: fx-spider-silk 16s ease-in-out infinite;
}

html:not(.seasonal-reduce):not(.seasonal-paused):not([data-season-motion="off"]) .season-logo-fx__gait--a {
    animation: fx-gait .24s ease-in-out infinite alternate;
}

html:not(.seasonal-reduce):not(.seasonal-paused):not([data-season-motion="off"]) .season-logo-fx__gait--b {
    animation: fx-gait .24s ease-in-out -.24s infinite alternate;
}

html:not(.seasonal-reduce):not(.seasonal-paused):not([data-season-motion="off"]) .season-logo-fx__eye {
    animation: fx-blink 5s ease-in-out infinite;
}

html:not(.seasonal-reduce):not(.seasonal-paused):not([data-season-motion="off"]) .season-logo-fx__burst {
    opacity: 1;
}

html:not(.seasonal-reduce):not(.seasonal-paused):not([data-season-motion="off"]) .season-logo-fx__burst-trail {
    animation: fx-burst-trail 3.8s ease-out var(--d, 0s) infinite both;
}

html:not(.seasonal-reduce):not(.seasonal-paused):not([data-season-motion="off"]) .season-logo-fx__burst-core {
    animation: fx-burst-core 3.8s ease-out var(--d, 0s) infinite both;
}

html:not(.seasonal-reduce):not(.seasonal-paused):not([data-season-motion="off"]) .season-logo-fx__burst-rays {
    animation: fx-burst-rays 3.8s cubic-bezier(.15, .7, .3, 1) var(--d, 0s) infinite both;
}

html:not(.seasonal-reduce):not(.seasonal-paused):not([data-season-motion="off"]) .season-logo-fx__spark {
    animation: fx-spark 4.2s ease-in-out var(--d, 0s) infinite both;
}

html[data-season-logo="tricolor"]:not(.seasonal-reduce):not(.seasonal-paused):not([data-season-motion="off"]) .header .logo-image {
    animation: fx-tricolor-glow 5s ease-in-out infinite;
}

html:not(.seasonal-reduce):not(.seasonal-paused):not([data-season-motion="off"]) .season-logo-fx__hat-tip {
    animation: fx-hat-tip 3.4s ease-in-out infinite;
}

html:not(.seasonal-reduce):not(.seasonal-paused):not([data-season-motion="off"]) .season-logo-fx__bulb {
    animation: fx-bulb 2.4s ease-in-out calc(var(--i) * -.3s) infinite;
}

html:not(.seasonal-reduce):not(.seasonal-paused):not([data-season-motion="off"]) .season-logo-fx__halo {
    animation: fx-halo 2.4s ease-in-out calc(var(--i) * -.3s) infinite;
}

html:not(.seasonal-reduce):not(.seasonal-paused):not([data-season-motion="off"]) .season-logo-fx__flake {
    animation: fx-snow 5.4s linear var(--d, 0s) infinite both;
}

html:not(.seasonal-reduce):not(.seasonal-paused):not([data-season-motion="off"]) .season-logo-fx__flake--far {
    animation-duration: 7.6s;
}

html:not(.seasonal-reduce):not(.seasonal-paused):not([data-season-motion="off"]) .season-logo-fx__gift {
    animation: fx-gift 11s cubic-bezier(.3, 0, .3, 1) infinite;
}

html:not(.seasonal-reduce):not(.seasonal-paused):not([data-season-motion="off"]) .season-logo-fx__lid {
    animation: fx-lid 11s ease-in-out infinite;
}

html:not(.seasonal-reduce):not(.seasonal-paused):not([data-season-motion="off"]) .season-logo-fx__puff {
    animation: fx-puff 11s ease-out infinite;
}

html:not(.seasonal-reduce):not(.seasonal-paused):not([data-season-motion="off"]) .season-logo-fx__pop {
    animation: fx-pop 11s ease-out infinite;
}

html:is([data-season-logo="spider"], [data-season-logo="tricolor"], [data-season-logo="gift"]):not(.seasonal-reduce):not(.seasonal-paused):not([data-season-motion="off"]) .categories-menu__logo {
    animation: season-float calc(3.2s / var(--season-amp, 1)) ease-in-out infinite;
}

@keyframes fx-web-draw {
    from { stroke-dasharray: 1; stroke-dashoffset: 1; }
    to { stroke-dasharray: 1; stroke-dashoffset: 0; }
}

@keyframes fx-web-breathe {
    0%, 100% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
    50% { transform: translate(-50%, -50%) rotate(1.5deg) scale(1.03); }
}

@keyframes fx-dew {
    0%, 100% { opacity: .3; }
    50% { opacity: 1; }
}

@keyframes fx-spider-x {
    0%, 17% { transform: translateX(88%); }
    40%, 52% { transform: translateX(50%); }
    72%, 100% { transform: translateX(88%); }
}

@keyframes fx-spider-y {
    0% { transform: translateY(-40%); }
    14% { transform: translateY(52%); }
    24% { transform: translateY(45%); }
    32% { transform: translateY(57%); }
    40%, 52% { transform: translateY(50%); }
    62% { transform: translateY(57%); }
    72%, 76% { transform: translateY(52%); }
    94%, 100% { transform: translateY(-40%); }
}

@keyframes fx-spider-turn {
    0% { opacity: 0; transform: rotate(180deg); }
    4% { opacity: 1; }
    14% { transform: rotate(180deg); }
    18%, 40% { transform: rotate(270deg); }
    44% { transform: rotate(248deg); }
    47% { transform: rotate(292deg); }
    50% { transform: rotate(270deg); }
    55%, 72% { transform: rotate(450deg); }
    76% { transform: rotate(360deg); }
    92% { opacity: 1; }
    96%, 100% { opacity: 0; transform: rotate(360deg); }
}

@keyframes fx-spider-silk {
    0% { opacity: 1; transform: scaleY(0); }
    14%, 17% { opacity: 1; transform: scaleY(1); }
    21%, 72% { opacity: 0; transform: scaleY(1); }
    76% { opacity: 1; transform: scaleY(1); }
    94%, 100% { opacity: 1; transform: scaleY(0); }
}

@keyframes fx-gait {
    from { transform: rotate(-7deg); }
    to { transform: rotate(7deg); }
}

@keyframes fx-blink {
    0%, 46%, 52%, 100% { transform: scaleY(1); }
    49% { transform: scaleY(.1); }
}

@keyframes fx-burst-trail {
    0% { opacity: 0; transform: translateY(8px); }
    4% { opacity: 1; }
    13%, 100% { opacity: 0; transform: translateY(-6px); }
}

@keyframes fx-burst-core {
    0%, 12% { opacity: 0; transform: scale(.2); }
    16% { opacity: 1; transform: scale(1.5); }
    32%, 100% { opacity: 0; transform: scale(.3); }
}

@keyframes fx-burst-rays {
    0%, 13% { opacity: 0; transform: scale(.15); }
    17% { opacity: 1; }
    40% { opacity: 1; transform: scale(1); }
    62%, 100% { opacity: 0; transform: translateY(2.5px) scale(1.12); }
}

@keyframes fx-spark {
    0%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); }
    18% { opacity: 1; transform: scale(1.05) rotate(45deg); }
    34% { opacity: .9; transform: scale(.8) rotate(80deg); }
    52% { opacity: 0; transform: scale(.3) rotate(120deg); }
}

@keyframes fx-tricolor-glow {
    0%, 100% { filter: drop-shadow(0 0 6px var(--fx-glow-a)); }
    50% { filter: drop-shadow(0 0 6px var(--fx-glow-b)); }
}

@keyframes fx-hat-tip {
    0%, 100% { transform: rotate(-4deg); }
    50% { transform: rotate(5deg); }
}

@keyframes fx-bulb {
    0%, 100% { opacity: .5; }
    50% { opacity: 1; }
}

@keyframes fx-halo {
    0%, 100% { opacity: 0; }
    50% { opacity: var(--fx-halo); }
}

@keyframes fx-snow {
    0% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
    10% { opacity: 1; }
    30% { transform: translate(4px, calc(var(--fx-fall) * .3)) rotate(70deg); }
    55% { transform: translate(-3px, calc(var(--fx-fall) * .55)) rotate(130deg); }
    80% { opacity: .9; transform: translate(3px, calc(var(--fx-fall) * .8)) rotate(190deg); }
    100% { opacity: 0; transform: translate(0, var(--fx-fall)) rotate(230deg); }
}

@keyframes fx-gift {
    0% { opacity: 0; transform: translateY(-48px) rotate(-14deg); }
    4% { opacity: 1; }
    13% { transform: translateY(0) rotate(0deg) scale(1.1, .84); }
    17% { transform: translateY(-7px) rotate(3deg) scale(.95, 1.07); }
    21% { transform: translateY(0) rotate(0deg) scale(1.04, .95); }
    25%, 86% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
    92%, 100% { opacity: 0; transform: translateY(0) scale(.6); }
}

@keyframes fx-lid {
    0%, 34%, 52%, 100% { transform: translate(0, 0) rotate(0deg); }
    38% { transform: translate(0, -4px) rotate(-16deg); }
    44% { transform: translate(0, -3px) rotate(-9deg); }
    48% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes fx-puff {
    0%, 12% { opacity: 0; transform: scale(.3); }
    14% { opacity: .95; transform: scale(.8); }
    26%, 100% { opacity: 0; transform: translateY(-2px) scale(1.35); }
}

@keyframes fx-pop {
    0%, 36% { opacity: 0; transform: translateY(0) scale(.2) rotate(0deg); }
    41% { opacity: 1; transform: translateY(-6px) scale(1) rotate(60deg); }
    50%, 100% { opacity: 0; transform: translateY(-11px) scale(.3) rotate(120deg); }
}

@media (max-width: 768px) {
    .season-logo-fx__web { width: 84px; height: 84px; }
    .season-logo-fx__spider { width: 15px; height: 17.5px; margin: -8.75px 0 0 -7.5px; }
    .season-logo-fx__burst { width: calc(24px * var(--s, 1)); height: calc(24px * var(--s, 1)); margin: calc(-12px * var(--s, 1)) 0 0 calc(-12px * var(--s, 1)); }
    .season-logo-fx--tricolor svg:nth-of-type(n+8) { display: none; }
    .season-logo-fx__hat { width: 23px; }
    .season-logo-fx__flake--far { display: none; }
    .season-logo-fx--gift { --fx-fall: 44px; }
    .season-logo-fx__gift { right: -8px; width: 16px; height: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .season-logo-fx *,
    .season-logo-fx > * {
        animation: none !important;
    }

    .season-logo-fx__burst {
        opacity: 0 !important;
    }
}