/* projetos.css v2 — páginas de projetos.
   Usa tokens.css e style.css do site (os mesmos do ideias), sem alterá-los.
   Substitui o projetos.css atual. */
.hello h1{max-width:none}
.sec{display:flex;align-items:center;gap:var(--s3);font:700 .74rem var(--font-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--ink-2);margin:var(--s5) 0 var(--s3)}
.sec::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.sec b{color:var(--ink);font-weight:700}
.pill{color:var(--kt,var(--k))}
.pill.cheio{background:color-mix(in srgb,var(--k) 14%,transparent)}
.pill.cheio::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--k);margin-right:6px;vertical-align:1px}
.pill.vivo::before{animation:ping 1.6s infinite}

/* ---------- troca entre os dois sites ---------- */
.sw{display:inline-flex;padding:3px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);font:500 .78rem var(--font-mono)}
.sw a{padding:5px 12px;border-radius:var(--r-pill);color:var(--ink-2);text-decoration:none;transition:color var(--dur-fast),background var(--dur-fast)}
.sw a:hover{color:var(--ink)}
.sw a.on{background:var(--lime);color:var(--on-accent);font-weight:700}
@media(max-width:767px){.logo span{display:none}.logo{margin-right:0}.sw{margin-right:auto}header.reading .sw{display:none}}
@media(min-width:768px){.sw{margin-right:var(--s4)}.logo{margin-right:var(--s3)}}

/* ---------- fluxo: da ideia à entrega ---------- */
.pipe{display:flex;align-items:stretch;overflow-x:auto;padding:2px var(--gutter) var(--s3);margin-inline:calc(var(--gutter)*-1);scrollbar-width:none}
.pipe::-webkit-scrollbar{display:none}
.fstep{flex:1 0 128px;display:grid;gap:3px;align-content:start;text-align:left;text-decoration:none;color:inherit;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);cursor:pointer;transition:transform var(--dur) var(--ease-spring),border-color var(--dur),box-shadow var(--dur)}
.fstep b{font:700 1.7rem/1.05 var(--font-display);letter-spacing:-.02em}
.fstep span{font:600 .8rem var(--font-body)}
.fstep small{font:500 .64rem var(--font-mono);letter-spacing:.06em;color:var(--ink-2)}
.fstep i{display:block;height:3px;border-radius:2px;margin-top:8px;background:var(--k);transform-origin:left;animation:grow 1s var(--ease-out) both;animation-delay:calc(var(--i)*90ms)}
.fstep:hover{transform:translateY(-3px);border-color:var(--k)}
.fstep.on{border-color:var(--k);box-shadow:0 0 0 1px var(--k),0 14px 34px -18px var(--k)}
.fstep.zero b{color:var(--ink-2)}
.fstep.zero i{opacity:.3}
.fstep.fonte{border-style:dashed;background:transparent}
.fstep.fonte b{background:linear-gradient(90deg,var(--lime),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.fjoin{flex:0 0 22px;align-self:center;height:2px;background:repeating-linear-gradient(90deg,var(--ink-2) 0 4px,transparent 4px 9px);background-size:18px 100%;opacity:.55;animation:corre .9s linear infinite}
@keyframes corre{to{background-position:18px 0}}
.fora{margin-top:var(--s2)}

/* ---------- com você: o que espera uma decisão ---------- */
.att{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,1fr);gap:var(--s3);overflow-x:auto;padding:2px var(--gutter) var(--s2);margin-inline:calc(var(--gutter)*-1);scrollbar-width:none}
.att::-webkit-scrollbar{display:none}
.acard{display:grid;gap:4px;align-content:start;text-align:left;padding:12px 14px 12px 16px;border:1px solid color-mix(in srgb,var(--k) 40%,var(--line));border-left:3px solid var(--k);border-radius:var(--r-md);background:color-mix(in srgb,var(--k) 7%,var(--surface));cursor:pointer;transition:transform var(--dur) var(--ease-spring),box-shadow var(--dur)}
.acard:hover{transform:translateY(-3px);box-shadow:0 14px 30px -20px var(--k)}
.acard small{font:700 .68rem var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--kt,var(--k))}
.acard b{font:600 1rem/1.25 var(--font-display)}
.acard span{font-size:.84rem;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- barra da lista ---------- */
.lbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin:var(--s4) 0 0}
.lbar .meta{margin:0 auto 0 0}
.seg{display:inline-flex;padding:3px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface)}
.seg button{display:flex;align-items:center;gap:6px;padding:5px 10px;border:0;border-radius:6px;background:none;font:500 .76rem var(--font-mono);color:var(--ink-2)}
.seg button.on{background:var(--surface-2);color:var(--ink);font-weight:700}
.seg svg{width:14px;height:14px}

