/* ============================================================
   PÁGINAS
   Breadcrumb, categoria, listagem, ficha e compatibilidade.
   ============================================================ */

/* ---------- breadcrumb ---------- */
.crumb{background:var(--navy-d);font-size:15px;color:#8ba3b2;border-bottom:1px solid rgba(234,232,225,.1)}
.crumb .wrap{display:flex;gap:9px;padding-top:13px;padding-bottom:13px;flex-wrap:wrap;align-items:center}
.crumb b{color:var(--yellow)}
.crumb button:hover{color:var(--white)}

/* ---------- página de categoria ---------- */
.cathero{position:relative;overflow:hidden;background:var(--navy);padding:clamp(40px,5vw,72px) 0 clamp(44px,5vw,76px)}
.cathero .blade{position:absolute;inset:0;background:linear-gradient(140deg,transparent 0 60%,rgba(234,217,10,.13) 60% 63%,transparent 63%)}
.cathero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:44px;align-items:end}
.montgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:2px;background:var(--line)}
.mont{background:var(--white);padding:20px 18px;text-align:left;display:flex;flex-direction:column;gap:4px;position:relative;overflow:hidden}
.mont::after{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--yellow);transition:width .2s}
.mont:hover::after{width:6px}
.mont b{font-size:19px;font-weight:800;color:var(--navy)}
.mont span{font-size:14.5px;color:var(--ink-3)}
.prose{max-width:64ch;display:flex;flex-direction:column;gap:16px}
.prose p{font-size:20px}
.types{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:2px;background:var(--line)}
.type{background:var(--white);padding:28px 26px}
.type h3{font-size:22px;font-weight:800;margin-bottom:12px;color:var(--navy)}
.type p{font-size:16.5px;color:var(--ink-2)}
table.app{width:100%;border-collapse:collapse;font-size:18px;background:var(--white)}
table.app th{background:var(--navy);color:var(--cream);text-align:left;padding:14px 18px;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
table.app td{padding:15px 18px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-2)}
table.app td:first-child{font-weight:750;color:var(--navy);width:32%}
.faq{border-bottom:1px solid var(--line)}
.faq summary{padding:22px 4px;font-weight:750;font-size:20px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:18px;color:var(--navy)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;font-size:30px;line-height:1;color:var(--ink-3)}
.faq[open] summary::after{content:"–";color:var(--navy)}
.faq p{padding:0 4px 24px;color:var(--ink-2);max-width:74ch}

