/* ==========================================================================
   Sistema compartilhado das páginas de case
   Valores lidos nó a nó do Figma Jb6w9GH2aN7mVVCQseu3n5,
   página PORTFOLIO - prototipo (Nega Nagô 277:5578 · Link Hub 277:4889)
   ========================================================================== */
:root{
  --page:#f1f1f1;
  --ink:#21262a; --ink-2:#323940; --body:#6a6e70; --soft:#4d5155; --muted:#778898;
  --line:#d5dadf; --line-2:#a4afba; --line-3:#c0c8d0;
  --tile:#fefefe; --shot-bg:#e9e9ea;
  --on-dark:#f1f1f1; --on-dark-2:#d5dadf; --on-dark-3:#babcbd;

  --wrap:1160px; --pad-x:120px;
  --r:16px; --r-lg:22px; --r-sm:14px; --r-xs:12px; --r-pill:999px;
  --sec-y:40px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--page);color:var(--ink);
  font-family:'Sora',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:700}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
.wrap{width:min(var(--wrap),100% - (var(--pad-x) * 2));margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:where(a,button,[tabindex]):focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:8px}
svg{display:block;flex:none}

/* ---------- tipografia ---------- */
.h1{font-weight:800;font-size:48px;line-height:1.1;color:var(--ink)}
.h2{font-weight:700;font-size:40px;line-height:1.1;color:var(--ink)}
.h2--xl{font-weight:800;font-size:64px}
.cit{font-weight:700;font-size:32px;line-height:1.22}
.num{font-weight:800;font-size:40px;line-height:1.1}
.t20{font-weight:700;font-size:20px;line-height:1.5}
.t18{font-weight:700;font-size:18px;line-height:1.5}
.t16{font-weight:700;font-size:16px;line-height:1.5}
.s16{font-weight:600;font-size:16px;line-height:1.5}
.s12{font-weight:600;font-size:12px;line-height:1.5}
.lead{font-weight:400;font-size:20px;line-height:1.5;color:var(--body)}
.intro{font-weight:400;font-size:18px;line-height:1.5;color:var(--soft)}
.p16{font-weight:400;font-size:16px;line-height:1.5;color:var(--body)}
.p14{font-weight:400;font-size:14px;line-height:1.5;color:var(--body)}
.p12{font-weight:400;font-size:12px;line-height:1.5;color:var(--body)}
.eyebrow{font-weight:700;font-size:14px;line-height:1.5;text-transform:uppercase;color:var(--muted)}
.lb{font-weight:700;font-size:12px;line-height:1.5;text-transform:uppercase;color:var(--ink-2)}
.idx{font-weight:700;font-size:12px;line-height:1}

/* ---------- estrutura ---------- */
.sec{padding-block:var(--sec-y);border-bottom:1px solid var(--line)}
.sec:last-of-type{border-bottom:0}
.stack{display:flex;flex-direction:column;gap:24px}
/* medidas do cabeçalho lidas do Figma (277:5023): título 900, apoio 820,
   com 14px entre o rótulo, o título e o texto */
.head{display:flex;flex-direction:column;gap:14px}
.head .h2{max-width:900px}
.head .lead,.head .intro{max-width:820px}
.col{display:flex;flex-direction:column;gap:14px;max-width:900px}

/* ---------- topo ---------- */
.topo{border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;
  background:rgba(241,241,241,.9);backdrop-filter:saturate(180%) blur(12px)}