/* ---------- cartão do projeto ---------- */
@media(min-width:1180px){.pgrid{grid-template-columns:repeat(3,1fr)}}
.pcard{position:relative;overflow:hidden;cursor:pointer;text-align:left;animation:in var(--dur-slow) var(--ease-out) both;animation-delay:calc(var(--i,0)*40ms);transition:transform var(--dur) var(--ease-spring),border-color var(--dur),box-shadow var(--dur)}
.pcard::before{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--c) 16%,transparent),transparent 70%);opacity:0;transition:opacity var(--dur);pointer-events:none}
.pcard::after{content:"";position:absolute;left:0;top:0;height:2px;width:100%;background:var(--c);transform:scaleX(.12);transform-origin:left;transition:transform var(--dur-slow) var(--ease-out)}
.pcard:hover{transform:translateY(-4px);box-shadow:0 18px 44px -24px var(--c)}
.pcard:hover::before{opacity:1}
.pcard:hover::after{transform:scaleX(1)}
.pcard>*{position:relative}
.pcard:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.pcard .row{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s3);text-transform:none;letter-spacing:0}
.pcard h2{font:700 1.08rem/1.22 var(--font-display);letter-spacing:-.01em;color:var(--ink)}
.pcard .row em{font:700 .78rem var(--font-mono);font-style:normal;color:var(--ink-2);letter-spacing:.06em}
.pcard .row{align-items:center}
.presumo{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:.92rem;color:var(--ink-2)}
.pfoot{display:flex;align-items:center;gap:var(--s3);margin-top:auto;padding-top:var(--s3);border-top:1px dashed var(--line);font:500 .74rem var(--font-mono);color:var(--ink-2)}
.pfoot .ibar{flex:0 0 64px}
.fresco{margin-left:auto;display:flex;align-items:center;gap:6px;white-space:nowrap}
.fresco::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--f)}

/* três trilhos: execução, evidência e decisão nunca se misturam */
.gates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.gate{display:grid;gap:2px;min-width:0;padding:7px 9px 8px;border-radius:var(--r-sm);border-top:2px solid var(--k);background:color-mix(in srgb,var(--k) 8%,transparent)}
.gate small{font:500 .62rem var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2)}
.gate b{font:600 .76rem var(--font-mono);color:var(--kt,var(--k));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ideias ligadas: quanto já virou realidade */
.ibar{display:flex;height:6px;border-radius:3px;overflow:hidden;background:var(--line)}
.ibar i{display:block;background:var(--k);transition:flex-grow var(--dur-slow) var(--ease-out)}
.ibar i+i{margin-left:1px}

/* ---------- quadro ---------- */
.kanban{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(272px,1fr);gap:var(--s4);align-items:start;overflow-x:auto;padding:var(--s4) var(--gutter) var(--s4);margin-inline:calc(var(--gutter)*-1);scroll-snap-type:x proximity}
.bcol{display:grid;gap:var(--s3);align-content:start;scroll-snap-align:start;min-width:0}
.bcol h3{display:flex;align-items:center;gap:8px;font:700 .74rem var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2);padding-bottom:var(--s2);border-bottom:2px solid var(--k)}
.bcol h3 span{margin-left:auto;color:var(--ink)}
.bcol .pcard{padding:var(--s4)}
.bcol .presumo{-webkit-line-clamp:2}
.bvazio{padding:var(--s5) var(--s3);border:1px dashed var(--line);border-radius:var(--r-md);text-align:center;font:500 .76rem var(--font-mono);color:var(--ink-2)}

