/* ===== Tema de Natal ===== 
   Para tirar depois das festas: apague a linha <link ... natal.css> de cada index.html. */
:root{--nt-green:#1b5e3b;--nt-gold:#ffd166;--nt-red:#c8202b}

/* Guirlanda de pinheiro com bolas, mini ferramentas (furadeira e martelo) e pisca-pisca, caindo do cabeçalho */
.head::after,.head::before{content:"";position:absolute;left:0;right:0;top:100%;height:52px;pointer-events:none;background-repeat:repeat-x;background-size:240px 52px}
.head::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='52' viewBox='0 0 240 52'%3E%3Cpath d='M-2 5 Q120 42 242 5' fill='none' stroke='%232a7d52' stroke-width='10' stroke-dasharray='1.4 3.6'/%3E%3Cpath d='M-2 5 Q120 42 242 5' fill='none' stroke='%231b5e3b' stroke-width='4.5'/%3E%3Cpath d='M-2 4.4 Q120 40.5 242 4.4' fill='none' stroke='%2349b07c' stroke-width='1.4' stroke-dasharray='3 5'/%3E%3Cg stroke='%23c9a227' stroke-width='.9'%3E%3Cline x1='40' y1='13' x2='40' y2='19'/%3E%3Cline x1='80' y1='19' x2='80' y2='25'/%3E%3Cline x1='120' y1='21' x2='120' y2='26'/%3E%3Cline x1='160' y1='19' x2='160' y2='24'/%3E%3Cline x1='200' y1='13' x2='200' y2='19'/%3E%3C/g%3E%3Crect x='38' y='17.5' width='4' height='3' rx='1' fill='%23e8b923'/%3E%3Crect x='117.5' y='24.5' width='5' height='3' rx='1' fill='%23e8b923'/%3E%3Crect x='198' y='17.5' width='4' height='3' rx='1' fill='%23e8b923'/%3E%3Ccircle cx='40' cy='24.5' r='5' fill='%23c8202b'/%3E%3Ccircle cx='38.3' cy='22.8' r='1.5' fill='%23fff' opacity='.55'/%3E%3Ccircle cx='120' cy='33' r='6.5' fill='%23f0b429'/%3E%3Ccircle cx='117.8' cy='30.8' r='1.8' fill='%23fff' opacity='.6'/%3E%3Cpath d='M114 33.5 Q120 38 126 33.5' stroke='%23c58b0b' stroke-width='1' fill='none'/%3E%3Ccircle cx='200' cy='24.5' r='5' fill='%23ff6a00'/%3E%3Ccircle cx='198.3' cy='22.8' r='1.5' fill='%23fff' opacity='.55'/%3E%3Cg%3E%3Crect x='70.5' y='25' width='13' height='7' rx='2.2' fill='%233d434a'/%3E%3Crect x='68.8' y='26.2' width='2.2' height='4.6' rx='.8' fill='%23ff6a00'/%3E%3Crect x='83.2' y='26.4' width='3.6' height='4.2' rx='.8' fill='%239aa3ab'/%3E%3Cline x1='86.8' y1='28.5' x2='92.5' y2='28.5' stroke='%23c3cad1' stroke-width='1.1' stroke-linecap='round'/%3E%3Cpath d='M73 31.8 H78.6 L77.6 41.6 Q77.5 42.6 76.5 42.6 H73.8 Q72.8 42.6 72.8 41.6 Z' fill='%23ff6a00'/%3E%3Crect x='71.6' y='41' width='8.4' height='4' rx='1.2' fill='%232b3036'/%3E%3Crect x='78.4' y='32.8' width='1.6' height='2.6' rx=%22.6%22 fill='%231d2024'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M153.5 24 H165 Q166.6 24 166.6 26 V27.4 Q166.6 29.2 165 29.2 H153.5 Q153 29.2 153 28.6 V24.6 Q153 24 153.5 24 Z' fill='%236a737c'/%3E%3Cpath d='M153 24.8 Q149.5 25.8 148.5 29 Q151 27.6 153 28.4 Z' fill='%237b858f'/%3E%3Crect x='157.9' y='29' width='3.2' height='15' rx='1.3' fill='%23ff6a00'/%3E%3Crect x='157.9' y='40.6' width='3.2' height='1.1' fill='%23c94f00'/%3E%3C/g%3E%3Cg transform='translate(0 5) scale(.85)'%3E%3Cpath d='M0 0 Q-5 -5 -11 -1 Q-6 4 0 0 Z' fill='%232f8f5f'/%3E%3Cpath d='M0 0 Q5 -5 11 -1 Q6 4 0 0 Z' fill='%232f8f5f'/%3E%3Cpath d='M0 0 Q-4 6 -10 7 Q-5 1 0 0 Z' fill='%23236f48'/%3E%3Cpath d='M0 0 Q4 6 10 7 Q5 1 0 0 Z' fill='%23236f48'/%3E%3Ccircle cx='-1.8' cy='1.5' r='2' fill='%23d62839'/%3E%3Ccircle cx='1.8' cy='1.5' r='2' fill='%23d62839'/%3E%3Ccircle cx='0' cy='4' r='2' fill='%23d62839'/%3E%3C/g%3E%3Cg transform='translate(240 5) scale(.85)'%3E%3Cpath d='M0 0 Q-5 -5 -11 -1 Q-6 4 0 0 Z' fill='%232f8f5f'/%3E%3Cpath d='M0 0 Q5 -5 11 -1 Q6 4 0 0 Z' fill='%232f8f5f'/%3E%3Cpath d='M0 0 Q-4 6 -10 7 Q-5 1 0 0 Z' fill='%23236f48'/%3E%3Cpath d='M0 0 Q4 6 10 7 Q5 1 0 0 Z' fill='%23236f48'/%3E%3Ccircle cx='-1.8' cy='1.5' r='2' fill='%23d62839'/%3E%3Ccircle cx='1.8' cy='1.5' r='2' fill='%23d62839'/%3E%3Ccircle cx='0' cy='4' r='2' fill='%23d62839'/%3E%3C/g%3E%3C/svg%3E");z-index:2}
.head::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='52' viewBox='0 0 240 52'%3E%3Cg%3E%3Canimate attributeName='opacity' values='1%3B.15%3B1' keyTimes='0%3B.5%3B1' dur='0.7s' begin='0s' repeatCount='indefinite'/%3E%3Ccircle cx='20' cy='15' r='7.5' fill='%23ffd166' opacity='.45'/%3E%3Ccircle cx='20' cy='15' r='3' fill='%23ffd166'/%3E%3C/g%3E%3Cg%3E%3Canimate attributeName='opacity' values='1%3B.15%3B1' keyTimes='0%3B.5%3B1' dur='0.7s' begin='0.35s' repeatCount='indefinite'/%3E%3Ccircle cx='60' cy='24' r='7.5' fill='%23ff8a35' opacity='.45'/%3E%3Ccircle cx='60' cy='24' r='3' fill='%23ff8a35'/%3E%3C/g%3E%3Cg%3E%3Canimate attributeName='opacity' values='1%3B.15%3B1' keyTimes='0%3B.5%3B1' dur='0.7s' begin='0s' repeatCount='indefinite'/%3E%3Ccircle cx='100' cy='28' r='7.5' fill='%234aa3ff' opacity='.45'/%3E%3Ccircle cx='100' cy='28' r='3' fill='%234aa3ff'/%3E%3C/g%3E%3Cg%3E%3Canimate attributeName='opacity' values='1%3B.15%3B1' keyTimes='0%3B.5%3B1' dur='0.7s' begin='0.35s' repeatCount='indefinite'/%3E%3Ccircle cx='140' cy='28' r='7.5' fill='%23ff5d6c' opacity='.45'/%3E%3Ccircle cx='140' cy='28' r='3' fill='%23ff5d6c'/%3E%3C/g%3E%3Cg%3E%3Canimate attributeName='opacity' values='1%3B.15%3B1' keyTimes='0%3B.5%3B1' dur='0.7s' begin='0s' repeatCount='indefinite'/%3E%3Ccircle cx='180' cy='24' r='7.5' fill='%23ffd166' opacity='.45'/%3E%3Ccircle cx='180' cy='24' r='3' fill='%23ffd166'/%3E%3C/g%3E%3Cg%3E%3Canimate attributeName='opacity' values='1%3B.15%3B1' keyTimes='0%3B.5%3B1' dur='0.7s' begin='0.35s' repeatCount='indefinite'/%3E%3Ccircle cx='220' cy='15' r='7.5' fill='%234aa3ff' opacity='.45'/%3E%3Ccircle cx='220' cy='15' r='3' fill='%234aa3ff'/%3E%3C/g%3E%3C/svg%3E");z-index:3}
.crumb{padding-top:42px!important}

/* Selo de desconto em fita vermelha com recorte */
.flag{background:linear-gradient(#d92b38,#a81822)!important;color:#fff!important;padding:4px 18px 4px 10px!important;border-radius:3px 0 0 3px!important;
  clip-path:polygon(0 0,100% 0,calc(100% - 8px) 50%,100% 100%,0 100%);box-shadow:0 2px 6px rgba(0,0,0,.25)}

/* Neve em duas camadas (uma mais lenta e miúda, outra mais rápida e maior) */
body::before,body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:4}
body::before{background-image:
  radial-gradient(2px 2px at 30px 50px,#fff 0,#fff 42%,rgba(150,185,220,.6) 68%,transparent 100%),radial-gradient(3px 3px at 170px 120px,#fff 0,#fff 42%,rgba(150,185,220,.6) 68%,transparent 100%),
  radial-gradient(2px 2px at 90px 210px,#fff 0,#fff 42%,rgba(150,185,220,.6) 68%,transparent 100%),radial-gradient(3px 3px at 240px 260px,#fff 0,#fff 42%,rgba(150,185,220,.6) 68%,transparent 100%);
  background-size:280px 320px,360px 400px,300px 340px,420px 460px;animation:nt-snow1 30s linear infinite}
body::after{background-image:
  radial-gradient(4px 4px at 60px 80px,#fff 0,#fff 42%,rgba(150,185,220,.6) 68%,transparent 100%),radial-gradient(5px 5px at 220px 190px,#fff 0,#fff 42%,rgba(150,185,220,.6) 68%,transparent 100%),radial-gradient(4px 4px at 140px 300px,#fff 0,#fff 42%,rgba(150,185,220,.6) 68%,transparent 100%);
  background-size:380px 420px,520px 560px,460px 500px;animation:nt-snow2 18s linear infinite}
@keyframes nt-snow1{from{background-position:0 0,0 0,0 0,0 0}to{background-position:40px 320px,-50px 400px,30px 340px,-60px 460px}}
@keyframes nt-snow2{from{background-position:0 0,0 0,0 0}to{background-position:-70px 420px,60px 560px,-40px 500px}}

/* Monte de neve em cima do rodapé + mensagem de festas */
footer{position:relative}
footer::before{content:"";position:absolute;left:0;right:0;top:-21px;height:22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='22' viewBox='0 0 140 22'%3E%3Cpath d='M0 22 V13 Q12 3 26 11 Q40 18 54 9 Q70 0 84 10 Q98 18 112 9 Q126 2 140 12 V22 Z' fill='%23fff' stroke='%23dfe8f0' stroke-width='1'/%3E%3C/svg%3E") repeat-x bottom/140px 22px;pointer-events:none}
footer .wrap::after{content:"Boas festas e ótimas compras! \1F384";display:block;margin-top:14px;color:var(--nt-gold);font-weight:700;font-size:.95rem}

/* Home: destaque natalino no topo e neve sobre os cards */
.intro{position:relative;max-width:none!important;margin:48px 0 18px;padding:36px 190px 36px 34px!important;border-radius:10px;color:#fff;overflow:hidden;
  background:radial-gradient(circle at 20% 30%,rgba(255,255,255,.14) 0 1.5px,transparent 2px) 0 0/46px 46px,
             radial-gradient(circle at 70% 70%,rgba(255,255,255,.1) 0 1.5px,transparent 2px) 0 0/60px 60px,
             linear-gradient(135deg,#0d4a31,#1b6b47);border:1px solid #c9a227}
.intro h1{max-width:640px;color:#fff}
.intro p{max-width:560px;color:#d6efe2!important}
.intro::after{content:"";position:absolute;right:34px;bottom:0;width:140px;height:170px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='170' viewBox='0 0 140 170'%3E%3Cpolygon points='70,2 74,12 85,12 76,19 79,30 70,23 61,30 64,19 55,12 66,12' fill='%23ffd166'/%3E%3Cpolygon points='70,18 40,64 100,64' fill='%233a9a68'/%3E%3Cpolygon points='70,42 28,100 112,100' fill='%232e8559'/%3E%3Cpolygon points='70,72 14,142 126,142' fill='%23236f48'/%3E%3Crect x='60' y='142' width='20' height='20' rx='2' fill='%237a4d2a'/%3E%3Ccircle cx='60' cy='58' r='4.5' fill='%23e63946'/%3E%3Ccircle cx='80' cy='88' r='5' fill='%23ff6a00'/%3E%3Ccircle cx='52' cy='92' r='4' fill='%23ffd166'/%3E%3Ccircle cx='42' cy='126' r='5' fill='%23ffd166'/%3E%3Ccircle cx='98' cy='124' r='4.5' fill='%23e63946'/%3E%3Ccircle cx='70' cy='112' r='4.5' fill='%234aa3ff'/%3E%3Ccircle cx='64' cy='134' r='3.5' fill='%23ff6a00'/%3E%3Cpath d='M44 70 Q70 82 94 66' fill='none' stroke='%23ffd166' stroke-width='1.6' stroke-dasharray='2 4'/%3E%3Cpath d='M30 112 Q70 126 110 108' fill='none' stroke='%23ffd166' stroke-width='1.6' stroke-dasharray='2 4'/%3E%3C/svg%3E") no-repeat bottom/contain}
.item{position:relative}
.item::before{content:"";position:absolute;top:0;left:0;right:0;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='16' viewBox='0 0 90 16'%3E%3Cpath d='M0 0 H90 V5 Q82 14 72 7 Q64 2 54 9 Q46 15 36 8 Q26 2 18 9 Q9 15 0 6 Z' fill='%23fff' stroke='%23cfdceb' stroke-width='1'/%3E%3C/svg%3E") repeat-x top/90px 16px;z-index:3;pointer-events:none}

@media(max-width:760px){
  .intro{padding:26px 100px 26px 20px!important}
  .intro::after{width:84px;height:102px;right:14px}
  .crumb{padding-top:40px!important}
}
@media(max-width:480px){
  .intro{padding-right:20px!important}
  .intro::after{display:none}
}
@media(prefers-reduced-motion:reduce){
  body::before,body::after{display:none}
  .head::before{display:none}
}