/* escala de espaço (4, 8, 12, 16, 24, 32, 48, 64) */
:root{--e1:4px;--e2:8px;--e3:12px;--e4:16px;--e5:24px;--e6:32px;--e7:48px;--e8:64px}
/* radar.css: a ferramenta da home (link, produto, preço) e as seções abaixo dela.
   Só tokens do tema (public/tema.css): cor literal aqui é defeito (tests/tema.test.mjs).
   Aposta visual: a MIRA. Quatro cantos de visor (a marca da família Radar) cercam o campo do link; fecham quando o
   campo ganha foco e tremem enquanto o Radar lê. O amarelo etiqueta só aparece na economia e no botão de compra.
   Contrato de ids e data-* com paginas/home.mjs e public/radar.js (docs/VISUAL.md, seção 2). */
.palco{
  --raio:var(--radius);--raio-p:var(--radius-sm);
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--e5);margin:var(--e3) 0 var(--e6)
}
.palco *{box-sizing:border-box}
.palco h2,.palco h3,.palco p{margin:0}
.palco button,.palco input{font:inherit;color:inherit}
.palco :focus-visible{outline:3px solid var(--info);outline-offset:3px;border-radius:var(--raio-p)}
.palco [tabindex="-1"]:focus{outline:none}
.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}

/* hero: o campo é o protagonista; a lista de lojas fica ao lado no desktop e abaixo no celular */
.hero-home{padding:var(--e5) 0 0}
.hero-home h1{font-size:clamp(2.25rem,7.4vw,3.85rem);line-height:1.03;letter-spacing:-.025em;margin:0 0 var(--e4);max-width:none;text-wrap:balance}
.hero-home .answer{font-size:1.125rem;color:var(--text2);max-width:54ch;margin:0}
.palco[data-etapa="1"] .radar{margin-top:var(--e2)}
@media (min-width:1024px){
  .palco[data-etapa="1"]{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);column-gap:var(--e8);align-items:start}
  .palco[data-etapa="1"] .hero-home{grid-column:1;padding-top:var(--e6)}
  .palco[data-etapa="1"] .radar{grid-column:1}
  .palco[data-etapa="1"] .lojas{grid-column:2;grid-row:1 / span 2;margin-top:var(--e8)}
}
.palco:not([data-etapa="1"]) .hero-home,.palco:not([data-etapa="1"]) .lojas{display:none}

/* trilha de etapas: progresso real (a etapa muda quando a resposta chega) */
.passos{display:flex;gap:var(--e2);list-style:none;margin:0 0 var(--e5);padding:0;font-size:.875rem;color:var(--muted);counter-reset:p}
.passos li{counter-increment:p;flex:1 1 0;padding-top:var(--e2);border-top:3px solid var(--line);display:flex;gap:var(--e2);align-items:baseline}
.passos li::before{content:counter(p);font-weight:700;font-variant-numeric:tabular-nums}
.passos li[aria-current="step"]{color:var(--text);font-weight:700;border-top-color:var(--accent)}
.passos li.feito{color:var(--text);border-top-color:var(--text2)}
.passos li.feito::before{content:"\2713"}
.palco[data-etapa="1"] .passos{display:none}
.radar{margin:0}
.radar{scroll-margin-top:5rem}
.palco:not([data-etapa="1"]) .radar{max-width:46rem;width:100%;margin-inline:auto}
.palco[data-etapa="3"] .radar{max-width:62rem}
.tela[hidden]{display:none}
.tela>*+*{margin-top:var(--e5)}
.radar h2{font-size:clamp(1.65rem,5.4vw,2.35rem);line-height:1.1;letter-spacing:-.02em}
.lead{font-size:1.125rem;color:var(--text2);max-width:46ch}
#t2-corpo,#t3-corpo{display:flex;flex-direction:column;gap:var(--e5)}
#t2-corpo>*,#t3-corpo>*{margin:0}

