/* =========================================================
   PALETA — mesmas cores, com profundidade suficiente para serem lidas

   ⚠️ NOTA CONSULTIVA DO DETECTOR, ASSUMIDA: `cream-palette` no
   `--bg: #FAF7F0`. O Impeccable diz que creme/bege de fundo virou a
   superficie "de bom gosto" que toda interface gerada por IA escolhe por
   reflexo, e como regra geral ele esta certo. Aqui ela nao se aplica: o
   creme nao e um off-white neutro escolhido por seguranca, e a terceira
   perna de uma paleta em que as outras duas sao o marrom (`--bark`, do
   mascote) e o verde. Sobre branco puro o mascote marrom perde o chao.
   O verificador aceita um off-white esverdeado (#F2F6F1 passa) — seria
   trocar a identidade para calar um aviso. Fica como esta, e este comentario
   e o registro da decisao, no lugar de um `impeccable-disable`.

   ⚠️ O VERDE DESCEU DE TOM, e nao foi decisao de gosto: o detector achou
   `low-contrast` em toda peca verde do app. Branco sobre o `#2F8F5B`
   antigo dava 4,04:1 e sobre o `#3FAE6A` do fim do degrade dava 2,81:1 —
   ou seja, o texto do cabecalho, o rotulo do botao e a aba ativa ficavam
   ABAIXO do minimo de 4,5:1 da WCAG AA, com a ponta clara do degrade bem
   longe disso. Num app que a pessoa abre as 3 da manha com o celular no
   escuro e uma crianca no colo, isso nao e detalhe de conformidade.

   O verde continua verde, e o degrade continua degrade: o que mudou e que
   agora as DUAS pontas passam com branco por cima (6,11:1 e 4,69:1).
   `--brand-clara` guarda o verde antigo para os usos DECORATIVOS onde nao
   ha texto em cima — barra de progresso, pontinhos, bordas.

   `--muted` subiu de #8B7355 (4,19:1 sobre o creme) para #7A6144 (5,42:1).
   E a cor de TODA legenda do app: a 4,19 ela nao era legivel para ninguem.
   ========================================================= */
:root{
  --bg:#FAF7F0; --ink:#2E2018; --muted:#7A6144; --line:#EDE4D3;
  --brand:#246F46; --brand2:#2B8353; --brand-clara:#2F8F5B; --brand-esc:#1B5634;
  --bark:#8B5E3C; --bark2:#A9714A;
  --sun:#F2C14E; --sky:#5B9BD5; --coral:#FF7A59;
  --ok:#246F46; --warn:#8A5A00; --bad:#B83D3D;
  --soft:#E4F1E8; --verde-claro:#D6EDDF; --creme:#D8CCBB; --r:18px;
  --sh:0 4px 16px rgba(46,32,24,.08);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.55;padding-bottom:96px}
[hidden]{display:none!important}

.app-header{position:sticky;top:0;z-index:20;
  background:linear-gradient(120deg,var(--brand),var(--brand2));
  color:#fff;padding:16px 16px 18px;border-radius:0 0 22px 22px;
  box-shadow:0 6px 20px rgba(36,111,70,.30)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:720px;margin:0 auto}
/* ⚠️ 1.35rem, e nao 1.2rem. A 1.2 o h1 ficava a 1,20x do h2 (19,2px contra
   16px): abaixo do degrau de 1,25x que separa hierarquia de acaso. Numa tela
   em que tudo e cartao branco com titulo, o tamanho e a unica pista de
   quem manda. */
.brand{margin:0;font-size:1.35rem;font-weight:800;letter-spacing:-.3px;display:flex;align-items:center;gap:9px}
.brand img{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.92);padding:3px}
.child-switch{display:flex;gap:8px;align-items:center}
.child-switch select{border:none;border-radius:11px;padding:9px 12px;font-size:.9rem;
  background:rgba(255,255,255,.95);color:var(--ink);max-width:170px;font-weight:600}
