/* Portal Rei das Peças — pergunta + retângulos coloridos + busca que entende a peça */
:root{
  --bg:#0E0E0F; --bg2:#18181A; --panel:#1E1E21; --line:#333337; --line2:#26262A;
  --ink:#EEF1F4; --mute:#9CA6B1; --dim:#6F7A86; --field:#FFFFFF; --field-ink:#15181C;
  --gold:#E1251B; --gold-ink:#FFFFFF; --gold-text:#FF4A3D; --wa:#1FAF55; --ok:#3DD68C; --bad:#FF8A7A;
  --glow:rgba(225,37,27,.16); --shadow:rgba(0,0,0,.75); --hover:#29303A; --float-op:.20; --float-f:brightness(1.9) contrast(.9);
  --display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --body:"Barlow",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:dark;
}
:root[data-tema="claro"]{
  --bg:#EEF0F3; --bg2:#FFFFFF; --panel:#FFFFFF; --line:#D5DAE0; --line2:#E4E8EC;
  --ink:#15181C; --mute:#56606B; --dim:#86909B;
  --gold-text:#C41E15; --bad:#C0392B; --glow:rgba(225,37,27,.14); --shadow:rgba(20,30,40,.28); --hover:#F3F5F7; --float-op:.16; --float-f:none;
  color-scheme:light;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased;transition:background .25s,color .25s}
