/* Alpha Gestão — aplicativos (ícones, grade, página e painel). Usa os tokens de estilo.css. */
.ms { font-family: "Material Symbols Rounded"; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal;
  text-transform: none; display: inline-block; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased;
  font-feature-settings: "liga"; font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24; }
.tile { position: relative; flex: 0 0 auto; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
  background: linear-gradient(145deg, var(--c1), var(--c2)); color: #fff;
  box-shadow: 0 10px 18px -10px var(--c2), inset 0 1px 0 rgba(255,255,255,.25); }
.tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(120% 80% at 20% 0%, rgba(255,255,255,.28), transparent 55%); }
.tile .ms { font-size: 30px; position: relative; z-index: 1; }
.tile-alfa { position: absolute; right: -6px; bottom: -6px; z-index: 2; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: var(--tinta);
  font: 700 14px/22px var(--f-titulo); text-align: center; box-shadow: 0 0 0 2px var(--ciano); }
.tile-g { width: 76px; height: 76px; border-radius: 22px; }
.tile-g .ms { font-size: 40px; }
.tile-p { width: 34px; height: 34px; border-radius: 10px; box-shadow: none; }
.tile-p .ms { font-size: 19px; }
.tile-p .tile-alfa { width: 15px; height: 15px; font-size: 10px; line-height: 15px; right: -4px; bottom: -4px; }

.apps-cab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: end; margin-bottom: 32px; }
.apps-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.app { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 16px; text-decoration: none; color: inherit; min-width: 0;
  border: 1px solid transparent; transition: background .18s, border-color .18s, transform .18s, box-shadow .18s; }
.app:hover, .app:focus-visible { background: var(--branco); border-color: var(--linha); transform: translateY(-2px); box-shadow: 0 16px 30px -22px rgba(13,45,71,.5); }
.app .tile { transition: transform .25s cubic-bezier(.2,.7,.2,1.4); }
.app:hover .tile { transform: rotate(-4deg) scale(1.04); }
.app-txt { display: grid; gap: 2px; min-width: 0; }
.app-txt b { color: var(--tinta); font-size: 16.5px; font-weight: 650; }
.app-txt small { color: var(--tinta-2); font-size: 13.5px; line-height: 1.35; }
.apps-grade.principais { background: var(--branco); border: 1px solid var(--linha); border-radius: 22px; padding: 14px; }
.apps-grade.principais .app:hover { background: var(--papel); }
.apps-mais { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-top: 22px; color: var(--tinta-2); font-size: 15px; }
.apps-mais .ms { font-size: 20px; }

/* página de aplicativos */
.apps-abre { position: relative; padding-block: 64px 36px; overflow: hidden; }
.apps-abre .miolo { position: relative; }
.apps-abre h1 { font-size: clamp(42px, 6.5vw, 78px); font-weight: 800; font-stretch: 80%; letter-spacing: -0.02em; max-width: 13ch; }
.apps-abre h1 em { font-style: normal; color: var(--azul); box-shadow: inset 0 -0.14em 0 var(--ciano); }
.apps-abre .lead { margin: 18px 0 26px; }
.mosaico { position: absolute; right: 20px; top: 10px; width: 380px; display: grid; grid-template-columns: repeat(4, 64px); gap: 18px;
  transform: rotate(-8deg); pointer-events: none; }
.mosaico .tile { width: 64px; height: 64px; border-radius: 18px; animation: flutua 6s ease-in-out infinite; }
.mosaico .tile .ms { font-size: 34px; }
.mosaico .tile:nth-child(3n) { animation-delay: -2s; }
.mosaico .tile:nth-child(4n+1) { animation-delay: -4s; opacity: .85; }
.mosaico .tile:nth-child(odd) { margin-top: 26px; }
@keyframes flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.apps-busca { display: flex; align-items: center; gap: 10px; max-width: 620px; background: var(--branco); border: 1px solid var(--linha); border-radius: 14px;
  padding: 12px 16px; box-shadow: 0 14px 30px -24px rgba(13,45,71,.5); }
