/* ============================================================
   REAL RADIADORES — Tabela de valores · estilos
   1. Tokens          4. Busca e categorias fixas
   2. Base e layout   5. Lista de produtos
   3. Cabeçalho       6. Detalhe do produto  7. Botões  8. Rodapé
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  --vermelho:#E10600;
  --vermelho-escuro:#B00500;
  --preto:#141414;
  --grafite:#1f1f1f;
  --cinza:#6b6b6b;
  --cinza-med:#8d8d8d;
  --cinza-claro:#eeeeee;
  --linha:#e6e6e6;
  --branco:#ffffff;
  --fundo:#f4f4f5;
  --verde:#128C4A;
  --sombra:0 2px 10px rgba(0,0,0,.06);
  --radius:14px;
  --raio-btn:4px;
  --largura:1180px;
  --gutter:14px;
}

/* ---------- 2. Base e layout ---------- */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  font-family:'Montserrat',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--fundo);color:var(--preto);line-height:1.4;
  -webkit-font-smoothing:antialiased;
}
input,button{font-family:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--vermelho);outline-offset:2px}
img{max-width:100%}

/* faixa de largura total + conteúdo centralizado */
.in{width:100%;max-width:var(--largura);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}

/* ---------- 3. Cabeçalho ---------- */
.topo{background:var(--preto);width:100%}
.topo .in{display:flex;justify-content:center;align-items:center;padding-top:20px;padding-bottom:16px}
.topo .logo{height:52px;width:auto;max-width:82%}
.barra-vermelha{height:5px;width:100%;background:linear-gradient(90deg,var(--vermelho),var(--vermelho-escuro))}

