/* =====================================================================
   Cards de modelo, painel expandido, simulador de orçamento e estados.
   ===================================================================== */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(348px,1fr));gap:15px}

.card{position:relative;min-width:0;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;
  display:flex;flex-direction:column;gap:13px;
  transition:border-color .25s,background .25s}
.card:hover{border-color:var(--line-2);background:var(--panel-2)}
/* Recomendado já é dito pela etiqueta; aqui basta a borda um grau acima. */
.card.rec{border-color:var(--purple-line)}
.card.calc-open{z-index:50}

.chead{display:flex;gap:12px;align-items:flex-start;min-width:0;padding-right:34px}

/* Botão de informações, no canto superior direito do card. */
.info-btn{position:absolute;top:14px;right:14px;width:28px;height:28px;border-radius:8px;
  border:1px solid var(--line);color:var(--text-4);display:grid;place-items:center;
  transition:color .2s,border-color .2s,background .2s;z-index:3}
.info-btn svg{width:15px;height:15px}
.info-btn:hover{color:var(--text);border-color:var(--purple);background:var(--accent-tint)}
.avatar{width:42px;height:42px;border-radius:11px;flex:none;display:grid;place-items:center;
  font-weight:700;font-size:var(--fs-lg);letter-spacing:-.02em;color:var(--on-accent)}
.avatar span{mix-blend-mode:luminosity;opacity:.96}
.ctitle{flex:1;min-width:0}
.ctitle h2{font-size:var(--fs-lg);font-weight:600;letter-spacing:-.015em;line-height:1.25;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ctitle h2 a{transition:color .2s;display:inline-flex;align-items:center;gap:5px}
.ctitle h2 a:hover{color:var(--purple-2)}
.ctitle h2 a svg{width:11px;height:11px;opacity:0;transition:opacity .2s;flex:none}
.ctitle h2 a:hover svg{opacity:.75}
.owner{font-size:var(--fs-sm);color:var(--text-4);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tags{display:flex;gap:5px;flex:none;flex-wrap:wrap;justify-content:flex-end;max-width:104px}
.tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 6px;border-radius:5px;border:1px solid;white-space:nowrap}
.tag.rec{color:var(--purple-2);border-color:var(--purple-line)}
.tag.beta{color:var(--cyan);border-color:var(--cyan-line)}
.tag.new{color:var(--green);border-color:var(--green-line)}
.tag.dep{color:var(--warn);border-color:var(--warn-line)}

.slug{display:flex;align-items:center;background:var(--tint-1);
  border:1px solid var(--line);border-radius:9px;overflow:hidden}
.slug code{flex:1;min-width:0;font-family:var(--mono);font-size:var(--fs-sm);color:var(--text-2);
  padding:8px 11px;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.slug code::-webkit-scrollbar{display:none}
.copy{flex:none;padding:8px 11px;border-left:1px solid var(--line);color:var(--text-4);
  display:grid;place-items:center;transition:color .2s,background .2s;align-self:stretch}
.copy svg{width:14px;height:14px}
.copy:hover{color:var(--text);background:var(--accent-tint-2)}
.copy.done{color:var(--green)}

.metrics{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.metric{background:var(--bg);padding:9px 11px;min-width:0}
.metric .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-4)}
.metric .v{font-size:var(--fs-md);font-weight:500;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.metric .v small{color:var(--text-4);font-size:11px;font-weight:400}
.metric .v.na{color:var(--text-4);font-weight:400}
.metric.wide{grid-column:1/-1}

.bars{display:flex;flex-direction:column;gap:6px}
.bar{display:grid;grid-template-columns:78px 1fr 30px;align-items:center;gap:9px}
.bar .bk{font-family:var(--mono);font-size:10px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--text-4)}
.track{display:block;height:5px;border-radius:99px;background:var(--tint-3);
  overflow:hidden;position:relative;width:100%}
.fill{display:block;height:100%;border-radius:99px;min-width:3px;
  transition:width .6s cubic-bezier(.22,1,.36,1)}
.fill.cap{background:var(--purple)}
.fill.price{background:var(--green)}
.fill.speed{background:var(--cyan)}
.fill.ctx{background:var(--purple-2)}
.bar .bv{font-family:var(--mono);font-size:10px;color:var(--text-4);text-align:right}

.caps{display:flex;gap:5px;flex-wrap:wrap}
.cap{font-size:var(--fs-xs);padding:3px 9px;border-radius:99px;border:1px solid var(--line);
  color:var(--text-3);white-space:nowrap}
.cap.g-reason{color:var(--cap-reason);border-color:var(--cap-reason-line)}
.cap.g-vision{color:var(--cap-vision);border-color:var(--cap-vision-line)}
.cap.g-fn{color:var(--cap-fn);border-color:var(--cap-fn-line)}
.cap.g-sec{color:var(--cap-sec);border-color:var(--cap-sec-line)}
.cap.g-code{color:var(--cap-code);border-color:var(--cap-code-line)}
.cap.g-web{color:var(--cap-web);border-color:var(--cap-web-line)}
.cap.g-audio{color:var(--cap-audio);border-color:var(--cap-audio-line)}
.cap.more{color:var(--text-4)}

.cfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:auto;padding-top:13px;border-top:1px solid var(--line)}
.added{font-family:var(--mono);font-size:10.5px;color:var(--text-4);
  display:flex;align-items:center;gap:5px;min-width:0}
