/* ===== Reset básico ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ===== Temas (variáveis) ===== */
body.tema-claro{
  --fundo:#faf6ef; --fundo-hero:#faf6ef;
  --texto:#2b2b2b; --texto-suave:#6b6b6b;
  --card:#ffffff; --borda:#e4dcc8;
  --marca:#8a7a5c; --pdv:#2e7d32; --rosa:#1a237e; --ouro:#b8935a;
  --sombra:0 2px 8px rgba(0,0,0,.07);
  --fonte-titulo:Georgia,'Times New Roman',serif;
}
body.tema-marinho{
  --fundo:#0d1b3e; --fundo-hero:linear-gradient(160deg,#0d1b3e,#1a2b5c);
  --texto:#f5f0e6; --texto-suave:#a9b3cf;
  --card:rgba(255,255,255,.07); --borda:rgba(212,175,95,.4);
  --marca:#d4af5f; --pdv:#9ccc65; --rosa:#d4af5f; --ouro:#d4af5f;
  --sombra:0 2px 12px rgba(0,0,0,.35);
  --fonte-titulo:Georgia,'Times New Roman',serif;
}
body.tema-vibrante{
  --fundo:#ffffff; --fundo-hero:linear-gradient(135deg,#e8f5e9,#e3f2fd);
  --texto:#111111; --texto-suave:#555555;
  --card:#f6f8fb; --borda:#e0e6ef;
  --marca:#1565c0; --pdv:#2e7d32; --rosa:#283593; --ouro:#f9a825;
  --sombra:0 4px 14px rgba(21,101,192,.12);
  --fonte-titulo:system-ui,'Segoe UI',Arial,sans-serif;
}
body{
  background:var(--fundo);color:var(--texto);
  font-family:system-ui,'Segoe UI',Arial,sans-serif;line-height:1.6;
  min-height:100vh;display:flex;flex-direction:column;
}
main{flex:1}

/* ===== Alternância de layouts da home ===== */
.home-a,.home-b,.home-c{display:none}
body.layout-a .home-a{display:block}
body.layout-b .home-b{display:block}
body.layout-c .home-c{display:block}

/* ===== Estrutura ===== */
.container{max-width:1040px;margin:0 auto;padding:0 20px}
.container-estreito{max-width:720px;margin:0 auto;padding:0 20px}
section{padding:48px 0}

/* ===== Tipografia ===== */
h1,h2,h3{font-family:var(--fonte-titulo);line-height:1.25}
h1{font-size:clamp(1.8rem,4.5vw,2.6rem)}
h2{font-size:clamp(1.4rem,3.5vw,1.9rem);margin-bottom:12px}
h3{font-size:1.15rem}
p{margin-bottom:12px}
.marca{
  font-size:.8rem;letter-spacing:3px;text-transform:uppercase;
  color:var(--marca);font-weight:700;font-family:system-ui,Arial,sans-serif;
}
.suave{color:var(--texto-suave)}
.destaque-pdv{color:var(--pdv)}
.destaque-rosa{color:var(--rosa)}

/* ===== Herói ===== */
.hero{background:var(--fundo-hero);padding:64px 0 56px;text-align:center}
.hero h1{margin:10px 0 8px}
.hero p{max-width:560px;margin:0 auto;color:var(--texto-suave)}

