/* =========================================================
   SHARED.CSS — chrome comum às páginas "palco" (index, about,
   trabalhos): tokens, reset, grão, cortina de transição, chip,
   cabeçalho (MENU/logo/CONTACT/THEME), rodapé e o painel CONTACT.
   Extraído porque as 3 páginas tinham essa parte inteira
   copiada e colada — qualquer ajuste aqui (ex: o bug do botão
   de fechar do CONTACT) agora vale pras três de uma vez.

   O que NÃO está aqui, de propósito: qualquer coisa específica
   de uma página só (intro da home, foto/abas do about, grid de
   trabalhos) — isso continua no <style> de cada arquivo.
   ========================================================= */
:root{
  --blue:#002F9E;
  --cream:#F6FAE3;
  --paper:#FFFFFF;

  --canvas:var(--blue);
  --ink:var(--paper);

  --font-mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", monospace;
  --font-menu:Helvetica, "Helvetica Neue", Arial, sans-serif;

  --fs-body:clamp(12px, 1.111vw, 19px);
  --fs-label:clamp(15px, 1.389vw, 24px);
  --fs-menu:clamp(17px, 1.667vw, 29px);
  --fs-title:clamp(26px, 2.778vw, 48px);
  --fs-hero:clamp(28px, 3.889vw, 56px);

  /* GRID — canvas do Figma: 1440 de largura. Até 1440 a página
     escala proporcional; acima disso trava em 1:1 com o Figma e o
     conteúdo fica centralizado (só a cor de fundo continua). */
  --page-max:1440px;
}

*{box-sizing:border-box}
html{ scroll-behavior:smooth }

/* Lenis (rolagem suave — assets/scripts/smooth-scroll.js) */
html.lenis, html.lenis body{ height:auto }
.lenis.lenis-smooth{ scroll-behavior:auto !important }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain }
.lenis.lenis-stopped{ overflow:hidden }
body{
  margin:0;
  background:var(--blue);
  color:var(--paper);
  font-family:var(--font-mono);
  overflow-x:hidden;
}

/* ---------- grão de filme — por cima de tudo ----------
   Gerado em canvas (preferences.js → filmGrain): ruído novo a ~12
   quadros/s, como película. Não desliza nem "sobe e desce": cada
   quadro é um sorteio diferente de grãos. Sem animação de movimento,
   só troca de quadro; com prefers-reduced-motion fica um quadro fixo. */
.grain{
  position:fixed; inset:0;
  z-index:9998;
  pointer-events:none;
  opacity:.16;
  mix-blend-mode:overlay;
}
.grain canvas{ display:block; width:100%; height:100%; image-rendering:auto }

/* ---------- page-transition: mancha pixelada entre páginas
   (assets/scripts/page-transition.js). Os painéis antigos só cobrem a
   página até o script trocá-los pelo canvas (evita "flash"). ---------- */
.page-transition{ position:fixed; inset:0; z-index:10000; pointer-events:none }
.page-transition.is-leaving, .page-transition.is-covered{ pointer-events:auto }
.page-transition__px{ position:absolute; inset:0; width:100%; height:100% }
.page-transition__label{
  position:absolute; margin:0;
  left:calc(50% - min(220px, 38vw)); top:calc(50% - 64px);
  display:flex; flex-direction:column; gap:2px;
  font-family:var(--font-mono); font-size:clamp(18px, 2vw, 28px); line-height:1.25;
  opacity:0; transform:translateY(6px);
  transition:opacity .25s ease, transform .3s ease;
}
.page-transition__label b{ font-weight:700 }
.page-transition__label.is-on{ opacity:1; transform:none }
.page-transition__panel{
  position:absolute; inset:0;
  transform:translateY(0%);
  transition:transform .55s cubic-bezier(.76,0,.24,1);
}
.page-transition__panel--1{ background:var(--blue) }
.page-transition__panel--2{ background:var(--cream); transition-delay:.1s }
.page-transition.is-revealed .page-transition__panel--1{ transform:translateY(-100%); transition-delay:.16s }
.page-transition.is-revealed .page-transition__panel--2{ transform:translateY(-100%); transition-delay:0s }

.label{ font-size:var(--fs-label); font-weight:700; margin:0 0 .55em }
.copy{ font-size:var(--fs-body); font-weight:400; line-height:1.3; margin:0 }
.copy + .copy{ margin-top:1.1em }
.copy a{ color:inherit; text-decoration:underline; text-underline-offset:3px }

/* ---------- palco: base 1440×864 comum a home/about/trabalhos ---------- */
.stage{
  position:relative;
  width:100%;
  aspect-ratio:1440 / 864;
  min-height:100vh;
  overflow:hidden;
  isolation:isolate;
  container-type:size;
  background:var(--canvas);
  color:var(--ink);
  --ink-soft:rgba(255,255,255,.4);
  transition:background .4s ease, color .4s ease;
}
html[data-mode="light"] .stage{
  --canvas:var(--paper);
  --ink:var(--blue);
  --ink-soft:rgba(0,47,158,.35);
}

.chip{
  --hover-tilt:-15deg;
  display:inline-block;
  padding:0 11px;
  background:var(--ink);
  color:var(--canvas);
  font-family:var(--font-menu);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.32;
  text-decoration:none;
  transform:rotate(0deg);
  transform-origin:left center;
  transition:transform .34s cubic-bezier(.34,1.7,.5,1);
  will-change:transform;
}
.chip[aria-current], .chip--accent{ font-weight:700 }
.chip:hover, .chip:focus-visible{
  transform:rotate(var(--hover-tilt)) scale(1.08) translateX(5px);
  outline:none;
}
.chip:active{ transform:rotate(calc(var(--hover-tilt) * .4)) scale(1.01); transition-duration:.09s }

.masthead{ position:absolute; inset:0; z-index:5; pointer-events:none }
.masthead > *{ position:absolute; pointer-events:auto }

