/* ============================================================
   BOTÃO DE INSTALAR O APLICATIVO
   ============================================================
   Duas peças: o botão no menu lateral e o passo a passo do iPhone.

   Nenhuma cor escrita à mão — tudo sai das variáveis do painel, então o
   botão acompanha os três temas e a cor de cada gabinete sem uma linha a
   mais.
   ============================================================ */

/* ---------- o botão ---------- */
.inst__bt {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 11px;
  width: 100%; margin: 4px 0 8px; padding: 12px 14px;
  border-radius: 13px; cursor: pointer; font: inherit; text-align: left;
  color: var(--txt);
  border: 1px solid color-mix(in srgb, var(--brand, #3B82F6) 30%, transparent);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--brand, #3B82F6) 17%, transparent),
      color-mix(in srgb, var(--brand, #3B82F6) 6%, transparent));
  transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s, border-color .22s;
}
.inst__bt[hidden] { display: none; }
.inst__bt:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--brand, #3B82F6) 55%, transparent);
  box-shadow: 0 10px 26px -14px color-mix(in srgb, var(--brand, #3B82F6) 85%, transparent);
}
.inst__bt:active { transform: translateY(0); }

/* O brilho que atravessa no hover. É o único enfeite do componente, e passa
   uma vez só — animação que fica repetindo vira distração num painel que a
   pessoa usa o dia inteiro. */
.inst__bt::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%,
              color-mix(in srgb, var(--brand, #3B82F6) 26%, transparent) 50%, transparent 62%);
  transform: translateX(-130%);
  transition: transform .75s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.inst__bt:hover::after { transform: translateX(130%); }

.inst__bt-ic {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  color: #fff; background: var(--brand-fill, #2563EB);
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--brand, #3B82F6) 90%, transparent);
}
.inst__bt-ic svg { width: 17px; height: 17px; stroke-width: 2; }

.inst__bt-t { display: grid; gap: 1px; min-width: 0; }
.inst__bt-t b { font-size: .86rem; font-weight: 650; letter-spacing: -.01em; }
/* Uma linha só, sempre. O botão vive num rodapé onde todos os itens têm a
   mesma altura; deixá-lo crescer quebraria o alinhamento da coluna. */
.inst__bt-t span { font-size: .74rem; color: var(--txt3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inst__bt-t b { white-space: nowrap; }

/* ---------- o passo a passo do iPhone ---------- */
.inst { position: fixed; inset: 0; z-index: 240; display: none; place-items: center; padding: 20px; }
.inst[open] { display: grid; }
.inst__fundo {
  position: fixed; inset: 0; background: rgba(3,7,18,.72);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
}
.inst__cx {
  position: relative; width: min(430px, 100%); max-height: 88vh; overflow: auto;
  padding: 28px 28px 26px; border-radius: 20px;
  background: var(--surf, #101828);
  border: 1px solid var(--linha, rgba(148,163,184,.18));
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.75);
}
.inst__x {
  position: absolute; top: 14px; right: 16px; width: 32px; height: 32px;
  border-radius: 9px; cursor: pointer; border: 0; background: transparent;
  font-size: 1.3rem; line-height: 1; color: var(--txt3);
}
.inst__x:hover { background: color-mix(in srgb, var(--txt3) 15%, transparent); }
.inst__cx h2 { margin: 0 0 5px; font-size: 1.2rem; letter-spacing: -.02em; padding-right: 34px; }
.inst__s { margin: 0 0 20px; font-size: .87rem; line-height: 1.6; color: var(--txt2, #475569); }

.inst__p { counter-reset: i; list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.inst__p li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; }
/* O <li> tem TRÊS itens de grade: o número (::before), o título e a descrição.
   Numa grade de duas colunas, o terceiro cai sozinho na linha de baixo, na
   PRIMEIRA coluna — a de 28px do número. A descrição ficava espremida em
   28px e quebrava uma palavra por linha.

   Prendendo os dois na coluna 2, o título fica na linha 1 e a descrição na
   linha 2, ambos com a largura inteira. Bug antigo: a lista só aparecia no
   passo a passo do iPhone, onde quase ninguém tinha visto. */
/* Filhos diretos: dentro do <b> pode haver um <span class="inst__ic">
   com o desenho do ícone, e ele não é item de grade nenhum. */
.inst__p li > b, .inst__p li > span { grid-column: 2; }
.inst__p li::before {
  counter-increment: i; content: counter(i);
  width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center;
  font-size: .8rem; font-weight: 800;
  color: var(--brand, #60A5FA);
  background: color-mix(in srgb, var(--brand, #3B82F6) 15%, transparent);
}
.inst__p b { display: block; font-size: .89rem; margin-bottom: 2px; }
.inst__p span { font-size: .81rem; line-height: 1.55; color: var(--txt2, #475569); }

.inst__n {
  margin: 20px 0 0; padding: 12px 14px; border-radius: 11px;
  font-size: .8rem; line-height: 1.6; color: var(--txt2, #475569);
  background: color-mix(in srgb, var(--txt3) 8%, transparent);
  border: 1px solid var(--linha, rgba(148,163,184,.12));
}

/* ---------- peças novas do passo a passo ---------- */
/* O guia deixou de ser só do iPhone: agora ele também ensina o caminho pelo
   menu do Chrome, o Adicionar ao Dock do Safari do Mac e o que fazer em um
   navegador que não instala nada. Estas duas classes são o que faltava. */

/* Ícone desenhado no meio da frase — o botão de compartilhar do iPhone, os
   três pontinhos do Chrome. Descrever "o quadradinho com a seta" em palavras
   funciona mal; mostrar o desenho resolve numa olhada. */
.inst__ic {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; border-radius: 8px;
  vertical-align: -7px; margin: 0 3px;
  color: var(--brand, #3B82F6);
  background: color-mix(in srgb, var(--brand, #3B82F6) 12%, transparent);
}
.inst__ic svg { width: 15px; height: 15px; }

/* Copiar o endereço. Aparece só quando a pessoa vai precisar abrir o site em
   outro navegador — digitar "meumandatoweb.com.br" na mão, no celular, é
   onde a instalação costuma morrer. */
.inst__copiar {
  display: block; width: 100%; margin: 18px 0 0; padding: 12px 14px;
  border-radius: 11px; cursor: pointer; font: inherit;
  font-size: .87rem; font-weight: 650; letter-spacing: -.01em;
  color: var(--brand, #2563EB);
  background: color-mix(in srgb, var(--brand, #3B82F6) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand, #3B82F6) 30%, transparent);
  transition: background .22s, border-color .22s;
}
.inst__copiar:hover {
  background: color-mix(in srgb, var(--brand, #3B82F6) 16%, transparent);
  border-color: color-mix(in srgb, var(--brand, #3B82F6) 50%, transparent);
}