.added svg{width:12px;height:12px;flex:none;opacity:.7}

/* Ação primária do card: preenchimento chapado, sem gradiente nem halo. */
.simular{display:inline-flex;align-items:center;gap:7px;flex:none;
  background:var(--purple);color:var(--on-accent);border-radius:9px;padding:8px 14px;
  font-size:var(--fs-sm);font-weight:500;transition:background .2s}
.simular:hover{background:var(--purple-hover)}
.simular svg{width:14px;height:14px}

/* ===== MODAL DE DETALHES =====
   O conteúdo é uma ficha em linhas, deliberadamente não outro card: a
   página não deve repetir a mesma silhueta em dois níveis. */
.overlay{position:fixed;inset:0;background:var(--scrim);z-index:800;display:grid;
  place-items:center;padding:22px;animation:fade .2s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{width:100%;max-width:620px;max-height:86vh;overflow-y:auto;background:var(--panel-2);
  border:1px solid var(--line-2);border-radius:var(--r-lg);padding:26px;position:relative;
  box-shadow:var(--shadow);animation:rise .24s cubic-bezier(.22,1,.36,1)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.modal .x{position:absolute;top:16px;right:16px;width:30px;height:30px;border-radius:8px;
  border:1px solid var(--line);color:var(--text-3);display:grid;place-items:center;
  font-size:16px;transition:color .2s,border-color .2s}
.modal .x:hover{color:var(--text);border-color:var(--warn)}
.mhead{display:flex;gap:14px;align-items:flex-start;padding-right:44px;margin-bottom:20px}
.mhead .avatar{width:50px;height:50px;border-radius:13px;font-size:var(--fs-xl)}
.mhead h3{font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.mhead .owner{font-size:var(--fs-sm);margin-top:4px;white-space:normal}
.detail{display:flex;flex-direction:column;gap:18px}
.dsec h5{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--purple-2);margin-bottom:8px}
.dsec p{color:var(--text-2);font-size:var(--fs-sm);line-height:1.65}
.goodfor{display:flex;flex-direction:column;gap:6px}
.goodfor li{list-style:none;display:flex;gap:9px;color:var(--text-2);
  font-size:var(--fs-sm);line-height:1.55}
.goodfor li::before{content:'—';color:var(--purple-2);flex:none}

/* Ficha em linhas rótulo/valor, não em grade de caixas. */
.spec{display:flex;flex-direction:column}
.spec div{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:7px 0;border-bottom:1px solid var(--line);font-size:var(--fs-sm)}
.spec div:last-child{border-bottom:none}
.spec .k{color:var(--text-4);flex:none}
.spec .v{color:var(--text);text-align:right;font-weight:500;min-width:0;word-break:break-word}
.spec .v.mono{font-family:var(--mono);font-size:var(--fs-xs)}
.privnote{font-size:var(--fs-sm);color:var(--text-3);line-height:1.6;
  border-left:2px solid var(--purple);padding-left:12px}
.official{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  border:1px solid var(--line-2);border-radius:9px;padding:8px 14px;
  font-size:var(--fs-sm);transition:border-color .2s,color .2s;color:var(--text-2)}
.official:hover{border-color:var(--purple);color:var(--text)}
.official svg{width:12px;height:12px}

/* ===== SIMULADOR DE ORÇAMENTO ===== */
.calc{position:absolute;right:16px;bottom:58px;width:min(300px,calc(100% - 32px));z-index:30;
  background:var(--panel-2);border:1px solid var(--purple);border-radius:var(--r);padding:15px;
  box-shadow:var(--shadow);animation:pop .2s cubic-bezier(.22,1,.36,1);cursor:default}
@keyframes pop{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.calc h4{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--purple-2);margin-bottom:12px;display:flex;justify-content:space-between;align-items:center}
.calc h4 button{color:var(--text-4);font-size:16px;line-height:1}
.calc h4 button:hover{color:var(--text)}
.brl{display:flex;align-items:center;gap:8px;background:var(--bg);
  border:1px solid var(--line);border-radius:9px;padding:0 12px;height:44px;
  transition:border-color .2s,box-shadow .2s}
.brl:focus-within{border-color:var(--purple);box-shadow:var(--focus)}
.brl span{font-family:var(--mono);font-size:var(--fs-md);color:var(--text-4);flex:none}
.brl input{flex:1;min-width:0;background:none;border:none;outline:none;
  font-size:var(--fs-lg);font-weight:600}
.brl input::-webkit-outer-spin-button,.brl input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.brl input[type=number]{-moz-appearance:textfield}
.presets{display:flex;gap:5px;margin-top:8px}
.presets button{flex:1;font-family:var(--mono);font-size:var(--fs-xs);padding:6px 0;
  border-radius:7px;border:1px solid var(--line);color:var(--text-3);
  transition:border-color .2s,color .2s}
.presets button:hover{border-color:var(--purple);color:var(--text)}
.calcout{margin-top:12px;border-top:1px solid var(--line);padding-top:12px;
  display:flex;flex-direction:column;gap:8px}
.crow{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:var(--fs-sm)}
.crow .ck{color:var(--text-4);min-width:0}
.crow .cv{font-family:var(--mono);font-size:var(--fs-md);color:var(--text);
  font-weight:500;text-align:right;flex:none}
.crow.hero .cv{font-size:var(--fs-xl);color:var(--purple-2)}
.fx{margin-top:10px;font-family:var(--mono);font-size:10px;color:var(--text-4);line-height:1.5}

/* ===== ESTADOS ===== */
.empty{text-align:center;padding:76px 24px;color:var(--text-3)}
.empty h4{color:var(--text);font-size:var(--fs-xl);font-weight:600;margin-bottom:8px}
.empty p{font-size:var(--fs-sm);max-width:44ch;margin:0 auto 20px}
.more-wrap{display:grid;place-items:center;padding:30px 0 10px}
.more-btn{border:1px solid var(--line-2);border-radius:var(--r);padding:12px 30px;
  font-size:var(--fs-md);font-weight:500;color:var(--text-2);
  transition:border-color .25s,color .25s}
.more-btn:hover{border-color:var(--purple);color:var(--text)}

.toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%,90px);z-index:900;
  background:var(--panel-2);border:1px solid var(--line-2);border-radius:var(--r);
  padding:12px 18px;font-size:var(--fs-sm);display:flex;align-items:center;gap:9px;
  box-shadow:var(--shadow);opacity:0;
  transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .3s;pointer-events:none}
