[data-season="halloween"] {
--hw-amber:       #E8A33D;   /* ámbar / oro */
--hw-amber-deep:  #B5721A;
--hw-purple:      #6B3FA0;   /* morado */
--hw-purple-deep: #2E1A47;   /* berenjena */
--hw-web: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%20120'%3E%3Cg%20fill='none'%20stroke='%23ffffff'%20stroke-opacity='0.5'%20stroke-width='1'%3E%3Cpath%20d='M0%200L120%2055M0%200L85%2085M0%200L55%20120M0%200L120%200M0%200L0%20120'/%3E%3Cpath%20d='M22%200Q16%2016%200%2022M48%200Q33%2033%200%2048M80%200Q52%2052%200%2080M112%200Q74%2074%200%20112'/%3E%3C/g%3E%3C/svg%3E");
}
[data-season="halloween"] .hero { position: relative; }
[data-season="halloween"] .hero::before,
[data-season="halloween"] .hero::after {
content: ""; position: absolute; top: 0; z-index: 4;
width: 96px; height: 96px; pointer-events: none;
background: var(--hw-web) no-repeat top left / contain;
opacity: .7; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5));
}
[data-season="halloween"] .hero::before { left: 0; }
[data-season="halloween"] .hero::after  { right: 0; transform: scaleX(-1); }
[data-season="halloween"] .hero__cover { position: relative; }
[data-season="halloween"] .hero__cover::before {
content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
background:
radial-gradient(85% 70% at 50% 118%, rgba(232, 163, 61, .30), transparent 60%),
linear-gradient(180deg, rgba(46, 26, 71, .55) 0%, transparent 38%, rgba(46, 26, 71, .22) 72%, rgba(0, 0, 0, .62) 100%);
mix-blend-mode: multiply;
}
[data-season="halloween"] .hero__cover::after {
content: "🦇"; position: absolute; top: 16px; right: 20px; z-index: 3;
font-size: 30px; line-height: 1; pointer-events: none;
filter: brightness(0) drop-shadow(0 3px 6px rgba(0, 0, 0, .55));
animation: hwGlide 11s ease-in-out infinite;
}
[data-season="halloween"] .brand__name {
text-shadow: 0 0 10px rgba(232, 163, 61, .45);
animation: hwEmber 3.6s ease-in-out infinite;
}
[data-season="halloween"] .badge {
background: linear-gradient(135deg, var(--hw-amber) 0%, var(--hw-amber-deep) 100%);
color: #2a1500;
box-shadow: 0 0 0 1px rgba(255, 221, 160, .55), 0 6px 18px rgba(232, 163, 61, .4);
animation: hwGlow 3s ease-in-out infinite;
}
[data-season="halloween"] .cat__title::after {
content: ""; display: block; width: 54px; height: 2px; margin-top: 8px;
border-radius: 2px;
background: linear-gradient(90deg, var(--hw-amber), rgba(232, 163, 61, 0));
}
[data-season="halloween"] .card {
transition: box-shadow .28s ease, border-color .28s ease, transform .28s ease;
}
@media (hover: hover) {
[data-season="halloween"] .card:hover {
border-color: rgba(232, 163, 61, .75);
box-shadow: 0 14px 34px rgba(46, 26, 71, .4), 0 0 0 1px rgba(232, 163, 61, .45);
}
}
[data-season="halloween"] .btn--block,
[data-season="halloween"] .btn--grow,
[data-season="halloween"] .card__add,
[data-season="halloween"] .dock__btn {
box-shadow: 0 8px 26px rgba(232, 163, 61, .4);
}
[data-season="halloween"] .splash__center { position: relative; }
[data-season="halloween"] .splash__center::before {
content: "🦇"; position: absolute; top: 4%; left: 9%;
font-size: 40px; line-height: 1; pointer-events: none;
filter: brightness(0) drop-shadow(0 4px 8px rgba(0, 0, 0, .5));
animation: hwGlide 9s ease-in-out infinite;
}
[data-season="halloween"] .splash__center::after {
content: "🦇"; position: absolute; bottom: 10%; right: 11%;
font-size: 28px; line-height: 1; pointer-events: none;
filter: brightness(0) drop-shadow(0 4px 8px rgba(0, 0, 0, .5));
animation: hwGlide 12s ease-in-out infinite reverse;
}
[data-season="halloween"] .splash__logo { position: relative; }
[data-season="halloween"] .splash__logo::after {
content: ""; position: absolute; inset: -18% -22%;
background: radial-gradient(circle, rgba(232, 163, 61, .28), transparent 65%);
pointer-events: none; z-index: -1;
animation: hwEmber 4s ease-in-out infinite;
}
[data-season="halloween"] .modal__media { position: relative; }
[data-season="halloween"] .modal__media::after {
content: ""; position: absolute; top: 0; left: 0; z-index: 3;
width: 84px; height: 84px; pointer-events: none;
background: var(--hw-web) no-repeat top left / contain;
opacity: .75; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6));
}
[data-season="halloween"] .modal:not([hidden]) .modal__backdrop {
animation: hwDim 2.3s ease both;
}
[data-season="halloween"] .seasonfx {
display: block; position: absolute; inset: 0; z-index: 5;
overflow: hidden; pointer-events: none; border-radius: inherit;
}
[data-season="halloween"] .sbit {
position: absolute; left: 50%; top: 100px;   /* punto de reunión: el centro de la foto */
opacity: 0;
}
[data-season="halloween"] .sbit__g {
display: block; transform-origin: center;
filter: brightness(0);   /* emoji → silueta negra; sin sombra = más liviano */
}
[data-season="halloween"] .sbit__g::before {
content: "🦇"; display: block; font-size: 38px; line-height: 1;
}
[data-season="halloween"] .modal:not([hidden]) .sbit {
animation: hwCarry var(--dur, 2s) cubic-bezier(.3, .5, .25, 1) var(--delay, 0s) both;
}
[data-season="halloween"] .modal:not([hidden]) .sbit__g {
animation: hwFlap var(--flap, .18s) ease-in-out 14 both;   /* aleteo acotado (~2.5 s) */
}
@media (max-width: 480px) {
[data-season="halloween"] .sbit:nth-child(n+31) { display: none; }
}
@keyframes hwGlide {
0%   { transform: translate(0, 0) rotate(-5deg); }
25%  { transform: translate(-34px, 12px) rotate(5deg); }
50%  { transform: translate(-72px, -6px) rotate(-5deg); }
75%  { transform: translate(-34px, 14px) rotate(5deg); }
100% { transform: translate(0, 0) rotate(-5deg); }
}
@keyframes hwEmber {
0%, 100% { text-shadow: 0 0 8px rgba(232, 163, 61, .4); opacity: 1; }
50%      { text-shadow: 0 0 18px rgba(232, 163, 61, .8); opacity: .96; }
}
@keyframes hwGlow {
0%, 100% { box-shadow: 0 0 0 1px rgba(255, 221, 160, .55), 0 6px 18px rgba(232, 163, 61, .4); }
50%      { box-shadow: 0 0 0 1px rgba(255, 221, 160, .75), 0 8px 24px rgba(232, 163, 61, .65); }
}
@keyframes hwDim {
0%   { opacity: 0; background: rgba(0, 0, 0, .92); }
12%  { opacity: 1; background: rgba(0, 0, 0, .92); }
60%  { background: rgba(0, 0, 0, .9); }
88%  { background: rgba(0, 0, 0, .55); }
100% { opacity: 1; background: rgba(0, 0, 0, .55); }
}
@keyframes hwFlap {
0%, 100% { transform: scaleX(1); }
50%      { transform: scaleX(.5); }
}
@keyframes hwCarry {
0%   { transform: translate(calc(-50% + var(--fx, 0px)), calc(-50% + var(--fy, 0px))) rotate(var(--r, 0deg)) scale(var(--s, 1)); opacity: 0; }
10%  { opacity: 1; }
42%  { transform: translate(-50%, -50%) rotate(0deg) scale(calc(var(--s, 1) * .5)); opacity: 1; }
70%  { transform: translate(-50%, calc(-50% - 125vh)) rotate(var(--r, 0deg)) scale(calc(var(--s, 1) * .35)); opacity: 1; }
84%  { opacity: 0; }
100% { transform: translate(-50%, calc(-50% - 125vh)) rotate(var(--r, 0deg)) scale(.2); opacity: 0; }
}
@keyframes hwCarried {
0%   { transform: scale(1.12) translateX(0); opacity: 1; }
7%   { transform: scale(1.12) translateX(-6px); }
13%  { transform: scale(1.1)  translateX(6px); }
20%  { transform: scale(1)    translateX(0); }
42%  { transform: translateY(0) scale(1); opacity: 1; }
62%  { transform: translateY(-120%) scale(.3) rotate(-6deg); opacity: .22; }
72%  { transform: translateY(-120%) scale(.3) rotate(-6deg); opacity: 0; }
86%  { transform: translateY(-120%) scale(.3); opacity: 0; }
93%  { transform: translateY(7%) scale(1.03); opacity: 1; }
100% { transform: translateY(0) scale(1); opacity: 1; }
}