/* ---------- página do projeto ---------- */
.dhead{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin:var(--s4) 0 var(--s2)}
.dhead h1{font-size:var(--fs-h2);margin-right:auto}
.dsub{font:500 .8rem var(--font-mono);color:var(--ink-2);display:flex;flex-wrap:wrap;gap:4px var(--s4)}
.banner{display:flex;gap:var(--s3);align-items:flex-start;margin-top:var(--s4);padding:12px 16px;border:1px solid var(--k);border-radius:var(--r-md);background:color-mix(in srgb,var(--k) 9%,transparent);animation:in var(--dur) var(--ease-out) both}
.banner b{font:700 .74rem var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--kt,var(--k));white-space:nowrap;padding-top:2px}
.trio{display:grid;gap:var(--s4);grid-template-columns:1fr;margin-top:var(--s4)}
@media(min-width:900px){.trio{grid-template-columns:repeat(3,minmax(0,1fr))}}
.panel{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3);min-width:0}
.panel h3{display:flex;align-items:center;gap:8px;font:700 .74rem var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2)}
.panel h3 span{margin-left:auto;color:var(--ink)}
.rail{border-top:3px solid var(--k);animation:in var(--dur-slow) var(--ease-out) both;animation-delay:calc(var(--i)*90ms)}
.rail .big{font:700 1.45rem/1.15 var(--font-display);letter-spacing:-.02em;color:var(--kt,var(--k))}
.rail p{font-size:.92rem;color:var(--ink-2);overflow-wrap:anywhere}
.rail p b{color:var(--ink);font-weight:600}
.rail .nota{margin-top:auto;padding-top:var(--s3);border-top:1px dashed var(--line);font:500 .74rem var(--font-mono)}
.passos{display:flex;align-items:center;gap:0;margin:2px 0}
.passos i{width:12px;height:12px;flex:none;border-radius:50%;border:2px solid var(--line);background:var(--surface)}
.passos i.ok{border-color:var(--k);background:var(--k)}
.passos i.aqui{border-color:var(--k);box-shadow:0 0 0 4px color-mix(in srgb,var(--k) 22%,transparent)}
.passos u{flex:1;height:2px;background:var(--line)}
.passos u.ok{background:var(--k)}
.dgrid{display:grid;gap:var(--s4);grid-template-columns:1fr;margin-top:var(--s4)}
@media(min-width:900px){.dgrid{grid-template-columns:3fr 2fr;align-items:start}}
.resumo{font-size:1.05rem;line-height:1.6;max-width:70ch}
.leg{display:flex;flex-wrap:wrap;gap:6px}
.leg button{display:flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--line);border-radius:var(--r-pill);background:none;font:500 .74rem var(--font-mono);color:var(--ink-2)}
.leg button::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--k)}
.leg button.on{border-color:var(--k);color:var(--ink);background:color-mix(in srgb,var(--k) 10%,transparent)}
.files{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.files a{display:flex;align-items:center;gap:var(--s3);padding:8px;border-radius:6px;text-decoration:none;color:inherit;font-size:.9rem;transition:background var(--dur-fast),transform var(--dur) var(--ease-spring)}
.files a:hover{background:color-mix(in srgb,var(--lime) 12%,transparent);transform:translateX(4px)}
.files a>span{min-width:0;overflow-wrap:anywhere}
.files em{margin-left:auto;font:500 .7rem var(--font-mono);font-style:normal;color:var(--kt,var(--ink-2));white-space:nowrap}
.files svg{width:16px;height:16px;flex:none;color:var(--ink-2)}
.files .mono{font:500 .84rem var(--font-mono)}
.plinks{margin-top:0}
.modelo{margin:0;padding:var(--s4);border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg-2);font:400 .82rem/1.7 var(--font-mono);overflow-x:auto}
.modelo span{color:var(--ink-2)}
.pnav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s3);margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--line)}
.pnav .btn span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:30ch}
#detail{padding-bottom:var(--s8)}
@media(max-width:767px){.gate b{font-size:.7rem}.pnav .btn{flex:1 1 100%}}