/* Project pages (tasky, inparafarmacia, regia-radio, cyclestop).
   Mock-ups are plain HTML drawn like the real apps, in place of screenshots
   (same idea as the Tasky landing page). Each mock sets --c (brand colour). */

.pj-intro { margin-top: 80px; }
.pj-lead { margin-bottom: 1.2em; }
.pj-tag { display: inline-block; font-size: .8em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
          background: rgba(255,255,255,.15); border-radius: 999px; padding: 4px 12px; margin-bottom: 14px; }
.pj-block { padding: 40px 0; border-top: 1px solid rgba(255,255,255,.15); }
.pj-block:first-of-type { border-top: 0; }
.pj-block ul.text li { margin-bottom: 6px; }
.pj-hl { color: #FFFF12; }
.pj-cta { padding: 30px 0 50px; }
.pj-cta .btn { margin: 0 10px 12px 0; }

/* ---------- mock frame ---------- */
.pj-mock { --c: #6561ab; --soft: #f4f5f9; --ink: #1b1d24; --muted: #6b7080; --line: #e3e5ec;
           position: relative; width: 100%; max-width: 380px; margin: 10px auto 30px; padding: 20px;
           background: var(--soft); color: var(--ink); border-radius: 28px; display: grid; gap: 10px;
           font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 14px;
           line-height: 1.35; text-align: left; box-shadow: 0 24px 48px rgba(10, 8, 40, .30); }
/* the site styles force uppercase + monospace on text: mocks must look like the real apps */
.pj-mock, .pj-mock * { box-sizing: border-box; text-transform: none !important; letter-spacing: normal !important;
                       font-family: inherit !important; }
.pj-mock { font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; }
.pj-mock .fa { font-family: FontAwesome !important; }
.pj-onair strong { display: block; }
.pj-mock small { display: block; color: var(--muted); font-size: 12px; }
.pj-mock strong { font-weight: 700; }
.pj-mock .fa { color: var(--c); }
.pj-dark { --soft: #212327; --ink: #f4f3f1; --muted: #9aa0a8; --line: #34373d; }

.pj-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 0 4px; }
.pj-head b { font-size: 16px; }
.pj-head span { font-size: 12px; color: var(--muted); }
.pj-brandbar { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 17px; padding: 0 4px; }
.pj-brandbar i { font-size: 18px; }
.pj-brandbar span { margin-left: auto; font-weight: 400; font-size: 12px; color: var(--muted); }

/* white card row with coloured left edge */
.pj-row { display: flex; align-items: center; gap: 12px; background: #fff; color: #1b1d24; border-radius: 14px;
          padding: 10px 14px; border-left: 5px solid var(--k, var(--c)); box-shadow: 0 4px 12px rgba(17,24,39,.06); }
.pj-dark .pj-row { background: #2c2f35; color: var(--ink); box-shadow: none; }
.pj-row > span:not(.pj-tick):not(.pj-ico):not(.pj-badge):not(.pj-price) { flex: 1; min-width: 0; }
.pj-row strong { display: block; }
.pj-tick { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); flex: none; }
.pj-done .pj-tick { background: var(--c); border-color: var(--c); }
.pj-done strong { text-decoration: line-through; color: var(--muted); }
.pj-ico { width: 38px; height: 38px; border-radius: 12px; flex: none; display: grid; place-items: center;
          background: var(--soft); font-size: 17px; }
.pj-ico .fa { color: var(--k, var(--c)); }
.pj-badge { flex: none; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 9px;
            background: var(--c); color: #fff; }
.pj-badge.pj-red { background: #e5392d; }
.pj-badge.pj-green { background: #1faf6e; }
.pj-price { flex: none; font-weight: 800; color: var(--c); }

.pj-note { text-align: center; font-size: 12px; color: var(--muted); border-top: 1px dashed var(--line);
           border-bottom: 1px dashed var(--line); padding: 5px 0; }
.pj-arrow { text-align: center; font-weight: 700; font-size: 13px; color: var(--c); }
.pj-btn { display: block; text-align: center; font-weight: 700; border-radius: 999px; padding: 10px 14px;
          background: var(--c); color: #fff; }
.pj-btn-ghost { background: #fff; color: var(--c); border: 2px solid var(--c); }
.pj-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pj-chip { font-size: 12px; font-weight: 600; border-radius: 999px; padding: 4px 10px; background: #fff;
           color: var(--ink); border: 1px solid var(--line); }
.pj-chip.on { background: var(--c); color: #fff; border-color: var(--c); }
.pj-dark .pj-chip { background: #2c2f35; }

/* chat bubbles */
.pj-msg { max-width: 85%; border-radius: 16px; padding: 9px 12px; background: #fff; color: #1b1d24;
          box-shadow: 0 3px 10px rgba(17,24,39,.06); }
.pj-msg.me { justify-self: end; background: var(--c); color: #fff; border-bottom-right-radius: 4px; }
.pj-msg.them { border-bottom-left-radius: 4px; }

/* voice note bubble */
.pj-voice { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 999px; padding: 7px 14px 7px 7px;
            box-shadow: 0 6px 18px rgba(17,24,39,.08); }
.pj-mic { width: 36px; height: 36px; border-radius: 50%; background: var(--c); display: grid; place-items: center; flex: none; }
.pj-mic .fa { color: #fff; }
.pj-wave { display: flex; align-items: center; gap: 3px; flex: 1; }
.pj-wave i { display: block; width: 4px; border-radius: 2px; background: var(--c); }
.pj-quote { font-style: italic; margin: 2px 6px; }

/* product card grid (shop) */
.pj-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pj-prod { background: #fff; border-radius: 14px; padding: 10px; box-shadow: 0 4px 12px rgba(17,24,39,.06); }
.pj-pack { height: 70px; border-radius: 10px; margin-bottom: 8px; display: grid; place-items: center;
           background: linear-gradient(160deg, var(--k, #dfe8f5), #fff); }
.pj-pack i { display: block; width: 26px; height: 52px; border-radius: 6px 6px 4px 4px; background: var(--k2, #0b2e6b); }
.pj-prod strong { display: block; font-size: 13px; }
.pj-prod .pj-price { display: block; margin-top: 4px; }
.pj-search { display: flex; align-items: center; gap: 8px; background: #fff; border: 2px solid var(--c2, var(--c));
             border-radius: 10px; padding: 8px 12px; color: var(--muted); }

/* map (CycleStop) */
.pj-map { position: relative; height: 190px; border-radius: 18px; overflow: hidden;
          background:
            linear-gradient(90deg, transparent 47%, #fff 47%, #fff 53%, transparent 53%),
            linear-gradient(0deg, transparent 40%, #fff 40%, #fff 46%, transparent 46%),
            linear-gradient(28deg, transparent 62%, #fff 62%, #fff 66%, transparent 66%),
            linear-gradient(-35deg, transparent 20%, #d9efe2 20%, #d9efe2 34%, transparent 34%),
            #e9ebe4; }
.pj-pin { position: absolute; width: 30px; height: 30px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
          background: var(--k, var(--c)); box-shadow: 0 4px 10px rgba(0,0,0,.2); }
.pj-pin::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #fff; }
.pj-me { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #2f9be0;
         border: 3px solid #fff; box-shadow: 0 0 0 8px rgba(47,155,224,.25); }
.pj-sos { position: absolute; right: 12px; bottom: 12px; width: 52px; height: 52px; border-radius: 50%;
          background: var(--c); color: #fff; font-weight: 800; display: grid; place-items: center; font-size: 13px;
          box-shadow: 0 8px 18px rgba(0,0,0,.25); }

/* radio console */
.pj-onair { display: flex; gap: 12px; align-items: center; background: #2c2f35; border-radius: 16px; padding: 12px; }
.pj-cover { width: 64px; height: 64px; border-radius: 10px; flex: none;
            background: linear-gradient(135deg, var(--c), #7d27fc); }
.pj-cover.alt { background: linear-gradient(135deg, #f2b33d, #e5392d); }
.pj-live { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .08em; color: #fff;
           background: var(--c); border-radius: 4px; padding: 2px 6px; margin-bottom: 4px; }
.pj-bar { height: 5px; border-radius: 3px; background: #3a3d44; margin-top: 8px; overflow: hidden; }
.pj-bar i { display: block; height: 100%; width: var(--p, 40%); background: var(--c); }
.pj-cal { display: grid; grid-template-columns: 34px 1fr; gap: 6px 8px; align-items: stretch; }
.pj-cal small { padding-top: 7px; }
.pj-slot { border-radius: 10px; padding: 7px 10px; font-weight: 600; color: #fff; background: var(--k, var(--c)); }
.pj-slot small { color: rgba(255,255,255,.8); padding: 0; }
.pj-code { font-family: Menlo, Consolas, monospace; font-size: 12px; background: #16171a; color: #d8dbe0;
           border-radius: 12px; padding: 12px; white-space: pre; overflow: hidden; }
.pj-code b { color: #f2b33d; font-weight: 400; }
.pj-code em { color: #7fd1a3; font-style: normal; }

/* QR */
.pj-qr { width: 120px; height: 120px; margin: 4px auto; border-radius: 10px; background:
          repeating-linear-gradient(90deg, #1b1d24 0 8px, transparent 8px 14px, #1b1d24 14px 18px, transparent 18px 26px),
          repeating-linear-gradient(0deg, #fff 0 6px, transparent 6px 12px), #1b1d24;
         border: 10px solid #fff; box-shadow: 0 4px 12px rgba(17,24,39,.1); }
.pj-stamps { display: flex; gap: 6px; justify-content: center; }
.pj-stamps i { width: 22px; height: 22px; border-radius: 50%; border: 2px dashed var(--c); }
.pj-stamps i.on { background: var(--c); border-style: solid; }

@media (max-width: 767px) {
  .pj-intro { margin-top: 70px; }
  .pj-mock { max-width: 340px; }
}

/* ===================== project pages v2: shared base ===================== */
/* .pg wraps each page's own design; it neutralises the site-wide rules
   (uppercase, monospace body, h1 unset, purple background). */
.pg, .pg * { text-transform: none; letter-spacing: normal; }
.pg { position: relative; overflow: hidden; -webkit-font-smoothing: antialiased; }
.pg h1, .pg h2, .pg h3 { margin: 0 !important; }
.pg p { font-size: inherit; margin: 0 0 1em; }
.pg a { text-decoration: none; }
.pg img { max-width: 100%; height: auto; }
.pg-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.pg-anim [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.pg-anim [data-reveal].is-in { opacity: 1; transform: none; }
.pg-anim [data-reveal="2"] { transition-delay: .12s; }
.pg-anim [data-reveal="3"] { transition-delay: .24s; }
.pg-anim [data-reveal="4"] { transition-delay: .36s; }
@media (max-width: 767px) { .pg-wrap { padding: 0 16px; } }
/* the site forces IBM Plex (with !important) on h2–h6: each page sets --pg-display */
.pg h1, .pg h2, .pg h3, .pg h4 { font-family: var(--pg-display, inherit) !important; }