/* ═══════════════════════════════════════════════════════════════════════
   INSTALAR O APP · a tela do convite  (17/09/2026, refeita no mesmo dia)
   ═══════════════════════════════════════════════════════════════════════
   A primeira versão era a caixa de aviso do menu com um véu preto por trás,
   e o Boss reprovou: *"algo mais premium e menos IA, e o fundo ficou
   escuro, eu gostaria que no fundo ficasse a tela de fundo que usamos em
   todo o aplicativo"*.

   O QUE MUDOU
   · o véu SAIU. O convite fica em cima do fundo do app (`#app-fundo`, o
     estádio), e o que se esconde é o MENU atrás dele, não o fundo. É a
     mesma coisa que a tela de carregar faz: logo em cima do estádio;
   · o topo é a LOGO de verdade e o nome BOSS APP, iguais aos da tela de
     carregar (mesma fonte, mesmo ouro), não um desenho genérico de celular;
   · a caixa tem a moldura de ouro da ÁREA VIP e um fio de luz em cima,
     que é o que faz a peça parecer do app e não de um site qualquer;
   · os motivos viraram uma lista com o selo de verificado em ouro, sem
     caixinha em volta de cada ícone: caixinha por item é o desenho padrão
     de IA que ele reconhece de longe.
   ═══════════════════════════════════════════════════════════════════════ */
#instalar {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: none; align-items: center; justify-content: center;
  padding: 22px 18px;
  /* transparente de propósito: o fundo é o do app */
  background: transparent;
}
#instalar.aberto { display: flex; }

/* Com o convite aberto, o MENU some e o fundo do app fica. `visibility` e
   não `display`: as medidas do menu continuam válidas e nada é
   redesenhado quando ele volta. O #app-fundo é uma camada própria e não
   está dentro do #app-novo, então ele fica. */
body.instalar-aberto #app-novo,
body.instalar-aberto #menu-barra { visibility: hidden; }
body.instalar-aberto { overflow: hidden; }

.in-caixa {
  position: relative;
  width: 100%; max-width: 350px;
  padding: 24px 22px 16px;
  border-radius: 18px;
  text-align: center;
  background: linear-gradient(170deg, rgba(6,26,12,0.92), rgba(1,9,3,0.96));
  border: 1px solid rgba(232,183,58,0.55);
  box-shadow:
    0 0 0 1px rgba(255,235,160,0.12),
    var(--brilho-ouro),
    0 18px 50px rgba(0,0,0,0.65);
  animation: inEntra .32s ease-out;
}
/* o fio de luz em cima, o mesmo gesto da barra de abas */
.in-caixa::before {
  content: ''; position: absolute; top: 0; left: 18%; right: 18%;
  height: 2px; border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, transparent, var(--boss-ouro), transparent);
  box-shadow: 0 0 14px 1px rgba(232,183,58,0.55);
}
@keyframes inEntra {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

/* o X: discreto, no canto, alvo de dedo de 40 px */
.in-fechar {
  position: absolute; top: 8px; right: 8px;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0;
  color: var(--texto-fraco); cursor: pointer;
}
.in-fechar:active { color: var(--texto-forte); }
.in-fechar svg { width: 18px; height: 18px; }

/* a logo e o nome: os mesmos da tela de carregar */
.in-logo {
  width: 84px; height: 84px; display: block; margin: 0 auto;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,0.7));
}
.in-nome {
  margin-top: 8px;
  font-family: var(--fonte-titulo); font-weight: 800;
  font-size: 1.9rem; line-height: 1; letter-spacing: 0.1em;
  color: var(--texto-forte); text-transform: uppercase;
  text-shadow: 0 3px 18px rgba(0,0,0,0.85);
}
.in-nome em { font-style: normal; color: var(--boss-ouro); }
.in-risco {
  width: 54px; height: 2px; margin: 10px auto 12px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--boss-ouro), transparent);
}
.in-chamada {
  margin: 0 auto 16px; max-width: 30ch;
  font-family: var(--fonte-texto); font-size: 0.92rem; line-height: 1.4;
  color: var(--texto);
}
.in-chamada b { color: var(--texto-forte); }

/* o botão de instalar: ouro cheio, o maior da tela, com o desenho dentro */
.in-instalar {
  width: 100%; min-height: 52px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 1px solid rgba(255,235,160,0.5); border-radius: 12px;
  background: linear-gradient(145deg, #f3cf63 0%, #e0b23f 55%, #c9922a 100%);
  color: #1a1205; cursor: pointer;
  font-family: var(--fonte-titulo); font-weight: 800;
  font-size: 1.35rem; letter-spacing: 0.08em; text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255,245,200,0.55), 0 6px 20px rgba(0,0,0,0.55);
  transition: transform .12s ease;
}
.in-instalar svg { width: 22px; height: 22px; stroke-width: 2; }
.in-instalar:active { transform: scale(0.98); }

/* os motivos: selo de verificado em ouro, texto forte, sem caixinha */
.in-motivos {
  list-style: none; margin: 16px 0 4px; padding: 0 4px;
  display: flex; flex-direction: column; gap: 10px;
  text-align: left;
}
.in-motivos li {
  display: flex; align-items: center; gap: 11px;
  font-family: var(--fonte-rotulo); font-weight: 600;
  font-size: 0.92rem; letter-spacing: 0.02em; color: var(--texto-forte);
}
.in-motivos li svg {
  flex: 0 0 20px; width: 20px; height: 20px;
  color: var(--boss-ouro);
  filter: drop-shadow(0 0 6px rgba(232,183,58,0.45));
}

/* "Está em um iPhone?": no iPhone não existe caixa nativa, é adicionar à
   tela de início na mão. Botão de contorno, discreto, abaixo dos motivos. */
.in-iphone {
  width: 100%; min-height: 42px; margin-top: 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: rgba(0,200,75,0.08);
  border: 1px solid var(--borda); border-radius: 10px;
  color: var(--boss-verde); cursor: pointer;
  font-family: var(--fonte-rotulo); font-weight: 700;
  font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.in-iphone svg { width: 16px; height: 16px; }

/* a segunda saída, discreta: quem quer ficar no navegador não caça o X */
.in-depois {
  margin-top: 8px; padding: 10px;
  background: transparent; border: 0;
  font-family: var(--fonte-rotulo); font-weight: 600;
  font-size: 0.78rem; letter-spacing: 0.04em;
  color: var(--texto-fraco); text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}

/* o passo a passo (iPhone, ou navegador sem caixa nativa) */
.in-titulo {
  font-family: var(--fonte-titulo); font-weight: 800;
  font-size: 1.6rem; letter-spacing: 0.06em; line-height: 1;
  color: var(--boss-ouro); text-transform: uppercase; margin: 12px 0 14px;
}
.in-passos {
  margin: 0 0 18px; padding: 0 0 0 22px; text-align: left;
  font-family: var(--fonte-texto); font-size: 0.92rem; line-height: 1.45;
  color: var(--texto);
}
.in-passos li { margin-bottom: 8px; }
.in-passos b { color: var(--texto-forte); }

@media (prefers-reduced-motion: reduce) {
  .in-caixa { animation: none; }
  .in-instalar { transition: none; }
}