/* =========================================================
   COMPARADOR PC XEON x ATUAL: ESTILOS
   Feito para ser leve, responsivo e facil de manter.
   ========================================================= */

:root {
  /* Cores base */
  --fundo: #f5f6f8;
  --fundo-card: #ffffff;
  --texto: #1a1f2b;
  --texto-suave: #5a6274;
  --borda: #e3e6ec;
  --borda-forte: #ccd1db;

  /* Cores dos dois "times" */
  --xeon: #ef6c2b;          /* laranja: importado, poder por pouco dinheiro */
  --xeon-claro: #fff1e9;
  --atual: #159e63;         /* verde: novo, garantia, seguranca */
  --atual-claro: #e7f6ee;

  /* Acento de confianca (carrinho, CTAs) */
  --tinta: #1f2a44;
  --dica: #f4b93c;          /* amarelo da "dica de ouro" */

  /* Sombreamento */
  --sombra: 0 1px 2px rgba(20,25,40,.06), 0 8px 24px rgba(20,25,40,.06);
  --sombra-forte: 0 12px 40px rgba(20,25,40,.18);

  --raio: 14px;
  --raio-p: 9px;

  --fonte-titulo: "Space Grotesk", system-ui, sans-serif;
  --fonte-texto: "Inter", system-ui, sans-serif;
  --fonte-mono: "Space Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

/* ============ ICONES EM SVG ============
   O sprite (a "biblioteca" de desenhos no index.html) nao aparece na tela.
   Cada icone herda a cor do texto onde estiver, via currentColor. */
.sprite-icones { position: absolute; width: 0; height: 0; overflow: hidden; }
.icone { width: 1em; height: 1em; vertical-align: -.125em; flex: 0 0 auto; }

body {
  font-family: var(--fonte-texto);
  color: var(--texto);
  background: var(--fundo);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.mono { font-family: var(--fonte-mono); font-variant-numeric: tabular-nums; }

/* ============ CREDITO / PIX ============ */
.credito {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .4rem .9rem; font-size: .82rem;
}
.credito--topo {
  background: var(--tinta); color: #fff; padding: .5rem 1rem; text-align: center;
}
.credito--rodape { margin-top: 1rem; color: var(--texto-suave); }
.credito__texto strong { font-weight: 600; }
.credito__pix { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.credito__label { opacity: .75; }
.credito__chave {
  font-family: var(--fonte-mono); font-size: .72rem; word-break: break-all;
  background: rgba(0,0,0,.06); padding: .15rem .45rem; border-radius: 6px;
}
.credito--topo .credito__chave { background: rgba(255,255,255,.14); }
.btn-pix {
  font-family: var(--fonte-titulo); font-weight: 700; font-size: .74rem;
  color: var(--tinta); background: var(--dica); border: none; cursor: pointer;
  padding: .28rem .7rem; border-radius: 999px; white-space: nowrap; transition: filter .12s, transform .12s;
}
.btn-pix:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); }
.btn-pix:disabled { opacity: .7; cursor: default; }

/* ============ CABECALHO ============ */
.cabecalho {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borda);
}
.cabecalho__interno {
  max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center; gap: 1rem;
  padding: .7rem 1.25rem;
}
.marca {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.2rem;
  color: var(--texto); text-decoration: none; white-space: nowrap;
}
.marca__icone { font-size: 1.4rem; }
.marca__vs { color: var(--texto-suave); font-weight: 400; }

