/* ── Comparador (/comparar/…): só entra nas páginas do comparador (scripts/comparador.mjs), com as cores e fontes do site. Vai no arquivo /comparar/comparar.css ── */
.cg-nota{color:var(--texto2);font-size:13.5px;margin:-6px 0 12px}
.cg-sem{color:var(--texto3);font-size:12.5px;font-style:italic;font-weight:400}
.cg-botao{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 16px;background:var(--laranja);border:1.5px solid var(--laranja);border-radius:8px;color:#fff;font:700 13.5px/1.2 var(--fonte);cursor:pointer;text-align:center;transition:background .15s,border-color .15s}
.cg-botao:hover{background:var(--laranja2);border-color:var(--laranja2)}
.cg-botao:disabled{background:#e5e7eb;border-color:#e5e7eb;color:#9ca3af;cursor:not-allowed}
.cg-botao-2{background:#fff;color:var(--marinho);border-color:var(--borda)}
.cg-botao-2:hover{background:#fff;border-color:var(--marinho)}
.cg-link{font-size:12.5px;color:var(--texto2);text-decoration:underline;text-align:center}
.cg-link:hover{color:var(--marinho)}
.cg-chip{background:#fff;border:1.5px solid var(--borda);border-radius:999px;padding:6px 14px;font:500 14px/1.4 var(--fonte);color:var(--texto);cursor:pointer}
.cg-chip:hover{border-color:var(--laranja)}
.cg-chip.on,.cg-chip[aria-pressed=true]{background:var(--marinho);border-color:var(--marinho);color:#fff}

/* Cartão de produto */
.cg-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:12px;margin-bottom:24px}
.cg-cartoes{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:12px;margin:8px 0 20px}
.cg-card{display:flex;flex-direction:column;gap:5px;background:#fff;border:1px solid var(--borda);border-radius:12px;padding:14px;min-width:0;transition:box-shadow .15s,border-color .15s}
.cg-escolhivel:hover{border-color:var(--laranja);box-shadow:0 4px 14px rgba(0,0,0,.06)}
.cg-escolhivel.on{border-color:var(--marinho);box-shadow:0 0 0 2px var(--marinho) inset}
.cg-foto,.cg-mini{display:flex;align-items:center;justify-content:center;background:#fff center/auto 62% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 40' fill='none' stroke='%23d1d5db' stroke-width='1.6' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='36' rx='2.5'/%3E%3Cpath d='M2 14h20M6 7v4M6 18v7' stroke-linecap='round'/%3E%3C/svg%3E")}
.cg-foto{height:170px;margin-bottom:6px}
.cg-foto img{max-width:100%;max-height:170px;object-fit:contain;background:#fff}
.cg-marca{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--texto2)}
.cg-nome{font:700 17px/1.25 var(--fonte-titulo);margin:0;color:var(--texto);overflow-wrap:anywhere}
.cg-nome a:hover{color:var(--laranja2)}
/* O resumo reserva sempre 2 linhas e não estica: assim o botão fica na mesma altura em todos os cartões da fileira,
   mesmo quando um tem menos links embaixo (ex.: só manual, sem guia rápido). */
.cg-resumo{font-size:12.5px;color:var(--texto2);line-height:1.45;margin:0 0 4px;min-height:2.9em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cg-nome{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cg-custo-linha{font-size:13px;margin:0 0 6px;color:var(--texto2)}
.cg-custo-linha b{font:700 16px/1 var(--fonte-titulo);color:var(--texto)}
/* Cartão da lista: o que é (nome, formato, três números) · onde comprar · ação. Cada bloco reserva a mesma altura na fileira. */
.cg-escolhivel .cg-resumo{min-height:1.45em;-webkit-line-clamp:1;margin-bottom:8px}
.cg-fatos{list-style:none;margin:0 0 10px;padding:0;border-top:1px solid #f3f4f6}
.cg-fatos li{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:6px 0;border-bottom:1px solid #f3f4f6;font-size:12.5px;color:var(--texto2)}
.cg-fatos b{font-size:13.5px;color:var(--texto);white-space:nowrap}
/* "Onde comprar": um botão fino por loja, com a logo. --lj = quantos botões reservar de altura (vem do HTML). */
.cg-fatos+.cg-onde-tit{margin-top:auto} /* o bloco das lojas e o botão descem para o pé do cartão: a fileira fica alinhada mesmo quando uma linha de cima quebra em duas */
.cg-onde-tit{margin:0 0 6px;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--texto2)}
.cg-lojas{display:flex;flex-direction:column;gap:6px;min-height:calc(var(--lj,0)*40px - 6px);margin-bottom:10px}
.cg-loja{display:flex;align-items:center;justify-content:space-between;gap:8px;height:34px;padding:0 10px;border:1.5px solid var(--borda);border-radius:8px;background:#fff;font-size:12.5px;color:var(--texto);transition:border-color .15s,box-shadow .15s}
.cg-loja:hover{border-color:var(--marinho);box-shadow:0 2px 8px rgba(0,0,0,.06)}
.cg-loja.on{border-color:var(--laranja);background:#fffbeb}
.cg-loja-m{display:flex;align-items:center;gap:7px;min-width:0;font-weight:600}
.cg-loja-m img{height:18px;width:auto;max-width:46px;object-fit:contain;border-radius:3px;flex:none}
.cg-loja-m span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cg-loja b{font:700 14.5px/1 var(--fonte-titulo);white-space:nowrap}
.cg-loja em{font-style:normal;font-weight:700;font-size:12px;color:var(--laranja2);white-space:nowrap}
.cg-cab-compra{max-width:420px;margin-bottom:6px}
.cg-cab-compra .cg-loja{height:40px;font-size:13.5px}
.cg-cab-compra .cg-ajuda{margin:-2px 0 12px}
/* Entrada do comparador: quadro da categoria com o desenho */
.cg-cat{gap:8px}
.cg-cat-ic{width:90px;height:90px;border-radius:50%;background:var(--laranja-claro);display:grid;place-items:center;flex:none}
.cg-cat .cp-store-name{font:700 17px/1.3 var(--fonte-titulo)}
.cg-cat-sub{font-size:12.5px;color:var(--texto2);line-height:1.4}
.cg-add[aria-pressed=true]{background:var(--marinho);border-color:var(--marinho)}

/* Barra "escolha até 4", presa embaixo do cabeçalho (a altura do cabeçalho vem do comparar.js, em --topo) */
.cg-escolha{position:sticky;top:var(--topo,64px);z-index:40;background:var(--fundo);display:flex;align-items:center;gap:10px;padding:10px 0;margin-bottom:12px;border-bottom:1px solid var(--borda)}
.cg-escolha>b{font-size:14px;white-space:nowrap}
.cg-escolha .chips{flex:1;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:2px}
.cg-escolha .chips::-webkit-scrollbar{display:none}
.cg-escolha .cg-chip{white-space:nowrap;font-size:13px;padding:5px 10px 5px 12px}
.cg-escolha .cg-chip::after{content:" ×";font-weight:700;opacity:.7}
.cg-filtros{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.cg-ordem{font-size:13.5px;color:var(--texto2)}
.cg-ordem select,.cg-mais select{border:1.5px solid var(--borda);border-radius:8px;padding:7px 10px;font:inherit;font-size:14px;background:#fff;color:var(--texto)}
.cg-pares{margin-bottom:8px}
.cg-pares a{font-size:13.5px}
.cg-mais{display:flex;flex-wrap:wrap;align-items:center;gap:10px;background:#fff;border:1.5px dashed var(--borda);border-radius:12px;padding:14px 16px;margin:20px 0;font-weight:600}

/* Quem ganha, prós e contras */
.cg-venc,.cg-calc{background:#fff;border:1.5px solid var(--borda);border-radius:14px;padding:2px 18px 16px;margin:20px 0}
.cg-venc h2,.cg-calc h2{margin:16px 0 12px}
.cg-venc ul{list-style:none;margin:0 0 14px;padding:0}
.cg-venc li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid #f3f4f6;font-size:14.5px}
.cg-venc li span{color:var(--texto2)}
.cg-venc li b{text-align:right;color:#166534}
.cg-prio{background:var(--fundo);border-radius:10px;padding:12px 14px}
.cg-prio>b{display:block;font-size:14px;margin-bottom:8px}
.cg-rank{margin:12px 0 0;padding-left:22px;font-size:14.5px}
.cg-rank li{padding:3px 0}
.cg-rank li:first-child{font-weight:700;color:#166534}
.cg-rank small{color:var(--texto2);font-weight:400}
.cg-pc h2{margin-bottom:6px}
.cg-card-pc h3{font:700 16px/1.3 var(--fonte-titulo);margin:0 0 6px}
.cg-pros,.cg-contras{list-style:none;margin:0;padding:0;font-size:13.5px;line-height:1.45}
.cg-pros li,.cg-contras li{position:relative;padding:4px 0 4px 22px}
.cg-pros li::before,.cg-contras li::before{position:absolute;left:0;top:4px;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font:700 11px/1 var(--fonte);color:#fff}
.cg-pros li::before{content:"✓";background:var(--verde)}
.cg-contras{margin-top:8px;padding-top:8px;border-top:1px solid #f3f4f6}
.cg-contras li::before{content:"–";background:#dc2626}

/* Tabela da comparação: uma linha por característica, uma coluna por produto. No celular o nome da característica vira uma
   faixa em cima dos valores, então nunca precisa rolar de lado e os cartões do topo continuam alinhados com as colunas. */
.cg-acoes{display:flex;justify-content:flex-end;font-size:14px;margin:18px 0 8px}
.cg-acoes label{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-weight:600}
.cg-acoes input{width:18px;height:18px;accent-color:var(--marinho)}
.cg-lin{display:grid;grid-template-columns:minmax(150px,230px) repeat(var(--n,2),minmax(0,1fr));border-top:1px solid #f3f4f6}
.cg-tab.so-dif .cg-igual{display:none}
.cg-fixo{position:sticky;top:var(--topo,64px);z-index:30;background:#fff;border:1px solid var(--borda);border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.06);padding:0 16px}
.cg-lin-topo{border-top:0}
.cg-lin-topo .cg-cel{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1px;font-size:12.5px;line-height:1.25;padding:8px 6px}
.cg-lin-topo b{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--texto2)}
.cg-lin-topo span:last-child{font-weight:700;overflow-wrap:anywhere}
.cg-mini{width:34px;height:40px;background-size:auto 80%}
.cg-mini img{max-width:34px;max-height:40px;object-fit:contain;background:#fff}
.cg-grupo{background:#fff;border:1px solid var(--borda);border-radius:12px;margin:14px 0;padding:2px 16px 6px}
.cg-grupo h2{font-size:18px;margin:14px 0 10px}
.cg-grupo,.cg-calc,#comparar-com{scroll-margin-top:calc(var(--topo,64px) + 90px)}
.cg-rot{padding:11px 10px 11px 0;font-size:14px;color:#4b5563;font-weight:600}
.cg-rot small,.cg-fl dt small{display:block;font-weight:400;font-size:12px;color:var(--texto3);line-height:1.35}
.cg-cel{padding:11px 8px;font-size:14.5px;text-align:center;min-width:0;overflow-wrap:anywhere;border-left:1px solid #f3f4f6}
.cg-val{display:block}
.cg-melhor{background:#f0fdf4;font-weight:700;color:#166534}
.cg-selo{display:inline-block;margin-top:3px;font:700 10.5px/1.3 var(--fonte);font-style:normal;background:#dcfce7;color:#15803d;border-radius:999px;padding:2px 8px}
.cg-ast{color:#b45309;font-weight:700;margin-left:2px;cursor:help}
.cg-cel .cg-val{display:inline}
.cg-ressalvas{background:#fffbeb;border:1.5px solid #fcd34d;border-radius:12px;padding:2px 18px 10px;margin:16px 0}
.cg-ressalvas h2{font-size:17px;margin:14px 0 8px}
.cg-ressalvas ul{margin:0 0 8px;padding-left:4px;list-style:none;font-size:14px;color:#78350f}
.cg-ressalvas li{padding:5px 0}
.cg-ressalvas a{color:var(--marinho);font-weight:600;text-decoration:underline}
.cg-total .cg-val{font:700 16px/1.3 var(--fonte-titulo)}
.cg-retorno{background:var(--laranja-claro);border-radius:10px;padding:10px 14px;margin:10px 0 8px;font-size:14.5px;color:#78350f}
.cg-barra{display:block;height:4px;border-radius:4px;background:#eef0f4;margin:6px auto 0;max-width:120px;overflow:hidden}
.cg-barra i{display:block;height:100%;border-radius:4px;background:#9aa0c8}
.cg-melhor .cg-barra i{background:var(--verde)}

/* Calculadora de luz e "cabe na minha cozinha?" */
.cg-abas{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.cg-abas button{background:#fff;border:1.5px solid var(--borda);border-radius:999px;padding:8px 16px;font:600 14px/1.3 var(--fonte);color:var(--texto);cursor:pointer}
.cg-abas button.on{background:var(--marinho);border-color:var(--marinho);color:#fff}
.cg-aba{position:relative;margin-bottom:12px}
.cg-calc label{display:block;font-size:13.5px;font-weight:600;margin-bottom:5px}
.cg-calc input[type=text]{width:100%;max-width:380px;border:1.5px solid var(--borda);border-radius:10px;padding:10px 14px;font:inherit;background:#fff;color:var(--texto)}
.cg-calc input[type=text]:focus{outline:2px solid var(--marinho);outline-offset:1px}
.cg-calc input[type=file]{font:inherit;font-size:14px;max-width:100%}
.cg-campo{display:flex;align-items:center;gap:8px;max-width:380px}
.cg-campo span{font-weight:700}
.cg-ajuda{font-size:12.5px;color:var(--texto2);margin:8px 0 0;max-width:640px}
.cg-ajuda a{color:var(--marinho);text-decoration:underline}
.cg-sugestoes{position:absolute;z-index:35;left:0;top:74px;width:100%;max-width:380px;list-style:none;margin:0;padding:4px;background:#fff;border:1.5px solid var(--borda);border-radius:10px;box-shadow:0 8px 20px rgba(0,0,0,.1);max-height:260px;overflow-y:auto}
.cg-sugestoes li{padding:9px 10px;border-radius:7px;cursor:pointer;font-size:14.5px}
.cg-sugestoes li:hover,.cg-sugestoes li.on{background:var(--laranja-claro)}
.cg-sugestoes small{color:var(--texto2)}
.cg-conta{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin-top:12px}
.cg-conta>div{flex:1 1 150px;max-width:220px}
.cg-lendo{font-size:14px;font-weight:600;color:var(--marinho);margin:10px 0 0}
.cg-lendo.erro{color:#b91c1c}
.cg-explica{border:1px solid var(--borda,#e5e7eb);border-radius:10px;padding:10px 14px;margin:14px 0 0;background:#fff}
.cg-explica summary{cursor:pointer;font-weight:700}
.cg-explica p{margin:10px 0 0;font-size:15px;line-height:1.5;color:#374151}
.cg-explica[open] summary{margin-bottom:4px}
.cg-explica .cg-passos-tit{margin:16px 0 6px;font:700 15px/1.3 var(--fonte-titulo);color:var(--texto)}
.cg-passos{list-style:none;counter-reset:passo;margin:0;padding:0;display:grid;gap:8px}
.cg-passos li{counter-increment:passo;display:grid;grid-template-columns:28px 1fr;column-gap:10px;row-gap:2px;align-items:start;background:#f9fafb;border:1px solid #eef0f3;border-radius:10px;padding:10px 12px}
.cg-passos li::before{content:counter(passo);grid-row:1/span 3;width:28px;height:28px;border-radius:50%;background:var(--azul,#2d3277);color:#fff;font:700 14px/28px var(--fonte-titulo);text-align:center}
.cg-passo-t{grid-column:2;font-size:13px;font-weight:600;color:var(--texto2)}
.cg-passo-c{grid-column:2;font-size:16px;color:var(--texto);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.cg-passo-c b{background:var(--laranja-claro);border-radius:6px;padding:1px 6px;white-space:nowrap}
.cg-passo-n{grid-column:2;font-size:12.5px;color:var(--texto2)}
.cg-explica .cg-passos-fim{font-size:12.5px;color:var(--texto2)}
.cg-explica-notas{margin:0;padding-left:18px;font-size:14px;line-height:1.5;color:#374151}
.cg-explica-notas li{margin:4px 0}
.cg-uso-txt{background:var(--laranja-claro);border-radius:10px;padding:8px 12px;margin:8px 0 4px;font-size:14px}
.cg-uso{border-top:1px solid var(--borda,#e5e7eb);margin-top:16px;padding-top:14px}
.cg-uso-tit{font:700 16px/1.3 var(--fonte-titulo);margin:0 0 10px}
.cg-uso-campos{display:flex;flex-wrap:wrap;gap:12px 24px}
.cg-uso-campos label{display:flex;align-items:center;gap:8px;font-weight:600}
.cg-uso-campos select{padding:8px 10px;border:1px solid #d1d5db;border-radius:8px;font:inherit;background:#fff}
.cg-tarifa{background:var(--laranja-claro);border-radius:10px;padding:10px 14px;margin:14px 0 0;font-size:15px}
.cg-tarifa b{font:700 17px/1 var(--fonte-titulo)}
.cg-tarifa span{color:#92400e;font-size:13px}
.cg-cabe-res{list-style:none;margin:14px 0 0;padding:0}
.cg-cabe-res li{padding:9px 12px;border-radius:9px;margin-top:6px;font-size:14.5px;background:var(--fundo)}
.cg-cabe-res li.sim{background:#f0fdf4;color:#166534}
.cg-cabe-res li.nao{background:#fef2f2;color:#991b1b}

/* Ficha do modelo */
.cg-cab{display:flex;gap:24px;align-items:flex-start;margin:10px 0 8px}
.cg-foto-g{flex:none;width:250px;height:290px;border:1px solid var(--borda);border-radius:14px;margin:0}
.cg-foto-g img{max-height:270px;max-width:92%}
.cg-cab-txt{flex:1;min-width:0}
.cg-cab-txt h1{margin:2px 0 6px}
.cg-numeros{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:14px 0;padding:0}
.cg-numeros li{background:#fff;border:1px solid var(--borda);border-radius:10px;padding:9px 12px}
.cg-numeros span{display:block;font-size:12px;color:var(--texto2)}
.cg-numeros b{font:700 16.5px/1.3 var(--fonte-titulo)}
.cg-numeros b span{display:inline;font:inherit;color:inherit} /* o valor do custo vem dentro de um span: tem que ficar igual aos outros números */
.cg-cab-acoes{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.cg-onde>b{display:block;font-size:13.5px;margin-bottom:6px}
.cg-onde .chips a{font-size:13px;padding:5px 12px}
.cg-ficha dl{margin:0}
.cg-fl{display:grid;grid-template-columns:minmax(150px,300px) 1fr;gap:14px;border-top:1px solid #f3f4f6;padding:10px 0}
.cg-fl dt{font-size:14px;color:#4b5563;font-weight:600}
.cg-fl dd{margin:0;font-size:15px;font-weight:600}
.cg-fonte{display:inline-block;margin-left:8px;font-size:11.5px;font-weight:500;color:var(--texto3)}
.cg-lista{margin:0 0 10px;padding-left:20px;font-size:14.5px}

@media (max-width:720px){
  .cg-lin{grid-template-columns:repeat(var(--n,2),minmax(0,1fr))}
  .cg-rot{grid-column:1/-1;padding:8px 0 0;font-size:12.5px;text-align:center}
  .cg-lin-topo .cg-rot{display:none}
  .cg-lin-topo .cg-cel{padding:6px 2px;font-size:11px}
  .cg-lin-topo b{font-size:9px;letter-spacing:0}
  .cg-lin-topo b,.cg-lin-topo span:last-child{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;overflow-wrap:normal}
  .cg-cel{font-size:13.5px;padding:6px 4px 10px}
  .cg-cel:nth-child(2){border-left:0}
  .cg-grupo,.cg-fixo{padding-left:8px;padding-right:8px}
  .cg-cartoes{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .cg-card{padding:10px}
  .cg-foto{height:120px}.cg-foto img{max-height:120px}
  .cg-grade{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .cg-nome{font-size:15px}
  .cg-escolhivel .cg-loja-m img+span,.cg-cartoes .cg-loja-m img+span{display:none}
  .cg-loja{padding:0 8px}
  .cg-card .cg-botao{padding:8px 8px;font-size:12.5px;white-space:nowrap} /* botão fino, numa linha só */
  .cg-fatos li{font-size:12px;gap:4px}
  .cg-fatos b{font-size:12.5px}
  .cg-escolha>b{display:none}
  .cg-escolha{top:var(--topo,110px)}
  .cg-fixo{top:var(--topo,110px)}
  .cg-cab{flex-direction:column;gap:12px}
  .cg-foto-g{width:100%;height:220px}.cg-foto-g img{max-height:200px}
  .cg-fl{grid-template-columns:1fr 1fr;gap:10px}
  .cg-venc li{flex-direction:column;gap:0}.cg-venc li b{text-align:left}
  .cg-sugestoes{max-width:none}
}