/* Loja Demonstrativa — a ROUPA por cima do esqueleto da Eletroceg (css/base.css).
   Identidade própria (nada de cliente): grafite noturno, azul de painel aceso e laranja de sinalização.
   Letras: Chakra Petch (títulos, cara de etiqueta de peça), Inter (texto), JetBrains Mono (códigos).
   Vizinho do mesmo nicho: Humberto Eletricista (preto, amarelo, prata, Exo 2 inclinada). Aqui é tudo reto e técnico. */
@font-face{font-family:"Chakra Petch";src:url(../fonts/chakra-petch-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Chakra Petch";src:url(../fonts/chakra-petch-latin-700-normal.woff2) format("woff2");font-weight:700 900;font-display:swap}
@font-face{font-family:"Inter";src:url(../fonts/inter-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(../fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}

[hidden]{display:none!important}
:root{
  --noite:#0B1220; --marca:#12233A; --marca-esc:#081020; --marca-titulo:#0F1C2E;
  --acao:#FF6B1A; --acao-hover:#FF8541; --acao-tinta:#160800;
  --gola:#39B6FF;                  /* azul de lâmpada de painel acesa */
  --claro:#F2F5F8; --cinza:#E3E9F0; --branco:#FFFFFF;
  --tinta:#0F1722; --suave:#4C596A; --linha:rgba(15,23,34,.14);
  --f-titulo:"Chakra Petch",system-ui,sans-serif; --f-texto:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; --f-mono:"JetBrains Mono",ui-monospace,monospace;
  --neon-fonte:700 1em/1.05 "Chakra Petch",system-ui,sans-serif; --neon-cor:#39B6FF;
  --btn-raio:6px; --raio:8px;
  --previa-fundo:#FF6B1A; --previa-tinta:#160800;
  /* faixa de fita zebrada de sinalização (laranja e grafite), no lugar da listra do escudo */
  --listra:repeating-linear-gradient(-45deg,#FF6B1A 0 14px,#0B1220 14px 28px);
  --listra-h:10px;
  --risco:linear-gradient(90deg,#FF6B1A 0 60%,#39B6FF 60% 100%);
  --abre-veu:linear-gradient(90deg,rgba(11,18,32,.2) 0%,rgba(11,18,32,.5) 40%,rgba(11,18,32,.93) 78%);
  /* textura: trilha de circuito com fusíveis e terminais, bem apagada */
  --textura:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='360' viewBox='0 0 560 360'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M20 60h160l30 30h150M360 90h180M100 60v120h120l30 30v130M420 90v90h-80v150M20 260h120M480 180v170'/%3E%3Crect x='190' y='176' width='36' height='18' rx='4'/%3E%3Cpath d='M200 176v-8M216 176v-8'/%3E%3Ccircle cx='360' cy='90' r='6'/%3E%3Ccircle cx='140' cy='260' r='6'/%3E%3Ccircle cx='480' cy='180' r='6'/%3E%3Crect x='326' y='300' width='28' height='40' rx='3'/%3E%3C/g%3E%3Cg fill='%23000' font-family='monospace' font-size='12'%3E%3Ctext x='30' y='50'%3E24V%3C/text%3E%3Ctext x='236' y='190'%3EF10%3C/text%3E%3Ctext x='372' y='84'%3EK1%3C/text%3E%3C/g%3E%3C/svg%3E");
  --textura-cor:rgba(15,23,34,.05); --textura-tam:560px auto;
}

/* ---- faixa do topo: aviso de loja demonstrativa, sempre à vista ---- */
.faixa-previa{font-weight:700;letter-spacing:.01em}

/* ---- marca: fusível de lâmina + nome em duas linhas ---- */
.marca-fusivel{width:38px;height:38px;flex:none}
.marca-fusivel .f-fundo{fill:#16294A;stroke:rgba(57,182,255,.4);stroke-width:1.5}
.marca-fusivel .f-corpo{fill:var(--acao)}
.marca-fusivel .f-pino{stroke:#C9D4E2;stroke-width:3.4;stroke-linecap:round}
.marca-fusivel .f-filete{stroke:var(--acao-tinta);stroke-width:2.4;stroke-linecap:round}
.marca-logo{display:flex;flex-direction:column}
.marca-dono{order:-1;margin:0 0 3px;font:700 11px/1 var(--f-texto);letter-spacing:.32em;color:var(--gola)}
.marca-nome{font:700 22px/1 var(--f-titulo);letter-spacing:.02em;text-transform:uppercase;color:#fff}
.marca-sub b{color:var(--acao)}
.rodape .marca-fusivel{width:48px;height:48px}
@media (max-width:420px){.topo .wrap{gap:10px}.marca{gap:9px}.marca-nome{font-size:17px}.marca-dono{font-size:9.5px;letter-spacing:.26em}.marca-fusivel{width:32px;height:32px}}

/* ---- abertura: o fusível desce no encaixe e a lâmpada do painel acende ---- */
.cortina-abre .sinal{width:min(300px,72vw)}
.cortina-abre .fusivel{transform:translateY(-40px);opacity:0;animation:desce .45s .1s cubic-bezier(.3,1.4,.5,1) forwards}
.cortina-abre .luz{opacity:.12;animation:acende .6s .6s steps(1) forwards;filter:drop-shadow(0 0 14px rgba(57,182,255,.9))}
@keyframes desce{to{transform:none;opacity:1}}
@keyframes acende{0%{opacity:1}25%{opacity:.25}50%{opacity:1}70%{opacity:.4}100%{opacity:1}}

/* ---- títulos retos, em caixa alta curta, como etiqueta de peça ---- */
.carrossel h1,.carrossel .h1,.estrada h2,.pagina-abre h1,.lj-topo h1{font-weight:700;letter-spacing:-.005em;text-transform:uppercase}
.carrossel h1,.carrossel .h1{font-size:clamp(38px,5.8vw,72px);line-height:1}
.titulo h2{font-size:clamp(30px,4vw,48px);line-height:1.04;font-weight:700}
.titulo .etiqueta{color:#B8470A}
.f-marca .titulo .etiqueta,.f-noite .titulo .etiqueta{color:var(--acao)}
.etiqueta{font-family:var(--f-mono);font-weight:500;letter-spacing:.16em}
.risco{height:5px;width:84px;border-radius:0}
.btn{font-family:var(--f-titulo);font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:15.5px}

/* ---- faixa de 4: categorias em grafite com o filete azul ---- */
.faixa4 a{background:var(--marca);border-bottom:3px solid var(--gola)}
.faixa4 a svg{color:var(--acao)}
.faixa4 a:hover{background:#1A3050}

/* ---- menu: a Loja aparece como o item principal ---- */
.nav a[href="loja"]{color:var(--acao)}
.menu-cheio .menu-item[href="loja"]{color:var(--acao)}

/* ---- números: o número aceso em azul de painel ---- */
.num-grade strong.acesa{color:var(--marca-titulo);text-shadow:0 0 18px rgba(57,182,255,.5)}
.num-grade svg{color:#B8470A}
.numeros .foto{border-right-color:var(--gola)}
@media (max-width:860px){.numeros .foto{border-bottom-color:var(--gola)}}

/* ---- parede: a frase da loja em letreiro azul ---- */
.neon{font-size:clamp(36px,6.6vw,88px);text-transform:uppercase;color:#E6F6FF}
.rodape .assina{font:700 22px/1.2 var(--f-titulo);text-transform:uppercase;color:var(--acao)}

/* ---- cartões do esqueleto ---- */
.contato .cab-c{background:var(--marca)}
.nao-sabe{background:var(--marca)}
@media (max-width:360px){.marca-nome{font-size:15px}.marca-fusivel{width:28px;height:28px}}