.navegacao { display: flex; gap: .25rem; margin-left: 1rem; }
.navegacao__botao {
  font-family: var(--fonte-titulo); font-size: .95rem; font-weight: 500;
  color: var(--texto-suave); background: none; border: none; cursor: pointer;
  padding: .55rem .85rem; border-radius: 999px; transition: all .15s;
}
.navegacao__botao:hover { color: var(--texto); background: var(--fundo); }
.navegacao__botao.ativo { color: #fff; background: var(--tinta); }

.botao-carrinho {
  margin-left: auto;
  display: flex; align-items: center; gap: .45rem;
  font-family: var(--fonte-titulo); font-weight: 600; font-size: .92rem;
  color: #fff; background: var(--tinta);
  border: none; cursor: pointer;
  padding: .55rem .9rem; border-radius: 999px; transition: transform .12s;
}
.botao-carrinho:hover { transform: translateY(-1px); }
.botao-carrinho__contador {
  background: var(--dica); color: var(--tinta);
  font-family: var(--fonte-mono); font-weight: 700; font-size: .8rem;
  min-width: 1.4rem; height: 1.4rem; padding: 0 .35rem;
  display: grid; place-items: center; border-radius: 999px;
}

.menu-hamburguer { display: none; flex-direction: column; gap: 4px; background: none; border: none; cursor: pointer; padding: .4rem; }
.menu-hamburguer span { width: 22px; height: 2px; background: var(--texto); border-radius: 2px; }

/* ============ CONTEUDO ============ */
.conteudo { max-width: 1180px; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }
.aba { animation: aparecer .35s ease; }
.oculta { display: none; }
@keyframes aparecer { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ============ HEROI (pagina inicial) ============ */
.heroi { text-align: center; max-width: 760px; margin: 0 auto 3.5rem; }
.heroi__sobretitulo {
  font-family: var(--fonte-mono); text-transform: uppercase; letter-spacing: .18em;
  font-size: .78rem; color: var(--texto-suave); margin-bottom: 1rem;
}
.heroi__titulo {
  font-family: var(--fonte-titulo); font-weight: 700;
  font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1.08; letter-spacing: -.02em;
}
.heroi__titulo em { font-style: normal; background: linear-gradient(120deg, var(--xeon), var(--atual)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.heroi__descricao { margin: 1.4rem auto 0; color: var(--texto-suave); font-size: 1.08rem; max-width: 640px; }
.heroi__acoes { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }

.botao {
  font-family: var(--fonte-titulo); font-weight: 600; font-size: 1rem;
  border: none; cursor: pointer; padding: .8rem 1.4rem; border-radius: 999px;
  color: #fff; transition: transform .12s, box-shadow .12s; box-shadow: var(--sombra);
}
.botao:hover { transform: translateY(-2px); box-shadow: var(--sombra-forte); }
.botao--xeon { background: var(--xeon); }
.botao--atual { background: var(--atual); }

/* ============ EXPLICATIVO (dois cards) ============ */
.duplo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 3.5rem; }
.explicativo {
  background: var(--fundo-card); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 1.6rem; box-shadow: var(--sombra);
  border-top: 4px solid var(--borda-forte);
}
.explicativo--xeon { border-top-color: var(--xeon); }
.explicativo--atual { border-top-color: var(--atual); }
.explicativo__cabecalho { margin-bottom: 1rem; }
.explicativo__selo {
  display: inline-block; font-family: var(--fonte-mono); font-size: .72rem;
  text-transform: uppercase; letter-spacing: .1em; padding: .25rem .6rem;
  border-radius: 999px; margin-bottom: .6rem;
}
.explicativo--xeon .explicativo__selo { background: var(--xeon-claro); color: var(--xeon); }
.explicativo--atual .explicativo__selo { background: var(--atual-claro); color: var(--atual); }
.explicativo__titulo { font-family: var(--fonte-titulo); font-size: 1.7rem; }
.explicativo p { color: var(--texto-suave); margin-bottom: 1rem; }
.explicativo__lista { list-style: none; display: grid; gap: .55rem; }
.explicativo__lista li { padding-left: 1.5rem; position: relative; font-size: .96rem; }
.explicativo__lista li::before { content: "→"; position: absolute; left: 0; color: var(--texto-suave); font-family: var(--fonte-mono); }

/* ============ SECAO GENERICA ============ */
.secao { margin-bottom: 3.5rem; }
.secao__titulo {
  font-family: var(--fonte-titulo); font-size: clamp(1.4rem, 3.5vw, 2rem);
  text-align: center; margin-bottom: 1.6rem; letter-spacing: -.01em;
}

.secao__apoio {
  text-align: center; color: var(--texto-suave); max-width: 640px;
  margin: -.8rem auto 1.8rem; font-size: 1rem;
}

/* ============ TUTORIAL (que pecas comprar) ============ */
.tutorial { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }

.guia {
  background: var(--fundo-card); border: 1px solid var(--borda);
  border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra);
}
.guia__cabeca { padding: 1.1rem 1.4rem; color: #fff; }
.guia__cabeca h3 { font-family: var(--fonte-titulo); font-size: 1.3rem; }
.guia__cabeca p { font-size: .85rem; opacity: .85; margin-top: .15rem; }
.guia--xeon .guia__cabeca { background: var(--xeon); }
.guia--atual .guia__cabeca { background: var(--atual); }

.passos { list-style: none; counter-reset: none; padding: .4rem 1.1rem 1.2rem; }

.passo { display: flex; gap: .85rem; padding: 1rem 0; border-bottom: 1px dashed var(--borda); }
.passo:last-child { border-bottom: none; padding-bottom: .2rem; }

.passo__num {
  flex: 0 0 auto; width: 28px; height: 28px; margin-top: .1rem;
  display: grid; place-items: center; border-radius: 50%;
  font-family: var(--fonte-mono); font-weight: 700; font-size: .82rem;
  background: var(--fundo); color: var(--texto-suave); border: 1px solid var(--borda-forte);
}
.guia--xeon .passo__num { background: var(--xeon-claro); color: var(--xeon); border-color: var(--xeon); }
.guia--atual .passo__num { background: var(--atual-claro); color: var(--atual); border-color: var(--atual); }

.passo__corpo { flex: 1; min-width: 0; }
.passo__titulo {
  font-family: var(--fonte-titulo); font-size: 1.02rem; display: flex; align-items: center;
  flex-wrap: wrap; gap: .45rem; margin-bottom: .3rem;
}
.passo__peca {
  font-family: var(--fonte-mono); font-size: .84rem; color: var(--texto);
  background: var(--fundo); border-left: 3px solid var(--borda-forte);
  padding: .4rem .6rem; border-radius: 0 var(--raio-p) var(--raio-p) 0; margin-bottom: .45rem;
}
.guia--xeon .passo__peca { border-left-color: var(--xeon); }
.guia--atual .passo__peca { border-left-color: var(--atual); }
.passo__porque { font-size: .9rem; color: var(--texto-suave); }
.passo__porque strong { color: var(--texto); }

.etiqueta {
  font-family: var(--fonte-mono); font-size: .62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  padding: .18rem .5rem; border-radius: 999px; white-space: nowrap;
}
.etiqueta--importar { background: var(--xeon-claro); color: var(--xeon); }
.etiqueta--brasil { background: var(--atual-claro); color: var(--atual); }
/* Para os passos em que NAO se compra nada (video integrado, cooler da caixa).
   Usar "Comprar no Brasil" nesses casos seria mentira. */
.etiqueta--sem-custo {
  background: var(--fundo); color: var(--texto-suave);
  border: 1px solid var(--borda-forte);
}

/* Passos que alertam "nao importe isso" ganham um leve destaque */
.passo--alerta .passo__porque { color: #7a5a12; }
.passo--alerta .passo__porque strong { color: #5c430b; }

/* ============ COMPARATIVO (vantagens/desvantagens) ============ */
.comparativo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.comparativo__coluna {
  background: var(--fundo-card); border: 1px solid var(--borda);
  border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra);
}
.comparativo__cabeca {
  font-family: var(--fonte-titulo); font-size: 1.25rem; padding: 1.1rem 1.4rem; color: #fff;
}
.comparativo__coluna--xeon .comparativo__cabeca { background: var(--xeon); }
.comparativo__coluna--atual .comparativo__cabeca { background: var(--atual); }
.comparativo__bloco { padding: 1.1rem 1.4rem; }
.comparativo__bloco h4 {
  font-family: var(--fonte-mono); text-transform: uppercase; letter-spacing: .08em;
  font-size: .78rem; margin-bottom: .6rem;
}
.comparativo__bloco--bom h4 { color: var(--atual); }
.comparativo__bloco--ruim h4 { color: #d84a3a; }
.comparativo__bloco--ruim { border-top: 1px solid var(--borda); }
.comparativo__bloco ul { list-style: none; display: grid; gap: .4rem; }
.comparativo__bloco li { padding-left: 1.4rem; position: relative; font-size: .95rem; }
.comparativo__bloco--bom li::before { content: "✓"; position: absolute; left: 0; color: var(--atual); font-weight: 700; }
.comparativo__bloco--ruim li::before { content: "✕"; position: absolute; left: 0; color: #d84a3a; font-weight: 700; }

/* ============ DICA DE OURO ============ */
.dica-ouro {
  position: relative; background: linear-gradient(135deg, #fff8e6, #fff2cf);
  border: 2px solid var(--dica); border-radius: var(--raio);
  padding: 2rem 1.6rem 1.6rem; box-shadow: var(--sombra);
}
.dica-ouro__selo {
  position: absolute; top: -.9rem; left: 1.4rem;
  background: var(--dica); color: var(--tinta);
  font-family: var(--fonte-titulo); font-weight: 700; font-size: .85rem;
  padding: .3rem .9rem; border-radius: 999px; letter-spacing: .02em;
}
.dica-ouro__texto { font-size: 1.05rem; color: #6b520f; }
.dica-ouro__texto strong { color: #4d3a00; }

/* ============ PAGINAS DE PECAS ============ */
.pagina-pecas__cabecalho { text-align: center; max-width: 640px; margin: 0 auto 2.5rem; }
.pagina-pecas__selo {
  display: inline-block; font-family: var(--fonte-mono); font-size: .74rem;
  text-transform: uppercase; letter-spacing: .12em; padding: .3rem .7rem; border-radius: 999px; margin-bottom: .8rem;
}
.pagina-pecas__cabecalho--xeon .pagina-pecas__selo { background: var(--xeon-claro); color: var(--xeon); }
.pagina-pecas__cabecalho--atual .pagina-pecas__selo { background: var(--atual-claro); color: var(--atual); }
.pagina-pecas__titulo { font-family: var(--fonte-titulo); font-size: clamp(1.8rem, 5vw, 2.6rem); }
.pagina-pecas__descricao { color: var(--texto-suave); margin-top: .8rem; }

.carregando { text-align: center; color: var(--texto-suave); padding: 3rem 0; }

/* Categoria */
.categoria { margin-bottom: 2.5rem; }
.categoria__cabeca {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--fonte-titulo); font-size: 1.35rem; margin-bottom: 1rem;
  padding-bottom: .6rem; border-bottom: 2px solid var(--borda);
}
.categoria__icone { width: 1.55rem; height: 1.55rem; flex: 0 0 auto; color: var(--tinta); }

/* Grade de cards */
.grade-pecas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.1rem; }

/* Card da peca */
.peca {
  background: var(--fundo-card); border: 1px solid var(--borda);
  border-radius: var(--raio); overflow: hidden; display: flex; flex-direction: column;
  box-shadow: var(--sombra); transition: transform .12s, box-shadow .12s;
}
.peca:hover { transform: translateY(-3px); box-shadow: var(--sombra-forte); }

.peca__figura {
  aspect-ratio: 16/10; background: var(--fundo); position: relative;
  display: grid; place-items: center; overflow: hidden;
}
.peca__figura img { width: 100%; height: 100%; object-fit: cover; }
.peca__placeholder { display: grid; place-items: center; }
.peca__placeholder-icone { width: 60px; height: 60px; color: var(--borda-forte); }
/* no PC Chines o desenho puxa o laranja; no nacional, o verde */
#aba-xeon .peca__placeholder-icone { color: #e6bda3; }
#aba-atual .peca__placeholder-icone { color: #a3cdb7; }

/* Os dois selos (nivel a esquerda, origem a direita) dividem uma faixa flex
   no alto da foto. Antes cada um era posicionado por conta propria e, com
   texto longo em tela estreita, um passava por cima do outro. Em flex isso
   nao acontece: o espaco e repartido, e o selo de nivel quebra linha. */
.peca__selos {
  position: absolute; top: .6rem; left: .6rem; right: .6rem; z-index: 3;
  display: flex; align-items: flex-start; gap: .4rem;
  pointer-events: none; /* nao rouba o clique da lupa que fica por baixo */
}
.peca__nivel { flex: 0 1 auto; min-width: 0; }

/* =========================================================
   SELOS (badges)
   A classe .selo cuida do formato; .selo--<cor> so pinta.
   Para um selo novo, acrescente aqui uma cor e la no BADGES
   do app.js a chave que a planilha usa.
   ========================================================= */
.selo {
  display: inline-block;
  font-family: var(--fonte-mono); font-size: .66rem; font-weight: 700;
  letter-spacing: .02em; line-height: 1.3;
  padding: .25rem .6rem; border-radius: 999px;
  color: #fff; background: #6b7280;
  box-shadow: 0 1px 4px rgba(20, 25, 40, .22);
}
.selo--neutro  { background: #6b7280; }                    /* cinza */
.selo--entrada { background: #5f8a6b; }                    /* verde suave */
.selo--custo   { background: #3f5fc0; }                    /* azul */
.selo--alto    { background: var(--xeon); }                /* laranja */
.selo--ar      { background: #2b8fb8; }                    /* airflow: azul-ar */
.selo--agua    { background: #17807d; }                    /* aquario: verde-agua */
.selo--rgb     { background: linear-gradient(90deg, #7b3fc4, #c0399a); }
.selo--premium { background: #8a6a1c; }                    /* bronze */

/* Selo de compatibilidade (Modulo TPM): vazado, para o olho entender
   que nao e "qualidade da peca", e sim "com o que ela casa". */
.selo--tipo-compat {
  background: #fff; color: var(--tinta);
  border: 1.5px solid var(--tinta); box-shadow: none;
}

/* Aviso de dependencia na secao do TPM */
.dependencia {
  margin: 0 0 .2rem; padding: .85rem 1rem;
  background: var(--fundo); border: 1px dashed var(--borda-forte);
  border-radius: var(--raio-p);
  font-size: .92rem; line-height: 1.55; color: var(--texto-suave);
}
.dependencia strong { color: var(--texto); }
.dependencia--ok {
  background: #f2f8f4; border-style: solid; border-color: #cfe4d7;
  margin-bottom: .9rem;
}

/* Sugestao de add-on dentro do simulador */
.addon {
  margin-top: .9rem; padding: .9rem;
  border: 1.5px solid var(--tinta); border-radius: var(--raio-p);
  background: var(--fundo-card);
}
.addon__selo {
  font-family: var(--fonte-mono); font-size: .64rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--tinta);
  margin-bottom: .3rem;
}
.addon__nome { font-family: var(--fonte-titulo); font-weight: 700; font-size: .95rem; color: var(--texto); }
.addon__texto { font-size: .82rem; line-height: 1.5; color: var(--texto-suave); margin: .4rem 0 .7rem; }
.addon__rodape { display: flex; align-items: center; justify-content: space-between; gap: .7rem; }
.addon__preco { font-weight: 700; color: var(--texto); }
.addon__botao {
  font-family: var(--fonte-titulo); font-weight: 600; font-size: .86rem;
  color: #fff; background: var(--tinta); border: none; border-radius: var(--raio-p);
  padding: .55rem 1rem; cursor: pointer;
}
.addon__botao:hover { background: #2b3a5c; }
.addon--alerta {
  border-color: #e0b96a; background: #fdf6e3; color: #7a5a12;
  font-size: .86rem; line-height: 1.55;
}
.addon--alerta strong { color: #5c430b; }

@media (max-width: 760px) {
  .addon__botao { padding: .7rem 1.1rem; }

}

.peca__origem {
  /* margin-left:auto empurra para a direita mesmo quando e o unico selo */
  margin-left: auto; flex: 0 0 auto;
  font-family: var(--fonte-mono); font-size: .65rem; font-weight: 700;
  padding: .22rem .55rem; border-radius: 999px; white-space: nowrap;
  background: rgba(31,42,68,.85); color: #fff;
  box-shadow: 0 1px 4px rgba(20,25,40,.25);
}
.peca__origem--china  { background: var(--xeon); }
.peca__origem--brasil { background: var(--atual); }

.peca__corpo { padding: 1rem 1.1rem; display: flex; flex-direction: column; flex: 1; gap: .55rem; }
.peca__nome { font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.02rem; line-height: 1.25; }
.peca__loja {
  display: flex; align-items: center; gap: .45rem;
  font-size: .82rem; color: var(--texto-suave);
}
.peca__loja a { color: var(--texto-suave); }

/* Logotipo da loja. Se a imagem nao carregar, o app.js troca por
   um quadradinho com a inicial do nome da loja. */
.loja__logo {
  width: 20px; height: 20px; flex: 0 0 auto;
  border-radius: 5px; object-fit: contain;
  background: #fff; border: 1px solid var(--borda); padding: 1px;
}
.loja__inicial {
  width: 20px; height: 20px; flex: 0 0 auto;
  border-radius: 5px; display: grid; place-items: center;
  background: var(--tinta); color: #fff;
  font-family: var(--fonte-mono); font-size: .68rem; font-weight: 700; line-height: 1;
}

.peca__comentario {
  font-size: .86rem; color: var(--texto-suave);
  background: var(--fundo); border-radius: var(--raio-p); padding: .55rem .7rem;
  border-left: 3px solid var(--borda-forte);
}

.peca__preco { margin-top: auto; }
.peca__preco-valor { font-family: var(--fonte-mono); font-weight: 700; font-size: 1.3rem; color: var(--texto); }
.peca__preco-secundario {
  font-family: var(--fonte-mono); font-size: .78rem; line-height: 1.45;
  color: var(--texto-suave);
}
.peca__preco-secundario strong { color: var(--xeon); font-weight: 700; }

.peca__acoes { display: flex; flex-direction: column; gap: .45rem; margin-top: .3rem; }

/* Link para a pagina original do produto na loja.
   Antes era um icone de 42px que quase ninguem percebia; agora e um
   botao com rotulo escrito, largura cheia, do mesmo tamanho do outro. */
.peca__link {
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .6rem; border-radius: var(--raio-p);
  border: 1.5px solid var(--borda-forte); background: var(--fundo);
  font-family: var(--fonte-titulo); font-weight: 600; font-size: .86rem;
  color: var(--texto); text-decoration: none;
  transition: border-color .15s, background .15s, color .15s;
}
.peca__link:hover, .peca__link:focus-visible {
  border-color: var(--tinta); background: #fff; color: var(--tinta);
}
.peca__link-icone { width: 15px; height: 15px; flex: 0 0 auto; }
.peca__adicionar {
  flex: 1; font-family: var(--fonte-titulo); font-weight: 600; font-size: .92rem;
  color: #fff; background: var(--tinta); border: none; cursor: pointer;
  padding: .65rem; border-radius: var(--raio-p); transition: background .15s;
}
.peca__adicionar:hover { background: #2b3a5c; }
.peca__adicionar.adicionado { background: var(--atual); }

/* ============ RODAPE ============ */
.rodape {
  text-align: center; color: var(--texto-suave); font-size: .85rem;
  padding: 2rem 1.25rem; border-top: 1px solid var(--borda);
}
.rodape__aviso { margin-top: .4rem; font-size: .78rem; opacity: .8; }

/* ============ CARRINHO (gaveta estilo recibo) ============ */
.fundo-escuro {
  position: fixed; inset: 0; background: rgba(20,25,40,.45);
  z-index: 90; opacity: 0; transition: opacity .25s;
}
.fundo-escuro.visivel { opacity: 1; }

.carrinho {
  position: fixed; top: 0; right: 0; height: 100dvh; width: 380px; max-width: 90vw;
  background: var(--fundo-card); z-index: 100;
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
  box-shadow: var(--sombra-forte);
}
.carrinho.aberto { transform: none; }

.carrinho__topo {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 1.3rem 1.4rem; background: var(--tinta); color: #fff;
}
.carrinho__titulo { font-family: var(--fonte-titulo); font-size: 1.25rem; }
.carrinho__subtitulo { font-family: var(--fonte-mono); font-size: .78rem; opacity: .75; }
.carrinho__fechar { background: none; border: none; color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer; padding: 0 .3rem; }

.carrinho__cambio {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .9rem 1.4rem; background: var(--fundo); border-bottom: 1px dashed var(--borda-forte);
}
.carrinho__cambio label { font-size: .88rem; color: var(--texto-suave); }
.carrinho__cambio input {
  width: 100px; font-family: var(--fonte-mono); font-size: 1rem; text-align: right;
  padding: .4rem .6rem; border: 1px solid var(--borda-forte); border-radius: var(--raio-p);
}

.carrinho__itens { flex: 1; overflow-y: auto; padding: 1rem 1.4rem; }
.carrinho__vazio { color: var(--texto-suave); text-align: center; padding: 2rem 0; font-size: .92rem; }

.item-carrinho { padding: .8rem 0; border-bottom: 1px dashed var(--borda); }
.item-carrinho__topo { display: flex; justify-content: space-between; gap: .6rem; align-items: flex-start; }
.item-carrinho__nome { font-family: var(--fonte-titulo); font-weight: 600; font-size: .92rem; }
.item-carrinho__tag { font-family: var(--fonte-mono); font-size: .68rem; color: var(--texto-suave); }
.item-carrinho__remover { background: none; border: none; color: #d84a3a; cursor: pointer; font-size: 1.1rem; line-height: 1; }
.item-carrinho__linha { display: flex; justify-content: space-between; font-size: .82rem; color: var(--texto-suave); margin-top: .3rem; }
.item-carrinho__linha .mono { color: var(--texto); }
.item-carrinho__final { font-weight: 700; }

.carrinho__resumo {
  padding: 1.2rem 1.4rem; border-top: 2px solid var(--tinta);
  background: var(--fundo);
}
.carrinho__linha { display: flex; justify-content: space-between; font-size: .95rem; margin-bottom: .5rem; color: var(--texto-suave); }
.carrinho__linha .mono { color: var(--texto); font-weight: 700; }
.carrinho__linha--total {
  font-family: var(--fonte-titulo); font-size: 1.15rem; color: var(--texto);
  padding-top: .7rem; margin-top: .3rem; border-top: 1px solid var(--borda-forte);
}
.carrinho__linha--total .mono { font-size: 1.3rem; color: var(--tinta); }
.carrinho__gerar {
  width: 100%; margin-top: .3rem;
  font-family: var(--fonte-titulo); font-weight: 700; font-size: 1rem;
  color: #fff; background: var(--atual); border: none; cursor: pointer;
  padding: .8rem; border-radius: var(--raio-p); transition: transform .12s, opacity .15s;
}
.carrinho__gerar:hover:not(:disabled) { transform: translateY(-1px); }
.carrinho__gerar:disabled { opacity: .4; cursor: not-allowed; }
.carrinho__limpar {
  width: 100%; margin-top: .8rem; background: none; border: 1px solid var(--borda-forte);
  color: var(--texto-suave); padding: .6rem; border-radius: var(--raio-p); cursor: pointer;
  font-family: var(--fonte-texto); font-size: .88rem;
}
.carrinho__limpar:hover { border-color: #d84a3a; color: #d84a3a; }

/* Botao flutuante (mobile) */
.carrinho-flutuante {
  display: none; position: fixed; bottom: 1.2rem; right: 1.2rem; z-index: 80;
  width: 60px; height: 60px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--tinta); color: #fff; font-size: 1.5rem; box-shadow: var(--sombra-forte);
}
.carrinho-flutuante__contador {
  position: absolute; top: -4px; right: -4px;
  background: var(--dica); color: var(--tinta);
  font-family: var(--fonte-mono); font-weight: 700; font-size: .72rem;
  min-width: 1.4rem; height: 1.4rem; padding: 0 .3rem;
  display: grid; place-items: center; border-radius: 999px;
}

/* =========================================================
   RESPONSIVIDADE: MOBILE
   ========================================================= */
@media (max-width: 860px) {
  /* Menu ancorado logo abaixo do cabecalho (e nao numa posicao fixa
     "chutada", que quebrava por causa da barra de credito no topo) */
  .navegacao {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: .2rem; margin: 0;
    background: #fff; border-bottom: 1px solid var(--borda);
    padding: .6rem .8rem 1rem; box-shadow: var(--sombra);
    z-index: 45;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .2s, transform .2s, visibility .2s;
  }
  .navegacao.aberto { opacity: 1; visibility: visible; transform: none; }
  .navegacao__botao {
    text-align: left; width: 100%; min-height: 48px;  /* alvo de toque confortavel */
    padding: .75rem 1rem; border-radius: var(--raio-p); font-size: 1rem;
  }

  .menu-hamburguer { display: flex; order: 3; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
  .botao-carrinho__texto { display: none; }
  .botao-carrinho { padding: .6rem .8rem; min-height: 44px; }

  .cabecalho__interno { padding: .6rem .9rem; gap: .5rem; }
  .marca { font-size: 1.05rem; }

  /* Barra de credito compacta (estava ocupando quase 100px de altura) */
  .credito--topo { padding: .45rem .8rem; gap: .2rem .6rem; font-size: .74rem; line-height: 1.35; }
  .credito__chave { font-size: .62rem; padding: .1rem .35rem; }
  /* No celular este botao estava com 11px de letra e 22px de altura: pequeno
     demais para acertar com o dedo. Agora tem area de toque decente. */
  .btn-pix { font-size: .78rem; padding: .5rem .95rem; }

  .duplo, .comparativo, .tutorial { grid-template-columns: 1fr; }

  .conteudo { padding: 1.8rem 1rem 6rem; }

  /* No mobile, o botao do topo some e usamos o flutuante */
  .carrinho-flutuante { display: grid; place-items: center; }
}

@media (max-width: 420px) {
  .grade-pecas { grid-template-columns: 1fr; }
  .heroi__acoes .botao { width: 100%; }
  .passo { gap: .65rem; }
  .passo__num { width: 24px; height: 24px; font-size: .74rem; }
  .passo__titulo { font-size: .96rem; }
  /* No celular pequeno a chave inteira quebraria a barra: fica so o botao,
     e a chave continua visivel no rodape da pagina. */
  .credito--topo .credito__chave { display: none; }
}

/* Celulares bem pequenos (ex.: 320px): o cabecalho precisa apertar */
@media (max-width: 360px) {
  .cabecalho__interno { padding: .5rem .55rem; gap: .3rem; }
  .marca { font-size: .95rem; }
  .marca__icone { display: none; }
  .botao-carrinho { padding: .5rem .55rem; }
  .menu-hamburguer { min-width: 40px; padding: .3rem; }
}

/* Acessibilidade: respeita quem prefere menos animacao */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto; }
}

/* Foco visivel para teclado */
:focus-visible { outline: 3px solid var(--xeon); outline-offset: 2px; border-radius: 4px; }


/* =========================================================
   JANELA DE DETALHE DA PECA
   Abre ao clicar no card. Fica acima do carrinho (z-index 100),
   por isso usa 120/130.
   ========================================================= */
.detalhe { position: fixed; inset: 0; z-index: 120; }
.detalhe__fundo {
  position: absolute; inset: 0; background: rgba(18, 23, 35, .62);
  opacity: 0; transition: opacity .2s;
}
.detalhe.visivel .detalhe__fundo { opacity: 1; }

.detalhe__caixa {
  position: absolute; z-index: 130;
  left: 50%; top: 50%; transform: translate(-50%, -48%) scale(.98);
  width: min(940px, calc(100vw - 2rem));
  max-height: min(88vh, 760px);
  /* A caixa NAO rola: quem rola e o conteudo (.detalhe__grade). Assim o botao
     de fechar, que e posicionado em relacao a caixa, fica sempre no canto.
     Antes o X subia junto com o texto e desaparecia em descricao longa. */
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--fundo-card); border-radius: var(--raio-g);
  border: 1px solid var(--borda);
  box-shadow: 0 24px 60px rgba(15, 20, 32, .35);
  opacity: 0; transition: opacity .2s, transform .2s;
}
.detalhe.visivel .detalhe__caixa { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.detalhe__fechar {
  position: absolute; top: .7rem; right: .7rem; z-index: 5;
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid var(--borda); border-radius: 50%;
  background: #fff; color: var(--texto);
  cursor: pointer; transition: background .15s, color .15s;
  box-shadow: 0 2px 8px rgba(15, 20, 32, .18);
}
.detalhe__fechar:hover { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.detalhe__fechar-icone { width: 17px; height: 17px; }

/* Duas colunas: imagem a esquerda, informacao a direita.
   min-height:0 e o que permite a rolagem funcionar dentro do flex da caixa. */
.detalhe__grade {
  display: grid; grid-template-columns: 1fr 1fr;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  min-height: 0; flex: 1;
  /* align-content: start e o que impede a grade de espremer as linhas para
     caber na altura dela. Sem isso, no celular a linha da foto encolhia
     (91px) enquanto a imagem continuava com 240px, e a foto era desenhada
     por cima do nome e da loja. Com start, cada linha fica do tamanho do seu
     conteudo e o que passar vira rolagem, que e o comportamento certo. */
  align-content: start;
}

.detalhe__figura {
  position: relative;
  /* Flex em vez de grid: com grid a moldura nao crescia junto com a foto,
     ficava com 91px enquanto a imagem tinha 240px, e a foto acabava pintada
     por cima do texto ao lado. Em flex a altura acompanha o conteudo. */
  display: flex; align-items: center; justify-content: center;
  background: var(--fundo); padding: 1.6rem;
  min-height: 320px;
  border-right: 1px solid var(--borda);
  /* Trava de seguranca: mesmo que algo escape, nao invade a area do texto. */
  overflow: hidden;
}
/* "contain" e o que mostra a peca inteira, sem cortar as bordas */
.detalhe__figura img {
  display: block;
  max-width: 100%; max-height: 420px;
  width: auto; height: auto; object-fit: contain;
  border-radius: var(--raio-p);
}
.detalhe__placeholder-icone { width: 120px; height: 120px; color: var(--borda-forte); }
/* As etiquetas nascem com "position: absolute" para flutuarem no canto do card.
   Dentro da janela elas ficam lado a lado numa fila, entao aqui a posicao volta
   para "static". Senao as duas se empilham no mesmo canto e uma cobre a outra. */
.detalhe__selos {
  position: absolute; top: .8rem; left: .8rem; right: .8rem;
  display: flex; gap: .45rem; flex-wrap: wrap; align-items: flex-start;
}
.detalhe__selos .peca__nivel,
.detalhe__selos .peca__origem {
  position: static; top: auto; left: auto; right: auto; margin-left: 0;
}

.detalhe__info { padding: 1.5rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: .7rem; }

.detalhe__categoria {
  display: flex; align-items: center; gap: .45rem;
  font-family: var(--fonte-mono); font-size: .7rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--texto-suave);
}
.detalhe__categoria-icone { width: 17px; height: 17px; color: var(--tinta); }

.detalhe__nome {
  font-family: var(--fonte-titulo); font-size: 1.32rem; line-height: 1.25;
  color: var(--texto); margin: 0;
}
.detalhe__loja { display: flex; align-items: center; gap: .45rem; font-size: .86rem; color: var(--texto-suave); }

.detalhe__comentario {
  font-size: .93rem; line-height: 1.6; color: var(--texto-suave);
  background: var(--fundo); border-left: 3px solid var(--borda-forte);
  border-radius: var(--raio-p); padding: .8rem .9rem; margin: 0;
}

.detalhe__preco { border-top: 1px solid var(--borda); padding-top: .9rem; }
.detalhe__preco-valor { font-family: var(--fonte-mono); font-size: 1.75rem; font-weight: 700; color: var(--texto); }
.detalhe__preco-frase { font-family: var(--fonte-mono); font-size: .82rem; line-height: 1.45; color: var(--texto-suave); }
.detalhe__preco-frase strong { color: var(--xeon); font-weight: 700; }

/* Abertura da conta do imposto, so para peca importada */
.detalhe__conta { margin-top: .8rem; border: 1px solid var(--borda); border-radius: var(--raio-p); overflow: hidden; }
.detalhe__conta-linha {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .5rem .75rem; font-size: .85rem; color: var(--texto-suave);
  border-bottom: 1px solid var(--borda);
}
.detalhe__conta-linha:last-child { border-bottom: none; }
.detalhe__conta-linha span:last-child { font-family: var(--fonte-mono); }
.detalhe__conta-linha--total { background: var(--fundo); color: var(--texto); font-weight: 700; }

.detalhe__aviso {
  font-size: .82rem; line-height: 1.5; color: #7a5a12;
  background: #fdf6e3; border: 1px solid #f0dfae;
  border-radius: var(--raio-p); padding: .6rem .75rem;
}

.detalhe__acoes { display: flex; flex-direction: column; gap: .5rem; margin-top: .2rem; }
.detalhe__acoes .peca__adicionar,
.detalhe__acoes .peca__link { width: 100%; }

/* Card: deixa claro que da para clicar */
.peca { cursor: pointer; }
.peca__acoes { cursor: default; }
.peca__ampliar {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  border: none; background: rgba(18, 23, 35, 0); cursor: pointer;
  color: #fff; transition: background .18s;
}
.peca__ampliar-icone {
  width: 30px; height: 30px;
  opacity: 0; transform: scale(.9); transition: opacity .18s, transform .18s;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45));
}
.peca:hover .peca__ampliar { background: rgba(18, 23, 35, .3); }
.peca:hover .peca__ampliar-icone { opacity: 1; transform: scale(1); }
.peca__ampliar:focus-visible { outline: 3px solid var(--tinta); outline-offset: -3px; }
.peca__ampliar:focus-visible .peca__ampliar-icone { opacity: 1; transform: scale(1); }

/* Trava a rolagem do fundo enquanto a janela esta aberta */
body.sem-rolagem { overflow: hidden; }

@media (max-width: 760px) {
  /* No celular vira uma coluna: imagem em cima, informacao embaixo */
  .detalhe__grade { grid-template-columns: 1fr; }
  .detalhe__figura {
    /* altura propria da moldura: a foto tem espaco garantido e nunca
       fica espremida a ponto de sumir */
    min-height: 260px; padding: 1.1rem;
    border-right: none; border-bottom: 1px solid var(--borda);
  }
  .detalhe__figura img { max-height: 240px; }
  .detalhe__placeholder-icone { width: 84px; height: 84px; }
  .detalhe__caixa { width: calc(100vw - 1.4rem); max-height: 90vh; }
  .detalhe__info { padding: 1.1rem 1.1rem 1.3rem; }
  .detalhe__nome { font-size: 1.15rem; }
  .detalhe__preco-valor { font-size: 1.5rem; }
  /* No toque nao existe hover: deixa a lupa sempre visivel, discreta */
  .peca__ampliar-icone { opacity: .85; transform: scale(1); }

  /* Area de toque: no celular os dois botoes passam de 44px de altura,
     que e o minimo recomendado para o dedo nao errar. */
  .peca__adicionar { padding: .8rem; font-size: .95rem; }
  .peca__link { padding: .75rem; }
  .detalhe__fechar { width: 44px; height: 44px; }
}


/* Aviso embaixo do campo de cotacao do dolar */
.carrinho__cotacao-aviso {
  font-size: .74rem; line-height: 1.4; color: var(--texto-suave);
  margin: .4rem 0 0;
}
.carrinho__cotacao-aviso--falhou { color: #8a6110; }


/* =========================================================
   CHAVE LIGA/DESLIGA de frete e imposto (recibo e lista)
   Serve para o visitante ver quanto cada parcela pesa no total.
   ========================================================= */
.item-carrinho__rotulo { display: inline-flex; align-items: center; gap: .45rem; }

.alternar {
  width: 30px; height: 17px; flex: 0 0 auto; padding: 0;
  border: none; border-radius: 999px; background: var(--atual);
  cursor: pointer; position: relative; transition: background .18s;
}
.alternar__bola {
  position: absolute; top: 2px; left: 2px;
  width: 13px; height: 13px; border-radius: 50%;
  background: #fff; transition: transform .18s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
.alternar--off { background: #b9bfca; }
.alternar--off .alternar__bola { transform: translateX(13px); }
.alternar:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }

/* Linha desligada: o valor antigo fica riscado, para nao "sumir" da vista */
.item-carrinho__linha--off { color: var(--texto-suave); }
.valor-desligado { opacity: .55; margin-right: .3rem; }

/* Aviso de que o total virou simulacao */
.aviso-simulacao {
  margin: .1rem 0 .7rem; padding: .65rem .8rem;
  background: #fdf6e3; border: 1px solid #f0dfae; border-radius: var(--raio-p);
  font-size: .8rem; line-height: 1.5; color: #7a5a12;
}
.aviso-simulacao strong { color: #5c430b; }
.alternar-restaurar {
  display: inline-block; margin-top: .45rem;
  font-family: var(--fonte-titulo); font-size: .78rem; font-weight: 600;
  color: #5c430b; background: #fff; border: 1px solid #e0c98a;
  border-radius: var(--raio-p); padding: .35rem .7rem; cursor: pointer;
}
.alternar-restaurar:hover { background: #fbf1d8; }

@media (max-width: 760px) {
  /* area de toque maior no celular */
  .alternar { width: 38px; height: 22px; }
  .alternar__bola { width: 18px; height: 18px; }
  .alternar--off .alternar__bola { transform: translateX(16px); }
  .alternar-restaurar { padding: .55rem .9rem; }
}

/* Celula da tabela do orcamento com a chave liga/desliga */
.orc-tabela .num .alternar { margin-left: .45rem; vertical-align: middle; }
.orc-tabela .num--off { color: var(--texto-suave); }


/* Rodape do guia: chamada para a lista pronta de recomendacoes */
.guia__rodape {
  padding: 1.1rem 1.1rem 1.3rem;
  border-top: 1px dashed var(--borda-forte);
  text-align: center;
}
.guia__rodape-texto {
  margin: 0 0 .7rem;
  font-size: .93rem; line-height: 1.5; color: var(--texto-suave);
}
.guia__rodape-botao { width: 100%; }
.guia__rodape-nota {
  margin: .6rem 0 0;
  font-size: .78rem; line-height: 1.45; color: var(--texto-suave);
}

/* Selo de "lista pronta" no topo da pagina do orcamento */
.orc-topo__selo {
  display: inline-block; margin-bottom: .35rem;
  font-family: var(--fonte-mono); font-size: .66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  padding: .25rem .6rem; border-radius: 999px;
  background: var(--xeon); color: #fff;
}

/* Aviso de peca da recomendacao que sumiu da planilha */
.orc-falta {
  margin-top: .6rem; padding: .6rem .8rem; max-width: 46rem;
  background: #fdf6e3; border: 1px solid #f0dfae; border-radius: var(--raio-p);
  font-size: .82rem; line-height: 1.5; color: #7a5a12;
}
.orc-falta strong { color: #5c430b; }

/* Aviso de link compartilhado que nao pode ser aberto */
.aviso-link {
  max-width: 46rem; margin: 0 auto 1.5rem; padding: .85rem 1rem;
  background: #fdf6e3; border: 1px solid #f0dfae; border-radius: var(--raio-p);
  font-size: .88rem; line-height: 1.55; color: #7a5a12; text-align: center;
}
.aviso-link strong { color: #5c430b; }

/* ---- Chave de ligar/desligar o item inteiro ---- */
.item-carrinho__topo { display: flex; align-items: flex-start; gap: .6rem; }
.item-carrinho__id { flex: 1; min-width: 0; }
.alternar--item { margin-top: .2rem; }
.item-carrinho--off .item-carrinho__nome,
.item-carrinho--off .item-carrinho__tag { opacity: .55; text-decoration: line-through; }
.orc-nome--off { opacity: .6; }
.orc-nome--off .orc-nome__titulo { text-decoration: line-through; }
.orc-nome .alternar { margin-right: .5rem; vertical-align: middle; }

/* ---- Etapa opcional (placa de video) ---- */
.categoria__opcional {
  font-family: var(--fonte-mono); font-size: .62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  padding: .2rem .5rem; border-radius: 999px;
  background: var(--fundo); color: var(--texto-suave);
  border: 1px solid var(--borda-forte); margin-left: .5rem;
}
.pular-etapa {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  margin: 0 0 .9rem; padding: .7rem .9rem;
  background: var(--fundo-card); border: 1.5px solid var(--borda-forte);
  border-radius: var(--raio-p); cursor: pointer; text-align: left;
  font-family: var(--fonte-titulo); font-size: .9rem; color: var(--texto);
}
.pular-etapa:hover { border-color: var(--tinta); }
.pular-etapa--ativo { border-color: var(--atual); background: #f2f8f4; }
.pular-etapa .alternar { pointer-events: none; }

/* ---- Aviso de peça retirada automaticamente ---- */
.addon--removido {
  border-color: #e0b96a; background: #fdf6e3; color: #7a5a12;
  font-size: .86rem; line-height: 1.55;
}
.addon--removido strong { color: #5c430b; }