/* ============================================================
   TEC8 COMPARE — CSS
   Segue o padrão do tema tec8-v2: prefixo próprio (cp-), os
   cards seguem o TEMA do site (escuros no dark, claros no
   branco), laranja #ff6a00 da marca. Fonte Inter (herdada).

   🎨 CORES POR VARIÁVEL: o tema é decidido aqui embaixo. A base
   é o DARK (igual ao site: fundo #232323, cards #191919). O
   html.theme-white redefine as mesmas variáveis pro modo claro.
   Assim os cards acompanham o tema do site de verdade.
   ============================================================ */

#tec8-compare {
	/* 🎨 PALETA DO TEMA tec8-v2 (conferida no assets/css/style.css do tema):
	   dark  → body #232323 · cards #191919 (.lt-card/.sb-box) · faixa #2a2a2a
	   claro → body #f3f3f3 · cards #e7e7e7 · texto #222
	   laranja da marca: #ff6a00 · hover #ff8534 · escuro #b34600
	   Nada aqui é inventado — são as cores que o site já usa. */
	/* superfícies */
	--cp-card:      #191919;  /* card padrão — igual .lt-card/.sb-box do tema */
	--cp-card2:     #202020;  /* card aninhado / cabeçalho de tabela */
	--cp-card3:     #2a2a2a;  /* hover / faixa sutil — cor que o tema usa */
	--cp-sug:       #1d1d1d;  /* dropdown de sugestões */
	--cp-fundo:     #232323;  /* fundo da página (body do tema) */
	/* texto */
	--cp-tx:        #ffffff;  /* o tema usa #fff puro no escuro */
	--cp-tx2:       #b7b7b7;  /* texto secundário */
	--cp-tx3:       #8a8a8a;  /* rótulo apagado */
	/* linhas e bordas */
	--cp-bd:        #2f2f2f;  /* borda/divisória */
	--cp-bd2:       #262626;  /* divisória sutil (grid gap) */
	/* destaque laranja (marca) */
	--cp-ac:        #ff6a00;
	--cp-ac-hover:  #ff8534;  /* o hover que o tema usa */
	--cp-ac-soft:   #2a1c0e;  /* fundo alaranjado sutil (dark) */
	--cp-ac-tx:     #ffa35a;  /* texto laranja legível no escuro */
	/* verde (vencedor) e sombras */
	--cp-win:       #12331f;  /* fundo verde do vencedor (dark) */
	--cp-win-tx:    #4ade80;  /* texto verde legível no escuro */
	--cp-sh:        0 4px 20px rgba(0,0,0,.35);
	--cp-sh2:       0 2px 10px rgba(0,0,0,.28);
	/* blocos temáticos (ray tracing roxo, aviso de gargalo dourado) */
	--cp-rt-bg:     #1a1530;  /* fundo roxo do bloco RT (dark) */
	--cp-rt-bd:     #2e2650;
	--cp-rt-tx:     #b9a5ff;  /* texto roxo legível no escuro */
	--cp-warn-bg:   #2a2410;  /* fundo dourado do aviso (dark) */
	--cp-warn-bd:   #4a3f18;
	--cp-warn-tx:   #e8c766;  /* texto dourado legível no escuro */
	/* 🆕 destaques A/B e faixas — eram cores CLARAS cravadas no CSS, que
	   no escuro viravam manchas brancas. Agora acompanham o tema. */
	--cp-a:         #0f2b22;  /* destaque do produto A (verde) */
	--cp-a2:        #0c211b;  /* A, mais sutil */
	--cp-a3:        #14382c;  /* A, hover */
	--cp-b:         #101c33;  /* destaque do produto B (azul) */
	--cp-b2:        #0d1728;  /* B, mais sutil */
	--cp-neutro:    #242424;  /* faixa neutra / empate */
	--cp-neutro2:   #1e1e1e;  /* faixa bem sutil */
	--cp-trilho:    #333333;  /* trilho de barra vazia */
	--cp-a-tx:      #34d399;  /* texto do produto A (verde) */
	--cp-b-tx:      #7aa8ff;  /* texto do produto B (azul) */
	--cp-ruim-tx:   #ff8a80;  /* texto de alerta/ponto fraco */
}

/* MODO CLARO — redefine as variáveis (html.theme-white) */
html.theme-white #tec8-compare {
	/* claro: cards BRANCOS (escolha dele — o cinza #e7e7e7 do tema ficou
	   pesado numa tabela grande). O contraste com o body #f3f3f3 do tema
	   é o que dá o recorte do card. */
	--cp-card:      #ffffff;
	--cp-card2:     #fafafa;
	--cp-card3:     #f2f3f5;
	--cp-sug:       #ffffff;
	--cp-fundo:     #f3f3f3;
	--cp-tx:        #222222;
	--cp-tx2:       #666666;
	--cp-tx3:       #999999;
	--cp-bd:        #d5d5d5;
	--cp-bd2:       #dfdfdf;
	--cp-ac:        #ff6a00;
	--cp-ac-hover:  #ff8534;
	--cp-ac-soft:   #fff4e0;
	--cp-ac-tx:     #b34600;   /* o laranja escuro que o tema usa no claro */
	--cp-win:       #eef9f2;
	--cp-win-tx:    #076c4a;
	--cp-sh:        0 4px 20px rgba(0,0,0,.10);
	--cp-sh2:       0 2px 10px rgba(0,0,0,.07);
	/* blocos temáticos no claro */
	--cp-rt-bg:     #f3f0ff;
	--cp-rt-bd:     #ddd6fe;
	--cp-rt-tx:     #5b21b6;
	--cp-warn-bg:   #fff8e5;
	--cp-warn-bd:   #f0e0b0;
	--cp-warn-tx:   #92600a;
	/* destaques A/B e faixas — os mesmos tons claros de antes */
	--cp-a:         #e7f7f1;
	--cp-a2:        #f2fbf7;
	--cp-a3:        #ddf3e9;
	--cp-b:         #eaf1fe;
	--cp-b2:        #f4f8fe;
	--cp-neutro:    #f0f1f3;
	--cp-neutro2:   #fafbfc;
	--cp-trilho:    #d8dade;
	--cp-a-tx:      #0b8a5f;
	--cp-b-tx:      #2563eb;
	--cp-ruim-tx:   #c0392b;
}

#tec8-compare { padding: 130px 20px 60px; color: var(--cp-tx); max-width: 1120px; margin: 0 auto; }

