/* Cores do logo oficial: preto #000000, branco #FFFFFF, amarelo #FEFE22. Tema claro por padrão; escuro só pelo botão. */
:root{
  --marca:#000; --destaque:#fefe22; --destaque-esc:#e6e61a;
  --texto:#1d2027; --suave:#565b66; --fundo:#fff; --claro:#f5f4f0; --borda:#e4e2dc; --card:#fff; --foto:#f0efe9;
  --display:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --corpo:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
:root[data-tema="escuro"]{
  --texto:#ececec; --suave:#a9adb6; --fundo:#111214; --claro:#18191c; --borda:#2c2e33; --card:#1c1d21; --foto:#26272c;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--corpo);color:var(--texto);background:var(--fundo);line-height:1.6;font-size:17px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1140px;margin:0 auto;padding-inline:20px}
h1,h2,h3{font-family:var(--display);line-height:1.15;text-wrap:balance}
:focus-visible{outline:3px solid var(--destaque);outline-offset:2px;box-shadow:0 0 0 5px #000}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 24px;border-radius:6px;font-weight:700;font-family:var(--display);font-size:.95rem;border:0;cursor:pointer;transition:background .2s}
.btn-destaque{background:var(--destaque);color:#000}
.btn-destaque:hover{background:var(--destaque-esc)}
.btn-escuro{background:#000;color:#fff}
.btn-linha{border:2px solid var(--texto);color:var(--texto);background:transparent}
.pend{font-size:.8rem;font-weight:700;background:#fffbb0;color:#5f5f00;padding:1px 7px;border-radius:4px}

header{position:sticky;top:0;z-index:10;background:#000;color:#fff;border-bottom:3px solid var(--destaque)}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px;gap:16px}
.logo img{height:44px;width:auto}
nav ul{display:flex;gap:26px;list-style:none;font-size:.95rem}
nav ul a{color:#d7d9de}
nav ul a:hover,nav ul a[aria-current="page"]{color:var(--destaque)}
.tema{background:rgba(255,255,255,.08);border:1px solid #3a3b40;color:#fff;border-radius:10px;width:40px;height:40px;padding:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.tema:hover{border-color:var(--destaque)}
.tema svg{width:19px;height:19px}
.tema .ic-sol{display:none;color:var(--destaque)}
.tema .ic-lua{display:block;color:#cdd3e0}
:root[data-tema="escuro"] .tema .ic-sol{display:block}
:root[data-tema="escuro"] .tema .ic-lua{display:none}
#banner-alt .ic-ban-i{display:none;color:var(--destaque)}
#banner-alt .ic-ban-f{display:block;color:#cdd3e0}
:root[data-banner="fotos"] #banner-alt .ic-ban-i{display:block}
:root[data-banner="fotos"] #banner-alt .ic-ban-f{display:none}
.dir{display:flex;gap:10px;align-items:center}
.menu-cel{display:none;position:relative}
.menu-cel summary{list-style:none;cursor:pointer;font-family:var(--display);font-weight:700;border:1px solid #555;border-radius:6px;padding:8px 14px}
.menu-cel summary::-webkit-details-marker{display:none}
.menu-cel ul{position:absolute;right:0;top:48px;background:#000;border:1px solid #333;border-radius:8px;padding:10px 0;list-style:none;min-width:200px}
.menu-cel li a{display:block;padding:10px 18px;color:#e4e4e4}

.hero{background:var(--claro);padding-block:80px 90px;border-bottom:1px solid var(--borda)}
.hero .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:300;letter-spacing:-.01em}
.hero h1 b{font-weight:800;background:linear-gradient(transparent 62%,var(--destaque) 62%)}
.hero p{color:var(--suave);font-size:1.15rem;margin:20px 0 32px;max-width:520px}
.acoes{display:flex;flex-wrap:wrap;gap:12px}
.brilho{aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#ffffe0 0%,var(--destaque) 24%,rgba(254,254,34,.25) 50%,transparent 70%);display:grid;place-items:center}
.brilho svg{width:42%;height:auto;stroke:#000}
.topo{background:var(--claro);border-bottom:1px solid var(--borda);padding-block:44px}
.topo h1{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:300}
.topo h1 b{font-weight:800}
.topo p{color:var(--suave);margin-top:8px;max-width:680px}
.mig{font-size:.9rem;color:var(--suave);margin-bottom:10px}
.mig a{text-decoration:underline}

section{padding-block:72px}
.claro{background:var(--claro)}
.titulo{max-width:680px;margin-bottom:32px}
.titulo small{font-family:var(--display);font-weight:700;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--suave)}
.titulo h2{font-size:clamp(1.6rem,3.2vw,2.3rem);margin:8px 0 10px}
.titulo p{color:var(--suave)}

.divisoes{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.divisao{background:var(--card);border:1px solid var(--borda);border-top:5px solid var(--destaque);border-radius:10px;padding:26px}
.divisao h3{font-size:1.3rem;margin-bottom:6px}
.divisao p{color:var(--suave);margin-bottom:14px}
.cats{display:flex;flex-wrap:wrap;gap:8px}
.cats a{border:1px solid var(--borda);border-radius:999px;padding:6px 14px;font-size:.9rem;font-weight:600;background:var(--fundo)}
.cats a:hover{border-color:var(--texto)}
.cats small{color:var(--suave);font-weight:400}

.busca{display:flex;gap:10px;margin-bottom:26px}
.busca input{flex:1;font:inherit;padding:12px 14px;border:1px solid var(--borda);border-radius:6px;background:var(--card);color:var(--texto)}
.grade{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.produto{background:var(--card);border:1px solid var(--borda);border-radius:10px;overflow:hidden;display:grid;grid-template-rows:auto 1fr}
.produto .foto{aspect-ratio:4/3;background:var(--foto);display:grid;place-items:center}
.produto .foto img{width:100%;height:100%;object-fit:contain}
.produto .foto svg{width:30%;stroke:var(--suave);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.produto .txt{padding:16px 18px 18px;display:grid;gap:6px;align-content:start}
.produto h3{font-size:1.02rem}
.produto p{color:var(--suave);font-size:.92rem}
.produto .cod{font-size:.78rem;color:var(--suave);letter-spacing:.04em}
.produto .btn{margin-top:8px;padding:10px 14px;font-size:.88rem}
.vazio{padding:30px;text-align:center;color:var(--suave)}

.mvv{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.mvv article{background:var(--card);border:1px solid var(--borda);border-radius:10px;padding:24px}
.mvv h3{font-size:1.1rem;margin-bottom:8px}
.mvv h3::before{content:"";display:block;width:34px;height:4px;background:var(--destaque);margin-bottom:12px;border-radius:2px}
.mvv p{color:var(--suave)}

.dados{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.dado{border-top:3px solid var(--destaque);padding-top:10px}
.dado small{display:block;font-family:var(--display);font-weight:700;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--suave)}
.cta{background:var(--destaque);color:#000;border-radius:16px;padding:36px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-top:32px}
.cta h2{font-size:clamp(1.3rem,2.6vw,1.9rem);max-width:560px}

.historia{max-width:720px;display:grid;gap:16px;font-size:1.08rem;margin-bottom:18px}
.politica{max-width:760px}
.politica h2{font-size:1.3rem;margin:28px 0 8px}
.politica ul{padding-left:20px;display:grid;gap:4px;margin-top:6px}
.aviso{background:#fffde0;color:#1d2027;border-left:4px solid var(--destaque-esc);padding:14px 18px;border-radius:0 8px 8px 0;font-size:.94rem}

footer{background:#000;color:#9a9ea7;padding-block:44px;font-size:.92rem}
.rodape{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:28px}
footer .logo img{height:36px}
footer h3{color:#fff;font-size:.9rem;margin-bottom:10px;letter-spacing:.06em;text-transform:uppercase}
footer ul{list-style:none;display:grid;gap:6px}
footer a:hover{color:var(--destaque)}
.copy{border-top:1px solid #1f1f1f;margin-top:32px;padding-top:18px;font-size:.84rem}

.zap{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));height:58px;padding-inline:20px 22px;border-radius:29px;background:#25d366;color:#fff;border:0;cursor:pointer;display:flex;align-items:center;gap:10px;font:700 .95rem var(--display);box-shadow:0 8px 22px rgba(0,0,0,.25);z-index:20}
.zap svg{width:28px;height:28px;fill:#fff}
dialog{margin:auto;border:0;border-radius:14px;padding:26px;width:min(420px,92vw);background:var(--card);color:var(--texto)}
dialog::backdrop{background:rgba(0,0,0,.55)}
dialog h2{font-size:1.2rem;margin-bottom:6px}
dialog p{color:var(--suave);font-size:.95rem;margin-bottom:14px}
dialog .lista{display:grid;gap:10px}
dialog .lista a{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#25d366;color:#fff;font-weight:700;padding:13px 16px;border-radius:8px}
dialog .lista a[aria-disabled="true"]{background:var(--foto);color:var(--suave)}
dialog .fechar{margin-top:14px;background:none;border:0;color:var(--suave);cursor:pointer;font:inherit;text-decoration:underline}

@media (max-width:980px){
  nav.principal{display:none}
  .menu-cel{display:block}
  .grade{grid-template-columns:repeat(2,1fr)}
  .hero .wrap,.rodape,.divisoes,.mvv{grid-template-columns:1fr}
  .dados{grid-template-columns:1fr 1fr}
  .brilho{width:220px;margin:0 auto}
}
@media (max-width:600px){
  .grade{grid-template-columns:1fr}
  section{padding-block:52px}
  .hero{padding-block:52px 60px}
  .dados{grid-template-columns:1fr}
  .zap span{display:none}.zap{padding:0;width:58px;justify-content:center}
}

/* ================= Visual "iluminado" (efeitos) ================= */
:root{--brilho:rgba(254,254,34,.55);--brilho-suave:rgba(254,254,34,.18);--linha:rgba(0,0,0,.06)}
:root[data-tema="escuro"]{--brilho:rgba(254,254,34,.7);--brilho-suave:rgba(254,254,34,.14);--linha:rgba(254,254,34,.07)}
html{scroll-behavior:smooth}
body{background-image:radial-gradient(circle at 1px 1px,var(--linha) 1px,transparent 0);background-size:26px 26px}

/* cabeçalho de vidro com fio de luz */
header{background:#000;border-bottom:0;position:sticky}
header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,transparent,var(--destaque),#fff,var(--destaque),transparent);background-size:200% 100%;animation:fio 4s linear infinite;box-shadow:0 0 14px var(--brilho)}
@keyframes fio{to{background-position:-200% 0}}
.logo img{transition:filter .3s}
.logo:hover img{filter:drop-shadow(0 0 8px var(--destaque))}
nav ul a{position:relative;padding-block:6px}
nav ul a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--destaque);box-shadow:0 0 8px var(--destaque);transform:scaleX(0);transform-origin:left;transition:transform .3s}
nav ul a:hover::after,nav ul a[aria-current="page"]::after{transform:scaleX(1)}

/* hero */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(600px circle at var(--mx,72%) var(--my,40%),var(--brilho-suave),transparent 60%),var(--claro)}
:root[data-tema="escuro"] .hero{background:radial-gradient(600px circle at var(--mx,72%) var(--my,40%),rgba(254,254,34,.16),transparent 60%),#0b0c0e}
.hero .wrap,.topo .wrap{position:relative;z-index:1}
.grade-fundo{position:absolute;inset:0;background-image:linear-gradient(var(--linha) 1px,transparent 1px),linear-gradient(90deg,var(--linha) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse at 70% 40%,#000 10%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at 70% 40%,#000 10%,transparent 70%);animation:grade 22s linear infinite}
@keyframes grade{to{background-position:48px 48px,48px 48px}}
/* hero alternativo: fotos da cidade em crossfade, no lugar da ilustração (botão discreto no cabeçalho) */
.hero-fotos{display:none;position:absolute;inset:0;z-index:0}
:root[data-banner="fotos"] .hero-fotos{display:block}
:root[data-banner="fotos"] .hero{min-height:64vh}
:root[data-banner="fotos"] .hero>.wrap,:root[data-banner="fotos"] .hero>.grade-fundo{display:none}
.hero-fotos::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.3))}
.hero-fotos .hf{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:hf-cross 16s infinite}
.hero-fotos .hf-b{animation-delay:8s}
@keyframes hf-cross{0%,4%{opacity:0}10%,44%{opacity:1}50%,100%{opacity:0}}
@media (max-width:980px){:root[data-banner="fotos"] .hero{min-height:46vh}}
@media (prefers-reduced-motion:reduce){.hero-fotos .hf{animation:none;opacity:0}.hero-fotos .hf-a{opacity:1}}
.etiqueta{display:inline-flex;align-items:center;gap:8px;font:700 .78rem var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--suave);margin:0 0 14px !important}
.etiqueta::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--destaque);box-shadow:0 0 0 0 var(--destaque);animation:ponto 2s infinite}
@keyframes ponto{70%{box-shadow:0 0 0 12px rgba(254,254,34,0)}100%{box-shadow:0 0 0 0 rgba(254,254,34,0)}}
.hero h1{font-size:clamp(2.4rem,5.6vw,4.2rem)}
.hero h1 b.brilhante{background:none;color:transparent;background-image:linear-gradient(100deg,#000 0%,#000 35%,#b9b900 48%,#fefe22 52%,#000 65%,#000 100%);-webkit-background-clip:text;background-clip:text;background-size:250% 100%;animation:varredura 5s ease-in-out infinite}
:root[data-tema="escuro"] .hero h1 b.brilhante{background-image:linear-gradient(100deg,#fefe22 0%,#fefe22 35%,#fff 50%,#fefe22 65%,#fefe22 100%);text-shadow:0 0 30px rgba(254,254,34,.4)}
@keyframes varredura{0%,15%{background-position:100% 0}85%,100%{background-position:0 0}}

/* cena da lâmpada */
.cena{position:relative;aspect-ratio:1;max-width:460px;width:100%;margin-inline:auto;display:grid;place-items:center}
.halo{position:absolute;inset:6%;border-radius:50%;background:radial-gradient(circle,#ffffe6 0%,var(--destaque) 26%,rgba(254,254,34,.28) 52%,transparent 72%);filter:blur(4px);animation:acende 2.4s .3s both,pulsa 4s 2.7s ease-in-out infinite}
.anel{position:absolute;border-radius:50%;border:1.5px solid var(--brilho);inset:14%}
.a1{animation:onda 4s 1s ease-out infinite}.a2{animation:onda 4s 3s ease-out infinite}
@keyframes onda{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.lampada{position:relative;width:46%;height:auto;overflow:visible;filter:drop-shadow(0 0 22px rgba(254,254,34,.9));animation:flutua 6s ease-in-out infinite}
.lampada .filamento{animation:filamento 2.4s .3s both}
@keyframes acende{0%{opacity:0;transform:scale(.7)}12%{opacity:.9}18%{opacity:.15}30%{opacity:1}38%{opacity:.3}52%{opacity:1}60%{opacity:.6}100%{opacity:1;transform:scale(1)}}
@keyframes pulsa{50%{transform:scale(1.07);opacity:.88}}
@keyframes flutua{50%{transform:translateY(-10px)}}
@keyframes filamento{0%,15%{stroke:#555}30%{stroke:#000}100%{stroke:#000}}
:root[data-tema="escuro"] .lampada path{stroke:#fff}
.fagulha{position:absolute;left:var(--x);bottom:8%;width:var(--t);height:var(--t);border-radius:50%;background:var(--destaque);box-shadow:0 0 12px 3px var(--destaque);opacity:0;animation:sobe var(--d) var(--a) ease-in infinite}
@keyframes sobe{0%{transform:translateY(0) scale(1);opacity:0}15%{opacity:1}100%{transform:translateY(-320px) translateX(20px) scale(.2);opacity:0}}

/* interruptor: clicar na lâmpada da Home apaga e acende */
.cena{cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:50%}
.cena:focus-visible{outline-offset:-10px}
.cena .halo,.cena .anel,.cena .fagulha{transition:opacity .35s}
.cena.apagada .halo,.cena.apagada .anel,.cena.apagada .fagulha{opacity:0 !important}
.cena.apagada .lampada{filter:none}
/* lâmpada apagada: some também o brilho amarelo do fundo do topo */
.hero:has(.cena.apagada){background:var(--claro)}
:root[data-tema="escuro"] .hero:has(.cena.apagada){background:#0b0c0e}
.cena.apagada .lampada .vidro{fill:var(--foto)}
.cena.apagada .lampada .filamento{stroke:#8a8a8a !important;filter:none}
.cena.religa .halo{animation:acende 1.1s both,pulsa 4s 1.1s ease-in-out infinite}
.cena.religa .lampada .filamento{animation:filamento 1.1s both}
.onda-luz{position:absolute;left:50%;top:42%;width:40%;aspect-ratio:1;margin:-20% 0 0 -20%;border-radius:50%;border:3px solid var(--destaque);box-shadow:0 0 30px var(--destaque),inset 0 0 30px var(--brilho);pointer-events:none;animation:ondaLuz .9s ease-out forwards}
@keyframes ondaLuz{from{transform:scale(.3);opacity:1}to{transform:scale(3.2);opacity:0}}
.dica-cena{position:absolute;bottom:0;left:50%;transform:translateX(-50%);white-space:nowrap;font:700 .7rem var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--texto);background:var(--card);border:1px solid var(--borda);border-radius:999px;padding:6px 14px;box-shadow:0 4px 14px rgba(0,0,0,.12);animation:dica 2.6s ease-in-out infinite;transition:opacity .4s}
.cena.usada .dica-cena{opacity:0}
@keyframes dica{50%{transform:translateX(-50%) translateY(-5px)}}

/* varal de lâmpadas (Home): cada lâmpada é uma categoria */
:root{--fio-cor:#2b2d33}
:root[data-tema="escuro"]{--fio-cor:#5b5e66}
.varal-sec{padding-bottom:10px}
.varal-wrap{position:relative;margin-top:30px}
.fio-varal{position:absolute;left:-2%;top:0;width:104%;height:46px;overflow:visible;pointer-events:none}
.fio-varal path{fill:none;stroke:var(--fio-cor);stroke-width:2.2;vector-effect:non-scaling-stroke;stroke-linecap:round}
.varal{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px 6px}
.luzinha{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0;padding-top:var(--sag,0px)}
.pendulo{display:flex;flex-direction:column;align-items:center;transform-origin:50% 0;will-change:transform}
.cordao{width:2px;height:var(--fio,40px);background:var(--fio-cor)}
.bulbo{position:relative;isolation:isolate;background:none;border:0;padding:0;margin-top:-2px;cursor:pointer;width:52px;border-radius:40% 40% 50% 50%;-webkit-tap-highlight-color:transparent}
.bulbo svg{display:block;width:100%;overflow:visible}
.bulbo .vidro{fill:var(--card);stroke:var(--suave);stroke-width:2;transition:fill .25s,stroke .25s}
.bulbo .fil{fill:none;stroke:var(--suave);stroke-width:1.8;stroke-linecap:round;transition:stroke .25s}
.bulbo .base{fill:none;stroke:var(--fio-cor);stroke-width:3.2;stroke-linecap:round}
.bulbo::after{content:"";position:absolute;left:50%;top:62%;width:170%;aspect-ratio:1;transform:translate(-50%,-50%) scale(.4);border-radius:50%;background:radial-gradient(circle,rgba(254,254,34,.75),rgba(254,254,34,.18) 45%,transparent 70%);opacity:0;pointer-events:none;transition:opacity .35s,transform .35s;z-index:-1}
.luzinha.acesa .bulbo .vidro{fill:#fefe22;stroke:#c9b800}
.luzinha.acesa .bulbo .fil{stroke:#fff}
.luzinha.acesa .bulbo svg{filter:drop-shadow(0 0 10px #fefe22) drop-shadow(0 0 22px rgba(254,254,34,.55));animation:piscaMini .55s both}
.luzinha.acesa .bulbo::after{opacity:1;transform:translate(-50%,-50%) scale(1)}
/* o balanço (gravidade, vento do mouse, fio que treme) é calculado no app.js */
.luzinha.indo .bulbo svg{animation:piscaMini .55s both}
@keyframes piscaMini{0%{opacity:.3}25%{opacity:1}40%{opacity:.45}60%{opacity:1}100%{opacity:1}}
.rotulo{margin-top:12px;font:700 .72rem var(--display);line-height:1.25;text-align:center;color:var(--suave);overflow-wrap:anywhere;transition:color .25s}
.rotulo:hover{text-decoration:underline}
.luzinha.acesa .rotulo{color:var(--texto);text-decoration:underline;text-decoration-color:var(--destaque);text-decoration-thickness:3px;text-underline-offset:4px}
.varal-status{margin-top:22px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;color:var(--suave);font-size:.92rem}
.varal-status b{color:var(--texto);font-variant-numeric:tabular-nums}
.varal-reset{background:none;border:1px solid var(--borda);border-radius:6px;padding:5px 12px;font:700 .8rem var(--display);color:var(--texto);cursor:pointer}
.varal-reset:hover{border-color:var(--destaque)}
.varal-sec.tudo-aceso .varal-msg{color:var(--texto);font-weight:700}
@media (max-width:1100px) and (min-width:761px){.bulbo{width:44px}}
@media (max-width:760px){
  .fio-varal{display:none}
  .varal{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:26px}
  .luzinha{padding-top:0}
  .luzinha::before{content:"";position:absolute;top:0;left:-4px;right:-4px;border-top:2px solid var(--fio-cor)}
  .bulbo{width:46px}
}

/* faíscas do clique */
.faisca{position:fixed;left:0;top:0;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#fefe22;box-shadow:0 0 8px 2px rgba(254,254,34,.9);pointer-events:none;z-index:40;animation:faisca .7s cubic-bezier(.15,.7,.3,1) forwards}
@keyframes faisca{from{transform:translate(var(--x0),var(--y0)) scale(1);opacity:1}to{transform:translate(calc(var(--x0) + var(--dx)),calc(var(--y0) + var(--dy))) scale(.2);opacity:0}}

/* faixa de categorias */
.faixa{background:#000;overflow:hidden;border-block:2px solid var(--destaque);box-shadow:0 0 30px rgba(254,254,34,.25)}
.trilho{display:flex;width:max-content;animation:corre 38s linear infinite}
.faixa span{color:var(--destaque);font:800 .95rem var(--display);letter-spacing:.2em;padding:14px 34px;white-space:nowrap}
.faixa span::after{content:"⚡";margin-left:68px;color:#fff;font-size:.8rem}
@keyframes corre{to{transform:translateX(-50%)}}

/* raio entre seções */
.raio{height:3px;background:linear-gradient(90deg,transparent,var(--destaque),#fff,var(--destaque),transparent);background-size:220% 100%;animation:fio 3s linear infinite;box-shadow:0 0 18px var(--brilho)}

/* revelar ao rolar (só com JS) */
.js .rev{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--atraso,0s)}
.js .rev.vis{opacity:1;transform:none}

/* cartões que acendem sob o cursor */
.brilha{position:relative;isolation:isolate;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s}
.brilha::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;background:radial-gradient(260px circle at var(--px,50%) var(--py,50%),var(--brilho),transparent 65%);opacity:0;transition:opacity .3s}
.brilha::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1.5px;background:radial-gradient(220px circle at var(--px,50%) var(--py,50%),var(--destaque),transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s}
.brilha:hover{transform:translateY(-6px);box-shadow:0 18px 40px -12px rgba(0,0,0,.25),0 0 30px -6px var(--brilho)}
.brilha:hover::before{opacity:.35}.brilha:hover::after{opacity:1}
.produto .foto svg{transition:transform .5s,stroke .3s}
.produto:hover .foto svg{transform:scale(1.15) rotate(-4deg);stroke:#b9b900}
.produto .foto img{transition:transform .5s}.produto:hover .foto img{transform:scale(1.06)}
.mvv h3::before{box-shadow:0 0 12px var(--destaque);animation:fio 3s linear infinite;background:linear-gradient(90deg,var(--destaque),#fff,var(--destaque));background-size:200% 100%}

/* botões */
.btn{position:relative;overflow:hidden;transition:transform .2s,box-shadow .3s,background .2s}
.btn::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-20deg);transition:left .6s}
.btn:hover::after{left:130%}
.btn:hover{transform:translateY(-2px)}
.btn-destaque{box-shadow:0 0 0 0 var(--destaque),0 6px 18px -6px rgba(0,0,0,.4);animation:pulsaBtn 3s 2s infinite}
.btn-destaque:hover{box-shadow:0 0 28px 4px var(--brilho)}
@keyframes pulsaBtn{50%{box-shadow:0 0 22px 2px var(--brilho),0 6px 18px -6px rgba(0,0,0,.4)}}
.btn-linha:hover{border-color:var(--destaque);box-shadow:0 0 20px -2px var(--brilho)}
.cta{position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:-50%;background:conic-gradient(from 0deg,transparent 0 70%,rgba(255,255,255,.7) 80%,transparent 90%);animation:gira 6s linear infinite}
.cta>*{position:relative}
.cta::after{content:"";position:absolute;inset:3px;border-radius:13px;background:var(--destaque);z-index:0}
.cta>*{z-index:1}
@keyframes gira{to{transform:rotate(360deg)}}

/* WhatsApp flutuante */
.zap{animation:zap 2.8s infinite}
@keyframes zap{0%{box-shadow:0 8px 22px rgba(0,0,0,.25),0 0 0 0 rgba(37,211,102,.6)}70%{box-shadow:0 8px 22px rgba(0,0,0,.25),0 0 0 18px rgba(37,211,102,0)}100%{box-shadow:0 8px 22px rgba(0,0,0,.25),0 0 0 0 rgba(37,211,102,0)}}

/* topo das páginas internas */
.topo{position:relative;overflow:hidden}
.topo h1 b{background:linear-gradient(transparent 62%,var(--destaque) 62%)}

/* tema escuro neon */
:root[data-tema="escuro"] body{background-color:#0b0c0e}
:root[data-tema="escuro"] .topo{background:#0b0c0e}
:root[data-tema="escuro"] .topo h1 b{background:linear-gradient(transparent 88%,var(--destaque) 88%)}
:root[data-tema="escuro"] .divisao,:root[data-tema="escuro"] .produto,:root[data-tema="escuro"] .mvv article{border-color:#2a2c31}
:root[data-tema="escuro"] .btn-linha{color:#fff;border-color:#555}

/* movimento reduzido: desliga animações */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .js .rev{opacity:1;transform:none}
  .halo{opacity:1}
}
@media (max-width:980px){.cena{max-width:320px;margin-top:10px}}


/* luz que segue o mouse em toda a página: no claro "tinge" o fundo (multiply, texto preto continua preto);
   no escuro "clareia" o fundo (screen, texto branco continua branco) */
:root{--luz-cor:rgba(255,236,0,.36);--luz-modo:multiply}
:root[data-tema="escuro"]{--luz-cor:rgba(254,254,34,.22);--luz-modo:screen}
/* círculo de 360px que só se desloca (transform), sem redesenhar a tela inteira a cada movimento */
.luz-mouse{position:fixed;left:0;top:0;width:360px;height:360px;margin:-180px 0 0 -180px;border-radius:50%;z-index:25;pointer-events:none;opacity:0;transition:opacity .4s;will-change:transform;mix-blend-mode:var(--luz-modo);background:radial-gradient(circle closest-side,var(--luz-cor),transparent)}
.luz-mouse.on{opacity:1}
@media (hover:none),(prefers-reduced-motion:reduce){.luz-mouse{display:none}}

/* variações dentro do cartão da família */
.produto{grid-template-columns:minmax(0,1fr)}
.produto,.produto .txt{min-width:0}
.variacoes{border-top:1px solid var(--borda);margin-top:4px;padding-top:8px;min-width:0}
.variacoes summary{cursor:pointer;font-weight:700;font-size:.9rem;padding:4px 0;list-style:none;display:flex;align-items:center;gap:8px}
.variacoes summary::-webkit-details-marker{display:none}
.variacoes summary::before{content:"+";display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--destaque);color:#000;font-weight:800;line-height:1;flex:none}
.variacoes[open] summary::before{content:"–"}
.variacoes ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px;max-height:340px;overflow:auto}
.variacoes li{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px;border-radius:8px;background:var(--fundo);border:1px solid transparent}
.variacoes li.alvo,.produto.alvo{border-color:var(--destaque);box-shadow:0 0 0 2px var(--destaque)}
.variacoes .mini{width:48px;height:36px;object-fit:contain;border-radius:4px;background:var(--foto);display:block}
.variacoes .vn{font-size:.86rem;line-height:1.3;display:grid;gap:2px;overflow-wrap:anywhere}
.variacoes .vn small{color:var(--suave);font-size:.74rem;letter-spacing:.03em}
.variacoes .vn em{color:var(--suave);font-size:.78rem;font-style:normal}
@media (max-width:600px){.variacoes ul{max-height:none;overflow:visible}}
.pedir{border:1px solid var(--borda);background:var(--card);color:var(--texto);border-radius:6px;padding:6px 10px;font:700 .78rem var(--display);cursor:pointer}
a.pedir{display:inline-block;text-decoration:none;white-space:nowrap}
a.zap{text-decoration:none}
.pedir:hover{border-color:var(--destaque);box-shadow:0 0 12px -2px var(--brilho)}
/* paginação das categorias */
.paginas{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.grade+.paginas{margin:26px 0 0}
.paginas a{min-width:40px;text-align:center;border:1px solid var(--borda);border-radius:8px;padding:8px 12px;font-weight:700;font-size:.9rem;background:var(--card)}
.paginas a:hover{border-color:var(--texto)}
.paginas a[aria-current]{background:var(--destaque);color:#000;border-color:var(--destaque)}
.vazio{color:var(--suave);font-size:.9rem}

/* aviso de cookies */
.cookies{position:fixed;left:16px;right:16px;bottom:16px;max-width:760px;margin-inline:auto;z-index:30;background:#000;color:#eee;border:1px solid var(--destaque);border-radius:14px;padding:18px 20px;display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;box-shadow:0 12px 40px rgba(0,0,0,.5),0 0 24px -6px var(--brilho)}
.cookies[hidden]{display:none}
.cookies p{font-size:.9rem;color:#c9ccd3;margin-top:4px}.cookies a{text-decoration:underline;color:var(--destaque)}
.ck-b{display:flex;gap:10px}.cookies .btn{padding:10px 18px}.cookies .btn-linha{color:#fff;border-color:#666}
.vx-faixa{background:#15150f;color:#f4f4e8;font-size:.8rem;text-align:center;padding:7px 16px;border-bottom:1px solid #fefe22}
.vx-faixa a{color:#fefe22;font-weight:700;text-decoration:underline}
.is-preview .vx-faixa,.is-preview .zap,.is-preview .luz-mouse,.is-preview .dica-cena,.is-preview .cookies{display:none !important}
.is-preview a,.is-preview button,.is-preview .cena{pointer-events:none}
.is-preview{scrollbar-width:none}.is-preview ::-webkit-scrollbar{display:none}