/* Comparador de produtos: /comparador, /{tipo}, /{tipo}/{slug}, /{tipo}/{a}-vs-{b}, /comparar/{tipo}.
   Só tokens do site (claro/escuro automáticos). A tabela rola dentro do próprio contêiner; a página nunca rola na horizontal. */
.pagina-comparador { --cor-tipo: var(--primaria); --tinta-tipo: color-mix(in srgb, var(--cor-tipo) 55%, var(--texto)); padding-bottom: 40px; min-width: 0; }
.pagina-comparador h2 { margin: 0 0 12px; }
.bloco-comparador { margin: 32px 0 0; min-width: 0; }
.aviso-comparador { padding: 14px 16px; border-radius: var(--raio-pequeno); background: var(--aviso-suave); }
.acoes-comparador { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.botao--pequeno { padding: 6px 12px; font-size: 0.88rem; }
.ficha-nota-rodape, .comparacao__legenda { font-size: 0.86rem; color: var(--texto-suave); margin: 8px 0 0; }

/* Hub */
.grade-tipos { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.cartao-tipo { position: relative; padding: 18px; border-radius: var(--raio); background: var(--superficie); border: 1px solid var(--borda); box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 8px; }
.cartao-tipo__icone { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--cor-tipo) 14%, var(--superficie)); color: color-mix(in srgb, var(--cor-tipo) 70%, var(--texto)); }
.cartao-tipo__icone .icone { width: 24px; height: 24px; }
.cartao-tipo__nome { margin: 0; font-size: 1.15rem; }
.cartao-tipo__nome a { color: var(--texto); text-decoration: none; }
.cartao-tipo__nome a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.cartao-tipo__nome a:focus-visible { outline: none; }
.cartao-tipo:has(a:focus-visible) { outline: 3px solid var(--primaria); outline-offset: 2px; }
.cartao-tipo__descricao { margin: 0; color: var(--texto-suave); font-size: 0.93rem; }
.cartao-tipo__acoes { margin: auto 0 0; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 0.88rem; color: var(--texto-suave); }
.cartao-tipo__acoes a { position: relative; z-index: 1; color: var(--primaria-forte); }

/* Filtros da listagem */
.filtros-produtos { padding: 16px; border-radius: var(--raio); background: var(--superficie); border: 1px solid var(--borda); display: grid; gap: 12px; }
.filtros-produtos__grade { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); }
.filtros-produtos select, .filtros-produtos input, .seletor input, .campo--tarifa input, .energia input {
    width: 100%; min-width: 0; padding: 10px 12px; border-radius: var(--raio-pequeno); border: 1px solid var(--borda-forte); background: var(--superficie); color: var(--texto); font: inherit;
}
.filtros-produtos__acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.filtros-produtos__resultado { margin: 0; color: var(--texto-suave); font-size: 0.9rem; min-height: 1.2em; }

