/* ===========================================================
   CS Digital Z — Identidade "Papel / desenhado à mão"
   Inspirado em PaperCSS. Ver identidade.html para o guia completo.
   =========================================================== */
* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --paper:#fbfaf5;     /* fundo papel */
  --ink:#2a2622;       /* texto / traço */
  --muted:#7a7266;     /* texto secundário */
  --orange:#e0740b;    /* destaque da marca */
  --amber:#ffbf00;     /* âmbar da marca */
  --nu:#820ad1;        /* Nubank */
  --dot:#e7e2d6;       /* pontos do papel */
  /* Bordas "desenhadas à mão" (truque PaperCSS) */
  --draw-a:255px 12px 225px 12px/12px 225px 12px 255px;
  --draw-b:14px 240px 14px 240px/240px 14px 240px 14px;
}
body {
  background:var(--paper); color:var(--ink);
  font-family:"Segoe Print","Bradley Hand","Comic Sans MS","Segoe UI",system-ui,sans-serif;
  line-height:1.6;
  background-image:radial-gradient(var(--dot) 1px, transparent 1px);
  background-size:22px 22px;
  padding:40px 5vw 70px;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }
img,svg { display:block; max-width:100%; }
:focus-visible { outline:2px solid var(--orange); outline-offset:3px; }
.wrap { max-width:900px; margin:0 auto; }

.draw  { border:2px solid var(--ink); border-radius:var(--draw-a); }
.draw2 { border:2px solid var(--ink); border-radius:var(--draw-b); }

header { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
header img { width:52px; height:52px; }
header b { font-size:1.3rem; }

h1 { font-size:clamp(2rem,5vw,3rem); line-height:1.1; letter-spacing:-.01em; max-width:16ch; margin:8px 0 8px; }
h1 em { font-style:normal; color:var(--orange); text-decoration:underline wavy var(--orange); text-underline-offset:6px; }
.sub { color:var(--muted); font-size:1.1rem; margin-bottom:26px; }

.grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.card { position:relative; background:#fff; padding:1.4rem; transition:transform .15s; }
.card:hover { transform:rotate(-1deg) translateY(-3px); }
.card:nth-child(even):hover { transform:rotate(1deg) translateY(-3px); }
.card .lg { width:62px; height:62px; flex:none; background:#fff; border:2px solid var(--ink);
  border-radius:120px 12px 120px 12px/12px 120px 12px 120px;
  display:grid; place-items:center; overflow:hidden; margin-bottom:.85rem; }
.card .lg img { width:100%; height:100%; object-fit:contain; padding:9px; }
.card .ct { color:var(--muted); font-size:.8rem; }
.card h3 { font-size:1.3rem; }
.card h3 small { font-size:.72rem; color:var(--muted); }
.card p { color:var(--muted); font-size:.95rem; margin:.3rem 0 1rem; }
.go { display:inline-block; padding:.45rem 1rem; background:var(--orange); color:#fff; font-weight:700; }
.go.ghost { background:#fff; color:var(--ink); }
.card a.full::after { content:""; position:absolute; inset:0; }
.nub { display:inline-block; font-size:.62rem; color:var(--nu); border:2px solid var(--nu); border-radius:120px 8px 120px 8px/8px 120px 8px 120px; padding:0 .4rem; margin-left:.35rem; }

.zs { display:flex; flex-wrap:wrap; gap:16px; margin-top:14px; }
.zc { flex:1 1 160px; padding:1rem 1.1rem; background:#fff; }
.zc .zl { color:var(--orange); font-size:1.6rem; font-weight:700; }
.zc b { display:block; }
.zc span { color:var(--muted); font-size:.85rem; }

.label { font-size:1.4rem; margin:34px 0 12px; }
.soon { color:var(--muted); }

footer { margin-top:34px; padding-top:16px; border-top:2px dashed #cfc8ba; color:var(--muted); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
footer a { color:var(--orange); font-weight:700; }

@media (max-width:600px){ .grid{ grid-template-columns:1fr; } }