/* CODA · visual da casca — direção "vinho enxuta"
   Paleta única: vinho #772131 (domina), anel #86303F, rosado #F4E6E8, texto claro #E9CFD4,
   texto secundário #8C4A56, pêssego #D96F4A (só ações), off-white #F7F5F2. Sem roxo, lavanda nem sálvia. */
:root{
  --vinho:#772131; --anel:#86303F; --rosado:#F4E6E8; --claro-vinho:#E9CFD4; --sec:#8C4A56;
  --pessego:#D96F4A; --off:#F7F5F2; --tracejado:#D9A9B1;
  /* papéis (trocam no modo noturno) */
  --pagina:#FFFFFF; --card:var(--rosado); --texto:#2E1A1F; --titulo:var(--vinho); --suave:var(--sec);
  --pilula:var(--off); --pilula-txt:var(--vinho); --campo:#FFFFFF; --campo-borda:transparent; --branco-card:#FFFFFF;
  --fonte:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Inter,system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{--pagina:#1C0B0E; --card:#41202A; --texto:#F4E6E8; --titulo:#F4E6E8; --suave:var(--claro-vinho);
    --pilula:#41202A; --pilula-txt:#F4E6E8; --campo:#2A1218; --campo-borda:#5A2E39; --branco-card:#1C0B0E; --tracejado:#8C4A56; color-scheme:dark}
}
*{box-sizing:border-box;margin:0;padding:0}
/* o fundo do documento é vinho: é ele que o iPhone usa para pintar a barra de status (ver README) */
html{background:var(--vinho)}
body{background:var(--pagina);color:var(--texto);font-family:var(--fonte);font-size:16px;-webkit-font-smoothing:antialiased;min-height:100vh}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
a{color:inherit}
[hidden]{display:none!important}

.tela{display:none}.tela.on{display:block}
.corpo{max-width:640px;margin:0 auto;padding:24px 20px calc(40px + env(safe-area-inset-bottom))}

/* ---------- bloco vinho do topo (todas as telas) ---------- */
.topo{position:relative;overflow:hidden;background:var(--vinho);color:#fff;border-radius:0 0 44px 44px;
  padding:calc(env(safe-area-inset-top) + 22px) 24px 40px}
/* anéis decorativos: só borda, cortados pela borda do bloco */
.topo::before,.topo::after{content:"";position:absolute;border-radius:50%;border:26px solid var(--anel);pointer-events:none}
.topo::before{width:230px;height:230px;right:-90px;top:-70px}
.topo::after{width:150px;height:150px;left:-70px;bottom:-80px;border-width:20px}
.topo>*{position:relative;z-index:1}
.topo .in{max-width:600px;margin:0 auto}
.topo h1{font-size:32px;font-weight:800;letter-spacing:-.025em;line-height:1.12}
.topo p{color:var(--claro-vinho);font-size:16px;line-height:1.45;margin-top:10px}
.topo .rotulo{display:block;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--claro-vinho);margin-bottom:8px}
.voltar{display:inline-flex;align-items:center;gap:4px;color:#fff;font-weight:600;font-size:16px;padding:6px 10px 6px 2px;margin:-6px 0 14px}
.voltar svg{width:20px;height:20px}

/* topo do menu: centralizado com o ícone */
.topo.menu{text-align:center;padding-bottom:36px}
.topo.menu .marca-ic{width:68px;height:68px;display:block;margin:0 auto;border-radius:17px;overflow:hidden}
.topo.menu .nome{margin-top:14px;font-size:28px;font-weight:800;letter-spacing:.34em;padding-left:.34em;line-height:1;color:var(--off)}
.topo.menu .lema{margin-top:10px;font-size:15px;color:var(--claro-vinho)}

/* ---------- textos ---------- */
.oi{font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--titulo);margin:4px 0 18px}
h2.bloco{font-size:19px;font-weight:700;letter-spacing:-.01em;color:var(--titulo);margin-bottom:8px}
.card p,.card li{font-size:16px;line-height:1.5}
.card p+p{margin-top:8px}
.card ol{padding-left:22px}
.card li+li{margin-top:6px}
.card b{font-weight:700}
.suave{color:var(--suave)}