.btn-icon{border:none;background:rgba(255,255,255,.25);color:#fff;font-size:1.25rem;
  width:38px;height:38px;border-radius:50%;cursor:pointer;font-weight:700;transition:transform .15s}
.btn-icon:active{transform:scale(.92)}

.view{max-width:720px;margin:0 auto;padding:18px 16px 8px}
.card{background:#fff;border-radius:var(--r);padding:18px;box-shadow:var(--sh);
  margin-bottom:14px;border:1px solid var(--line)}
.card h2{margin:0 0 8px;font-size:1.05rem;font-weight:750}
.card h3{margin:16px 0 6px;font-size:.9rem;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.muted{color:var(--muted);font-size:.87rem}
.row{display:flex;gap:10px;align-items:center;justify-content:space-between}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip{background:var(--soft);color:var(--brand);border-radius:999px;padding:6px 12px;
  font-size:.77rem;font-weight:700;border:none;cursor:pointer}
.chip.is-on{background:var(--brand);color:#fff}

/* ⚠️ CHAPADO, e nao em degrade. Duas razoes, e a segunda e a que pesa:
   1. Degrade so se sustenta quando as DUAS pontas passam com o texto por
      cima, e manter esse contrato em cinco componentes diferentes e como
      manter cinco paletas.
   2. Nenhum verificador estatico resolve `linear-gradient` — nem o detector,
      nem leitor de contraste de navegador. Peca com texto sobre degrade e
      peca que ninguem consegue medir, e o que nao se mede volta a quebrar.
   O degrade fica onde e assinatura e nao carrega decisao: a faixa do
   cabecalho, a ilustracao e a saudacao. */
.btn{background:var(--brand);color:#fff;border:none;
  border-radius:14px;padding:12px 18px;font-size:.93rem;font-weight:700;cursor:pointer;
  transition:transform .12s}
.btn:active{transform:scale(.97)}
.btn.ghost{background:var(--soft);color:var(--brand)}
.btn.small{padding:8px 13px;font-size:.82rem;border-radius:11px}
.btn.block{width:100%}
.btn.warn{background:#FFF4E0;color:var(--warn)}

.list{list-style:none;padding:0;margin:0}
.list li{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line)}
.list li:last-child{border-bottom:none}
.check{width:26px;height:26px;flex:0 0 26px;border-radius:9px;border:2px solid var(--line);
  display:grid;place-items:center;cursor:pointer;background:#fff;font-size:.85rem;
  color:transparent;font-weight:800;transition:all .15s}
.check.on{background:var(--brand);border-color:var(--brand);color:#fff}

.pill{font-size:.7rem;font-weight:750;padding:4px 10px;border-radius:999px;white-space:nowrap}
.pill.due{background:#FDECEC;color:var(--bad)}
.pill.soon{background:#FFF4E0;color:var(--warn)}
.pill.ok{background:#E4F1E8;color:var(--brand)}

.bar{height:10px;border-radius:999px;background:var(--line);overflow:hidden;margin-top:10px}
.bar>span{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--brand-clara));
  border-radius:999px;transition:width .5s ease}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--sh)}
/* ⚠️ TINTA CHEIA, e nao texto recortado de degrade. O degrade ia do verde
   ao `--sun` (#F2C14E), que sobre branco da 1,8:1 — o numero do painel, que
   e a informacao mais importante do cartao, terminava ilegivel na metade
   direita de cada digito. Degrade em texto so funciona quando as DUAS
   pontas passam, e amarelo sobre branco nunca passa. */
.stat .n{font-size:1.7rem;font-weight:800;line-height:1.1;color:var(--brand)}

.field{display:block;margin:14px 0}
.field label{display:block;font-size:.8rem;font-weight:700;margin-bottom:6px;color:var(--muted)}
.field input,.field select,.field textarea{width:100%;padding:12px;border:1.5px solid var(--line);
  border-radius:13px;font-size:.95rem;font-family:inherit;background:#fff}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--soft)}

/* ⚠️ SEM A BARRA DE 4px NA ESQUERDA. Borda grossa colorida num lado do
   cartao com o canto arredondado e o `side-tab` do detector — e ele tem
   razao: virou o tique visual de interface gerada por IA, e o aviso ja se
   distingue pelo fundo amarelo. Ficou a borda inteira, fina, da mesma
   familia do fundo. */
.note{background:#FFF9E8;border:1px solid #EBD79A;padding:12px 14px;border-radius:12px;
  font-size:.84rem;color:#7A5A10}
.illu{height:130px;border-radius:16px;background:linear-gradient(135deg,var(--soft),#F6FBF7);
  display:grid;place-items:center;margin-bottom:14px;border:1px dashed #BFDCCB;overflow:hidden}
.illu img{height:110px}

.strategy-item{padding:12px 0;border-bottom:1px solid var(--line);cursor:pointer}
.strategy-item:last-child{border-bottom:none}

.segmented{display:flex;background:#F0EADF;border-radius:14px;padding:4px;margin:10px 0 14px}
.seg{flex:1;background:none;border:none;padding:10px;border-radius:11px;font-size:.85rem;
  font-weight:700;color:var(--muted);cursor:pointer}
.seg.is-active{background:#fff;color:var(--brand);box-shadow:0 2px 8px rgba(46,32,24,.08)}

.filterbar{display:flex;gap:8px;overflow-x:auto;padding:4px 0 12px;scrollbar-width:none}
.filterbar::-webkit-scrollbar{display:none}
.filter-chip{white-space:nowrap;background:#fff;border:1.5px solid var(--line);color:var(--muted);
  border-radius:999px;padding:7px 14px;font-size:.79rem;font-weight:700;cursor:pointer}
.filter-chip.is-on{background:var(--brand);color:#fff;border-color:transparent}

.day-sep{font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.5px;
  color:var(--muted);margin:16px 0 6px}
.timeline-item{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line)}
.timeline-item:last-child{border-bottom:none}
.dot{width:9px;height:9px;border-radius:50%;background:var(--brand);margin-top:6px;flex:0 0 9px;
  box-shadow:0 0 0 3px var(--soft)}

.mile{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line)}
.mile:last-child{border-bottom:none}
.card-future{opacity:.62}

.tl{display:flex;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}
.tl:last-child{border-bottom:none}
.tl-time{font-size:.82rem;font-weight:800;color:var(--brand);width:48px;flex:0 0 48px}
.tl-dot{width:11px;height:11px;border-radius:50%;background:var(--line);flex:0 0 11px}
.tl-dot.is-past{background:var(--brand);box-shadow:0 0 0 4px var(--soft)}

.hero{background:linear-gradient(135deg,var(--soft),#FBFDF9);border:1px solid #CBE4D5}
.hero h2{font-size:1.25rem}
.acao-card{background:#fff;border-radius:18px;padding:16px;box-shadow:var(--sh);
  margin-bottom:12px;border:1px solid var(--line);cursor:pointer;transition:transform .12s}
.acao-card:active{transform:scale(.98)}
.acao-icon{font-size:1.6rem;width:46px;height:46px;flex:0 0 46px;display:grid;
  place-items:center;background:var(--soft);border-radius:14px}

.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;gap:2px;
  background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-top:1px solid var(--line);
  padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px));max-width:720px;margin:0 auto;
  border-radius:20px 20px 0 0}
.tab{flex:1;background:none;border:none;padding:9px 2px;border-radius:13px;font-size:.68rem;
  font-weight:700;color:var(--muted);cursor:pointer;transition:all .16s}
.tab.is-active{color:#fff;background:var(--brand);
  box-shadow:0 4px 12px rgba(36,111,70,.32)}

.modal{position:fixed;inset:0;z-index:50;background:rgba(46,32,24,.5);
  display:grid;place-items:end center;backdrop-filter:blur(2px)}
.modal-card{background:#fff;width:100%;max-width:720px;border-radius:24px 24px 0 0;
  padding:22px;max-height:88vh;overflow:auto;position:relative;animation:up .25s ease}
@keyframes up{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}
.modal-close{position:absolute;top:14px;right:14px;border:none;background:var(--bg);
  width:34px;height:34px;border-radius:50%;cursor:pointer;font-weight:700}
.empty{text-align:center;padding:26px 10px;color:var(--muted)}
@media(min-width:640px){.app-header{padding-top:22px}.view{padding:22px 16px 8px}}
/* ===== SAUDACAO COM MASCOTE ===== */
.greet{
  display:flex;align-items:center;gap:14px;
  background:linear-gradient(135deg,#E4F1E8,#F6FBF7);
  border:1px solid #CBE4D5;border-radius:18px;
  padding:16px;margin-bottom:16px;
}
.greet img{width:56px;height:56px;flex:0 0 56px}
.greet-hi{font-size:1.02rem;font-weight:800;color:var(--ink)}
.greet-msg{font-size:.85rem;color:var(--muted);margin-top:2px}

/* ===== NAV INFERIOR GRANDE (4 destinos) ===== */
.tabbar{display:flex;gap:4px;padding:10px 10px calc(10px + env(safe-area-inset-bottom,0px))}
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px;border-radius:16px}
.tab .ti{font-size:1.55rem;line-height:1;filter:grayscale(.35);transition:filter .2s,transform .2s}
.tab .tl{font-size:.72rem;font-weight:800;letter-spacing:.1px}
.tab.is-active .ti{filter:none;transform:translateY(-2px)}
.tab.is-active{background:var(--brand);color:#fff}
.tab.is-active .tl{color:#fff}
.tab--cta .ti{font-size:1.7rem}

/* ===== SUB-ABAS (dentro de Crianca) ===== */
.subtabs{display:flex;gap:6px;overflow-x:auto;padding:12px 16px 4px;max-width:720px;margin:0 auto;scrollbar-width:none}
.subtabs::-webkit-scrollbar{display:none}
.subtab{white-space:nowrap;background:#fff;border:1.5px solid var(--line);color:var(--muted);
  border-radius:999px;padding:9px 16px;font-size:.84rem;font-weight:700;cursor:pointer;transition:all .15s}
.subtab.is-active{background:var(--brand);color:#fff;border-color:transparent;box-shadow:0 4px 12px rgba(36,111,70,.30)}

@media(min-width:640px){
  .subtabs{padding:16px 16px 4px}
}

/* =========================================================
   ABERTURA — a primeira tela

   ⚠️ SUPERFICIE CHAPADA, e isto nao e gosto. O resto do app usa
   `linear-gradient` so como assinatura de faixa (cabecalho, ilustracao,
   saudacao) e isso esta certo. Tela INTEIRA em degrade e outra coisa: e o
   achado `ai-color-palette` do detector, e a razao dele procede — degrade
   ocupando a tela toda e a assinatura visual de interface gerada por IA.

   ⚠️ FUNDO CREME, E NAO VERDE. O `logo.svg` traz o nome em degrade verde
   e a assinatura em `--muted`: os dois desenhados para fundo claro. Sobre
   o verde da marca o nome sumiria dentro do proprio fundo — seria preciso
   uma segunda versao do logo so para esta tela, e logo com duas versoes e
   logo que diverge. O verde entra onde tem que entrar: no botao.
   ========================================================= */
#abertura{
  position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:4px;padding:28px;
  background:var(--bg);transition:opacity .26s ease;
}
#abertura.saindo{opacity:0;pointer-events:none}
body.abertura-aberta{overflow:hidden}
.ab-marca{width:min(100%,330px)}
.ab-marca img{width:100%;height:auto;display:block}
.ab-sub{margin:6px 0 28px;color:var(--muted);font-size:.95rem;font-weight:600;
  text-align:center;max-width:20em;line-height:1.45}
/* Alvo de 56px e sombra dura de 5px: o botao afunda ao toque em vez de
   piscar. Ele e a unica acao da tela, entao e o unico elemento cheio. */
.ab-entrar{
  border:none;border-radius:20px;padding:17px 48px;font-size:1.05rem;font-weight:800;
  background:var(--brand);color:#fff;cursor:pointer;font-family:inherit;
  min-height:56px;box-shadow:0 5px 0 #1F6B42;transition:transform .12s,box-shadow .12s;
}
.ab-entrar:active{transform:translateY(3px);box-shadow:0 2px 0 #1F6B42}
.ab-entrar:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
/* ⚠️ ASSINATURA EM UMA LINHA, SEM PLACA. A placa escura arredondada que
   estava aqui parecia adesivo: numa tela creme ela era a unica mancha
   escura, e estava na marca da agencia em vez de no produto. */
.ab-credito{
  position:absolute;bottom:calc(env(safe-area-inset-bottom,0px) + 26px);
  margin:0;display:flex;align-items:center;gap:10px;
}
.ab-produto{font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;color:var(--muted)}
/* ⚠️ O LOGO ENTRA COMO MASCARA, e a cor vem daqui.
   `softwr-logo.png` e o wordmark BRANCO do kit de identidade — ele foi feito
   para o fundo quase preto da landing, e sobre creme ele simplesmente some.
   Como mascara, o arquivo do kit continua sendo a arte (o desenho e o alfa
   dele, intacto) e quem pinta e o CSS. Isso evita as duas saidas ruins:
   redesenhar o logo em SVG, e manter um segundo PNG escuro em sincronia com
   o do kit.
   ⛔ Nao redesenhe este logo. Mudou a marca, troca-se o PNG — e so.
   O `background` fica DEPOIS do fallback de proposito: navegador sem
   `mask-image` ignora a mascara e mostraria um retangulo solido, entao o
   fallback usa o proprio PNG como imagem de fundo, que some no creme mas
   nao vira tarja. */
.sw-marca{
  display:block;width:104px;height:22.2px;
  background:var(--ink);
  -webkit-mask-image:url("../assets/softwr-logo.png");
          mask-image:url("../assets/softwr-logo.png");
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:contain;  mask-size:contain;
  -webkit-mask-position:center;mask-position:center;
}
@supports not ((-webkit-mask-image:url("")) or (mask-image:url(""))){
  .sw-marca{background:var(--ink);border-radius:4px}
}

/* =========================================================
   DOACAO POR PIX — dentro de Ajustes
   ========================================================= */
.bloco-pix p{margin:0 0 12px;font-size:.87rem;font-weight:500;color:var(--muted);line-height:1.5}
/* A ACAO E CHEIA, as escolhas sao vazadas. Botao de escolher valor e botao
   de copiar com a mesma pele e o adulto decidindo no chute. */
.valores-pix{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.valores-pix button{
  flex:1 1 auto;min-width:72px;min-height:46px;padding:10px 8px;
  border:2px solid var(--line);border-radius:12px;background:#fff;
  font-family:inherit;font-size:.85rem;font-weight:800;color:var(--muted);cursor:pointer;
}
/* ⚠️ O ESCOLHIDO E MARCADO, NAO PROMOVIDO. Pintar a ficha selecionada de
   verde daria duas pecas cheias na mesma coluna — a ficha e o "Copiar" — e
   a pessoa nao saberia qual e a acao. Cheio, so o botao que faz algo. */
.valores-pix button[aria-pressed="true"]{border-color:var(--brand);background:var(--soft);color:var(--brand-esc)}
.chave-pix{
  display:block;width:100%;min-height:72px;padding:15px;
  border:2px solid var(--brand);border-radius:14px;background:var(--brand);
  font-family:inherit;font-size:1rem;font-weight:800;color:#fff;cursor:pointer;
}
.chave-pix:active{transform:translateY(2px)}
.chave-pix small{display:block;margin-top:4px;font-size:.78rem;font-weight:600;color:var(--verde-claro)}
.chave-pix.copiada{border-color:var(--brand-esc);background:var(--brand-esc)}
/* ⛔ SEM `border-radius` NO QR, e isto nao e gosto. O canto arredondado come
   a ZONA DE SILENCIO — as 4 fileiras brancas que o padrao exige em volta, e
   que e por onde o leitor acha os tres localizadores. Com o canto cortado o
   codigo continua bonito e passa a falhar de vez em quando, que e o pior
   defeito possivel: um leitor le, outro nao, e ninguem reproduz. */
.pix-qr{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:14px}
.pix-qr svg{display:block}
.pix-qr span{font-size:.78rem;font-weight:600;color:var(--muted);text-align:center}
.pix-codigo{
  margin:10px 0 0;padding:10px 12px;border-radius:12px;background:var(--bg);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.7rem;font-weight:500;color:var(--ink);line-height:1.5;
  word-break:break-all;user-select:all;
}
.placa-sw{
  margin:18px 0 8px;padding:18px 20px;border-radius:18px;background:var(--ink);
  display:flex;flex-direction:column;align-items:center;gap:9px;text-decoration:none;
}
.placa-sw:active{transform:scale(.985)}
.placa-sw img{width:136px;height:auto;display:block}
.placa-sw span{font-size:.7rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;color:var(--creme)}

/* Apagar e uma acao de risco: ela e vazada, nao cheia, e o vermelho e o
   `--bad` da paleta — nao um vermelho solto no meio do modulo, que foi
   como ela nasceu em tres arquivos diferentes. */
.btn.danger{background:#FDECEC;color:var(--bad)}
/* Linha de vacina: o respiro e maior que o das listas comuns porque cada
   linha carrega um alvo de toque, e o titulo da faixa ja marca o grupo. */
.vac-row{padding:11px 0;border-bottom:1px solid var(--line)}
.vac-row:last-child{border-bottom:none}

/* =========================================================
   CONVITE DE INSTALACAO

   ⚠️ ABAIXO DO CABECALHO, e nao por cima. Barra que tampa o seletor de
   crianca atrapalha justamente quem ja estava fazendo alguma coisa — e o
   convite chega 20s depois de a pessoa entrar, ou seja, com ela no meio de
   uma tarefa. Ele entra no fluxo visual, nao na frente dele.
   ========================================================= */
#instalar{
  position:fixed;left:12px;right:12px;top:calc(env(safe-area-inset-top,0px) + 86px);
  z-index:40;display:none;gap:12px;align-items:center;max-width:696px;margin:0 auto;
  /* ⚠️ SOMBRA SEM BORDA, e nao as duas. `1px de borda + sombra larga` e o
     `gpt-thin-border-wide-shadow` do detector, e ele tem razao: e o cartao
     flutuante que toda interface gerada por IA desenha, com a borda tentando
     resolver o que a sombra ja resolveu. Esta peca flutua de verdade sobre o
     conteudo, entao ela fica com a SOMBRA, que e o que diz "estou por cima"
     — e a borda sai. */
  background:#fff;color:var(--ink);border-radius:20px;
  padding:14px 16px;box-shadow:0 10px 24px rgba(46,32,24,.22);
  animation:desceConvite .28s ease;
}
#instalar.visivel{display:flex}
@keyframes desceConvite{from{transform:translateY(-12px);opacity:0}to{transform:translateY(0);opacity:1}}
#instalar .texto{flex:1;font-size:.84rem;font-weight:600;line-height:1.4;color:var(--muted)}
#instalar .texto b{display:block;font-size:.95rem;font-weight:800;margin-bottom:2px;color:var(--ink)}
#instalar button{border:none;border-radius:14px;font-family:inherit;font-weight:800;cursor:pointer}
/* A acao e cheia; a recusa e vazada. O "x" tem 44px de alvo porque recusar
   tem de ser tao facil quanto aceitar — botao de sair pequeno e o padrao
   escuro que este app nao usa. */
#instalar .sim{background:var(--brand);color:#fff;padding:13px 17px;font-size:.9rem;min-height:44px}
#instalar .nao{background:var(--bg);color:var(--muted);font-size:1.05rem;
  width:44px;height:44px;line-height:1;display:grid;place-items:center}