/* tela 1: a mira */
.busca{display:flex;flex-direction:column;gap:var(--e4)}
.busca-rot{font-weight:700;font-size:1rem}
.linha-campo{display:flex;flex-direction:column;gap:var(--e5)}
.mira{--k:0px;position:relative;display:flex;align-items:center;background:var(--surface);border-radius:var(--raio);box-shadow:inset 0 0 0 2px var(--line2);transition:box-shadow .18s}
.mira:focus-within{box-shadow:inset 0 0 0 2px var(--accent)}
.mira input{flex:1 1 auto;min-width:0;height:64px;padding:0 var(--e3) 0 var(--e4);border:0;background:transparent;border-radius:var(--raio);font-size:1.0625rem;text-overflow:ellipsis}
.mira input::placeholder{color:var(--muted)}
.mira input:focus-visible{outline:none}
.mira i{position:absolute;width:20px;height:20px;border:0 solid var(--text);pointer-events:none;transition:transform .2s ease,border-color .2s}
.mira i:nth-of-type(1){top:-9px;left:-9px;border-top-width:4px;border-left-width:4px;border-top-left-radius:9px}
.mira i:nth-of-type(2){top:-9px;right:-9px;border-top-width:4px;border-right-width:4px;border-top-right-radius:9px}
.mira i:nth-of-type(3){bottom:-9px;right:-9px;border-bottom-width:4px;border-right-width:4px;border-bottom-right-radius:9px}
.mira i:nth-of-type(4){bottom:-9px;left:-9px;border-bottom-width:4px;border-left-width:4px;border-bottom-left-radius:9px}
.mira:focus-within i,.mira.lendo i{border-color:var(--accent)}
.mira:focus-within i:nth-of-type(1),.mira.lendo i:nth-of-type(1){transform:translate(5px,5px)}
.mira:focus-within i:nth-of-type(2),.mira.lendo i:nth-of-type(2){transform:translate(-5px,5px)}
.mira:focus-within i:nth-of-type(3),.mira.lendo i:nth-of-type(3){transform:translate(-5px,-5px)}
.mira:focus-within i:nth-of-type(4),.mira.lendo i:nth-of-type(4){transform:translate(5px,-5px)}
.mira.lendo{box-shadow:inset 0 0 0 2px var(--accent)}
.mira.erro-campo{box-shadow:inset 0 0 0 2px var(--bad)}
.mira.erro-campo i{border-color:var(--bad)}
@media (prefers-reduced-motion:no-preference){
  .mira.lendo i{animation:trava 1s ease-in-out infinite alternate}
  .mira.lendo i:nth-of-type(2){animation-name:trava2}.mira.lendo i:nth-of-type(3){animation-name:trava3}.mira.lendo i:nth-of-type(4){animation-name:trava4}
}
@keyframes trava{from{transform:translate(5px,5px)}to{transform:translate(0,0)}}
@keyframes trava2{from{transform:translate(-5px,5px)}to{transform:translate(0,0)}}
@keyframes trava3{from{transform:translate(-5px,-5px)}to{transform:translate(0,0)}}
@keyframes trava4{from{transform:translate(5px,-5px)}to{transform:translate(0,0)}}
.colar{appearance:none;border:0;background:var(--accent-soft);color:var(--accent);cursor:pointer;min-height:44px;margin-right:var(--e2);padding:0 var(--e4);border-radius:var(--raio-p);font-weight:700;display:inline-flex;align-items:center;gap:var(--e2);flex:0 0 auto}
.colar:hover{background:var(--accent);color:var(--accent-ink)}
.colar svg{width:18px;height:18px}
.dica-campo{font-size:.9375rem;color:var(--muted);max-width:56ch}
.palco .botao,.botao{appearance:none;border:0;cursor:pointer;background:var(--accent);color:var(--accent-ink);min-height:56px;padding:0 var(--e6);border-radius:var(--raio);font-weight:700;font-size:1.0625rem;display:inline-flex;align-items:center;justify-content:center;gap:var(--e2);text-decoration:none;text-align:center;transition:background .15s,transform .1s}
.botao:hover{background:var(--accent-hover);color:var(--accent-ink)}
.botao:active{transform:translateY(1px)}
.botao[disabled]{opacity:.7;cursor:progress}
.botao.largo{width:100%}
.linha-campo .botao{min-height:64px}
@media (min-width:640px){.linha-campo{flex-direction:row;align-items:stretch}.linha-campo .mira{flex:1 1 auto}.linha-campo .botao{flex:0 0 auto}}
.radar .erro{background:var(--bad-soft);color:var(--bad);border-radius:var(--raio-p);padding:var(--e3) var(--e4);font-weight:600;max-width:60ch}
.radar .erro small{display:block;font-weight:400;color:var(--text2);margin-top:var(--e1)}

