:root{
  --fundo:#FFFFFF;
  --tinta:#0A0A0A;
  --suave:#6E6E6E;
  --fio:rgba(10,10,10,.14);
  --roxo:#3B2F93;
  --rosa:#FF4A6B;
  --fonte:"Geist",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fundo);color:var(--tinta);font-family:var(--fonte);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit}
a{color:inherit}
img{max-width:100%;display:block}
.pagina{max-width:1520px;margin:0 auto;padding:0 32px}
:focus-visible{outline:2px solid var(--roxo);outline-offset:3px}

/* cabeçalho: nome à esquerda, menu à direita, igual em todas as páginas */
.topo{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--fio);flex:none}
.topo__marca{display:flex;align-items:center;gap:12px;min-width:0}
.topo__nome{font-weight:600;letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.menu{display:flex;gap:28px}
.menu a{font-size:15.5px;font-weight:500;text-decoration:none;padding:4px 0;border-bottom:1.5px solid transparent;white-space:nowrap}
.menu a:hover{color:var(--roxo)}
.menu a[aria-current="page"]{border-bottom-color:var(--tinta)}

/* páginas internas */
.interna{padding:28px 0 96px}
.trilha{display:flex;flex-wrap:wrap;gap:6px 8px;list-style:none;margin:0 0 36px;padding:0;font-size:14px;color:var(--suave)}
.trilha li + li::before{content:"/";margin-right:8px;color:var(--fio)}
.trilha a{text-decoration:none}
.trilha a:hover{color:var(--tinta);text-decoration:underline;text-underline-offset:3px}
.trilha [aria-current]{color:var(--tinta)}
.rotulo{display:block;font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--suave);margin-bottom:8px}
.interna h1{font-weight:500;font-size:clamp(2.2rem,4.4vw,3.6rem);line-height:1.04;letter-spacing:-.04em;margin:0;text-wrap:balance;max-width:22ch}
.chamada{font-size:1.2rem;line-height:1.5;color:var(--suave);margin:14px 0 0;max-width:46ch}
.interna h2{font-weight:500;font-size:1.35rem;letter-spacing:-.025em;line-height:1.2;margin:0 0 10px}
.voltar-link{display:inline-block;font-size:15px;font-weight:500;color:var(--roxo);text-decoration:none;margin-bottom:22px}
.voltar-link:hover{text-decoration:underline;text-underline-offset:3px}
.seta{font-size:15.5px;font-weight:500;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.seta:hover{color:var(--roxo)}

/* filtro por área, na página de trabalhos */
.filtro{display:flex;flex-wrap:wrap;gap:8px;margin:36px 0 28px;padding:0;list-style:none}
.filtro a{display:inline-block;border:1px solid var(--fio);border-radius:999px;padding:8px 15px;font-size:14.5px;font-weight:500;line-height:1.2;text-decoration:none}
.filtro a:hover{border-color:var(--tinta)}
.filtro a small{color:var(--suave);font-size:12px;margin-left:5px}
.filtro a[aria-current="page"]{background:var(--tinta);border-color:var(--tinta);color:var(--fundo)}
.filtro a[aria-current="page"] small{color:rgba(255,255,255,.7)}

.cartoes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.cartao{display:flex;flex-direction:column;height:100%;min-height:172px;border:1px solid var(--fio);border-radius:14px;padding:20px 20px 18px;text-decoration:none;transition:border-color .2s,transform .2s}
a.cartao:hover{border-color:var(--tinta);transform:translateY(-2px)}
.cartao strong{font-weight:600;font-size:1.12rem;line-height:1.25;letter-spacing:-.02em}
.cartao p{margin:8px 0 16px;font-size:15px;line-height:1.45;color:var(--suave)}
.cartao .areas{margin-top:auto;font-size:12.5px;color:var(--suave);line-height:1.4}
.cartao .ir{margin-top:10px;font-size:14px;font-weight:500;color:var(--roxo)}
.cartao.em-breve{border-style:dashed}

/* página de trabalho */
.ficha{display:grid;grid-template-columns:minmax(0,44rem) minmax(240px,1fr);gap:48px 72px;align-items:start;margin-top:40px}
.ficha section + section{margin-top:34px}
.ficha p{margin:0;max-width:60ch}
.telas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none}
.telas img{border:1px solid var(--fio);border-radius:14px}
.lateral{border-left:1px solid var(--fio);padding-left:28px}
.lateral section + section{margin-top:30px}
.etiquetas{display:flex;flex-wrap:wrap;gap:8px}
.etiqueta{display:inline-block;border:1px solid var(--roxo);color:var(--roxo);background:none;border-radius:999px;padding:6px 13px;font-size:14px;font-weight:500;cursor:pointer;line-height:1.2;text-decoration:none}
.etiqueta:hover{background:var(--roxo);color:var(--fundo)}
.vizinhos{list-style:none;margin:0;padding:0}
.vizinhos a{display:block;padding:8px 0;border-bottom:1px solid var(--fio);font-size:15px;font-weight:500;text-decoration:none}
.vizinhos a:hover{color:var(--roxo)}
.passos{display:flex;justify-content:space-between;gap:24px;border-top:1px solid var(--fio);margin-top:64px;padding-top:22px}
.passos a{text-decoration:none;max-width:46%}
.passos small{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--suave);margin-bottom:4px}
.passos span{font-weight:500;font-size:1.05rem;letter-spacing:-.015em}
.passos a:hover span{color:var(--roxo)}
.passos .prox{text-align:right;margin-left:auto}

/* página sobre */
.sobre{max-width:46rem}
.sobre h1{max-width:none;font-size:clamp(2rem,3.8vw,3.1rem)}
.sobre .texto{margin-top:30px;font-size:1.14rem;line-height:1.62}
.sobre .texto p{margin:0 0 1.15em}
.sobre .seta{display:inline-block;margin-top:12px}

.rodape{border-top:1px solid var(--fio);padding:22px 0 30px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;font-size:14px;color:var(--suave)}
.rodape a{text-decoration:none}
.rodape a:hover{color:var(--tinta);text-decoration:underline;text-underline-offset:3px}
.rodape nav{display:flex;gap:20px}

@media (max-width:899px){
  .ficha{grid-template-columns:1fr;gap:40px}
  .lateral{border-left:0;padding-left:0;border-top:1px solid var(--fio);padding-top:28px}
}
@media (max-width:759px){
  .pagina{padding:0 16px}
  .menu{gap:18px}
  .menu a{font-size:14.5px}
  .interna{padding:22px 0 72px}
  .trilha{margin-bottom:26px}
  .telas{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important;animation:none !important}
}