/* site.css — página inicial (inicio.php) e login no mesmo estilo: amarelo + preto, recortes em arco,
   tipografia forte, cartões grandes para os dois públicos (empresa e panfleteiro). */
:root {
  --am: #ffc107; --am2: #ffd43b; --preto: #0b0b0b; --grafite: #16181b; --cinza: #6b7280; --claro: #f5f6f8;
  --raio: 28px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.site { margin: 0; font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #111; background: #fff; overflow-x: hidden; }
:where(.site) a { color: inherit; }
.site h1, .site h2, .site h3 { letter-spacing: -.02em; }
.site .fino { font-weight: 400; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ---------- topo ---------- */
.topo { position: sticky; top: 0; z-index: 50; background: rgba(11,11,11,.92); backdrop-filter: blur(10px); }
.topo .wrap { display: flex; align-items: center; gap: 24px; height: 68px; }
.topo .logo img { height: 40px; display: block; }
.topo nav { display: flex; gap: 22px; margin-left: 12px; }
.topo nav a { color: #cfd2d6; text-decoration: none; font-weight: 600; font-size: .95rem; }
.topo nav a:hover { color: #fff; }
.topo .acoes { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.btn-p { display: inline-flex; align-items: center; gap: 10px; border-radius: 999px; padding: 6px 18px 6px 6px; font-weight: 700; text-decoration: none; border: 0; cursor: pointer; font-size: .98rem; transition: transform .15s, box-shadow .15s; white-space: nowrap; }
.btn-p:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.18); }
.btn-p .seta { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; }
.btn-preto { background: #111; color: #fff !important; }
.btn-preto .seta { background: #fff; color: #111; }
.btn-amarelo { background: var(--am); color: #111 !important; }
.btn-amarelo .seta { background: #111; color: var(--am); }
.btn-branco { background: #fff; color: #111 !important; }
.btn-branco .seta { background: var(--am); color: #111; }
.btn-linha { background: transparent; color: #fff !important; border: 1.5px solid #3a3d42; padding: 9px 18px; }
.btn-linha:hover { border-color: var(--am); }

/* ---------- herói ---------- */
.heroi { display: grid; grid-template-columns: 1.05fr 1fr; min-height: min(calc(100vh - 68px), 820px); background: var(--claro); }
.heroi .amarelo { background: var(--am); border-radius: 0 0 var(--raio) 0; padding: 64px 56px 56px max(20px, calc((100vw - 1200px) / 2 + 20px)); display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
.heroi .amarelo::after { content: ""; position: absolute; right: -180px; bottom: -180px; width: 420px; height: 420px; border-radius: 50%; border: 60px solid rgba(255,255,255,.18); }
.heroi h1 { font-size: clamp(2.3rem, 4.6vw, 4.1rem); line-height: 1.02; margin: 0 0 18px; font-weight: 800; }
.heroi .sub { font-size: 1.15rem; max-width: 520px; margin: 0 0 30px; color: #2b2b2b; }
.escolha { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 640px; position: relative; z-index: 1; }
.cartao-esc { border-radius: 22px; padding: 22px; text-decoration: none; display: flex; flex-direction: column; gap: 8px; min-height: 210px; transition: transform .18s, box-shadow .18s; }
.cartao-esc:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.18); }
.cartao-esc .ic { width: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; margin-bottom: 4px; }
.cartao-esc h3 { margin: 0; font-size: 1.35rem; font-weight: 800; }
.cartao-esc p { margin: 0; font-size: .95rem; opacity: .8; flex: 1; }
.cartao-esc .ir { font-weight: 800; display: flex; align-items: center; gap: 8px; }
.esc-empresa { background: #111; color: #fff; }
.esc-empresa .ic { background: var(--am); color: #111; }
.esc-panf { background: #fff; color: #111; }
.esc-panf .ic { background: #111; color: var(--am); }
.heroi .visual { position: relative; display: flex; align-items: center; justify-content: center; padding: 40px 20px; overflow: hidden; }

/* ---------- maquetes ---------- */
.painel-mock { width: min(560px, 100%); background: #fff; border-radius: 18px; box-shadow: 0 30px 80px rgba(15,23,42,.18); overflow: hidden; }
.painel-mock .barra { background: #0b0b0b; height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 14px; }
.painel-mock .barra i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: #3a3d42; }
.painel-mock .barra .pilula { margin-left: 10px; background: var(--am); color: #111; font-size: .7rem; font-weight: 800; border-radius: 999px; padding: 3px 10px; }
.painel-mock .corpo { display: grid; grid-template-columns: 170px 1fr; }
.painel-mock .lista { border-right: 1px solid #eef0f3; padding: 10px; font-size: .74rem; }
.painel-mock .lista .pes { display: flex; gap: 8px; align-items: center; padding: 8px 4px; border-bottom: 1px solid #f1f2f4; }
.painel-mock .lista .pes b { display: block; font-size: .78rem; }
.painel-mock .lista .pes span { color: var(--cinza); }
.av { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: .8rem; flex: 0 0 30px; border: 2.5px solid #2fb344; }
.mapa-svg { display: block; width: 100%; height: 100%; min-height: 300px; }
.celular { width: 230px; border-radius: 36px; background: #0b0b0b; padding: 10px; box-shadow: 0 30px 70px rgba(0,0,0,.35); position: relative; }
.celular::before { content: ""; position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: 70px; height: 18px; border-radius: 999px; background: #000; z-index: 2; }
.celular .tela { border-radius: 28px; background: #212529; overflow: hidden; color: #fff; font-size: .72rem; min-height: 440px; padding: 40px 12px 12px; }
.celular .tela .tit { font-size: 1.05rem; font-weight: 800; margin-bottom: 8px; }
.celular .bloco { background: #2c3136; border-radius: 14px; padding: 10px; margin-bottom: 8px; }
.celular .grande { font-size: 1.5rem; font-weight: 800; color: var(--am); line-height: 1; }
.celular .cinza { color: #adb5bd; }
.celular .btn-app { background: #dc3545; color: #fff; text-align: center; border-radius: 12px; padding: 10px; font-weight: 800; margin-top: 8px; }
.celular .btn-app.am { background: var(--am); color: #111; }
.flut { position: absolute; background: #fff; border-radius: 16px; box-shadow: 0 14px 34px rgba(15,23,42,.18); padding: 10px 14px; font-size: .82rem; font-weight: 700; display: flex; align-items: center; gap: 10px; white-space: nowrap; animation: flutua 5s ease-in-out infinite; }
.flut .bol { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1rem; }
.flut small { display: block; font-weight: 500; color: var(--cinza); }
@keyframes flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .flut { animation: none; } html { scroll-behavior: auto; } }

/* ---------- faixas ---------- */
.secao { padding: 96px 0; }
.secao h2 { font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.05; margin: 0 0 16px; font-weight: 800; }
.secao .lead { font-size: 1.12rem; color: #4b5563; max-width: 560px; }
.selo { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; padding: 6px 12px; border-radius: 999px; background: #111; color: var(--am); margin-bottom: 18px; }
.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.lista-bene { list-style: none; padding: 0; margin: 26px 0 30px; display: grid; gap: 16px; }
.lista-bene li { display: flex; gap: 14px; align-items: flex-start; }
.lista-bene .ic { flex: 0 0 44px; height: 44px; border-radius: 14px; background: #fff6d6; color: #8a6400; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; }
.lista-bene b { display: block; font-size: 1.02rem; }
.lista-bene span { color: #4b5563; font-size: .95rem; }
.moldura { position: relative; border-radius: var(--raio); background: #111; padding: 34px; overflow: hidden; }
.moldura.arco { border-radius: 240px 240px var(--raio) var(--raio); }
.numeros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: -48px; position: relative; z-index: 2; }
.num { background: #fff; border-radius: 22px; padding: 22px; box-shadow: 0 10px 30px rgba(15,23,42,.08); }
.num .ic { font-size: 1.5rem; color: #b8860b; }
.num b { display: block; font-size: 1.05rem; margin-top: 6px; }
.num span { color: var(--cinza); font-size: .9rem; }
.faixa-amarela { background: var(--am); }
.faixa-amarela .lead { color: #2b2b2b; }
.faixa-amarela .lista-bene .ic { background: #111; color: var(--am); }
.faixa-amarela .lista-bene span { color: #2b2b2b; }
.faixa-preta { background: var(--preto); color: #fff; }
.faixa-preta .lead { color: #b9bec5; }
.lojas { display: flex; flex-wrap: wrap; gap: 12px; }
.loja { display: inline-flex; align-items: center; gap: 12px; background: #111; color: #fff !important; text-decoration: none; border-radius: 16px; padding: 10px 18px; min-width: 200px; }
.loja i { font-size: 1.8rem; }
.loja small { display: block; font-size: .72rem; opacity: .75; }
.loja b { font-size: 1.05rem; }
.loja.off { background: transparent; color: #111 !important; border: 1.5px dashed #111; }
.passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.passo { background: var(--claro); border-radius: 24px; padding: 28px; position: relative; }
.passo .n { width: 44px; height: 44px; border-radius: 50%; background: #111; color: var(--am); font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; margin-bottom: 14px; }
.passo h3 { font-size: 1.2rem; margin: 0 0 6px; }
.passo p { margin: 0; color: #4b5563; }
.preco-card { background: #111; color: #fff; border-radius: 32px; padding: 44px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; position: relative; overflow: hidden; }
.preco-card::after { content: ""; position: absolute; right: -120px; top: -120px; width: 340px; height: 340px; border-radius: 50%; background: var(--am); opacity: .12; }
.preco-card .valor { font-size: clamp(3rem, 6vw, 4.6rem); font-weight: 800; color: var(--am); line-height: 1; }
.preco-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.preco-card li { display: flex; gap: 10px; color: #d6d9dd; }
.preco-card li i { color: var(--am); }
.faq { max-width: 820px; margin: 36px auto 0; }
.faq details { border-bottom: 1px solid #e5e7eb; padding: 18px 4px; }
.faq summary { font-weight: 700; font-size: 1.08rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: #b8860b; }
.faq details[open] summary::after { content: "–"; }
.faq p { color: #4b5563; margin: 12px 0 0; }
.final { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.final a { text-decoration: none; border-radius: 28px; padding: 40px; min-height: 230px; display: flex; flex-direction: column; justify-content: space-between; transition: transform .18s; }
.final a:hover { transform: translateY(-4px); }
.final h3 { font-size: 1.9rem; margin: 0; line-height: 1.1; }
.rodape { background: var(--preto); color: #9aa0a6; padding: 40px 0; font-size: .9rem; }
.rodape a { color: #cfd2d6; text-decoration: none; }
.rodape .wrap { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }

/* ---------- login no mesmo estilo ---------- */
.entrar { display: grid; grid-template-columns: 1fr 1fr; min-height: min(100vh, 900px); }
.entrar .lado-am { background: var(--am); border-radius: 0 var(--raio) var(--raio) 0; padding: 48px 56px; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.entrar .lado-am::after { content: ""; position: absolute; left: -160px; bottom: -160px; width: 400px; height: 400px; border-radius: 50%; border: 56px solid rgba(255,255,255,.2); }
.entrar .lado-form { display: flex; align-items: center; justify-content: center; padding: 40px 20px; background: #fff; }
.caixa-entrar { width: 100%; max-width: 410px; }
.caixa-entrar .form-control { padding: .8rem 1rem; border-radius: 14px; background: var(--claro); border-color: #e5e7eb; }
.caixa-entrar .form-control:focus { background: #fff; border-color: #111; box-shadow: 0 0 0 4px rgba(255,193,7,.35); }
.abas-entrar { display: grid; grid-template-columns: 1fr 1fr; background: var(--claro); border-radius: 999px; padding: 5px; margin-bottom: 26px; }
.abas-entrar a { text-align: center; padding: 10px; border-radius: 999px; font-weight: 700; text-decoration: none; color: #4b5563; font-size: .92rem; }
.abas-entrar a.on, .abas-entrar label.on { background: #111; color: #fff; }
.abas-entrar label { color: #4b5563; }

/* ---------- celular ---------- */
@media (max-width: 991px) {
  .topo nav { display: none; }
  .heroi, .dupla, .entrar, .preco-card, .final { grid-template-columns: 1fr; }
  .heroi .amarelo { border-radius: 0 0 var(--raio) var(--raio); padding: 40px 20px 36px; }
  .heroi .visual { padding: 36px 12px 70px; }
  .numeros { grid-template-columns: 1fr 1fr; margin-top: 24px; }
  .passos { grid-template-columns: 1fr; }
  .secao { padding: 64px 0; }
  .dupla { gap: 36px; }
  .entrar .lado-am { border-radius: 0 0 var(--raio) var(--raio); padding: 28px 20px; }
  .entrar .lado-am .so-pc { display: none; }
  .preco-card { padding: 30px 22px; }
  .final a { padding: 28px; min-height: 180px; }
}
@media (max-width: 575px) {
  .escolha { grid-template-columns: 1fr; }
  .cartao-esc { min-height: 0; }
  .topo .acoes .btn-linha { padding: 7px 12px; font-size: .88rem; }
  .topo .acoes .btn-amarelo { font-size: .88rem; padding-right: 12px; }
  .topo .logo img { height: 32px; }
  .topo .wrap { gap: 10px; }
  .flut { font-size: .72rem; padding: 8px 10px; }
  .painel-mock .corpo { grid-template-columns: 1fr; }
  .painel-mock .lista { display: none; }
}