/* carregando: três fases com nome; a fase 3 é a segunda chamada de verdade */
.carga{display:flex;flex-direction:column;gap:var(--e3)}
.fases{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--e2);font-weight:600}
.fases li{display:flex;align-items:center;gap:var(--e3);color:var(--muted);font-weight:500}
.fases li::before{content:"";width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--line2);flex:0 0 auto}
.fases li.on{color:var(--text);font-weight:700}
.fases li.on::before{background:var(--accent);box-shadow:none}
.fases li.ok{color:var(--text2)}
.fases li.ok::before{background:var(--good);box-shadow:none}
@media (prefers-reduced-motion:no-preference){.fases li.on::before{animation:pulsa 1s ease-in-out infinite alternate}}
@keyframes pulsa{from{opacity:1}to{opacity:.35}}
.barra{height:4px;background:var(--line);border-radius:2px;overflow:hidden;max-width:28rem}
.barra i{display:block;height:100%;width:35%;background:var(--accent)}
@media (prefers-reduced-motion:no-preference){.barra i{animation:vai 1.1s ease-in-out infinite alternate}}
@keyframes vai{from{transform:translateX(0)}to{transform:translateX(185%)}}
.demora{color:var(--text2);font-size:.9375rem;max-width:46ch}

/* lojas: informação útil, em texto; sem logo de terceiro */
.lojas{border-top:3px solid var(--text);padding-top:var(--e4)}
.lojas h2{font-size:1.25rem;margin:0 0 var(--e3)}
.lojas p{color:var(--text2);font-size:.9375rem;margin:0 0 var(--e3)}
.lojas ul{list-style:none;margin:0 0 var(--e4);padding:0;display:flex;flex-wrap:wrap;gap:var(--e2)}
.lojas li{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);border-radius:var(--raio-p);padding:6px 12px;font-weight:600;font-size:.9375rem}

/* produto (tela 2) */
.produto{background:var(--surface);border-radius:var(--raio);box-shadow:var(--shadow);padding:var(--e4);display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--e4);align-items:start}
.foto{width:96px;height:96px;border-radius:var(--raio-p);background:var(--surface2);display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--muted)}
.foto img{width:100%;height:100%;object-fit:contain;display:block}
.produto h3{font-size:1.1875rem;line-height:1.28;letter-spacing:-.01em;overflow-wrap:anywhere}
.meta{margin-top:var(--e2);color:var(--muted);font-size:.9375rem}
.meta b{color:var(--text);font-weight:700}
dl.var{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px var(--e4);margin:var(--e3) 0 0;font-size:.9375rem}
dl.var dt{color:var(--muted)}dl.var dd{margin:0;font-weight:600}
.acoes{display:flex;flex-direction:column;gap:var(--e3);align-items:stretch}
.acoes .botao{min-height:60px}
@media (min-width:560px){.acoes{flex-direction:row;align-items:center;gap:var(--e5)}.acoes .botao{flex:0 0 auto;min-width:14rem}.produto{grid-template-columns:128px minmax(0,1fr);padding:var(--e5)}.foto{width:128px;height:128px}}
.link-btn{background:none;border:0;padding:var(--e2) 0;font:inherit;color:var(--accent);text-decoration:underline;cursor:pointer;min-height:44px}

