/* Estilos das páginas internas (equipamentos, 404).
   A página inicial mantém o CSS embutido para carregar mais rápido. */
:root{
  --concreto:#D7D5CF;
  --grafite:#2A2E37;
  --grafite-2:#343A45;
  --aco:#4B5158;
  --linha:#B6B2A8;
  --amarelo:#F2A91F;
  --branco:#EDE8DD;
  --verde:#2E7D32;
  --display:'Archivo',system-ui,sans-serif;
  --corpo:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--concreto);color:var(--grafite);font:400 17px/1.65 var(--corpo);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.env{width:min(1180px,92vw);margin-inline:auto}
.risco{height:10px;background:repeating-linear-gradient(45deg,var(--amarelo) 0 14px,var(--grafite) 14px 28px)}

/* ---------- cabeçalho ---------- */
.topo{position:sticky;top:0;z-index:50;background:var(--grafite);color:var(--branco)}
.topo-int{display:flex;align-items:center;gap:1rem;padding:.85rem 0}
.marca{display:flex;align-items:center;text-decoration:none}
.marca .completo{height:46px;width:auto}
.marca .mini{height:42px;width:auto;display:none}
.topo nav{margin-left:auto;display:flex;align-items:center;gap:1.6rem}
.topo nav a{font-size:15px;text-decoration:none;color:#D3D7DC}
.topo nav a:hover{color:var(--amarelo)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font:600 15px/1 var(--corpo);text-decoration:none;padding:14px 22px;border:0;border-radius:3px;cursor:pointer;transition:transform .15s,filter .15s}
.btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.topo nav .btn-zap,.btn-zap{background:var(--amarelo);color:var(--grafite)}
.btn-linha{background:transparent;color:var(--branco);box-shadow:inset 0 0 0 1px #565C64}
.btn-escuro{background:var(--grafite);color:var(--branco)}
.btn-peq{padding:12px 16px;font-size:14px;width:100%}

/* ---------- trilha (breadcrumb) ---------- */
.trilha{font:500 12px/1.4 var(--mono);letter-spacing:.06em;color:#9AA0A8;margin:0 0 1.4rem}
.trilha ol{display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0;list-style:none}
.trilha li+li::before{content:"/";margin-right:.4rem;color:#5C636D}
.trilha a{color:#C8CDD3;text-decoration:none}
.trilha a:hover{color:var(--amarelo)}

/* ---------- topo da página ---------- */
.hero{
  background:var(--grafite);color:var(--branco);padding:clamp(2.4rem,5vw,4rem) 0;
  background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);
  background-size:44px 44px;
}
.olho{font:500 11px/1 var(--mono);letter-spacing:.2em;color:var(--amarelo);text-transform:uppercase;margin:0}
.hero h1{font:800 clamp(2rem,5vw,3.4rem)/1.02 var(--display);letter-spacing:-.035em;text-transform:uppercase;margin:1rem 0 0;max-width:20ch}
.hero h1 em{font-style:normal;color:var(--amarelo)}
.hero p.chamada{font-size:clamp(1rem,1.6vw,1.15rem);color:#C8CDD3;max-width:62ch;margin:1.2rem 0 1.8rem}
.acoes{display:flex;flex-wrap:wrap;gap:.8rem}

/* ---------- seções ---------- */
section{padding:clamp(3rem,6vw,4.6rem) 0}
.tit{font:800 clamp(1.6rem,3.2vw,2.4rem)/1.05 var(--display);letter-spacing:-.03em;text-transform:uppercase;margin:.6rem 0 0}
.sub{color:var(--aco);max-width:62ch;margin:.9rem 0 0}
.olho-escuro{font:500 11px/1 var(--mono);letter-spacing:.2em;color:var(--aco);text-transform:uppercase;margin:0}
.cabeca{margin-bottom:2.2rem}

.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1.1rem}
.placa{
  position:relative;background:var(--branco);border:1px solid var(--linha);border-radius:3px;
  padding:22px 20px 20px;display:flex;flex-direction:column;
  background-image:
    radial-gradient(circle at 9px 9px,#CFCBC1 0 2.5px,transparent 3px),
    radial-gradient(circle at calc(100% - 9px) 9px,#CFCBC1 0 2.5px,transparent 3px),
    radial-gradient(circle at 9px calc(100% - 9px),#CFCBC1 0 2.5px,transparent 3px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px),#CFCBC1 0 2.5px,transparent 3px);
}
.placa-topo{display:flex;justify-content:space-between;align-items:center;font:500 11px/1 var(--mono);letter-spacing:.1em}
.placa-topo .cod{color:var(--aco)}
.placa-topo .disp{display:flex;align-items:center;gap:6px;color:var(--verde);font-size:10px}
.ponto{width:7px;height:7px;border-radius:50%;background:var(--verde);box-shadow:0 0 0 3px #2E7D3230}
.placa .foto{width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;border-radius:2px;margin:14px 0 -2px;background:#FFFFFF;padding:10px;border:1px solid #DCD8CF}
.placa h3{font:700 20px/1.15 var(--display);text-transform:uppercase;letter-spacing:-.02em;margin:14px 0 12px}
.specs{margin:0 0 18px;padding:0;list-style:none}
.specs li{display:flex;align-items:baseline;gap:8px;font:500 12px/2 var(--mono);color:var(--aco)}
.specs .pontos{flex:1;border-bottom:1px dotted var(--linha);transform:translateY(-4px)}
.specs .val{color:var(--grafite)}
.placa .btn{margin-top:auto}
.placa-corte{border-top:1px solid var(--linha);border-bottom:0;margin:0 0 16px}

/* ---------- texto corrido ---------- */
.texto{max-width:76ch}
.texto h2{font:800 clamp(1.3rem,2.4vw,1.7rem)/1.15 var(--display);letter-spacing:-.02em;text-transform:uppercase;margin:2.6rem 0 .8rem}
.texto h2:first-child{margin-top:0}
.texto h3{font:700 18px/1.3 var(--display);text-transform:uppercase;margin:1.8rem 0 .5rem}
.texto p,.texto li{color:#33373E}
.texto ul{padding-left:1.2rem}
.texto li{margin:.35rem 0}
.texto a{color:var(--grafite);text-decoration-color:var(--amarelo);text-decoration-thickness:2px;text-underline-offset:3px}

.tabela-env{overflow-x:auto;margin:1.2rem 0}
table{border-collapse:collapse;width:100%;min-width:520px;background:var(--branco);font-size:15px}
th,td{text-align:left;padding:12px 14px;border:1px solid var(--linha);vertical-align:top}
th{font:500 11px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;background:#E3DFD5}

.fundo-claro{background:#E3E1DB}
.bairros{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:1.5rem 0 0;list-style:none}
.bairros li{font:500 12px/1 var(--mono);background:var(--branco);border:1px solid var(--linha);padding:9px 12px;border-radius:2px}

.relacionados{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;padding:0;margin:0;list-style:none}
.relacionados a{display:block;height:100%;padding:18px;background:var(--branco);border:1px solid var(--linha);border-radius:3px;text-decoration:none;transition:box-shadow .2s}
.relacionados a:hover{box-shadow:0 10px 24px #2a2e371f}
.relacionados strong{display:block;font:700 17px/1.2 var(--display);text-transform:uppercase;margin-bottom:6px}
.relacionados span{font-size:15px;color:var(--aco)}

details{border-bottom:1px solid var(--linha);padding:18px 0}
summary{font:600 17px/1.4 var(--corpo);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:500 20px/1 var(--mono);color:var(--amarelo)}
details[open] summary::after{content:"–"}
details p{margin:12px 0 0;color:var(--aco);max-width:75ch}

.cta-final{background:var(--amarelo);color:var(--grafite);text-align:center}
.cta-final .tit{margin-bottom:1rem}
.cta-final p{max-width:52ch;margin:0 auto 2rem;color:#3A3D42}

footer{background:var(--grafite);color:#9AA0A8;font-size:14px;padding:3rem 0 2rem}
.rodape-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem}
.logo-rodape{width:170px;height:auto;margin-bottom:14px}
footer h2{font:500 10px/1 var(--mono);letter-spacing:.18em;color:var(--branco);text-transform:uppercase;margin:0 0 14px}
footer p{margin:0 0 6px}
footer ul{margin:0;padding:0;list-style:none}
footer li{margin:0 0 6px}
footer a{color:#C8CDD3}
.legal{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid #414855;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:13px}

.flutua{position:fixed;right:18px;bottom:18px;z-index:60;background:#25D366;color:#fff;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;box-shadow:0 8px 20px #0000003d;text-decoration:none;transition:transform .15s}
.flutua:hover{transform:scale(1.08)}

:focus-visible{outline:3px solid var(--amarelo);outline-offset:2px}

@media (max-width:600px){
  .marca .completo{display:none}
  .marca .mini{display:block}
}
@media (max-width:880px){
  .topo nav a:not(.btn){display:none}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
  html{scroll-behavior:auto}
}