/* ===================== Projetos — case study ===================== */
:root{
  --tutu-navy:#0c1a2c;
  --tutu-navy-2:#12263d;
  --tutu-panel:#0f2237;
  --tutu-amber:#f6c87a;
  --tutu-amber-deep:#e0a94e;
  --tutu-line:#1e3a55;
}
.pr-main{ padding-top:var(--nav-h); }

/* back link in nav */
.nav .back{ font-family:'Space Mono',monospace; font-size:13.5px; color:var(--ink-soft); display:inline-flex; align-items:center; gap:8px; transition:.2s; }
.nav .back:hover{ color:var(--coral); gap:12px; }

/* ---------- page intro ---------- */
.pr-intro{ padding:80px 0 30px; }
.pr-index{ display:flex; align-items:center; gap:14px; font-family:'Space Mono',monospace; font-size:13px; color:var(--ink-faint); letter-spacing:.04em; margin-bottom:30px; }
.pr-index .ln{ flex:1; height:1.5px; background:var(--line); }
.pr-title{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:clamp(56px,9vw,120px); letter-spacing:-.04em; line-height:.86; }
.pr-title .c{ color:var(--coral); }
.pr-headrow{ display:flex; align-items:flex-end; justify-content:space-between; gap:40px; flex-wrap:wrap; margin-top:18px; }
.pr-client{ font-family:'Space Mono',monospace; font-size:15px; color:var(--ink-soft); display:flex; align-items:center; gap:12px; }
.pr-client b{ color:var(--coral); font-weight:700; }
.pr-tags{ display:flex; flex-wrap:wrap; gap:9px; }
.pr-tag{ font-family:'Space Mono',monospace; font-size:12.5px; padding:7px 14px; border:1.5px solid var(--ink); border-radius:30px; }
.pr-tag.solid{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* lead paragraph */
.pr-lead{ font-size:clamp(21px,2.4vw,29px); line-height:1.42; font-weight:500; letter-spacing:-.01em; max-width:880px; margin-top:46px; }
.pr-lead .hl{ color:var(--coral); }

/* meta strip */
.pr-meta{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:54px; border-top:1.5px solid var(--line); border-bottom:1.5px solid var(--line); padding:28px 0; }
.pr-meta .m .k{ font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); }
.pr-meta .m .v{ font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:19px; margin-top:8px; letter-spacing:-.01em; }