/* chips e candidatos */
.grupo{border:0;padding:0;margin:0;min-width:0}
.grupo+.grupo{margin-top:var(--e5)}
.grupo legend{font-weight:700;padding:0;margin-bottom:var(--e2)}
.chips{display:flex;flex-wrap:wrap;gap:var(--e2)}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 var(--e4);border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 2px var(--line2);font-weight:500}
.chip input:checked+span{background:var(--accent);color:var(--accent-ink);box-shadow:none;font-weight:700}
.chip input:checked+span::before{content:"\2713";font-weight:700}
.chip input:focus-visible+span{outline:3px solid var(--info);outline-offset:2px}
.outro{margin-top:var(--e2)}
.outro input{width:100%;max-width:280px;min-height:44px;padding:0 var(--e3);border:2px solid var(--line2);border-radius:var(--raio-p);background:var(--surface)}
.outro input:focus{border-color:var(--accent)}
.cands{display:flex;flex-direction:column;gap:var(--e3)}
.cand{position:relative;display:block}
.cand input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.cand span{display:block;background:var(--surface);border-radius:var(--raio);padding:var(--e4) var(--e4) var(--e4) 52px;box-shadow:inset 0 0 0 2px var(--line);font-weight:600;line-height:1.35;position:relative}
.cand span::before{content:"";position:absolute;left:var(--e4);top:var(--e4);width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--line2)}
.cand span small{display:block;font-weight:400;color:var(--muted);font-size:.9rem;margin-top:2px}
.cand input:checked+span{box-shadow:inset 0 0 0 3px var(--accent)}
.cand input:checked+span::before{background:radial-gradient(circle,var(--accent) 0 5px,transparent 5.5px);box-shadow:inset 0 0 0 2px var(--accent)}
.cand input:focus-visible+span{outline:3px solid var(--info);outline-offset:2px}
.corrigir{background:var(--surface);border-radius:var(--raio);padding:var(--e4);margin-top:var(--e3)}
.corrigir label{display:block;font-weight:700;margin-bottom:var(--e2)}
.corrigir input{width:100%;min-height:52px;padding:0 var(--e3);border:2px solid var(--line2);border-radius:var(--raio-p);background:var(--surface)}
.erro.sobre-cand{margin-top:var(--e3)}

/* resposta (tela 3): duas colunas no desktop, a resposta à esquerda e os parecidos quietos à direita */
.resp{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--e6);align-items:start}
.resp-main{display:flex;flex-direction:column;gap:var(--e5);min-width:0}
.resp-topo{display:flex;flex-direction:column;gap:var(--e3)}
.resp-topo>*{margin:0}
@media (min-width:900px){.resp.com-sem{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);column-gap:var(--e7)}}
.veredito{width:fit-content;display:flex;align-items:center;gap:var(--e2);background:var(--good-soft);color:var(--good);font-weight:700;font-size:.9375rem;border-radius:999px;padding:6px 14px 6px 10px}
.veredito svg{flex:0 0 auto}
.oferta{background:var(--surface);border-radius:var(--raio);box-shadow:var(--shadow);padding:var(--e5);display:flex;flex-direction:column;gap:var(--e4)}
.oferta .topo-of{display:grid;grid-template-columns:64px minmax(0,1fr);gap:var(--e4);align-items:start}
.oferta .foto{width:64px;height:64px}
.loja-nome{font-weight:700}
.oferta h3{font-size:1rem;line-height:1.4;color:var(--text2);font-weight:500;margin-top:2px;overflow-wrap:anywhere}
.etiqueta{position:relative;width:fit-content;max-width:100%;color:var(--tag-ink);padding:var(--e3) var(--e5) var(--e3) 46px;background:radial-gradient(circle at 22px 50%,var(--surface) 0 5px,transparent 5.5px),var(--tag);clip-path:polygon(0 50%,18px 0,100% 0,100% 100%,18px 100%)}
.etiqueta .eco{font-size:1.375rem;font-weight:800;line-height:1.1;letter-spacing:-.015em;font-variant-numeric:tabular-nums}
.etiqueta .de{margin-top:2px;font-size:.875rem}
.etiqueta .de s{text-decoration-thickness:2px}
.preco{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--e1) var(--e4)}
.preco strong{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:clamp(2.25rem,9vw,3rem);font-weight:800;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.preco span{color:var(--muted);font-size:.9375rem}
.visto{font-size:.875rem;color:var(--muted);margin:0}
.botao.compra{background:var(--tag);color:var(--tag-ink);min-height:68px;font-size:1.1875rem;box-shadow:0 3px 0 var(--tag-borda);width:100%;padding:0 var(--e4)}
.botao.compra:hover{background:var(--tag-hover);color:var(--tag-ink)}
.botao.compra:active{box-shadow:0 1px 0 var(--tag-borda);transform:translateY(2px)}
.botao.compra:focus-visible{outline:3px solid var(--text);outline-offset:3px}
.botao.compra .seta{font-size:1.375rem;line-height:1}
.depois-cta{font-size:.9375rem;color:var(--text2);margin:calc(var(--e2) * -1) 0 0}
.sem{background:transparent}
.sem h3{font-size:1.1875rem;line-height:1.2;margin:0 0 var(--e2)}
.sem>p{color:var(--muted);font-size:.9375rem;margin:0 0 var(--e3)}
.sem ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-top:1px solid var(--line2)}
.sem li{padding:var(--e4) 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--e1) var(--e4);align-items:baseline}
.sem .dif{font-weight:700;margin:0}
.sem .sub{color:var(--muted);font-size:.9375rem;overflow-wrap:anywhere;margin:0}
.sem .p{font-size:1.0625rem;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums;text-align:right;margin:0}
.sem .p small{display:block;font-size:.8125rem;font-weight:400;color:var(--muted);margin-top:2px}
.sem .ir{grid-column:1/-1;font-weight:600;min-height:32px;display:inline-flex;align-items:center;width:fit-content}
.final{display:flex;flex-direction:column;gap:var(--e3);align-items:flex-start}
.final .botao{min-width:15rem}
.nova-busca{margin-top:var(--e2)}