.toast.show{transform:translate(-50%,0);opacity:1}
.toast svg{width:15px;height:15px;color:var(--green);flex:none}
.scrim{display:none}

/* ===== RESPONSIVO ===== */
@media(max-width:1080px){
  :root{--rail:228px}
  .shell{gap:24px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(312px,1fr))}
}
@media(max-width:900px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .filterbtn{display:flex}
  .rail{position:fixed;top:0;left:0;bottom:0;width:min(316px,86vw);z-index:700;
    background:var(--panel);border-right:1px solid var(--line);padding:20px 16px;
    max-height:none;transform:translateX(-102%);
    transition:transform .3s cubic-bezier(.22,1,.36,1);overflow-y:auto}
  .rail.open{transform:none}
  .rail-close{display:flex;align-items:center;justify-content:space-between;width:100%;
    margin-bottom:18px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--purple-2)}
  .rail-close span:last-child{font-size:18px;color:var(--text-3)}
  .scrim{display:block;position:fixed;inset:0;background:var(--scrim);
    z-index:690;opacity:0;pointer-events:none;transition:opacity .3s}
  .scrim.on{opacity:1;pointer-events:auto}
}
@media(max-width:767px){
  .container{padding:0 18px}
  .nav{height:66px}
  .brand img{width:112px}
  .hero{padding-top:4px;padding-bottom:22px}
  .grid{grid-template-columns:minmax(0,1fr);gap:13px}
  .searchrow{flex-wrap:wrap}
  .search{order:1;flex:1 1 100%}
  .filterbtn{order:2;flex:1}
  .sortwrap{order:3;flex:1.35}
  .sortwrap select{width:100%;max-width:none}
  kbd{display:none}
  .footer{flex-direction:column;text-align:center;gap:12px;padding-top:28px;padding-bottom:28px}
  /* Ancorado embaixo: um popover flutuante fica pequeno demais no polegar. */
  .calc{position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;
    border-radius:var(--r-lg) var(--r-lg) 0 0;border-bottom:none;
    padding:18px 18px 26px;z-index:750}
  @keyframes pop{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:none}}
  .brl input{font-size:16px} /* evita o zoom automático do iOS */
}
@media(max-width:339px){ .metrics{grid-template-columns:minmax(0,1fr)} .tags{max-width:none} }
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@media print{.rail,.controls,.scrim,.simular{display:none!important}.shell{grid-template-columns:1fr}}