/* ---------- cards ---------- */
.card{background:var(--card);border-radius:18px;padding:20px;margin-bottom:14px}
.card.contorno{background:var(--branco-card);border:2px solid var(--rosado)}
@media (prefers-color-scheme:dark){.card.contorno{border-color:#5A2E39}}
.card .cab{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.card .cab h2.bloco{margin:0}
.ic-redondo{width:44px;height:44px;flex:none;border-radius:50%;background:var(--vinho);color:#fff;display:grid;place-items:center}
.ic-redondo svg{width:22px;height:22px}

/* ---------- botões (pílulas) ---------- */
/* principal: pêssego com texto branco GRANDE e em negrito (texto grande precisa de 3:1; o par dá 3,3:1) */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:54px;padding:14px 22px;border-radius:999px;
  background:var(--pessego);color:#fff;font-weight:700;font-size:19px;text-align:center;text-decoration:none;margin-top:14px}
.btn:disabled{opacity:.5;cursor:default}
.btn.sec{background:var(--pilula);color:var(--pilula-txt);font-size:16px;font-weight:600}
.btn.sem-fundo{background:transparent;color:var(--titulo);font-size:16px;font-weight:600}
.btn svg{width:20px;height:20px}
.pilulas{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.pilulas .btn{margin:0}
.link{display:block;margin:22px auto 0;font-size:14px;color:var(--suave);text-decoration:underline;text-underline-offset:3px}

/* ---------- menu: grade de apps ---------- */
.grade{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (min-width:700px){.grade{grid-template-columns:repeat(4,1fr)}}
.tile{aspect-ratio:1;border-radius:24px;padding:18px;display:flex;flex-direction:column;justify-content:space-between;text-decoration:none;
  background:var(--card);color:var(--titulo);transition:transform .15s;-webkit-tap-highlight-color:transparent}
.tile:active{transform:scale(.98)}
.tile svg{width:34px;height:34px}
.tile b{font-size:20px;font-weight:800;letter-spacing:-.015em;line-height:1.1}
.tile.destaque{background:var(--vinho);color:#fff}
.tile.pedir{background:var(--branco-card);border:2px dashed var(--tracejado);color:var(--titulo);text-align:left}
.tile.pedir svg{color:var(--pessego)}
.faixa{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--card);border-radius:18px;padding:12px 16px;margin-bottom:12px;font-size:14.5px;line-height:1.4;color:var(--suave)}
.faixa b{color:var(--titulo)}
.faixa button{flex:none;color:var(--titulo);font-weight:700;font-size:14.5px;text-decoration:underline;text-underline-offset:3px}
.faixa.gratis{justify-content:center;color:var(--titulo);font-weight:700}
.rodape-casca{display:flex;justify-content:center;margin-top:34px}
.logo{height:26px;display:block;opacity:.9}.logo.escuro{display:none}
@media (prefers-color-scheme:dark){.logo.claro{display:none}.logo.escuro{display:block}}

/* ---------- boas-vindas (tela cheia vinho) ---------- */
#t-boasvindas.on{position:fixed;inset:0;z-index:40;background:var(--vinho);color:#fff;overflow:hidden;display:flex;flex-direction:column;
  padding:calc(env(safe-area-inset-top) + 40px) 28px calc(env(safe-area-inset-bottom) + 28px)}
#t-boasvindas .anel-grande{position:absolute;width:380px;height:380px;left:-150px;bottom:-140px;border-radius:50%;border:44px solid var(--anel)}
#t-boasvindas .ponto{position:absolute;width:22px;height:22px;border-radius:50%;background:var(--pessego);left:206px;bottom:150px}
#t-boasvindas .txt{position:relative;z-index:1;margin-top:auto;margin-bottom:auto;max-width:520px}
#t-boasvindas .rotulo{font-size:13px;font-weight:700;letter-spacing:.18em;color:var(--claro-vinho)}
#t-boasvindas h1{font-size:38px;font-weight:800;letter-spacing:-.03em;line-height:1.1;margin-top:14px}
#t-boasvindas p{font-size:18px;color:var(--claro-vinho);margin-top:16px;line-height:1.4}
#t-boasvindas .btn{position:relative;z-index:1;max-width:520px;margin:0 auto;width:100%}

/* ---------- formulários ---------- */
.campo{margin-bottom:16px}
.campo label{display:block;font-size:15px;font-weight:700;color:var(--titulo);margin-bottom:6px}
.campo .ajuda{font-size:14px;color:var(--suave);margin:-2px 0 8px;line-height:1.4}
.campo input,.campo textarea,.sel select{width:100%;background:var(--campo);border:1.5px solid var(--campo-borda);border-radius:14px;padding:14px;font-size:16px;outline:none;-webkit-appearance:none;appearance:none;color:var(--texto)}
.campo textarea{resize:vertical;min-height:140px;line-height:1.45}
.campo input:focus,.campo textarea:focus,.sel select:focus{border-color:var(--vinho)}
@media (prefers-color-scheme:dark){.campo input:focus,.campo textarea:focus,.sel select:focus{border-color:var(--claro-vinho)}}
.sel{position:relative}
.sel select{padding-right:42px}
.sel::after{content:"";position:absolute;right:18px;top:50%;width:8px;height:8px;border-right:2px solid var(--suave);border-bottom:2px solid var(--suave);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.consent{font-size:15px;line-height:1.5;color:var(--suave);margin:4px 0 14px}
.aceite{display:flex;gap:10px;align-items:flex-start;font-size:16px;font-weight:600;color:var(--titulo);cursor:pointer}
.aceite input{width:22px;height:22px;flex:none;margin-top:1px;accent-color:#772131}
.erro{color:#A9452A;font-size:14.5px;font-weight:600;margin-top:10px;min-height:1px}
@media (prefers-color-scheme:dark){.erro{color:#F2A88E}}

/* ---------- instalar ---------- */
.passos{counter-reset:p;list-style:none;padding:0!important}
.passos li{counter-increment:p;display:flex;gap:12px;align-items:flex-start}
.passos li::before{content:counter(p);flex:none;width:26px;height:26px;border-radius:50%;background:var(--vinho);color:#fff;font-size:13px;font-weight:700;display:grid;place-items:center}
.passos svg{width:18px;height:18px;vertical-align:-3px}
.selo{display:inline-block;font-size:12px;font-weight:700;color:#fff;background:var(--vinho);border-radius:999px;padding:3px 10px;margin-left:8px;vertical-align:3px}

/* ---------- meus dados ---------- */
.nota{display:flex;gap:12px;align-items:flex-start;background:var(--vinho);color:#fff;border-radius:18px;padding:16px 18px;margin-bottom:14px;font-size:15px;line-height:1.45}
.nota svg{width:22px;height:22px;flex:none;color:var(--claro-vinho);margin-top:1px}
.nota span{color:var(--claro-vinho)}
.nota b{color:#fff}
.resumo{background:var(--card);border-radius:14px;padding:14px 16px;font-size:15px;line-height:1.6;margin:14px 0 4px}
.resumo ul{padding-left:18px}
.info{font-size:14.5px;color:var(--suave);margin-top:10px;text-align:center}

.toast{position:fixed;left:50%;bottom:calc(30px + env(safe-area-inset-bottom));transform:translate(-50%,20px);background:var(--vinho);color:#fff;
  padding:12px 20px;border-radius:999px;font-size:15px;font-weight:600;opacity:0;pointer-events:none;transition:.25s;z-index:60;max-width:90vw;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}