/* ===== Cards de app ===== */
.cards-apps{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.card-app{
  background:var(--card);border:1px solid var(--borda);border-radius:16px;
  padding:28px 24px;box-shadow:var(--sombra);text-align:center;
  flex:1 1 300px;max-width:420px;display:flex;flex-direction:column;align-items:center;gap:12px;
}
.card-app img.icone{width:96px;height:96px;border-radius:22px}
.card-app .icone-mini{width:64px;height:64px;border-radius:14px}
.card-app h3{font-size:1.35rem}
.card-app p{color:var(--texto-suave);margin:0}
.btn-conhecer{
  display:inline-block;margin-top:4px;padding:10px 22px;border-radius:999px;
  border:1px solid var(--borda);background:transparent;color:var(--texto);
  text-decoration:none;font-weight:600;transition:opacity .15s;
}
.btn-conhecer:hover{opacity:.75}
.btn-play{display:inline-block;margin-top:6px}
.btn-play img{height:56px;width:auto}

/* ===== Seções por app (layout one-page) ===== */
.secao-app{border-top:1px solid var(--borda)}
.secao-app .cabecalho{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.secao-app .cabecalho img{width:72px;height:72px;border-radius:16px}
.lista-recursos{list-style:none;margin:12px 0 20px}
.lista-recursos li{padding:6px 0;padding-left:28px;position:relative}
.lista-recursos li::before{content:"✔";position:absolute;left:0;color:var(--ouro)}

/* ===== Grid de recursos (páginas de app) ===== */
.grid-recursos{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;margin:24px 0;
}
.grid-recursos .recurso{
  background:var(--card);border:1px solid var(--borda);border-radius:14px;
  padding:18px;box-shadow:var(--sombra);
}
.grid-recursos .recurso .emoji{font-size:1.6rem;display:block;margin-bottom:8px}
.grid-recursos .recurso p{color:var(--texto-suave);margin:4px 0 0;font-size:.95rem}

/* ===== Screenshots ===== */
.shots{display:flex;gap:14px;overflow-x:auto;padding:8px 0 16px}
.shots img{
  height:420px;width:auto;border-radius:14px;border:1px solid var(--borda);
  box-shadow:var(--sombra);flex-shrink:0;
}

/* ===== FreshKeep "em breve" ===== */
.selo-breve{
  background:var(--card);border:1px dashed var(--borda);border-radius:16px;
  padding:22px 24px;text-align:center;opacity:.8;max-width:420px;margin:32px auto 0;
}
.selo-breve .etiqueta{
  display:inline-block;font-size:.7rem;letter-spacing:2px;font-weight:700;
  color:var(--ouro);border:1px solid var(--ouro);border-radius:999px;
  padding:3px 12px;margin-bottom:8px;
}

/* ===== Navegação simples (páginas internas) ===== */
.nav-topo{padding:18px 0}
.nav-topo a{text-decoration:none;color:var(--texto-suave);font-weight:600}
.nav-topo a:hover{color:var(--texto)}

/* ===== CTA final ===== */
.cta-final{text-align:center;background:var(--fundo-hero);border-radius:20px;padding:40px 24px;margin:24px 0 48px}

/* ===== Rodapé ===== */
.rodape{
  border-top:1px solid var(--borda);padding:28px 20px;text-align:center;
  color:var(--texto-suave);font-size:.9rem;
}
.rodape a{color:var(--texto-suave)}
.rodape a:hover{color:var(--texto)}
.rodape .linha{margin-bottom:6px}

/* ===== Botão claro/escuro ===== */
.botao-tema{
  position:fixed;top:14px;right:14px;z-index:900;
  width:44px;height:44px;border-radius:50%;
  border:1px solid var(--borda);background:var(--card);
  font-size:1.15rem;cursor:pointer;box-shadow:var(--sombra);
  display:flex;align-items:center;justify-content:center;
}
.botao-tema:hover{transform:scale(1.08)}

/* ===== Botão flutuante do WhatsApp ===== */
.botao-whats{
  position:fixed;bottom:16px;right:16px;z-index:900;
  width:56px;height:56px;border-radius:50%;background:#25d366;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.3);transition:transform .15s;
}
.botao-whats:hover{transform:scale(1.08)}
.botao-whats svg{width:30px;height:30px;fill:#fff}

/* ===== Seção de apoio (Pix) ===== */
.apoio{border-top:1px solid var(--borda);text-align:center}
.apoio .qr-pix{
  width:200px;height:200px;margin:16px auto;border-radius:14px;
  border:1px solid var(--borda);box-shadow:var(--sombra);background:#fff;padding:8px;
}
.apoio .chave-pix{
  display:inline-block;font-family:Consolas,monospace;font-size:.85rem;
  background:var(--card);border:1px solid var(--borda);border-radius:8px;
  padding:8px 14px;margin:6px 0;word-break:break-all;
}
.apoio .btn-copiar{
  display:inline-block;margin-left:8px;padding:8px 18px;border-radius:999px;
  border:1px solid var(--borda);background:var(--card);color:var(--texto);
  cursor:pointer;font-weight:600;font-size:.85rem;
}
.apoio .btn-copiar:hover{opacity:.75}

/* ===== Painel de configuração (?config) ===== */
.painel-config{
  position:fixed;right:16px;bottom:84px;z-index:1000;
  background:#1c1c1e;color:#f2f2f2;border-radius:14px;padding:16px 18px;
  box-shadow:0 8px 30px rgba(0,0,0,.45);font-size:.85rem;max-width:280px;
  font-family:system-ui,Arial,sans-serif;
}
.painel-config .grupo{margin-top:10px}
.painel-config .grupo strong{display:block;margin-bottom:6px;font-size:.75rem;letter-spacing:1px;text-transform:uppercase;color:#bbb}
.painel-config button{
  display:inline-block;margin:0 6px 6px 0;padding:6px 12px;border-radius:999px;
  border:1px solid #555;background:transparent;color:#eee;cursor:pointer;font-size:.8rem;
}
.painel-config button.ativo{background:#0a84ff;border-color:#0a84ff;color:#fff}
.painel-config small{display:block;margin-top:8px;color:#999}

/* ===== Página minimalista (home-c) ===== */
.home-c .mini{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px 20px}
.home-c .cards-apps{margin-top:28px;width:100%;justify-content:center}
.home-c .card-app{padding:20px}

/* ===== Responsivo ===== */
@media (max-width:720px){
  .hero{padding:44px 0 40px}
  section{padding:32px 0}
  .shots img{height:320px}
  .cards-apps{gap:16px}
  .painel-config{left:16px;max-width:none}
}