:root{--preto:#0D0D0D;--grafite:#161616;--linha:#2a2a2a;--amarelo:#FFED00;--branco:#FFFFFF;--osso:#F2EFE6;--cinza:#8A8A8A;--texto:#E9E9E9;color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--preto);color:var(--texto);font-family:Inter,system-ui,sans-serif;font-size:17px;line-height:1.6}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase;line-height:1.16;letter-spacing:.012em;word-spacing:.1em;margin:0;color:var(--branco);text-wrap:balance}
h1{font-size:clamp(44px,8vw,88px)}
h2{font-size:clamp(32px,5vw,52px)}
h3{font-size:24px}
.wrap{max-width:1120px;margin:0 auto;padding-inline:20px}
.num{font-family:Anton,Impact,sans-serif;color:var(--amarelo);font-size:15px;letter-spacing:.12em}
.rotulo{font-weight:800;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--amarelo)}
.regua{border:0;border-top:1px solid var(--linha);margin:0}

/* topo */
.topo{position:sticky;top:0;z-index:20;background:rgba(13,13,13,.97);border-bottom:1px solid var(--linha)}
.topo .wrap{display:flex;align-items:center;gap:22px;padding-block:14px}
.topo .marca img{height:50px;width:auto;max-width:none}
.topo nav{display:flex;gap:4px;margin-left:auto;align-items:center}
.topo nav a{text-decoration:none;font-weight:600;font-size:15px;padding:10px 12px;border-bottom:3px solid transparent}
.topo nav a:hover,.topo nav a[aria-current=page]{border-bottom-color:var(--amarelo);color:var(--branco)}
.topo .sos{background:var(--amarelo);color:var(--preto);font-weight:800;padding:10px 16px;margin-left:8px;border-bottom:0}
.topo .sos:hover{background:var(--branco);border-bottom:0}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--linha);color:var(--branco);padding:10px 14px;font:inherit;font-weight:700;cursor:pointer}

/* botoes */
.btn{display:inline-block;font-weight:800;text-decoration:none;padding:14px 22px;font-size:16px;min-height:48px;border:2px solid var(--amarelo);cursor:pointer;font-family:inherit;line-height:1.2}
.btn-cheio{background:var(--amarelo);color:var(--preto)}
.btn-cheio:hover{background:var(--branco);border-color:var(--branco)}
.btn-vazio{background:transparent;color:var(--branco)}
.btn-vazio:hover{background:var(--amarelo);color:var(--preto)}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--branco);outline-offset:2px}

section{padding-block:76px}
.cab{display:flex;gap:18px;align-items:baseline;margin-bottom:34px;flex-wrap:wrap}
.cab h2{flex:1 1 380px}