/* ===== HERO ===== */
.cp-hero { text-align: center; margin-bottom: 30px; }
.cp-hero h1 { font-size: 50px; font-weight: 800; letter-spacing: -.03em; line-height: 1; margin: 0; color: #fff; }
.cp-hero h1 span { color: #ff6a00; }
.cp-hero p { color: var(--cp-tx3); font-size: 17.5px; margin: 14px auto 0; max-width: 520px; line-height: 1.5; }

/* ===== A ARENA (o seletor) ===== */
.cp-arena { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: start; margin: 30px 0 0; }
.cp-slot { position: relative; }
.cp-lab { position: absolute; top: -8px; left: 12px; z-index: 2; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cp-tx3); background: #232323; padding: 0 6px; }
.cp-in { width: 100%; padding: 16px 44px 16px 16px; font-size: 16.5px; font-weight: 600; color: #fff; background: rgba(255,255,255,.06); border: 2px solid rgba(255,255,255,.1); border-radius: 14px; outline: none; transition: all .2s ease; }
.cp-in::placeholder { color: var(--cp-tx2); font-weight: 400; }
.cp-in:focus { border-color: #ff6a00; background: rgba(255,255,255,.09); }
.cp-in:focus-visible { outline: 2px solid #ff6a00; outline-offset: 2px; }
.cp-x { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: var(--cp-tx3); cursor: pointer; font-size: 15.5px; line-height: 1; display: none; align-items: center; justify-content: center; }
.cp-x:hover { background: #ff6a00; color: #fff; }
.cp-slot.tem .cp-x { display: flex; }

/* o VS */
.cp-vs { font-weight: 800; font-size: 22px; letter-spacing: -.02em; color: #fff; background: #ff6a00; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: 4px; flex-shrink: 0; box-shadow: 0 0 0 4px #232323, 0 0 0 6px rgba(255,255,255,.1); }

/* sugestões ao vivo */
.cp-sugs { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20; background: var(--cp-card); border-radius: 14px; box-shadow: 0 8px 30px rgba(0,0,0,.4); overflow: hidden; display: none; }
.cp-sugs.abre { display: block; }
.cp-sug { display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 13px; border: 0; background: none; cursor: pointer; text-align: left; font-family: inherit; border-bottom: 1px solid #eee; }
.cp-sug:last-child { border-bottom: 0; }
.cp-sug:hover, .cp-sug.sel { background:var(--cp-neutro2); }
.cp-sug-ico { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; background: var(--cp-bd2); color: var(--cp-tx3); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; overflow: hidden; }
.cp-sug-ico img { width: 100%; height: 100%; object-fit: contain; }
.cp-sug-nome { font-size: 15.5px; font-weight: 600; color: var(--cp-tx); line-height: 1.3; display: block; }
.cp-sug-nome b { color: #ff6a00; font-weight: 800; }
.cp-sug-meta { font-size: 13px; color: var(--cp-tx3); margin-top: 1px; display: block; }
.cp-sug-vazio { padding: 16px 13px; font-size: 15px; color: var(--cp-tx3); }

/* atalhos */
.cp-atalhos { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 22px 0 0; }
.cp-atalho { background: rgba(255,255,255,.06); color: var(--cp-tx3); border: 1px solid rgba(255,255,255,.1); border-radius: 30px; padding: 7px 15px; font-size: 14.5px; font-weight: 600; cursor: pointer; transition: all .25s ease; font-family: inherit; }
.cp-atalho:hover { border-color: #ff6a00; color: #fff; }

/* ===== NÍVEL 1: O VEREDITO ===== */
.cp-veredito { background: var(--cp-card); border-radius: 16px; padding: 26px; margin: 34px 0 18px; color: var(--cp-tx); position: relative; overflow: hidden; box-shadow: var(--cp-sh); }
.cp-veredito::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: #ff6a00; }
.cp-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: #ff6a00; margin-bottom: 8px; }
.cp-veredito h2 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.22; margin: 0; color: var(--cp-tx); }
.cp-veredito .cp-sub { color: var(--cp-tx2); font-size: 16.5px; margin: 10px 0 0; max-width: 66ch; line-height: 1.55; }
.cp-veredito em { color: #ff6a00; font-style: normal; font-weight: 700; }

/* as duas colunas do "por quê" */
.cp-pq { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.cp-pq-col { background: var(--cp-card3); border: 1px solid var(--cp-bd); border-radius: 13px; padding: 15px; }
.cp-pq-nome { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; margin-bottom: 10px; color: var(--cp-tx); }
.cp-tag { font-size: 11.5px; font-weight: 800; padding: 3px 6px; border-radius: 5px; letter-spacing: .04em; flex-shrink: 0; }
.cp-t-a { background:var(--cp-a); color: var(--cp-win-tx); }
.cp-t-b { background:var(--cp-b); color:var(--cp-b-tx); }
.cp-t-eq { background:var(--cp-neutro); color: var(--cp-tx2); }
.cp-pq-lista { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.cp-pq-lista li { font-size: 15px; color: var(--cp-tx2); line-height: 1.45; padding-left: 15px; position: relative; }
.cp-pq-lista li::before { content: ''; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: #ff6a00; }
.cp-pq-lista b { color: var(--cp-tx); font-weight: 700; }
.cp-pq-div { color: var(--cp-tx3); font-size: 13.5px; }
.cp-pq-nada { font-size: 15px; color: var(--cp-tx3); line-height: 1.45; margin: 0; }

/* ===== NÍVEL 2: AS DIFERENÇAS ===== */
.cp-difs { display: grid; gap: 9px; margin: 0 0 26px; }
.cp-dif { display: flex; align-items: flex-start; gap: 12px; background: var(--cp-card); border-radius: 12px; padding: 13px 15px; color: var(--cp-tx); box-shadow: var(--cp-sh2); }
.cp-dif-txt { font-size: 16px; line-height: 1.45; }
.cp-dif-txt b { font-weight: 700; color: var(--cp-tx); }

/* ===== NÍVEL 3: AS SEÇÕES ===== */
.cp-secao { background: var(--cp-card); border-radius: 14px; margin-bottom: 12px; overflow: hidden; color: var(--cp-tx); box-shadow: var(--cp-sh2); }
.cp-secao-top { display: flex; align-items: center; gap: 11px; padding: 13px 16px; background: var(--cp-card3); border-bottom: 1px solid var(--cp-bd); }
.cp-secao-top i { color: #ff6a00; font-size: 16.5px; width: 18px; text-align: center; }
.cp-secao-nome { font-weight: 700; font-size: 17px; color: var(--cp-tx); }
.cp-selo { margin-left: auto; font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 30px; white-space: nowrap; }
.cp-s-a { background:var(--cp-a); color: var(--cp-win-tx); }
.cp-s-b { background:var(--cp-b); color:var(--cp-b-tx); }
.cp-s-eq { background:var(--cp-neutro); color: var(--cp-tx2); }
.cp-s-hum { background: var(--cp-ac-soft); color: var(--cp-ac-tx); }

.cp-linha { display: grid; grid-template-columns: 1fr 138px 1fr; gap: 10px; align-items: center; padding: 11px 16px; border-bottom: 1px solid #f0f0f1; }
.cp-linha:last-child { border-bottom: 0; }
.cp-linha:hover { background: var(--cp-card3); }
.cp-cel { font-size: 15.5px; font-weight: 600; color: var(--cp-tx); min-width: 0; }
.cp-cel.dir { text-align: right; }
.cp-cel.vence { color: var(--cp-win-tx); }
.cp-cel-b.vence { color:var(--cp-b-tx); }
.cp-cel small { display: block; font-weight: 400; font-size: 13px; color: var(--cp-tx3); margin-top: 2px; line-height: 1.35; }
.cp-rotulo { text-align: center; font-size: 12.5px; font-weight: 700; color: var(--cp-tx3); letter-spacing: .03em; text-transform: uppercase; }
.cp-check { color: var(--cp-win-tx); font-weight: 800; }
.cp-nao { color: var(--cp-tx3); }

/* a tradução — a regra 2: nenhum número aparece sozinho */
.cp-traduz { grid-column: 1/-1; margin-top: 2px; font-size: 14px; color: var(--cp-tx2); background: var(--cp-card3); border-left: 2px solid #ff6a00; padding: 7px 11px; border-radius: 0 7px 7px 0; line-height: 1.45; }

/* ===== NÍVEL 4: FICHA ===== */
.cp-ficha { background: var(--cp-card); border-radius: 14px; overflow: hidden; margin-top: 20px; color: var(--cp-tx); box-shadow: var(--cp-sh2); }
.cp-ficha summary { padding: 15px 16px; cursor: pointer; font-weight: 700; font-size: 16.5px; background: var(--cp-card3); list-style: none; display: flex; align-items: center; gap: 9px; color: var(--cp-tx); }
.cp-ficha summary::-webkit-details-marker { display: none; }
.cp-ficha summary::after { content: '\f078'; font-family: 'Font Awesome 6 Pro'; font-weight: 900; margin-left: auto; color: var(--cp-tx3); font-size: 12.5px; }

.cp-ficha summary:focus-visible { outline: 2px solid #ff6a00; outline-offset: -2px; }
.cp-ficha-grupo { padding: 9px 16px 3px; font-size: 12px; font-weight: 800; color: var(--cp-tx3); letter-spacing: .08em; text-transform: uppercase; }

/* ===== VERSÕES E PREÇOS ===== */
.cp-h3 { margin: 26px 0 11px; font-size: 13.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--cp-tx3); font-weight: 700; }
.cp-versoes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cp-vcard { background: var(--cp-card); border-radius: 14px; overflow: hidden; color: var(--cp-tx); box-shadow: var(--cp-sh2); }
.cp-vcard-top { padding: 12px 15px; background: var(--cp-card3); border-bottom: 1px solid var(--cp-bd); font-weight: 700; font-size: 15.5px; color: var(--cp-tx); }
.cp-vlinha { display: flex; align-items: center; gap: 10px; padding: 10px 15px; border-bottom: 1px solid #f0f0f1; font-size: 15px; }
.cp-vlinha:last-child { border-bottom: 0; }
.cp-vconf { font-size: 13px; font-weight: 700; background: var(--cp-bd2); padding: 3px 8px; border-radius: 6px; color: var(--cp-tx2); white-space: nowrap; }
.cp-vram { color: var(--cp-tx3); font-size: 14px; }
.cp-vpreco { margin-left: auto; font-weight: 700; color: var(--cp-tx); }
.cp-vpreco.vazio { color: var(--cp-tx3); font-weight: 400; font-size: 14px; }
.cp-vbtn { margin-left: auto; background: #ff6a00; color: #fff; padding: 6px 14px; border-radius: 8px; font-size: 14px; font-weight: 700; }
.cp-vbtn:hover { background: #e85f00; color: #fff; }

/* ===== NOTAS (a honestidade) ===== */
.cp-nota { display: flex; gap: 10px; align-items: flex-start; background: var(--cp-ac-soft); border-radius: 12px; padding: 12px 14px; margin-top: 14px; font-size: 14.5px; color: var(--cp-ac-tx); line-height: 1.5; }
.cp-nota i { color: var(--cp-ac-tx); font-size: 14.5px; margin-top: 2px; flex-shrink: 0; }
.cp-nota b { color: var(--cp-ac-tx); }

/* ===== MAIS COMPARADOS / AGORA =====
   O bloco antigo daqui foi removido em 26/07/2026. Ele estilizava
   .cp-item, .cp-link, .cp-quando, .cp-pos, .cp-top e .cp-n de uma
   versão anterior deste recurso, e as três últimas nem são mais
   geradas pelo PHP.

   Ele estava CRIANDO BUG: a regra ".cp-item { display: flex }"
   continuava valendo por cima do layout novo, porque a regra nova
   não redeclarava o display. Resultado: a data era empurrada para
   a borda direita do card.

   O estilo atual está no fim deste arquivo, em
   "AS DUAS COLUNAS DO RODAPÉ DO HUB". */

/* ===== RELACIONADOS ===== */
.cp-rel { margin-top: 32px; }
.cp-rel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 8px; }
.cp-rel-a { display: block; padding: 11px 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); border-radius: 11px; font-size: 15px; font-weight: 600; color: var(--cp-tx3); }
.cp-rel-a:hover { border-color: #ff6a00; color: #ff6a00; }

/* ===== RESPONSIVO ===== */
@media (max-width: 900px) {
	#tec8-compare { padding: 110px 16px 50px; }
	.cp-hero h1 { font-size: 38px; }
	.cp-arena { grid-template-columns: 1fr; gap: 9px; }
	.cp-vs { margin: 2px auto; width: 44px; height: 44px; font-size: 17.5px; }
	.cp-pq, .cp-versoes { grid-template-columns: 1fr; }
	.cp-linha { grid-template-columns: 1fr; gap: 3px; padding: 12px 15px; }
	.cp-cel.dir { text-align: left; }
	.cp-rotulo { text-align: left; margin-top: 5px; font-size: 12px; }
	.cp-cel::before { content: attr(data-p); display: block; font-size: 12px; color: var(--cp-tx3); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 1px; }
	.cp-n, .cp-quando { display: none; }
	.cp-veredito h2 { font-size: 24px; }
}

/* ============================================================
   MODO CLARO (html.theme-white)
   Os cards já são brancos e funcionam nos dois modos. Aqui só
   os textos "soltos" sobre o fundo e o contraste dos cards.
   ============================================================ */
html.theme-white #tec8-compare { color: var(--cp-tx); }
html.theme-white .cp-hero h1 { color: var(--cp-tx); }
html.theme-white .cp-hero p { color: var(--cp-tx2); }
html.theme-white .cp-lab { color: var(--cp-tx3); background: var(--cp-card3); }
html.theme-white .cp-in { background: var(--cp-card); border-color: var(--cp-tx3); color: var(--cp-tx); }
html.theme-white .cp-in::placeholder { color: var(--cp-tx3); }
html.theme-white .cp-in:focus { border-color: #ff6a00; background: var(--cp-card); }
html.theme-white .cp-x { background: var(--cp-bd); color: var(--cp-tx2); }
html.theme-white .cp-x:hover { background: #ff6a00; color: #fff; }
html.theme-white .cp-vs { box-shadow: 0 0 0 4px #f3f3f3, 0 0 0 6px #e0e0e0; }
html.theme-white .cp-atalho { background: var(--cp-card); color: var(--cp-tx2); border-color: var(--cp-tx3); }
html.theme-white .cp-atalho:hover { border-color: #ff6a00; color: var(--cp-tx); }

html.theme-white .cp-veredito,
html.theme-white .cp-secao,
html.theme-white .cp-dif,
html.theme-white .cp-ficha,
html.theme-white .cp-vcard { box-shadow: 0 2px 10px rgba(0,0,0,.08); border: 1px solid var(--cp-bd); }

html.theme-white .cp-tit, html.theme-white .cp-bsub, html.theme-white .cp-h3 { color: var(--cp-tx2); }
html.theme-white .cp-item, html.theme-white .cp-rel-a { background: var(--cp-card); border-color: var(--cp-bd); }
html.theme-white .cp-link, html.theme-white .cp-rel-a { color: var(--cp-tx2); }
html.theme-white .cp-item:hover .cp-link, html.theme-white .cp-rel-a:hover { color: #ff6a00; }
html.theme-white .cp-pos, html.theme-white .cp-n, html.theme-white .cp-quando { color: var(--cp-tx3); }


/* ════════════════════════════════════════════════════════════
   v0.3 — O GRÁFICO, AS COLUNAS, AS BARRAS E OS CARDS
   ════════════════════════════════════════════════════════════ */

/* ===== O GRÁFICO (a resposta em 3 segundos) ===== */
.cp-grafico { background: var(--cp-card); border-radius: 16px; padding: 20px; margin: 30px 0 20px; color: var(--cp-tx); box-shadow: var(--cp-sh); }
.cp-g-top { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; padding-bottom: 13px; border-bottom: 1px solid var(--cp-bd); margin-bottom: 6px; }
.cp-g-lado { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 15px; color: var(--cp-tx); min-width: 0; }
.cp-g-lado.dir { justify-content: flex-end; }
.cp-g-vs { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cp-tx3); white-space: nowrap; }
.cp-g-linha { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: center; padding: 7px 0; }
.cp-g-nome { display: flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 600; color: var(--cp-tx2); }
.cp-g-nome i { color: var(--cp-tx3); width: 14px; text-align: center; font-size: 13.5px; }
.cp-g-barra { position: relative; height: 26px; background: var(--cp-card3); border-radius: 7px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cp-g-fill { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; gap: 5px; padding: 0 9px; font-size: 12.5px; font-weight: 800; color: #fff; }
.cp-g-a { left: 0; background: #0b8a5f; border-radius: 7px 0 0 7px; }
.cp-g-b { right: 0; background: #2563eb; border-radius: 0 7px 7px 0; flex-direction: row-reverse; }
.cp-g-eq, .cp-g-nd { font-size: 12.5px; font-weight: 700; color: var(--cp-tx3); }
.cp-g-nd { color: var(--cp-ac-tx); }
.cp-g-pe { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--cp-bd); font-size: 13.5px; color: var(--cp-tx3); line-height: 1.5; }
.cp-g-pe i { color: var(--cp-tx3); margin-top: 2px; }
.cp-g-pe b { color: var(--cp-tx2); }

/* ===== O CABEÇALHO DAS COLUNAS ===== */
.cp-cols { display: grid; grid-template-columns: 1fr 138px 1fr; gap: 10px; padding: 0 16px 9px; position: sticky; top: 100px; z-index: 5; background: #232323; }
html.theme-white .cp-cols { background: var(--cp-card3); }
.cp-col-h { display: flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 700; color: #fff; }
html.theme-white .cp-col-h { color: var(--cp-tx); }
.cp-col-b { justify-content: flex-end; }

/* ===== A LINHA (2 colunas + selo + barra + comentário) ===== */
.cp-mid { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.cp-mini { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; padding: 2px 7px; border-radius: 20px; white-space: nowrap; }
.cp-mini i { font-size: 11px; }
.cp-mini-a { background:var(--cp-a); color: var(--cp-win-tx); }
.cp-mini-b { background:var(--cp-b); color:var(--cp-b-tx); }
.cp-mini-eq { background:var(--cp-neutro); color: var(--cp-tx3); }
.cp-mini-nd { background: var(--cp-ac-soft); color: var(--cp-ac-tx); cursor: help; }

/* as barras proporcionais */
.cp-barras { grid-column: 1/-1; display: grid; grid-template-columns: 1fr 138px 1fr; gap: 10px; margin-top: 5px; }
.cp-barras .cp-barra { height: 5px; background:var(--cp-neutro); border-radius: 3px; overflow: hidden; }
.cp-barras .cp-barra:first-child { grid-column: 1; display: flex; justify-content: flex-end; }
.cp-barras .cp-barra.dir { grid-column: 3; }
.cp-fill { display: block; height: 100%; background:var(--cp-trilho); border-radius: 3px; }
.cp-fill.ok { background: #0b8a5f; }
.cp-fill.ok2 { background: #2563eb; }

/* o comentário de cada linha */
.cp-com { grid-column: 1/-1; display: flex; gap: 8px; align-items: flex-start; margin-top: 7px; background: var(--cp-card3); border-left: 2px solid #ff6a00; padding: 8px 11px; border-radius: 0 7px 7px 0; font-size: 14px; color: var(--cp-tx2); line-height: 1.5; }
.cp-com i { color: #ff6a00; font-size: 12.5px; margin-top: 3px; flex-shrink: 0; }
.cp-com b { color: var(--cp-tx); font-weight: 700; }
.cp-com-nd { background: var(--cp-ac-soft); border-left-color: var(--cp-warn-tx); }
.cp-com-nd i { color: var(--cp-warn-tx); }

/* o resumo no fim de cada seção */
.cp-resumo { display: flex; gap: 9px; align-items: flex-start; padding: 12px 16px; font-size: 14.5px; line-height: 1.5; border-top: 1px solid var(--cp-bd); }
.cp-resumo i { margin-top: 2px; flex-shrink: 0; }
.cp-resumo b { font-weight: 700; }
.cp-r-a { background:var(--cp-a2); color: var(--cp-win-tx); } .cp-r-a i { color: var(--cp-win-tx); }
.cp-r-b { background:var(--cp-b2); color:var(--cp-b-tx); } .cp-r-b i { color:var(--cp-b-tx); }
.cp-r-eq { background: var(--cp-card3); color: var(--cp-tx2); } .cp-r-eq i { color: var(--cp-tx3); }
.cp-r-split { background: var(--cp-ac-soft); color:var(--cp-ac-tx); } .cp-r-split i { color: #ff6a00; }

/* ===== O VEREDITO: "pra quem é cada um" ===== */
.cp-escolha { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: stretch; margin-top: 18px; }
.cp-esc { background: var(--cp-card3); border: 1px solid var(--cp-bd); border-radius: 13px; padding: 16px; display: flex; flex-direction: column; }
.cp-esc-a { border-top: 3px solid #0b8a5f; }
.cp-esc-b { border-top: 3px solid #2563eb; }
.cp-esc-top { display: flex; align-items: center; gap: 8px; font-size: 16.5px; margin-bottom: 10px; color: var(--cp-tx); }
.cp-esc-pra { font-size: 16.5px; color: var(--cp-tx); line-height: 1.4; margin-bottom: 8px; }
.cp-esc-pra b { color: #ff6a00; font-weight: 800; }
.cp-esc-pq { font-size: 14.5px; color: var(--cp-tx2); line-height: 1.5; margin: auto 0 0; }
.cp-esc-ou { display: flex; align-items: center; font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cp-tx3); }
.cp-esc-nota { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0; font-size: 14px; color: var(--cp-tx3); line-height: 1.5; }
.cp-esc-nota i { color: #ff6a00; margin-top: 3px; }

@media (max-width: 900px) {
	.cp-cols { display: none; }
	.cp-g-linha { grid-template-columns: 96px 1fr; gap: 9px; }
	.cp-g-nome { font-size: 13.5px; }
	.cp-barras { grid-template-columns: 1fr 1fr; gap: 8px; }
	.cp-barras .cp-barra:first-child { grid-column: 1; }
	.cp-barras .cp-barra.dir { grid-column: 2; }
	.cp-mid { align-items: flex-start; flex-direction: row; gap: 7px; margin-top: 5px; }
	.cp-escolha { grid-template-columns: 1fr; }
	.cp-esc-ou { justify-content: center; padding: 2px 0; }
}

/* modo claro */
html.theme-white .cp-grafico { box-shadow: 0 2px 10px rgba(0,0,0,.08); border: 1px solid var(--cp-bd); }


/* ════════════════════════════════════════════════════════════
   v0.4 — OS DOIS CARDS (substituem o gráfico de barras)
   ════════════════════════════════════════════════════════════ */
.cp-h2 { font-size: 13.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cp-tx3); margin: 32px 0 12px; }

.cp-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cp-c { background: var(--cp-card); border-radius: 16px; overflow: hidden; color: var(--cp-tx); display: flex; flex-direction: column; box-shadow: var(--cp-sh); }
.cp-c-a { border-top: 3px solid #0b8a5f; }
.cp-c-b { border-top: 3px solid #2563eb; }

.cp-c-top { padding: 15px 18px; border-bottom: 1px solid #f0f0f1; display: flex; align-items: center; gap: 11px; }
.cp-c-img { width: 46px; height: 46px; border-radius: 10px; object-fit: contain; background: var(--cp-card3); flex-shrink: 0; }
.cp-c-ini { width: 46px; height: 46px; border-radius: 10px; background: var(--cp-card3); display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 800; color: var(--cp-tx3); flex-shrink: 0; }
.cp-c-nome { display: block; font-size: 17.5px; font-weight: 800; color: var(--cp-tx); line-height: 1.2; }
.cp-c-preco { display: block; font-size: 14px; color: var(--cp-tx3); margin-top: 2px; }

/* "Escolha se ..." — a frase que decide */
.cp-c-pra { padding: 14px 18px; background: var(--cp-ac-soft); border-bottom: 1px solid var(--cp-bd); }
.cp-c-lab { display: block; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cp-ac-tx); margin-bottom: 4px; }
.cp-c-txt { display: block; font-size: 17px; font-weight: 700; color: var(--cp-tx); line-height: 1.35; }

.cp-c-pts { list-style: none; padding: 12px 18px; margin: 0; flex: 1; }
.cp-pt { display: flex; gap: 9px; align-items: flex-start; padding: 6px 0; font-size: 15px; line-height: 1.45; }
.cp-pt i { width: 14px; text-align: center; margin-top: 3px; flex-shrink: 0; font-size: 13.5px; }
.cp-pt.mais { color: var(--cp-tx); }
.cp-pt.mais i { color: var(--cp-win-tx); }
.cp-pt.menos { color: var(--cp-tx3); }
.cp-pt.menos i { color: var(--cp-tx3); }
.cp-pt b { color: var(--cp-tx); font-weight: 700; }
.cp-pt.menos b { color: var(--cp-tx2); }

.cp-c-btn { display: block; margin: 4px 18px 18px; padding: 12px; background: #ff6a00; color: #fff; text-align: center; border-radius: 10px; font-weight: 700; font-size: 15.5px; }
.cp-c-btn:hover { background: #e85f00; color: #fff; }

@media (max-width: 800px) { .cp-cards { grid-template-columns: 1fr; } }
html.theme-white .cp-c { box-shadow: 0 2px 10px rgba(0,0,0,.08); border: 1px solid var(--cp-bd); }
html.theme-white .cp-h2 { color: var(--cp-tx2); }


/* ═══ O QUE MUDA DE VERDADE ═══ */
.cp-h2-n { float: right; font-size: 12.5px; font-weight: 700; color: #ff6a00; letter-spacing: 0; text-transform: none; }
.cp-difs2 { background: var(--cp-card); border-radius: 14px; overflow: hidden; color: var(--cp-tx); box-shadow: var(--cp-sh2); }
.cp-d-h { display: grid; grid-template-columns: 1fr 150px 1fr; padding: 11px 18px; background: var(--cp-card3); border-bottom: 1px solid #f0f0f1; font-size: 13.5px; font-weight: 700; color: var(--cp-tx3); }
.cp-d-h .b { text-align: right; }
.cp-d-l { display: grid; grid-template-columns: 1fr 150px 1fr; align-items: stretch; border-bottom: 1px solid #f4f4f5; }
.cp-d-v { padding: 15px 18px; }
/* ⭐ o lado que ganha fica VERDE — dá pra ver sem ler */
.cp-d-v.win { background:var(--cp-a); }
.cp-d-v.win .cp-d-num { color: var(--cp-win-tx); }
.cp-d-v.win .cp-d-txt { color: var(--cp-win-tx); }
.cp-d-l:last-child { border-bottom: 0; }
.cp-d-v { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; }
.cp-d-v.b { align-items: flex-end; text-align: right; }
.cp-d-num { font-size: 22px; font-weight: 800; color: var(--cp-tx3); line-height: 1.1; }
.cp-d-num small { font-size: 13.5px; font-weight: 600; }
.cp-d-num.win { color: var(--cp-tx); }
.cp-d-txt { font-size: 14px; color: var(--cp-tx3); line-height: 1.4; max-width: 30ch; }
.cp-d-num.win + .cp-d-txt { color: var(--cp-tx2); }
.cp-d-m { text-align: center; padding: 15px 8px; }
.cp-d-rot { display: block; font-size: 13.5px; font-weight: 700; color: var(--cp-tx2); margin-bottom: 5px; }
.cp-d-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; padding: 3px 8px; border-radius: 20px; }
.cp-d-tag i { font-size: 11px; }
.cp-d-a { background:var(--cp-a); color: var(--cp-win-tx); }
.cp-d-b { background:var(--cp-b); color:var(--cp-b-tx); }

/* ═══ NO RESTO, SÃO IGUAIS ═══ */
/* ⚠️ CARDS, não chips. Chip é etiqueta — some no meio do texto.
   Aqui cada ponto igual vira um card com ícone, o nome e o valor,
   porque "os dois têm IP68" é informação, não decoração. */
.cp-iguais { background: var(--cp-card); border-radius: 14px; padding: 18px; color: var(--cp-tx); box-shadow: var(--cp-sh2); }
.cp-ig-h { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 800; color: var(--cp-tx); margin-bottom: 5px; }
.cp-ig-h i { width: 26px; height: 26px; border-radius: 7px; background:var(--cp-a); color: var(--cp-win-tx); display: flex; align-items: center; justify-content: center; font-size: 12px; }
.cp-ig-s { font-size: 13.5px; color: var(--cp-tx3); margin: 0 0 14px 35px; }

.cp-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 9px; }
.cp-chip { display: flex; align-items: center; gap: 11px; background:var(--cp-neutro); border: 1px solid #edeef0; border-radius: 11px; padding: 11px 13px; }
.cp-chip-i { width: 32px; height: 32px; border-radius: 8px; background: var(--cp-card); border: 1px solid var(--cp-bd); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--cp-win-tx); font-size: 13px; }
.cp-chip-t { min-width: 0; }
.cp-chip-n { display: block; font-size: 14px; font-weight: 700; color: var(--cp-tx); line-height: 1.2; }
.cp-chip-v { display: block; font-size: 13px; color: var(--cp-tx3); margin-top: 2px; line-height: 1.3; }

.cp-ig-pe { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; color: var(--cp-tx2); margin: 14px 0 0; padding-top: 14px; border-top: 1px solid #f0f0f1; line-height: 1.55; }
.cp-ig-pe i { width: 26px; height: 26px; border-radius: 7px; background:var(--cp-ac-soft); color: #ff6a00; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.cp-ig-pe b { color: var(--cp-tx); }

@media (max-width: 800px) {
	.cp-d-h, .cp-d-l { grid-template-columns: 1fr 1fr; gap: 10px; }
	.cp-d-h .m, .cp-d-m { grid-column: 1/-1; order: -1; text-align: left; margin-bottom: 3px; }
	.cp-d-h .m { display: none; }
	.cp-d-v.b { align-items: flex-start; text-align: left; }
	.cp-d-num { font-size: 19px; }
	.cp-h2-n { float: none; display: block; margin-top: 3px; }
}
html.theme-white .cp-difs2, html.theme-white .cp-iguais { box-shadow: 0 2px 10px rgba(0,0,0,.08); border: 1px solid var(--cp-bd); }


/* ════════════════════════════════════════════════════════════
   v0.5 — prós/contras separados · selo com nome · ficha completa
   ════════════════════════════════════════════════════════════ */

/* ═══ OS BLOCOS A FAVOR / CONTRA ═══ */
.cp-bloco { border-top: 1px solid #f0f0f1; }
.cp-bloco-h { display: flex; align-items: center; gap: 7px; padding: 10px 18px 2px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.cp-bloco-h i { font-size: 12.5px; }
.cp-bloco-bom .cp-bloco-h { color: var(--cp-win-tx); }
.cp-bloco-ruim .cp-bloco-h { color:var(--cp-ruim-tx); }
.cp-bloco-ruim { background:var(--cp-neutro2); }
.cp-bloco .cp-c-pts { padding: 4px 18px 12px; }

.cp-pt.mais i { color: var(--cp-win-tx); }
.cp-pt.menos { color: #8a6a6a; }
.cp-pt.menos i { color: #d99; }
.cp-pt.menos b { color:var(--cp-ruim-tx); }

/* ═══ O SELO COM NOME COMPLETO ═══ */
.cp-d-tag { max-width: 100%; }
.cp-d-melhor { display: block; font-size: 12px; color: var(--cp-tx3); margin-top: 4px; font-weight: 600; }

/* ═══ A FICHA COMPLETA ═══ */
.cp-ficha { background: var(--cp-card); border-radius: 14px; overflow: hidden; color: var(--cp-tx); box-shadow: var(--cp-sh2); }
/* ⚠️ spec | produto 1 | produto 2 — a especificação na PRIMEIRA coluna.
   Antes era produto|spec|produto e o olho ia e voltava pra achar o nome da
   linha. Agora você lê de cima a baixo procurando o que quer, e os dois
   valores ficam lado a lado. */
.cp-f-h { display: grid; grid-template-columns: 190px 1fr 1fr; gap: 1px; background: var(--cp-bd); border-top: 1px solid var(--cp-bd); }
.cp-f-h > span { padding: 14px 16px; background: var(--cp-card); font-size: 14.5px; font-weight: 800; color: var(--cp-tx); display: flex; align-items: center; gap: 10px; }
.cp-f-p { min-width: 0; }
.cp-f-p > span { color: var(--cp-tx); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-f-img { width: 30px; height: 30px; border-radius: 7px; object-fit: contain; background: var(--cp-card3); flex-shrink: 0; }

.cp-f-g { display: flex; align-items: center; gap: 9px; padding: 12px 16px 9px; background: var(--cp-card3); border-top: 1px solid var(--cp-bd); font-size: 12.5px; font-weight: 800; color: var(--cp-tx2); letter-spacing: .07em; text-transform: uppercase; }
.cp-f-g i { color: #ff6a00; font-size: 14px; width: 15px; text-align: center; }

.cp-f-l { display: grid; grid-template-columns: 190px 1fr 1fr; gap: 1px; background: var(--cp-bd2); font-size: 15px; }
.cp-f-r { padding: 11px 16px; background:var(--cp-neutro2); font-size: 13.5px; font-weight: 600; color: var(--cp-tx2); display: flex; flex-direction: column; justify-content: center; }
.cp-f-v { padding: 11px 16px; background: var(--cp-card); color: var(--cp-tx); min-width: 0; display: flex; flex-direction: column; justify-content: center; }
/* ⭐ o fundo VERDE de quem ganha */
.cp-f-v.win { background:var(--cp-a); color: var(--cp-win-tx); font-weight: 700; }
.cp-f-v small { display: block; font-size: 12px; color: var(--cp-tx3); margin-top: 2px; }
.cp-f-l:hover .cp-f-v { background: var(--cp-card3); }
.cp-f-l:hover .cp-f-v.win { background:var(--cp-a3); }

/* ═══ O ACCORDEON "O QUE É ISSO?" — traduz o termo técnico pra leigo ═══ */
.cp-f-q { font: inherit; text-align: left; background: none; border: 0; padding: 0; margin: 0;
	cursor: pointer; color: var(--cp-tx2); font-weight: 600; display: inline-flex; align-items: baseline;
	gap: 6px; flex-wrap: wrap; }
.cp-f-q:hover { color: #ff6a00; }
.cp-f-q i { font-size: 12.5px; color: var(--cp-tx3); transition: color .15s, transform .15s; position: relative; top: 1px; }
.cp-f-q:hover i { color: #ff6a00; }
.cp-f-q.aberto i { color: #ff6a00; transform: rotate(180deg); }
.cp-f-q:focus-visible { outline: 2px solid #ff6a00; outline-offset: 2px; border-radius: 3px; }
/* a explicação ocupa a linha inteira, abaixo do termo */
.cp-f-exp[hidden] { display: none !important; }   /* hidden precisa vencer o display:flex abaixo */
.cp-f-exp { grid-column: 1 / -1; display: flex; gap: 11px; align-items: flex-start;
	padding: 13px 18px; background: var(--cp-ac-soft); border-top: 1px solid #f1e9dd;
	border-left: 3px solid #ffb877; animation: cp-exp-in .18s ease; }
.cp-f-exp i { color: #ff9a3c; font-size: 15px; flex-shrink: 0; position: relative; top: 2px; }
.cp-f-exp p { margin: 0; font-size: 14px; line-height: 1.6; color:var(--cp-tx2); }
@keyframes cp-exp-in { from { opacity: 0; } to { opacity: 1; } }
html.theme-white .cp-f-exp { background: var(--cp-ac-soft); }
/* vantagem leve no card (entrou só pra dar os dois lados) — visual mais discreto */
.cp-pt-leve { opacity: .82; }
.cp-pt-leve em { font-style: normal; color: var(--cp-tx3); font-size: .92em; }

/* ═══ ANTES DE DECIDIR (o fechamento) ═══ */
.cp-fecha { background: var(--cp-card); border-radius: 14px; overflow: hidden; color: var(--cp-tx); box-shadow: var(--cp-sh2); }
.cp-fe-i { display: flex; gap: 13px; align-items: flex-start; padding: 16px 18px; border-top: 1px solid #f4f4f5; }
.cp-fe-i:first-child { border-top: 0; }
.cp-fe-i > i { width: 32px; height: 32px; border-radius: 9px; background:var(--cp-ac-soft); color: #ff6a00; display: flex; align-items: center; justify-content: center; font-size: 14.5px; flex-shrink: 0; }
.cp-fe-i strong { display: block; font-size: 16px; font-weight: 800; color: var(--cp-tx); margin-bottom: 3px; line-height: 1.3; }
.cp-fe-i p { font-size: 15px; color: var(--cp-tx2); line-height: 1.55; margin: 0; }

@media (max-width: 800px) {
	.cp-f-h, .cp-f-l { grid-template-columns: 1fr 1fr; gap: 1px; }
	.cp-f-r { grid-column: 1/-1; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; padding: 9px 14px 5px; }
	.cp-f-h .cp-f-r { display: none; }
	.cp-f-h > span, .cp-f-v { padding: 10px 14px; }
	.cp-f-v::before { content: attr(data-p); display: block; font-size: 11.5px; color: var(--cp-tx3); font-weight: 700; margin-bottom: 3px; }
	.cp-chips { grid-template-columns: 1fr; }
}
html.theme-white .cp-ficha, html.theme-white .cp-fecha { box-shadow: 0 2px 10px rgba(0,0,0,.08); border: 1px solid var(--cp-bd); }


/* ═══ v0.7 — a dica de ordem no rótulo ═══ */
.cp-d-dica { display: block; font-size: 11px; color: var(--cp-tx3); margin-top: 2px; font-weight: 500; }
/* na ficha o rótulo é flex-column, então a dica já quebra sozinha —
   mas precisa do line-height certo pra não colar */
.cp-f-r .cp-d-dica { font-size: 11.5px; margin-top: 3px; line-height: 1.3; text-transform: none; letter-spacing: 0; }


/* ════════════════════════════════════════════════════════════
   v0.8 — O DESENHO DO TAMANHO
   ════════════════════════════════════════════════════════════ */
.cp-dz { background: var(--cp-card); border-radius: 14px; padding: 20px; color: var(--cp-tx); box-shadow: var(--cp-sh2); display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center; }
.cp-dz-svg { width: 190px; flex-shrink: 0; }
.cp-dz-svg svg { width: 100%; height: auto; display: block; }
/* o de trás com preenchimento suave, o da frente só contorno — assim
   dá pra ver um DENTRO do outro, que é o ponto */
.cp-dz-b { fill: rgba(37,99,235,.10); stroke: #2563eb; stroke-width: 2; }
.cp-dz-a { fill: rgba(11,138,95,.06); stroke: #0b8a5f; stroke-width: 2; stroke-dasharray: 5 3; }
.cp-dz-info { min-width: 0; }
.cp-dz-l { display: flex; align-items: center; gap: 9px; padding: 7px 0; flex-wrap: wrap; }
.cp-dz-n { font-weight: 700; font-size: 14.5px; color: var(--cp-tx); }
.cp-dz-m { font-size: 13.5px; color: var(--cp-tx3); }
.cp-dz-m b { color: var(--cp-tx); }
.cp-dz-txt { font-size: 14px; color: var(--cp-tx2); line-height: 1.55; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid #f0f0f1; }
.cp-dz-txt b { color: var(--cp-tx); font-weight: 700; }

/* ════════════════════════════════════════════════════════════
   v0.8 — O DESENHO DAS CÂMERAS
   ════════════════════════════════════════════════════════════ */
.cp-cams { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cp-cam-col { background: var(--cp-card); border-radius: 14px; padding: 18px; color: var(--cp-tx); box-shadow: var(--cp-sh2); }
.cp-cam-top { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.cp-cam-nome { font-weight: 800; font-size: 15px; color: var(--cp-tx); }
.cp-cam-q { margin-left: auto; font-size: 12px; color: var(--cp-tx3); font-weight: 600; }

/* o módulo — o quadrado das lentes, como no aparelho */
.cp-modulo { display: inline-flex; align-items: center; gap: 10px; background: var(--cp-card3); border: 1px solid var(--cp-bd); border-radius: 16px; padding: 12px 14px; margin-bottom: 15px; }
.cp-lente { position: relative; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #4a4f57 0%, #23262b 55%, #14161a 100%); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #d8dade, inset 0 1px 3px rgba(0,0,0,.6); flex-shrink: 0; }
.cp-lente-in { width: 42%; height: 42%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #2b6fd4 0%, #12305e 70%); box-shadow: inset 0 0 4px rgba(0,0,0,.8); }
.cp-lente-mp { position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 700; color: var(--cp-tx3); white-space: nowrap; }
.cp-lente.vazia { width: 26px; height: 26px; background: none; border: 2px dashed #d0d2d6; box-shadow: none; }

.cp-cam-lista { list-style: none; margin: 8px 0 0; padding: 0; }
.cp-cam-li { display: grid; grid-template-columns: 78px 1fr; gap: 4px 10px; padding: 9px 0; border-top: 1px solid #f2f2f3; }
.cp-cam-li:first-child { border-top: 0; }
.cp-cam-n { font-size: 13px; font-weight: 700; color: var(--cp-tx); }
.cp-cam-v { font-size: 13.5px; color: var(--cp-tx); font-weight: 600; }
.cp-cam-f { grid-column: 2; font-size: 12.5px; color: var(--cp-tx3); }
.cp-cam-li.nao .cp-cam-v { color: var(--cp-tx3); font-weight: 400; }
.cp-cam-li.nao .cp-cam-n { color: var(--cp-tx3); }

.cp-cam-pe { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; color: var(--cp-tx3); margin: 12px 0 0; line-height: 1.55; }
.cp-cam-pe i { color: #ff6a00; margin-top: 3px; }
.cp-cam-pe b { color: var(--cp-tx2); }

@media (max-width: 800px) {
	.cp-dz { grid-template-columns: 1fr; gap: 16px; }
	.cp-dz-svg { width: 150px; margin: 0 auto; }
	.cp-cams { grid-template-columns: 1fr; }
}
html.theme-white .cp-dz, html.theme-white .cp-cam-col { box-shadow: 0 2px 10px rgba(0,0,0,.08); border: 1px solid var(--cp-bd); }


/* ════════════════════════════════════════════════════════════
   v0.8 — O DESENHO DA BATERIA POR ATIVIDADE
   ════════════════════════════════════════════════════════════ */
.cp-bt { background: var(--cp-card); border-radius: 14px; padding: 18px; color: var(--cp-tx); box-shadow: var(--cp-sh2); }
.cp-bt-l { display: grid; grid-template-columns: 150px 1fr 1fr; gap: 12px; align-items: center; padding: 13px 0; border-top: 1px solid #f2f2f3; }
.cp-bt-l:first-child { border-top: 0; padding-top: 4px; }
.cp-bt-h { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.cp-bt-h i { width: 28px; height: 28px; border-radius: 8px; background:var(--cp-ac-soft); color: #ff6a00; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.cp-bt-n { font-size: 14.5px; font-weight: 700; color: var(--cp-tx); }
.cp-bt-d { width: 100%; font-size: 12px; color: var(--cp-tx3); padding-left: 37px; }
.cp-bt-p { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cp-bt-lb { font-size: 11px; font-weight: 800; color: var(--cp-tx3); width: 30px; flex-shrink: 0; }

/* a pilha — o desenho da bateria */
.cp-pilha { position: relative; flex: 1; height: 30px; border: 2px solid #d5d7db; border-radius: 6px; background:var(--cp-neutro2); overflow: hidden; min-width: 0; }
/* o "bico" da pilha, do lado direito */
.cp-pilha::after { content: ''; position: absolute; right: -6px; top: 50%; transform: translateY(-50%); width: 4px; height: 11px; background:var(--cp-trilho); border-radius: 0 2px 2px 0; }
.cp-pilha-f { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #9aa0a8, #b6bbc2); }
.cp-pilha-t { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); font-size: 13px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
/* ⭐ verde pra quem dura mais nesta atividade */
.cp-pilha.win { border-color: var(--cp-win-tx); }
.cp-pilha.win::after { background: #0b8a5f; }
.cp-pilha.win .cp-pilha-f { background: linear-gradient(90deg, #0b8a5f, #22b37f); }

.cp-bt-pe { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--cp-tx2); margin: 14px 0 0; padding-top: 14px; border-top: 1px solid #f0f0f1; line-height: 1.55; }
.cp-bt-pe i { width: 26px; height: 26px; border-radius: 7px; background:var(--cp-warn-bg); color: var(--cp-warn-tx); display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.cp-bt-pe b { color: var(--cp-tx); }

@media (max-width: 800px) {
	.cp-bt-l { grid-template-columns: 1fr; gap: 7px; }
	.cp-bt-d { padding-left: 0; }
}
html.theme-white .cp-bt { box-shadow: 0 2px 10px rgba(0,0,0,.08); border: 1px solid var(--cp-bd); }


/* ═══ v1.0 — a busca que não acha vira convite, não beco ═══ */
.cp-sug-vazio b { color: var(--cp-tx); }
.cp-sug-sep { padding: 9px 13px 5px; font-size: 12px; font-weight: 700; color: var(--cp-tx3); background: var(--cp-card3); border-top: 1px solid #eee; letter-spacing: .03em; }


/* ═══ v1.1 — o aviso de categoria diferente ═══ */
.cp-sug-troca { border-top: 1px solid #eee; }
.cp-sug-troca .cp-sug-ico { background:var(--cp-ac-soft); color: #ff6a00; }





/* ════════════════════════════════════════════════════════════
   ⭐ O GRÁFICO DE FPS POR JOGO E RESOLUÇÃO (cp-fx)
   ────────────────────────────────────────────────────────────
   Abas de resolução (720p/1080p/1440p/4K). Em cada aba, um par de
   barras de FPS ABSOLUTO por jogo. Escala comum por resolução (o
   maior FPS = 100%). Verde na barra de quem ganha o jogo.
   ════════════════════════════════════════════════════════════ */
.cp-fx { background: var(--cp-card); border-radius: 14px; padding: 18px 20px 20px; color: var(--cp-tx); box-shadow: var(--cp-sh2); }

/* ── as abas de resolução ── */
.cp-fx-tabs { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 4px; }
.cp-fx-tabs-lab { font-size: 13px; font-weight: 700; color: var(--cp-tx2); margin-right: 3px; }
.cp-fx-tab { font: inherit; cursor: pointer; border: 1.5px solid #e3e5e9; background:var(--cp-neutro); color: var(--cp-tx2);
	font-size: 13.5px; font-weight: 700; padding: 7px 15px; border-radius: 999px; transition: all .13s; }
.cp-fx-tab:hover { border-color: #ffbd85; color: #ff6a00; }
.cp-fx-tab.on { background: #ff6a00; border-color: #ff6a00; color: #fff; }
.cp-fx-tab:focus-visible { outline: 2px solid #ff6a00; outline-offset: 2px; }

/* ── os painéis (um por resolução, só o ativo aparece) ── */
.cp-fx-painel { display: none; padding-top: 12px; }
.cp-fx-painel.on { display: block; animation: cp-exp-in .2s ease; }
.cp-fx-res-desc { font-size: 12.5px; color: var(--cp-tx3); margin: 0 0 14px; }

/* ── cada jogo ── */
.cp-fx-jogo { padding: 11px 0; border-top: 1px solid var(--cp-bd); }
.cp-fx-jogo:first-of-type { border-top: 0; padding-top: 2px; }
.cp-fx-nome { font-size: 14px; font-weight: 800; color: var(--cp-tx2); margin-bottom: 8px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.cp-fx-badge { font-size: 11.5px; font-weight: 800; color: var(--cp-win-tx); background:var(--cp-a); padding: 2px 9px; border-radius: 999px; }
.cp-fx-eq { font-size: 11.5px; font-weight: 700; color: var(--cp-tx3); background: var(--cp-card3); padding: 2px 9px; border-radius: 999px; }

.cp-fx-par { display: flex; flex-direction: column; gap: 7px; }
.cp-fx-row { display: grid; grid-template-columns: 130px 1fr auto; gap: 12px; align-items: center; }
.cp-fx-lab { font-size: 13px; font-weight: 600; color: var(--cp-tx2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-fx-track { position: relative; height: 20px; background:var(--cp-neutro); border-radius: 5px; overflow: hidden; }
.cp-fx-bar { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; min-width: 3px; transition: width .35s ease; }
.cp-fx-bar.a { background: linear-gradient(90deg,#3aa0ff,#2563eb); }
.cp-fx-bar.b { background: linear-gradient(90deg,#b3b8c2,#8b93a1); }
.cp-fx-row.win .cp-fx-bar.a,
.cp-fx-row.win .cp-fx-bar.b { background: linear-gradient(90deg,#22c993,#0b8a5f); }
.cp-fx-fps { font-size: 14px; font-weight: 800; color: var(--cp-tx); white-space: nowrap; min-width: 62px; text-align: right; }
.cp-fx-fps small { font-size: 11px; font-weight: 600; color: var(--cp-tx3); }
.cp-fx-row.win .cp-fx-fps { color: var(--cp-win-tx); }

/* ── a leitura de quem ganha ── */
.cp-fx-leitura { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--cp-tx2); margin: 14px 0 0; padding-top: 14px; border-top: 1px solid #f0f0f1; line-height: 1.55; }
.cp-fx-leitura i { width: 26px; height: 26px; border-radius: 7px; background:var(--cp-warn-bg); color: var(--cp-warn-tx); display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.cp-fx-leitura b { color: var(--cp-tx); }
.cp-fx-leitura em { color: #ff6a00; font-style: normal; font-weight: 700; }

/* ── o bloco de RAY TRACING ── */
.cp-fx-rt { margin-top: 18px; padding: 16px 18px; background: var(--cp-rt-bg); border: 1px solid var(--cp-rt-bd); border-radius: 12px; }
.cp-fx-rt-h { font-size: 15px; font-weight: 800; color: var(--cp-rt-tx); margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }
.cp-fx-rt-h i { color: #7c5cdf; font-size: 13px; }
.cp-fx-rt-p { font-size: 13.5px; color: var(--cp-tx2); line-height: 1.55; margin: 0 0 14px; }
.cp-fx-rt-p b { color: var(--cp-rt-tx); }
.cp-fx-rt-res { padding: 9px 0; border-top: 1px solid #ece6fb; }
.cp-fx-rt-res:first-of-type { border-top: 0; }
.cp-fx-rt-lab { display: inline-block; font-size: 12px; font-weight: 800; color: #7c5cdf; letter-spacing: .05em; margin-bottom: 8px; text-transform: uppercase; }

.cp-fx-nota { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; color: var(--cp-tx3); margin: 16px 0 0; padding-top: 14px; border-top: 1px solid #f0f0f1; line-height: 1.5; }
.cp-fx-nota i { color: var(--cp-tx3); font-size: 13px; position: relative; top: 1px; flex-shrink: 0; }
.cp-fx-nota b { color: var(--cp-tx2); }

@media (max-width: 700px) {
	.cp-fx-row { grid-template-columns: 90px 1fr auto; gap: 9px; }
	.cp-fx-lab { font-size: 12px; }
	.cp-fx-fps { font-size: 13px; min-width: 54px; }
}
html.theme-white .cp-fx { box-shadow: 0 2px 10px rgba(0,0,0,.08); border: 1px solid var(--cp-bd); }


/* ═══ ⭐ O AVISO DE GARGALO (processador) ═══ */
.cp-garg { display: flex; gap: 14px; align-items: flex-start; background: var(--cp-warn-bg); border: 1px solid var(--cp-warn-bd); border-radius: 14px; padding: 18px; margin-bottom: 16px; }
.cp-garg > i { width: 34px; height: 34px; border-radius: 9px; background: var(--cp-card); color: var(--cp-warn-tx); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; border: 1px solid var(--cp-warn-bd); }
.cp-garg strong { display: block; font-size: 15.5px; font-weight: 800; color: var(--cp-warn-tx); margin-bottom: 5px; line-height: 1.3; }
.cp-garg p { font-size: 14.5px; color: var(--cp-warn-tx); line-height: 1.55; margin: 0 0 8px; }
.cp-garg-pe { display: block; font-size: 13.5px; color: #8a7530; line-height: 1.5; }
.cp-garg-pe b { color: var(--cp-warn-tx); font-weight: 700; }


/* ════════════════════════════════════════════════════════════
   📱 CELULAR (≤480px) — o passo que faltava
   Os breakpoints de 900/800px cuidam do tablet. Aqui apertamos
   pro celular de verdade (360–430px): menos padding, tudo que
   ainda era 2 colunas vira empilhado e legível, fontes menores.
   Vale nos DOIS temas (os cards já são claros nos dois).
   ════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
	/* respiro geral: o header do tema é menor no mobile, então
	   subimos o conteúdo e encostamos menos nas bordas */
	#tec8-compare { padding: 90px 12px 40px; }
	.cp-hero { margin-bottom: 22px; }
	.cp-hero h1 { font-size: 30px; }
	.cp-hero p { font-size: 15px; }

	/* seletor: os campos já empilham em 900px; aqui só encolhe */
	.cp-in { padding: 14px 40px 14px 14px; font-size: 16px; }
	.cp-atalhos { gap: 6px; }
	.cp-atalho { font-size: 13px; padding: 6px 12px; }

	/* títulos de seção */
	.cp-h2 { font-size: 18px; }
	.cp-veredito h2 { font-size: 21px; }

	/* ── os cards "qual comprar": empilham (já em 800px) e encolhem ── */
	.cp-c-top { padding: 14px 15px; }
	.cp-c-nome { font-size: 16px; }
	.cp-c-pra, .cp-bloco { padding: 12px 15px; }
	.cp-c-pts li { font-size: 13.5px; }

	/* ── a ficha técnica: de 2 colunas pra 1, com o nome do produto à
	   esquerda (discreto) e o valor à direita (destacado), na mesma linha.
	   Fica compacto e legível — o olho corre os valores na coluna direita. ── */
	.cp-f-h, .cp-f-l { grid-template-columns: 1fr; }
	.cp-f-l .cp-f-r { padding: 9px 14px 3px; font-weight: 800; font-size: 14px; color: var(--cp-ac-tx); background: var(--cp-card2); }
	.cp-f-v { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 14px; }
	.cp-f-v:last-child { padding-bottom: 11px; }
	.cp-f-v::before { content: attr(data-p); display: block; font-size: 12px; color: var(--cp-tx3); font-weight: 600; margin-bottom: 0; flex-shrink: 0; }
	.cp-f-v { font-weight: 700; font-size: 15.5px; }   /* o valor em si, destacado */
	.cp-f-h { display: none; } /* o cabeçalho "produto A | produto B" não faz sentido em 1 coluna */

	/* ── o gráfico de FPS por resolução ── */
	.cp-fx { padding: 16px 13px; }
	.cp-fx-tabs { flex-wrap: wrap; gap: 6px; }
	.cp-fx-tab { padding: 7px 13px; font-size: 13px; }
	.cp-fx-row { grid-template-columns: 1fr auto; gap: 4px 8px; }
	.cp-fx-lab { grid-column: 1 / -1; font-size: 12.5px; font-weight: 700; }
	.cp-fx-track { grid-column: 1; }
	.cp-fx-fps { grid-column: 2; font-size: 13px; min-width: 48px; }
	.cp-fx-jogo { font-size: 14px; }
	.cp-fx-rt { padding: 14px 13px; }

	/* ── o aviso de gargalo ── */
	.cp-garg { padding: 15px; gap: 11px; }
	.cp-garg strong { font-size: 14.5px; }
	.cp-garg p { font-size: 13.5px; }

	/* ── os desenhos (tamanho/bateria) já empilham em 800px ── */
	.cp-dz { padding: 16px; gap: 16px; }

	/* accordeon leigo: a explicação ocupa a linha inteira já;
	   aqui só reduz o texto pra caber melhor */
	.cp-f-exp { padding: 11px 14px; }
	.cp-f-exp p { font-size: 13px; }
}

/* ════════════════════════════════════════════════════════════
   📱 CELULAR PEQUENO (≤360px) — Galaxy S/A básicos, iPhone SE
   ════════════════════════════════════════════════════════════ */
@media (max-width: 360px) {
	#tec8-compare { padding: 84px 10px 36px; }
	.cp-hero h1 { font-size: 26px; }
	.cp-fx-fps { min-width: 42px; font-size: 12px; }
	.cp-c-pts li { font-size: 13px; }
	.cp-fx-tab { padding: 6px 11px; font-size: 12.5px; }
}

/* ══════════════════════════════════════════════════════════
   OFERTAS / COMPARADOR DE PREÇO (estilo Buscapé)
   ══════════════════════════════════════════════════════════ */
/* cada card com a SUA altura — senão o produto com 1 loja fica com um
   vazio enorme só pra acompanhar o do lado (align-items:start) */
.cp-of-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:10px 0 4px;align-items:start}
@media(max-width:720px){.cp-of-grid{grid-template-columns:1fr}}
.cp-of-bloco{background:var(--cp-card);border:1px solid var(--cp-bd);border-radius:14px;overflow:hidden;box-shadow:var(--cp-sh2)}
.cp-of-cab{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;
	padding:11px 14px;background:var(--cp-card2);border-bottom:1px solid var(--cp-bd)}
.cp-of-titulo{font-weight:700;font-size:14px;color:var(--cp-tx);line-height:1.25}
.cp-of-filtro{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--cp-tx3)}
.cp-of-ord{font:inherit;font-size:11.5px;padding:3px 9px;border-radius:999px;cursor:pointer;
	background:transparent;color:var(--cp-tx2);border:1px solid var(--cp-bd)}
.cp-of-ord.ativo{background:var(--cp-ac);color:#fff;border-color:var(--cp-ac)}
.cp-of-lista{display:flex;flex-direction:column;container-type:inline-size}
/* ── LINHA DE OFERTA: 4 colunas — logo | parcelado | à vista | botão ── */
.cp-of-linha{display:grid;
	/* o card do compare é estreito (metade da tela), então as 4 áreas
	   ficam em 2 faixas: loja+botão em cima, parcelado+à vista embaixo.
	   Em telas largas (container > 560px) volta pra 1 faixa só. */
	grid-template-columns:1fr auto;
	grid-template-areas:"loja acao" "parc vista" "extra extra";
	gap:8px 12px;align-items:center;padding:14px;border-bottom:1px solid var(--cp-bd)}
@container (min-width: 560px){
	.cp-of-linha{grid-template-columns:minmax(90px,1.2fr) minmax(80px,.9fr) minmax(92px,1fr) auto;
		grid-template-areas:"loja parc vista acao" "extra extra extra extra"}
}
/* fallback pra quem não tem @container: em tela larga o card comporta 1 faixa */
@supports not (container-type: inline-size){
	@media (min-width:1280px){
		.cp-of-linha{grid-template-columns:minmax(90px,1.2fr) minmax(80px,.9fr) minmax(92px,1fr) auto;
			grid-template-areas:"loja parc vista acao" "extra extra extra extra"}
	}
}
.cp-of-linha:last-child{border-bottom:0}
/* destaque do menor preço: uma barrinha na lateral + um véu MUITO leve.
   Antes o gradiente cobria 60% da linha e no branco ficava pesado. */
.cp-of-menor{background:linear-gradient(90deg,var(--cp-win) 0,transparent 28%);
	box-shadow:inset 3px 0 0 var(--cp-win-tx)}
.cp-of-c1{grid-area:loja;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.cp-of-c2{grid-area:parc;font-size:12.5px;color:var(--cp-tx2);line-height:1.3;align-self:end}
.cp-of-c3{grid-area:vista;display:flex;flex-direction:column;line-height:1.15;align-items:flex-end;text-align:right}
.cp-of-c4{grid-area:acao;justify-self:end}
.cp-of-parc-n{font-weight:700;color:var(--cp-tx)}
.cp-of-parc-v{font-weight:600;color:var(--cp-tx)}
.cp-of-sem{color:var(--cp-tx3)}
.cp-of-tag{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
	background:var(--cp-win);color:var(--cp-win-tx);border:1px solid var(--cp-win-tx);
	padding:2px 7px;border-radius:6px;white-space:nowrap}
/* selo da loja: quando NÃO há logo, um badge com a cor real da marca —
   inicial num quadrado colorido + nome. Dá identidade sem inventar logo. */
.cp-of-marca{display:inline-flex;align-items:center;gap:7px}
.cp-of-ini{display:inline-flex;align-items:center;justify-content:center;
	width:24px;height:24px;border-radius:7px;flex:0 0 auto;
	background:var(--loja-cor,var(--cp-ac));color:#fff;
	font-weight:800;font-size:13px;line-height:1;
	box-shadow:0 1px 3px rgba(0,0,0,.25)}
.cp-of-selo{font-weight:800;font-size:13.5px;color:var(--loja-cor,var(--cp-tx));line-height:1.15}
.cp-of-logo{height:28px;width:auto;max-width:120px;object-fit:contain}
.cp-of-avista{font-size:19px;font-weight:800;color:var(--cp-tx);line-height:1}
.cp-of-avista-lbl{font-size:11px;color:var(--cp-tx3)}
/* botão de ação — mesmo padrão do tema (#ff6a00, texto branco, hover
   mais claro subindo 2px). Antes era preto #111, que destoava do site. */
.cp-of-btn{display:inline-block;background:var(--cp-ac);color:#fff;font-weight:700;font-size:12.5px;
	padding:10px 18px;border-radius:12px;text-decoration:none;white-space:nowrap;
	transition:background-color .2s ease, transform .15s ease}
.cp-of-btn:hover{background:var(--cp-ac-hover);transform:translateY(-2px);color:#fff}
/* ordenar (select) */
.cp-of-ordlbl{display:inline-flex;align-items:center;gap:8px}
.cp-of-qtd{font-size:11.5px;color:var(--cp-tx3)}
.cp-of-sel{font:inherit;font-size:12px;padding:5px 10px;border-radius:8px;
	border:1px solid var(--cp-bd);background:var(--cp-card);color:var(--cp-tx);cursor:pointer}
.cp-of-btn-off{background:var(--cp-card3);color:var(--cp-tx3);cursor:default}

/* ── versões do mesmo modelo (ex.: RTX 4060 da ASUS, Gigabyte, Galax…) ── */
.cp-of-versao{font-size:11.5px;color:var(--cp-tx2);background:var(--cp-card3);
	padding:2px 8px;border-radius:999px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
/* cor do produto — o mesmo modelo sai em várias cores, com preços diferentes */
.cp-of-cor{font-size:11px;color:var(--cp-tx2);border:1px solid var(--cp-bd);
	padding:1px 8px;border-radius:999px;white-space:nowrap}
.cp-of-cor-mini{margin-left:6px;font-size:10.5px;padding:0 6px;opacity:.85}
.cp-of-extra{grid-area:extra;margin-top:6px}
.cp-of-outras{font-size:12px}
.cp-of-outras>summary{cursor:pointer;color:var(--cp-tx2);font-size:11.5px;
	padding:3px 0;list-style:none;display:inline-flex;align-items:center;gap:5px;user-select:none}
.cp-of-outras>summary::-webkit-details-marker{display:none}
.cp-of-outras>summary::before{content:"▸";font-size:10px;transition:transform .12s}
.cp-of-outras[open]>summary::before{transform:rotate(90deg)}
.cp-of-outras>summary:hover{color:var(--cp-ac)}
.cp-of-vlista{display:flex;flex-direction:column;gap:1px;margin-top:5px;
	border-left:2px solid var(--cp-bd);padding-left:10px}
.cp-of-vlinha{display:flex;justify-content:space-between;align-items:center;gap:12px;
	padding:6px 4px;text-decoration:none;border-radius:6px;color:var(--cp-tx2)}
.cp-of-vlinha:hover{background:var(--cp-card3);color:var(--cp-tx)}
.cp-of-vnome{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-of-vpreco{font-size:12.5px;font-weight:700;color:var(--cp-tx);white-space:nowrap}


/* ══════════════════════════════════════════════════════════════
   AS DUAS COLUNAS DO RODAPÉ DO HUB                (26/07/2026)
   ------------------------------------------------------------
   Últimas comparações | Mais comparados

   Não havia CSS nenhum para estes blocos — por isso apareciam
   como texto cru, sem formatação, embaixo do seletor.

   Tudo aqui usa as variáveis que o plugin já define no topo
   deste arquivo, então funciona nos dois temas sem duplicar
   nada. Nenhuma cor nova foi inventada.
   ══════════════════════════════════════════════════════════════ */

.cp-hub-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-top: 46px;
}
.cp-hub-cols--uma { grid-template-columns: 1fr; max-width: 620px; margin-inline: auto; }

.cp-bloco {
	background: var(--cp-card);
	border: 1px solid var(--cp-bd);
	border-radius: 16px;
	padding: 24px 26px 12px;
}

.cp-bloco-tit {
	margin: 0 0 4px;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--cp-tx);
}
.cp-bloco-sub {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--cp-tx3);
}

/* A LISTA
   O contador é do CSS, não do HTML: assim o número acompanha a
   ordem real dos itens mesmo se um for removido, e o <ol> não
   precisa de marcador próprio. */
.cp-bloco-lista {
	counter-reset: cp-n;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* RECUO PENDURADO em vez de grid.
   Com grid de 3 colunas o número ficava longe do texto e a data
   grudava na borda direita do card. Aqui tudo flui como uma frase
   só — "1. Produto A vs Produto B  há 11h" — e as linhas que
   quebram alinham embaixo do texto, não embaixo do número. */
/* ⚠️ O reset do tema tem "* { line-height: 1 }". Como é o seletor
   universal, ele aplica DIRETO em cada elemento — a herança nunca
   chega no filho. Por isso o line-height precisa ser declarado em
   cada elemento de texto, não só no <li>. Sem isso as linhas
   ficam coladas umas nas outras. */
.cp-item {
	counter-increment: cp-n;
	display: block;
	position: relative;
	padding: 18px 0 18px 30px;
	border-top: 1px solid var(--cp-bd2);
	line-height: 1.55;
	background: none;
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
	border-radius: 0;
}
.cp-item:first-child { border-top: none; padding-top: 4px; }
.cp-item:last-child { padding-bottom: 20px; }

.cp-item::before {
	content: counter(cp-n) ".";
	position: absolute;
	left: 0;
	top: 18px;
	min-width: 24px;   /* cabe o "10." sem encostar no texto */
	color: var(--cp-ac);
	font-weight: 700;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}
.cp-item:first-child::before { top: 4px; }

.cp-link {
	display: block;
	color: var(--cp-tx);
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1.55;
	text-decoration: none;
	transition: color .15s ease;
	flex: none;
	min-width: 0;
}
.cp-link:hover { color: var(--cp-ac); }
.cp-link-vs {
	color: var(--cp-tx3);
	font-weight: 400;
	font-size: 12.5px;
	line-height: 1.55;
	text-transform: lowercase;
	padding: 0 3px;
	margin: 0;
}

/* A data em linha própria, embaixo do título. Ficava empurrada
   para a borda direita do card e criava uma coluna irregular
   quando os títulos tinham comprimentos diferentes. */
.cp-quando {
	display: block;
	margin: 5px 0 0;
	color: var(--cp-tx3);
	font-size: 12.5px;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
	flex: none;
}

/* Estado de carregando / vazio: sem número e sem divisória. */
.cp-item-vazio {
	padding-left: 0;
	line-height: 1.55;
	color: var(--cp-tx3);
	font-size: 14px;
	border-top: none;
}
.cp-item-vazio::before { content: none; }

@media (max-width: 860px) {
	.cp-hub-cols { grid-template-columns: 1fr; gap: 18px; margin-top: 34px; }
	.cp-hub-cols--uma { max-width: none; }
}
@media (max-width: 520px) {
	.cp-bloco { padding: 20px 18px 10px; border-radius: 14px; }
	.cp-bloco-tit { font-size: 18px; }
	.cp-item { padding-left: 20px; padding-top: 16px; padding-bottom: 16px; }
}


/* ══════════════════════════════════════════════════════════════
   OPINIÕES DE QUEM COMPROU                        (27/07/2026)
   ------------------------------------------------------------
   ⚠️ TODO ELEMENTO DE TEXTO DECLARA O PRÓPRIO line-height.
   O reset do tema tem "* { line-height: 1 }" e, por ser o
   seletor universal, ele aplica direto em cada elemento — a
   herança nunca chega no filho. Sem declarar, o texto sai colado.
   ══════════════════════════════════════════════════════════════ */

.op-sec { margin-top: 40px; }
.op-head { margin-bottom: 20px; }
.op-head h2 {
	margin: 0 0 5px;
	font-size: 24px; font-weight: 800; line-height: 1.2;
	letter-spacing: -.02em; color: var(--cp-tx);
}
.op-head p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--cp-tx3); }

.op-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.op-col {
	background: var(--cp-card);
	border: 1px solid var(--cp-bd);
	border-radius: 16px;
	padding: 20px 22px 22px;
}
.op-col-cab { padding-bottom: 14px; border-bottom: 1px solid var(--cp-bd2); margin-bottom: 4px; }
.op-col-cab h3 {
	margin: 0 0 7px;
	font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--cp-tx);
}

/* ── estrelas ── */
.op-estrelas { display: inline-flex; gap: 2px; vertical-align: middle; }
.op-e {
	width: 14px; height: 14px; display: block;
	background: var(--cp-tx3);
	-webkit-mask: var(--op-estrela) center/contain no-repeat;
	        mask: var(--op-estrela) center/contain no-repeat;
}
#tec8-compare {
	--op-estrela: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E");
}
.op-e-cheia { background: var(--cp-ac); }
.op-e-meia  { background: linear-gradient(90deg, var(--cp-ac) 50%, var(--cp-tx3) 50%); }

.op-media { display: flex; align-items: center; gap: 8px; }
.op-media-n { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--cp-tx); }
.op-media-qtd { font-size: 12.5px; line-height: 1.4; color: var(--cp-tx3); }

/* ── cada opinião ── */
.op-lista { display: block; }
.op-item { padding: 16px 0; border-bottom: 1px solid var(--cp-bd2); }
.op-item:last-child { border-bottom: none; padding-bottom: 4px; }
.op-item-cab { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; flex-wrap: wrap; }
.op-autor { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--cp-tx); }
.op-texto {
	margin: 0 0 10px;
	font-size: 14.5px; line-height: 1.6; color: var(--cp-tx2);
}
.op-meta { margin: 8px 0 0; font-size: 12px; line-height: 1.4; color: var(--cp-tx3); }

.op-fotos { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; }
.op-foto {
	display: block; width: 78px; height: 78px;
	border-radius: 9px; overflow: hidden;
	border: 1px solid var(--cp-bd);
	transition: border-color .18s ease, transform .18s ease;
}
.op-foto:hover { border-color: var(--cp-ac); transform: translateY(-2px); }
.op-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.op-vazio { margin: 16px 0 0; font-size: 14px; line-height: 1.55; color: var(--cp-tx3); }
.op-mais  { margin: 12px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--cp-tx3); }

.op-abrir {
	display: block; width: 100%; margin-top: 16px;
	padding: 11px 16px;
	border: 1px solid var(--cp-ac); border-radius: 10px;
	background: none; color: var(--cp-ac);
	font-size: 14px; font-weight: 700; line-height: 1.3;
	font-family: inherit; cursor: pointer;
	transition: background .18s ease, color .18s ease;
}
.op-abrir:hover { background: var(--cp-ac); color: #fff; }

/* ══════════ O FORMULÁRIO ══════════ */
.op-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.op-modal[hidden] { display: none; }
.op-modal-fundo { position: absolute; inset: 0; background: rgba(0,0,0,.72); backdrop-filter: blur(2px); }
.op-modal-cx {
	position: relative; z-index: 1;
	width: 100%; max-width: 540px; max-height: 90vh; overflow-y: auto;
	background: var(--cp-card); border: 1px solid var(--cp-bd);
	border-radius: 18px; padding: 26px 28px 28px;
}
.op-fechar {
	position: absolute; top: 14px; right: 16px;
	width: 30px; height: 30px; border: 0; border-radius: 50%;
	background: rgba(128,128,128,.16); color: var(--cp-tx2);
	font-size: 20px; line-height: 1; cursor: pointer;
}
.op-fechar:hover { background: rgba(128,128,128,.28); }
.op-modal-cx h3 { margin: 0 0 4px; font-size: 21px; font-weight: 800; line-height: 1.25; color: var(--cp-tx); }
.op-modal-sub { margin: 0 0 20px; font-size: 14px; line-height: 1.5; color: var(--cp-tx3); }
.op-modal-sub strong { color: var(--cp-tx2); font-weight: 600; }

.op-campo { margin-bottom: 16px; }
.op-campo > label { display: block; margin-bottom: 6px; font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--cp-tx2); }
.op-campo-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.op-op { font-weight: 400; color: var(--cp-tx3); }

.op-campo input[type=text],
.op-campo input[type=email],
.op-campo select,
.op-campo textarea {
	width: 100%; padding: 11px 13px;
	background: var(--cp-card2); color: var(--cp-tx);
	border: 1px solid var(--cp-bd); border-radius: 9px;
	font: inherit; font-size: 14.5px; line-height: 1.5;
}
.op-campo textarea { resize: vertical; min-height: 100px; }
.op-campo input:focus, .op-campo select:focus, .op-campo textarea:focus {
	outline: none; border-color: var(--cp-ac);
}
.op-ajuda { display: block; margin-top: 5px; font-size: 12px; line-height: 1.45; color: var(--cp-tx3); }
.op-ajuda.curto span { color: var(--cp-ac); }

/* a armadilha de robô: some da tela e do leitor de tela */
.op-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* nota por estrela */
.op-nota-in { display: flex; gap: 6px; }
.op-nota-b {
	width: 30px; height: 30px; padding: 0; border: 0; cursor: pointer;
	background: var(--cp-tx3);
	-webkit-mask: var(--op-estrela) center/contain no-repeat;
	        mask: var(--op-estrela) center/contain no-repeat;
	transition: background .12s ease, transform .12s ease;
}
.op-nota-b:hover { transform: scale(1.12); }
.op-nota-b.on { background: var(--cp-ac); }
.op-nota-b.previa { background: var(--cp-ac-hover); }

/* upload */
.op-drop { position: relative; border: 1px dashed var(--cp-bd); border-radius: 10px; padding: 18px; text-align: center; transition: border-color .18s ease; }
.op-drop:hover { border-color: var(--cp-ac); }
.op-drop input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.op-drop-txt { font-size: 13.5px; line-height: 1.4; color: var(--cp-tx3); }

.op-previa { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.op-prev-item { position: relative; width: 72px; height: 72px; border-radius: 9px; overflow: hidden; border: 1px solid var(--cp-bd); }
.op-prev-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.op-prev-x {
	position: absolute; top: 3px; right: 3px;
	width: 20px; height: 20px; border: 0; border-radius: 50%;
	background: rgba(0,0,0,.7); color: #fff;
	font-size: 14px; line-height: 1; cursor: pointer;
}

.op-aviso {
	margin: 18px 0; padding: 12px 14px;
	background: var(--cp-ac-soft); border-radius: 10px;
	font-size: 13px; line-height: 1.55; color: var(--cp-ac-tx);
}

.op-acoes { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.op-enviar {
	padding: 12px 22px; border: 0; border-radius: 10px;
	background: var(--cp-ac); color: #fff;
	font: inherit; font-size: 14.5px; font-weight: 700; line-height: 1.3;
	cursor: pointer; transition: filter .18s ease;
}
.op-enviar:hover { filter: brightness(1.08); }
.op-enviar:disabled { opacity: .55; cursor: default; }
.op-status { font-size: 13px; line-height: 1.45; color: var(--cp-tx3); }
.op-status.erro { color: #ff6b6b; }

.op-ok { text-align: center; padding: 22px 0 8px; }
.op-ok strong { display: block; margin-bottom: 16px; font-size: 15.5px; font-weight: 600; line-height: 1.55; color: var(--cp-tx); }

@media (max-width: 860px) {
	.op-grid { grid-template-columns: 1fr; }
	.op-head h2 { font-size: 21px; }
}
@media (max-width: 520px) {
	.op-col { padding: 18px 16px 20px; }
	.op-modal { padding: 0; align-items: flex-end; }
	.op-modal-cx { max-width: none; max-height: 94vh; border-radius: 18px 18px 0 0; padding: 22px 18px 24px; }
	.op-campo-2 { grid-template-columns: 1fr; }
	.op-foto { width: 68px; height: 68px; }
}