/* Cartões de produto */
.grade-produtos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.grade-produtos__item[hidden], [data-grupo-produtos][hidden] { display: none; }
.cartao-produto { height: 100%; padding: 14px 16px; border-radius: var(--raio); background: var(--superficie); border: 1px solid var(--borda); display: flex; flex-direction: column; gap: 8px; }
.cartao-produto__topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.cartao-produto__nome { margin: 0; font-size: 1.02rem; line-height: 1.3; overflow-wrap: anywhere; }
.cartao-produto__nome a { color: var(--texto); }
.cartao-produto__nota { flex: none; font-weight: 700; font-size: 0.92rem; padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--cor-tipo) 14%, var(--superficie)); color: var(--tinta-tipo); }
.cartao-produto__meta { margin: 0; font-size: 0.84rem; color: var(--texto-suave); }
.cartao-produto__fatos { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 0.88rem; }
.cartao-produto__fatos li { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dashed var(--borda); padding-bottom: 3px; }
.cartao-produto__fatos span { color: var(--texto-suave); }
.cartao-produto__fatos strong { text-align: right; font-weight: 600; overflow-wrap: anywhere; }
.cartao-produto__comparar { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; cursor: pointer; padding: 6px 0 0; }
.cartao-produto__comparar input { width: 18px; height: 18px; accent-color: var(--primaria); }
.barra-comparar { position: sticky; bottom: 12px; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 16px 0 0; padding: 10px 14px; border-radius: var(--raio); background: var(--superficie); border: 1px solid var(--borda-forte); box-shadow: var(--sombra-forte); }
.barra-comparar[hidden] { display: none; }
.lista-pares { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.lista-pares a { display: block; padding: 10px 14px; border-radius: var(--raio-pequeno); border: 1px solid var(--borda); background: var(--superficie); color: var(--texto); text-decoration: none; overflow-wrap: anywhere; }
.lista-pares a:hover { border-color: var(--primaria); }
.lista-pares span { color: var(--texto-suave); font-size: 0.85em; margin: 0 4px; }

/* Ficha */
.ficha-cabecalho { display: flex; gap: 16px; align-items: flex-start; margin: 12px 0 18px; }
.ficha-cabecalho h1 { margin: 0; overflow-wrap: anywhere; }
.ficha-resumo { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.ficha-notas, .ficha-pontos, .energia { padding: 16px; border-radius: var(--raio); background: var(--superficie); border: 1px solid var(--borda); }
.ficha-notas h2 { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 1.15rem; }
.ficha-notas__geral { font-size: 1.6rem; color: var(--tinta-tipo); }
.ficha-notas__geral small { font-size: 0.8rem; color: var(--texto-suave); font-weight: 400; }
.ficha-notas ul, .ficha-pontos ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ficha-notas li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; }
.ficha-notas__nome { font-weight: 600; }
.ficha-notas__valor { font-weight: 700; }
.ficha-notas__valor--vazio { color: var(--texto-suave); }
.ficha-notas__barra { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: var(--borda); overflow: hidden; }
.ficha-notas__barra span { display: block; height: 100%; background: var(--cor-tipo); }
.ficha-notas__motivo { grid-column: 1 / -1; font-size: 0.85rem; color: var(--texto-suave); overflow-wrap: anywhere; }
.ficha-pontos h2 { font-size: 1.15rem; }
.ponto { display: flex; gap: 8px; align-items: flex-start; font-size: 0.93rem; }
.ponto .icone { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.ponto--forte .icone { color: var(--sucesso); }
.ponto--fraco .icone { color: var(--erro); }
.energia__linha { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.energia__linha .campo { flex: 1 1 200px; max-width: 280px; }
.energia__resultado { margin: 0; font-size: 1.05rem; }
.energia__resultado strong { font-size: 1.4rem; }
.energia__resultado span { color: var(--texto-suave); font-size: 0.9rem; }
.campo--tarifa { max-width: 280px; margin: 0 0 12px; }
.ficha-tecnica { margin: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.ficha-tecnica__grupo { padding: 14px 16px; border-radius: var(--raio); background: var(--superficie); border: 1px solid var(--borda); }
.ficha-tecnica__grupo h3 { margin: 0 0 8px; font-size: 1rem; color: var(--tinta-tipo); }
.ficha-tecnica__grupo dl { margin: 0; }
.ficha-tecnica__grupo dl > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--borda); font-size: 0.92rem; }
.ficha-tecnica__grupo dl > div:last-child { border-bottom: 0; }
.ficha-tecnica dt { color: var(--texto-suave); }
.ficha-tecnica dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.lista-concorrentes { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 8px; }
.lista-concorrentes li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 14px; border-radius: var(--raio-pequeno); border: 1px solid var(--borda); background: var(--superficie); }
.lista-concorrentes li > a:first-child { font-weight: 600; overflow-wrap: anywhere; }
.lista-concorrentes__meta { color: var(--texto-suave); font-size: 0.85rem; flex: 1 1 auto; }
.fontes ul { padding-left: 18px; display: grid; gap: 6px; }
.fontes a { overflow-wrap: anywhere; }
.fontes .icone { width: 14px; height: 14px; vertical-align: -2px; }
.fontes__data { color: var(--texto-suave); font-size: 0.85rem; }
.observacoes { margin-top: 12px; }
.observacoes summary { cursor: pointer; font-weight: 600; }
.observacoes ul { font-size: 0.9rem; color: var(--texto-suave); }

/* Tabela lado a lado */
.tabela-comparacao { position: relative; max-width: 100%; overflow-x: auto; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); -webkit-overflow-scrolling: touch; }
.tabela-comparacao:focus-visible { outline: 3px solid var(--primaria); outline-offset: 2px; }
.comparacao { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.92rem; min-width: calc(130px + var(--colunas, 2) * 150px); }
.comparacao--simples { min-width: 0; }
.comparacao th, .comparacao td { padding: 9px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--borda); }
.comparacao thead th { position: sticky; top: 0; background: var(--superficie-2, var(--superficie)); font-size: 0.95rem; z-index: 2; }
.comparacao thead th a { color: var(--texto); }
.comparacao__rotulo { position: sticky; left: 0; z-index: 1; background: var(--superficie); width: 130px; min-width: 130px; max-width: 160px; font-weight: 600; color: var(--texto-suave); box-shadow: 1px 0 0 var(--borda); }
.comparacao thead .comparacao__rotulo { z-index: 3; }
.comparacao__grupo th { background: color-mix(in srgb, var(--cor-tipo) 10%, var(--superficie)); color: var(--tinta-tipo); font-size: 0.82rem; text-transform: uppercase; letter-spacing: .04em; position: static; }
.comparacao td.melhor { background: var(--sucesso-suave); font-weight: 700; color: var(--texto); box-shadow: inset 3px 0 0 var(--sucesso); }
.comparacao__motivo { display: block; font-weight: 400; font-size: 0.8rem; color: var(--texto-suave); }
.comparacao__ajuda { display: block; font-weight: 400; font-size: 0.78rem; }