/* ---------- nav: chip MENU + pill com os links ---------- */
.topnav{
  left:3.82%; top:3.24%;
  display:flex; align-items:stretch;
  height:clamp(36px, 3.6vw, 52px);
}
.topnav .chip{
  display:flex; align-items:center; gap:8px;
  font-size:var(--fs-body); font-weight:700;
  border:0; cursor:pointer; font-family:var(--font-menu);
}
.topnav .chip:hover, .topnav .chip:focus-visible{ transform:none }
.menu-toggle__icon{ width:16px; height:16px; display:grid; place-items:center }
.menu-toggle__icon svg{ width:100%; height:100%; stroke:var(--canvas); fill:none }
.menu-toggle__icon .x-icon{ display:none }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon .burger-icon,
.contact-toggle[aria-expanded="true"] .menu-toggle__icon .burger-icon{ display:none }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon .x-icon,
.contact-toggle[aria-expanded="true"] .menu-toggle__icon .x-icon{ display:block }

.navpill{
  display:flex; align-items:center; gap:clamp(10px,1.3vw,20px);
  margin:0; padding:0;
  list-style:none;
  border:2px solid var(--ink);
  border-left:0;
  max-width:0; overflow:hidden; opacity:0; white-space:nowrap;
  transition:max-width .5s cubic-bezier(.65,0,.35,1),
             padding .5s cubic-bezier(.65,0,.35,1),
             opacity .5s cubic-bezier(.65,0,.35,1);
}
.navpill.is-open{ max-width:600px; padding:0 clamp(14px,1.8vw,26px); opacity:1 }
.navpill a{
  color:var(--ink);
  font-size:var(--fs-body);
  letter-spacing:.02em;
  text-decoration:none;
  transition:opacity .25s ease;
}
.navpill a[aria-current]{ font-weight:700 }
.navpill a:hover, .navpill a:focus-visible{ font-weight:700; outline:none }

/* ---------- marca central: ícone num crachá com "rabinho" de balão ---------- */
.brandmark{
  left:50%; top:3.24%;
  transform:translateX(-50%);
  width:clamp(64px, 6.8vw, 98px);
  aspect-ratio:1;
  display:grid; place-items:center;
  background:var(--blue);
  border:2px solid var(--paper);
}
.brandmark::after{
  content:"";
  position:absolute; left:50%; bottom:-9px; translate:-50% 0;
  width:14px; height:14px;
  background:var(--blue);
  border-right:2px solid var(--paper);
  border-bottom:2px solid var(--paper);
  clip-path:polygon(0 0, 100% 0, 0 100%);
}
.brandmark img{ width:56%; height:56% }

/* ---------- cluster à direita: chip CONTACT + theme toggle ---------- */
.header-right{
  left:auto; right:2.08%; top:3.24%;
  display:flex; align-items:center; gap:clamp(12px,1.4vw,22px);
}
.contact-toggle{
  display:flex; align-items:center; gap:8px;
  font-size:var(--fs-body); font-weight:700;
  border:0; cursor:pointer; font-family:var(--font-menu);
}
.contact-toggle:hover, .contact-toggle:focus-visible{ transform:none }

.theme-row{
  position:static;
  display:flex; align-items:center; gap:10px;
  height:clamp(24px, 2.4vw, 28px);
}
.theme-row__box{ width:clamp(20px,2vw,28px); aspect-ratio:1; border:2px solid var(--ink) }
.theme-row__label{ font-size:var(--fs-body); font-weight:400; letter-spacing:.03em }
.toggle{
  position:relative;
  width:clamp(88px, 8.5vw, 123px); height:100%;
  border:2px solid var(--ink);
  background:transparent;
  cursor:pointer;
  display:flex; align-items:center; padding:2px;
  transition:transform .3s cubic-bezier(.34,1.7,.5,1), border-color .4s ease;
}
.toggle:hover{ transform:rotate(-4deg) scale(1.06) }
.toggle:focus-visible{ outline:2px solid var(--ink); outline-offset:4px }
.toggle .knob{
  aspect-ratio:1; height:100%;
  background:var(--ink);
  margin-left:auto;
  display:grid; place-items:center;
  transition:margin .4s cubic-bezier(.34,1.7,.5,1), background .4s ease;
}
html[data-mode="light"] .stage .toggle .knob{ margin-left:0; margin-right:auto }
.toggle .knob svg{ width:52%; fill:var(--canvas); stroke:var(--canvas) }
.toggle .knob .sun{ display:none }
html[data-mode="light"] .stage .toggle .knob .moon{ display:none }
html[data-mode="light"] .stage .toggle .knob .sun{ display:block }

/* =========================================================
   CABEÇALHO v2 (Figma 124:113 / 124:85) — logo + MENU/links à
   esquerda, [THEME] + toggle à direita. Usado por home e about.
   Medido em --u (1px do Figma escalado pela largura do palco).
   ========================================================= */
.stage{ --u:calc(min(100cqw, var(--page-max)) / 1440) }
/* seção v2: escala pela largura E pela altura — o frame 1440×864
   do Figma sempre cabe inteiro na tela */
.stage--v2{ --u:min(calc(min(100cqw, var(--page-max)) / 1440), calc(100cqh / 864)) }
/* navegador sem container units (cqw): usa a largura da janela — o palco é 100% dela */
@supports not (width:1cqw){
  .stage{ --u:calc(min(100vw, var(--page-max)) / 1440) }
  .stage--v2{ --u:min(calc(min(100vw, var(--page-max)) / 1440), calc(100svh / 864)) }
}

/* SEÇÃO v2 (home/about): altura = tela (nunca menor que o frame
   864 do Figma na escala atual) e conteúdo numa coluna central de
   no máximo 1440 — em telas largas nada cresce além do Figma */
