/* Sistemas: faixa de ícones na home, janela "Ver todas" e perfil de cada sistema (estilo loja de aplicativos).
   Tokens próprios; o resto vem de /styles.css. */
:root {
  --ap-fundo: #000;
  --ap-cartao: #1c1c1e;
  --ap-linha: rgba(255, 255, 255, .1);
  --ap-texto: #f5f5f7;
  --ap-suave: #a1a1a6;
  --ap-azul: #0a6cdc; /* branco sobre ele: 5,2:1 */
}

/* ---------- Ícone de aplicativo (canto de 22,37%, como na loja) ---------- */
.ap-ic {
  display: block;
  flex: none;
  width: var(--ap-t, 56px);
  height: var(--ap-t, 56px);
  border-radius: 22.37%;
  overflow: hidden;
  background: #111;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset;
}
.ap-ic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-ic--claro { background: #fff; }
.ap-ic--claro img { object-fit: contain; padding: 17%; }
.ap-ic--grande { --ap-t: 104px; }

/* ---------- Faixa na home ---------- */
.apps { margin: 18px 0 14px; text-align: center; }
.apps__tit { font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--ap-suave); margin-bottom: 12px; }
.apps__faixa { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; justify-items: center; }
.ap-mini { display: block; border-radius: 22.37%; transition: transform .15s ease; -webkit-tap-highlight-color: transparent; }
.ap-mini .ap-ic { --ap-t: min(52px, 100%); width: 100%; max-width: 52px; height: auto; aspect-ratio: 1; }
.ap-mini:hover { transform: translateY(-2px); }
.ap-mini:active { transform: scale(.94); }
.apps__todas {
  margin-top: 14px;
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.apps__todas:hover { background: rgba(255, 255, 255, .1); }
.apps__todas:active { transform: scale(.97); }
.apps__todas:focus-visible, .ap-mini:focus-visible, .ap-item:focus-visible, .apps-janela__fechar:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---------- Janela com todos ---------- */
.apps-janela {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(100% - 24px, 34rem);
  max-height: min(100% - 24px, 40rem);
  padding: 0;
  border: 1px solid var(--ap-linha);
  border-radius: 22px;
  background: #121214;
  color: var(--ap-texto);
  overflow: hidden;
  flex-direction: column;
}
.apps-janela[open] { display: flex; animation: ap-entra .22s cubic-bezier(.22, 1, .36, 1); }
.apps-janela::backdrop { background: rgba(0, 0, 0, .66); backdrop-filter: blur(6px); }
@keyframes ap-entra { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.apps-janela__topo { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 8px 22px; }
.apps-janela__topo h2 { font-size: 18px; font-weight: 750; }
.apps-janela__fechar {
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .1); color: #fff; display: grid; place-items: center; cursor: pointer;
}
.apps-janela__fechar svg { width: 20px; height: 20px; }
.apps-janela__grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 8px;
  padding: 10px 18px 22px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ap-item { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; text-align: center; text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent; }
.ap-item .ap-ic { --ap-t: 64px; transition: transform .15s ease; }
.ap-item:active .ap-ic { transform: scale(.94); }
.ap-item__nome { font-size: 13px; font-weight: 650; line-height: 1.2; overflow-wrap: anywhere; }
.ap-item small { font-size: 13px; color: var(--ap-suave); line-height: 1.2; }
@media (hover: hover) and (pointer: fine) { .ap-item:hover .ap-ic { transform: translateY(-2px); } }

/* ---------- Perfil do sistema ---------- */
.ap-body { background: var(--ap-fundo); color: var(--ap-texto); min-height: 100svh; overscroll-behavior: none; }
html:has(.ap-body) { overscroll-behavior: none; }
.ap {
  width: min(100% - 32px, 40rem);
  margin: 0 auto;
  padding: max(14px, env(safe-area-inset-top)) 0 max(28px, env(safe-area-inset-bottom));
}
.ap-voltar {
  display: inline-flex; align-items: center; gap: 2px; min-height: 44px; min-width: 44px;
  color: #4da3ff; text-decoration: none; font-size: 16px; font-weight: 500;
}
.ap-voltar svg { width: 22px; height: 22px; }
.ap-topo { display: flex; gap: 18px; align-items: center; margin-top: 6px; }
.ap-tit { min-width: 0; }
.ap-tit h1 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); font-weight: 780; line-height: 1.12; letter-spacing: -.01em; overflow-wrap: anywhere; }
.ap-tit p { margin-top: 4px; font-size: 15px; color: var(--ap-suave); line-height: 1.3; }
.ap-acao { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.ap-acao small { font-size: 13px; color: var(--ap-suave); }
.ap-abrir {
  display: inline-grid; place-items: center; min-width: 88px; min-height: 44px; padding: 0 22px;
  border-radius: 999px; background: var(--ap-azul); color: #fff; font-size: 16px; font-weight: 700; text-decoration: none;
  transition: transform .15s ease, filter .15s ease;
}
.ap-abrir:hover { filter: brightness(1.12); }
.ap-abrir:active { transform: scale(.96); }
.ap-abrir:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.ap-abrir--off { background: #2c2c2e; color: #c7c7cc; }

.ap-chips { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 22px; border-block: 1px solid var(--ap-linha); }
.ap-chip { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; min-width: 0; padding: 14px 6px; text-align: center; }
.ap-chip + .ap-chip { border-left: 1px solid var(--ap-linha); }
.ap-chip small { font-size: 13px; font-weight: 600; color: var(--ap-suave); text-transform: uppercase; letter-spacing: .04em; }
.ap-chip strong { font-size: 14px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }

.ap-sec { margin-top: 28px; }
.ap-sec h2 { font-size: 21px; font-weight: 750; margin-bottom: 12px; }
.ap-cap { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 18px; border: 1px solid var(--ap-linha); background: var(--ap-cartao); }
.ap-sobre { font-size: 16px; line-height: 1.55; color: #e5e5ea; max-width: 66ch; }
.ap-lista { list-style: none; display: grid; gap: 0; border-radius: 16px; background: var(--ap-cartao); overflow: hidden; }
.ap-lista li { position: relative; padding: 13px 16px 13px 44px; font-size: 15px; line-height: 1.35; }
.ap-lista li + li { border-top: 1px solid var(--ap-linha); }
.ap-lista li::before {
  content: ""; position: absolute; left: 16px; top: 50%; width: 14px; height: 8px; margin-top: -7px;
  border-left: 2.5px solid #30d158; border-bottom: 2.5px solid #30d158; transform: rotate(-45deg);
}
.ap-info { display: grid; border-radius: 16px; background: var(--ap-cartao); overflow: hidden; }
.ap-info > div { display: flex; justify-content: space-between; gap: 16px; padding: 13px 16px; font-size: 15px; }
.ap-info > div + div { border-top: 1px solid var(--ap-linha); }
.ap-info dt { color: var(--ap-suave); flex: none; }
.ap-info dd { text-align: right; min-width: 0; overflow-wrap: anywhere; }
.ap-rodape { margin-top: 34px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; color: rgba(255, 255, 255, .5); }
.ap-rodape a { color: rgba(255, 255, 255, .75); min-height: 44px; display: inline-grid; place-items: center; }

@media (min-width: 48rem) {
  .ap { padding-top: 28px; }
  .ap-ic--grande { --ap-t: 128px; }
  .apps-janela__grade { grid-template-columns: repeat(4, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .apps-janela[open] { animation: none; }
  .ap-mini, .ap-item .ap-ic, .ap-abrir, .apps__todas { transition: none; }
}

/* Telas em pé do aplicativo: grade, sem rolagem lateral. Celular: 4 à vista e "Ver as outras" abre o resto. */
.ap-grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.ap-grade img { width: 100%; height: auto; aspect-ratio: 600 / 1304; border-radius: 18px; border: 1px solid var(--ap-linha); background: var(--ap-cartao); }
.ap-mais { margin-top: 12px; }
.ap-mais summary { display: grid; place-items: center; min-height: 44px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; list-style: none; }
.ap-mais summary::-webkit-details-marker { display: none; }
.ap-mais[open] summary { margin-bottom: 12px; }
@media (max-width: 47.99rem) { .ap-extra { display: none; } }
@media (min-width: 48rem) { .ap-grade { grid-template-columns: repeat(4, 1fr); } .ap-grade--6 { grid-template-columns: repeat(3, 1fr); } .ap-mais { display: none; } }

/* Computador baixo: a faixa de sistemas encolhe junto com o resto */
@media (min-width: 64rem) and (max-height: 820px) {
  .apps { margin: 8px 0 6px; }
  .apps__tit { margin-bottom: 8px; }
  .apps__faixa { gap: 6px; }
  .ap-mini .ap-ic { max-width: 44px; }
  .apps__todas { margin-top: 8px; }
}
@media (min-width: 64rem) and (max-height: 700px) {
  .apps__tit { display: none; }
  .apps { margin: 4px 0 2px; }
  .ap-mini .ap-ic { max-width: 38px; }
  .apps__todas { margin-top: 6px; min-height: 40px; }
}