/* ===================================================================
   DataLP · Páginas de Case (case-*.html) — TEMA CLARO (alinhado à home)
   Reaproveita o shell da home (header/footer/scripts). Só o conteúdo
   do case usa estas classes. Fonte: Familjen Grotesk (carregada no head).
   =================================================================== */
:root{
  --cs-bg:#F7FAFB; --cs-card:#FFFFFF;
  --cs-line:rgba(5,14,26,.09); --cs-line2:rgba(5,14,26,.06);
  --cs-teal:#14C5C5; --cs-teal-tx:#0E9B9B; --cs-teal-dp:#0A6B6B;
  --cs-green:#0F9D6B; --cs-red:#E5484D;
  --cs-ink:#050E1A; --cs-mut:rgba(5,14,26,.62); --cs-mut2:rgba(5,14,26,.42);
  --cs-maxw:1120px; --cs-pad:24px;
}
.cs-page{background:var(--cs-bg);color:var(--cs-ink);
  font-family:'Familjen Grotesk',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.5}
.cs-wrap{max-width:var(--cs-maxw);margin:0 auto;padding:0 var(--cs-pad)}
a.cs-reset{color:inherit;text-decoration:none}

/* ---- Hero ---- */
.cs-hero{position:relative;padding:112px 0 60px;overflow:hidden;
  background:
    radial-gradient(120% 130% at 12% -10%,rgba(20,197,197,.20),transparent 52%),
    linear-gradient(180deg,#E9F6F7 0%,#F3F9FA 46%,var(--cs-bg) 100%);
  border-bottom:1px solid var(--cs-line2)}
.cs-hero-grid{display:block;text-align:center;max-width:840px;margin:0 auto}
.cs-badge{display:inline-flex;align-items:center;gap:8px;font-size:.76rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--cs-teal-dp);
  background:rgba(20,197,197,.10);border:1px solid rgba(20,197,197,.35);border-radius:999px;padding:7px 15px}
.cs-h1{font-size:clamp(2rem,4.4vw,3.1rem);font-weight:600;letter-spacing:-.03em;line-height:1.06;margin:18px 0 0;color:var(--cs-ink)}
.cs-h1 .g{color:var(--cs-teal-tx)}
.cs-lead{font-size:1.06rem;color:var(--cs-mut);margin:18px auto 0;max-width:60ch}
.cs-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:22px}
.cs-tag{font-size:.8rem;font-weight:600;color:var(--cs-ink);background:#fff;
  border:1px solid var(--cs-line);border-radius:8px;padding:6px 12px}
.cs-hero-media{border-radius:18px;border:1px solid var(--cs-line);overflow:hidden;
  box-shadow:0 30px 60px -34px rgba(5,14,26,.35);background:#fff}
.cs-hero-media img{display:block;width:100%;height:auto}
@media(max-width:860px){.cs-hero-grid{grid-template-columns:1fr;gap:32px}.cs-hero-media{order:-1}}

/* ---- Stat row ---- */
.cs-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;
  margin:40px auto 0;max-width:var(--cs-maxw)}
.cs-stat{background:var(--cs-card);border:1px solid var(--cs-line);border-radius:14px;padding:20px 18px;
  box-shadow:0 2px 10px -6px rgba(5,14,26,.12)}
.cs-stat-num{font-size:1.9rem;font-weight:700;letter-spacing:-.02em;color:var(--cs-ink);line-height:1}
.cs-stat-num small{font-size:1.1rem;color:var(--cs-teal-tx)}
.cs-stat-lbl{font-size:.82rem;color:var(--cs-mut);margin-top:8px}

/* ---- Sections ---- */
.cs-sec{padding:64px 0;border-top:1px solid var(--cs-line2)}
.cs-sec:nth-of-type(odd){background:#fff}
.cs-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:.76rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px}
.cs-eyebrow.pain{color:var(--cs-red)}
.cs-eyebrow.ok{color:var(--cs-green)}
.cs-eyebrow.teal{color:var(--cs-teal-dp)}
.cs-eyebrow .dot{width:9px;height:9px;border-radius:50%;background:currentColor}
.cs-sec-h{font-size:clamp(1.5rem,2.8vw,2.1rem);font-weight:600;letter-spacing:-.025em;color:var(--cs-ink);margin:0 0 6px}
.cs-sec-h .soft{color:var(--cs-mut2)}
.cs-sec-sub{font-size:1.02rem;color:var(--cs-mut);margin:0 0 30px;max-width:60ch}