.stage--v2{
  aspect-ratio:auto;
  min-height:0;
  height:100svh;
}
/* REGRA DE DISPOSIÇÃO (site inteiro, igual ao rodapé): quando a tela
   é maior que o frame na escala atual, a sobra NÃO vira margem
   centralizada. As margens laterais crescem proporcionais à tela
   (55 e 30 de 1440, como no Figma) e o resto da sobra fica ENTRE os
   grupos de conteúdo — grupos da esquerda presos à esquerda, os da
   direita presos à direita. Nada estica: tudo segue na escala --u.
   --slack = sobra horizontal; --spread = quanto os grupos da direita
   andam pra direita (sobra menos as duas margens extras). */
.stage--v2{
  --slack:max(0px, 100cqw - 1440 * var(--u));
  --spread:calc(var(--slack) * 1355 / 1440);
}
@supports not (width:1cqw){ .stage--v2{ --slack:max(0px, 100vw - 1440 * var(--u)) } }
.stage--v2 > .masthead{
  top:0; bottom:auto;
  left:calc(var(--slack) * 55 / 1440); right:calc(var(--slack) * 30 / 1440);
  height:calc(864 * var(--u));
}
/* home: a hero ocupa a tela toda (cabeçalho no topo, manchete embaixo) */
.stage--v2 > .masthead.hero{ height:100% }
.site-top{ display:flex; align-items:flex-start; justify-content:space-between }
.site-top__left{ display:flex; align-items:center; gap:calc(27 * var(--u)) }
.site-top__logo{ display:block; width:max(36px, calc(52 * var(--u))); aspect-ratio:1 }
.site-top__logo img{ display:block; width:100%; height:100% }

.site-top .topnav{ height:max(36px, calc(52 * var(--u))) }
.site-top .topnav .chip{
  justify-content:center;
  width:max(64px, calc(90 * var(--u)));
  padding:0;
  font-family:var(--font-mono); font-weight:700;
  font-size:max(14px, calc(20 * var(--u)));
  line-height:normal;
}
.site-top .navpill{ border:1px solid var(--ink); gap:calc(10 * var(--u)) }
.site-top .navpill.is-open{ padding:0 calc(20 * var(--u)) }
.site-top .navpill a{
  font-family:var(--font-menu);
  font-size:max(14px, calc(16 * var(--u)));
  letter-spacing:0;
  text-transform:uppercase;
}

/* toggle (18:415): caixa branca 123×28, barra azul 83×20 + lua 19×19 */
.site-top .theme-row{ height:auto }
.site-top .toggle{
  width:max(88px, calc(123 * var(--u))); height:max(20px, calc(28 * var(--u)));
  border:0; padding:0 calc(11 * var(--u)) 0 calc(5.5 * var(--u));
  gap:calc(10 * var(--u));
  background:var(--ink);
  justify-content:space-between;
}
.site-top .toggle:focus-visible{ outline-offset:4px }
.toggle__bar{
  width:calc(83 / 106.5 * 100%); height:calc(20 / 28 * 100%);
  background:var(--canvas);
  transition:background .4s ease;
}
.toggle__icon{ width:max(14px, calc(19 * var(--u))); aspect-ratio:1; display:grid; place-items:center; flex:none }
.toggle__icon img{ display:block; width:107.9%; height:107.9%; filter:var(--ink-filter) }   /* lua na cor do tema */
.toggle__icon svg{ display:none; width:100%; height:100%; fill:var(--canvas); stroke:var(--canvas) }
html[data-mode="light"] .stage .toggle{ flex-direction:row-reverse; padding:0 calc(5.5 * var(--u)) 0 calc(11 * var(--u)) }
html[data-mode="light"] .stage .toggle__icon img{ display:none }
html[data-mode="light"] .stage .toggle__icon svg{ display:block }

.site-top .theme-row{ gap:calc(12 * var(--u)) }
/* modo claro: os SVGs do Figma são brancos — viram o azul da marca */
html[data-mode="light"] .stage .site-top__logo img{
  filter:var(--ink-filter);
}
@media (max-width:820px){
  .stage{ --u:.75px }
  .stage--v2{ min-height:100svh }
  .stage--v2 > .masthead{ width:auto; height:auto; margin:0 }
  .site-top{ flex-wrap:wrap; gap:16px; width:100% }
  .site-top__left{ flex-wrap:wrap; gap:16px }
  .site-top .topnav{ height:40px }
}

/* =========================================================
   CONTACT — painel lateral que abre ao clicar no chip CONTACT
   (não existe no Figma). 3 blocos empilhados que deslizam da
   direita, cada um com uma cor — mesma ideia de "painel que
   entra/sai da lateral", adaptada pro azul/creme/branco do site
   (sem o verde/preto do exemplo original).
   ========================================================= */
/* Puro CSS (mesma receita do .navpill) — nada de GSAP aqui. Um
   timeline reaproveitado com .clear() pra abrir/fechar é frágil
   (foi exatamente isso que travava o fechamento antes: a animação
   de entrada e a de saída disputavam o mesmo tween e às vezes o
   clique no X não tinha efeito nenhum). Com classe + transition
   isso não tem como travar — o estado É a classe. */
.contact-overlay{
  position:fixed; inset:0; z-index:9500;
  padding:clamp(12px,2vw,20px);
  pointer-events:none;
  visibility:hidden;
  display:flex; flex-direction:column; align-items:flex-end;
  justify-content:center;
  gap:clamp(8px,1.2vw,14px);
  overflow-y:auto;
  transition:visibility 0s linear .7s;
}
.contact-overlay.is-open{ pointer-events:auto; transition-delay:0s }
.contact-overlay__bg{
  position:absolute; inset:0;
  background:rgba(0,20,70,.55);
  opacity:0;
  transition:opacity .4s ease;
}
.contact-overlay.is-open .contact-overlay__bg{ opacity:1; transition-duration:.35s }
.contact-panel{
  width:100%; max-width:420px;
  border:2px solid var(--paper);
  padding:clamp(20px,2.6vw,30px);
  position:relative;
  flex:none;
  transform:translateX(101%);
  transition:transform .5s cubic-bezier(.65,0,.35,1);
}
.contact-overlay.is-open .contact-panel{ transform:translateX(0) }
/* cascata: entra topo→meio→base, sai na ordem contrária (o delay
   "de repouso" de cada painel é usado tanto de ida quanto de volta) */
