/* ============================================================
EDIÇÃO DE NATAL — Clubinho Ambiente Animal
Camada 100% aditiva sobre css/style.css. Não duplica regras,
só sobrescreve variáveis de cor e acrescenta decoração.
Para remover a decoração depois do Natal:
1. Tire a tag .
Precisa ser classe, não style="" inline: o CSP do site (vercel.json,
style-src sem unsafe-inline) bloqueia o atributo style em produção e o
SVG volta ao tamanho padrão (300x150), empurrando o header pra baixo. */
.xmas-sprite-defs{position:absolute;width:0;height:0}
/* ---------- 1. Paleta ---------- */
:root{
--purple:#174D36; /* verde pinheiro (era #087b4c) */
--yellow:#D6AD55; /* dourado (era #ffc88d) */
--paper:#FFFCF6; /* branco neve levemente quente (era #fff) */
--lavender:#E9F3EC; /* verde suave (era #eef7f1) */
--xmas-red:#B32632;
--xmas-red-deep:#8f1e28;
}
.contact .eyebrow{color:var(--yellow)} /* era pêssego fixo #ffc88d */
.pill{background:var(--xmas-red);color:#fff}
.button.yellow:hover{background:#c89a43}
.button:hover{box-shadow:0 10px 26px rgba(179,38,50,.2)}
.service-grid article,.review-card{transition:border-color .2s,box-shadow .2s,transform .2s}
.service-grid article:hover,.review-card:hover{box-shadow:0 14px 30px rgba(23,77,54,.1);transform:translateY(-2px)}
/* ---------- 2. Logo nova: remove recortes feitos sob medida
pra logo antiga (a nova arte já vem com margem própria) ---------- */
.brand .official-logo{clip-path:none}
.history-logo-frame{clip-path:none;-webkit-mask-image:none;mask-image:none}
.history-logo{object-fit:contain}
.history-logo-mask{display:none}
/* ---------- 3. Neve caindo ---------- */
.xmas-snow{position:fixed;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.xmas-snow svg.flk{position:absolute;top:0;left:0;display:block;color:#fff;filter:drop-shadow(0 0 3px rgba(185,212,255,.8));opacity:0;animation-name:xmas-fall;animation-timing-function:linear;animation-iteration-count:infinite}
@keyframes xmas-fall{
0%{transform:translate3d(0,-10vh,0) rotate(0deg);opacity:0}
6%{opacity:var(--xmas-op,.7)}
94%{opacity:var(--xmas-op,.7)}
100%{transform:translate3d(var(--xmas-drift,16px),110vh,0) rotate(var(--xmas-spin,220deg));opacity:0}
}
.xmas-snow svg.flk:nth-child(1){left:3%;width:16px;height:16px;--xmas-drift:14px;--xmas-spin:200deg;--xmas-op:.55;animation-duration:19s;animation-delay:-2s}
.xmas-snow svg.flk:nth-child(2){left:9%;width:24px;height:24px;--xmas-drift:-10px;--xmas-spin:-240deg;--xmas-op:.7;animation-duration:23s;animation-delay:-14s}
.xmas-snow svg.flk:nth-child(3){left:15%;width:14px;height:14px;--xmas-drift:18px;--xmas-spin:260deg;--xmas-op:.5;animation-duration:16s;animation-delay:-6s}
.xmas-snow svg.flk:nth-child(4){left:21%;width:22px;height:22px;--xmas-drift:-16px;--xmas-spin:-200deg;--xmas-op:.75;animation-duration:25s;animation-delay:-9s}
.xmas-snow svg.flk:nth-child(5){left:28%;width:17px;height:17px;--xmas-drift:10px;--xmas-spin:230deg;--xmas-op:.6;animation-duration:18s;animation-delay:-3s}
.xmas-snow svg.flk:nth-child(6){left:35%;width:19px;height:19px;--xmas-drift:-14px;--xmas-spin:-220deg;--xmas-op:.65;animation-duration:21s;animation-delay:-17s}
.xmas-snow svg.flk:nth-child(7){left:41%;width:15px;height:15px;--xmas-drift:12px;--xmas-spin:210deg;--xmas-op:.5;animation-duration:15s;animation-delay:-5s}
.xmas-snow svg.flk:nth-child(8){left:48%;width:23px;height:23px;--xmas-drift:-18px;--xmas-spin:-260deg;--xmas-op:.75;animation-duration:27s;animation-delay:-11s}
.xmas-snow svg.flk:nth-child(9){left:55%;width:17px;height:17px;--xmas-drift:16px;--xmas-spin:240deg;--xmas-op:.55;animation-duration:19s;animation-delay:-8s}
.xmas-snow svg.flk:nth-child(10){left:61%;width:20px;height:20px;--xmas-drift:-11px;--xmas-spin:-210deg;--xmas-op:.7;animation-duration:22s;animation-delay:-19s}
.xmas-snow svg.flk:nth-child(11){left:67%;width:15px;height:15px;--xmas-drift:13px;--xmas-spin:220deg;--xmas-op:.5;animation-duration:17s;animation-delay:-4s}
.xmas-snow svg.flk:nth-child(12){left:73%;width:22px;height:22px;--xmas-drift:-15px;--xmas-spin:-230deg;--xmas-op:.75;animation-duration:26s;animation-delay:-13s}
.xmas-snow svg.flk:nth-child(13){left:79%;width:17px;height:17px;--xmas-drift:9px;--xmas-spin:250deg;--xmas-op:.6;animation-duration:18s;animation-delay:-7s}
.xmas-snow svg.flk:nth-child(14){left:85%;width:19px;height:19px;--xmas-drift:-13px;--xmas-spin:-200deg;--xmas-op:.65;animation-duration:20s;animation-delay:-16s}
.xmas-snow svg.flk:nth-child(15){left:91%;width:15px;height:15px;--xmas-drift:11px;--xmas-spin:210deg;--xmas-op:.5;animation-duration:16s;animation-delay:-10s}
.xmas-snow svg.flk:nth-child(16){left:96%;width:20px;height:20px;--xmas-drift:-17px;--xmas-spin:-250deg;--xmas-op:.7;animation-duration:24s;animation-delay:-1s}
.xmas-snow svg.flk:nth-child(17){left:12%;width:12px;height:12px;--xmas-drift:8px;--xmas-spin:190deg;--xmas-op:.4;animation-duration:14s;animation-delay:-12s}
.xmas-snow svg.flk:nth-child(18){left:88%;width:12px;height:12px;--xmas-drift:-9px;--xmas-spin:-190deg;--xmas-op:.4;animation-duration:15s;animation-delay:-18s}
/* menos flocos no mobile: ocupa menos atenção/CPU na tela pequena */
@media(max-width:760px){
.xmas-snow span:nth-child(n+11){display:none}
}
/* ---------- 4. Pisca-pisca de Natal no cabeçalho (fio + lâmpadas com brilho) ---------- */
.xmas-lights{position:absolute;left:0;right:0;bottom:-66px;width:100%;height:86px;pointer-events:none;z-index:1;overflow:visible}
/* cabo elétrico duplo (dois condutores pretos) */
.xmas-lights-wire-a,.xmas-lights-wire-b{fill:none;stroke:#141414;stroke-linecap:round}
.xmas-lights-wire-a{stroke-opacity:.8;stroke-width:1.4}
.xmas-lights-wire-b{stroke-opacity:.65;stroke-width:1.3}
.xmas-lights-bulb-stem{stroke:#141414;stroke-opacity:.75;stroke-width:1.3;stroke-linecap:round}
/* lâmpada física pequena: soquete + corpo de vidro (symbol #xmas-bulb-shape) + halo, com gradiente radial simulando vidro */
.xmas-bulb{filter:drop-shadow(0 1px 1.5px rgba(15,10,5,.3));animation-timing-function:ease-in-out;animation-iteration-count:infinite}
.xmas-bulb .halo{opacity:.42;filter:blur(2px)}
.xmas-bulb .body{opacity:1}
.xmas-bulb.red{fill:url(#xmas-glass-red)}
.xmas-bulb.green{fill:url(#xmas-glass-green)}
.xmas-bulb.gold{fill:url(#xmas-glass-gold)}
.xmas-bulb.white{fill:url(#xmas-glass-white)}
.xmas-bulb.steady{animation-name:xmas-bulb-steady}
.xmas-bulb.breathe{animation-name:xmas-bulb-breathe}
.xmas-bulb.flicker{animation-name:xmas-bulb-flicker}
/* durações/atrasos distintos por lâmpada pra ninguém piscar em sincronia */
.xmas-bulb:nth-of-type(1){animation-duration:6.2s;animation-delay:0s}
.xmas-bulb:nth-of-type(2){animation-duration:4.3s;animation-delay:.9s}
.xmas-bulb:nth-of-type(3){animation-duration:7.4s;animation-delay:1.6s}
.xmas-bulb:nth-of-type(4){animation-duration:5.6s;animation-delay:.3s}
.xmas-bulb:nth-of-type(5){animation-duration:8.1s;animation-delay:2.1s}
.xmas-bulb:nth-of-type(6){animation-duration:4.9s;animation-delay:.6s}
.xmas-bulb:nth-of-type(7){animation-duration:6.7s;animation-delay:1.2s}
.xmas-bulb:nth-of-type(8){animation-duration:7.9s;animation-delay:.1s}
.xmas-bulb:nth-of-type(9){animation-duration:5.3s;animation-delay:1.8s}
@keyframes xmas-bulb-steady{0%,100%{opacity:.88}50%{opacity:1}}
@keyframes xmas-bulb-breathe{0%,100%{opacity:.32}50%{opacity:1}}
@keyframes xmas-bulb-flicker{
0%,100%{opacity:1}
3%{opacity:.35}
6%{opacity:1}
47%{opacity:1}
50%{opacity:.5}
54%{opacity:1}
85%{opacity:1}
88%{opacity:.4}
91%{opacity:1}
}
@media(max-width:760px){.xmas-lights{bottom:-46px;height:60px}}
/* ---------- 5. Estrelinhas douradas cintilantes ---------- */
.xmas-star{position:absolute;width:14px;height:14px;pointer-events:none;z-index:2;background:var(--yellow);clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);animation:xmas-twinkle-star 3.2s ease-in-out infinite}
@keyframes xmas-twinkle-star{0%,100%{opacity:.25;transform:scale(.8) rotate(0deg)}50%{opacity:.95;transform:scale(1.05) rotate(8deg)}}
.xmas-star.hero-a{top:12%;right:8%;animation-delay:.2s}
.xmas-star.hero-b{bottom:18%;left:4%;width:10px;height:10px;animation-delay:1.6s}
.xmas-star.history-a{top:-6px;right:6%;animation-delay:.8s}
.xmas-star.plan-a{top:14px;left:14px;width:11px;height:11px;animation-delay:1.1s}
.xmas-star.contact-a{top:24px;right:10%;animation-delay:.4s}
.xmas-star.contact-b{bottom:20%;right:3%;width:10px;height:10px;animation-delay:2s}
/* âncoras de posicionamento pros elementos decorativos acima */
.hero-visual,.history-mark,.plan,.contact,.club-section,.about{position:relative}
/* ---------- 5b. Árvores de Natal enfeitadas e bengalas doces ---------- */
.xmas-deco{position:absolute;pointer-events:none;z-index:1;filter:drop-shadow(0 3px 4px rgba(0,0,0,.14))}
.xmas-deco.xmas-cane{filter:drop-shadow(0 3px 4px rgba(0,0,0,.22))}
.deco-about-cane{width:20px;height:36px;right:-6px;bottom:6px;transform:rotate(-12deg)}
.deco-contact-tree{width:34px;height:42px;left:2px;bottom:-6px;transform:rotate(-9deg)}
.deco-contact-cane{width:18px;height:32px;left:34px;bottom:-2px;transform:rotate(8deg)}
.deco-plan-tree{width:24px;height:30px;top:12px;left:12px;transform:rotate(-13deg)}
footer .footer-tree{width:24px;height:30px;flex-shrink:0;margin-left:12px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.14));transform:rotate(-10deg)}
.whatsapp-hat{position:absolute;top:-15px;left:50%;width:44px;height:34px;transform:translateX(-50%) rotate(-6deg);transform-origin:50% 85%;pointer-events:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
@media(max-width:760px){.xmas-deco{display:none}.whatsapp-hat{width:36px;height:28px;top:-12px}}
/* ---------- 6. Toques natalinos nos cards (sem cobrir fotos) ---------- */
.service-grid article,.review-card{position:relative}
.service-grid article::after,.review-card::after{
content:"";position:absolute;top:14px;right:14px;width:10px;height:10px;
background:var(--yellow);opacity:.55;pointer-events:none;
clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
/* laço de presente discreto no card do Clubinho do Pet */
.plan{overflow:hidden}
.plan::before{
content:"";position:absolute;top:0;right:0;width:84px;height:84px;
background:linear-gradient(135deg,transparent 50%,var(--xmas-red) 50.5%);
opacity:.9;pointer-events:none;
}
.plan::after{
content:"🎁";position:absolute;top:8px;right:8px;font-size:18px;line-height:1;
filter:drop-shadow(0 1px 1px rgba(0,0,0,.25));pointer-events:none;
}
/* ---------- 7. prefers-reduced-motion: desliga tudo que se move ---------- */
@media(prefers-reduced-motion:reduce){
.xmas-snow,.xmas-star{display:none}
.xmas-bulb{animation:none;opacity:.92}
.service-grid article,.review-card{transition:none}
}