/* abaixo da ferramenta */
.secao-home{margin:var(--e8) 0 0}
.secao-home>h2{font-size:clamp(1.5rem,4.2vw,2rem);margin:0 0 var(--e5)}
.tres{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--e5)}
.tres li{border-top:3px solid var(--text);padding-top:var(--e3);max-width:none}
.tres h3{font-size:1.25rem;margin:0 0 var(--e2)}
.tres p{margin:0;color:var(--text2);font-size:1rem}
@media (min-width:760px){.tres{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e6)}}
.regras{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line2)}
.regras li{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--e1);padding:var(--e4) 0;border-bottom:1px solid var(--line);max-width:none}
.regras b{font-size:1.0625rem}
.regras span{color:var(--text2)}
@media (min-width:760px){.regras li{grid-template-columns:17rem minmax(0,1fr);gap:var(--e5)}}
.mais-link{margin-top:var(--e4)}
.aviso-calc{font-size:.875rem;color:var(--muted);margin:var(--e4) 0 0;max-width:62ch}
.palco:not([data-etapa="1"])~.aviso-calc{display:none}

/* preço-alvo dentro do modal de alerta (o modal é vendorado; este bloco entra no DOM dele) */
.alvo{margin:var(--e4) 0 var(--e5);padding:var(--e4);background:var(--surface2);border-radius:var(--radius-sm)}
.alvo-vis{display:flex;align-items:baseline;justify-content:space-between;gap:var(--e3);margin:var(--e2) 0}
.alvo-vis output{font-size:1.875rem;font-weight:800;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.alvo-vis span{font-size:.875rem;color:var(--good);font-weight:700}
.alvo input[type=range]{width:100%;accent-color:var(--accent);height:32px}
.alvo-lim{display:flex;justify-content:space-between;font-size:.8125rem;color:var(--muted);margin-bottom:var(--e3)}
.alvo #alvo-valor{width:100%;min-height:48px;padding:0 var(--e3);border:2px solid var(--line2);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font:inherit}
.alvo #alvo-valor:focus{outline:none;border-color:var(--accent)}
.alvo{--e1:4px;--e2:8px;--e3:12px;--e4:16px;--e5:24px}

/* demonstração (só existe na prévia; radar-demo.js) */
.demo-faixa{background:var(--warn-soft);color:var(--text);border:2px dashed var(--warn);border-radius:var(--radius-sm);padding:var(--e3) var(--e4);font-size:.9375rem;max-width:none;margin:0 0 var(--e4)}
.demo-aviso{position:fixed;left:50%;bottom:var(--e5);transform:translateX(-50%);background:var(--text);color:var(--bg);padding:var(--e3) var(--e5);border-radius:var(--radius-sm);max-width:calc(100vw - 32px);z-index:50}

/* o reset .palco button{color:inherit} tem mais peso que as classes: reafirma a cor dos botões */
.palco .botao{color:var(--accent-ink)}
.palco .botao:hover{color:var(--accent-ink)}
.palco .botao.compra,.palco .botao.compra:hover{color:var(--tag-ink)}
.palco .colar{color:var(--accent)}
.palco .colar:hover{color:var(--accent-ink)}
.palco .link-btn{color:var(--accent)}
.produto h3,.oferta h3,.sem h3{font-family:inherit}
.palco:not([data-etapa="1"])~.secao-home,.palco:not([data-etapa="1"])~.aviso-calc{display:none}