.contact-panel--top{ transition-delay:.16s }
.contact-panel--mid{ transition-delay:.08s }
.contact-panel--bot{ transition-delay:0s }
.contact-overlay.is-open .contact-panel--top{ transition-delay:0s }
.contact-overlay.is-open .contact-panel--mid{ transition-delay:.08s }
.contact-overlay.is-open .contact-panel--bot{ transition-delay:.16s }
.contact-panel--top{
  background:var(--paper); color:var(--blue);
  display:flex; flex-direction:column; gap:1.1em;
  z-index:3;
}
.contact-panel--mid{
  background:var(--blue); color:var(--paper);
  display:flex; align-items:center; gap:18px;
  z-index:2;
}
.contact-panel--bot{
  background:#00184F;
  color:var(--paper);
  z-index:1;
}
.contact-panel__close{
  position:absolute; top:12px; right:12px;
  width:34px; height:34px;
  display:grid; place-items:center;
  background:var(--blue); border:2px solid var(--paper);
  cursor:pointer; z-index:4;
  padding:0;
}
.contact-panel__close svg{ width:16px; height:16px; stroke:var(--paper) }
.contact-panel__close:hover, .contact-panel__close:focus-visible{ background:var(--paper) }
.contact-panel__close:hover svg, .contact-panel__close:focus-visible svg{ stroke:var(--blue) }
.contact-panel__eyebrow{
  font-size:var(--fs-body); font-weight:700; letter-spacing:.04em;
  margin:0; opacity:.6;
}
.contact-panel__email{
  font-family:var(--font-menu); font-weight:700;
  font-size:clamp(19px,2.6vw,30px);
  line-height:1.15; letter-spacing:-.01em;
  color:var(--blue); text-decoration:none;
  word-break:normal; overflow-wrap:normal;
}
.contact-panel__email:hover, .contact-panel__email:focus-visible{ text-decoration:underline }
.contact-panel__newsletter{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.contact-panel__newsletter label{ font-size:var(--fs-body); white-space:nowrap }
.contact-panel__newsletter input{
  flex:1; min-width:100px;
  border:1.5px solid var(--blue);
  background:transparent; padding:.4em .6em;
  font-family:var(--font-mono); font-size:var(--fs-body); color:var(--blue);
}
.contact-panel__newsletter input::placeholder{ color:rgba(0,47,158,.45) }
.contact-panel__cat{
  width:56px; height:56px; flex:none;
  border:2px solid var(--paper);
  display:grid; place-items:center;
  padding:8px;
}
.contact-panel__cat img{ width:100%; height:100%; filter:brightness(0) invert(1) }
.contact-panel__title{
  font-family:var(--font-menu); font-weight:700;
  font-size:clamp(17px,2.1vw,24px); line-height:1.25; margin:0 0 .25em;
}
.contact-panel__desc{ font-size:var(--fs-body); opacity:.85; margin:0; max-width:32ch }
.contact-panel__social{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:10px 22px;
}
.contact-panel__social a{
  color:var(--paper); text-decoration:underline; text-underline-offset:3px;
  font-size:var(--fs-body);
  transition:transform .3s cubic-bezier(.34,1.7,.5,1);
  display:inline-block;
}
.contact-panel__social a:hover, .contact-panel__social a:focus-visible{ transform:translateX(5px) }

/* rodapé: ver assets/styles/footer.css */

img.missing{ min-height:70px; border:2px dashed rgba(0,47,158,.6) }
img.missing + .missing-tag{
  position:absolute; left:0; top:0; font-size:11px; padding:3px 6px;
  background:#E8452C; color:#fff; white-space:nowrap; z-index:9;
}

/* =========================================================
   RESPONSIVO — só a parte comum (chrome). O que é específico de
   cada página (intro da home, foto/abas do about, grid de
   trabalhos) tem seu próprio bloco @media dentro do <style> local.
   ========================================================= */
@media (max-width:820px){
  /* container-type:size trava a altura do palco em 0 quando ela
     deixa de vir do aspect-ratio (que é removido aqui embaixo) —
     container queries de tamanho exigem que o tamanho seja
     explícito, então sem isso o conteúdo empilhado no mobile
     (masthead virando coluna normal) nunca empurra a altura. Bug
     que já existia antes de qualquer ajuste feito hoje — só
     ninguém tinha testado o site numa tela estreita ainda. */
  .stage{ container-type:normal; aspect-ratio:auto; height:auto; min-height:0; padding:24px 5% 40px }
  .masthead{ position:static; display:flex; flex-direction:column; gap:24px; align-items:flex-start }
  .masthead > *{ position:static }
  .contact-panel{ max-width:100% }
  .topnav{ flex-wrap:wrap; height:auto }
  .navpill{ flex-wrap:wrap }
  .navpill.is-open{ padding:8px clamp(14px,3vw,26px) }
  .brandmark{ margin:0 auto }
  .brandmark::after{ display:none }
  .header-right{ align-self:flex-end }

}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *{ transition-duration:.01ms !important }
}

/* =========================================================
   SETA DE ÂNCORA (Figma 134:2) — seta pixelada "desça". Só os
   quadrados pixel animam (descem e voltam em onda, de cima pra
   baixo); a barra de baixo fica parada, como um chão. Cor = ink
   do tema; usada na hero, no About e na intro.
   ========================================================= */
