:root{
  /* Ideia: o projeto é um mostrador de relógio. Cada etapa é um trecho do aro, o ponteiro marca hoje.
     Topo escuro com o mostrador; o resto em creme, quieto, como a papelaria de um estúdio. */
  --ink:#0A0A0A;
  --paper:#FEF7EA;
  --orange:#F43217;
  --sand:#EFE4CF;
  --card:#FFFCF6;
  --muted:#7A7166;
  --line:rgba(10,10,10,.11);
  --cream-dim:rgba(254,247,234,.62);
  --cream-line:rgba(254,247,234,.14);
  --font:"Helvetica Neue",Helvetica,Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}
body{font-size:15px;line-height:1.5}
h1,h2,h3,h4{letter-spacing:-.03em;line-height:1.05;margin:0;text-wrap:balance;font-weight:700}
p{margin:0;text-wrap:pretty}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.num{font-variant-numeric:tabular-nums}
.hidden{display:none!important}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}

/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:11px 20px;font-size:14px;font-weight:500;border:1px solid var(--ink);background:transparent;color:var(--ink);text-decoration:none;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn.ink{background:var(--ink);color:var(--paper)}
.btn.ink:hover{background:var(--orange);border-color:var(--orange)}
.btn.orange{background:var(--orange);border-color:var(--orange);color:#fff}
.btn.orange:hover{background:var(--ink);border-color:var(--ink)}
.btn.light{border-color:rgba(254,247,234,.35);color:var(--paper)}
.btn.light:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn.sm{padding:7px 14px;font-size:13px}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.btn[disabled]:hover{background:transparent;color:var(--ink)}

.mark{display:flex;flex-direction:column;gap:5px;line-height:1}
.mark b{font-size:20px;letter-spacing:-.045em}
.mark span{font-size:12px;opacity:.6}

/* ======== LOGIN ======== */
.login{min-height:100vh;display:grid;grid-template-columns:1.2fr 1fr;background:var(--paper)}
.login-side{background:var(--ink);color:var(--paper);padding:36px 48px;display:flex;flex-direction:column;gap:44px;border-radius:0 36px 36px 0}
.login-side h1{font-size:clamp(40px,4.6vw,64px);letter-spacing:-.05em;max-width:12ch}
.login-side .lead{color:var(--cream-dim);font-size:16px;max-width:42ch;margin-top:18px}
.method{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:auto}
.method h4{font-size:13px;font-weight:500;color:var(--cream-dim);letter-spacing:0;margin-bottom:6px}
.method ol{list-style:none;margin:0;padding:0}
.method li{display:flex;gap:14px;align-items:baseline;padding:9px 0;border-top:1px solid var(--cream-line);font-size:15px;font-weight:500}
.method li span{font-size:12px;color:var(--orange);font-variant-numeric:tabular-nums;width:18px}
.login-main{display:flex;align-items:center;justify-content:center;padding:40px 32px}
.login-card{width:100%;max-width:380px;display:flex;flex-direction:column;gap:14px}
.login-card h2{font-size:30px;letter-spacing:-.04em}
.login-card .sub{color:var(--muted);font-size:14px;margin-top:-6px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:12px;font-weight:500;color:var(--muted)}
.field input,.field select,.field textarea{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px;width:100%}
.field textarea{resize:vertical;min-height:76px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink)}
.err{color:var(--orange);font-size:13px;min-height:18px}
.demo{border:1px dashed rgba(10,10,10,.25);border-radius:18px;padding:14px 16px;display:flex;flex-direction:column;gap:10px;font-size:13px;margin-top:8px}
.demo b{font-size:12px;color:var(--muted);font-weight:500}
.demo-row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.demo-row code{font-family:inherit;font-size:13px}