.faixa-titulo{width:100%;background-image:linear-gradient(160deg,#1c1c1c 0%,#0d0d0d 100%);color:var(--branco);text-align:center}
.faixa-titulo .in{padding-top:22px;padding-bottom:22px}
.faixa-titulo h1{font-size:1.35rem;font-weight:800;letter-spacing:.3px;line-height:1.2;text-transform:uppercase}
.faixa-titulo h1 span{color:var(--vermelho)}
.faixa-titulo p{margin-top:6px;font-size:.9rem;color:#c9c9c9;font-weight:500}

.aviso{width:100%;background:#fff4f3;color:var(--vermelho-escuro);border-bottom:1px solid #ffdedb}
.aviso .in{display:flex;align-items:center;gap:8px;justify-content:center;text-align:center;
  font-size:.82rem;font-weight:600;padding-top:10px;padding-bottom:10px}
.aviso svg{flex:0 0 auto}

/* ---------- legenda ---------- */
.legenda .in{padding-top:14px;padding-bottom:2px}
.legenda-cx{background:var(--branco);border-radius:var(--radius);box-shadow:var(--sombra);overflow:hidden}
.legenda h2{margin:0}
.legenda h2 button{
  width:100%;border:none;background:var(--branco);padding:14px 16px;
  font-size:.72rem;text-transform:uppercase;letter-spacing:1.2px;color:var(--cinza);
  font-weight:800;display:flex;align-items:center;gap:8px;text-align:left;
}
.legenda h2 button::before{content:"";width:14px;height:3px;background:var(--vermelho);border-radius:2px;flex:0 0 auto}
.legenda h2 button .chev{margin-left:auto;color:var(--vermelho);display:flex;transition:transform .25s}
.legenda.aberta h2 button .chev{transform:rotate(180deg)}
.legenda dl{display:none;padding:0 16px 16px;gap:8px}
.legenda.aberta dl{display:grid}
.legenda .lin{display:flex;gap:10px;align-items:flex-start;font-size:.82rem}
.legenda dt{font-weight:800;color:var(--preto);white-space:nowrap;min-width:104px}
.legenda dd{color:var(--cinza);font-weight:500}

/* ---------- 4. Busca e categorias fixas ---------- */
#sentinela{height:1px}
.barra-fixa{
  position:sticky;top:0;z-index:40;background:var(--fundo);
  transition:box-shadow .2s, background .2s;
}
.barra-fixa.fixa{box-shadow:0 6px 18px rgba(0,0,0,.10);background:rgba(244,244,245,.97);backdrop-filter:blur(6px)}
.barra-fixa .in{padding-top:12px;padding-bottom:8px}

.busca{
  display:flex;align-items:center;background:var(--branco);
  border:2px solid var(--linha);border-radius:999px;padding:0 14px;box-shadow:var(--sombra);
  transition:border-color .15s;
}
.busca:focus-within{border-color:var(--vermelho)}
.busca svg{flex:0 0 auto;color:var(--cinza)}
.busca input{border:none;outline:none;flex:1;font-size:1rem;padding:13px 10px;background:transparent;color:var(--preto);min-width:0}
.busca .limpar{
  display:none;border:none;background:var(--cinza-claro);color:var(--cinza);
  width:26px;height:26px;border-radius:50%;font-size:1rem;line-height:1;flex:0 0 auto;
}
.busca .limpar.on{display:flex;align-items:center;justify-content:center}

.chips{display:flex;gap:8px;overflow-x:auto;padding:10px 0 4px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;background:var(--branco);border:1px solid var(--linha);border-radius:999px;
  padding:9px 15px;font-size:.76rem;font-weight:700;color:var(--grafite);text-transform:uppercase;
  letter-spacing:.4px;white-space:nowrap;transition:.15s;
}
.chip:hover{border-color:var(--vermelho);color:var(--vermelho)}
.chip.ativo{background:var(--vermelho);border-color:var(--vermelho);color:#fff}
.chip.vazio{color:var(--cinza-med);opacity:.75}

/* ---------- 5. Lista de produtos ---------- */
.lista-wrap .in{padding-top:6px;padding-bottom:30px}
.cat{background:var(--branco);border-radius:var(--radius);box-shadow:var(--sombra);margin-bottom:12px;overflow:hidden;scroll-margin-top:132px}
.cat-head{
  display:flex;align-items:center;gap:12px;width:100%;border:none;background:var(--branco);
  padding:16px;text-align:left;
}
.cat-head .marca{width:5px;align-self:stretch;border-radius:4px;background:var(--vermelho);flex:0 0 auto}
.cat-head .txt{flex:1;min-width:0}
.cat-head .nome{font-size:1.02rem;font-weight:800;color:var(--preto);letter-spacing:.2px;display:block}
.cat-head .cont{font-size:.78rem;color:var(--cinza);font-weight:600;margin-top:2px;display:block}
.cat-head .chev{flex:0 0 auto;color:var(--vermelho);transition:transform .25s;display:flex}
.cat.aberta .cat-head .chev{transform:rotate(180deg)}
.cat-body{display:none}
.cat.aberta .cat-body{display:block}

.thead{display:none}
.item{
  display:grid;grid-template-columns:1fr auto 22px;align-items:center;gap:10px;
  width:100%;border:none;background:var(--branco);text-align:left;
  padding:13px 16px;border-top:1px solid var(--linha);transition:background .15s;
}
.item:hover{background:#fafafa}
.prod .pnome{display:block;font-size:.95rem;font-weight:700;color:var(--grafite);line-height:1.25}
.prod .ptags{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}
.ptags i{
  font-style:normal;font-size:.68rem;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  background:var(--cinza-claro);color:var(--cinza);padding:3px 7px;border-radius:5px;
}
.ptags i.cv{background:#fff0ef;color:var(--vermelho-escuro)}
.col{font-size:.88rem;font-weight:600;color:var(--grafite);font-variant-numeric:tabular-nums;text-align:right}
.col small{display:block;font-size:.68rem;color:var(--cinza-med);font-weight:600;margin-top:2px}
.c-rev{font-size:1.02rem;font-weight:800;color:var(--vermelho);white-space:nowrap}
.c-mm,.c-cv,.c-av,.c-pz{display:none}
.item .chev{color:var(--cinza-med);display:flex;justify-content:flex-end;transition:transform .25s}
.item.aberto{background:#fafafa}
.item.aberto .chev{transform:rotate(180deg);color:var(--vermelho)}
.item.hide{display:none}
.item.vazio{grid-template-columns:1fr;justify-items:center;color:var(--cinza);font-style:italic;font-weight:500;font-size:.9rem;padding:20px 16px;cursor:default}
.item.vazio:hover{background:var(--branco)}

.sem-result{display:none;text-align:center;color:var(--cinza);padding:30px 16px;font-size:.95rem}
.sem-result.on{display:block}

/* ---------- 6. Detalhe do produto ---------- */
.det{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease;background:#fafafa;border-top:0 solid var(--linha)}
.det>div{overflow:hidden}
.det.on{grid-template-rows:1fr;border-top:1px solid var(--linha)}
.det-in{padding:2px 16px 18px}
.bloco-t{font-size:.68rem;text-transform:uppercase;letter-spacing:1.1px;font-weight:800;color:var(--cinza-med);margin:14px 0 8px}
.specs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.spec{background:var(--branco);border:1px solid var(--linha);border-radius:10px;padding:9px 11px}
.spec span{display:block;font-size:.66rem;text-transform:uppercase;letter-spacing:.6px;color:var(--cinza-med);font-weight:700}
.spec strong{display:block;font-size:.92rem;font-weight:800;color:var(--grafite);margin-top:2px;font-variant-numeric:tabular-nums}
.precos{display:grid;gap:8px}
.pr{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--branco);border:1px solid var(--linha);border-radius:10px;padding:11px 13px}
.pr .rot{font-size:.78rem;font-weight:700;color:var(--grafite)}
.pr .rot em{display:block;font-style:normal;font-size:.68rem;font-weight:600;color:var(--cinza-med);margin-top:2px}
.pr .val{font-size:1rem;font-weight:800;color:var(--grafite);white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}
.pr .val em{display:block;font-style:normal;font-size:.68rem;font-weight:600;color:var(--cinza-med);margin-top:2px}
.pr.destaque{border-color:var(--vermelho);background:#fff7f6}
.pr.destaque .val{color:var(--vermelho)}
.pr.margem{border-style:dashed}
.pr.margem .val{color:var(--verde)}
.pr .val.consulta{font-size:.8rem;font-weight:700;color:var(--cinza-med)}
.acoes{display:grid;gap:8px;margin-top:14px}

/* ---------- 7. Botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:2px solid transparent;border-radius:var(--raio-btn);
  padding:14px 24px;font-size:.82rem;font-weight:800;letter-spacing:.8px;
  text-transform:uppercase;text-decoration:none;transition:.15s;
}
.btn svg{flex:0 0 auto}
.btn-primario{background:var(--vermelho);color:#fff}
.btn-primario:hover{background:var(--vermelho-escuro)}
.btn-secundario{background:var(--branco);border-color:var(--linha);color:var(--grafite)}
.btn-secundario:hover{border-color:var(--preto)}
.btn-secundario .ico{display:flex}
.btn-secundario.ok{border-color:var(--verde);color:var(--verde)}

/* ---------- observação ---------- */
.obs{width:100%;background:#fafafa;border-top:1px solid var(--linha)}
.obs .in{color:var(--cinza);font-size:.76rem;text-align:center;padding-top:14px;padding-bottom:14px}

/* ---------- 8. Rodapé ---------- */
footer{width:100%;background:var(--preto);color:#cfcfcf;font-size:.85rem}
.rodape{display:grid;gap:20px;text-align:center;padding-top:28px;padding-bottom:32px}
.rlogo{color:var(--branco);font-weight:800;font-size:1.05rem;letter-spacing:.3px;margin-bottom:10px}
.rlogo span{color:var(--vermelho)}
footer .info{color:#9a9a9a;line-height:1.7;font-size:.8rem}
footer .info strong{color:#cfcfcf}
.rod-cta{display:flex;justify-content:center}
.rod-cta .btn{width:100%;max-width:340px}

/* ---------- Desktop ---------- */
@media (min-width:900px){
  :root{--gutter:32px}

  .topo .in{padding-top:26px;padding-bottom:22px}
  .topo .logo{height:62px}
  .faixa-titulo .in{padding-top:34px;padding-bottom:34px}
  .faixa-titulo h1{font-size:2rem;letter-spacing:1px}
  .faixa-titulo p{font-size:1rem}
  .aviso .in{font-size:.88rem;padding-top:12px;padding-bottom:12px}

  .legenda .in{padding-top:20px}
  .legenda h2 button{padding:16px 22px}
  .legenda dl{grid-template-columns:1fr 1fr;gap:12px 28px;padding:0 22px 20px}

  .barra-fixa .in{padding-top:16px;padding-bottom:10px}
  .busca input{font-size:1.02rem;padding:15px 10px}
  .chips{flex-wrap:wrap;overflow:visible;padding:12px 0 4px}

  .lista-wrap .in{padding-top:6px;padding-bottom:44px}
  .cat{margin-bottom:16px;scroll-margin-top:150px}
  .cat-head{padding:20px 22px}
  .cat-head .nome{font-size:1.12rem}

  .thead,.item{grid-template-columns:minmax(0,1fr) 92px 104px 132px 132px 156px 26px;gap:14px;align-items:center}
  .thead{display:grid;padding:11px 22px;background:var(--preto);border-top:1px solid var(--linha)}
  .thead span{font-size:.66rem;text-transform:uppercase;letter-spacing:.9px;font-weight:800;color:#b9b9b9;text-align:right}
  .thead span:first-child{text-align:left}
  .thead span.hl{color:#fff}
  .thead span.hl::after{content:"";display:block;height:2px;width:22px;background:var(--vermelho);margin-top:4px;margin-left:auto;border-radius:2px}
  .item{padding:15px 22px}
  .item.vazio{grid-template-columns:1fr}
  .prod .pnome{font-size:1rem}
  .prod .ptags{display:none}
  .c-mm,.c-cv,.c-av,.c-pz{display:block}

  .det-in{padding:4px 22px 22px}
  .specs{grid-template-columns:repeat(4,1fr)}
  .precos{grid-template-columns:repeat(2,1fr)}
  .acoes{grid-template-columns:auto auto;justify-content:start;margin-top:16px}

  .rodape{grid-template-columns:1fr auto 1fr;align-items:center;text-align:left;gap:28px;
    padding-top:34px;padding-bottom:38px}
  .rod-contato{text-align:right}
  .rod-cta .btn{width:auto}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}