button,input{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
[hidden]{display:none!important}

.stage{position:relative;min-height:100vh;display:flex;flex-direction:column;overflow:hidden}
.stage::after{content:"";position:absolute;left:50%;top:-260px;width:1000px;height:600px;transform:translateX(-50%);pointer-events:none;background:radial-gradient(closest-side,var(--glow),transparent);z-index:0}
.stage > *{position:relative;z-index:1}

.top{display:flex;align-items:center;gap:10px;padding:16px 24px;padding-top:calc(16px + env(safe-area-inset-top,0px))}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.crown{width:38px;height:38px;border-radius:9px;background:var(--gold);display:grid;place-items:center;flex:none}
.crown svg{width:23px;height:23px}
.logo b{font-family:var(--display);font-weight:700;font-size:24px;letter-spacing:.02em;text-transform:uppercase;line-height:1}
.logo small{display:block;font-size:12px;color:var(--mute)}
.top .sp{flex:1}
.lnk{background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:8px 12px;color:var(--mute);font-weight:600;font-size:14px;cursor:pointer;text-decoration:none;display:inline-flex;gap:8px;align-items:center;white-space:nowrap}
.lnk:hover{color:var(--ink);border-color:var(--dim)}
.lnk svg{width:17px;height:17px;flex:none}
.lnk.wa{background:var(--wa);border-color:var(--wa);color:#fff}

main{flex:1;width:100%;max-width:1080px;margin:0 auto;padding:40px 24px 28px}
h1{font-family:var(--display);font-weight:700;text-align:center;text-transform:uppercase;font-size:clamp(40px,6.6vw,80px);line-height:.95;margin:0 0 12px;letter-spacing:.005em;text-wrap:balance}
h1 em{font-style:normal;color:var(--gold-text)}
.sub{text-align:center;color:var(--mute);font-size:18px;margin:0 auto 24px;max-width:52ch}

.ask{position:relative;max-width:740px;margin:0 auto}
.ask form{display:flex;align-items:center;gap:10px;background:var(--field);color:var(--field-ink);border:1px solid var(--line);border-radius:14px;padding:6px 6px 6px 18px;box-shadow:0 18px 44px -22px var(--shadow)}
.ask form > svg{width:22px;height:22px;color:#6F7A86;flex:none}
.ask input{flex:1;min-width:0;border:0;outline:none;font-size:19px;padding:14px 0;background:transparent;color:var(--field-ink)}
.ask input::placeholder{color:#9AA3AD}
.ask button[type=submit]{border:0;background:var(--gold);color:var(--gold-ink);font-weight:700;border-radius:10px;padding:13px 20px;cursor:pointer;font-size:16px;white-space:nowrap}
.sug{margin-top:10px;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 22px 44px -26px var(--shadow)}
.sug .lbl{padding:9px 16px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);border-bottom:1px solid var(--line2)}
.opt{display:flex;align-items:center;gap:14px;padding:11px 16px;text-decoration:none;border-bottom:1px solid var(--line2);cursor:pointer}
.opt:last-child{border-bottom:0}
.opt .sw{width:6px;align-self:stretch;border-radius:3px;background:var(--c);flex:none}
.opt .th{width:58px;height:40px;border-radius:6px;background:#EEF1F4;display:grid;place-items:center;flex:none}
.opt .th svg{width:92%}
.opt .tx{min-width:0;flex:1}
.opt b{display:block;font-size:16px;line-height:1.25}
.opt .tx span{display:block;color:var(--mute);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opt .rt{margin-left:auto;text-align:right;white-space:nowrap;font-size:13px;color:var(--mute)}
.opt .rt strong{display:block;color:var(--ink);font-size:16px;font-variant-numeric:tabular-nums}
.opt[aria-selected="true"],.opt:hover{background:var(--hover)}
.kbd{font-family:var(--mono);font-size:11px;border:1px solid var(--line);border-radius:4px;padding:1px 5px;color:var(--dim)}
.nada{padding:16px;color:var(--mute);font-size:15px}
.nada a{color:var(--ink);font-weight:700}

.pick{margin-top:34px}
.pick-h{text-align:center;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:700;margin:0 0 14px}
.rects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.rect{position:relative;display:flex;align-items:center;gap:12px;min-height:128px;padding:18px 14px 18px 22px;border-radius:14px;background:var(--c);color:var(--t);text-decoration:none;overflow:hidden;cursor:pointer;
  box-shadow:0 14px 30px -18px var(--c);transition:transform .18s,box-shadow .18s;height:100%}
.rectw{position:relative;animation:entra .5s both cubic-bezier(.2,.8,.2,1);animation-delay:calc(var(--i) * 90ms)}
.rect::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.16),transparent 45%);pointer-events:none}
.rect:hover,.rect:focus-visible{transform:translateY(-3px);box-shadow:0 22px 40px -18px var(--c)}
.rect .tx{flex:1;min-width:0;position:relative;z-index:1}
.rect small{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.rect b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(26px,2.7vw,36px);line-height:1;text-transform:uppercase;margin:4px 0 6px}
.rect.long b{font-size:clamp(20px,1.8vw,25px)}
.rect.xlong b{font-size:clamp(18px,1.55vw,22px);letter-spacing:-.01em}
.rect span{font-size:14px;opacity:.92}
.rect .tx{padding-bottom:26px}
@media (max-width:560px){.rectw .info{left:18px;bottom:10px}}
.rectw.soon .info{background:var(--bg2);color:var(--mute);border:1px solid var(--line)}
.rect .ar{width:104px;height:78px;flex:none;border-radius:12px;background:rgba(255,255,255,.92);display:grid;place-items:center;position:relative;z-index:1}
.rect .ar svg{width:92%}
.rect .key{position:absolute;top:10px;right:12px;font-family:var(--mono);font-size:11px;background:rgba(0,0,0,.28);color:#fff;border-radius:4px;padding:1px 6px;z-index:2}
.rect.soon{background:transparent;color:var(--mute);border:1.5px dashed var(--line);box-shadow:none;cursor:default}
.rect.soon::after{display:none}
.rect.soon:hover{transform:none}
.rect.soon .ar{background:var(--bg2);filter:grayscale(1);opacity:.5}
.rect.soon .wa{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}
@keyframes entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.help{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px}
.help > div{background:var(--bg2);border:1px solid var(--line2);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.help h3{margin:0;font-size:17px}
.help p{margin:0;color:var(--mute);font-size:14px;flex:1}
.help form{display:flex;gap:8px}
.help input{flex:1;min-width:0;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-family:var(--mono);text-transform:uppercase;font-size:15px}
.btn{border:0;border-radius:8px;padding:10px 14px;font-weight:700;cursor:pointer;background:var(--gold);color:var(--gold-ink);text-decoration:none;display:inline-flex;gap:8px;align-items:center;justify-content:center;font-size:15px;white-space:nowrap}
.btn.wa{background:var(--wa);color:#fff;align-self:flex-start}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink);align-self:flex-start}
.btn svg{width:18px;height:18px}
.help .msg{font-size:14px;color:var(--mute);min-height:20px}
.help .msg.err{color:var(--bad)}
.help .msg a{color:var(--ink);font-weight:700}
.stats{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 24px;margin-top:22px;color:var(--dim);font-size:14px}
.stats b{color:var(--ink);font-variant-numeric:tabular-nums}
.foot{padding:18px 24px calc(18px + env(safe-area-inset-bottom,0px));color:var(--dim);font-size:13px;text-align:center;border-top:1px solid var(--line2)}

.warp{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:var(--c);color:var(--t);clip-path:circle(0 at var(--x) var(--y));transition:clip-path .5s cubic-bezier(.6,0,.3,1);pointer-events:none}
.warp.on{clip-path:circle(150% at var(--x) var(--y));pointer-events:auto}
.warp div{display:flex;flex-direction:column;align-items:center;gap:12px;opacity:0;transition:opacity .2s .25s;text-align:center;padding:20px}
.warp.on div{opacity:1}
.warp svg{width:54px;height:54px}
.warp b{font-family:var(--display);font-size:clamp(34px,6vw,60px);text-transform:uppercase;line-height:1}
.warp span{font-size:15px;opacity:.85}

@media (max-width:900px){
  .rects{grid-template-columns:repeat(2,minmax(0,1fr))}
  .help{grid-template-columns:1fr}
  .top .hide-s{display:none}
}
@media (max-width:560px){
  main{padding:24px 16px 24px}
  .top{padding-inline:16px}
  .rects{grid-template-columns:1fr;gap:10px}
  .rect{min-height:96px;padding:14px 12px 14px 18px}
  .rect .ar{width:92px;height:66px}
  .rect .key{display:none}
  .ask form{padding-left:12px}
  .ask input{font-size:17px}
  .ask button[type=submit]{padding:12px 14px}
  .logo small{display:none}
  .opt .th{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- peças flutuando no fundo ---------- */
.floaters{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.fl{position:absolute;left:0;top:0;opacity:0;will-change:transform,opacity;filter:var(--float-f)}
.fl svg{width:100%;height:auto;display:block}

/* ---------- ajuda: dica, "o que é?", botão de ajuda ---------- */
.tip{position:absolute;left:50%;top:calc(100% + 14px);transform:translate(-50%,6px);width:min(420px,calc(100vw - 32px));background:var(--gold);color:var(--gold-ink);border-radius:12px;padding:12px 40px 12px 14px;font-size:15px;box-shadow:0 16px 36px -16px var(--shadow);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;z-index:6}
.tip.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.tip::before{content:"";position:absolute;top:-7px;left:50%;width:14px;height:14px;background:var(--gold);transform:translateX(-50%) rotate(45deg);border-radius:2px}
.tip b{display:block;margin-bottom:2px}
.tip button{position:absolute;top:6px;right:6px;width:28px;height:28px;border:0;border-radius:6px;background:rgba(0,0,0,.12);cursor:pointer;font-size:16px;color:var(--gold-ink)}
.tip .ex{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.tip .ex button{position:static;width:auto;height:auto;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.14);font-size:13px;font-weight:600}

.rectw .info{position:absolute;left:22px;bottom:12px;z-index:3;border:0;border-radius:999px;background:rgba(0,0,0,.28);color:#fff;font-size:12px;font-weight:700;padding:3px 10px 3px 6px;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.rectw .info i{width:16px;height:16px;border-radius:50%;background:#fff;color:#111;font-style:normal;display:grid;place-items:center;font-size:11px;font-weight:800}
.rectw .info:hover{background:rgba(0,0,0,.45)}
.pop{position:fixed;z-index:40;width:min(340px,calc(100vw - 32px));background:var(--panel);color:var(--ink);border:1px solid var(--line);border-top:4px solid var(--c);border-radius:12px;padding:14px 16px 16px;box-shadow:0 24px 48px -20px var(--shadow);opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s;pointer-events:none}
.pop.on{opacity:1;transform:none;pointer-events:auto}
.pop h4{margin:0 0 6px;font-size:17px;display:flex;justify-content:space-between;gap:10px;align-items:center}
.pop h4 button{border:0;background:var(--bg2);border-radius:6px;width:28px;height:28px;cursor:pointer;color:var(--ink);font-size:16px}
.pop p{margin:0 0 8px;color:var(--mute);font-size:14px}
.pop .sint{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);margin:10px 0 4px}
.pop ul{margin:0 0 12px;padding-left:18px;font-size:14px}
.pop ul li{margin:2px 0}
.pop .go{display:inline-flex;gap:6px;align-items:center;background:var(--c);color:var(--t);border-radius:8px;padding:9px 14px;font-weight:700;text-decoration:none;font-size:14px}

.fab{position:fixed;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:30;display:flex;align-items:center;gap:10px;border:0;border-radius:999px;background:var(--ink);color:var(--bg);padding:12px 18px 12px 12px;font-weight:700;cursor:pointer;box-shadow:0 14px 30px -12px var(--shadow)}
.fab i{width:28px;height:28px;border-radius:50%;background:var(--gold);color:var(--gold-ink);display:grid;place-items:center;font-style:normal;font-size:17px;font-weight:800}
.fab.pulse i{animation:pulso 1.6s ease-out 3}
@keyframes pulso{0%{box-shadow:0 0 0 0 rgba(225,37,27,.6)}100%{box-shadow:0 0 0 14px rgba(225,37,27,0)}}
.helpbox{position:fixed;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(80px + env(safe-area-inset-bottom,0px));z-index:31;width:min(380px,calc(100vw - 36px));max-height:calc(100vh - 110px);overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 28px 60px -24px var(--shadow);opacity:0;transform:translateY(10px) scale(.98);transform-origin:bottom right;transition:opacity .2s,transform .2s;pointer-events:none}
.helpbox.on{opacity:1;transform:none;pointer-events:auto}
.helpbox .hh{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line2)}
.helpbox .hh b{font-size:17px}
.helpbox .hh button{border:0;background:var(--bg2);border-radius:6px;width:30px;height:30px;cursor:pointer;color:var(--ink);font-size:17px}
.helpbox .hb{padding:14px 16px 16px;display:flex;flex-direction:column;gap:14px}
.helpbox h5{margin:0 0 6px;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim)}
.sints{display:flex;flex-wrap:wrap;gap:6px}
.sints button{border:1px solid var(--line);background:var(--bg2);border-radius:999px;padding:6px 12px;cursor:pointer;font-size:14px;color:var(--ink)}
.sints button:hover{border-color:var(--gold)}
.sres{margin-top:8px;font-size:14px;color:var(--mute);display:flex;flex-direction:column;gap:6px}
.sres a{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font-weight:700;border:1px solid var(--line2);border-left:5px solid var(--c);border-radius:8px;padding:8px 10px;background:var(--bg2)}
.hsteps{margin:0;padding:0;list-style:none;display:grid;gap:8px;counter-reset:h}
.hsteps li{display:flex;gap:10px;font-size:14px;color:var(--mute)}
.hsteps li::before{counter-increment:h;content:counter(h);width:22px;height:22px;border-radius:50%;background:var(--bg2);border:1px solid var(--line);display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--ink);flex:none}
.hacts{display:grid;gap:8px}
.hacts a{display:flex;align-items:center;gap:10px;text-decoration:none;border:1px solid var(--line2);border-radius:10px;padding:10px 12px;background:var(--bg2);font-weight:600;font-size:15px}
.hacts a svg{width:18px;height:18px;flex:none}
.hacts a small{display:block;font-weight:400;color:var(--mute);font-size:13px}
.hacts a:hover{border-color:var(--line)}
@media (max-width:560px){ .fab span{display:none} .fab{padding:10px} }

/* ---------- mini tutorial ---------- */
.tour{position:fixed;inset:0;z-index:60}
.tour .spot{position:fixed;border-radius:14px;box-shadow:0 0 0 9999px rgba(8,10,13,.66);transition:left .35s,top .35s,width .35s,height .35s;pointer-events:none;outline:3px solid var(--gold);outline-offset:2px}
.tour .bub{position:fixed;width:min(360px,calc(100vw - 32px));background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:0 28px 60px -20px rgba(0,0,0,.8);transition:left .35s,top .35s}
.tour .bub small{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-text);margin-bottom:4px}
.tour .bub h4{margin:0 0 6px;font-size:19px}
.tour .bub p{margin:0 0 14px;color:var(--mute);font-size:15px}
.tour .dots{display:flex;gap:5px;margin-bottom:12px}
.tour .dots i{width:18px;height:4px;border-radius:2px;background:var(--line)}
.tour .dots i.on{background:var(--gold)}
.tour .row{display:flex;gap:8px;align-items:center}
.tour .row .skip{margin-right:auto;background:none;border:0;color:var(--mute);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-size:14px;padding:6px 0}
.tour .row button.sec{background:var(--bg2);border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:9px 14px;cursor:pointer;font-weight:600}
.tour .row button.pri{background:var(--gold);border:0;color:var(--gold-ink);border-radius:8px;padding:9px 16px;cursor:pointer;font-weight:700}
.tour .hand{position:fixed;width:34px;height:34px;pointer-events:none;transition:left .35s,top .35s;animation:toque 1.2s ease-in-out infinite;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}
@keyframes toque{0%,100%{transform:translate(0,0)}50%{transform:translate(-4px,-6px)}}

/* ---------- DUDA 2.0 ---------- */
.logo b em{font-style:normal;color:#fff;background:var(--gold);border-radius:4px;padding:0 5px;margin:0 2px;font-size:.8em;vertical-align:.12em}
.crown svg{width:25px;height:25px}
.ribbon{display:flex;width:max-content;max-width:100%;margin:0 auto 18px;align-items:center;gap:10px;text-decoration:none;background:var(--bg2);border:1px solid var(--line);border-radius:999px;padding:6px 14px 6px 6px;font-size:14px;color:var(--mute);font-weight:600;animation:entra .6s both}
.ribbon b{background:var(--gold);color:#fff;border-radius:999px;padding:2px 10px;font-size:12px;letter-spacing:.08em}
.ribbon:hover{color:var(--ink);border-color:var(--dim)}
.rects{grid-template-columns:repeat(3,minmax(0,1fr))}
.mudou{margin-top:40px;background:var(--bg2);border:1px solid var(--line2);border-radius:16px;padding:26px 24px}
.mudou-h{text-align:center;margin-bottom:18px}
.mudou-h h2{font-family:var(--display);font-size:clamp(28px,3.4vw,40px);text-transform:uppercase;margin:8px 0 4px;line-height:1}
.mudou-h p{margin:0;color:var(--mute)}
.tag2{display:inline-block;background:var(--gold);color:#fff;font-family:var(--display);font-weight:700;font-size:20px;border-radius:6px;padding:0 10px}
.mudou-g{display:grid;gap:10px}
.mv{display:grid;grid-template-columns:1fr 40px 1fr;align-items:stretch;gap:8px;animation:entra .5s both;animation-delay:calc(var(--i) * 80ms)}
.mv > div{border-radius:10px;padding:12px 14px;font-size:15px}
.mv small{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:3px}
.antes{background:var(--bg);color:var(--dim);border:1px dashed var(--line);text-decoration:line-through;text-decoration-color:rgba(225,37,27,.55)}
.antes small{color:var(--dim);text-decoration:none;display:block}
.agora{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--gold);color:var(--ink);font-weight:600}
.agora small{color:var(--gold-text)}
.seta{display:grid;place-items:center;color:var(--gold-text);font-size:22px;font-weight:700}
.dukit{margin-top:16px;display:flex;gap:12px;align-items:center;border-top:1px solid var(--line2);padding-top:14px;color:var(--mute);font-size:14px}
.dukit b{background:#000;color:#fff;border:1px solid var(--gold);border-radius:6px;padding:4px 10px;font-family:var(--display);letter-spacing:.06em}
:root[data-tema="claro"] .dukit b{background:#111}
@media (max-width:640px){
  .mv{grid-template-columns:1fr}
  .seta{transform:rotate(90deg);height:18px}
  .mudou{padding:20px 14px}
}

.lnk .cnt{background:var(--gold);color:#fff;border-radius:999px;font-size:12px;min-width:20px;height:20px;display:inline-grid;place-items:center;padding:0 6px;font-style:normal}
.logo .brandimg{display:block;height:40px;width:auto}
.logo-c{display:none!important}
:root[data-tema="claro"] .logo-e{display:none!important}
:root[data-tema="claro"] .logo-c{display:block!important}
@media (max-width:600px){.logo .brandimg{height:30px!important}}