.apps-busca:focus-within { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(12,172,222,.25); }
.apps-busca .ms { color: var(--tinta-2); font-size: 24px; }
.apps-busca input { border: 0; outline: 0; flex: 1; font: 500 17px var(--f-texto); color: var(--texto); background: transparent; min-width: 0; }
.apps-atalhos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; max-width: 760px; }
.apps-atalhos a { text-decoration: none; color: var(--tinta); font-size: 14px; border: 1px solid var(--linha); background: var(--branco); padding: 7px 13px; border-radius: 999px; }
.apps-atalhos a:hover { border-color: var(--azul); color: var(--azul); }
.apps-lista { padding-bottom: 56px; }
.apps-cat { padding-block: 26px; border-top: 1px solid var(--linha); }
.apps-cat-cab { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.apps-cat-cab h2 { font-size: 26px; font-stretch: 88%; scroll-margin-top: 90px; }
.apps-cat-cab p { margin: 0; color: var(--tinta-2); font-size: 15px; }
.cat-ponto { width: 12px; height: 12px; border-radius: 4px; background: linear-gradient(145deg, var(--c1), var(--c2)); align-self: center; }
.apps-cat-alpha { background: linear-gradient(180deg, var(--azul-claro), rgba(238,244,250,0) 85%); border-radius: 22px; border: 1px solid var(--azul-tinta); padding: 24px 18px; margin-bottom: 18px; }
.apps-vazio { padding: 30px 0; color: var(--tinta-2); }

/* painel do aplicativo */
.painel-fundo { position: fixed; inset: 0; z-index: 40; background: rgba(13,45,71,.45); backdrop-filter: blur(2px); opacity: 0; transition: opacity .25s; }
.painel-fundo.aberto { opacity: 1; }
.painel-app { position: fixed; z-index: 41; top: 0; right: 0; bottom: 0; width: min(580px, 100%); background: var(--branco); overflow-y: auto;
  box-shadow: -30px 0 60px -30px rgba(13,45,71,.6); transform: translateX(102%); transition: transform .3s cubic-bezier(.2,.7,.2,1);
  padding-bottom: env(safe-area-inset-bottom, 0px); }
.painel-app.aberto { transform: none; }
body.com-painel { overflow: hidden; }
.pa-fechar { position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); right: 14px; z-index: 2; width: 40px; height: 40px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.92); color: var(--tinta); cursor: pointer; display: grid; place-items: center; }
.pa-fechar .ms { font-size: 22px; }
.pa-topo { display: flex; gap: 18px; align-items: center; padding: calc(34px + env(safe-area-inset-top, 0px)) 64px 26px 28px; color: #fff;
  background: linear-gradient(135deg, var(--c2), var(--c1)); position: relative; overflow: hidden; }
.pa-topo::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255,255,255,.12); }
.pa-topo .tile { box-shadow: 0 0 0 4px rgba(255,255,255,.35); }
.pa-topo h2 { color: #fff; font-size: 30px; font-stretch: 86%; }
.pa-cat { margin: 0 0 4px; font: 600 12px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.pa-cat b { color: #fff; }
.pa-frase { margin: 6px 0 0; color: rgba(255,255,255,.94); font-size: 16px; }
.pa-corpo { padding: 24px 28px 34px; }
.pa-corpo h3 { font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--azul); margin: 22px 0 8px; }
.pa-corpo p { margin: 0; color: var(--texto); }
.pa-tela { margin: 0 0 6px; }
.pa-tela img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; border-radius: 12px; border: 1px solid var(--linha); }
.pa-tela figcaption { font-size: 12.5px; }
.pa-rec { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pa-rec li { padding-left: 26px; position: relative; }
.pa-rec li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 11px; height: 6px; border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg); }
.pa-ligas { display: flex; flex-wrap: wrap; gap: 8px; }
.pa-liga { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--linha); background: var(--branco); border-radius: 12px; padding: 6px 12px 6px 6px;
  font: 600 14.5px var(--f-texto); color: var(--tinta); cursor: pointer; }