/* ======== PORTAL ======== */
.top-dark{background:var(--ink);color:var(--paper);border-radius:0 0 36px 36px;padding-bottom:40px}
.bar-top{display:flex;justify-content:space-between;align-items:center;padding:24px 0}
.hero{display:grid;grid-template-columns:1.25fr 1fr;gap:56px;align-items:end;padding:24px 0 48px}
.hello{font-size:15px;color:var(--orange);font-weight:500}
.hero h1{font-size:clamp(38px,5.2vw,68px);letter-spacing:-.05em;margin-top:14px;max-width:13ch}
.hero .desc{color:var(--cream-dim);font-size:16px;max-width:46ch;margin-top:18px}
.pbox{display:flex;flex-direction:column;gap:14px}
.pbox .lbl{font-size:13px;color:var(--cream-dim)}
.pct{font-size:clamp(72px,9vw,120px);font-weight:700;letter-spacing:-.06em;line-height:.85}
.pct small{font-size:.38em;color:var(--orange);letter-spacing:0;margin-left:4px}
.pmeta{display:flex;justify-content:space-between;font-size:12px;color:var(--cream-dim);gap:10px}
.segs{display:flex;gap:4px;margin-top:4px}
.seg-i{height:12px;border-radius:99px;background:rgba(254,247,234,.14);position:relative;overflow:hidden;min-width:10px}
.seg-i.concluida{background:var(--paper)}
.seg-i.andamento{background:rgba(244,50,23,.3)}
.seg-i.andamento i{position:absolute;left:0;top:0;bottom:0;background:var(--orange);border-radius:99px;width:0;transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.seg-n{display:flex;gap:4px}
.seg-n span{font-size:11px;color:rgba(254,247,234,.4);text-align:center;min-width:10px;font-variant-numeric:tabular-nums}
.seg-n span.andamento{color:var(--orange);font-weight:700}
.seg-n span.concluida{color:var(--paper)}
.now{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--cream-line);border-radius:22px;overflow:hidden;margin:0}
.now>div{background:#151413;padding:20px 22px;display:flex;flex-direction:column;gap:6px}
.now dt{font-size:12px;color:var(--cream-dim)}
.now dd{margin:0;font-size:20px;font-weight:700;letter-spacing:-.025em;line-height:1.15}
.now .when{font-size:13px;color:var(--cream-dim)}
.now .hl dd{color:var(--paper)}
.now .hl .when{color:var(--orange);font-weight:600}
.now .hl{background:#1d1a18}
.tabs-wrap{position:sticky;top:0;z-index:20;padding:14px 0;background:linear-gradient(var(--paper) 70%,rgba(254,247,234,0))}
.tabs{display:inline-flex;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:99px;padding:4px}
.tabs button{border:0;background:transparent;border-radius:99px;padding:8px 16px;font-size:13px;font-weight:500;color:var(--muted)}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-current="true"]{background:var(--ink);color:var(--paper)}

section.block{padding-top:44px;scroll-margin-top:70px}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.sec-head h2{font-size:clamp(30px,3.4vw,42px);letter-spacing:-.045em}
.sec-head p{color:var(--muted);margin-top:8px;max-width:52ch}

.tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;padding:4px 10px;border-radius:99px;white-space:nowrap;border:1px solid transparent;line-height:1.3}
.tag.concluida{background:var(--ink);color:var(--paper)}
.tag.andamento{background:var(--orange);color:#fff}
.tag.afazer{border-color:rgba(10,10,10,.3);color:var(--muted)}
.tag.entrega{background:var(--sand);color:var(--ink)}
.tag.entrega::before{content:"";width:6px;height:6px;background:var(--orange);transform:rotate(45deg);border-radius:1px}
.legend{display:flex;gap:6px;flex-wrap:wrap}

/* trilho de etapas */
.rail{position:relative;display:flex;flex-direction:column}
.phase-label{display:grid;grid-template-columns:48px 1fr;align-items:center;margin:8px 0 6px}
.phase-label span{grid-column:2;font-size:13px;font-weight:600;color:var(--muted)}
.rs{display:grid;grid-template-columns:48px 1fr;position:relative}
.rs::before{content:"";position:absolute;left:23px;top:0;bottom:0;width:2px;background:var(--line)}
.rs.concluida::before{background:var(--ink)}
.rs.first::before{top:26px}
.rs.last::before{bottom:calc(100% - 26px)}
.node{position:relative;z-index:1;width:48px;display:flex;justify-content:center;padding-top:16px}
.node i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;border:2px solid rgba(10,10,10,.25);background:var(--paper)}
.rs.concluida .node i{background:var(--ink);border-color:var(--ink)}
.rs.andamento .node i{border-color:var(--orange);background:var(--orange);box-shadow:0 0 0 6px rgba(244,50,23,.14)}
.rs-body{padding:12px 0 12px 8px;min-width:0}
.rs-line{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:6px 0}
.rs-line .n{font-size:13px;color:var(--muted);width:22px}
.rs-line h3{font-size:20px;letter-spacing:-.03em}
.rs.afazer .rs-line h3{color:rgba(10,10,10,.55)}
.rs-line .dates{font-size:13px;color:var(--muted);margin-left:auto}
.rs-line .open{margin-left:8px}
.rs-sub{font-size:14px;color:var(--muted);padding-left:36px;max-width:64ch}