.anchor-arrow{
  display:block;
  width:max(32px, calc(44 * var(--u, 1px)));
  color:var(--ink, var(--paper));
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.anchor-arrow__svg{ display:block; width:100%; height:auto; overflow:visible; fill:currentColor }
.anchor-arrow__px path{ animation:anchor-px 1.6s cubic-bezier(.45,0,.55,1) infinite }
.anchor-arrow__px .r2{ animation-delay:.12s }
.anchor-arrow__px .r3{ animation-delay:.24s }
.anchor-arrow:hover .anchor-arrow__px path,
.anchor-arrow:focus-visible .anchor-arrow__px path{ animation-duration:.8s }
.anchor-arrow:focus-visible{ outline:2px solid currentColor; outline-offset:6px }
@keyframes anchor-px{
  0%, 100%{ transform:translateY(0) }
  50%     { transform:translateY(4px) }
}
@media (prefers-reduced-motion:reduce){ .anchor-arrow__px path{ animation:none } }

/* =========================================================
   TEMAS DE COR × MODO — dois eixos independentes
   (assets/scripts/preferences.js):
   - html[data-theme] = a COR da marca: azul (padrão) · grafite ·
     vinho · dae ·
     contraste. Troca --blue no site inteiro.
   - html[data-mode]  = escuro (padrão: fundo na cor, texto branco)
     ou light (inverte o palco: fundo branco, texto na cor do tema).
     Rodapé e modais mantêm a cor da marca nos dois modos.
   --ink-filter pinta os SVGs brancos do Figma na cor do tema (modo
   claro); calculado pra cada cor.
   ========================================================= */
:root{ --ink-filter:brightness(0) saturate(100%) invert(12%) sepia(62%) saturate(5530%) hue-rotate(221deg) brightness(88%) contrast(104%) }
html[data-theme="grafite"]{ --ink-filter:brightness(0) saturate(100%) invert(9%) sepia(0%) saturate(2203%) hue-rotate(282deg) brightness(97%) contrast(93%) }
html[data-theme="vinho"]{ --ink-filter:brightness(0) saturate(100%) invert(15%) sepia(43%) saturate(2479%) hue-rotate(313deg) brightness(94%) contrast(101%) }
html[data-theme="dae"]{ --ink-filter:brightness(0) saturate(100%) invert(67%) sepia(32%) saturate(6536%) hue-rotate(323deg) brightness(94%) contrast(94%) }
html[data-theme="contraste"]{ --ink-filter:brightness(0) }
html[data-theme="grafite"]{ --blue:#1E1E1E }
html[data-theme="vinho"]{ --blue:#6B1730 }
/* dae = a cor do mascote (o gato coral) */
html[data-theme="dae"]{ --blue:#EA6858 }
html[data-theme="contraste"]{ --blue:#000000; --paper:#FFFFFF; --cream:#FFFFFF }
html[data-theme="contraste"] .grain{ display:none }
html[data-theme="contraste"] .about-panel__muted{ color:inherit }
html[data-theme="contraste"] a{ text-decoration:underline !important; text-underline-offset:3px }
/* links em bloco (cartões, logo, seta) não sublinham o conteúdo inteiro */
html[data-theme="contraste"] a.post__box, html[data-theme="contraste"] a.site-top__logo,
html[data-theme="contraste"] a.hero-carousel__expand{ text-decoration:none !important }
html[data-theme="contraste"] :focus-visible{ outline:3px solid currentColor !important; outline-offset:3px !important }
body{ transition:background-color .4s ease }

/* ---------- botão de preferências (o quadradinho do "THEME") ----------
   Quadrado 28px com borda de 2px (o mesmo do Figma), agora com o
   código do idioma dentro; abre o painel de preferências. */
.prefs-btn{
  display:flex; align-items:center; gap:calc(19 * var(--u, 1px));
  min-width:calc(104 * var(--u, 1px));
  padding:0; border:0; background:none; cursor:pointer;
  color:var(--ink, var(--paper)); font-family:var(--font-menu);
}
.prefs-btn__code{
  display:grid; place-items:center; flex:none;
  width:max(24px, calc(28 * var(--u, 1px))); aspect-ratio:1;
  border:2px solid currentColor;
  font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.02em;
  transition:background .25s ease, color .25s ease;
}
.prefs-btn__label{ font-size:max(14px, calc(16 * var(--u, 1px))); text-transform:uppercase; white-space:nowrap }
.prefs-btn:hover .prefs-btn__code, .prefs-btn:focus-visible .prefs-btn__code{ color:var(--canvas, var(--blue)); background:var(--ink, var(--paper)) }
.prefs-btn:focus-visible{ outline:2px solid var(--ink, var(--paper)); outline-offset:4px }

/* ---------- seletor de idioma ENG / PTBR (Figma 96:180 / 96:183) ----------
   90×52, Mono Bold 20; selecionado = bloco branco com texto azul. */
.lang-switch{ display:flex }
.lang-switch__opt{
  width:90px; height:52px;
  display:grid; place-items:center;
  padding:0; cursor:pointer;
  font-family:var(--font-mono); font-size:20px; font-weight:700;
  background:transparent; color:var(--paper);
  border:1px solid var(--paper);
  transition:background .25s ease, color .25s ease;
}
.lang-switch__opt + .lang-switch__opt{ margin-left:-1px }
.lang-switch__opt[aria-checked="true"]{ background:var(--paper); color:var(--blue) }
.lang-switch__opt:not([aria-checked="true"]):hover{ background:rgba(255,255,255,.12) }
.lang-switch__opt:focus-visible{ outline:2px solid var(--paper); outline-offset:3px; position:relative; z-index:1 }

/* ---------- painel de preferências ----------
   Mesma linguagem do modal de certificado: azul, borda 1px, tag
   branca no título, fechar do rodapé; entra em cascata. */
.prefs{
  width:min(340px, calc(100vw - 32px));
  max-height:calc(100dvh - 32px);
  margin:auto; padding:0;
  border:1px solid var(--paper);
  background:var(--blue); color:var(--paper);
  font-family:var(--font-mono);
  overflow:auto; overscroll-behavior:contain;
}
/* entrada: caixa sobe com mola, depois o conteúdo em cascata.
   saída = espelho: conteúdo sai em cascata invertida, depois a
   caixa e o fundo escuro descem/somem juntos */
.prefs{ opacity:0; transform:translateY(12px) scale(.98); transition:opacity .3s ease, transform .4s cubic-bezier(.34,1.4,.5,1) }
.prefs.is-open{ opacity:1; transform:none }
.prefs::backdrop{ background:rgba(0,0,0,.55); opacity:0; transition:opacity .3s ease }
.prefs.is-open::backdrop{ opacity:1 }
.prefs > *{ opacity:0; transform:translateY(8px); transition:opacity .3s ease, transform .4s cubic-bezier(.34,1.4,.5,1) }
.prefs.is-open > *{ opacity:1; transform:none }
.prefs.is-open > :nth-child(1){ transition-delay:.08s }
.prefs.is-open > :nth-child(2){ transition-delay:.13s }
.prefs.is-open > :nth-child(3){ transition-delay:.18s }
.prefs.is-closing > *{ transition:opacity .18s ease, transform .22s ease; transform:translateY(-6px) }
.prefs.is-closing > :nth-child(3){ transition-delay:0s }
.prefs.is-closing > :nth-child(2){ transition-delay:.05s }
.prefs.is-closing > :nth-child(1){ transition-delay:.1s }
.prefs.is-closing{ transition:opacity .22s ease .2s, transform .25s ease .2s; transform:translateY(12px) scale(.98) }
.prefs.is-closing::backdrop{ transition-delay:.2s }

/* cabeçalho: tag branca + fechar */
.prefs__head{ display:flex; align-items:center; justify-content:space-between; padding:14px 14px 14px 16px; border-bottom:1px solid var(--paper) }
.prefs__title{ margin:0; padding:1px 8px; background:var(--paper); color:var(--blue); font-size:13px; font-weight:700; letter-spacing:.04em }
.prefs__close{ width:22px; height:22px; padding:0; border:0; background:none; cursor:pointer; transition:transform .3s cubic-bezier(.34,1.7,.5,1) }
.prefs__close img{ display:block; width:100%; height:100%; filter:brightness(0) invert(1) }
.prefs__close:hover, .prefs__close:focus-visible{ transform:scale(1.12) rotate(-8deg); outline:2px solid var(--paper); outline-offset:3px }

/* cada grupo = linha: rótulo à esquerda, controles à direita */
.prefs__section{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px }
.prefs__section + .prefs__section{ border-top:1px solid rgba(255,255,255,.35) }
.prefs__label{ margin:0; font-size:12px; font-weight:700; letter-spacing:.06em }
.prefs .lang-switch__opt{ width:56px; height:30px; font-size:13px }

/* cores: só os quadrados; o nome fica no aria-label/tooltip */
.theme-swatches{ display:flex; gap:6px }
.theme-swatch{
  position:relative;
  width:30px; height:30px; padding:0; cursor:pointer;
  display:grid; place-items:center;
  background:var(--a); color:var(--b);
  border:1px solid var(--b);
  font-family:var(--font-mono); font-size:11px; font-weight:700;
  transition:transform .3s cubic-bezier(.34,1.7,.5,1);
}
.theme-swatch:hover{ transform:translateY(-2px) }
.theme-swatch[aria-checked="true"]{ outline:2px solid var(--paper); outline-offset:2px }
.theme-swatch:focus-visible{ outline:2px dashed var(--paper); outline-offset:2px }
@media (prefers-reduced-motion:reduce){
  .prefs, .prefs > *, .prefs::backdrop{ transition:none !important; opacity:1; transform:none }
}

/* =========================================================
   KIT GRÁFICO — assets/icons/kit/*.svg (grade de pixels, cantos
   retos). Aplicados como máscara pintada com currentColor: seguem
   a cor/modo do tema e NUNCA esticam (mask-size:contain + aspect-
   ratio do próprio desenho). Texto vai por cima, em HTML (traduzível
   e legível por leitor de tela). Vitrine: kit.html
   ========================================================= */
.k-shape{
  display:inline-grid; place-items:center; position:relative;
  color:var(--ink, var(--paper));
}
.k-shape::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:currentColor;
  -webkit-mask:var(--k-src) center / contain no-repeat;
          mask:var(--k-src) center / contain no-repeat;
}
.k-shape > *{ position:relative; z-index:1; color:var(--canvas, var(--blue)) }
.k-balao   { --k-src:url("../icons/kit/balao.svg");     aspect-ratio:120 / 68 }
.k-balao > *{ margin-bottom:22% }                       /* centra no corpo, acima do rabicho */
.k-selo    { --k-src:url("../icons/kit/selo.svg");      aspect-ratio:1 }
.k-ticket  { --k-src:url("../icons/kit/ticket.svg");    aspect-ratio:200 / 120 }
.k-degraus { --k-src:url("../icons/kit/degraus.svg");   aspect-ratio:128 / 64 }
.k-degraus > *{ margin:25% 12.5% 0 0 }                  /* sobre a caixa da frente */
.k-mancha  { --k-src:url("../icons/kit/mancha.svg");    aspect-ratio:1152 / 720 }
.k-asterisco{ --k-src:url("../icons/kit/asterisco.svg"); aspect-ratio:1 }

/* data empilhada "20 / 26" — tipográfica, sem SVG */
.k-date{
  display:inline-grid; grid-template-columns:auto; line-height:.95;
  font-family:var(--font-mono); font-weight:700; letter-spacing:-.02em;
  padding-right:.35em; border-right:2px solid currentColor;
}

/* =========================================================
   PAGINAÇÃO (assets/scripts/pager.js) — Blog e Trabalhos
   ========================================================= */
/* ---------- paginação: Nº das páginas em caixas + setas ---------- */
.pager{
  margin-top:calc(64 * var(--u));
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.pager[hidden]{ display:none }
.pager__info{ margin:0; font-size:max(13px, calc(14 * var(--u))); letter-spacing:.04em; text-transform:uppercase }
.pager__info b{ font-variant-numeric:tabular-nums }
.pager__nav{ display:flex; align-items:center; gap:8px }
.pager__pages{ display:flex; gap:8px; list-style:none; margin:0; padding:0 }
.pager__btn{
  min-width:40px; height:40px; padding:0 10px;
  display:inline-grid; place-items:center;
  border:1px solid var(--ink); background:transparent; color:var(--ink);
  font-family:var(--font-mono); font-size:15px; font-weight:700; font-variant-numeric:tabular-nums;
  cursor:pointer;
  transition:background .2s ease, color .2s ease, transform .3s cubic-bezier(.34,1.7,.5,1);
}
.pager__btn:hover:not(:disabled){ transform:translateY(-2px) }
.pager__btn[aria-current="page"]{ background:var(--ink); color:var(--canvas) }
.pager__btn:disabled{ opacity:.35; cursor:default }
.pager__btn:focus-visible{ outline:2px solid var(--ink); outline-offset:3px }
.pager__btn svg{ width:16px; height:16px; fill:currentColor }
.pager__btn--prev svg{ transform:rotate(180deg) }

/* troca de página: saída em cascata invertida, entrada em cascata */
.is-out{ opacity:0; transform:translateY(-10px); transition:opacity .2s ease, transform .25s ease }
.is-in{ animation:post-in .5s cubic-bezier(.34,1.4,.5,1) both }
@keyframes post-in{ from{ opacity:0; transform:translateY(14px) } }
@media (prefers-reduced-motion:reduce){ .post.is-out, .is-in{ transition:none; animation:none } }
@media (max-width:820px){ .pager{ margin-top:40px; justify-content:center } }

/* =========================================================
   CONTEÚDO DO CMS EM DOIS IDIOMAS — o build escreve as duas versões
   (data-lang="pt" / "en"); aparece só a do idioma escolhido.
   ========================================================= */
html:not([lang="en"]) [data-lang="en"], html:not([lang="pt-BR"]) [data-lang="pt"], html:not([lang="zh-CN"]) [data-lang="zh"]{ display:none !important }
.sr-only{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }

/* =========================================================
   CONTATO — balão flutuante (kit) + painel (assets/scripts/contact.js)
   ========================================================= */
.hello-fab{
  position:fixed; right:24px; bottom:24px; z-index:900;
  width:132px; padding:0; border:0; background:none; cursor:pointer;
  color:var(--paper);
  opacity:0; transform:translateY(16px) scale(.9); pointer-events:none;
  transition:opacity .3s ease, transform .45s cubic-bezier(.34,1.7,.5,1);
  filter:drop-shadow(0 6px 0 rgba(0,0,0,.18));
}
.hello-fab.is-on{ opacity:1; transform:none; pointer-events:auto }
.hello-fab__shape{ width:100%; color:var(--paper) }
.hello-fab__shape > b{ color:var(--blue); font-family:var(--font-mono); font-size:16px; letter-spacing:.02em }
.hello-fab:hover .hello-fab__shape, .hello-fab:focus-visible .hello-fab__shape{ animation:fab-wiggle .5s ease }
.hello-fab:focus-visible{ outline:2px dashed var(--paper); outline-offset:6px }
@keyframes fab-wiggle{ 0%,100%{ transform:rotate(0) } 30%{ transform:rotate(-6deg) } 60%{ transform:rotate(4deg) } }
html[data-mode="light"] .hello-fab .hello-fab__shape{ color:var(--blue) }
html[data-mode="light"] .hello-fab .hello-fab__shape > b{ color:var(--paper) }
@media (prefers-reduced-motion:reduce){ .hello-fab{ transition:opacity .2s ease } .hello-fab:hover .hello-fab__shape{ animation:none } }
@media (max-width:600px){ .hello-fab{ width:108px; right:14px; bottom:14px } }

.contact{
  width:min(560px, calc(100vw - 32px)); max-height:calc(100dvh - 32px);
  margin:auto; padding:0; border:1px solid var(--paper);
  background:var(--blue); color:var(--paper); font-family:var(--font-mono);
  overflow:auto; overscroll-behavior:contain;
  opacity:0; transform:translateY(14px) scale(.98);
  transition:opacity .3s ease, transform .4s cubic-bezier(.34,1.4,.5,1);
}
.contact.is-open{ opacity:1; transform:none }
.contact::backdrop{ background:rgba(0,0,0,.55); opacity:0; transition:opacity .3s ease }
.contact.is-open::backdrop{ opacity:1 }
.contact > *{ opacity:0; transform:translateY(8px); transition:opacity .3s ease, transform .4s cubic-bezier(.34,1.4,.5,1) }
.contact.is-open > *{ opacity:1; transform:none }
.contact.is-open > :nth-child(2){ transition-delay:.06s }
.contact.is-open > :nth-child(3){ transition-delay:.12s }
.contact.is-closing > *{ transition:opacity .18s ease, transform .22s ease; transform:translateY(-6px) }
.contact.is-closing{ transition:opacity .22s ease .18s, transform .25s ease .18s; transform:translateY(14px) scale(.98) }
.contact.is-closing::backdrop{ transition-delay:.18s }
.contact__head{ display:flex; align-items:center; justify-content:space-between; padding:14px 14px 14px 18px; border-bottom:1px solid var(--paper) }
.contact__title{ margin:0; padding:1px 8px; background:var(--paper); color:var(--blue); font-size:14px; font-weight:700; letter-spacing:.04em }
.contact__close{ width:22px; height:22px; padding:0; border:0; background:none; cursor:pointer; transition:transform .3s cubic-bezier(.34,1.7,.5,1) }
.contact__close img{ display:block; width:100%; height:100%; filter:brightness(0) invert(1) }
.contact__close:hover, .contact__close:focus-visible{ transform:scale(1.12) rotate(-8deg); outline:2px solid var(--paper); outline-offset:3px }
.contact__quick, .contact__form, .contact__done{ padding:18px }
.contact__quick{ border-bottom:1px solid rgba(255,255,255,.35) }
.contact__label{ margin:0 0 10px; font-size:12px; font-weight:700; letter-spacing:.06em }
.contact__mail{ display:flex; align-items:stretch; border:1px solid var(--paper) }
.contact__mail a{ flex:1; padding:10px 12px; color:var(--paper); font-size:15px; font-weight:700; text-decoration:none; word-break:break-all }
.contact__mail a:hover, .contact__mail a:focus-visible{ text-decoration:underline; text-underline-offset:3px; outline:none }
.contact__copy{ padding:0 14px; border:0; border-left:1px solid var(--paper); background:var(--paper); color:var(--blue); font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.04em; cursor:pointer }
.contact__copy:hover, .contact__copy:focus-visible{ background:transparent; color:var(--paper); outline:none }
.contact__social{ list-style:none; margin:12px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px }
.contact__social a{ display:inline-block; padding:4px 10px; border:1px solid var(--paper); color:var(--paper); font-size:13px; font-weight:700; text-decoration:none; transition:background .2s ease, color .2s ease }
.contact__social a:hover, .contact__social a:focus-visible{ background:var(--paper); color:var(--blue); outline:none }
.contact__form{ display:flex; flex-direction:column; gap:12px }
.contact__form[hidden], .contact__done[hidden], .contact__error[hidden]{ display:none }
.contact__row{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.contact__field{ display:flex; flex-direction:column; gap:6px; font-size:12px; font-weight:700; letter-spacing:.04em }
.contact__field input, .contact__field textarea{
  width:100%; padding:9px 10px; border:1px solid var(--paper); border-radius:0;
  background:transparent; color:var(--paper); font:inherit; font-size:15px; font-weight:400; letter-spacing:0; resize:vertical;
}
.contact__field input:focus, .contact__field textarea:focus{ outline:2px solid var(--paper); outline-offset:2px }
.contact__field [aria-invalid="true"]{ border-width:2px; border-style:dashed }
.contact__types{ margin:0; padding:0; border:0; display:flex; flex-wrap:wrap; gap:6px }
.contact__types legend{ margin-bottom:6px; padding:0; font-size:12px; font-weight:700; letter-spacing:.04em }
.contact__types label{ position:relative }
.contact__types input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer }
.contact__types span{ display:inline-block; padding:5px 10px; border:1px solid var(--paper); font-size:13px; font-weight:700; transition:background .2s ease, color .2s ease }
.contact__types input:checked + span{ background:var(--paper); color:var(--blue) }
.contact__types input:focus-visible + span{ outline:2px dashed var(--paper); outline-offset:3px }
.contact__error{ margin:0; padding:8px 10px; border:1px dashed var(--paper); font-size:13px }
.contact__send{
  align-self:flex-start; min-height:44px; padding:0 18px;
  border:1px solid var(--paper); background:var(--paper); color:var(--blue);
  font-family:var(--font-mono); font-size:14px; font-weight:700; letter-spacing:.04em; cursor:pointer;
  transition:transform .3s cubic-bezier(.34,1.7,.5,1);
}
.contact__send:hover, .contact__send:focus-visible{ transform:translateX(4px); outline:none }
.contact__send:focus-visible{ box-shadow:0 0 0 2px var(--blue), 0 0 0 4px var(--paper) }
.contact__done{ display:flex; flex-direction:column; align-items:flex-start; gap:8px }
.contact__done p{ margin:0; font-size:15px }
.contact__done-icon{ width:56px; color:var(--paper); animation:done-pop .5s cubic-bezier(.34,1.7,.5,1) }
@keyframes done-pop{ from{ transform:scale(.4) rotate(-20deg); opacity:0 } }
.contact__done-title{ font-weight:700; font-size:18px !important }
@media (max-width:520px){ .contact__row{ grid-template-columns:1fr } }
@media (prefers-reduced-motion:reduce){ .contact, .contact > *, .contact::backdrop{ transition:none !important; opacity:1; transform:none } }


/* =========================================================
   ÍCONES DO SET (assets/icons/set/) — máscara pintada com
   currentColor: seguem a cor e o modo do tema, sem esticar.
   ========================================================= */
.ic{ display:inline-block; flex:none; background:currentColor; -webkit-mask:var(--ic) center / contain no-repeat; mask:var(--ic) center / contain no-repeat }
.ic-olho{ --ic:url("../icons/set/olho.svg"); aspect-ratio:1 }
.ic-aspas{ --ic:url("../icons/set/aspas.svg"); aspect-ratio:85.5 / 63.2 }
.ic-sorriso{ --ic:url("../icons/set/sorriso.svg"); aspect-ratio:1 }
.ic-sol{ --ic:url("../icons/set/sol.svg"); aspect-ratio:1 }
/* botão de tema: sol do set no modo claro */
.toggle__icon .ic-sol{ display:none; width:100%; color:var(--canvas) }
html[data-mode="light"] .stage .toggle__icon .ic-sol{ display:block }


/* chinês: caracteres CJK com a fonte do sistema (o Mono não tem), sem
   espaçamento extra de letra e com entrelinha um pouco maior */
html[lang="zh-CN"] body, :lang(zh-CN){ font-family:"JetBrains Mono", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif }
:lang(zh-CN){ letter-spacing:0 !important }
html[lang="zh-CN"] .b-text, html[lang="zh-CN"] .entry-lede{ line-height:1.8 }
.lang-switch__opt[lang="zh-CN"]{ font-family:"Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif }


/* sem barras de rolagem nativas do navegador em lugar nenhum (fogem da
   estética do site). A rolagem continua: roda do mouse, toque, teclado
   e a rolagem suave do Lenis. */
*{ scrollbar-width:none }
*::-webkit-scrollbar{ display:none; width:0; height:0 }