/* ---------- listagem ---------- */
.listwrap{display:grid;grid-template-columns:270px minmax(0,1fr);gap:40px;padding:36px 0 90px}
.facets{align-self:start;position:sticky;top:96px;display:flex;flex-direction:column;gap:26px}
.fg h4{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--yellow);padding-bottom:10px;border-bottom:1px solid rgba(234,232,225,.2);margin-bottom:12px;font-weight:800}
.fopt{display:flex;align-items:center;gap:10px;font-size:16.5px;color:#c3d0d8;cursor:pointer;padding:5px 0}
.fopt input{position:absolute;opacity:0;width:0;height:0}
.fopt .bx{width:16px;height:16px;border:2px solid #6c8797;flex:none;display:grid;place-items:center}
.fopt input:checked + .bx{background:var(--yellow);border-color:var(--yellow)}
.fopt input:checked + .bx::after{content:"";width:8px;height:8px;background:var(--navy)}
.fopt input:focus-visible + .bx{outline:3px solid var(--yellow);outline-offset:2px}
.fopt:hover{color:var(--white)}
.fopt .n{margin-left:auto;font-size:14.5px;color:#8ba3b2}
.fopt.off{opacity:.35;cursor:not-allowed}
.lhead{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;padding-bottom:16px;border-bottom:3px solid var(--yellow)}
.lhead b{font-size:clamp(25.5px,2.6vw,37px);font-weight:900;letter-spacing:-.03em;color:var(--white)}
.lhead .srt{margin-left:auto;font-size:15.5px;color:#9db3c0}
.lhead select{font:inherit;font-size:15.5px;background-color:var(--navy-d);color:var(--cream);border:1px solid rgba(234,232,225,.25);padding:8px 10px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.chip{display:flex;align-items:center;gap:9px;border:1px solid var(--yellow);color:var(--yellow);font-size:15px;padding:5px 12px;font-weight:600}
.chip.clear{border-style:dashed;border-color:rgba(234,232,225,.4);color:#9db3c0}
.rows{display:flex;flex-direction:column;gap:2px;margin-top:20px;background:rgba(234,232,225,.12)}
.prow{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:20px;align-items:center;background:var(--navy);padding:18px 20px;transition:background .16s}
.prow:hover{background:var(--navy-l)}
.prow .thumb{height:74px;background:rgba(234,232,225,.07);border:1px solid rgba(234,232,225,.16);position:relative;overflow:hidden}
/* A foto que o painel enviou ocupa a caixa inteira; a cunha
   de 50 graus do ::after continua por cima, so que agora
   sobre a foto em vez de sobre o vazio. */
.prow .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.prow .thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(140deg,transparent 0 50%,rgba(234,217,10,.16) 50% 100%)}
.prow .code{font-size:22px;font-weight:900;letter-spacing:-.02em;color:var(--white)}
.prow .nm{font-size:15.5px;color:#9db3c0;margin-top:2px}
.prow .sp{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
.prow .sp span{font-size:13px;padding:3px 9px;border:1px solid rgba(234,232,225,.25);color:#c3d0d8}
.prow .sp span.hi{border-color:var(--yellow);color:var(--yellow);font-weight:700}
.prow .act{display:flex;flex-direction:column;gap:8px}
.empty{padding:70px 20px;text-align:center;background:var(--navy);color:#9db3c0}
.empty b{display:block;font-size:25.5px;color:var(--white);margin-bottom:12px;font-weight:800}



/* ---------- ficha ---------- */
.sheet{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:clamp(28px,4vw,56px);padding:40px 0 90px}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.badge{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:900;padding:6px 11px}
.b-y{background:var(--yellow);color:var(--navy)}
.b-o{background:var(--opal);color:var(--navy)}
.b-l{border:1px solid rgba(234,232,225,.4);color:#c3d0d8}
.codebig{display:flex;align-items:center;gap:14px;margin:22px 0 8px;flex-wrap:wrap}
.codebig b{font-size:clamp(30px,3.2vw,46px);font-weight:900;letter-spacing:-.03em;color:var(--yellow);line-height:1}
.copybtn{border:1px solid rgba(234,232,225,.35);padding:7px 13px;font-size:14.5px;font-weight:700;color:#c3d0d8}
.copybtn:hover{background:var(--yellow);color:var(--navy);border-color:var(--yellow)}
.copybtn.ok{background:var(--opal);color:var(--navy);border-color:var(--opal)}
.buybox{background:var(--navy-d);padding:24px;margin-top:26px;display:flex;flex-direction:column;gap:12px;border-left:5px solid var(--yellow)}
.buybox .btn{justify-content:center}
.buybox small{color:#8ba3b2;font-size:14.5px;line-height:1.5}
.spectable{width:100%;border-collapse:collapse;font-size:18px}
.spectable td{padding:14px 16px;border-bottom:1px solid rgba(234,232,225,.15)}
.spectable td:first-child{color:#9db3c0;font-size:15px;letter-spacing:.05em;text-transform:uppercase;font-weight:700;width:46%}
.spectable td:last-child{font-weight:700;color:var(--white)}
h2.blk{font-size:15px;letter-spacing:.18em;text-transform:uppercase;color:var(--yellow);font-weight:900;margin:46px 0 4px;padding-bottom:12px;border-bottom:1px solid rgba(234,232,225,.2)}
.eqs{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:2px;background:rgba(234,232,225,.15);margin-top:18px}
.eq{background:var(--navy);padding:14px 16px}
.eq span{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#8ba3b2;font-weight:800}
.eq b{display:block;font-size:18.5px;font-weight:800;color:var(--white);margin-top:4px}

/* ---------- compatibilidade ---------- */
.progress{display:flex;height:5px;background:rgba(234,232,225,.15);margin-top:30px}
.progress i{background:var(--yellow);transition:width .3s}
.stepper{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:2px;background:rgba(234,232,225,.15);margin-top:2px}
.st{background:var(--navy);padding:18px 20px;opacity:.42}
.st.on,.st.done{opacity:1}
.st span{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#8ba3b2;font-weight:800}
.st b{display:block;font-size:18.5px;font-weight:800;color:var(--white);margin-top:4px}
.st i{font-style:normal;display:block;font-size:15px;color:var(--yellow);margin-top:3px;font-weight:700}
.opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:2px;background:rgba(234,232,225,.15);margin-top:34px}
.opt{background:var(--navy);padding:22px 20px;text-align:left;position:relative;overflow:hidden;transition:background .18s}
.opt:hover:not(.na){background:var(--navy-l)}
.opt b{display:block;font-size:19.5px;font-weight:800;color:var(--white)}
.opt small{display:block;font-size:14.5px;color:#8ba3b2;margin-top:5px}
.opt::after{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--yellow);transition:width .18s}
.opt:hover:not(.na)::after,.opt.sel::after{width:6px}
.opt.na{opacity:.3;cursor:not-allowed}

/* ---------- sem resultado ---------- */
.nores{max-width:660px;margin:0 auto;padding:clamp(60px,9vw,120px) 0;text-align:center}
.nores .d2{color:var(--white);margin-bottom:20px}
.nores p{color:#9db3c0;font-size:20.5px;margin-bottom:30px}
.nores .term{color:var(--yellow);font-weight:800}

/* ---------- ação fixa mobile ---------- */
.mobile-bar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:65;background:var(--navy-d);border-top:1px solid rgba(234,232,225,.2)}
.mobile-bar div{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.mobile-bar button{padding:15px 10px;font-size:15.5px;font-weight:800;color:var(--cream)}
.mobile-bar button.wa{background:var(--yellow);color:var(--navy)}

.view{display:none}
.view.on{display:block}
.reveal{opacity:0;transform:translateY(22px)}
.reveal.in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}