/* Qual escolher */
.escolhas__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.escolha { padding: 14px 16px; border-radius: var(--raio); background: var(--superficie); border: 1px solid var(--borda); border-top: 3px solid var(--cor-tipo); }
.escolha--sem-dados { border-top-color: var(--borda-forte); }
.escolha__titulo { margin: 0; font-size: 0.85rem; color: var(--texto-suave); }
.escolha__vencedor { margin: 4px 0; font-weight: 700; font-size: 1.05rem; display: flex; gap: 6px; align-items: flex-start; overflow-wrap: anywhere; }
.escolha__vencedor .icone { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--favorito); }
.escolha__explicacao { margin: 0; font-size: 0.84rem; color: var(--texto-suave); overflow-wrap: anywhere; }

/* Seletor da ferramenta */
.seletor { padding: 16px; border-radius: var(--raio); background: var(--superficie); border: 1px solid var(--borda); display: grid; gap: 12px; }
.seletor__titulo { margin: 0 0 8px; font-weight: 600; }
.seletor__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.seletor__item { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 12px; border-radius: 999px; background: color-mix(in srgb, var(--cor-tipo) 12%, var(--superficie)); border: 1px solid color-mix(in srgb, var(--cor-tipo) 35%, var(--borda)); max-width: 100%; }
.seletor__item span { overflow-wrap: anywhere; }
.seletor__busca { position: relative; }
.seletor__busca[hidden] { display: none; }
.seletor__sugestoes { position: absolute; left: 0; right: 0; top: 100%; z-index: 10; list-style: none; margin: 4px 0 0; padding: 4px; border-radius: var(--raio-pequeno); background: var(--superficie); border: 1px solid var(--borda-forte); box-shadow: var(--sombra-forte); max-height: 320px; overflow-y: auto; }
.seletor__sugestoes[hidden] { display: none; }
.seletor__sugestao { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.seletor__sugestao small { color: var(--texto-suave); }
.seletor__sugestao:hover, .seletor__sugestao[aria-selected="true"] { background: var(--primaria-suave); }
.seletor__sugestao--vazia { cursor: default; color: var(--texto-suave); }
.seletor__aviso { margin: 0; color: var(--texto-suave); min-height: 1.2em; }
.compartilhar-comparacao { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* Como comparamos */
.lista-regras dt { font-weight: 700; margin-top: 12px; }
.lista-regras dd { margin: 4px 0 0; }

@media (max-width: 600px) {
    .ficha-cabecalho .ferramenta-cabecalho__icone { display: none; }
    .comparacao { font-size: 0.86rem; min-width: calc(108px + var(--colunas, 2) * 128px); }
    .comparacao__rotulo { width: 108px; min-width: 108px; }
    .comparacao th, .comparacao td { padding: 8px; }
}
@media print {
    .seletor, .filtros-produtos, .barra-comparar, .acoes-comparador { display: none; }
    .tabela-comparacao { overflow: visible; }
}