.pa-liga:hover { border-color: var(--azul); }
.pa-acoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }

@media (max-width: 1100px) { .mosaico { display: none; } }
@media (max-width: 960px) {
  .apps-cab { grid-template-columns: minmax(0, 1fr); }
  .apps-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .apps-grade { grid-template-columns: minmax(0, 1fr); }
  .app { padding: 10px; }
  .tile { width: 48px; height: 48px; border-radius: 14px; }
  .tile .ms { font-size: 26px; }
  .pa-topo { padding: calc(28px + env(safe-area-inset-top, 0px)) 60px 22px 20px; }
  .pa-corpo { padding: 20px 20px 28px; }
}
@media (prefers-reduced-motion: reduce) { .painel-app, .painel-fundo { transition: none; } .mosaico .tile { animation: none; } }

/* integrações */
h2 em.destaque { font-style: normal; color: var(--azul); }
.integs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.integ { display: flex; flex-direction: column; gap: 10px; background: #fff; border: 1px solid var(--linha); border-radius: 14px; padding: 16px; min-width: 0; }
.integ-logo { height: 44px; display: flex; align-items: center; gap: 12px; min-width: 0; }
.integ-logo img { height: 34px; width: auto; max-width: 165px; object-fit: contain; object-position: left center; }
.integ-logo img { min-width: 0; flex: 0 1 auto; }
.integ-logo img + img { max-width: calc(50% - 6px); }
.integ-logo img:has(+ img) { max-width: calc(50% - 6px); }
.integ-logo img[src$="melhorenvio.svg"], .integ-logo img[src$="99food.svg"], .integ-logo img[src$="whatsapp.svg"], .integ-logo img[src$="telegram.svg"] { height: 42px; }
.integ-txt { display: grid; gap: 2px; min-width: 0; }
.integ-txt b { color: var(--tinta); font-size: 15.5px; }
.integ-txt small { color: var(--tinta-2); font-size: 13px; line-height: 1.35; }
.integ-st { align-self: flex-start; margin-top: auto; font: 600 11px var(--f-mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ok); background: var(--ok-claro); border-radius: 999px; padding: 3px 9px; }
.integ.breve { border-style: dashed; }
.integ.breve .integ-st { color: var(--tinta-2); background: var(--azul-claro); }
.integ-nota { margin: 16px 0 0; font-size: 12.5px; color: var(--tinta-2); }
@media (max-width: 960px) { .integs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .integ { padding: 14px; } .integ-logo img { max-width: 120px; } }

/* v2 (14/10): cartões macios e com elevação */
.integ { border-radius: 22px; border-color: transparent; box-shadow: var(--sombra-1); padding: 18px; transition: transform .35s var(--mola), box-shadow .35s; }
.integ:hover { transform: translateY(-4px); box-shadow: var(--sombra-2); }
.integ.breve { border: 1.5px dashed var(--azul-tinta); box-shadow: none; background: rgba(255,255,255,.7); }
.anima .integ.revela.vis:hover { transform: translateY(-4px); transition-delay: 0ms; }
.apps-grade.principais { border: 0; border-radius: 28px; box-shadow: var(--sombra-1); padding: 18px; }
.app { border-radius: 18px; transition: background .25s, transform .3s var(--mola), box-shadow .3s; }
.app:hover { transform: translateY(-3px); box-shadow: var(--sombra-1); }
.apps-busca { border-radius: 999px; box-shadow: var(--sombra-1); border-color: transparent; padding-inline: 20px; }
.apps-atalhos a { border-radius: 999px; }
.apps-cat-alpha { border-radius: 28px; }
.pa-tela img { border-radius: 16px; }
.pa-liga { border-radius: 999px; }