.current{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:24px 26px;margin:6px 0 10px;display:grid;grid-template-columns:1fr 260px;gap:28px;box-shadow:0 1px 0 rgba(10,10,10,.04),0 18px 40px -28px rgba(10,10,10,.35)}
.current .top{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.current .top .n{font-size:13px;color:var(--orange);font-weight:600}
.current h3{font-size:30px;letter-spacing:-.045em;margin-top:10px}
.current .d{color:var(--muted);margin-top:8px;max-width:52ch}
.prog{margin-top:20px}
.prog-head{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:8px}
.prog-head b{color:var(--ink)}
.track{height:8px;border-radius:99px;background:var(--sand);overflow:hidden}
.track i{display:block;height:100%;background:var(--orange);border-radius:99px;width:0;transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.side{display:flex;flex-direction:column;gap:12px}
.box{border-radius:18px;padding:16px;background:var(--paper)}
.box small{font-size:12px;color:var(--muted);display:block}
.box b{display:block;font-size:16px;letter-spacing:-.02em;margin-top:4px;line-height:1.25}
.box.you{background:var(--ink);color:var(--paper)}
.box.you small{color:var(--cream-dim)}
.box.you b{font-weight:500;font-size:14px;letter-spacing:0;line-height:1.45}
.count{display:flex;align-items:baseline;gap:6px;margin-top:2px}
.count strong{font-size:40px;font-weight:300;letter-spacing:-.05em;line-height:1}
.count span{font-size:13px;color:var(--muted)}

/* cronograma */
.toggle{display:inline-flex;border:1px solid var(--line);border-radius:99px;padding:3px;background:var(--card)}
.toggle button{border:0;background:transparent;border-radius:99px;padding:7px 14px;font-size:13px;font-weight:500;color:var(--muted)}
.toggle button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.panel{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:22px}
.scroll-x{overflow-x:auto}
.gantt{min-width:820px;display:grid;grid-template-columns:150px 1fr}
.g-weeks{display:grid;padding-bottom:10px}
.g-weeks div{font-size:11px;color:var(--muted);padding-left:6px;border-left:1px solid var(--line)}
.g-weeks div b{display:block;color:var(--ink);font-weight:600}
.g-label{font-size:13px;font-weight:600;padding-right:12px;display:flex;align-items:center;min-height:46px;border-top:1px solid var(--line)}
.g-track{position:relative;min-height:46px;border-top:1px solid var(--line)}
.g-grid{position:absolute;inset:0;display:grid;pointer-events:none}
.g-grid div{border-left:1px solid rgba(10,10,10,.05)}
.g-bar{position:absolute;top:11px;height:24px;border-radius:99px;overflow:hidden;display:flex;align-items:center;font-size:11px;font-weight:600;padding:0 10px;white-space:nowrap}
.g-bar.concluida{background:var(--ink);color:var(--paper)}
.g-bar.andamento{background:rgba(244,50,23,.14);color:var(--ink)}
.g-bar.andamento i{position:absolute;left:0;top:0;bottom:0;background:var(--orange);border-radius:99px}
.g-bar.andamento span{position:relative;color:#fff}
.g-bar.afazer{border:1px dashed rgba(10,10,10,.35)}
.g-dia{position:absolute;top:17px;width:11px;height:11px;background:var(--orange);border-radius:2px;transform:translateX(-50%) rotate(45deg);box-shadow:0 0 0 2px var(--card)}
.g-today{position:absolute;top:0;bottom:0;width:2px;background:var(--orange);z-index:3;pointer-events:none}
.g-today.lbl::before{content:"Hoje";position:absolute;top:-24px;left:50%;transform:translateX(-50%);font-size:10px;font-weight:700;color:#fff;background:var(--orange);padding:2px 8px;border-radius:99px}
.cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:12px;flex-wrap:wrap}
.cal-head h3{font-size:22px}
.cal-nav{display:flex;gap:6px}
.cal-nav button{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:transparent;font-size:16px}
.cal-nav button:hover{background:var(--ink);color:var(--paper)}
.cal{min-width:640px;display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal .wd{font-size:12px;color:var(--muted);padding:4px 6px}
.cal .day{min-height:92px;border-radius:12px;background:var(--paper);padding:7px;display:flex;flex-direction:column;gap:3px;min-width:0}
.cal .day.out{opacity:.35}
.cal .day.today{box-shadow:inset 0 0 0 2px var(--orange)}
.cal .dn{font-size:12px;font-weight:600}
.cal .day.today .dn{color:var(--orange)}
.chip{font-size:10px;font-weight:600;padding:2px 7px;border-radius:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip.concluida{background:var(--ink);color:var(--paper)}
.chip.andamento{background:var(--orange);color:#fff}
.chip.afazer{border:1px dashed rgba(10,10,10,.35);color:var(--muted)}
.chip.entrega{background:var(--sand)}
.chip.entrega::before{content:"◆ ";color:var(--orange)}

/* arquivos */
.files{background:var(--card);border:1px solid var(--line);border-radius:24px;overflow:hidden}
.file{display:grid;grid-template-columns:44px 1fr auto;gap:16px;align-items:center;padding:16px 20px}
.file + .file{border-top:1px solid var(--line)}
.file .ic{width:44px;height:44px;border-radius:12px;background:var(--ink);display:grid;place-items:center}
.file.locked .ic{background:var(--sand)}
.file.locked h4{color:rgba(10,10,10,.5)}
.file h4{font-size:16px;letter-spacing:-.02em}
.file p{font-size:13px;color:var(--muted);margin-top:2px}
.file .lock{font-size:12px;color:var(--muted)}

.contact{margin-top:64px;background:var(--ink);color:var(--paper);border-radius:32px;padding:36px 40px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.contact h3{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.04em;max-width:18ch}
.contact p{color:var(--cream-dim);margin-top:8px}
footer{padding:28px 0 44px;font-size:12px;color:var(--muted);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* ======== ADMIN ======== */
.admin-top{background:var(--ink);color:var(--paper)}
.admin{display:grid;grid-template-columns:290px 1fr;gap:24px;padding:28px 0 64px;align-items:start}
.clients{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:12px;display:flex;flex-direction:column;gap:4px;position:sticky;top:16px}
.clients h3{font-size:13px;color:var(--muted);font-weight:600;padding:8px 10px;letter-spacing:0}
.ci{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:center;border:1px solid transparent;background:transparent;border-radius:16px;padding:10px;text-align:left}
.ci:hover{background:var(--paper)}
.ci[aria-current="true"]{background:var(--paper);border-color:var(--line)}
.ci b{font-size:14px;display:block;letter-spacing:-.01em}
.ci small{font-size:12px;color:var(--muted)}
.editor{display:flex;flex-direction:column;gap:16px;min-width:0}
.ed-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:4px 0 8px}
.ed-head h2{font-size:36px;letter-spacing:-.045em}
.ed-head .r{display:flex;gap:10px;align-items:center}
.saved{font-size:12px;color:var(--muted)}
.card{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:24px}
.card>h3{font-size:19px}
.card>.hint{font-size:13px;color:var(--muted);margin:4px 0 18px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid2 .full{grid-column:1/-1}
.access{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--paper);border-radius:16px;padding:14px 16px;margin-top:14px;font-size:13px}
.access span{color:var(--muted)}
.se{border:1px solid var(--line);border-radius:18px;background:#fff}
.se + .se{margin-top:8px}
.se.andamento{border-color:var(--orange)}
.se-row{display:grid;grid-template-columns:28px 1.2fr auto auto 36px;gap:12px;align-items:center;padding:12px 14px}
.se-row .n{font-size:13px;font-weight:600;color:var(--muted)}
.se-row .nm{border:0;background:transparent;font-weight:600;font-size:15px;padding:6px 8px;border-radius:10px;min-width:0;width:100%}
.se-row .nm:hover,.se-row .nm:focus{background:var(--paper);outline:none}
.se-row .dt{font-size:12px;color:var(--muted);white-space:nowrap}
.seg{display:inline-flex;background:var(--paper);border-radius:99px;padding:3px}
.seg button{border:0;background:transparent;border-radius:99px;padding:6px 11px;font-size:12px;font-weight:500;color:var(--muted);white-space:nowrap}
.seg button[aria-pressed="true"].concluida{background:var(--ink);color:var(--paper)}
.seg button[aria-pressed="true"].andamento{background:var(--orange);color:#fff}
.seg button[aria-pressed="true"].afazer{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(10,10,10,.3)}
.more{width:36px;height:36px;border-radius:12px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;transition:transform .2s}
.se.open .more{transform:rotate(180deg)}
.se-detail{display:none;padding:4px 14px 16px 54px;gap:12px;grid-template-columns:1fr 1fr 1fr}
.se.open .se-detail{display:grid}
.se-detail .full{grid-column:1/-1}
.se-detail .two{grid-column:span 2}
.se-detail .field input,.se-detail .field select,.se-detail .field textarea{padding:9px 11px;border-radius:12px;font-size:13px}
.se-detail .actions{grid-column:1/-1;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.linkdot{width:8px;height:8px;border-radius:50%;background:var(--orange);display:inline-block;margin-left:6px;vertical-align:middle}
.adv{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--ink);color:var(--paper);border-radius:20px;padding:16px 18px;margin-bottom:14px}
.adv p{font-size:14px}
.adv p b{color:var(--orange)}
.del{border:0;background:none;color:var(--muted);font-size:13px;text-decoration:underline}
.del:hover{color:var(--orange)}

/* modal */
.modal{position:fixed;inset:0;background:rgba(10,10,10,.6);display:grid;place-items:center;padding:20px;z-index:50}
.modal-box{background:var(--card);border-radius:28px;padding:28px;max-width:440px;width:100%;display:flex;flex-direction:column;gap:12px}
.modal-box h3{font-size:24px}
.modal-box p{color:var(--muted);font-size:14px;white-space:pre-line}
.modal-box .row{display:flex;justify-content:end;margin-top:6px}



@media (max-width:980px){
  .hero{grid-template-columns:1fr;gap:32px}
  .now{grid-template-columns:1fr}
  .login{grid-template-columns:1fr}
  .login-side{border-radius:0 0 30px 30px;padding:28px 20px}
  .current{grid-template-columns:1fr}
  .admin{grid-template-columns:1fr}
  .clients{position:static}
}
@media (max-width:640px){
  .wrap{padding:0 16px}
  .login-main{padding:32px 16px}
  .method{grid-template-columns:1fr;gap:16px}
  .top-dark{border-radius:0 0 26px 26px}
  .rs-line .dates{margin-left:36px;width:100%}
  .rs-line .open{margin-left:36px}
  .rs-sub{padding-left:36px}
  .current{padding:20px}
  .file{grid-template-columns:44px 1fr}
  .file>:last-child{grid-column:2}
  .contact{padding:28px 24px}
  .grid2{grid-template-columns:1fr}
  .se-row{grid-template-columns:24px 1fr 36px}
  .se-row .dt{grid-column:2}
  .se-row .seg{grid-column:2}
  .se-row .more{grid-row:1;grid-column:3}
  .se-detail{grid-template-columns:1fr;padding-left:14px}
  .se-detail .two{grid-column:auto}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* extras do app real */
.loading{min-height:100vh;display:grid;place-items:center;color:var(--muted);font-size:14px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:99px;font-size:13px;z-index:60;box-shadow:0 10px 30px -10px rgba(0,0,0,.4)}
.toast.err{background:var(--orange);color:#fff}
.modal-box form{display:flex;flex-direction:column;gap:12px}
.modal-box .row{gap:8px}
.copybox{background:var(--paper);border-radius:14px;padding:14px;font-size:14px;color:var(--ink);white-space:pre-line;line-height:1.5}
.danger{border:0;background:none;color:var(--muted);font-size:13px;text-decoration:underline;padding:0}
.danger:hover,.danger.armed{color:var(--orange)}
.btn.light.sm{white-space:nowrap}