/* Variantes cerradas: el contenido y las fechas viven en campañas versionadas. */
body[data-site-theme="halloween"] .hero{background:#261936;color:#fff7ea}
body[data-site-theme="halloween"] .hero-description{color:#fff0db}
body[data-site-theme="halloween"] .hero .eyebrow{color:#ffba64}
body[data-site-theme="halloween"] .hero .button{background:#ffad47;border-color:#ffad47;color:#261936}
body[data-site-theme="halloween"] .hero .button:hover{background:#ffc87c;border-color:#ffc87c}
body[data-site-theme="halloween"] .hero :focus-visible{outline-color:#ffba64}
body[data-site-theme="halloween"] .hero-photo{border-bottom:6px solid #ffad47}
body[data-site-theme="christmas"] .hero{background:#123b32;color:#fff7ea}
body[data-site-theme="christmas"] .hero-description{color:#fff0db}
body[data-site-theme="christmas"] .hero .eyebrow{color:#ffc86c}
body[data-site-theme="football"] .hero{background:#173c31;color:#fff7ea}
body[data-site-theme="football"] .hero-description{color:#f2f5eb}
body[data-site-theme="football"] .hero .eyebrow{color:#f6c651}
body[data-site-theme="live-music"] .hero{background:#351d39;color:#fff7ea}
body[data-site-theme="live-music"] .hero-description{color:#fce7f0}
body[data-site-theme="live-music"] .hero .eyebrow{color:#ffb8d8}
body[data-site-theme="birthday"] .hero{background:#fff0d9;color:#172c4b}
body[data-site-theme="super-bowl"] .hero{background:#091d34;color:#fff7ea}
body[data-site-theme="super-bowl"] .hero-description{color:#f0f3f8}
body[data-site-theme="super-bowl"] .hero .eyebrow{color:#f6c651}
body[data-site-theme="christmas"] .hero :focus-visible,
body[data-site-theme="football"] .hero :focus-visible,
body[data-site-theme="live-music"] .hero :focus-visible,
body[data-site-theme="super-bowl"] .hero :focus-visible{outline-color:#f6b22b}
/* La escena decorativa usa espacio propio y controles; nunca cubre el contenido. */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Closed CMS color tokens affect only the hero; approved yellow/navy navigation is untouched. */
body:not([data-site-theme="normal"]) .hero{background:var(--campaign-background);color:var(--campaign-text)}
body:not([data-site-theme="normal"]) .hero-description,body:not([data-site-theme="normal"]) .hero .eyebrow{color:var(--campaign-text)}
body:not([data-site-theme="normal"]) .hero .button{background:var(--campaign-accent);border-color:var(--campaign-accent);color:var(--campaign-buttonText)}
.campaign-mascot{position:relative;display:block;width:clamp(80px,12vw,160px);height:auto;margin:1rem auto;pointer-events:none}

.campaign-scene{margin-top:24px;max-width:380px;color:inherit;border-top:1px solid currentColor;padding-top:12px;contain:layout}
.campaign-stage{position:relative;display:flex;align-items:center;gap:24px;min-height:150px;overflow:hidden;isolation:isolate;pointer-events:none;padding-block:12px}
.campaign-stage .campaign-actor{display:block;position:relative;flex:none;object-fit:contain;width:112px;height:120px;margin:0;transform-origin:50% 90%;animation:campaign-greeting 5s ease-in-out infinite}
.campaign-motion-accent{display:block;position:relative;width:28px;height:40px;border-left:3px solid currentColor;border-radius:50%;opacity:.45;animation:campaign-steam 5s ease-in-out infinite}
.campaign-motion-controls{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;font-size:12px}
.campaign-motion-label{opacity:.85}
.campaign-motion-pause{min-width:48px;min-height:44px;padding:8px 10px;border:1px solid currentColor;border-radius:5px;background:transparent;color:inherit;font:inherit;font-size:12px;cursor:pointer}
.campaign-motion-pause:disabled{opacity:.8;cursor:default}
.campaign-year{font-size:clamp(32px,5vw,48px);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.05em}
.campaign-year-outgoing{display:none;position:absolute;left:136px;font-size:clamp(32px,5vw,48px);font-weight:600;font-variant-numeric:tabular-nums;background:var(--campaign-background,var(--cream));padding-inline:4px}
.campaign-scene[data-motion-theme="football"] .campaign-motion-accent,.campaign-scene[data-motion-theme="super-bowl"] .campaign-motion-accent{width:40px;height:40px;border:3px solid currentColor;border-radius:50%;background:radial-gradient(circle at 50% 50%,currentColor 0 6px,transparent 7px);animation:campaign-ball 5s ease-in-out infinite}
.campaign-scene[data-motion-theme="halloween"] .campaign-motion-accent{width:46px;height:40px;background:#ed8e30;border:2px solid #ad5919;border-radius:44%;opacity:1;animation:campaign-pumpkin 5s ease-in-out infinite}
.campaign-scene[data-motion-theme="halloween"] .campaign-motion-accent:before{content:"";position:absolute;left:19px;top:-10px;width:8px;height:12px;background:#64783c;border-radius:4px 4px 0 0}
.campaign-scene[data-motion-theme="christmas"] .campaign-motion-accent{width:58px;height:28px;border:2px solid #f6b22b;border-radius:4px 4px 20px 15px;background:#b84c45;opacity:1;animation:campaign-sleigh 16s ease-in-out infinite}
.campaign-scene[data-motion-theme="christmas"] .campaign-motion-accent:before{content:"";position:absolute;left:7px;top:-18px;width:24px;height:18px;background:#f6b22b;border-radius:2px}
.campaign-scene[data-motion-theme="christmas"] .campaign-motion-accent:after{content:"";position:absolute;left:0;right:-12px;bottom:-10px;height:10px;border:3px solid #f6b22b;border-top:0;border-radius:0 0 16px 14px}
.campaign-scene[data-motion-theme="holy-week"] .campaign-actor{animation:campaign-arrival 2.4s ease-out 1 both}
.campaign-scene[data-motion-theme="holy-week"] .campaign-motion-accent{width:10px;height:17px;border:0;border-radius:80% 10% 80% 10%;background:currentColor;animation:campaign-petal 12s ease-in-out infinite}
.campaign-scene[data-motion-theme="new-year"] .campaign-actor{animation:none}
.campaign-scene[data-motion-theme="new-year"] .campaign-motion-accent{display:none}
.campaign-scene[data-motion-theme="new-year"][data-motion-cycle="playing"] .campaign-actor{animation:campaign-year-push 4.2s ease-in-out 1}
.campaign-scene[data-motion-theme="new-year"][data-motion-cycle="playing"] .campaign-year-outgoing{display:block;animation:campaign-year-exit 4.2s ease-in-out 1 both}
.campaign-scene[data-motion-theme="halloween"] .campaign-actor{animation:campaign-ghost 5s ease-in-out infinite}
.campaign-scene[data-motion-state="paused"] .campaign-actor,.campaign-scene[data-motion-state="paused"] .campaign-motion-accent,.campaign-scene[data-motion-state="paused"] .campaign-year-outgoing{animation-play-state:paused!important}
.campaign-scene[data-motion-cycle="still"] .campaign-year-outgoing{display:none}
@keyframes campaign-greeting{0%,100%{transform:rotate(-7deg) translateY(0)}25%{transform:rotate(7deg) translateY(-8px)}50%{transform:rotate(-4deg) translateY(0)}75%{transform:rotate(5deg) translateY(-6px)}}
@keyframes campaign-steam{0%,100%{transform:translateY(7px);opacity:.2}50%{transform:translateY(-12px);opacity:.65}}
@keyframes campaign-ball{0%,100%{transform:translateX(0) rotate(0)}50%{transform:translateX(64px) rotate(180deg)}}
@keyframes campaign-ghost{0%,100%{transform:translateY(6px) rotate(-3deg)}50%{transform:translateY(-10px) rotate(4deg)}}
@keyframes campaign-pumpkin{0%,100%{transform:rotate(-5deg) translateY(0)}50%{transform:rotate(5deg) translateY(-8px)}}
@keyframes campaign-sleigh{0%,25%,100%{transform:translateX(0) translateY(0)}12%{transform:translateX(70px) translateY(-12px)}}

.theme-preview-frame{border:1px solid #ccd3df;border-radius:12px;overflow:hidden;background:#fff;color:#172c4b;margin:20px auto;width:100%;max-width:100%;font-family:Poppins,system-ui,sans-serif}
.theme-preview-mobile{max-width:390px}
.theme-preview-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;background:#f6b22b;color:#172c4b}
.theme-preview-header img{width:106px;height:70px;object-fit:contain}
.theme-preview-header span{padding:10px 20px;background:#172c4b;color:white;border-radius:6px}
.theme-preview-hero{padding:24px;background:var(--campaign-background,#faf8f2);color:var(--campaign-text,#172c4b)}
.theme-preview-hero h3{font-size:clamp(26px,4vw,40px);line-height:1.15;margin:12px 0}
.theme-preview-hero p{line-height:1.6}
.theme-preview-eyebrow{font-size:12px;letter-spacing:.06em}
.theme-preview-motion{min-height:210px;margin-block:20px}
.theme-preview-motion .campaign-scene{max-width:100%;margin-top:0}
.theme-preview-note{font-size:12px;line-height:1.5}
.theme-preview-actions{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 20px}
.theme-preview-actions button{min-height:48px;padding:10px 14px;font:inherit;font-size:13px;border:1px solid currentColor;border-radius:6px;color:inherit;background:transparent;cursor:pointer}
.theme-preview-actions button:focus-visible{outline:3px solid currentColor;outline-offset:3px}
.theme-preview-photo{display:block;max-width:100%;width:100%;height:auto;object-fit:cover}
.theme-preview-cta{display:inline-block;margin-top:18px;padding:12px 18px;border-radius:6px;background:var(--campaign-accent,#f6b22b);color:var(--campaign-buttonText,#172c4b)}
@keyframes campaign-arrival{from{transform:translateX(-12px)}to{transform:translateX(0)}}
@keyframes campaign-petal{0%,100%{transform:translate(0,-8px) rotate(-12deg);opacity:.25}50%{transform:translate(12px,12px) rotate(25deg);opacity:.5}}
@keyframes campaign-year-push{0%,100%{transform:translateX(0) rotate(0)}40%,60%{transform:translateX(12px) rotate(4deg)}}
@keyframes campaign-year-exit{0%,20%{transform:translateX(0);opacity:1}65%,100%{transform:translateX(45px);opacity:0}}
@media(prefers-reduced-motion:reduce){.campaign-scene:not([data-motion-sample="true"]):not([data-motion-mode="automatic"]) .campaign-actor,.campaign-scene:not([data-motion-sample="true"]):not([data-motion-mode="automatic"]) .campaign-motion-accent,.campaign-scene:not([data-motion-sample="true"]):not([data-motion-mode="automatic"]) .campaign-year-outgoing{animation:none!important;transform:none!important;opacity:1}.campaign-scene:not([data-motion-sample="true"]):not([data-motion-mode="automatic"]) .campaign-year-outgoing{display:none!important}}
@media(max-width:760px){.campaign-scene{margin-top:20px;max-width:100%}.campaign-stage{min-height:132px}.campaign-stage .campaign-actor{width:96px;height:104px}.campaign-year-outgoing{left:120px}}

body:not([data-site-theme="normal"]) .event-hero{background:var(--campaign-background);color:var(--campaign-text)}
body:not([data-site-theme="normal"]) .event-hero .eyebrow{color:var(--campaign-text)}
body:not([data-site-theme="normal"]) .event-hero .button{background:var(--campaign-accent);color:var(--campaign-buttonText);border-color:var(--campaign-accent)}
.event-hero .hero-photo{max-width:640px;margin:1rem auto}
.event-hero .hero-photo img{width:100%;height:auto}

body:not([data-site-theme="normal"]) .hero-photo figcaption{color:var(--campaign-text)}
body:not([data-site-theme="normal"]) .hero .button:hover,body:not([data-site-theme="normal"]) .event-hero .button:hover{background:var(--campaign-accent);border-color:var(--campaign-accent);color:var(--campaign-buttonText);filter:none}
body:not([data-site-theme="normal"]) .hero :focus-visible,body:not([data-site-theme="normal"]) .event-hero :focus-visible{outline-color:var(--campaign-text)}
/* Visible seasonal choreography. Decorative space is reserved below the copy;
   it never covers links, text, navigation or food photography. */
.campaign-scene{max-width:460px;border-top:0;padding-top:0;margin-top:24px}
.campaign-stage{min-height:178px;gap:32px;border-radius:14px;padding:16px 20px;background:linear-gradient(130deg,#fff4d8,#fff9ed);color:#172c4b;box-shadow:inset 0 0 0 1px #172c4b12}
.campaign-stage .campaign-actor{width:136px;height:144px;z-index:3}
.campaign-motion-controls{margin-top:8px;font-size:11px;gap:6px 12px}
.campaign-motion-pause{border-radius:24px;min-height:44px;padding:8px 14px;font-size:11px;font-weight:600}
.campaign-motion-label{max-width:220px}
.campaign-scene[data-motion-theme="halloween"] .campaign-stage{min-height:218px;padding:22px 20px;background:radial-gradient(ellipse at 35% 85%,#fff2cb 0 18%,#f8d99f 37%,#dbb5d1 68%,#b99bcb 100%);box-shadow:inset 0 0 0 1px #ffce7a33}
.campaign-scene[data-motion-theme="halloween"] .campaign-stage .campaign-actor{width:154px;height:162px;align-self:end;transform-origin:50% 85%;filter:drop-shadow(0 5px 0 #fff3df) drop-shadow(0 0 10px #fff7e8);animation:campaign-ghost-journey 8s ease-in-out infinite}
.campaign-scene[data-motion-theme="halloween"] .campaign-motion-accent{position:absolute;right:26px;bottom:24px;width:61px;height:54px;border:3px solid #bf571c;border-radius:46%;background:repeating-linear-gradient(90deg,transparent 0 13px,#c467202f 13px 16px),#ff9d31;box-shadow:inset 6px 0 0 #ffc766,inset -7px -4px 0 #dc7024,0 7px 0 #32184318;z-index:4;animation:campaign-pumpkin-roll 8s ease-in-out infinite}
.campaign-scene[data-motion-theme="halloween"] .campaign-motion-accent:before{left:24px;top:-13px;width:10px;height:13px;background:#487042;transform:rotate(15deg)}
.campaign-scene[data-motion-theme="halloween"] .campaign-motion-accent:after{content:"";position:absolute;left:11px;top:15px;width:32px;height:22px;background:#38213e;clip-path:polygon(0 0,29% 0,14% 36%,0 0,71% 0,100% 0,86% 36%,71% 0,0 62%,25% 73%,50% 67%,75% 73%,100% 62%,80% 100%,20% 100%,0 62%)}
.campaign-halloween-moon{position:absolute;right:35px;top:22px;width:54px;height:54px;border-radius:50%;background:#fff2cb;box-shadow:0 0 36px #fff6d3a6;z-index:0}
.campaign-halloween-moon:after{content:"";position:absolute;left:13px;top:10px;width:10px;height:10px;border-radius:50%;background:#efd9a8;box-shadow:17px 13px 0 4px #efd9a8,2px 27px 0 -1px #efd9a8}
.campaign-halloween-bat{position:absolute;top:23px;left:30px;width:38px;height:17px;z-index:2;background:#3d254a;clip-path:polygon(0 0,25% 23%,37% 3%,50% 35%,63% 3%,75% 23%,100% 0,88% 76%,68% 59%,50% 100%,32% 59%,12% 76%);transform:rotate(-10deg)}
.campaign-halloween-distant{left:auto;right:111px;top:47px;width:23px;height:11px;transform:rotate(14deg);opacity:.7}
.campaign-halloween-stars{position:absolute;left:48%;top:22px;width:4px;height:4px;background:#fff9e7;border-radius:50%;box-shadow:-55px 20px #fff9e7,28px 3px #fff9e7,49px 41px #fff9e7,-112px 61px #fff9e7,93px 76px #fff9e7,35px 95px #fff9e7;z-index:0}
.campaign-halloween-ground{position:absolute;bottom:17px;left:16px;right:16px;height:12px;border-radius:50%;background:#6a355c1c;z-index:1}
body[data-site-theme="halloween"] .hero,body[data-site-theme="halloween"] .event-hero{background:radial-gradient(ellipse at 90% 0,#573551 0,transparent 52%),linear-gradient(115deg,#21182f,#35233f);--campaign-background:#261936;--campaign-text:#fff7ea;--campaign-accent:#ffad47;--campaign-buttonText:#261936}
body[data-site-theme="halloween"] .hero .eyebrow{color:#ffd497}
body[data-site-theme="halloween"] .hero-photo>img{box-shadow:0 16px 45px #110b263d}
body[data-site-theme="halloween"] .campaign-motion-pause{color:#fff7ea;border-color:#e8cfd3;background:#ffffff08}
body[data-site-theme="halloween"] .campaign-motion-pause:hover{background:#ffffff15}
body[data-site-theme="halloween"] .hero .button.light{background:transparent;color:#fff7ea;border-color:#cab0bf}
body[data-site-theme="halloween"] .hero-photo figcaption{color:#efdee6}
.campaign-scene[data-motion-state="paused"] .campaign-actor,.campaign-scene[data-motion-state="paused"] .campaign-motion-accent,.campaign-scene[data-motion-state="paused"] .campaign-year-outgoing{animation-play-state:paused!important}
@keyframes campaign-ghost-journey{0%,100%{transform:translate(0,2px) rotate(-7deg)}18%{transform:translate(30px,-16px) rotate(4deg)}42%{transform:translate(76px,-5px) rotate(-4deg)}60%{transform:translate(89px,-25px) rotate(8deg)}78%{transform:translate(34px,-8px) rotate(-6deg)}}
@keyframes campaign-pumpkin-roll{0%,100%{transform:translate(0,0) rotate(0)}22%{transform:translate(-12px,-6px) rotate(-14deg)}46%{transform:translate(-30px,0) rotate(-24deg)}65%{transform:translate(-12px,-10px) rotate(-9deg)}82%{transform:translate(0,-3px) rotate(5deg)}}
/* The approved two-element ceiling also applies to the desktop scene: the taco
   and pumpkin move; the moon, bats and stars are a still composition. */
@media(max-width:760px){.campaign-scene{margin-top:20px;max-width:100%}.campaign-stage{min-height:156px}.campaign-stage .campaign-actor{width:120px;height:126px}.campaign-scene[data-motion-theme="halloween"] .campaign-stage{min-height:202px}.campaign-scene[data-motion-theme="halloween"] .campaign-stage .campaign-actor{width:138px;height:148px}.campaign-scene[data-motion-theme="halloween"] .campaign-motion-accent{right:22px;bottom:23px;width:54px;height:48px}.campaign-scene[data-motion-theme="halloween"] .campaign-motion-accent:before{left:22px}.campaign-scene[data-motion-theme="halloween"] .campaign-motion-accent:after{left:9px;top:13px}.campaign-motion-controls{align-items:center}.campaign-motion-label{max-width:175px}}
@media(max-width:380px){.campaign-scene[data-motion-theme="halloween"] .campaign-stage .campaign-actor{width:125px;height:138px}.campaign-scene[data-motion-theme="halloween"] .campaign-motion-accent{right:16px}.campaign-motion-label{max-width:155px}.campaign-motion-controls{gap:6px}.campaign-motion-pause{padding-inline:11px}}
@media(prefers-reduced-motion:reduce){.campaign-scene:not([data-motion-sample="true"]):not([data-motion-mode="automatic"]) .campaign-actor,.campaign-scene:not([data-motion-sample="true"]):not([data-motion-mode="automatic"]) .campaign-motion-accent{animation:none!important;transform:none!important;opacity:1}}


/* Owner-requested automatic mode keeps motion continuous, with a small, slow
   alternative on devices that prefer reduced movement. No public controls. */
.campaign-scene[data-motion-mode="automatic"] .campaign-motion-controls{display:none}
@keyframes campaign-reduced-sway{0%,100%{transform:translateY(3px) rotate(-1.2deg)}50%{transform:translateY(-8px) rotate(1.2deg)}}
@keyframes campaign-reduced-accent{0%,100%{transform:translateY(1px) rotate(-1deg)}50%{transform:translateY(-7px) rotate(1deg)}}
/* Keep the complete scene in the first view on a laptop's short viewport. */
@media(min-width:761px) and (max-height:760px){
 .hero{padding-block:24px 28px}
 .hero h1{font-size:52px;line-height:1.1}
 .hero .eyebrow{margin-bottom:10px}
 .hero-description{font-size:16px;line-height:1.6;margin-block:16px 18px}
 .hero .campaign-scene{margin-top:14px}
 .hero .campaign-stage{min-height:148px;padding:10px 16px}
 .hero .campaign-stage .campaign-actor{width:120px;height:126px}
 .hero .campaign-scene[data-motion-theme="halloween"] .campaign-stage{min-height:166px;padding:10px 16px}
 .hero .campaign-scene[data-motion-theme="halloween"] .campaign-stage .campaign-actor{width:120px;height:126px}
 .hero .campaign-scene[data-motion-theme="halloween"] .campaign-motion-accent{width:54px;height:48px;bottom:20px}
 .hero .campaign-halloween-moon{top:14px;width:44px;height:44px}
 .hero .campaign-halloween-distant{top:36px}
}
