/* =====================================================================
   Gráfica Plus — Tema escuro (landing institucional + catálogo público)
   ===================================================================== */

.site {
  --d-bg: #0a0f0d;
  --d-bg-2: #0f1512;
  --d-card: #121a16;
  --d-line: #1e2a24;
  --d-text: #e5e7eb;
  --d-muted: #94a3b8;
  --brand: #22c55e;
  --brand-600: #16a34a;
  background: var(--d-bg);
  color: var(--d-text);
  min-height: 100vh;
}
.site h1,.site h2,.site h3,.site h4 { color: #fff; }

/* Header institucional */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(10,15,13,.85); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--d-line);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.logo { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 18px; }
.logo .mark { width: 30px; height: 30px; border-radius: 8px; background: var(--brand); color: #04140b; display: grid; place-items: center; font-weight: 900; }
.logo .plus { color: var(--brand); }
.site-nav { display: flex; gap: 26px; }
.site-nav a { color: #cbd5e1; font-size: 14px; }
.site-nav a:hover, .site-nav a.active { color: var(--brand); }
.header-cta { display: flex; align-items: center; gap: 12px; }
.header-cta .entrar { color: #e5e7eb; font-weight: 600; }

/* Hero */
.hero { padding: 70px 0 40px; }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.pill-tag { display: inline-flex; align-items: center; gap: 8px; background: rgba(34,197,94,.12); color: #86efac; border: 1px solid rgba(34,197,94,.3); padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.hero h1 { font-size: 54px; line-height: 1.05; margin: 20px 0; letter-spacing: -.02em; }
.hero h1 .g { color: var(--brand); }
.hero p.lead { color: #94a3b8; font-size: 16px; max-width: 460px; }
.hero-actions { display: flex; gap: 14px; margin-top: 28px; }
.btn-glow { background: var(--brand); color: #04140b; box-shadow: 0 0 30px rgba(34,197,94,.4); font-weight: 700; }
.btn-glow:hover { background: #16a34a; }
.btn-dark { background: #0f1512; color: #fff; border: 1px solid var(--d-line); }
.hero-shot { border-radius: 16px; overflow: hidden; border: 1px solid var(--d-line); box-shadow: 0 30px 80px rgba(0,0,0,.5); }

.site-section { padding: 60px 0; }
.site-section.light { background: #fff; color: var(--ink); }
.site-section.light h2 { color: var(--ink); }
.section-head { text-align: center; margin-bottom: 40px; }
.section-head h2 { font-size: 34px; }
.section-head p { color: var(--d-muted); margin-top: 10px; }

/* Cards de segmento */
.seg-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.seg-card { position: relative; border-radius: 16px; overflow: hidden; min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; color: #fff; border: 1px solid rgba(255,255,255,.08); }
.seg-card .seg-ico { position: absolute; top: 16px; left: 16px; width: 40px; height: 40px; border-radius: 10px; background: rgba(0,0,0,.35); display: grid; place-items: center; }
.seg-card h3 { font-size: 20px; margin-bottom: 12px; }
.seg-btn { border-radius: 999px; padding: 10px; text-align: center; font-weight: 700; color: #04140b; }

/* Comparativo */
.cmp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.cmp-card { border-radius: 16px; padding: 26px; border: 1px solid var(--d-line); }
.cmp-card.bad { background: rgba(239,68,68,.06); border-color: rgba(239,68,68,.25); }
.cmp-card.good { background: rgba(34,197,94,.06); border-color: rgba(34,197,94,.25); }
.cmp-card h3 { display: flex; align-items: center; gap: 10px; font-size: 18px; margin-bottom: 18px; }
.cmp-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.cmp-list li { display: flex; gap: 10px; color: #cbd5e1; font-size: 14px; }

/* Recursos (grid de cards claros) */
.feat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.feat-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 20px; }
.feat-card .f-ico { width: 40px; height: 40px; border-radius: 10px; background: var(--brand); color: #fff; display: grid; place-items: center; margin-bottom: 14px; }
.feat-card h4 { font-size: 15px; color: var(--ink); }
.feat-card p { color: var(--muted); font-size: 13px; margin-top: 6px; }

/* Integrações escuras */
.intg-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.intg-card { background: linear-gradient(180deg,#121a16,#0d130f); border: 1px solid var(--d-line); border-radius: 14px; padding: 22px; }
.intg-card .i-logo { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 14px; background: #fff; }
.intg-card h4 { font-size: 16px; }
.intg-card p { color: var(--d-muted); font-size: 13px; margin-top: 8px; }

/* Planos */
.plans-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; align-items: start; }
.plan { position: relative; background: #0f1512; border: 1px solid var(--d-line); border-radius: 18px; padding: 26px 22px; }
.plan.popular { border-color: #8b5cf6; box-shadow: 0 0 40px rgba(139,92,246,.2); }
.plan-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 5px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #fff; }
.plan .p-name { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 800; }
.plan .p-tag { color: var(--d-muted); font-size: 13px; margin-top: 6px; min-height: 34px; }
.plan .p-price { font-size: 38px; font-weight: 900; margin: 16px 0 4px; }
.plan .p-price small { font-size: 14px; color: var(--d-muted); font-weight: 500; }
.plan ul { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 11px; }
.plan ul li { display: flex; gap: 9px; font-size: 13px; color: #cbd5e1; }
.plan .p-cta { width: 100%; border-radius: 10px; padding: 13px; font-weight: 700; color: #fff; border: none; cursor: pointer; }

/* FAQ */
.faq-item { border: 1px solid var(--d-line); border-radius: 12px; padding: 16px 20px; margin-bottom: 12px; background: #0f1512; }
.faq-item summary { cursor: pointer; font-weight: 600; color: #e5e7eb; list-style: none; display: flex; justify-content: space-between; }
.faq-item p { color: var(--d-muted); margin-top: 12px; }

/* Rodapé institucional */
.site-footer { background: #f3f5f8; color: var(--ink); padding: 40px 0 26px; }
.site-footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 30px; }
.site-footer a { color: var(--muted); display: block; margin-bottom: 8px; font-size: 14px; }
.site-footer .foot-bottom { border-top: 1px solid var(--line); margin-top: 28px; padding-top: 18px; display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; }

/* WhatsApp flutuante */
.wa-float { position: fixed; right: 22px; bottom: 22px; width: 54px; height: 54px; border-radius: 50%; background: #25d366; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0,0,0,.3); z-index: 60; }

/* =====================================================================
   CATÁLOGO público (loja do cliente final)
   ===================================================================== */
.shop-status { background: var(--brand); color: #04140b; text-align: left; font-size: 12px; font-weight: 600; padding: 4px 20px; }
.shop-header { background: #14181a; border-bottom: 1px solid #1f2937; }
.shop-header .container { display: flex; align-items: center; gap: 24px; height: 64px; }
.shop-header .store-name { font-weight: 800; color: #fff; font-size: 18px; }
.shop-search { flex: 1; max-width: 520px; position: relative; }
.shop-search input { width: 100%; background: #0f1417; border: 1px solid #2a3339; color: #e5e7eb; border-radius: 999px; padding: 10px 44px 10px 18px; }
.shop-actions { display: flex; gap: 22px; margin-left: auto; color: #cbd5e1; font-size: 12px; }
.shop-actions a { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.shop-actions a .lbl { font-size: 11px; }
.shop-banner { background: #191d1f; border-radius: 16px; height: 300px; display: grid; place-items: center; color: #3a4149; margin: 22px 0; }
.shop-title { text-align: center; font-weight: 800; color: #fff; margin: 20px 0; position: relative; }
.shop-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.shop-prod { background: #191d1f; border-radius: 14px; height: 220px; display: grid; place-items: center; color: #3a4149; }
.shop-footer { background: #0d1012; border-top: 1px solid #1f2937; margin-top: 40px; padding: 34px 0 24px; }
.shop-footer .cols { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; color: #cbd5e1; }
.shop-footer h5 { color: #fff; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 14px; }
.secure-box { background: #14181a; border: 1px solid #1f2937; border-radius: 12px; padding: 16px; }

@media (max-width: 900px) {
  .hero-grid, .cmp-grid, .plans-grid, .seg-grid, .feat-grid, .intg-grid,
  .shop-grid, .grid-4, .grid-3 { grid-template-columns: 1fr 1fr; }
  .hero h1 { font-size: 38px; }
  .sidebar { display: none; }
}
@media (max-width: 560px) {
  .hero-grid, .cmp-grid, .plans-grid, .seg-grid, .feat-grid, .intg-grid,
  .shop-grid, .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
}