.topo__in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:18px}
.topo__nome{font-weight:600;font-size:16px;color:var(--ink);white-space:nowrap}
.menu{display:flex;align-items:center;gap:22px;min-width:0;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.menu::-webkit-scrollbar{display:none}
.menu a{font-weight:400;font-size:14px;color:var(--body);white-space:nowrap;transition:color .15s}
.menu a:hover{color:var(--ink)}
main section[id]{scroll-margin-top:84px}

/* ---------- moldura de imagem ---------- */
.shot{background:var(--shot-bg);border:1px solid var(--line-3);border-radius:var(--r);
  overflow:hidden;display:flex;align-items:center;justify-content:center}
.shot--hero{border-color:var(--line-2);background:var(--line)}
/* No Figma toda imagem é scaleMode FILL e o retângulo cobre o frame inteiro
   (x=0, y=0, clipsContent). O padding do frame não recorta a imagem: ela vai
   de borda a borda e o excedente é cortado. */
.shot img{width:100%;height:100%;object-fit:cover;object-position:center}
.fig{display:flex;flex-direction:column;gap:10px}
.fig figcaption{font-weight:400;font-size:12px;line-height:1.5;color:var(--body)}
.ph{width:100%;height:100%;min-height:150px;background:
  repeating-linear-gradient(45deg,#e4e6e9 0 12px,#dee1e5 12px 24px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;text-align:center;padding:20px;color:var(--muted)}
.ph__f{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--ink);
  background:var(--tile);border:1px solid var(--line-2);border-radius:6px;padding:5px 9px;word-break:break-all}
.ph__d{font-size:12px;line-height:1.5;max-width:44ch}

/* ---------- cartões e grupos ---------- */
.card{background:var(--tile);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px}
.card--sm{border-radius:var(--r-sm)}
.painel{background:var(--ink);border-radius:var(--r-lg);padding:38px;color:var(--on-dark)}
.painel .h2,.painel .cit,.painel .t18,.painel .t20{color:var(--on-dark)}
.painel .p16,.painel .p14,.painel .lead{color:var(--on-dark-2)}
.painel .eyebrow{color:var(--muted)}

/* ficha técnica: fio de 1px entre itens */
.ficha{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line-2);
  border:1px solid var(--line-2);border-radius:var(--r-sm);overflow:hidden}
.ficha__i{display:flex;flex-direction:column;gap:8px;padding:18px 20px;background:var(--page)}
.ficha__v{font-weight:600;font-size:16px;line-height:1.5;color:var(--ink);white-space:pre-line}

/* nbox */
.nboxes{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.nbox{display:flex;flex-direction:column;gap:10px;padding:24px 22px;border-radius:var(--r-sm)}
.nbox__d{font-weight:400;font-size:14px;line-height:1.5}

/* antes / depois */
.ad{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.ad__col{display:flex;flex-direction:column;gap:18px;padding:28px;
  background:var(--tile);border:1px solid var(--line);border-radius:var(--r-lg)}
.passos{display:flex;flex-direction:column}
.passo{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;padding-block:10px}
.passo__n{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;flex:none;
  background:var(--line);color:var(--soft);font-weight:700;font-size:12px;line-height:1}
.ad__col--dep .passo__n{background:var(--ink);color:var(--on-dark)}
.passo p{font-weight:400;font-size:16px;line-height:1.5;color:var(--body)}
.ad__nota{font-weight:400;font-size:14px;line-height:1.5;color:var(--soft)}

/* tabela com fio */
.tab{background:var(--tile);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.tab__l{display:grid;gap:0;border-bottom:1px solid var(--line-3)}
.tab__l:last-child{border-bottom:0}
.tab__c{padding:22px 24px;border-right:1px solid var(--line-3)}
.tab__c:last-child{border-right:0}

/* chips */
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.chip{padding:6px 13px;border-radius:var(--r-pill);background:var(--tile);
  border:1px solid var(--line-2);font-weight:400;font-size:12px;line-height:1.5;color:var(--body)}
.seta{font-size:12px;color:var(--muted)}

/* botões */
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;border-radius:var(--r-pill);
  font-weight:600;font-size:16px;line-height:1.5;transition:opacity .15s,border-color .15s}
.btn--dark{background:var(--ink);color:var(--on-dark)}
.btn--dark:hover{opacity:.88}
.btn--light{background:var(--page);color:var(--ink)}
.btn--light:hover{opacity:.88}
.btn--ghost{background:transparent;color:var(--on-dark);border:1px solid var(--muted)}
.btn--ghost:hover{border-color:var(--on-dark-2)}

/* lista com fio */
.lista{display:flex;flex-direction:column}
.lista__i{display:grid;grid-template-columns:340px 1fr;gap:32px;padding-block:19px;
  border-bottom:1px solid var(--line)}
.lista__i:last-child{border-bottom:0}
.bullets{display:flex;flex-direction:column;gap:9px}
.bullet{display:grid;grid-template-columns:14px 1fr;gap:10px;align-items:start}
.bullet span:first-child{color:var(--muted)}
.bullet p{font-weight:400;font-size:14px;line-height:1.5;color:var(--body)}

/* ver mais + contato */
.projetos{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.projeto{background:var(--tile);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.projeto__capa{aspect-ratio:571/240;background:var(--line)}
.projeto__t{display:flex;flex-direction:column;gap:8px;padding:22px 24px 26px}
.contato{background:var(--ink);border-radius:28px;padding:40px 56px;color:var(--on-dark);
  display:flex;flex-direction:column;gap:36px;margin-block:var(--sec-y)}
/* o card é escuro: título e corpo precisam da cor clara, senão somem */
.contato .h2,.contato .t20,.contato .t18{color:var(--on-dark)}
.contato .lead,.contato .p16,.contato .p14{color:var(--on-dark-2)}
.disp{display:flex;align-items:center;gap:9px;padding-bottom:6px;margin-bottom:36px}
/* larguras lidas do frame Contato: título 820, parágrafo 700 */
.contato .h2--xl{max-width:820px}
.contato > .lead{max-width:700px}
.disp i{width:8px;height:8px;border-radius:50%;background:var(--on-dark-2);flex:none}
.disp span{font-weight:700;font-size:14px;line-height:1.5;text-transform:uppercase;color:var(--on-dark-2)}
.acoes{display:flex;flex-wrap:wrap;gap:12px;padding-top:22px}
.base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:36px;border-top:1px solid var(--on-dark-2)}
.base p{font-weight:400;font-size:12px;line-height:1.5;color:var(--on-dark-2)}
.toast{position:fixed;left:50%;bottom:28px;z-index:60;transform:translate(-50%,8px);
  background:var(--ink);color:var(--on-dark);padding:12px 20px;border-radius:var(--r-pill);
  font-size:14px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
  box-shadow:0 12px 32px -12px rgba(33,38,42,.5)}
.toast[data-show]{opacity:1;transform:translate(-50%,0)}

/* ==========================================================================
   RESPONSIVO — o Figma tem só o desktop 1400; abaixo disso é adaptação
   ========================================================================== */
@media (max-width:1399px){ :root{--pad-x:56px} }
@media (max-width:1279px){
  .lista__i{grid-template-columns:280px 1fr;gap:24px}
  .painel{padding:32px}
  .contato{padding:36px 40px}
}
@media (max-width:1023px){
  :root{--pad-x:40px;--sec-y:32px}
  .h1{font-size:38px}
  .h2{font-size:31px}
  .h2--xl{font-size:44px}
  .cit{font-size:26px}
  .ficha{grid-template-columns:repeat(3,1fr)}
  .nboxes{grid-template-columns:1fr 1fr}
  .ad{grid-template-columns:1fr}
  .lista__i{grid-template-columns:1fr;gap:8px}
  .projetos{grid-template-columns:1fr}
  .tab__l{grid-template-columns:1fr !important}
  .tab__c{border-right:0;border-bottom:1px solid var(--line-3);padding:16px 20px}
  .tab__c:last-child{border-bottom:0}
}
@media (max-width:767px){
  :root{--pad-x:20px;--sec-y:28px;--r:14px;--r-lg:18px}
  body{font-size:15px}
  .h1{font-size:29px;line-height:1.16}
  .h2{font-size:24px;line-height:1.18}
  .h2--xl{font-size:29px}
  .cit{font-size:21px}
  .num{font-size:31px}
  .t20{font-size:17px}
  .t18{font-size:16px}
  .lead{font-size:16.5px}
  .intro{font-size:16px}
  .p16{font-size:15px}
  .eyebrow{font-size:12px;line-height:1.4}

  .topo__in{flex-direction:column;align-items:flex-start;gap:8px;padding-block:12px}
  .topo__nome{font-size:14px}
  .menu{width:100%;gap:18px}
  .menu a{font-size:13.5px}
  main section[id]{scroll-margin-top:104px}

  .ficha{grid-template-columns:1fr 1fr}
  .ficha__i{padding:14px 16px;gap:6px}
  .ficha__i:last-child{grid-column:1 / -1}
  .ficha__v{font-size:14px}

  .nboxes{grid-template-columns:1fr 1fr;gap:10px}
  .nbox{padding:16px;gap:6px}
  .nbox__d{font-size:13px}
  .ad__col{padding:20px 18px;gap:14px}
  .card{padding:20px 18px}
  .painel{padding:24px 20px}
  .contato{padding:26px 20px;gap:26px;border-radius:20px}
  .acoes{padding-top:14px}
  .acoes .btn{width:100%;justify-content:center}
  .base{flex-direction:column;gap:6px;padding-top:22px}
  .projeto__t{padding:18px}
  .chip{font-size:11.5px;padding:5px 11px}
  .fig figcaption{font-size:12px}
  .ph{min-height:120px;padding:14px}
}
@media (max-width:400px){
  .nboxes{grid-template-columns:1fr}
  .ficha{grid-template-columns:1fr}
  .ficha__i:last-child{grid-column:auto}
}