/* lista de itens (dor/solução/entregue) */
.cs-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;list-style:none;padding:0;margin:0}
.cs-list.one{grid-template-columns:1fr;max-width:640px}
.cs-item{display:flex;gap:14px;background:var(--cs-card);border:1px solid var(--cs-line);
  border-radius:14px;padding:18px 18px;box-shadow:0 2px 10px -7px rgba(5,14,26,.12)}
.cs-item .mk{flex:0 0 auto;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
  background:rgba(20,197,197,.12);color:var(--cs-teal-tx)}
.cs-item.pain .mk{background:rgba(229,72,77,.12);color:var(--cs-red)}
.cs-item.ok .mk{background:rgba(15,157,107,.12);color:var(--cs-green)}
.cs-item .mk svg{width:17px;height:17px}
.cs-item h4{margin:0 0 3px;font-size:1rem;font-weight:600;color:var(--cs-ink)}
.cs-item p{margin:0;font-size:.9rem;color:var(--cs-mut)}
@media(max-width:680px){.cs-list{grid-template-columns:1fr}}

/* faixa de destaque (callout) */
.cs-callout{margin-top:26px;border:1px solid rgba(20,197,197,.4);border-radius:14px;
  padding:20px 22px;background:rgba(20,197,197,.07);font-size:1.05rem;color:var(--cs-ink)}
.cs-callout strong{color:var(--cs-teal-dp)}
.cs-callout.pain{border-color:rgba(229,72,77,.35);background:rgba(229,72,77,.06)}
.cs-callout.pain strong{color:var(--cs-red)}

/* chips (problema real / impacto) */
.cs-chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.cs-chip{background:var(--cs-card);border:1px solid var(--cs-line);border-radius:14px;
  padding:22px 18px;text-align:center;box-shadow:0 2px 10px -7px rgba(5,14,26,.12)}
.cs-chip .mk{width:38px;height:38px;margin:0 auto 12px;border-radius:10px;display:grid;place-items:center;
  background:rgba(20,197,197,.12);color:var(--cs-teal-tx)}
.cs-chip .mk svg{width:20px;height:20px}
.cs-chip span{font-size:.95rem;font-weight:600;color:var(--cs-ink)}

/* ---- CTA final ---- */
.cs-final{padding:76px 0;text-align:center;border-top:1px solid var(--cs-line2);
  background:radial-gradient(90% 130% at 50% -20%,rgba(20,197,197,.22),transparent 55%),
             linear-gradient(180deg,#E9F6F7 0%,#F3F9FA 100%)}
.cs-final h2{font-size:clamp(1.7rem,3.2vw,2.5rem);font-weight:600;letter-spacing:-.03em;color:var(--cs-ink);margin:0 auto;max-width:20ch}
.cs-final p{color:var(--cs-mut);margin:16px auto 28px;max-width:46ch}

/* ---- Header do site sempre visível na página de case ----
   (o sticky-header nasce oculto e só aparece ao rolar; aqui forçamos
   visível para o usuário sempre ter o menu e conseguir sair da página) */
.cs-page .sticky-header{transform:none;visibility:visible}
.cs-page{scroll-padding-top:80px}

/* ---- Botão (CTA) ---- */
.cs-cta{display:inline-flex;align-items:center;gap:8px;background:var(--cs-teal);color:#04121f;
  font-weight:700;font-size:1rem;padding:14px 26px;border-radius:999px;
  box-shadow:0 12px 26px -12px rgba(20,197,197,.7);transition:transform .2s,background .2s}
.cs-cta:hover{transform:translateY(-1px);background:#0FB4B4}
.cs-cta svg{width:16px;height:16px}