/* ---------- hero showcase (dark, like the product) ---------- */
.pr-showcase{ background:var(--tutu-navy); padding:80px 0; position:relative; overflow:hidden; }
.pr-showcase::before{ content:''; position:absolute; inset:0; background-image:radial-gradient(circle at 20% 0%, rgba(246,200,122,.10), transparent 45%); }
.pr-showcase .wrap{ position:relative; }
.pr-showcase-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:40px; flex-wrap:wrap; }
.pr-showcase-head .eyebrow{ color:var(--tutu-amber); }
.pr-showcase-head .eyebrow::before{ background:var(--tutu-amber); }
.pr-showcase-head h2{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:clamp(30px,4vw,46px); letter-spacing:-.025em; color:#fff; margin-top:16px; line-height:1; }
.pr-showcase-head p{ font-size:15.5px; color:#9fb2c6; max-width:330px; line-height:1.55; }

/* browser frame */
.browser{ border-radius:16px; overflow:hidden; box-shadow:0 40px 90px -30px rgba(0,0,0,.7); border:1px solid rgba(255,255,255,.08); background:#0a1626; }
.browser-bar{ display:flex; align-items:center; gap:8px; padding:13px 18px; background:#0a1626; border-bottom:1px solid rgba(255,255,255,.06); }
.browser-dots{ display:flex; gap:7px; }
.browser-dots i{ width:12px; height:12px; border-radius:50%; display:block; }
.browser-dots i:nth-child(1){ background:#ff5f57; }
.browser-dots i:nth-child(2){ background:#febc2e; }
.browser-dots i:nth-child(3){ background:#28c840; }
.browser-url{ flex:1; margin-left:14px; background:rgba(255,255,255,.06); border-radius:8px; padding:7px 14px; font-family:'Space Mono',monospace; font-size:12.5px; color:#8ba0b6; display:flex; align-items:center; gap:8px; }
.browser-url .lock{ width:11px; height:11px; opacity:.6; }
.browser img{ display:block; width:100%; }

/* ---------- feature rows ---------- */
.pr-feats{ background:var(--paper); padding:120px 0; }
.feat-row{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; padding:70px 0; border-top:1.5px solid var(--line); }
.feat-row:first-of-type{ border-top:0; }
.feat-row.flip .feat-text{ order:2; }
.feat-num{ font-family:'Space Mono',monospace; font-size:13px; color:var(--coral); letter-spacing:.1em; }
.feat-text h3{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:clamp(28px,3.6vw,42px); letter-spacing:-.025em; line-height:1.02; margin:16px 0 18px; }
.feat-text h3 .c{ color:var(--coral); }
.feat-text p{ font-size:16.5px; line-height:1.65; color:var(--ink-soft); max-width:460px; }
.feat-text p+p{ margin-top:14px; }
.feat-points{ list-style:none; margin-top:24px; display:flex; flex-direction:column; gap:12px; }
.feat-points li{ font-size:15.5px; color:var(--ink); display:flex; gap:13px; align-items:flex-start; line-height:1.45; }
.feat-points li svg{ width:20px; height:20px; color:var(--coral); flex:none; margin-top:1px; }

/* shot wrapper (web) */
.shot{ border-radius:14px; overflow:hidden; border:1px solid var(--line); box-shadow:0 30px 60px -28px rgba(28,24,21,.4); background:#0a1626; transition:transform .4s cubic-bezier(.2,.7,.2,1); }
.shot:hover{ transform:translateY(-6px); }
.shot.framed{ border-radius:16px; }
.shot .browser-bar{ background:#0a1626; }
.shot img{ display:block; width:100%; }

/* phone frame (whatsapp) */
.phone-wrap{ display:flex; justify-content:center; }
.phone{ width:300px; max-width:100%; background:#111; border-radius:42px; padding:11px; box-shadow:0 40px 80px -30px rgba(28,24,21,.55); border:1px solid #2a2a2a; position:relative; }
.phone::before{ content:''; position:absolute; top:20px; left:50%; transform:translateX(-50%); width:110px; height:26px; background:#111; border-radius:0 0 16px 16px; z-index:3; }
.phone-screen{ border-radius:32px; overflow:hidden; background:#0b141a; }
.phone-screen img{ display:block; width:100%; }

/* whatsapp feature block bg */
.pr-whats{ background:var(--tutu-navy); padding:110px 0; position:relative; overflow:hidden; }
.pr-whats::before{ content:''; position:absolute; inset:0; background-image:radial-gradient(circle at 85% 20%, rgba(37,211,102,.10), transparent 42%); }
.pr-whats .wrap{ position:relative; display:grid; grid-template-columns:1.1fr .9fr; gap:70px; align-items:center; }
.pr-whats .feat-num{ color:var(--tutu-amber); }
.pr-whats h3{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:clamp(30px,4.2vw,50px); letter-spacing:-.03em; line-height:1; color:#fff; margin:16px 0 22px; }
.pr-whats h3 .g{ color:#25d366; }
.pr-whats p{ font-size:17px; line-height:1.65; color:#9fb2c6; max-width:480px; }
.pr-whats p+p{ margin-top:14px; }
.pr-whats .feat-points li{ color:#dce6f0; }
.pr-whats .feat-points li svg{ color:#25d366; }
.wa-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.wa-chip{ font-family:'Space Mono',monospace; font-size:13px; color:#cfe9d8; background:rgba(37,211,102,.12); border:1px solid rgba(37,211,102,.3); padding:8px 15px; border-radius:30px; }

/* ---------- gallery ---------- */
.pr-gallery{ background:var(--panel); padding:110px 0; }
.gal-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:54px; }
.gal-item{ border-radius:14px; overflow:hidden; border:1px solid var(--line); background:#0a1626; box-shadow:0 20px 44px -24px rgba(28,24,21,.35); transition:transform .35s cubic-bezier(.2,.7,.2,1); }
.gal-item:hover{ transform:translateY(-5px); }
.gal-item img{ display:block; width:100%; }
.gal-cap{ padding:16px 20px; display:flex; align-items:center; justify-content:space-between; gap:14px; background:var(--card); border-top:1px solid var(--line); }
.gal-cap .t{ font-weight:600; font-size:15px; }
.gal-cap .n{ font-family:'Space Mono',monospace; font-size:12px; color:var(--ink-faint); }

/* ---------- next / cta ---------- */
.pr-next{ background:var(--ink); color:var(--paper); padding:110px 0; text-align:center; }
.pr-next .eyebrow{ color:var(--coral); justify-content:center; }
.pr-next h2{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:clamp(38px,6vw,72px); letter-spacing:-.03em; line-height:.95; margin:22px 0 32px; }
.pr-next h2 .c{ color:var(--coral); }
.pr-next-btns{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.pr-btn{ display:inline-flex; align-items:center; gap:11px; font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:18px; padding:16px 30px; border-radius:50px; transition:.25s; }
.pr-btn.primary{ background:var(--coral); color:#fff; }
.pr-btn.primary:hover{ background:#fff; color:var(--ink); transform:translateY(-2px); }
.pr-btn.ghost{ border:1.5px solid #3a342e; color:#fff; }
.pr-btn.ghost:hover{ border-color:var(--coral); transform:translateY(-2px); }

/* reveal reuse from site.css (.rv) */

@media (max-width:980px){
  .pr-meta{ grid-template-columns:repeat(2,1fr); gap:28px 24px; }
  .feat-row{ grid-template-columns:1fr; gap:38px; padding:54px 0; }
  .feat-row.flip .feat-text{ order:0; }
  .pr-whats .wrap{ grid-template-columns:1fr; gap:48px; }
  .gal-grid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .pr-meta{ grid-template-columns:1fr 1fr; }
  .nav .back span.txt{ display:none; }
}