/* /js/pacotes-item/pacotes-item.css — detalhes do item no clique (mockup aprovado em 06/10/2026:
   docs/mockups/pacotes/detalhes-do-item-no-clique.html). Letra de 15px (regra 18; o "i" do celular é ícone, fica de fora);
   bloco animado (regra 11), sem movimento em prefers-reduced-motion. */

/* o item clicável: realce suave + etiqueta "Toque para ver detalhes" ao passar o mouse */
.pk-alvo{position:relative;cursor:pointer;border-radius:12px;outline:none;transition:background .2s,box-shadow .2s}
.pk-alvo:hover,.pk-alvo:focus-visible{background:rgba(32,211,224,.06);box-shadow:0 0 0 1px rgba(32,211,224,.45)}
.pk-dica{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate(-50%,4px);opacity:0;pointer-events:none;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;background:linear-gradient(180deg,#123440,#0c1c24);border:1px solid rgba(32,211,224,.55);color:#cff8fb;font-weight:600;font-size:15px;line-height:1.2;box-shadow:0 8px 24px rgba(0,0,0,.45);transition:opacity .18s,transform .18s;z-index:30}
.pk-dica::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);border:7px solid transparent;border-top-color:rgba(32,211,224,.55)}
.pk-dica svg{width:16px;height:16px;flex:none}
.pk-alvo:hover>.pk-dica,.pk-alvo:focus-visible>.pk-dica{opacity:1;transform:translate(-50%,0)}
/* no celular não existe "passar o mouse": um i pequenino no canto avisa que dá para tocar */
.pk-i{display:none}
@media (hover:none){
  .pk-i{display:grid;place-items:center;position:absolute;top:2px;right:2px;width:18px;height:18px;border-radius:50%;background:#0c1c24;border:1px solid rgba(32,211,224,.55);color:#7fe9f1;font:700 15px/1 Georgia,serif;pointer-events:none}
  .pk-dica{display:none}
}

/* botãozinho redondo (Tier List, Monte seu meta): aparece ao passar o mouse no card */
.pk-mini{position:absolute;z-index:6;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;padding:0;border:1px solid rgba(32,211,224,.55);background:#0c1c24;color:#7fe9f1;cursor:pointer;opacity:0;transform:scale(.85);transition:opacity .18s,transform .18s}
.pk-mini svg{width:18px;height:18px}
:hover>.pk-mini,:focus-within>.pk-mini,.pk-mini:focus-visible{opacity:1;transform:scale(1)}
.pk-mini[hidden]{display:none}
.pk-mini .pk-dica-baixo{bottom:auto;top:calc(100% + 8px);left:auto;right:-6px;transform:translateY(4px)}
.pk-mini .pk-dica-baixo::after{top:auto;bottom:100%;left:auto;right:14px;transform:none;border-top-color:transparent;border-bottom-color:rgba(32,211,224,.55)}
.pk-mini:hover>.pk-dica,.pk-mini:focus-visible>.pk-dica{opacity:1;transform:translateY(0)}
@media (hover:none){.pk-mini{opacity:1;transform:none;width:30px;height:30px}}

/* a janela */
.pk-fundo{position:fixed;inset:0;z-index:9990;background:rgba(3,5,9,.72);display:grid;place-items:center;padding:16px}
.pk-jan{position:relative;overflow:hidden;width:min(940px,100%);max-height:calc(100vh - 32px);display:grid;grid-template-rows:auto minmax(0,1fr);background:#0e1118;border:1px solid rgba(32,211,224,.4);border-radius:14px;color:#e9edf5;font-size:15px;line-height:1.5}
.pk-jan::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,#f27d7d,#e8a14d,#e3c341,#64ae62,#4c8bd8);z-index:3}
.pk-jan::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(105deg,transparent 43%,rgba(32,211,224,.07) 47%,rgba(255,244,205,.14) 50%,rgba(227,179,65,.08) 53%,transparent 57%);background-size:240% 100%;background-repeat:no-repeat;background-position:130% 0;animation:pk-varre 7s ease-in-out infinite}
@keyframes pk-varre{0%{background-position-x:130%}30%,100%{background-position-x:-30%}}
.pk-topo{position:relative;z-index:2;display:flex;align-items:center;gap:14px;padding:14px 16px;background:linear-gradient(180deg,#10262e,#0e1118)}
.pk-topo>img,.pk-topo>.pk-q{width:52px;height:52px;border-radius:10px;border:2px solid #b8913a;background:#0b0e15;object-fit:contain;flex:none}
.pk-tt{min-width:0}
.pk-tt h3{margin:0;font-size:18px}
.pk-tt small{display:block;color:#98a2b5;font-size:15px}
.pk-vp{margin-left:auto;text-align:right;border:1px solid rgba(227,179,65,.45);background:rgba(227,179,65,.08);border-radius:12px;padding:6px 12px;flex:none}
.pk-vp b{display:block;color:#e3b341;font-size:17px}
.pk-vp small{color:#98a2b5;font-size:15px}
.pk-x{margin-left:auto;flex:none;width:36px;height:36px;border-radius:10px;border:1px solid #222838;background:#141826;color:#e9edf5;font-size:20px;cursor:pointer}
.pk-vp:not([hidden])+.pk-x{margin-left:0}
.pk-corpo{position:relative;z-index:2;display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-height:0}
.pk-abas{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid #222838;padding:0 12px}
.pk-abas button{background:none;border:0;border-bottom:2px solid transparent;color:#98a2b5;font-weight:700;font-size:15px;font-family:inherit;padding:9px 12px;cursor:pointer}
.pk-abas button[aria-selected=true]{color:#20d3e0;border-color:#20d3e0}
.pk-painel{padding:14px 16px;overflow-y:auto;overflow-x:hidden;min-height:0}
.pk-ver+.pk-ver{margin-top:14px}
.pk-ver h4{margin:0 0 8px;font-size:15px;color:#e3b341}
.pk-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.pk-pc{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;align-items:start;text-align:left;border:1px solid #222838;border-radius:12px;background:#141826;padding:10px;color:#e9edf5;font:inherit;cursor:pointer}
.pk-pc:hover,.pk-pc:focus-visible{border-color:rgba(32,211,224,.5);outline:none}
.pk-pc img,.pk-rank img{width:44px;height:44px;border-radius:10px;object-fit:contain;background:#0b0e15}
.pk-q{width:44px;height:44px;border-radius:10px;border:1px dashed #98a2b5;display:grid;place-items:center;font-weight:800;font-size:20px;color:#98a2b5}
.pk-pc-t{display:grid;gap:4px;min-width:0}
.pk-pc-t b{line-height:1.35}
.pk-pc-t small{color:#98a2b5;font-size:15px}
.pk-linha{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.pk-qt em{font-style:normal;color:#20d3e0;font-weight:800}
.pk-tipo{border-radius:6px;padding:0 7px;border:1px solid #222838;color:#98a2b5}
.pk-tipo.g{color:#4cc38a;border-color:rgba(76,195,138,.45)}
.pk-nota{margin:0 0 12px;color:#98a2b5}
.pk-pad{padding:14px 16px}
.pk-podio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:end;margin:18px 0 14px}
.pk-pd{position:relative;display:grid;justify-items:center;gap:4px;text-align:center;border:1px solid #222838;border-radius:12px;background:#141826;padding:14px 8px 10px;color:#e9edf5;font:inherit;font-size:15px;cursor:pointer}
.pk-pd.p1{border-color:rgba(227,179,65,.6);padding-top:20px}
.pk-m{position:absolute;top:-12px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:15px;color:#1a1205;background:#e3b341}
.pk-pd.p2 .pk-m{background:#c9d1dc}.pk-pd.p3 .pk-m{background:#d29a6a}
.pk-pd small{color:#98a2b5;font-size:15px}
.pk-rank{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pk-rank .pk-rk{width:100%;display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:10px;align-items:center;text-align:left;border:1px solid #222838;border-radius:12px;background:#141826;padding:8px 10px;color:#e9edf5;font:inherit;font-size:15px;cursor:pointer}
.pk-pd:hover,.pk-pd:focus-visible,.pk-rank .pk-rk:hover,.pk-rank .pk-rk:focus-visible{border-color:rgba(32,211,224,.5);outline:none}
.pk-rank .pk-val{color:#e3b341;font-weight:700;text-align:right}
.pk-rank li.pk-sv .pk-val{color:#98a2b5;font-weight:400}
.pk-conta{display:grid;gap:4px;border:1px solid #222838;border-radius:12px;background:#141826;padding:12px 14px;margin-bottom:12px}
.pk-conta b{color:#e3b341;font-size:17px}
.pk-vazio{border:1px dashed #222838;border-radius:12px;padding:16px;color:#98a2b5;display:grid;gap:8px}
.pk-vazio b{color:#e9edf5}
.pk-rod{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:12px 16px;border-top:1px solid #222838;color:#98a2b5}
.pk-ir{border:1px solid #20d3e0;background:#20d3e0;color:#04222a;border-radius:10px;padding:8px 14px;font-weight:700;text-decoration:none}
@media (max-width:560px){.pk-grade{grid-template-columns:1fr}.pk-podio{grid-template-columns:1fr}.pk-rank .pk-rk{grid-template-columns:44px minmax(0,1fr)}.pk-rank .pk-val{grid-column:2;text-align:left}.pk-topo{flex-wrap:wrap}.pk-vp{margin-left:0}}
@media (prefers-reduced-motion:reduce){.pk-jan::after{animation:none}.pk-alvo,.pk-dica,.pk-mini{transition:none}}
.pk-preco{display:grid;gap:12px;padding:6px 2px}
.pk-pcl{display:grid;gap:2px}
.pk-pcl b{font:800 26px var(--display);font-variant-numeric:tabular-nums;color:var(--t-hi)}
.pk-pcl span{color:var(--cyan,#22d3ee);font-size:15px;font-weight:600;margin-left:6px}
.pk-pcl small{color:var(--t-mid,#9aa4b2);font-size:15px}
.pk-preco .pk-link{justify-self:start;font-size:15px;font-weight:600;color:var(--cyan,#22d3ee);text-decoration:none;border:1px solid rgba(34,211,238,.4);border-radius:999px;padding:6px 14px}