/* =========================================================
   project.css - Componentes das paginas de projeto
   Cada projeto exposto a sua maneira (case study, diagrama,
   codigo, dashboard, topologia). Assenta em ds-tokens.css
   e reutiliza styles.css (nav, bg, footer, reveal, .ds-*).
   ========================================================= */

/* Sub-nav: voltar ao indice */
.nav__left{ display:flex; align-items:center; gap:clamp(14px,3vw,28px); }
.nav__back{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-2); transition:color .2s; }
.nav__back:hover{ color:var(--ink); }

/* Espaco para a nav fixa */
.proj{ padding-top:calc(var(--nav-h) + 8px); }

/* ---------- Cabecalho do projeto ---------- */
.proj-head{ padding:clamp(40px,6vh,72px) 0 clamp(28px,4vh,44px); border-bottom:1px solid var(--line); }
.proj-head__meta{ display:flex; align-items:center; gap:14px; margin-bottom:22px; flex-wrap:wrap; }
.proj-head__cat{ letter-spacing:.14em; }
.proj-head__row{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap; }
.proj-title{ font-size:clamp(44px,8vw,80px); line-height:.95; }
.proj-lead{ max-width:46ch; margin:0; }
.pbadge{ font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; font-weight:600; color:#06070c; background:var(--grad); padding:4px 10px; border-radius:999px; }

/* ---------- Seccoes ---------- */
.proj-section{ padding:clamp(40px,6vh,68px) 0; border-bottom:1px solid var(--line); }
.proj-section__head{ margin-bottom:32px; }
.proj-section__head .ds-kicker{ margin-bottom:14px; }

/* ---------- Showcase (grelha texto/visual) ---------- */
.showcase{ display:grid; gap:clamp(28px,4vw,40px); align-items:start; }
.showcase--2{ grid-template-columns:1.5fr 1fr; }
.showcase--center{ justify-items:center; }

/* ---------- Moldura de browser ---------- */
.pframe{ width:100%; border-radius:16px; overflow:hidden; border:1px solid var(--line); background:#05060a; box-shadow:var(--shadow); }
.pframe__bar{ display:flex; align-items:center; gap:8px; padding:11px 14px; border-bottom:1px solid var(--line); background:var(--bg-soft); }
.pframe__dot{ width:10px; height:10px; border-radius:50%; background:#2a2d3a; flex:0 0 auto; }
.pframe__url{ margin-left:10px; flex:1; height:22px; border-radius:6px; background:var(--bg-elev); display:flex; align-items:center; padding:0 10px; font-size:11px; color:var(--ink-3); }
.pframe__body{ position:relative; background:#05060a; }
.pframe__body img{ width:100%; display:block; }
.pframe__cap{ display:block; text-align:center; margin-top:12px; color:var(--ink-3); font-size:11px; }
.pframe{ transition:transform .2s ease, box-shadow .3s; }
.pframe img{ transition:transform .55s var(--ease); }
.pframe:hover{ box-shadow:0 36px 80px -34px color-mix(in srgb,var(--ac) 55%,rgba(0,0,0,.7)); }
.pframe:hover img{ transform:scale(1.03); }
.pcode{ transition:transform .2s ease; }

/* ---------- Telemovel ---------- */
.pphone{ width:240px; max-width:70vw; border-radius:30px; border:7px solid #111; background:#111; box-shadow:var(--shadow), 0 0 50px rgba(124,92,255,.18); overflow:hidden; }
.pphone img{ width:100%; display:block; border-radius:23px; }
.pphone__wrap{ display:flex; flex-direction:column; align-items:center; gap:16px; }
.pphone__ph{ height:420px; border-radius:23px; position:relative; display:flex; align-items:center; justify-content:center; background:repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 1px, transparent 1px 13px), linear-gradient(160deg,#0d0f18,#080910); }
.pphone__ph::before{ content:""; position:absolute; top:10px; left:50%; transform:translateX(-50%); width:48px; height:6px; border-radius:4px; background:#000; }
.pphone__lab{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; color:var(--ink-3); text-align:center; }
.pphone__mk{ position:absolute; bottom:14px; left:50%; transform:translateX(-50%); width:40px; height:4px; border-radius:2px; }
.phones{ display:flex; gap:22px; align-items:flex-start; }
.phones .pphone:nth-child(2){ margin-top:48px; }

/* ---------- Bloco de codigo ---------- */
.pcode{ border-radius:14px; overflow:hidden; border:1px solid var(--line); background:#05060a; box-shadow:var(--shadow); }
.pcode__bar{ display:flex; align-items:center; gap:8px; padding:11px 14px; border-bottom:1px solid var(--line); background:var(--bg-soft); }
.pcode__name{ margin-left:8px; color:var(--ink-3); }
.pcode pre{ margin:0; padding:22px 24px; font-family:var(--font-mono); font-size:13px; line-height:1.75; overflow-x:auto; }
.tok-kw{ color:var(--violet); }
.tok-ty{ color:var(--cyan); }
.tok-fn{ color:#ffb86b; }
.tok-cm{ color:var(--ink-3); }
.tok-tx{ color:var(--ink-2); }

/* ---------- Diagrama (caixas + setas) ---------- */
.diagram{ display:flex; align-items:center; gap:0; flex-wrap:wrap; }
.dbox{ flex:0 0 auto; min-width:140px; padding:16px 20px; border-radius:14px; border:1px solid var(--line); background:var(--bg-soft); text-align:center; }
.dbox--violet{ border-color:var(--violet); box-shadow:0 0 34px rgba(124,92,255,.22); }
.dbox--cyan{ border-color:var(--cyan); box-shadow:0 0 34px rgba(0,229,255,.22); }
.dbox--grow{ flex:1; }
.dbox__t{ font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--ink); }
.dbox__s{ font-family:var(--font-mono); font-size:10.5px; color:var(--ink-3); margin-top:6px; line-height:1.5; white-space:pre-line; }
.darrow{ flex:1; position:relative; height:1px; background:var(--line); min-width:54px; margin:0 6px; }
.darrow::after{ content:"\25B8"; position:absolute; right:-3px; top:-8px; color:var(--ink-3); font-size:12px; }
.darrow__l{ position:absolute; top:-19px; left:50%; transform:translateX(-50%); font-family:var(--font-mono); font-size:10px; color:var(--ink-3); white-space:nowrap; background:var(--bg); padding:0 6px; }
.dbox__chips{ display:flex; gap:10px; flex-wrap:wrap; max-width:520px; margin-top:14px; justify-content:center; }
.dnote{ display:inline-flex; align-items:center; gap:10px; margin-top:28px; padding:12px 18px; border:1px solid var(--line); border-radius:12px; background:var(--bg-soft); }

/* multi-ERP node graph */
.erp{ border:1px solid var(--line); border-radius:16px; padding:22px 24px; background:var(--bg-soft); max-width:460px; }
.erp__row{ display:flex; align-items:center; gap:14px; }
.erp__col{ display:flex; flex-direction:column; gap:8px; }
.erp__line{ flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--violet),var(--cyan)); position:relative; }
.erp__line span{ position:absolute; top:-7px; left:50%; transform:translateX(-50%); font-family:var(--font-mono); font-size:10px; color:var(--ink-3); background:var(--bg); padding:0 6px; }
.erp__node{ padding:12px 16px; border-radius:12px; border:1px solid var(--violet); font-family:var(--font-display); font-weight:700; color:var(--ink); box-shadow:var(--glow-violet); white-space:nowrap; }

/* ---------- Capacidades (o que construi) ---------- */
.caps{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.cap{ border:1px solid var(--line); border-radius:14px; padding:18px; background:var(--bg-soft); transition:border-color .25s, transform .25s var(--ease); }
.cap:hover{ border-color:color-mix(in srgb,var(--violet) 45%,transparent); transform:translateY(-3px); }
.cap__i{ font-size:18px; margin-bottom:10px; }
.cap__t{ font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--ink); margin-bottom:6px; }
.cap__d{ font-size:13px; color:var(--ink-2); line-height:1.5; }

/* ---------- Specs ---------- */
.pspecs{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,64px); }
.spec{ display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--line); }
.spec__k{ font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; color:var(--ink-3); flex:0 0 auto; }
.spec__v{ font-family:var(--font-body); font-size:14px; color:var(--ink); text-align:right; }

/* ---------- Pricing (PersonalFinances) ---------- */
.prices{ display:flex; gap:14px; align-items:stretch; flex-wrap:wrap; }
.price{ flex:1; min-width:170px; border-radius:16px; padding:22px 20px; background:var(--bg-soft); border:1px solid var(--line); position:relative; }
.price--reco{ border:2px solid var(--violet); box-shadow:0 20px 50px -24px rgba(124,92,255,.5); }
.price__tag{ position:absolute; top:-11px; left:20px; background:var(--violet); color:#fff; font-family:var(--font-mono); font-size:9px; letter-spacing:.1em; padding:4px 10px; border-radius:999px; }
.price__tier{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; color:var(--ink-3); margin-bottom:10px; }
.price__val{ font-family:var(--font-display); font-weight:800; font-size:34px; color:var(--ink); }
.price__val small{ font-size:13px; color:var(--ink-3); font-weight:500; }
.price__feats{ margin-top:14px; display:flex; flex-direction:column; gap:8px; }
.price__feats div{ display:flex; gap:8px; font-size:12.5px; color:var(--ink-2); }
.price__feats .ok{ color:#36d399; }

/* ---------- Grafico (PF analise) ---------- */
.chart{ border:1px solid var(--line); border-radius:14px; padding:18px 20px; background:var(--bg-soft); }
.chart__head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.chart__bars{ display:flex; align-items:flex-end; gap:14px; height:150px; padding:0 6px; border-bottom:1px solid var(--line); }
.chart__col{ flex:1; display:flex; gap:4px; align-items:flex-end; height:100%; }
.chart__col i{ flex:1; border-radius:4px 4px 0 0; display:block; }
.chart__g{ background:#36d399; }
.chart__r{ background:#ff6a6a; }
.chart__legend{ display:flex; gap:18px; margin-top:12px; font-size:11px; color:var(--ink-3); }
.chart__legend span{ display:inline-flex; align-items:center; gap:6px; }
.dotg,.dotr{ width:9px; height:9px; border-radius:3px; display:inline-block; }
.dotg{ background:#36d399; } .dotr{ background:#ff6a6a; }

/* ---------- Cards de produto (RevParts) ---------- */
.prodcards{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.prodcard{ border-radius:12px; overflow:hidden; border:1px solid var(--line); background:var(--bg-soft); }
.prodcard__thumb{ height:110px; position:relative; display:flex; align-items:center; justify-content:center; background:radial-gradient(120% 120% at 50% 0%, rgba(255,51,64,.22), transparent 60%), linear-gradient(160deg,#141417,#0b0b0e); }
.prodcard__glyph{ font-family:var(--font-display); font-weight:800; font-size:40px; color:var(--red); opacity:.9; }
.prodcard__code{ position:absolute; bottom:8px; font-family:var(--font-mono); font-size:9px; color:var(--ink-3); letter-spacing:.1em; }
.prodcard__body{ padding:12px 13px 14px; }
.prodcard__name{ font-size:13px; font-weight:600; color:var(--ink); margin-bottom:6px; line-height:1.2; }
.prodcard__stars{ color:#ffb020; font-size:11px; margin-bottom:8px; }
.prodcard__stars i{ color:var(--ink-3); font-style:normal; }
.prodcard__foot{ display:flex; align-items:center; justify-content:space-between; }
.prodcard__price{ font-family:var(--font-display); font-weight:800; font-size:16px; color:var(--red); }
.compat{ border:1px solid var(--line); border-radius:12px; padding:16px; background:var(--bg-soft); }
.compat__row{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:9px; border:1px solid var(--line); background:var(--bg-elev); }

/* ---------- Navegacao entre projetos ---------- */
.proj-nav{ display:flex; justify-content:space-between; gap:16px; padding:36px 0; flex-wrap:wrap; }
.proj-nav a{ display:inline-flex; flex-direction:column; gap:4px; color:var(--ink-2); transition:color .2s; max-width:46%; }
.proj-nav a:hover{ color:var(--ink); }
.proj-nav .pn-k{ font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--ink-3); }
.proj-nav .pn-t{ font-family:var(--font-display); font-weight:700; font-size:20px; }
.proj-nav .pn-next{ text-align:right; margin-left:auto; align-items:flex-end; }

/* link "Ver projeto" nas strips da home */
.strip__more{ display:inline-flex; align-items:center; gap:8px; margin-top:20px; font-family:var(--font-mono); font-size:13px; letter-spacing:.04em; color:var(--ac); transition:gap .25s var(--ease); }
.strip__more:hover{ gap:14px; }
.strip a.strip__cardlink{ color:inherit; text-decoration:none; }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .showcase--2{ grid-template-columns:1fr; }
  .caps{ grid-template-columns:repeat(2,1fr); }
  .pspecs{ grid-template-columns:1fr; gap:0; }
  .diagram{ flex-direction:column; align-items:stretch; }
  .diagram .dbox{ width:100%; }
  .darrow{ width:1px; height:36px; min-width:0; margin:10px auto; flex:0 0 auto; }
  .darrow::after{ content:"\25BE"; right:-6px; top:auto; bottom:-4px; }
  .darrow__l{ left:14px; top:50%; transform:translateY(-50%); }
  .prodcards{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .caps{ grid-template-columns:1fr; }
  .prodcards{ grid-template-columns:1fr 1fr; }
  .prices{ flex-direction:column; }
  .proj-nav a{ max-width:100%; }
}