/* home */
.hero{padding-block:84px 0;border-bottom:1px solid var(--linha)}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:end}
.hero h1 em{font-style:normal;color:var(--amarelo)}
.hero .lead{font-size:20px;max-width:36ch;margin:22px 0 28px;color:#fff}
.hero .acoes{display:flex;gap:12px;flex-wrap:wrap;padding-bottom:56px}
.hero figure{margin:0;align-self:end}
.hero figure img{border:1px solid var(--linha);border-bottom:0}
.fatos{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--linha)}
.fatos div{padding:22px 20px;border-right:1px solid var(--linha)}
.fatos div:last-child{border-right:0}
.fatos b{display:block;font-family:Anton,Impact,sans-serif;font-weight:400;font-size:34px;color:var(--amarelo);text-transform:uppercase;line-height:1.2;margin-bottom:4px}
.fatos span{font-size:14px;color:#cfcfcf}

.faixa-clara{background:var(--osso);color:var(--preto)}
.faixa-clara h2,.faixa-clara h3{color:var(--preto)}
.faixa-clara .rotulo,.faixa-clara .num{color:var(--preto)}
.faixa-clara .regua{border-color:#cfc9b8}

.tres{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:3px solid var(--preto)}
.tres article{padding:26px 24px 30px 0;border-right:1px solid #cfc9b8;padding-left:24px}
.tres article:first-child{padding-left:0}
.tres article:last-child{border-right:0}
.tres h3{margin:8px 0 10px}
.tres p{margin:0 0 10px}
.tres a.mais{font-weight:800;text-decoration:none;border-bottom:3px solid var(--preto)}

/* fachada */
.fachada{display:grid;grid-template-columns:1.1fr .9fr;gap:0;border:1px solid var(--linha)}
.fachada .placa{background:var(--amarelo);color:var(--preto);padding:46px 36px;display:flex;flex-direction:column;justify-content:space-between;min-height:340px}
.fachada .placa strong{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:clamp(40px,6vw,70px);line-height:1.12;text-transform:uppercase}
.fachada .placa small{font-weight:700;font-size:15px}
.fachada .info{padding:36px}
.fachada img{width:100%;height:100%;object-fit:cover}
.dados{margin:0;display:grid;gap:16px}
.dados dt{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--amarelo)}
.dados dd{margin:2px 0 0;font-size:19px}
.dados a{text-decoration:none;border-bottom:2px solid var(--amarelo)}

/* catalogo */
.abas{display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid var(--linha);margin-bottom:0}
.abas button{background:none;border:0;color:var(--texto);font:inherit;font-weight:700;padding:14px 20px;cursor:pointer;border-bottom:4px solid transparent}
.abas button[aria-selected=true]{color:var(--preto);background:var(--amarelo);border-bottom-color:var(--amarelo)}
.ficha{display:none;border:1px solid var(--linha);border-top:0;padding:34px;background:var(--grafite)}
.ficha.on{display:block}
.ficha-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.ficha h3{font-size:40px;margin-bottom:6px}
.ficha .sub{color:var(--amarelo);font-weight:700;margin:0 0 18px}
table.spec{width:100%;border-collapse:collapse;font-size:16px}
table.spec th,table.spec td{padding:12px 10px;border-bottom:1px solid var(--linha);text-align:left;vertical-align:top}
table.spec th{width:38%;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--cinza);font-weight:800}
.consulta{margin-top:22px;border-left:6px solid var(--amarelo);padding:14px 18px;background:#111}
.consulta p{margin:0 0 12px}
.modelos{margin-top:20px;overflow-x:auto}
.nota{font-size:14px;color:#bdbdbd}

/* tabelas gerais */
.lista-tecnica{list-style:none;padding:0;margin:0}
.lista-tecnica li{padding:14px 0;border-bottom:1px solid var(--linha);display:flex;gap:14px}
.lista-tecnica li::before{content:"";flex:none;width:10px;height:10px;background:var(--amarelo);margin-top:9px}

/* glossario */
.glos{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.glos div{border-top:3px solid var(--preto);padding-top:14px}
.glos b{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:28px;text-transform:uppercase}

/* rodape */
footer{border-top:3px solid var(--amarelo);background:#000;padding-block:44px 30px;font-size:15px;color:#d5d5d5}
footer .cols{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:34px}
footer h4{margin:0 0 10px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--amarelo)}
footer a{text-decoration:none;border-bottom:1px solid #444}
footer .fim{margin-top:30px;padding-top:16px;border-top:1px solid var(--linha);font-size:13px;color:#9a9a9a}
footer img{height:46px;width:auto;max-width:none;margin-bottom:12px}

/* chat */
.chat-aba{position:fixed;right:0;bottom:calc(120px + env(safe-area-inset-bottom,0px));z-index:30;background:var(--amarelo);color:var(--preto);border:0;font:inherit;font-weight:800;padding:14px 16px;cursor:pointer;writing-mode:vertical-rl;letter-spacing:.06em;box-shadow:-3px 3px 0 #000}
.chat{position:fixed;right:16px;bottom:16px;z-index:40;width:min(380px,calc(100vw - 32px));background:var(--preto);border:2px solid var(--amarelo);display:none;flex-direction:column;max-height:min(600px,calc(100vh - 32px))}
.chat.on{display:flex}
.chat header{background:var(--amarelo);color:var(--preto);padding:12px 14px;display:flex;justify-content:space-between;align-items:center;font-weight:800}
.chat header button{background:none;border:0;font:inherit;font-weight:800;cursor:pointer;color:var(--preto);padding:4px 8px}
.chat .corpo{padding:14px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:10px}
.chat .fala{background:var(--grafite);border-left:4px solid var(--amarelo);padding:10px 12px;font-size:15px;max-width:92%}
.chat .eu{align-self:flex-end;background:var(--amarelo);color:var(--preto);border:0;font-weight:600}
.chat .opcoes{display:flex;flex-wrap:wrap;gap:8px}
.chat .opcoes button{background:transparent;color:var(--branco);border:1px solid var(--amarelo);padding:9px 12px;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.chat .opcoes button:hover{background:var(--amarelo);color:var(--preto)}
.chat form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--linha)}
.chat input{flex:1;min-width:0;background:var(--grafite);border:1px solid var(--linha);color:var(--branco);padding:11px;font:inherit}
.chat form button{background:var(--amarelo);border:0;font-weight:800;padding:0 16px;cursor:pointer;font:inherit}
.chat .fim a{display:block;text-align:center;margin-top:6px}

/* folder (impressao) */
.folder-pagina{width:297mm;height:210mm;background:#fff;color:#000;margin:20px auto;display:grid;grid-template-columns:repeat(3,1fr);overflow:hidden;page-break-after:always;break-after:page}
.folder-pagina>div{padding:14mm 11mm;border-right:1px dashed #ccc;position:relative}
.folder-pagina>div:last-child{border-right:0}
.folder h2,.folder h3{color:#000}

@media (max-width:900px){
 section{padding-block:54px}
 .hero-grid,.fachada,.ficha-grid,.glos,footer .cols{grid-template-columns:1fr}
 .fatos{grid-template-columns:1fr 1fr}
 .fatos div:nth-child(2){border-right:0}
 .fatos div{border-bottom:1px solid var(--linha)}
 .tres{grid-template-columns:1fr}
 .tres article{border-right:0;border-bottom:1px solid #cfc9b8;padding-left:0}
 .menu-btn{display:block}
 .topo nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--preto);border-bottom:1px solid var(--linha);flex-direction:column;align-items:stretch;padding:8px 20px 16px}
 .topo nav.on{display:flex}
 .topo .sos{margin:8px 0 0;text-align:center}
 .hero{padding-block:48px 0}
 .hero .acoes{padding-bottom:34px}
 .ficha{padding:22px}
 .chat-aba{bottom:calc(90px + env(safe-area-inset-bottom,0px))}
}
@media print{
 body{background:#fff}
 .topo,.chat,.chat-aba,.no-print{display:none!important}
 .folder-pagina{margin:0;box-shadow:none}
 @page{size:A4 landscape;margin:0}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* banner da fachada */
.banner-loja{position:relative;background:#000;max-height:560px;overflow:hidden;padding-block:0}
.banner-loja img{display:block;width:100%;height:auto;max-height:560px;object-fit:cover;object-position:center}
.banner-loja .legenda{position:absolute;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;gap:6px 22px;align-items:baseline;padding:34px max(16px,calc((100% - 1120px)/2)) 18px;background:linear-gradient(transparent,rgba(0,0,0,.82));color:#fff}
.banner-loja .legenda b{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:clamp(18px,2.4vw,26px);letter-spacing:.02em;text-transform:uppercase;color:var(--amarelo)}
.banner-loja .legenda span{font-size:14px;font-weight:600}

/* títulos: espaço para acento e entre linhas */
h1,h2,h3{padding-top:.08em;padding-bottom:.04em}
.hero h1{margin-top:6px}
.cab{align-items:flex-end}
.glos b{line-height:1.2;display:inline-block}

/* marcas em movimento */
.marcas{padding-block:34px 38px;border-top:1px solid var(--linha);border-bottom:1px solid var(--linha);background:var(--grafite)}
.marcas .rotulo{margin:0 0 16px}
.marcas-janela{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marcas-trilho{display:flex;gap:18px;list-style:none;margin:0;padding:0 9px;width:max-content;animation:marcas-corre 34s linear infinite}
.marcas-janela:hover .marcas-trilho{animation-play-state:paused}
@keyframes marcas-corre{to{transform:translateX(-50%)}}
.marca-card{flex:none;width:250px;height:150px;display:flex;flex-direction:column;justify-content:space-between;padding:12px 14px 14px;border:1px solid var(--linha)}
.marca-card .tag{align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:4px 8px;line-height:1.3;background:var(--amarelo);color:var(--preto)}
.marca-card img{width:auto;max-width:100%;max-height:74px;margin:0 auto;object-fit:contain}
.marca-card.escuro{background:#0b0b0b}
.marca-card.claro{background:#fff}
.marca-card.claro .tag{background:var(--preto);color:var(--amarelo)}
.marca-card.amarelo{background:var(--amarelo);border-color:var(--amarelo)}
.marca-card.amarelo .tag{background:var(--preto);color:var(--amarelo)}
@media (prefers-reduced-motion:reduce){.marcas-trilho{animation:none}.marcas-janela{overflow-x:auto}}

/* WhatsApp flutuante */
.zap-flutuante{position:fixed;right:16px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:35;width:64px;height:64px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.45);text-decoration:none;animation:zap-balanca 5s ease-in-out infinite}
.zap-flutuante svg{width:36px;height:36px;fill:#fff}
.zap-flutuante::before{content:"";position:absolute;inset:0;border-radius:50%;background:#25D366;opacity:.55;z-index:-1;animation:zap-onda 2.4s ease-out infinite}
.zap-flutuante .zap-dica{position:absolute;right:76px;top:50%;transform:translateY(-50%);background:#fff;color:#111;font-weight:800;font-size:14px;line-height:1.2;padding:9px 12px;white-space:nowrap;box-shadow:0 3px 10px rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .2s}
.zap-flutuante:hover .zap-dica,.zap-flutuante:focus-visible .zap-dica,.zap-flutuante.mostra .zap-dica{opacity:1}
@keyframes zap-onda{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.7);opacity:0}}
@keyframes zap-balanca{0%,78%,100%{transform:rotate(0)}82%{transform:rotate(-14deg)}86%{transform:rotate(12deg)}90%{transform:rotate(-8deg)}94%{transform:rotate(5deg)}}
@media (prefers-reduced-motion:reduce){.zap-flutuante,.zap-flutuante::before{animation:none}}
@media (max-width:900px){.chat-aba{bottom:calc(100px + env(safe-area-inset-bottom,0px))}}

/* SOS todos os dias até 21h */
.topo .sos small{display:inline-block;margin-left:4px;padding:2px 6px;background:var(--preto);color:var(--amarelo);font-size:11px;font-weight:800;letter-spacing:.06em;line-height:1.2;vertical-align:middle}
.topo .sos:hover small{background:var(--preto);color:var(--amarelo)}
.sos-flutuante{position:fixed;left:16px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:35;width:76px;height:76px;border-radius:50%;background:#D7261E;color:#fff;border:3px solid #fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;box-shadow:0 6px 18px rgba(0,0,0,.5);font-family:Anton,Impact,sans-serif;line-height:1}
.sos-flutuante b{font-weight:400;font-size:25px;letter-spacing:.04em;padding-top:2px}
.sos-flutuante span{font-family:Inter,system-ui,sans-serif;font-weight:800;font-size:10px;letter-spacing:.04em;margin-top:3px;white-space:nowrap}
.sos-flutuante::before{content:"";position:absolute;inset:-3px;border-radius:50%;border:3px solid #D7261E;animation:zap-onda 2.4s ease-out infinite;animation-delay:1.2s}
@media (prefers-reduced-motion:reduce){.sos-flutuante::before{animation:none}}

/* logo interativa: o nome "enche" de luz como uma bateria carregando (sem moldura de bateria) */
.logo-bat{position:relative;display:block;flex:none;margin-right:16px;line-height:0}
.logo-bat img,.topo .marca.logo-bat img{height:64px;width:auto;max-width:none;display:block}
.logo-bat .lb-base img{opacity:.32}
.logo-bat .lb-nivel{position:absolute;inset:0;overflow:hidden;clip-path:inset(0 100% 0 0);animation:lb-carrega 5s ease-in-out infinite}
.logo-bat .lb-nivel img{filter:drop-shadow(0 0 8px rgba(255,255,255,.8))}
.logo-bat:hover .lb-nivel{animation-duration:1.8s}
@keyframes lb-carrega{0%{clip-path:inset(0 100% 0 0);opacity:1}68%{clip-path:inset(0 0 0 0);opacity:1}88%{clip-path:inset(0 0 0 0);opacity:1}100%{clip-path:inset(0 0 0 0);opacity:0}}
@media (max-width:900px){.logo-bat{margin-right:8px}.logo-bat img,.topo .marca.logo-bat img{height:46px}}
@media (prefers-reduced-motion:reduce){.logo-bat .lb-nivel{animation:none;clip-path:inset(0 0 0 0)}}
